クリエイター手抜きプロジェクト[592]IoT M5StickC編 UIFlowで時計を作成する(後編)/古籏一浩

投稿:  著者:  読了時間:8分(本文:約3,800文字)



今回こそ(?)M5StickCとUIFlowを使って、簡単な時計を作成します。前回はファームウェアの書き込みや、設定が完了したところまで説明しました。UIFlowを使って開発するには以下のページにWebブラウザでアクセスします。

http://flow.m5stack.com/

初めての場合は、設定ダイアログが出てきます。M5StickCの画面に表示されているAPIキーを入力し、Deviceの欄でCoreになっている項目をStick-Cにします。OKボタンを押すと、M5StickCが画面左側に表示されます。





UIFlowの基本的な使い方はM5Stackの時と同じですが、M5StickCの場合、表示されるカテゴリと、その内容が異なります。特にハードウェアのカテゴリは、M5StickC用になっています。また、M5Stackにあったモジュールのカテゴリはありません。

あと、バージョン1.3.2では使えませんが、バージョン1.3.5以降では接続するユニット(Hat:ハット)を追加すると、C-HATというカテゴリが作成されます。このカテゴリはHatを追加した時のみ表示されます。

今回はHatは使わないので、バージョン1.3.2を使って時計を作成します。なお、作成する時計はデジタル時計です。

時計を作成する前に、M5StickCの時刻を設定しておく必要があります。ハードウェアのカテゴリをクリックして、表示されるRTCの項目をクリックします。

年の設定〜2番目の設定という大きめのブロックがあります。これを「Setup」ブロックの下につなげます。設定したい時間を入力します。入力したら、画面右上にある▼の実行ボタンをクリックします。

これで、M5StickCに時間が設定されます。一度設定してしまえば、電源を落としても大丈夫です。

M5StickCの液晶画面に表示する時計ですが、M5StickCの画面は狭いので時と分だけにします。時と分の数値の間には:(コロン)を表示します。

時を表示するためにラベルを使います。画面左上にあるLabelのアイコンをドラッグして、M5StickCの画面まで持って行きます。すると、画面にラベルが表示されます。このラベルは回転することができます。M5StickCの画面は狭くて横長なので、回転機能は助かります。

時を表示するラベルの設定は以下のようになります。

name:label0
x:55
y:5
color:白色
text:20
font:DejaVuSans 40
rotation:90
layer:4

同様に時と分を区切る:(コロン)もラベルとして配置します。この設定は、以下のようになります。

name:label1
x:55
y:65
color:白色
text::
font:DejaVuSans 40
rotation:90
layer:5

最後に分を表示するラベルを配置し、以下のように設定します。

name:label2
x:55
y:83
color:白色
text:0
font:DejaVuSans 40
rotation:90
layer:6

これでラベルの準備は完了です。次に、イベントのカテゴリから「くりかえし」ブロックを「Setup」ブロックの下にくっつけます。繰り返しの中に、時と分を表示するブロックを入れます。

ラベルに文字を表示するには、UIのカテゴリをクリックして表示されるラベルの項目をクリックします。「ラベル[label0]に"Hello M5”を表示」ブロックを「くりかえし」ブロック内に入れます。

"Hello M5”の部分に「時間」のブロックを入れます。「時間」のブロックは、ハードウェアのカテゴリのRTCの項目をクリックすると出てきます。

同様に「ラベル[label0]に"Hello M5”を表示」ブロックを配置し、label2には分を表示するように設定します。

これで完成です。実行ボタンを押して、動作を確認してみてください。無事に時計が表示されたでしょうか。分が消えてしまった場合には、ラベルの表示位置を:(コロン)と重ならないようにずらしてみてください。ずらした後に、再度実行してください。

なお、今回のプログラムをPythonコードで表示すると、以下のようになります。

────────────────
from m5stack import *
from m5ui import *
from uiflow import *
setScreenColor(0x0024ff)
label0 = M5TextBox(55, 5, "20", lcd.FONT_DejaVu40,0xFFFFFF, rotate=90)
label1 = M5TextBox(55, 65, ":", lcd.FONT_DejaVu40,0xFFFFFF, rotate=90)
label2 = M5TextBox(55, 83, "00", lcd.FONT_DejaVu40,0xFFFFFF, rotate=90)
while True:
label0.setText(str(rtc.now()[3]))
label2.setText(str(rtc.now()[4]))
wait_ms(2)
────────────────

バージョン1.3.2では、なぜか「秒」を表示するブロックがありません。Pythonであれば、上記のコードでstr(rtc.now()[4])をstr(rtc.now()[5])にすると秒を表示することができます。

分と秒の表示なら以下のようになります。

────────────────
from m5stack import *
from m5ui import *
from uiflow import *
setScreenColor(0x0024ff)
label0 = M5TextBox(55, 5, "20", lcd.FONT_DejaVu40,0xFFFFFF, rotate=90)
label1 = M5TextBox(55, 65, ":", lcd.FONT_DejaVu40,0xFFFFFF, rotate=90)
label2 = M5TextBox(55, 83, "00", lcd.FONT_DejaVu40,0xFFFFFF, rotate=90)
while True:
label0.setText(str(rtc.now()[4]))
label2.setText(str(rtc.now()[5]))
wait_ms(2)
────────────────

ラベルの文字を小さくして、時分秒を表示してみるとよいでしょう。


【古籏一浩】openspc@alpha.ocn.ne.jp
http://www.openspc2.org/

このテキストが掲載される頃には、UIFlowも1.4.0にバージョンアップされていて、状況が変わってそうな気もしてます(9/29に確認したらβ版のままでした。この原稿はいつ書いたものでしょう?)

ちなみに、UIFlowはβ版のまま放り投げられ、次にバージョンになってしまうということがあったりします。

とりあえず稲刈りは終了したので、あとは脱穀と藁切ってかき混ぜるだけ。コンバインでの刈り取りだと乾燥機が必要で、千葉県のように停電になってしまうとお手上げ。

うちはバインダーで刈り取って天日干しなので、電気なくても大丈夫。最悪の状態でも千歯扱きだけあれば、どうにかなりそうなレベル(体力と人数は別)やはり、いざという時のために古い道具は残しておくべきかなと思います。

・InDesign自動化サンプルプログラム逆引きリファレンス上/下
https://www.amazon.co.jp/dp/4844396846/
https://www.amazon.co.jp/dp/4844396854/

・創って学ぼうプログラミング
https://news.mynavi.jp/series/makeprogram

・みんなのIchigoLatte入門 JavaScriptで楽しむゲーム作りと電子工作
https://www.amazon.co.jp/dp/4865940936
[正誤表]
http://www.openspc2.org/book/error/ichigoLatte/

・After Effects自動化サンプルプログラム 上巻、下巻
https://www.amazon.co.jp/dp/4844397591
https://www.amazon.co.jp/dp/4844397605

・IchigoLatteでIoT体験
https://www.amazon.co.jp/dp/B06X3X1CHP
http://digiconcart.com/dccartstore/cart/info/2561/218591

・みんなのIchigoJam入門 BASICで楽しむゲーム作りと電子工作
http://www.amazon.co.jp/dp/4865940332/

・Photoshop自動化基本編
http://www.amazon.co.jp/dp/B00W952JQW/

・Illustrator自動化基本編
http://www.amazon.co.jp/dp/B00R5MZ1PA/

・4K/ハイビジョン映像素材集
http://www.openspc2.org/HDTV/

・クリエイター手抜きプロジェクト
http://www.ope
・クリエイター手抜きプロジェクト
http://www.openspc2.org/projectX/