M5Stack ＋ UIFlow と Node-RED で温湿度の値を BLE UART で送信してグラフ化

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ENV II Unit をつけた M5Stack Core2 から、温湿度の値を BLE UART で出力して、それを Node-RED で受信＆ダッシュボードでグラフ化した時の様子。<a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> <a href="https://twitter.com/hashtag/nodered?src=hash&amp;ref_src=twsrc%5Etfw">#nodered</a> <a href="https://t.co/AQ5zamZ2Yr">pic.twitter.com/AQ5zamZ2Yr</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1396484093139955718?ref_src=twsrc%5Etfw">May 23, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

## 用いたデバイス
今回用いたデバイスは、以下の写真にうつっている M5Stack Core2 とセンサー（ENV II Unit）、そして Node-RED を動作させている Mac です。
![M5StackCore2とセンサー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/71ef845b-d2dc-8f3a-6910-977985a225d2.jpeg)

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

### UIFlow のブロックプログラム
![UIFlow のブロックプログラム](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d4458b47-fd59-fa0c-68ff-3125a4fb6206.jpeg)

### ブロックプログラムの概要
まず、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 のフロー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7b647339-949f-215a-344c-570d02764c59.jpeg)

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

#### デバイスとの接続・通知の受信
M5Stack Core2 との接続や、BLE UART で送信された値を受け取るようにするための手順は、[上にも書いた過去の記事](https://qiita.com/youtoy/items/3db10e1042a5f2af27a0)をご参照ください。

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

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

```javascript
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ノード.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6b6b4b35-0327-eb18-163d-9938f624ac39.jpeg)

#### 温湿度の値を取り出しグラフ化する
JSONノードからの出力は、デバッグノードで出力してみると以下のようになっています。
キーが d1 となっているのが温度の値で、d2 となっているのが湿度の値です。
![オブジェクトの中身.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8fafebbf-6b5f-1237-a7a4-16ee2e54e9c3.jpeg)
これを以下のようにして、 `msg.payload` に取り出しました（※ 以下は温度のほうの例）。
![チェンジノード.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ad87c79d-6202-d7de-ff1a-631bbd842546.jpeg)

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

#### ダッシュボードに出力したグラフ
ダッシュボードで温度・湿度をそれぞれグラフ化したものは、以下のようになりました。
けっこう値が変動しているように見えるかもしれないですが、小数点以下の値が少し変わっているだけという感じです（自宅の部屋で 500ミリ秒ごとに取得しているので、それほど変動はありません）。
![ダッシュボード（グラフ）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/927393cf-f919-7ce7-a8d8-61b98722f3d9.jpeg)

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