●dashboardノードを使って測定結果をビジュアルに表示（2016/11/30）

　テスト用に常に変化するデータ・ソースを用意します。こちらのWebページでも紹介しているラズパイのCPU温度を測ります。

　次のJSONデータをコピーし、真ん中のワーク・スペース・エリア（キャンパス）でCTRL＋iを押して、クリップボードに貼り付けます。importボタンを押すと、ノードと結線が貼り込まれます。

[{"id":"4404c35a.efde9c","type":"tab","label":"Flow 1"},{"id":"7ef2285a.865898","type":"inject","z":"4404c35a.efde9c","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"x":104,"y":87,"wires":[["c7914d15.39e7f"]]},{"id":"f9cd19d7.e625c8","type":"debug","z":"4404c35a.efde9c","name":"","active":true,"console":"false","complete":"payload","x":730,"y":282,"wires":[]},{"id":"c7914d15.39e7f","type":"exec","z":"4404c35a.efde9c","command":"vcgencmd measure_temp","addpay":false,"append":"","useSpawn":"","timer":"","name":"","x":349,"y":172.5,"wires":[["f9cd19d7.e625c8"],[],[]]}]

　右上のDeployをクリックすると、プログラムが更新されます。左のtemstampと書かれたノード左のベロ（ボタン）の部分をクリックするとプログラムが1回実行され、右のdebugエリアに結果が表示されます。

　左のノード・パレット・エリアからfunctionノードをドラッグ＆ドロップします。このノードをダブルクリックして設定画面を出します。「return msg;」と最初から1行javascriptのコードが書かれていますが、この上の行に、2行追加します。node-REDでは各ノードをメッセージが伝わります。メッセージのフォーマットはJSONと呼ばれる簡潔な構造をしています。msg.payloadがメッセージで送られている温度データです。「temp=24.5'C」のフォーマットなので、数値だけ取り出します。javascriptのsubstr(5,4)は、先頭（0スタート）から5番目の文字から4文字だけ切り出します。Nameはこのノードにつける名称で、任意です。

　functionエリアはテキストを記述しますが、カーソルがずれるので、テキスト・エディタで記述したプログラムを貼り込むようにします。

var o = msg.payload;
msg.payload = o.substr(5,4)

　Doneをクリックし、このfunctionノードを、temperatureと書かれたexecノードと緑色のdebugノードを結ぶ線の上に持っていきます。マウス・ボタンを離さずにいると結ぶ線が点線になります。

　マウス・ボタンを離すとドロップされ、途中に挿入されます。右肩のDeployをクリックして更新します。

　debugの右にあるベロ（ボタン）のようなところをクリックして濃い色に変更します。濃い色のとき、右のdebugタブに情報が出ます。一番左にあるinjectノード（表示はtimestamp）の左にあるベロの部分（インジェクト・ボタン）を1回クリックすると、このプログラムが1回だけ走ります。その結果、温度の数値部分だけがdebugエリアに表示されました。

　作業を間違ったときは、マウスで選択し赤く色を変えたら、DeleteキーかCTRL+xで削除できます。

　左のノード・パレットからgaugeをドラッグ＆ドロップします。落とした途端、unitsという名称に変わります。gaugeの入っているdashboardは、初期状態では存在しません。ノードの追加作業が必要です。コラムを参照してください。

　unitsと書かれたノードをダブルクリックして設定画面を出します。

　デフォルトでもよいですが、Group、Title、Label、Rangeを修正します。

　表示が℃に変わったGaugeノードをfunction（表示はtemperature）ノードの出力側へつなぎ、Deployします。

　URLが「ラズパイのIPアドレス:1880/ui/#/0」のWebページを開くと図が表示されています。

　連続して温度を測れるように変更します。左にあるtimestampノードをダブルクリックして設定画面を出します。現状は左のボタンをクリックすると1回だけ実行指令を次のノードに送りました。これを、1秒ごとに繰り返すように変更します。

　同様にしてdashboardからchartを追加します。実行の様子です。図をクリックするとgifアニメーションが動きます。

　動作を止めるには、timestampノードでintervalをnoneに戻して、Deployします。

コラム　Node-REDの利用開始手順

　ラズパイのOS Raspbian の2016-11-25版にはnode-REDがインストールされているので、メニューのProgrammingからNode-REDを選ぶだけでサーバが動き始めます。

　コンソールが開き、最初に、

sudo apt-get install npm sudo npm i -g npm@2.x

を実行するように表示が出るので従います。

いったん、ターミナルを開いて、

node-red-stop

で、サーバを止め、上記の二つの命令を実行します。

node-red-start

で動作を開始します。　この作業で、PCから、

http:// ラズパイのIPアドレス:1880/

として作業ができるフロー・エディタ画面で、新しいノードのインストールがGUIでできるようになります。1880はポート番号です。

　node-red-dashboardノードは、フロー・エディタの右肩にあるメニューからManage paletteを選びます。

 　画面左にManage Palletの作業エリアが出るので、installのタブを選びます。「dashboard」と入力し利用できるノードを検索します。

　installのアイコンをクリックするとインストールが始まります。数分で完了し、15個ほどのノードを追加したと画面中央付近に表示が出ます。しかし、フロー・エディタ画面の左のノード・パレットにはアイコンが出ていない場合があります。

　ラズパイのターミナルで、

node-red-stop node-red-start

　node-REDサーバを再起動し、フロー・エディタ画面のWebを再読み込みします。そうすると、追加したnode-red-dashboardノードが見えます。