#M5stack uiflow文字背景のくせ
こんにちは、お疲れ様です。
M5stackを入手して使い勝手を試すため、ちょこちょこ触ってていますが、
その中でつまづいたことを自分なりの対処法をしたのでその備忘録。
そのうちアップデートされてこういう問題も解消されるかもしれませんが、それまで有効なテクニック。
尚、私が試したのは、uiflow v1.4.5です。
ちなみに、micropythonでもblockyでも結果は同じなので、今回せっかくなのでblockyで説明してます。
（そんなに違いはないですが、M5stackらしくということで）
##文字の背景について
さて、M5stackのメインLCDに文字を表示させるには以下の方法があると思います。
・Graphic の lcd.print を使って表示
・UIの label を使って表示
これが手軽なところでしょうか。
##まずはgraphicで文字を表示
結論はUIの方を使うのですが、筋道立てるために
先に上手くいかない方（いかなかった方）の
まずGraphicで文字を表示します。
こうですね。
背景色を黒色にしていると気が付きませんが、背景色を変えると愕然とします。
Graphicでは、文字の背景が”黒”になります。
だ、ダサい・・・
このGraphicの文字背景（黒色）はUIの背景色との因果関係もなく、とにかく黒になるようです。
これ、同じくGraphicで塗りなおしたらそもそも表示したい文字も消えちゃうし、その上から文字表示したらまた黒くなる・・・
つまりprint.lcdの中身の問題なのでそこをいじらないとどうしようもないです。（正直ショボい・・・）
##UIの labelを使用して表示
次に、UIのlabelで文字を表示させると
とても簡単ですね。 マウスで配置するだけ。
ところが、下地に別の色を入れてこの文字を変更するとある事に気が付きます。
（※rectangle0は変更するlabelに被さる様にしています）
##残像が・・・
labelの文字を変更した時点でその変更する前の文字が残像のように残ります。
注目すべきは、この残像が背景色と同じということです。
この現象は、labelの置かれている場所が、「背景色では無い」時に起こります。
つまり、UIのlabelは以下の手順を踏んでいるということがわかります。
① 現在の文字を背景色で上書き
↓
② 変更後の文字で描画色で上書き
この①②の工程が一つで、label showの処理だということがわかります。
ちなみに、「本当にそうか？」という検証がてら
・文字変更をする前に一度塗りつぶし
・変更を何回か行う
などやってみましたが結果は同じ。 上記の①②の処理が一つになっている以上、避けられません。
##では、どうやって対処するか
もちろん「pythonなんだしライブラリを修正する」とか、「uiflowを諦める」とか、「blockyなんた糞」なんていうことも有りかもしれませんが、やはりせっかくIOTなM5stackなんだし、blockyでやりたいじゃないですか！！
そこで私が考えた手順がこれです。
①変更したいlabelを画面外に移動
↓
②元の場所をRectとかで塗りつぶす
↓
③画面の外でlabelを変更する
↓
④変更したlabelを元の場所に戻す
（※rectangle0は変更するlabelに被さる様にしています）
labelの描画の原理が透過色ではなく、「上書き描画」っていうことを利用したやり方でした。
##まとめ
本音をいうと、透過色が使えればそれでよいのだけど・・・pngとかの活用も広がるので至急対応を望む！！
EOL