Node-RED Advent Calendar 2015 の10日目。
Node-REDでゴニョゴニョしたデータをビジュアライズするお話です。
Node-REDでは色々なサービスとの連携や組み込みNodeによるプログラミングの簡略化が測れるので
Hackathon向きのソフトウェアといえます。
先日開催されたExtremeHomeHack(EHH)でもNode-REDを使用しました。
当初はNode-REDに各デバイスのセンサ値を取り込み、処理、可視化予定でしたが、
IoTFoundationやWebSocket経由でセンサ値はすぎに取得できたものの、
処理後の可視化用Webインタフェースが間に合わず、幾つかのセンサ値が無駄になってしまいました。。。
次こそ可視化!!
ということで、簡単なビジュアライズを方法をまとめまてみました。
自前で全て実装するのは骨が折れるので、
使えそうなライブラリを探索しました。選定基準は以下の3つです。
見た目がナウいこと (せっかくビジュアライズするなら)
ひとつ目は一番の有名ドコロ、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"]]}]
ふたつ目は、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です。
D3ベースのグラフ描画ライブラリのC3.js、描画データの受信にはPubNubを使用しています。
Node-REDとの接続には、PubNub-Nodeを使用します。
今回は3つの方法を紹介しました。
紹介しきれなかったものの中にも、オススメなものがあったのでリンクだけ掲載します。
10日が終わってしまいそうなのでひとまずここまで。
次回は、ダッシュボードの作りこみ方について書こうと思います。