クリエイター手抜きプロジェクト[595]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/

今年の茸の季節が実質終了。もう、山で茸採る人もほとんどいません。なので、茸を残しておいても誰も採りません。が、代償として茸の菌がふりまかれずに、どんどん生える茸が減るという悪循環。もちろん、茸の種類にもよりますが。

数年前から茸の菌を振りまきながら歩いているのですが、ようやく実験(?)の成果が出てきた感じです。こういうのは10年単位とかの長丁場。IT系にはもっともそぐわない世界かもしれません。

obnizの本が発売されましたので、興味ある人はぜひどうぞ。あと、M5Stackの本も同時に発売されているので、これも興味ある方はどうぞ。M5StickCは入手しにくいので、そこが解消されるといいんですが...

・みんなのobniz入門
https://www.amazon.co.jp/dp/4865942165/

・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/