今回の内容は表題・以下の動画のとおりです。

ENV II Unit をつけた M5Stack Core2 から、温湿度の値を BLE UART で出力して、それを Node-RED で受信＆ダッシュボードでグラフ化した時の様子。#M5Stack #UIFlow #nodered pic.twitter.com/AQ5zamZ2Yr
— you (@youtoy) May 23, 2021

M5Stack Core2 に温湿度等がとれるセンサー（ENV II Unit）を取り付け、センサーで取得した値を BLE UART で送信し、それをグラフ化しました。
BLE UART で送信された温湿度の値を受信しているのは Mac で動作させている Node-RED で、BLE を扱えるノードやダッシュボードを使って値の取得・グラフ化を行っています。

以下では、それを実現するためのポイントになる部分を記載します。

用いたデバイス

今回用いたデバイスは、以下の写真にうつっている M5Stack Core2 とセンサー（ENV II Unit）、そして Node-RED を動作させている Mac です。

用いたプログラム・フローの内容

ここでは、今回用いた UIFlow のブロックのプログラムと Node-RED のフローを示します。

UIFlow のブロックプログラム

ブロックプログラムの概要

まず、UIFlow を用いてブロックのプログラムを作る前準備として、UIFlow上で以下の 2つを行います。

画面上にラベルを 2つ配置（温湿度の値を表示させて確認するためのもの）
Unit の一覧から ENV II Unit を追加

そして、上で示したブロックのプログラムを作ります。おおまかな処理の内容は以下の通りです。

Aボタンを押したら 500ミリごとに定期的に処理を実行
定期的に実行する処理は以下のとおり
- センサーから温湿度の値を取得
- 温湿度の値を画面に表示
- 温湿度の値を JSON 形式にして BLE UART で送信
  - 温度・湿度の値に対応したキーは「d1」と「d2」とした
Cボタンが押されたら上記の定期実行する処理を止める

なお、UIFlow で BLE UART を利用可能なデバイスは、記事を執筆した時点では「M5Stack Core2 と M5Stack Fire」のみになります。

Node-RED のフロー

フローの概要

Node-RED でフローを作る前に、以下の記事にも書いている「node-red-contrib-generic-ble」というノードを追加します。
　●Mac上の Node-RED で BLE を利用して toio の制御（Read、Notify で値を受け取る） - Qiita
　　https://qiita.com/youtoy/items/3db10e1042a5f2af27a0
また、グラフ化の部分にはダッシュボードの Chart を利用します。

デバイスとの接続・通知の受信

M5Stack Core2 との接続や、BLE UART で送信された値を受け取るようにするための手順は、上にも書いた過去の記事をご参照ください。

受信した値をオブジェクトに変換する

M5Stack Core2 から受信したデータは JSON の部分がバイナリデータになっています。ここから温湿度の値を取り出す下準備として、ファンクションノードと JSONノードを使ってオブジェクトへの変換を行います。

ファンクションノードでは、以下の処理を行っています。
msg.payload の中で温湿度のデータが含まれる部分を取り出し、 toString() で文字列に変換しています。

msg.payload = msg.payload.characteristics["6e400003b5a3f393e0a9e50e24dcca9e"].toString();
return msg;

ここに出てくる 6e400003b5a3f393e0a9e50e24dcca9e という文字列は、過去に書いた以下の記事などでも説明しているのですが、M5Stack の BLE の Notify に関する UUID になります。
　●#UIFlow の BLE UART を使った #M5Stack_Core2 （ #M5Stack ）からブラウザへのデータ送信とグラフ化 - Qiita
　　https://qiita.com/youtoy/items/1bf6e9390b5dc5d2ba51

上記の処理を行った文字列は、JSONノードでオブジェクトに変換します（※ ノードのプロパティは以下のとおり）。

温湿度の値を取り出しグラフ化する

JSONノードからの出力は、デバッグノードで出力してみると以下のようになっています。
キーが d1 となっているのが温度の値で、d2 となっているのが湿度の値です。

これを以下のようにして、 msg.payload に取り出しました（※ 以下は温度のほうの例）。

あとは、取り出した値を Chartノードに入力して、ダッシュボードでグラフとして表示させます。
今回用いた設定値とは異なる部分がありますが、ダッシュボードの Chartノードを使う手順を書いた記事がありますので、手順についてはよろしければこちらをご参照ください。
　●Node-RED（enebular）でダッシュボード・リアルタイム通信を利用する【ハンズオン資料】 - Qiita
　　https://qiita.com/youtoy/items/61e4a6c9061d68f09e3b

ダッシュボードに出力したグラフ

ダッシュボードで温度・湿度をそれぞれグラフ化したものは、以下のようになりました。
けっこう値が変動しているように見えるかもしれないですが、小数点以下の値が少し変わっているだけという感じです（自宅の部屋で 500ミリ秒ごとに取得しているので、それほど変動はありません）。

まとめ

今回、以上のような手順で無事に、ビジュアルプログラミングを使ってセンサーによる温湿度の取得・デバイス間での送信・グラフ化を実現できました。