クリエイター手抜きプロジェクト[596]IoT M5StickC編 UIFlow1.4.0とHatで温度計を作成する
── 古籏一浩 ──

投稿:  著者:



今回は、M5StickCとUIFlow 1.4.0を使って温度計を作成します。ただし、M5StickCには標準では温度計測機能は装備されていません。そこで、M5StickCで使えるHatを使います。

Hatはモジュールで、M5StickCにひとつだけ接続することができます。今回使用するのは以下のHatです。

・M5StickC ENV Hat(DHT12/BMP280/BMM150搭載)
https://www.switch-science.com/catalog/5755/






M5StickC用のHatとしては、他にも以下のものがあります。PIR Hatは人感センサーです。

・M5StickC Speaker Hat(PAM8303搭載)
https://www.switch-science.com/catalog/5754/


・M5StickC PIR Hat(AS312搭載)
https://www.switch-science.com/catalog/5756/


この他にもM5StickC用のHatはありますので、調べてみるとよいでしょう。

さて、ENV HatをM5StickCに取り付けます。差し込むだけなので簡単です。次にM5StickCのファームウェアを、UIFlow 1.4.0用に書き換えます。古いファームウェアや、他のファームウェア(最初から入っているファームウェアなど)では動作しません。

書き換えたら、前々回のM5StickC編の回を参照して、WiFiなどの設定を行って下さい。WiFi接続を終えたら、以下のページにWebブラウザでアクセスします。

http://flow.m5stack.com/


左上にUIFlowのバージョンが書かれていますので、1.4.0以上かどうか確認してください。もし、これ以前のバージョンの場合は、右上にあるVER←→のアイコンをクリックすると、バージョンを切り替えることができます。

これで開発の準備は完了です。さっそく、温度計のプログラムを作りましょう。最初にHatのモジュールを読み込ませます。左側にUnitsとHatという文字があります。Hatをクリックします。

クリックしたら、その下にある+ボタンをクリックします。するとHatの一覧が表示されます。その中からENVと書かれたアイコンをクリックします。

すると、アイコンの右上にチェックマークが入ります。チェックマークが入ったら、OKボタンをクリックします。すると、元の画面に戻ります。

次に、左上にある小さいLabelアイコンを、M5StickCの画面にドラッグドロップします。表示位置を決めたらクリックします。文字は90度回転させます。

ENV Hatは温度、湿度、気圧を表示できるので、この3つを表示させてみましょう。同様にあと2つラベルを配置してください。ラベル名はlabel0, label1, label2です。

「イベント」のカテゴリをクリックし、「くりかえし」ブロックを「Setup」ブロックの下にくっつけます。

次に「UI」のカテゴリをクリックし、「ラベル」の項目から「ラベル[label0]に"Hello M5"を表示」を「くりかえし」ブロック内にくっつけます。

次にC-HATのカテゴリをクリックします。「ENV」という項目が表示されるのでクリックします。以下の3つのブロックが表示されます。

Get [hat_env0] Pressure 気圧の値
Get [hat_env0] Temperature 温度の値
Get [hat_env0] Humidity 湿度の値

ここから「Get [hat_env0] Temperature」ブロックを、「ラベル[label0]に"Hello M5"を表示」の"Hello M5"の部分にはめこみます。

湿度と気圧も、同様にブロックを配置します。ブロックをすべて配置したら完成です。右上にある▼の実行ボタンをクリックすると、M5StickCの画面にリアルタイムに温度・湿度・気圧が表示されます。

もちろん、M5StickCがネットワークに繋がってないと動作しません。UIFlowの左下に、Disconnectと赤い文字で表示されている場合は、その文字をクリックしてM5StickCをWiFiに再接続してください。

Pythonコードの場合は、以下のようになります。このコードをコピー&ペーストしても動作します。

────────────────
from m5stack import *
from m5ui import *
from uiflow import *
import hat
setScreenColor(0x111111)
hat_env0 = hat.get(hat.ENV)
label0 = M5TextBox(70, 10, "Text", lcd.FONT_Default,0xFFFFFF, rotate=90)
label1 = M5TextBox(46, 10, "Text", lcd.FONT_Default,0xFFFFFF, rotate=90)
label2 = M5TextBox(23, 10, "Text", lcd.FONT_Default,0xFFFFFF, rotate=90)
while True:
label0.setText(str(hat_env0.temperature))
label1.setText(str(hat_env0.humidity))
label2.setText(str(hat_env0.pressure))
wait_ms(2)
────────────────

IoT関係では、温度・湿度・気圧を取得するというネタは結構あるのですが、M5StickC+ENV Hat+UIFlowでしたら、非常に簡単にできます。興味あるならぜひM5StickCとHatを使って挑戦してみてください。


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


IoT関係はいろいろ面白いのが出てくるのですが、たくさん買いすぎて未開封のものが……安全のため同じものをふたつ買っているから、という理由もありますが。

そろそろIoTでなく、DTP絡みの仕事をしないといけないけど、少ししか進んでいません。

・みんなの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/


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