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 テープを動かした話
   ワンフットシーバス 田中正吾
   

   View Slide

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

   View Slide

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

   View Slide

4. 7 分くらいで話します！
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. ひとまずデモしてみます
   

   View Slide

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

    View Slide

11. これは CO2 Unit + MQTT の仕組み
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide