初めてWatson IoT Platformを使ってみよう、というかたのためのガイドです。
Watson IoT Platformを使ってみるでIoTアプリを準備しました。
#IoTデータをメーターで可視化します。
- 下記のフローをWatson IoT Platform - Node-RED - フローをコピーする方法を参照してコピペします。
メーターで可視化する
[{"id":"e445179c.e675","type":"http in","z":"6dbd4dd6.4f5dd4","name":"","url":"/meter","method":"get","swaggerDoc":"","x":190,"y":320,"wires":[["cf172771.de3cd"]]},{"id":"cf172771.de3cd","type":"template","z":"6dbd4dd6.4f5dd4","name":"メーターで可視化","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<head>\n\t<title>Simple Meter</title>\n\t<script type=\"text/javascript\" src=\"https://www.google.com/jsapi\"></script>\n\t<script type=\"text/javascript\">\nvar wsUrl = 'ws://IoTアプリ名.mybluemix.net/ws/sensor';\nvar socket;\nvar temperatureData, humidityData;\nvar temperatureOptions, humidityOptions;\nvar temperatureGauge, humidityGauge;\n\ngoogle.load(\"visualization\", \"1\", {packages:[\"gauge\"]});\ngoogle.setOnLoadCallback(drawGauge);\n\nfunction connect() {\n\tsocket = new WebSocket(wsUrl);\n\tsocket.onmessage = function(e) {\n\t\tvar sensorData = JSON.parse(e.data);\n\t\t// console.log('sensorData= ' + e.data); \n\t\tupdate(sensorData);\n\t};\n};\n\nfunction disconnect() {\n\tsocket.close();\n};\n\nfunction update(sensorData){\n\ttemperatureData.setValue(0, 1, sensorData.d.temp);\n\thumidityData.setValue(0, 1, sensorData.d.humidity);\n\ttemperatureGauge.draw(temperatureData, temperatureOptions);\n\thumidityGauge.draw(humidityData, humidityOptions);\n}\n\nfunction drawGauge() {\n\ttemperatureData = google.visualization.arrayToDataTable([\n\t\t['Label', 'Value'],\n\t\t['Temperature', 0]\n\t]);\n\n\thumidityData = google.visualization.arrayToDataTable([\n\t\t['Label', 'Value'],\n\t\t['Humidity', 0]\n\t]);\n\n\ttemperatureOptions = {\n\t\twidth: 800, height: 240,\n\t\tmin: 0, max: 60,\n\t\tredFrom: 50, redTo: 60,\n\t\tyellowFrom:40, yellowTo: 50,\n\t\tminorTicks: 5\n\t};\n\n\thumidityOptions = {\n\t\twidth: 800, height: 240,\n\t\tmin: 0, max: 100,\n\t\tredFrom: 90, redTo: 100,\n\t\tyellowFrom:75, yellowTo: 90,\n\t\tminorTicks: 5\n\t};\n\n\ttemperatureGauge = new google.visualization.Gauge(document.getElementById('temperatureGauge'));\n\thumidityGauge = new google.visualization.Gauge(document.getElementById('humidityGauge'));\n\n\ttemperatureGauge.draw(temperatureData, temperatureOptions);\n\thumidityGauge.draw(humidityData, humidityOptions);\n};\n\n\t</script>\n</head>\n<body style=\"font-size: 56px; font-family: helvetica; text-align: center; margin-top: 40px;\">\n <div id=\"text\">Simple Meter</div>\n \t<div>\n\t\t<button onclick=\"connect()\">Connect</button>\n\t\t<button onclick=\"disconnect()\">Disconnect</button>\n\t</div>\n\t<div>\n\t\t<div id=\"temperatureGauge\" style=\"width: 800px; height: 240px;\"></div>\n\t\t<div id=\"humidityGauge\" style=\"width: 800px; height: 240px;\"></div>\n\t</div>\n</body>\n</html>","x":401,"y":320,"wires":[["3e50f804.205b2"]]},{"id":"3e50f804.205b2","type":"http response","z":"6dbd4dd6.4f5dd4","name":"","x":590,"y":320,"wires":[]}]
- 真ん中の「メーターで可視化」Templateノードをダブルクリックで開きます。
- ７行目の「IoTアプリ名」の部分を使用しているIoTアプリ名に更新します
- 例：
var wsURL = ws://super-iot-appl.mybluemix.net
メーターで可視化する
<!DOCTYPE html>
<html>
<head>
<title>Simple Meter</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var wsUrl = 'ws://IoTアプリ名.mybluemix.net/ws/sensor';
var socket;
var temperatureData, humidityData;
var temperatureOptions, humidityOptions;
var temperatureGauge, humidityGauge;
-
IoTアプリにWebsocket出力を追加します。
-
画面左側のパレットのoutputセクションの「websocket」をドラッグ＆ドロップし、「Path」名として
/ws/sensorと指定します。 -
必要に応じて、delayノードを挿入する事でメッセージの間隔を空ける事ができます。
-
ブラウザの新しいタブ（ページ）を開き、URLとして
http://IoTアプリ名.mybluemix.net/meterを開きます。 -
温湿度計シミュレーターからのセンサーデータが表示される事を確認します。
