Go to Qiita Advent Calendar 2024 Top
LoginSignup
54
58

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@asmanabu(Manabu Matsui)

Node-REDを使ってセンサーデータをWebSocketで出力する

Posted at

はじめに

Node-REDのサンプルを見ると、「Debugノードへ出力して終わり」というものが少なくありません。実際にセンサーデータを活用する場合は、データを可視化したり、データストアに保管したり、分析したりと様々なケースがあるかと思います。

今回は、センサーデータをWebSocketで出力し、ブラウザ側で可視化することに取り組んでみます。可視化には、Google Gaugeを利用します。

前提

  1. IBM Bluemix上でボイラープレート「Node-RED Starter」、または、「Internet of Things Foundation」がデプロイされていることとします
  2. Cloud Foundryのコマンド・ライン・インターフェース（cfツール）が導入されていることとします

作業の流れ

  1. Node-REDのフローを作成
  2. Githubからサンプルプログラムを取得
  3. サンプルプログラムのindex.htmlを編集
  4. IBM Bluemixにサンプルプログラムをpush
  5. 動作確認

Node-REDのフローを作成

以下のフローを作成します。このフローは、IoT Foundationからセンサーデータを受け取り、必要なデータのみを抽出し、そのデータをWebSocketで出力するフローです。
nodered-import-03.jpg

以下の4つのノードを利用しています。

ノード 用途
ibmiot（入力）ノード nodered-ibmiot-input.jpg センサーデータの入力受付
functionノード nodered-function.jpg センサーデータの加工
WebSocket（出力）ノード Nodered-WebSocket-output.jpg 加工したセンサーデータをWebSocketで出力
Debugノード nodered-debug.jpg センサーデータの加工結果確認

ibmiotノードの構成

ibmiotは、センサー・シミュレーターを使用するように構成しています。TI社のセンサータグやRaspberry Piなどを使用される場合は、適宜修正ください。

設定項目 内容
Authentication 今回は認証を使用しないため、Quickstartを選択します
Input Type Device Eventを選択します
Device Id センサー・シミュレーターのMACアドレスのコロン（:）を除き、アルファベットは小文字に変換した値を入力します。
Name ノードに付ける名前です。任意の値で問題ありません。

入力例は以下のとおりです。
Nodered-ibmiot.jpg

functionノードの構成

以下の例のように、センサーデータのみをJSONで出力するように変換します。


{ "temp": 16, "humidity": 78, "objectTemp": 23 }

以下のJavaScriotをfunctionノードに埋め込みます。

msg.payload =  {
    "temp": msg.payload.d.temp,
    "humidity": msg.payload.d.humidity,
    "objectTemp": msg.payload.d.objectTemp
};

return msg;

WebSocket（出力）ノードの構成

加工したセンサーデータをWebSocketで出力できるように構成します。

設定項目 内容
Type Listen onを選択します
Path /ws/sensorとします。設定方法は後述します。
Name ノードに付ける名前です。任意の値で問題ありません。

Pathの設定は、別途作成が必要です。Pathの右側にあるNodered-edit.jpgをクリックすると、Pathを設定できます。今回は、以下の図のように設定します。

Nodered-websocket-listner.jpg

上記設定で、WebSocket出力が完成です。WebSocketのURLは、以下となります。

ws://(Node-REDをデプロイしたランタイムのURL)/ws/sensor

たとえば、Node-REDのフローエディターのURLが以下の場合、

http://iotfvisualizationsample.mybluemix.net/red/#

WebSocketのURLは、以下となります。

ws://iotfvisualizationsample.mybluemix.net/ws/sensor

（参考）サンプルフローのインポート

以下のJSONを、Node-RED小ワザ集の小ワザ1. フローのインポートの方法を使ってインポートすることで、サンプルフローを復元できます。

[{"id":"bd2402cf.2fb78","type":"websocket-listener","path":"/ws/sensor","wholemsg":"false"},{"id":"ffc1357f.03c8e8","type":"ibmiot in","authentication":"quickstart","apiKey":"","inputType":"evt","deviceId":"88b29a5f62eb","applicationId":"","deviceType":"+","eventType":"+","commandType":"","format":"json","name":"IoT Sensor","service":"quickstart","allDevices":"","allApplications":"","allDeviceTypes":true,"allEvents":true,"allCommands":"","allFormats":"","x":230,"y":196,"z":"aaf8734f.9d6bc","wires":[["529ac4cf.69d984"]]},{"id":"529ac4cf.69d984","type":"function","name":"CreateMessage","func":"msg.payload =  {\n    \"temp\": msg.payload.d.temp,\n    \"humidity\": msg.payload.d.humidity,\n    \"objectTemp\": msg.payload.d.objectTemp\n};\n\nreturn msg;","outputs":1,"valid":true,"x":432,"y":196,"z":"aaf8734f.9d6bc","wires":[["dd32a123.2d572","6f5fdabc.f40f5c"]]},{"id":"dd32a123.2d572","type":"debug","name":"","active":true,"console":"false","complete":"payload","x":572,"y":112,"z":"aaf8734f.9d6bc","wires":[]},{"id":"6f5fdabc.f40f5c","type":"websocket out","name":"WebSocket Output","server":"bd2402cf.2fb78","client":"","x":663,"y":196,"z":"aaf8734f.9d6bc","wires":[]}]

2. Githubからサンプルプログラムを取得

GithubにGoogle Gaugeを利用するサンプルプログラムを用意しました。こちらを利用します。

git clone https://github.com/asmanabu/SensorVisualizationSample

ここでは、C:\work\SensorVisualizationSample にcloneしたこととします。

3. サンプルプログラムのindex.htmlを編集

index.htmlにGoogle Gaugeを利用するJavaScriptを記述しています。この中で、WebSocketのURLを指定する箇所がありますので、その部分を修正します。具体的には、10行目の以下の部分です。

var wsUrl = '<Your WebSocket URL>';

<Your WebSocket URL>の部分を、先ほどNode-REDのWebSocketノードを追加した際のURLに置き換えます。

index.html内のJavaSciptについて、簡単に細くします。18行目から58行目までは、Google Gaugeの初期設定です。温度（TemperatureとObject Temperature）用のGaugeと、湿度（Humidity）用のGaugeの2種類を用意しています。

60行目から75行目までの以下の部分が、WebSocketでデータを受信し、Gaugeの値を変更する箇所とります。

function connect() {
  socket = new WebSocket(wsUrl);
  socket.onmessage = function(e) {
    var sensorData = JSON.parse(e.data);
    
    // Update temperature data
    temperatureData.setValue(0, 1, sensorData.temp);
    temperatureData.setValue(1, 1, sensorData.objectTemp);
    
    // Update humidity data
    humidityData.setValue(0, 1, sensorData.humidity);
    
    temperatureChart.draw(temperatureData, temperatureOptions);
    humidityChart.draw(humidityData, humidityOptions);
  };
};

4. IBM Bluemixにサンプルプログラムをpush

修正したサンプルプログラムをIBM Bluemixにデプロイします。

デプロイの際に設定する情報は、manifest.ymlに記述できます。アプリケーションが使用するホスト名が、他のユーザーと重複しないように修正します。

エディターで C:\work\SensorVisualizationSample\manifest.yml を開きます。
<change to your hostname> の部分を修正してください。

manifest.ymlの修正例です。この例の場合ですと、vissample20150508.mybluemix.netがサンプルアプリケーションのURLとなります。


applications:
- disk_quota: 1024M
  name: Sensor Data Visualization Sample
  host: vissample20150508
  domain: mybluemix.net
  path: ./public
  instances: 1
  memory: 64M
  buildpack: https://github.com/cloudfoundry-incubator/staticfile-buildpack

manifest.ymlの修正が終わったら、cfツールを利用してBluemixにアプリケーションをデプロイします。
C:\work\SensorVisualizationSampleに移動し、cf pushを実行します。
現在のディレクトリ以下にあるすべてのファイルをBluemixに転送します。不要なファイルを転送しないように、必ずディレクトリを移動してください。

5. 動作確認

manifest.ymlに記載したURLにブラウザでアクセスします。「Connect」を記載されたボタンをクリックすると、WebSocketの接続が開始され、センサーデータの受信が始まります。センサー・シミュレーターの値を変更し、Gaugeの針が動くことを確認してみてください。

VisSample.jpg

54
58
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
54
58

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?