M5UIFlow で MQTT と JSON 連携してCO2 Unit や LED テープを動かした話

ビジュアルプログラミングIoTLT vol.14「M5UIFlow で MQTT と JSON 連携してCO2 Unit や LED テープを動かした話」の登壇資料です。

◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/
・Adobe Stock https://stock.adobe.com/jp

Transcript

1. 20230601_ビジュアルプログラミングIoTLT vol.14 M5UIFlow で MQTT と JSON 連携して CO2 Unit や LED テープを動かした話 ワンフットシーバス 田中正吾
2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！
3. 田中正吾（たなかせいご） 屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い現 在に至る。 最近ではWEBフロントエンドをベースにしなが らも、情報とインターフェースが合わさるアプ ローチという視点でIoTやMixed Realityといった 技術も取り入れながら活動しています。
4. 7 分くらいで話します！
5. 大学の特別講義用に M5UIFlow で CO2 センサーや LED テープの仕組みを作りました https://www.1ft-seabass.jp/memo/2023/05/22/tokai-university-special-lecture-202305/
6. CO2 センサー計測して MQTT に送る仕組み M5Stack用SCD40搭載CO2ユニット（温湿度センサ付き） https://www.switch-science.com/products/8496
7. テープ LED でボタン押すと色が変わったり MQTT で遠隔からも色が変更できたり M5Stack用NeoPixel互換 LEDテープ 10 cm https://www.switch-science.com/products/5208
8. Node-RED 側でセンサーデータを受けたり テープ LED に色やメッセージの指示を出します
9. ひとまずデモしてみます
10. UIFlow で動かした学び おもに MQTT とか JSON まわり
11. これは CO2 Unit + MQTT の仕組み
12. MQTT ブロックは手軽につながって良かった 設定値も分かりやすくクライアントIDのランダム化もなんとかなった
13. CO2 Unit もブロック呼び出して サンプルもあってラクラク
14. MQTT が絡むと JSON で 構造データ送れたほうが色々と扱いやすい
15. 固定値で簡単なものなら テキストで送るのででも何とかなった たとえばこれはボタンを押したときの動作
16. センサー値のような動的な値を入れるときに テキストだと苦労したので json dumps 使用 Map 型で動的なデータがつくりやすくなった。
17. ただ dumps + create map だと だいぶブロックの幅が広がる 幅を取るので可読性が下がる場合もありそうなので、やはり少量の固定値ならテキストでも良さそう
18. これは CO2 Unit + テープ LED の仕組み
19. データを受け取って何かするとき loads json 使用 Map や List 型でデータが来るので取り出しやすかった。これはテープ LED に指示を出すところ。
20. MQTT と JSON あたりも Arduino のときと 同じように M5UIFlow でも動かせるようにできた Arduino IDE で何度もビルドして試行錯誤すると時間がかかるのでありがたい
21. ➔ MQTT ブロックも素直に使えてやりやすかった ➔ MQTT でデータをやり取りするときは JSON を使いたく なるが JSON dumps / loads でバッチリ ➔ M5UIFlow 側からデータを送るときにシンプルな固定値で あればテキストで JSON つくってもいい ➔ 動的なセンサー値をテキストでつくるのは大変なので、 JSON dumps + Map create でやりやすくなった ➔ MQTT 購読で JSON を受け取った時は JSON loads を通 せば Map や List 型でイイ感じに取り出せる ➔ M5UIFlow へ MQTT + JSON な仕組み移植できそう！ 今回のまとめ