先日動かしたBME280の値をダッシュボードへ表示させようとしたら意外と苦労したので、その記録を残しておきます。
私と同じような、Javascriptが分からないNode-RED初心者のお役に立てば幸いです。
ダッシュボードは、少し前からチラチラと目にしていたので、私も使ってみようと思いました。
『node-red-dashboard』のノードを追加します。
追加すると、たくさんのノードが追加されます。
今回使用したのは、text、Gauge、chartの3つです。
これらに値を送る場合、基本的には数字のデータを送ることになります。
ただ、センサから複数の測定値が得られる場合、どうやって1つだけ値を抽出するのか色々と考えました。
色々な記事を探していると、どうやらchangeノードを使うようです。
主に参考にさせて頂いた記事はこちら。
（参考）Qiita @takeyan Node-REDにダッシュボードを追加してセンサーデータを可視化する
（参考）YAMANEの世界 BME280センサー
先日作ったフローに、changeノードを付け加えて数値だけ取得できるか実験しました。
前回の記事はこちら。
1つ目の参考記事の通り、センサの直後にchangeノードを繋げました。
changeノードの中身は下記のようにしました。
change
湿度データだけを取得したいので、「msg.payload.humidity」としています。
payloadの後ろの文字列は、センサから出力される結果を元に入れました。
結果
うまく湿度データのみ取得できました！
次に、jsonノード後にchangeノードを入れるパターンです。
実は、このままだとうまく数値が取り出せませんでした。
色々と試したところ、jsonノードの設定を変更すれば数値を1つだけ取得できることが分かりました。
jsonノードの設定は、基本的には3種類。
（下にあるチェックを入れると4種類）
初期値では、『JSON文字列とオブジェクト間の相互互換』という設定になっています。
このままだとうまく数値が取得できませんでした。
これら3種類の結果を残しておきます。
json 『JSON文字列とオブジェクト間の相互互換』の場合
結果はこちら。
上の赤枠がjsonノード直後のデバッグノードの出力で、下の赤枠がchangeノード直後の出力結果です。
changeノード直後の結果が「undefined」になっています。
数値が出力されていないのでNG
json 『常にJSON文字列に変換』の場合
結果
どちらの出力も、『JSON文字列とオブジェクト間の相互互換』の場合と同じ結果でした。
NG
json 『常にJavaScriptオブジェクトに変換』の場合
こちらの場合、チェックボックスの選択が無くなります。
結果
changeノード直後で、数値が1つだけ出力できました！
jsonノード直後の結果も、先ほどと異なっています。
OK
ちなみに、『JSON文字列フォーマット』にチェックを入れるとどうなるのか確認してみました。
json 『JSON文字列フォーマット』にチェックを入れた場合
結果
changeノード後の出力は「undefined」で、jsonノード直後の結果に妙な空白が見られます。
保存されたファイルを確認してみると、分かりやすいことになっていました。
人間が見た場合に分かりやすい形式になって保存される、と理解しても良いのかな？
これはこれで使う場面がありそうなので覚えておこう。
・・・で、ようやくダッシュボードに表示させる準備が整いました！
何気に2日ほど悩んでここまでたどり着いたんですよね。。
ダッシュボードへの表示は、このようにしました。
jsonノード後にchangeノードを入れ、そのあとにtext、gauge、chartの3つのノードを繋げています。
それぞれのノードの設定は、基本的に名称を変更したくらいで、初期設定のまま使いました。
設定画面を残しておきます。
text
Labelを入力した後、Groupの鉛筆マークのボタンをクリックします
ここでも名前を入れます。
これがダッシュボードのタイトルのようなものになります。
一旦設定すると、他のノードにも自動的に反映されていました。
gauge
Labelを入れ、Rangeのmaxを100に変更しました（初期値は10）
今回は湿度の表示をしたかったので0～100にしたけど、ここは測定項目の値によって変更すれば良いと思います。
chart
こちらはLabelを入力しただけ。
あとはデプロイをしてダッシュボードを表示させます。
ダッシュボードのノードを追加すると、デバッグボタンの横にグラフマークのボタンが増えています。
3つのタブの右にあるマークを押すと、ダッシュボードの画面が開きます。
こんな感じで！
色々と設定できるようですが、初期値のままでも結構きれいに表示してくれます。
あとは小数点以下の桁が多すぎるのが気になるので整えます。
ここはfunctionノードを使います。
changeノードの後ろにfunctionノードを入れます。
参考記事のとおり入力しますが、私は小数点第1位までの表示としました。
function
1行目だけを追記しています。
msg.payload = (msg.payload.toFixed(1));
2行目は初めから記入されていましたのでそのまま。
ついでに温度と気圧の情報も取れるようにchangeノードを追加して、下記のようなフローにしました。
あと、ダッシュボードの配置タブで、表示の順番を整えます。
各項目をドラッグ＆ドロップで入れ替えられるので簡単。
こんな感じに。
結果
これはいい感じなのでは！？？
ダッシュボードでは横軸に時刻が入っていますが、実は元データ（jsonファイル）には時刻が記録されていないんですよね。
なんか不思議な感じ。
せっかくなので、次はjsonファイルやcsvファイルに時刻データを追記してみたいですね。
取得時刻が分からないデータとか利用価値が無いので、やらなくてはいけない…！（使命感）
うまくいったらまとめたいと思います。