Watson IoT Platform - Node-RED - メーターで可視化する

初めてWatson IoT Platformを使ってみよう、というかたのためのガイドです。
[Watson IoT Platformを使ってみる](http://qiita.com/egplnt/items/af867711a7191923b2ff)でIoTアプリを準備しました。

#IoTデータをメーターで可視化します。
- 下記のフローを[Watson IoT Platform - Node-RED - フローをコピーする方法](http://qiita.com/egplnt/items/84b244a50d8bdaced324)を参照してコピペします。

```lang:メーターで可視化する
[{"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`

```js:メーターで可視化する
<!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;

```
![スクリーンショット 2016-05-22 13.11.07.png](https://qiita-image-store.s3.amazonaws.com/0/125842/2e510d5a-e8ad-20b0-4c3d-ef1673523ff6.png)

- IoTアプリにWebsocket出力を追加します。
- 画面左側のパレットのoutputセクションの「websocket」をドラッグ＆ドロップし、「Path」名として`/ws/sensor`と指定します。
- 必要に応じて、delayノードを挿入する事でメッセージの間隔を空ける事ができます。
![スクリーンショット 2016-05-22 13.13.16.png](https://qiita-image-store.s3.amazonaws.com/0/125842/a3b4be16-7f5c-f153-2013-9b50deeba781.png)

- ブラウザの新しいタブ（ページ）を開き、URLとして`http://IoTアプリ名.mybluemix.net/meter`を開きます。
- 温湿度計シミュレーターからのセンサーデータが表示される事を確認します。
![スクリーンショット 2016-05-22 12.56.09.png](https://qiita-image-store.s3.amazonaws.com/0/125842/c9bb1d78-7232-632e-ef53-9e4d1dd95520.png)