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

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 な仕組み移植できそう！今回のまとめ

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

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

1ft-seabass
PRO

More Decks by 1ft-seabass

Other Decks in Technology

Featured

Transcript

20230601_ビジュアルプログラミングIoTLT vol.14 M5UIFlow で MQTT と JSON 連携して CO2 Unit