Upgrade to Pro — share decks privately, control downloads, hide ads and more …

誰も知らないInfoMotionの話(2019/2/28) / InfoMotion unto...

takano
February 28, 2019

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

enebular developer Meetup Vol.8の資料。

takano

February 28, 2019
Tweet

Other Decks in Technology

Transcript

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

    HuluとかPrime Videoとかをだらっとみること [苦手な食物] 魚介類とか [好きなプログラミング言語] JavaScript [好きなNode] 探し中
  2. 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
  3. 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の作成 ⑤ グラフの追加 ・・・ ①~⑤を組み込んでアプリ を開発してみました
  4. Share機能で出力したHTMLの埋込み ビル管理Webアプリへの埋込み方を示します。 ① 関連JS、CSSのロード ⇨ <head>に追加 ② CSSの定義 ⇨ <head>に追加

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

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