ダッシュボードでのグラフ作成 - Ritsumeikan Univ. SSES platform

Contents

ダシュボードでのグラフ作成（ゲージグラフ、折れ線グラフ）
1.概要
2.ダッシュボード用ノードが通常のノードと異なる点：ダッシュボード上のレイアウト設定
3.プロパティ画面での設定
3-1.タブとグループ設定
3-2.ノード自体のデザイン設定
3-3.ダッシュボード画面の確認
4.タブ間/グループ間/ノード間の相対位置
4-1.タブ内のグループの相対位置
4-2.グループ内のノードの相対位置
4-3. タブ間の配置順序
5.グラフ表示

ダシュボードでのグラフ作成（ゲージグラフ、折れ線グラフ）

1.概要

Node-REDは、UI(User Interface)としてダッシュボードを作成する機能を持っています。PDHのダッシュボード画面を以下に示しますが、データのグラフ表示やMSMの設定などを行うことができます。

ここでは、Node-REDのダッシュボードの作成の例として、gaugeノードを使ったゲージグラフchartノードを使った折れ線グラフを表示する方法を説明します。
まず、ダッシュボードノード固有のダッシュボードのレイアウト設定について述べた後に、グラフ表示を行います。

gaugeノードやchartノードは標準ではNode-REDのパレットに入っていません。追加が未だの場合は、こちら(ダッシュボードノードの追加)を参照して追加しておいてください。

■ ダッシュボードを使ったグラフ表示の例

■ ダッシュボードを使ったMSMの設定の例

2.ダッシュボード用ノードが通常のノードと異なる点：ダッシュボード上のレイアウト設定

ダッシュボードも、gaugeノードやchartノードなどのノードをエディタ上に配置して処理/機能をプログラミングします。従って、ノードの機能や処理内容の設定は必要です。しかし、ダッシュボードのノードは、通常のノードと異なってUIとしてのレイアウトの設定が必要になります。

ダッシュボード上のレイアウトの設定には、大きく3つあります。これらのうち①と②はノード一つでも設定する必要があり、必須項目です。③は、ノードが複数になった場合に設定する必要が出てきます。

　　① タブとグループの設定：どのタブのどのグループに配置するか
　　② ノード自体のデザイン：サイズや形状、色などをどうするか
　　③ ノード間の相対位置：一つしかノード配置しない場合は設定不要

①と②は、ノードのプロパティ画面で設定します。③は、ダッシュボードのサイドバーから開く、“ダッシュボードレイアウトエディタ”で設定します。

3.プロパティ画面での設定

以下、gaugeノードを例にして、「タブとグループ設定」ならびに、「ノード自体のデザイン」の設定に関して説明します。

3-1.タブとグループ設定

タブとグループの詳細に関しては、こちら(ダッシュボードのタブとグループの追加)を参照してください。ここでは、一番初めのタブとグループへの配置がこのgaugeノードだとした場合で説明します。

タブ名「データ表示」の中のグループ名「ゲージ表示」にゲージが表示させるように設定します。

gaugeノードをダブルクリックして現れるプロパティ画面で、一番上のGroupと書かれた箇所が、タブとグループの設定箇所(①)です。残りの個所は、ノード自体のデザインの設定箇所(②)です。
③ Group設定欄の右端の鉛筆マークを押すと、グループノードの編集画面が現れます。
　Group名を入力します。グループ領域の幅も設定します。ここでは“6”のままとします。
　(注意事項：グループに追加するノードのサイズが、グループ領域の幅(ここでは”6″)を超えるとエラーになりますので、追加するノードの幅が”6″より広い場合は、グループ領域の幅も広げておいてください。チャートを追加する場合は”12″くらいにしておくとよいです。）
④ さらにタブ設定の右端の鉛筆マークを押すと、タブの設定画面が現れます。同様に、
　タブ名を入力します。
その後、それぞれの設定画面の「追加」ボタンを押して、プロパティ画面に戻ります。

3-2.ノード自体のデザイン設定

次に、ノード自体のデザイン設定を行います。

設定内容は、ノード毎に異なりますので、ここでは、gaugeノードの設定に関してざっと説明します。最低限の設定です。

④ Sizeは4×4とします。幅が、グループの幅のサイズを超えることはできません。グループの幅を超えて広げる場合は、グループの設定画面でまずグループの幅を広げます。
Labelは、ダッシュボード画面でのゲージの上に表示される名前です。
Unitsは、ダッシュボード画面でゲージに表示される単位です。
Rangeは、最小値と最大値を設定します。設定しないと最大値と最小値は値に応じて変動します。
そして、「完了」を押します。

⑤ 設定が完了したので、「デプロイ」を押します。

3-3.ダッシュボード画面の確認

・ダッシュボード画面の表示方法は2通りあります。
　(1)サイドバーから開く
　(2)ブラウザの新しい画面で、http://localhost:1880/ui/を入力して開く

(1)サイドバーから開く
① サイドバーのドロップダウンメニューから“Dashboard”を選びます。

② ダッシュボードサイドバーの右上のマークを押します。

③ 新しい画面が開き、ゲージが表示されます。
　タブの領域とグループの領域が存在し、その中にゲージが配置されています。

(2)ブラウザの新しい画面で、http://localhost:1880/ui/を入力して開く
ブラウザで新し画面を開き、URL入力欄に、 “http://localhost:1880/ui/”と入力します。
同じゲージの画面が表示されます。

4.タブ間/グループ間/ノード間の相対位置

タブ間/グループ間/ノード間の相対位置(レイアウト)の設定方法に関して説明します。

説明のために、湿度のゲージを1つと温度推移の折れ線グラフ(chartノード)を追加します。
湿度のゲージは、温度のゲージと同じグループ(ゲージ表示)に配置します。温度推移の折れ線グラフは、別のグループ(折れ線グラフ)に配置します。
※ 追加した2つのノードのプロパティは、「5. グラフ表示」を参照ください。

どのノードがどのタブなり、グループに配置されているかは、ダッシュボードサイドバーの配置タブを見ることで分かります。タブとグループは折りたたまれていますので、広げてみてください(①)。
ここでは、データ表示タブの下に、ゲージ表示グループと折れ線グラフグループがあります。それぞれの下に、温度のgaugeノードと湿度のgaugeノード、温度推移のchartノードが配置されているのが分かります。

4-1.タブ内のグループの相対位置

ダブ内のグループの相対位置は、フローエディタのダッシュボードサイドバーの配置タブのタブ&リンク画面で行います。具体的に見ていきます。
現在の状態で、ダッシュボード画面を確認します。
左側にゲージ表示のグループ、右側に折れ線グラフのグループが配置されています。

ここで、左右を入れ替えてみます。
フローエディタのダッシュボードサイドバーの配置タブのタブ&リンク画面で、ゲージ表示と折れ線グラフ表示の上下を入れ替えます。折れ線グラフのグループをドラッグしてゲージ表示の上に置いてください(②)。

この状態で、ダッシュボード画面を確認します。
左右が入れ替わりました。

4-2.グループ内のノードの相対位置

グループ内のノードの相対位置は、フローエディタのダッシュボードレイアウトエディタを使って設定します。

レイアウトエディタは、ダッシュボードサイドバーのデータ&リンクの画面で、タブの名前の横にカーソルを持って行くと「レイアウト」の鉛筆マークが現れますの(③)。

それをクリックするとポップアップされます(④)。
右側のゲージ表示の上下に並んでいる「温度」「湿度」のノードを入れ替えます(⑤)。「完了」を押して(⑥)、デプロイします。

そして、ダッシュボード画面を見ると、上が「湿度」で、下が「温度」に入れ替わりました(⑦)。

4-3. タブ間の配置順序

タブ間の配置順序もグループの相対位置と同じように、ダッシュボードサイドバーの配置タブのタブ&リンクの順番を変えることで設定できます。
具体的に見てみます。以下の図は、PDHの標準フローのエディタとダッシュボードの図です。エディタのサイドバーで“R-MSM GW”、“Sensor Device Control”、“Setting”の順になっています。ダッシュボードの左上の「三」ボタンをクリックするとポップアップするタブの並びもそれになっています(①)。

これを入れ替えてみます。“R-MSM GW”を一番下にサイドバーで変更して、デプロイします。すると、ダッシュボードのポップアップの並びも変わります(②)。

5.グラフ表示

ここまで、ダッシュボードノードに固有のレイアウト設定に関して説明してきました。

ここからは、gaugeノードとchartノードを使ったグラフを描いてみます。
gaugeノードとchartノードは、ここまでの説明で使用したものを流用します。それらに、serial inノード、jsonノード、switchノード、changeノードを使って以下の様なフローを作成します。データは、R-MSMからシリアル入力したものを使います(emulatorの場合は、mqtt inノードを使ってください）。