Sigfox Shield for Arduino (UnaShield)の温度データをNode-REDでグラフ表示

Sigfox CallbackとIBM Watson IoT Platformとの連携は、[Sigfox CallbackとIBM Watson IoT連携](https://qiita.com/ghibi/items/6ac04e23e9072dc07b21)で記載しましたが、ここでは、Sigfox Shield for Arduino（UnaShield）から取得した温度データをNode-REDのグラフダッシュボードで表示します。
#前提（UnaShieldのCallback設定）
**UnaShield**の開発ドキュメントはhttps://unabiz.github.io/unashield/ で公開されています。ここで、サンプルスケッチ["DemoTestUnaShieldV2SRCZ3"](https://github.com/UnaBiz/unabiz-arduino/tree/master/examples/DemoTestUnaShieldV2SRCZ3)を使うと、UnaShieldの通信モジュールで計測される**温度**と**入力電圧**を取得できます。
Sigfox Callback設定のCustom Payload Configで、下記の定義を入力すると
```counter:2:int:16:little-endian temperature:6:int:16:little-endian voltage:10:int:16:little-endian```
{customData#counter}、{customData#temperature}、{customData#voltage}で、送信メッセージのカウンタ値、温度、入力電圧を使い、下記のようなJSONを設定できます。

```sigfoxcallback.json
{
	"device" : "{device}",
	"time" : {time},
	"data" : "{data}",
	"counter" : {customData#counter},
	"temperature" : {customData#temperature},
	"voltage" : {customData#voltage}
}
```
このメッセージをIBM Watson IoT PlatformにCallbackし、温度データをグラフ表示します。

#Node-REDの設定
Node-REDでは、[Node-RED Library](https://flows.nodered.org/?num_pages=1)で、世界中のユーザが作成したノードが公開されており、自身のフローに追加することができます。
ここでは、**dashboard**というノードを使用します。
##Dashboardノードをフローに追加する
Node-REDの右上メニューから**"パレットの管理"**メニューを選択し、検索バーで"dashboard"と検索します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/afdc1176-cc26-40b0-978a-8452b8054671.png)
"node-red-dashboard"というノードが一覧に表示されるので、[ノードを追加]ボタンをクリックします。
左メニューの"dashboard"グループに複数のノードができるので、今回は、gaugeとchartをフロー上にドラッグ＆ドロップします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/de4600a4-8d77-0a07-2fd9-1df95084909b.png)
次に、gaugeとchartをダッシュボードに配置する設定を行います。
###ノードをダッシュボードに配置する
右メニューで![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/26059d26-937c-5f6a-7412-d4dffb8e30c7.png)ボタンをクリックし、"配置"（Layout）タブの[+タブ]ボタンをクリックすると新規タブ（Tab 1）が作成されます。Tab 1のところで[+グループ]ボタンをクリックすると新規グループ（Group 1）が作成されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/9c357642-8f52-70bf-0ded-59285055a1a0.png)
今回は、このTab1のGroup1の配下にgaugeとchartを配置します。
フロー上のgaugeノードをダブルクリックすると、編集画面が表示されるので、Group項目で"Group 1 [Tab 1]"を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/1e18c65c-6be2-68fb-d3ed-c15f6ae60652.png)
同様にchartノードも"Group 1 [Tab 1]"を選択してください。

##Watson IoT Platformから温度データをDashboradに表示する
最終的なフローは下図の通りとなります。Watson IoT Platformから取得したJSONメッセージから温度情報を切り出し、dashboardに展開する"temperature" functionノードを作成します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/b0633348-1698-112c-2fcd-bbbf0fb233e1.png)

###温度情報をダッシュボードに渡す（temperature）ノードの作成
Watson IoTからは、msgオブジェクトとして、下記のJSONが送られてきます。

```fromWatsonIoT.json
{
  "topic": "iot-2/type/5a17978f5005747c7760123d/id/7B0DEx/evt/message/fmt/json",
  "payload": {
    "device": "7B0DEx",
    "time": 1540797562,
    "data": "0b8d274f056fffea002003f5",
    "counter": 3,
    "temperature": 291,
    "voltage": 30
  },
  "deviceId": "7B0DEx",
  "deviceType": "5a17978f5005747c7760123x",
  "eventType": "message",
  "format": "json",
  "_msgid": "631ce355.88a95c"
}
```
ここから、温度（temperature）を取得し、daschboardに必要なtopic、payload、timestampにマッピングします。（必要な項目は表示するグラフ種別により異なります）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/a52c3327-bc09-2968-4d1c-ca0fe41e2067.png)
ここで、温度情報は元々10倍した値がUnaShieldから送られてくるため、ここで10分の1しておきます。また、timestampも、ミリ秒単位がdashboardの単位なので、秒単位で送られてくるmsg.payload.timeを1,000倍しておきます。

#動作確認
デプロイ![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/0ab6e043-60b7-4e39-28ac-055ad524cd44.png)後、ダッシュボードメニュー（下図）の赤枠をクリックすると、デプロイされたページを確認することができます。
通常、Node-REDのURLがhttps://xxx.mybluemix.net/red の場合、グラフダッシュボードのURLはhttps://xxx.mybluemix.net/ui/ となります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/2fdfe9c8-743e-8138-ede3-81fdcd9a20b5.png)
下図のようにゲージと時系列グラフが表示されることが確認できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/ca36a1b2-8f67-19c1-6cc3-d04478a32810.png)

なお、dashboardノードのドキュメントは[こちら](https://flows.nodered.org/node/node-red-dashboard)を参考にしてください。

[Sigfox Japan KCCS](https://qiita.com/organizations/sigfox)