複数のセンサを搭載したsensorTAGを使おう (3) 温度データをビジュアルに表示

常に変化するセンサ出力はグラフ化すると変化を把握しやすい

 前回は、sensorTAGから送られてくる温度データを抽出しました。node-REDを使ってプログラミングしたので、送られてくるJSON形式のデータの構造の把握と、加工が容易でした。

 node-REDを使うと、外部のグラフ表示をサポートしてくれるWebサイトにデータをMQTTなどで投げるプログラムも可能です。

 はじめての電気とIoT (9) SPI経由でアナログ電圧測定 その2 node-RED

 node-RED自体はWebブラウザでプログラミングしているので、そのままWebブラウザにグラフを表示できる機能があります。それが、第1回でインストールしたdashboardノードです。dashboardノードには入力と出力が複数あり、出力もいろいろなグラフ形式から選べます。

温度データをゲージ表示

 車の速度表示などで使われている表示器をゲージと呼んでいます。常に変化する今の温度を表示するのに便利です。

 画面左のノード・パレットからgaugeを中央のパレットにドラッグし(1)、そのアイコンをダブルクリックします(2)。

 温度の単位unitsを「℃」に変更し(3)、温度の表示範囲をここでは最大100に変更します(4)。

 このまま完了でもよいのですが、最終的に複数のグラフ表示を見やすくするために、Groupを作ります。鉛筆のアイコンをクリックします(5)。

 groupのNameを「私の部屋」にしました。表示用のui_tabを作るために鉛筆のアイコンをクリックします。

 Nameに「Home01」を入れました。完了を押して戻ります。戻ると上記の入力画面なので、ここでも完了を押して最初の設定画面に戻ります。そこでも完了を押すと、設定がすべて終わります。

 温度を抽出のfunctionノードの出力からこのgaugeを結びます。つまり、functionノードからは、debugとgaugeノードの二つにつながっている状態です。デプロイを押し、sensorTAGの電源スイッチを3秒押します。

 十秒ほど経過してdebug欄に温度が表示されるようになったら、新しいWebブラウザのTabを開き、URLに「ラズパイのIPアドレス:1880/ui/」を表示します。設定時に温度の最大値を100としましたが、変化を見やすくするために60に変更しました。

温度データをチャート表示

 温度変化を1日とか1時間ずっと表示してくれるのがチャート表示です。データベースなどの設定が不要なので手軽です。

 画面左のノード・パレットからchartを中央のパレットにドラッグし(1)、そのアイコンをダブルクリックします(2)。

 温度を表示する縦軸Y-axisの最大値maxを100に変更します(3)。

 Groupはgaugeで設定した「私の部屋[Home01]」になっていますが、そのままにします。完了を押します。

 温度を抽出のfunctionノードの出力からこのchartを結びます。つまり、functionノードからは、debug、gaugeとchartノードの三つにつながっている状態です。

 デプロイを押し、時間がたっていなければ、sensorTAGはdisconnectからconectに十秒ほどで変化します。時間が相当経過してセンサがデータを送ってきていないと自動的にOFFになっているので、sensorTAGの電源スイッチを3秒押します。

 十秒ほど経過してdebug欄に温度が表示されるようになったら、Webブラウザの「ラズパイのIPアドレス:1880/ui/」を見ます。

 chartの設定画面で、横軸の時間を表すX-axisはデフォルトで1時間になっています。これだと、画面の表示が遅い場合があるので、10分程度に変更すると、変化が見やすいです。また、縦軸も、100℃ではなく60℃に変更したほうが、室温の変化が見やすいです。