初めてWatson IoT Platformを使ってみよう、というかたのためのガイドです。
Watson IoT Platformを使ってみるでIoTアプリを準備しました。
IoTダッシュボードを作ってみるでIoTデータを可視化するダッシュボードを作っていきます。
画面の枠を用意します
下記のフローをコピペします
ダッシュボードの枠を準備
[{"id":"383414fd.c766fc","type":"template","z":"52c5924.ec4fbec","name":"test501.htmlを返す","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE HTML>\n<html>\n <head>\n <title>センサーからの情報を表示</title>\n <meta charset=\"utf-8\" />\n\n<style type=\"text/css\">\n{{{payload.css}}}\n</style>\n\n </head>\n <body style=\"background-color: #EAE5E3\">\n\n <div id='basic' align=\"center\">\n\n <div id='a1' align=\"left\">\n <h2>IoT Sample Dashboard</h2>\n IoTデータを可視化します\n </div>\n <div id='b1'>\n b1\n </div>\n <div id='d1'>\n d1\n </div>\n <div id='d2'>\n d2\n </div>\n <div id='d3'>\n d3\n </div>\n\n <div id='e1' >\n e1\n </div>\n <div id='e2'>\n e2\n </div>\n <div id='e3'>\n e3\n </div>\n\n <div id='f1'>\n f1\n </div>\n <div id='f2'>\n f2\n </div>\n <div id='f3'>\n f3\n </div>\n\n <div id='h1' >\n h1\n </div>\n <div id='h2'>\n h2\n </div>\n <div id='h3'>\n h3\n </div>\n\n <div id='j1'>\n j1\n </div>\n <div id='j2'>\n j2\n </div>\n <div id='j3'>\n j2\n </div>\n\n <div id='v1' align=\"left\">\n v1\n </div>\n\n <div id='x1' align=\"left\">\n x1\n </div>\n\n<div id=\"y1\" align=\"left\">\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\" align=\"left\">\n\tcopyright (c) abc.com All rights reserved.\n</div>\n</div>\n\n\n</body>\n</html>\n","x":450,"y":120,"wires":[["c9313238.9b021"]]},{"id":"e6ebfd2c.2cf238","type":"http in","z":"52c5924.ec4fbec","name":"","url":"/test501","method":"get","swaggerDoc":"","x":117,"y":119,"wires":[["bc10d980.12ff1"]]},{"id":"f108841f.523a6","type":"comment","z":"52c5924.ec4fbec","name":"ダッシュボードの枠を準備","info":"","x":137,"y":79,"wires":[]},{"id":"bc10d980.12ff1","type":"template","z":"52c5924.ec4fbec","name":"css501","field":"payload.css","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"#basic {\n width: 1200px;\n margin: auto;\n}\n\n#a1 {\n background-color: #98d98e;\n padding: 20px;\n height: 100px;\n}\n#b1 {\n background-color: #e4de8a;\n padding-left: 20px;\n height: 40px;\n text-align:left;\n font-size: 18pt\n}\n\n#c1 {\n float: left;\n background-color: #68be8d;\n width: 50px;\n height: 476px ;\n}\n#c2 {\n float: left;\n background-color: #cee4ae;\n width: 250px;\n height: 476px ;\n}\n\n#c3 {\n float: left;\n width: 500px;\n height: 476px;\n}\n\n#c4 {\n float: right;\n background-color: #93b69c;\n width: 400px;\n height: 80px ;\n}\n#c5 {\n float: right;\n background-color: #b9d08b;\n width: 400px;\n height: 60px ;\n}\n#c6 {\n overflow: scroll;\n float: right;\n background-color: #98d98e;\n width: 400px;\n height: 336px ;\n}\n\n#d1 {\n clear: both;\n float: left;\n width: 400px;\n height: 150px;\n background-color: #c1d8ac;\n}\n#d2 {\n float: left;\n width: 400px;\n height: 150px;\n background-color: #b9d08b;\n}\n#d3 {\n float: left;\n width: 400px;\n height: 150px;\n background-color: #badcad;\n}\n\n#e1 {\n float: left;\n width: 400px;\n height: 120px;\n background-color: #c1d8ac;\n}\n#e2 {\n float: left;\n width: 400px;\n height: 120px;\n background-color: #b9d08b;\n}\n#e3 {\n float: left;\n width: 400px;\n height: 120px;\n background-color: #badcad;\n}\n\n#f1 {\n float: left;\n width: 400px;\n height: 200px;\n background-color: #c1d8ac;\n}\n#f2 {\n float: left;\n width: 400px;\n height: 200px;\n background-color: #b9d08b;\n}\n#f3 {\n float: left;\n width: 400px;\n height: 200px;\n background-color: #badcad;\n}\n\n#g1 {\n float: left;\n width: 400px;\n height: 150px;\n background-color: #c1d8ac;\n}\n#g2 {\n float: left;\n width: 400px;\n height: 150px;\n background-color: #b9d08b;\n}\n#g3 {\n float: left;\n width: 400px;\n height: 150px;\n background-color: #badcad;\n}\n\n#h1 {\n float: left;\n width: 400px;\n height: 120px;\n background-color: #98d98e;\n}\n#h2 {\n float: left;\n width: 400px;\n height: 120px;\n background-color: #c1d8ac;\n}\n#h3 {\n float: left;\n width: 400px;\n height: 120px;\n background-color: #93b69c;\n}\n\n#j1 {\n float: left;\n width: 400px;\n height: 200px;\n background-color: #98d98e;\n}\n#j2 {\n float: left;\n width: 400px;\n height: 200px;\n background-color: #c1d8ac;\n}\n#j3 {\n float: left;\n width: 400px;\n height: 200px;\n background-color: #93b69c;\n}\n\n#v1 {\n clear: both;\n height: 100px;\n padding-left: 10px;\n background-color: #aacf53;\n}\n#x1 {\n height: 100px;\n padding-left: 10px;\n background-color: #c1d8ac;\n}\n#y1 {\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":280,"y":120,"wires":[["383414fd.c766fc"]]},{"id":"c9313238.9b021","type":"http response","z":"52c5924.ec4fbec","name":"","x":630,"y":120,"wires":[]}]
だいたいこんな感じになりました。
