Node-RED Advent Calendar 2015 の10日目。 Node-REDでゴニョゴニョしたデータをビジュアライズするお話です。

はじめに

Node-REDでは色々なサービスとの連携や組み込みNodeによるプログラミングの簡略化が測れるので Hackathon向きのソフトウェアといえます。

先日開催されたExtremeHomeHack(EHH)でもNode-REDを使用しました。 当初はNode-REDに各デバイスのセンサ値を取り込み、処理、可視化予定でしたが、 IoTFoundationやWebSocket経由でセンサ値はすぎに取得できたものの、 処理後の可視化用Webインタフェースが間に合わず、幾つかのセンサ値が無駄になってしまいました。。。

次こそ可視化!! ということで、簡単なビジュアライズを方法をまとめまてみました。

ライブラリの探索

自前で全て実装するのは骨が折れるので、 使えそうなライブラリを探索しました。選定基準は以下の3つです。

見た目がナウいこと (せっかくビジュアライズするなら)

Node-REDとつなぎ込みやすいもの

カスタマイズが簡単にできること

1. Dashing

ひとつ目は一番の有名ドコロ、Shinatraベースのダッシュボードフレームワークです。 各ウィジェットは枠組みがRubyのERBテンプレート、見た目がSCSS、動作をCoffeeScriptで書けるようになっています。 Widgetの値更新用にPOST APIが整備されているので、Node-REDのHTTPRequestNodeから簡単に値を更新することができます。

● WebSocketで受け取ったデータをHTTPRequestNodeで送る例

[{"id":"89201285.76dff","type":"websocket-listener","z":"","path":"/ws/accesor","wholemsg":"false"},{"id":"7a8ce8e1.857318","type":"http request","z":"d181b0d7.2e7e5","name":"","method":"POST","ret":"txt","url":"http://localhost:3030/widgets/test","x":421,"y":742,"wires":[["34480605.cbb7fa"]]},{"id":"f77f188f.0880e8","type":"template","z":"d181b0d7.2e7e5","name":"","field":"payload","format":"json","template":"{\n \"auth_token\": \"YOUR_AUTH_TOKEN\", \n \"current\": \"payload.val\" \n}","x":274,"y":742,"wires":[["7a8ce8e1.857318"]]},{"id":"34480605.cbb7fa","type":"debug","z":"d181b0d7.2e7e5","name":"","active":true,"console":"false","complete":"false","x":599,"y":743,"wires":[]},{"id":"f564bf8d.0a9b4","type":"websocket in","z":"d181b0d7.2e7e5","name":"","server":"89201285.76dff","client":"","x":124,"y":742,"wires":[["f77f188f.0880e8"]]}]

2. freeboard.io

ふたつ目は、Node-REDとの連携が楽なfreeboard.ioです。 シンプルなHTML/CSS/JS(jQuery)で構成されています。 接続方法は至ってシンプル。出力にnode-red-contrib-freeboardのNodeを使用するだけです。

● InjectTriggerからFreeboard-Nodeを使ってデータを送る例

[{"id":"176e3fcd.e891c","type":"freeboard","name":"[Node-RED] Freeboard","x":715,"y":233,"z":"681a559a.97e5ac","wires":[]},{"id":"41e8ab5f.be1754","type":"inject","name":"Send Random Value","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"x":268,"y":233,"z":"681a559a.97e5ac","wires":[["c822ddf4.37dd2"]]},{"id":"c822ddf4.37dd2","type":"function","name":"","func":"msg.payload={value:Math.floor(Math.random()*100)};\nreturn msg;","outputs":1,"x":502,"y":233,"z":"681a559a.97e5ac","wires":[["176e3fcd.e891c"]]}]

詳細な使用方法についてはnpmページが詳しかったので割愛します。

3. eon-chart

3つ目は、リアルタイム描画が得意なeon-chartです。 D3ベースのグラフ描画ライブラリのC3.js、描画データの受信にはPubNubを使用しています。 Node-REDとの接続には、PubNub-Nodeを使用します。

おわりに

今回は3つの方法を紹介しました。 紹介しきれなかったものの中にも、オススメなものがあったのでリンクだけ掲載します。

atlasboard

razorflow