誰も知らないInfoMotionの話(2019/2/28) / InfoMotion untold story

Ff48f8437c6096cf7a09e771bf668f5c?s=47 takano
February 28, 2019

誰も知らないInfoMotionの話(2019/2/28) / InfoMotion untold story

enebular developer Meetup Vol.8の資料。

Ff48f8437c6096cf7a09e771bf668f5c?s=128

takano

February 28, 2019
Tweet

Transcript

  1. 誰も知らないInfoMotionの話 たかの (ウフル) 2019//+6

  2. 自己紹介 髙野英樹 2018年10月〜 ウフルに入社し、enebular開発に参加 enebularの大量Device対応 / InfoMotionの開発を担当 [好きな動物] 猫 [趣味]

    HuluとかPrime Videoとかをだらっとみること [苦手な食物] 魚介類とか [好きなプログラミング言語] JavaScript [好きなNode] 探し中
  3. 本日ご報告すること • InfoMotionとは何かについてご紹介します • [誰も知らない(かもしれない)話]として InfoMotionのShare機能についてご紹介します

  4. InfoMotionとは何か? DataSourceを介してIoTシステムからデータを取得し可視化するツールです Data Source Devices enebular Device InfoMotion Device Device

    ユーザ NodeRED Flow NodeRED Flow NodeRED Flow Dashboard InfoType InfoType InfoType InfoMotion画面にInfoTypeを配置し、 データを閲覧できます API Gateway
  5. InfoMotionはアプリを作るときの部品としても利用できます Share機能を使うとHTMLを出力し、 そのHTMLを自分のアプリに組み込むことでデータの可視化機能を備えたアプリを開発できます。 [誰も知らない(かもしれない)話] enebular Share機能 InfoMotion Dashboard InfoType InfoType

    InfoType Shared HTML ユーザのWebアプリ 組込み InfoMotionのDashboardに配置したグラフを含んだHTML Data Source API Gateway グラフを組み込む先のHTML
  6. Share機能で出力したHTMLの内容 <link rel="stylesheet" href="https://s3-ap-northeast-1.amazonaws.com/enebular-infomotion/1.0.18/infomotion.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://s3-ap-northeast-1.amazonaws.com/enebular-infomotion/1.0.18/infomotion.js"></script> <script

    src="https://s3-ap-northeast-1.amazonaws.com/enebular-infomotion/1.0.18/infomotionUI.js"></script> <style> .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .hover-bg-gradient:hover, .hover-bg-gradient:focus { background-color: #313131; } </style> <div class="container"> <div class="graph-date-picker"> <input id="enebularDatePicker" class="enebular-datepicker" type="date"> </div> <div class="enebular-clear-both"></div> <div class="enebular-clear-both"></div> <div class="infomotion-graph infomotion-graph-0" id="graph0"></div> </div> <script> var settings = { "cache": "blackhole", "dateRange": [new Date(1550264100000),new Date(1550436900000)], "options": {"pluginPath":"https://enebular.com","iframePath":"/emi/iframe/iframe.html","plugins":[],"loadingMode":"loadScript"} } var graphContext = infomotion.graphContext(settings); var datePicker = infomotionUI.datePicker(document.querySelector('#enebularDatePicker')) .make(); var timeline = infomotionUI.timeline( document.querySelector('#timeline'), document.querySelector('#btnControl') ).setTheme('black').make(); var liveButton = infomotionUI.liveButton(document.querySelector('#btnLive')) .make(); graphContext .useTimeline(timeline) .useLiveButton(liveButton) .useDatePicker(datePicker) var settingGraph0 = {"adapter":{"type":"firebase","options":{"type":"firebase","firebase":{"apiKey":"・・・・・","authDomain":"・・・ ","databaseURL":"https://・・・.firebaseio.com","projectId":"・・・","storageBucket":"・・・.appspot.com","messagingSenderId":"・・・ "},"ref":"/demodata","limit":100}},"graph":{"n":"linechart","t":"39e9d8c6-e1fe-48dd-8bce-7d8d2ed79bcb","d":"6ac7af17-0f62-44d7-a89b- ef196bd86417","s":{"label":"devicename","value":"temp","limit":"10","timestamp":"ts"},"v":[]},"options":{"pluginPath":"https://enebular.com","iframePath":"https://s3-ap- northeast-1.amazonaws.com/enebular-infomotion/iframe.html","plugins":[],"loadingMode":"loadScript"}} var graph0 = infomotionUI.graph(document.querySelector('#graph0'), settingGraph0); graph0.render(); graphContext.useGraphs(graph0); graph0.useFilter([]) </script> ・・・ ① 関連JS、CSSのロード ② CSSの定義 ③ HTMLの定義 ④ Dashboardの作成 ⑤ グラフの追加 ・・・ ①~⑤を組み込んでアプリ を開発してみました
  7. Share機能で出力したHTMLの埋込み ビル管理Webアプリへの埋込み方を示します。 ① 関連JS、CSSのロード ⇨ <head>に追加 ② CSSの定義 ⇨ <head>に追加

    ③ HTMLの定義 ⇨ グラフ配置箇所にdiv 要素を追加 ④ Dashboardの作成 ⇨ JSの最初で一度宣言 (今回Liveボタン、DatePicker、 Timelineは消去) ⑤ グラフの追加 ⇨ 複数のHTMLからグラフ部分のみコピーして 利用 (Filterを利用し部屋毎の温度を表示) ビル管理Webアプリ画面
  8. まとめ • Share機能を使ってInfoMotionで作成したグラフを自分のアプリに組込みました Google Mapのような地図描画を実現できるleaflet(JavaScriptのOSSライブラリ)との組合 せにより、フロアマップにInfoMotionのグラフを組み込めました。 今後の課題 • グラフの色や線の太さなどを変更したかったですができない ⇒

    InfoTypeの機能拡張や種類増加が必要 • グラフをアプリへ組込む際にShare機能で出力したHTMLを理解しないといけない ⇒ より簡単に組み込める方法を検討していきたい グラフを使ったアプリを開発する際にはInfoMotionの利用をご検討頂けれ ば幸いです
  9. ご清聴ありがとうございました