準備

Watson IoT Platformを使ってみるを参考に、node-redを用意してください。2016年の中期以前に作成したnode-redでは紹介するnodeの追加ができません。その場合は、新しいnode-redを用意してください。

ノード追加の呼び出し

右上の設定ボタン（≡）＞処理ノードの追加削除を選択してください。

左側に処理ノードの追加削除タブが表示されます。

ダッシュボードノードの追加

処理ノードを追加タブを選択し、検索フィールドでnode-red-dashboardで検索してください。

node-red-dashboardが見つかります。

その処理ノードを追加ボタンを選択してください。ダイアログで確認後、node-red-dashboardのインストールが行われます。ダイアログで確認後完了ボタンを選択すると、元のフロー編集画面に戻ります。パレットにbutton等の画面部品(widget)のノードが追加されていることを確認してください。

画面部品の作成

パレットからノードをドラッグ＆ドロップして、下図のフローを作成してください。

レイアウトの指定

ダッシュボード画面部品を、タブに分けたり、グループにしたり、レイアウトすることができます。ここでは、自動的にレイアウトします。
右側にdashboardタブを選択し、その下側の"There are 3 widgets not in a group...."の"here"リンクを選択してください。

tabとgroupが作成され、その中に作成した３つのwidgetが追加されます。

データ送信用のノードの設定

数値データを送信するためノードの設定を行います。次のノードをダブルクリックし、下記の設定を行ってください。

buttonノード

項目名	内容
payloadの▼(タイプ)	number
payload	456

injectノード

項目名	内容
payloadの▼(タイプ)	number
payload	123

ダッシュボードの閲覧

デプロイボタンを選択してください。
編集しているnode-redのURLの末尾を/redから/uiに変えたURLをWWWブラウザでアクセスしてください。
（例：http://example.com/redの場合、http://example.com/ui ）
ゲージとチャートが表示されます。

データのグラフ表示

BUTTONボタンを選択したり、node-redのフロー画面でinjectノードのボタンを選択すると、データが送信され、ゲージやチャートが変化します。

補足

Watson IoT Platform - Node-RED - フローをコピーする方法を使って、下記より、このこの記事の中で作成したフローをコピーできます。

[{"id":"eadeb7c.eac1e48","type":"inject","z":"fd7b62a4.3c599","name":"","topic":"","payload":"123","payloadType":"num","repeat":"","crontab":"","once":false,"x":90,"y":160,"wires":[["29f4f502.fbeee2","e648bf56.10be48"]]},{"id":"fd1154d2.179b78","type":"ui_button","z":"fd7b62a4.3c599","name":"","group":"971fee47.5e7478","order":0,"width":0,"height":0,"label":"button","color":"","bgcolor":"","icon":"","payload":"456","payloadType":"num","topic":"","x":90,"y":80,"wires":[["29f4f502.fbeee2","e648bf56.10be48"]]},{"id":"29f4f502.fbeee2","type":"ui_gauge","z":"fd7b62a4.3c599","name":"","group":"971fee47.5e7478","order":0,"width":0,"height":0,"gtype":"gage","title":"Gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00B500","#E6E600","#CA3838"],"seg1":"","seg2":"","x":290,"y":100,"wires":[]},{"id":"e648bf56.10be48","type":"ui_chart","z":"fd7b62a4.3c599","name":"","group":"971fee47.5e7478","order":0,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"colors":["#1F77B4","#AEC7E8","#FF7F0E","#2CA02C","#98DF8A","#D62728","#FF9896","#9467BD","#C5B0D5"],"x":290,"y":160,"wires":[[],[]]},{"id":"971fee47.5e7478","type":"ui_group","name":"Group","tab":"361e0119.7869f6","order":null,"disp":true,"width":6},{"id":"361e0119.7869f6","type":"ui_tab","name":"Tab","icon":"dashboard","order":0}]

node-red-dashboardでチャート表示IoTアプリ作成

準備