初めてWatson IoT Platformを使ってみよう、というかたのためのガイドです。
Watson IoT Platformを使ってみるでIoTアプリを準備しました。
IoTダッシュボードを作ってみるでIoTデータを可視化するダッシュボードを作っていきます。
DBから取得したデータを可視化します
- ここではWatson IoT Platform - 直接dashDBへデータを格納するの「サンプル３：Alps IoT Smart ModuleからのIoTデータを指定した間隔でdashDBへ書き込む」などで取得し保存したdashDB内のAlps Smart IoT Moduleの照度（AmbientLight)値を表示してみます
- 下記のフローをコピペします
DBから取得したデータを可視化
[{"id":"bc8571eb.520da8","type":"http in","z":"b0ed7852.d58f08","name":"","url":"/test503","method":"get","swaggerDoc":"","x":110,"y":660,"wires":[["77ff7f6b.b3584"]]},{"id":"4089dbfc.b10504","type":"comment","z":"b0ed7852.d58f08","name":"DBから値を取得し表示","info":"","x":120,"y":620,"wires":[]},{"id":"77ff7f6b.b3584","type":"function","z":"b0ed7852.d58f08","name":"時間をセット","func":"var arr1 = msg.payload.starttime.split(/[T]/);\nmsg.starttime = arr1[0] + \" \" + arr1[1] + \":00\";\nvar st_parse = msg.starttime.replace(/-/g, '/');\nmsg.newstarttime = Date.parse(st_parse) / 1000;\n\nvar arr2 = msg.payload.endtime.split(/[T]/);\nmsg.endtime = arr2[0] + \" \" + arr2[1] + \":00\";\nvar et_parse = msg.endtime.replace(/-/g, '/');\nmsg.newendtime = Date.parse(et_parse) / 1000;\n\nreturn msg;","outputs":1,"noerr":0,"x":280,"y":660,"wires":[["d2ff44a3.211098"]]},{"id":"992c0c61.5d551","type":"function","z":"b0ed7852.d58f08","name":"結果をセット","func":"var i = 0;\nvar len = msg.payload.length;\nvar arr01 = new Array();\n\nfor (i; i < len; i++) {\n var c1 = i;\n arr01.push([c1,parseFloat(msg.payload[i]['AMBIENTLIGHT'])]);\n}\n\nmsg.payload.r01 = JSON.stringify(arr01);\n\nreturn msg;\n","outputs":1,"noerr":0,"x":600,"y":660,"wires":[["2163ea48.fee726"]]},{"id":"2c9ff304.95fee4","type":"template","z":"b0ed7852.d58f08","name":"test503.html返却","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":" <!DOCTYPE HTML>\n <html>\n <head>\n <title>IoT Sample Dashboard</title>\n <meta charset=\"utf-8\" />\n <script type=\"text/javascript\" src=\"https://www.google.com/jsapi\"></script>\n <script type=\"test/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"></script>\n\n <style type=\"text/css\">\n {{{payload.css}}}\n </style>\n </head>\n <body>\n\n <div id='basic'>\n\n <div id='a1'>\n <h2>IoT Sample Dashboard</h2><br>\n データベースに保存されたIoTデータを可視化します\n </div>\n\n <div id='c1'>\n <b>入力！</b>\n <P>表示対象の属性と期間を指定します。</P>\n <form action=\"http://このIoTアプリの名前.mybluemix.net/test503\" method=\"get\">\n この日時から <input type=\"datetime-local\" name=\"starttime\" value=\"2017-02-15T10:00\" step=\"60\" style=\"font-size:18px\"><br>\n この日時まで <input type=\"datetime-local\" name=\"endtime\" value=\"2017-02-15T16:00\" step=\"60\" style=\"font-size:18px \"><br><br>\n <button type=\"submit\" name=\"submit\" value=\"送信\">\n <font size=\"2\">表示要求を</font><font size=\"5\" color=\"red\">送信！</font>\n </button>\n <INPUT type=\"reset\" value=\"リセット\"><BR><BR>\n </FORM>\n\n </div>\n\n <div id='d1' align=\"center\">\n d1\n </div>\n <div id='d2' align=\"center\">\n d2\n </div>\n <div id='d3' align=\"center\">\n d3\n </div>\n\n <div id='e1' align=\"center\">\n e1\n </div>\n <div id='e2' align=\"center\">\n e2\n </div>\n <div id='e3' align=\"center\">\n e3\n </div>\n\n <div id='f1' align=\"center\">\n f1\n </div>\n <div id='f2' align=\"center\">\n f2\n </div>\n <div id='f3' align=\"center\">\n f3\n </div>\n\n <div id='g1' align=\"center\">\n g1\n </div>\n <div id='g2' align=\"center\">\n g2\n </div>\n <div id='g3' align=\"center\">\n g3\n </div>\n<!---\n <div id='h1' align=\"left\">\n <h3>アラート</h3>\n </div>\n <div id='j1' align=\"center\">\n\n </div>\n--->\n <div id=\"y1\">\n 参考URL\n <ul>\n <li><a href=\"http://qiita.com/egplnt/items/af867711a7191923b2ff\">Watson IoT Platformを使ってみる</a></li>\n <li><a href=\"https://internetofthings.ibmcloud.com/#/\">Watson IoT Platform</a></li>\n <li><a href=\"https://developer.ibm.com/recipes/tutorials/use-the-simulated-device-to-experience-the-iot-foundation/\">Recipe - Simulator</a></li>\n </ul>\n マニュアル\n <ul>\n <li><a href=\"http://ibm.com/iot\">IBM IoT</a></li>\n <li><a href=\"https://docs.internetofthings.ibmcloud.com/ja/\">Watson IoT Platform資料ページ</a></li>\n <li><a href=\"https://developer.ibm.com/recipes/\">Recipe</a></li>\n </ul>\n </div>\n\n <div id=\"z1\">\n \tcopyright (c) abc.com All rights reserved.\n </div>\n </div>\n\n\n <script>\n\n google.load(\"visualization\", \"1\", {packages:[\"corechart\"]});\n google.setOnLoadCallback(drawChart02);\n\n function drawChart02() {\n d1ChartData = google.visualization.arrayToDataTable(\n [[\"INCOMING_EVENT_CD\",\"照度\"],[439,7.0007]] );\n d1ChartData.removeRow(0);\n d1ChartData.addRows( {{{ payload.r01 }}} );\n d1ChartOptions = { title: '照度',\n 'titleTextStyle': { fontName: 'Meiryo UI', fontSize: 30},\n legend: { position: 'bottom' } };\n d1Chart = new google.visualization.LineChart(document.getElementById('d1'));\n d1Chart.draw(d1ChartData, d1ChartOptions);\n\n\n };\n\n </script>\n\n </body>\n </html>\n","x":930,"y":660,"wires":[["c41160e2.8e019"]]},{"id":"c41160e2.8e019","type":"http response","z":"b0ed7852.d58f08","name":"","x":1090,"y":660,"wires":[]},{"id":"16e866f0.3e6909","type":"debug","z":"b0ed7852.d58f08","name":"","active":true,"console":"false","complete":"false","x":550,"y":700,"wires":[]},{"id":"2163ea48.fee726","type":"template","z":"b0ed7852.d58f08","name":"css503","field":"payload.css","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"#basic {\n}\n\n#a1 {\n background-color: #98d98e;\n height: 120px;\n padding: 20px;\n}\n#b1 {\n background-color: #e4de8a;\n padding-left: 20px;\n height: 40px;\n text-align:left;\n font-size: 18pt\n}\n#c1 {\n background-color: #cee4ae;\n height: 300px;\n text-align:left;\n font-size: 18pt;\n padding: 20px;\n font-family: Meiryo;\n}\n\n#d1 {\n clear: both;\n float: left;\n width: 400px;\n height: 400px;\n background-color: #c1d8ac;\n}\n#d2 {\n float: left;\n width: 400px;\n height: 400px;\n background-color: #b9d08b;\n}\n#d3 {\n float: left;\n width: 400px;\n height: 400px;\n background-color: #badcad;\n}\n\n#e1 {\n clear: both;\n float: left;\n width: 400px;\n height: 400px;\n background-color: #c1d8ac;\n}\n#e2 {\n float: left;\n width: 400px;\n height: 400px;\n background-color: #b9d08b;\n}\n#e3 {\n float: left;\n width: 400px;\n height: 400px;\n background-color: #badcad;\n}\n\n#f1 {\n clear: both;\n float: left;\n width: 400px;\n height: 400px;\n background-color: #c1d8ac;\n}\n#f2 {\n float: left;\n width: 400px;\n height: 400px;\n background-color: #b9d08b;\n}\n#f3 {\n float: left;\n width: 400px;\n height: 400px;\n background-color: #badcad;\n}\n\n#g1 {\n clear: both;\n float: left;\n width: 400px;\n height: 400px;\n background-color: #c1d8ac;\n}\n#g2 {\n float: left;\n width: 400px;\n height: 400px;\n background-color: #b9d08b;\n}\n#g3 {\n float: left;\n width: 400px;\n height: 400px;\n background-color: #badcad;\n}\n\n#v1 {\n clear: both;\n height: 100px;\n background-color: #aacf53;\n}\n#x1 {\n clear: both;\n height: 100px;\n background-color: #c1d8ac;\n}\n\n#y1 {\n clear: both;\n background-color: #e4dc8a;\n padding-left: 10px;\n height: 250px;\n}\n#z1 {\n height: 25px;\n background-color: #8f8667;\n font-size: 18px;\n text-align: center;\n}\n","x":760,"y":660,"wires":[["2c9ff304.95fee4"]]},{"id":"d2ff44a3.211098","type":"dashDB in","z":"b0ed7852.d58f08","dashDB":"","service":"_ext_","query":"select AMBIENTLIGHT from ALPSIOT\nwhere date between ? and ?;","params":"msg.newstarttime,msg.newendtime","name":"ALPSIOT","x":440,"y":660,"wires":[["992c0c61.5d551","16e866f0.3e6909"]]}]
-
「ALPSIOT」dashDBノードをこのアプリが接続しているdashDBインスタンスに合わせて変更します
-
「test503.htmlを返す」テンプレートノードの２５行目の
<form action="http://このIoTアプリの名前.mybluemix.net/test503" method="get">をアプリ名に合わせて変更します -
無事「AmbientLight」(照度）が表示されました。加速度や気圧など他の値も空いている欄に表示していきます
