20230601_ビジュアルプログラミングIoTLT vol.14 M5UIFlow で MQTT と JSON 連携して CO2 Unit や LED テープを動かした話 ワンフットシーバス 田中正吾

私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！

田中正吾（たなかせいご） 屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い現 在に至る。 最近ではWEBフロントエンドをベースにしなが らも、情報とインターフェースが合わさるアプ ローチという視点でIoTやMixed Realityといった 技術も取り入れながら活動しています。

7 分くらいで話します！

大学の特別講義用に M5UIFlow で CO2 センサーや LED テープの仕組みを作りました https://www.1ft-seabass.jp/memo/2023/05/22/tokai-university-special-lecture-202305/

CO2 センサー計測して MQTT に送る仕組み M5Stack用SCD40搭載CO2ユニット（温湿度センサ付き） https://www.switch-science.com/products/8496

テープ LED でボタン押すと色が変わったり MQTT で遠隔からも色が変更できたり M5Stack用NeoPixel互換 LEDテープ 10 cm https://www.switch-science.com/products/5208

Node-RED 側でセンサーデータを受けたり テープ LED に色やメッセージの指示を出します

ひとまずデモしてみます

UIFlow で動かした学び おもに MQTT とか JSON まわり

これは CO2 Unit + MQTT の仕組み

MQTT ブロックは手軽につながって良かった 設定値も分かりやすくクライアントIDのランダム化もなんとかなった

CO2 Unit もブロック呼び出して サンプルもあってラクラク

MQTT が絡むと JSON で 構造データ送れたほうが色々と扱いやすい

固定値で簡単なものなら テキストで送るのででも何とかなった たとえばこれはボタンを押したときの動作

センサー値のような動的な値を入れるときに テキストだと苦労したので json dumps 使用 Map 型で動的なデータがつくりやすくなった。

ただ dumps + create map だと だいぶブロックの幅が広がる 幅を取るので可読性が下がる場合もありそうなので、やはり少量の固定値ならテキストでも良さそう

これは CO2 Unit + テープ LED の仕組み

データを受け取って何かするとき loads json 使用 Map や List 型でデータが来るので取り出しやすかった。これはテープ LED に指示を出すところ。

MQTT と JSON あたりも Arduino のときと 同じように M5UIFlow でも動かせるようにできた Arduino IDE で何度もビルドして試行錯誤すると時間がかかるのでありがたい

➔ MQTT ブロックも素直に使えてやりやすかった ➔ MQTT でデータをやり取りするときは JSON を使いたく なるが JSON dumps / loads でバッチリ ➔ M5UIFlow 側からデータを送るときにシンプルな固定値で あればテキストで JSON つくってもいい ➔ 動的なセンサー値をテキストでつくるのは大変なので、 JSON dumps + Map create でやりやすくなった ➔ MQTT 購読で JSON を受け取った時は JSON loads を通 せば Map や List 型でイイ感じに取り出せる ➔ M5UIFlow へ MQTT + JSON な仕組み移植できそう！ 今回のまとめ