Node-REDでダッシュボード作成

はじめに

本記事はOKIの「AIエッジコンピューター」と呼ばれる AE2100 というゲートウェイ製品にNode-REDを載せて、ローコードIoTのプラットフォームにしようという記事の その３実践編 1「Node-REDでダッシュボード作成」 です。
その１準備編「PythonでRS-485圧力センサーシミュレータ作成」
その２構築編「DockerでローコードIoTプラットフォーム構築」
その３実践編 1「Node-REDでダッシュボード作成」 (本記事)
その４実践編 2「Node-REDでMQTT Pub/Sub」

前回の記事では RS-485入出力に対応した Node-RED コンテナの立ち上げを説明しました。
Node-RED さえ動いてしまえば、Node-REDをどう使うか、どんなアプリをどうやって作るか、といったコンテンツはインターネットにたくさんあります。
しかしながら Node-RED で RS-485 を扱う内容は、少なくとも Qiita にはなかったので、記事にしました。
Node-RED に関しては、まったくの初心者向けの内容になります。

こんなことやります

本編で行う作業は 3 ダッシュボードに圧力値をリアルタイム表示 になります。

Node-RED

本編は Node-RED 初めての読者に向けた記事なのですが、Node-RED 自体の説明は他の情報に譲ります。
Qiita にも素晴らしい記事がありますし(Node-RED系の記事のまとめ)、YouTube等、他のメディアにもわかりやすい説明がたくさんあります（こことか）。

ここでは記事内でよく参照する Node-RED のフローエディタの構成だけ載せておきます。

ワークスペース に フロー を作って、デプロイ ボタンをクリックすると、フロー が保存され、実行されます。
つまりこのフローエディタは開発環境かつ実行環境であるわけです。
これだけわかれば、ここでの作業でつまずくことはないと思います。

Node-REDフロー作成

それではさっそくフローを作成しましょう。
AE2100 に SSHクライアントでログインして、以下を実行してNode-REDを立ち上げます。

# docker run -it -p 1880:1880 -p 1883:1883 --device=/dev/ttyRS485:/dev/ttyRS485 -v /home/root/.node-red:/data --name node-red-1 node-red_v1:appf

以下のように [info] Started flows が表示されれば立ち上げ成功です。

8 Sep 23:27:29 - [info] Server now running at http://127.0.0.1:1880/
8 Sep 23:27:29 - [info] Starting flows
8 Sep 23:27:29 - [info] Started flows

立ち上がった Node-RED に Webブラウザからアクセスします。
URLは以下のようになります。

http://AE2100のIPアドレス:1880

RS485入力ノード設定

図の右がこれから作成するフローです。

まずはRS-485入力の設定からです。
上の図のように serial in ノードをパレットからワークスペースに Drag & Drop して、ダブルクリックして設定ダイアログを開きます。
開いた編集ダイアログでまず シリアルポート を設定します。新規に serial-port を追加 するために、右の鉛筆アイコンをクリックします。

すると上の右図のようにシリアルポート設定画面が開きます。
シリアルポート に AE2100 の RS-485 のデバイスファイル名 /dev/ttyRS485 を入力して、ボーレートは今回 9600 にします。
入力の分割方法はデフォルトのまま、文字列を \n で区切って取り込みます。
右上の"更新"をクリックして元のダイアログに戻ります。

シリアルポート が /dev/ttyRS485:9600-8N1 になったでしょうか。名前にRS485とでも入力して、完了をクリックして終了です。

RS485入力確認

RS-485でデータを受信できるか確認します。
使用するは debug ノードです。パレットの上から2番目にあります。
これをRS465入力ノードの右に置いて、ワイヤーで接続します。

ワイヤーで接続したら、右上のデプロイをクリックして保存 & 実行しましょう。

RS485入力ノードが接続済になったでしょうか？
接続済"にならない場合、デバイスファイル名の入力間違いが疑われます。

ここで右上のデバッグボタンをクリックして、デバッグサイドバーを表示しましょう。
debug ノードが受信したデータはこのデバッグサイドバーに表示されます。

それでは準備編でつくった RS-485 シミュレータを Windows PC で実行しましょう。
python tx_press.py

デバッグサイドバーには以下のように圧力値が出力されているはずです。

何と、コードを一片も書かずにRS-485からデータの読み込みができてしまいました！

ここで node-red-node-serialport の他のノードに関して補足します。

serial out ノードはその名の通り、シリアル出力のためのノードであり、その設定は serial in ノードとまったく同じなので、あえて使用方法を説明する必要はないでしょう。

そして serial request ノードですが、これはセンサー等のRS-485デバイスに対して、コマンドを送信して何かレスポンスを受信したい場合に使うノードになります。

例えば本記事のその１準備編で作成した圧力センサーのシミュレータは、定期的に圧力データを送信するので、Node-RED はそれを serial in ノードを用意すれば、今回のように受信する事ができたのですが、データを受信するために、センサー機器に読み取りコマンドを送信しなければならないケースもあります。

また各種設定のために、送受信のシーケンスを組んでプログラムする必要があるセンサー機器もあります。

このような場合、serial request はとても便利なノードなのです。

シリアル通信に限らず、入出力インターフェースを使ってデータを送受信するフローを作成する場合、Node-REDではまず、こんな感じに serial out と serial in ノードを配置すると思います。

上側のフローで読み取りコマンドを送信して、下側のフローでセンサーデータを受信します。
これはNode-REDの元になっているNode.js(JavaScript) の特徴である非同期プログラミングがいとも簡単に実現されているわけですが、複数の種類の送信、受信がある場合、これらの同期を取って正しくシーケンス処理を行うには１工夫、２工夫する必要があるでしょう。

ところが serial request ノードのおかげで、上のフローはこのようにまとめることができます。

左側に読取コマンドを置いてserial request ノードにつなげると、右側にセンサー機器から受信したデータが得られるわけです。

これはノードが一つ減って見やすく、より直感的に理解できるようになったばかりでなく、write then read の同期がある程度保証されるとてもありがたい機能なわけです（ある目的でTXした後、意図しないRXが来てしまう可能性もあるので、何らかの確認が必要になるかもしれませんが、ほとんどのケースはこれで十分ではないでしょうか）。

なおこの serial request ノードの入出力バッファはFIFOになっていて、TX実行の後、RXを受信した後に、（FIFOに積まれている）次のTXが実行される仕様になっています。

この node-red-node-serialport ライブラリはNode.js用の node-serialport ライブラリを Node-RED でも使えるようにしたものの訳ですが、非同期で動くことが基本の Node.js で同期プログラミングするのは、何だか慣れないのです（自分だけ？）。
それが Node-RED になると、ノードを横につなげていくだけで直感的に同期プログラミングになるので、本当に助かります。

ダッシュボード作成

せっかくなので、読み込んだ圧力値を少しカッコ良く表示してみます。
イメージのビルド時にインストールした node-red-dashboard ライブラリを使うと、以下のようなゲージとチャートを持つダッシュボードを簡単に作れてしまいます。

まずはタブと グループ の作成からです。
下の棒グラフのアイコンをクリックすると、その下にダッシュボードのサイドバーが開きます。
デフォルトで配置タブが開いています。

ダッシュボードは１つまたは複数のタブから成り、タブはゲージやチャートといった ウィジェット を グループ ごとに配置します。。。
GUIは文章で説明するものではありませんね。このわかりやすい説明をご覧ください。

ダッシュボード > タブ > グループ > ウィジェット の関係を理解いただいたということで、作業を継続します！
まずタブを一つ作ります。上図の +タブ をクリックすると、その下に Tab 1 としてタブが作成されます。
そこにマウスオーバーすると以下のように、3つのボタンが現れます。
まずは編集をクリックして、このタブの名前を「圧力計」とでも命名します。

次にこのタブに属するグループの作成です。
+グループをクリックして、このタブの下に一つグループを作成します。
そして作成したグループにマウスオーバーすると現れる編集(下図）をクリックします。

すると左側に下のようにグループの編集ウィンドウが開きます。
ここでは幅を14にして、グループ名は表示しないように✔をはずします。
これだけでOKです。更新をクリックします。

それではこの Group 1 グループにゲージとチャートのウィジェットを配置していきます。

左のパレットの下のほう、dashboard グループから guage と chart をワークスペースに配置してRS485ノードと接続します。こんな感じです。

では gauge から設定していきましょう。ノードをダブルクリックすると左側に現れるウィンドウを以下のように設定します。

右上の完了をクリックしてゲージの設定は終了です。

続いて chart ノードの設定です。

右上の完了をクリックしてチャートの設定も終了です。

ダッシュボード表示確認

右上の デプロイ ボタンをクリックして、このフローを保存・実行します。
その後、下図の赤色で囲ったアイコンをクリックしてください。
ダッシュボードは最近のタブブラウザでは別タブが開いて表示されます。

となりのタブにこのように表示されるはずです。

なお、このダッシュボードは以下のようにNode-REDのURLに /ui をポストフィックスしてアクセスしても表示することができます。
http://localhost:1880/ui

さいごに

コードを一片も書かずに RS-485 入力からダッシュボード表示までできてしまいました。。。
これは Node-RED の素晴らしさの賜物のわけですが、外見はクールだけれどソフトウェア開発環境としては素っ気ない AE2100 が、とても親しみやすく感じられるようになったのではないでしょうか。