enebularとMilkcocoaを使ってノンコーディングでSensorTagデータを可視化する

## 概要

SensorTagとは温度、湿度、加速度、気圧、ジャイロ、磁力など様々なセンサーがついているTexas Instruments社の製品です。

![unnamed.jpg](https://qiita-image-store.s3.amazonaws.com/0/21109/fe1fa59d-5c88-2070-afee-03c5094432b7.jpeg)

今回はMacにインストールしたNode-REDでSensorTagのデータをMilkcocoaへ送ってenebularのINFOMOTIONで可視化するのをノンコーディングでやってみます。

## 1. MacのNode-REDでSensorTagデータを取得する

SensorTagの電源を入れて[SensorTagノード](http://flows.nodered.org/node/node-red-contrib-sensortag)をインストールしてMacのbluetoothを有効にすると以下のようにSensorTagノードのScanで見つかるのでチェックを入れて選択します。

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/f33942db-d41e-ab3c-9fee-786136fadbee.png)

これで以下のようにDebugノードにつなげるだけで色々なセンサーデータがDebugに表示されます。

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/fe375831-ef7e-e889-bd7f-66bae6654b0c.png)

データフォーマット的には以下の様な感じ。

```json
{
  "id": "7831c1d4020a.615137a5b49942ff8328932383dc4043.1", 
  "tstamp": {
    "$date": 1480074599630
  },
  "json_data": {
    "x": 0.072021484375,
    "y": 0.011474609375,
    "z": 1.00390625
  }
}
```

来たデータによって`json_data`の中身が違う感じですね。。。

## 2. バラバラにやって来るデータを統合する

とりあえずグラフに表示するためには取得できてそうな`temperature`, `humidity`, `object`, `ambient`, `x`, `y`, `z`の7つのデータを統合する必要があります（`pressure`と`lux`は値が桁違いなので今回除外します）これをするためには[NeuralNetworkノード](https://www.npmjs.com/package/node-red-contrib-neuralnetwork)（と言っても今回はニューラルネットワーク的なことはしません）のmultiInDataノードを使います。

multiInDataノードは以下の例ですと`msg.a`, `msg.b`, `msg.c`のデータが揃うまで後続への送信を待ってくれます。つまり先程のSensorTagから来るデータの`msg.payload.json_data`の下層のプロパティを一旦`msg`直下に移動してmultiInDataノードに渡してあげればデータを統合できるということです。

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/ed39baf3-a32f-7d0e-a543-065eca474053.png)

解ったような解らないような感じかと思いますので実際やってみましょう。以下のようにSensorTagノードの後続にChangeノードを配置します。

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/3305d4de-2283-eaaa-2ea3-c67d7d551f1f.png)

そしてChangeノードの設定を以下のようにします。

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/438b6962-5fc6-4895-53dc-2f69810ef25c.png)

画像では全てのルールが見えませんが上記7つのプロパティ（`temperature`, `humidity`, `object`, `ambient`, `x`, `y`, `z`）すべてのルールを設定します。これで`msg.payload.json_data.xxx`を`msg.xxx`へコピーできるわけですね。

続いて以下のようにmultiInDataノードを配置します。

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/d461f6f2-0039-21c5-322c-6e06b0905b9b.png)

次にmultiInDataノードを以下のように設定します。

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/9ee3acb6-1ade-6dae-35f4-a12b3add4915.png)

これも全部見えてないですが上記7つのプロパティ（`temperature`, `humidity`, `object`, `ambient`, `x`, `y`, `z`）すべてのルールを設定します。

これでChangeノードで`msg.payload.json_data.xxx`が`msg.xxx`へコピーされ、multiInDataノードで全てのプロパティが来るまで待ち構えているので以下のように1つのデータとして統合できるようになるのです。

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/bea60ced-8d71-c995-86b9-d8daa8230a73.png)

こんな感じのデータになれば成功です。

```
{
  "temperature": 26.38671875,
  "humidity": 29.095458984375,
  "x": -27.58203125,
  "y": 0.2998046875,
  "z": 2.0986328125,
  "object": 21.8125,
  "ambient": 26.28125
}
```

**※multiInDataノードは便利なんですが数値データしか扱えないです**

## 3. 統合したデータをMilkcocoaへ投げてenebularのINFOMOTIONで表示

enebularのINFOMOTIONはデータソースとしてMilkcocoaを選択可能です。Liveモードというリアルタイムな可視化は現在のところMilkcocoaでのみ実現できますので統合したデータをMilkcocoaへ投入します。

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/165cc3b5-d7d8-199e-26ec-6e3ec5718a2a.png)

Milkcocoaノードの使い方は[API Keyを使えるセキュアなMilkcocoaノード](http://qiita.com/joeartsea/items/5f96833dc12061d857e7)を参照してください。Milkcocoaにデータが送られ後続のDebugノードに以下のようなデータが表示されれば成功です。

```
{
  "value": {
    "temperature": 27.36358642578125,
    "humidity": 27.679443359375,
    "x": -31.02978515625,
    "y": -2.3984375,
    "z": 9.59375, 
    "object": 22.28125, 
    "ambient": 27.09375
  } 
}
```

続いてenebularのINFOMOTIONでDatasourceとしてMilkcocoaを設定します。

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/156072fe-df94-9621-eaad-34ec5f45730a.png)

これで新しいINFOMOTIONを作成する時に設定したMilkcocoaがDatasourceとして選択できるようになります。

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/285a3ccc-3140-3768-cc98-7c6833f97568.png)

あとはグラフの設定をしましょう。今回は解りやすくすべてのデータを`core`の`metricsgraphics`TYPEに表示するため以下のような設定にします。

![dialog.gif](https://qiita-image-store.s3.amazonaws.com/0/21109/77775c77-b825-47c2-e155-82e4d37694d2.gif)

最後に完成したグラフを開いてLiveモードにして以下のようにリアルタイムデータが表示されれば成功です（SensorTagを激しく動かすと以下のようになります）

![graph.gif](https://qiita-image-store.s3.amazonaws.com/0/21109/98c05855-7c45-4bc4-519a-a2448c3649d2.gif)

## まとめ

本当にノンコーディングでした！