ダッシュボードのタブ制御(ui controlノード)

1.概要

Node-REDのダッシュボードに準備されている”ui controlノード“の使い方を検討してみます。

2.Node-REDのノード説明確認

Node-REDのフロー画面で、ノードにカーソルを合わせると、1行の説明が出てきます。その右下にある手帳のようなマークをクリックすると、画面右側にHELP画面が現れます。

ヘルプ画面を確認すると大きく2つの機能があるようです。
一つ目が、msg.payloadで送られてきたタブ名にタブを切り替えること。
二つ目がmsg.payloadで送られてきた指示に従って、グループを隠したり、見せたりすること。
次の章から、順番に動作を確認していきます。

3.タブの切換指示

ui controlノードにより、ダッシュボードのタブが切り替えられるかを確認するために、以下の様なフローを作成します。ダッシュボードのタブを3つ準備します。ダッシュボードへのタブとグループの設定に関しては、こちら(ダッシュボードのタブとグループの追加)をご覧ください。
それぞれのタブに他のタブに移動するためのbuttonノードを配置します。buttonノードのpayloadには、移動先のタブ名を記載します。形式は、ヘルプ画面に書かれているように、JSON形式で{“tab”:タブ0}でも、文字形式で タブ0 でもOKです。
そしてbuttonノードの出力をui controlノードの入力に繋ぎます。いずれかのbuttonノードを押すと、行先がmsg.payloadでui controlに送られ、タブが切り替わるはずです。
ui controlボタンの出力の“msg.name”にタブ名が出力されますので、デバッグノードでモニタします。

動作の確認を行います。ダッシュボードに移動すると真ん中のタブ0が表示されます。
① タブ0で「タブ1へ」のボタンを押すとタブ1に画面が切り替わります。
② タブ1で「タブ0へ」のボタンを押すとタブ0に画面が切り替わります。
③ タブ0で「タブ-1へ」のボタンを押すとタブ-1に画面が切り替わります。
④ タブ1で「タブ0へ」のボタンを押すとタブ0に画面が切り替わります。

デバッグ画面を確認します。タブ移動に合わせて、ui controlノードからmsg.nameに移動した先のタブ名が出力されます。これは、buttonノードで移動した場合だけではなく、手動でタブを切り替えても出力されます。タブの切換を検知して、何かイベントを起こす際に使えます。「5.タブ変更検知の応用」を参照ください。

4.グループの表示/非表示切替

ui controlノードのヘルプに記載のある機能の2つ目について説明します。2つ目の機能は、 msg.payloadで送られてきた指示に従って、グループを隠したり、見せたりすることです。動作確認のために、以下の様なNode-REDのフローを作りました。タブ4を新設し、その中に、グループ０とグループ1を作ります。グループ0には、ゲージとチャートを配置します。そしてグループ1には、buttonノードを2つ配置し、一方には、グループ0を隠すmsg.payload={“group”:{“hide”:[“タブ4_グループ0”]}}を出力させます。もう一方には、グループ0を見せるmsg.payload={“group”:{“show”:[“タブ4_グループ0”]}}を出力させます。この2つのbuttonノードの出力をui controlノードに入力します。

動作の確認を行います。ダッシュボードに移動します。
① 左側の画面で、「グループ0を隠す」ボタンを押すと、右側画面のように、グループ0が完全に消えます。
② そして、「グループ0を表示」ボタンを押すと、左側画面のように、グループ0が表示されます。

この操作の時、タブが切り替わらないためか、デバッグ画面には何も表示されません。
応用としては、R-MSMから複数のセンサのチャートやゲージを表示している際に、どれかのセンサのチャートやゲージのみ表示させ、他を消すというのが考えられます。

5.グループの表示/非表示切替

ui controlノードのタブ検知機能を使った応用例として、ダッシュボード上で「タブ5」に切り替えると、1) カウンタをリセットする、2) R-MSMから取得している気温データのチャートをリセットするというのを考えてみました。フローを以下に示します。左上にui controlノードを置いています。入力が無くても、ui controlノードはタブが切り替わると、msg.nameにタブ名を出力してくれます。タブ名がswitchノードで“タブ5”かどうかを検出します(①)。“タブ5”であれば、changeノードを使って、”flow.counter=0”にセットします(②)。また、気温チャートにjason形式で空配列”[]”を送ります(③)。

動作確認です。ダッシュボードを開きます。
① タブ5がその前から動作していて、経過時間が、1951になって、気温チャートも約10分程度記録しています。
② タブ0に切り替えます。
③ 再度タブ5に切り替えます。経過時間と気温チャートがリセットされました。