Slide 1
Slide 1 text
誰も知らないInfoMotionの話
たかの (ウフル)
2019//+6
Slide 2
Slide 2 text
自己紹介
髙野英樹
2018年10月〜
ウフルに入社し、enebular開発に参加
enebularの大量Device対応 / InfoMotionの開発を担当
[好きな動物] 猫 [趣味] HuluとかPrime Videoとかをだらっとみること
[苦手な食物] 魚介類とか [好きなプログラミング言語] JavaScript
[好きなNode] 探し中
Slide 3
Slide 3 text
本日ご報告すること
● InfoMotionとは何かについてご紹介します
● [誰も知らない(かもしれない)話]として
InfoMotionのShare機能についてご紹介します
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
InfoMotionはアプリを作るときの部品としても利用できます
Share機能を使うとHTMLを出力し、
そのHTMLを自分のアプリに組み込むことでデータの可視化機能を備えたアプリを開発できます。
[誰も知らない(かもしれない)話]
enebular
Share機能
InfoMotion
Dashboard
InfoType
InfoType
InfoType
Shared
HTML
ユーザのWebアプリ
組込み
InfoMotionのDashboardに配置したグラフを含んだHTML
Data Source
API
Gateway
グラフを組み込む先のHTML
Slide 6
Slide 6 text
Share機能で出力したHTMLの内容
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.hover-bg-gradient:hover, .hover-bg-gradient:focus {
background-color: #313131;
}
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([])
・・・
① 関連JS、CSSのロード
② CSSの定義
③ HTMLの定義
④ Dashboardの作成
⑤ グラフの追加
・・・
①~⑤を組み込んでアプリ
を開発してみました
Slide 7
Slide 7 text
Share機能で出力したHTMLの埋込み
ビル管理Webアプリへの埋込み方を示します。
① 関連JS、CSSのロード
⇨ に追加
② CSSの定義
⇨ に追加
③ HTMLの定義
⇨ グラフ配置箇所にdiv
要素を追加
④ Dashboardの作成
⇨ JSの最初で一度宣言
(今回Liveボタン、DatePicker、
Timelineは消去)
⑤ グラフの追加
⇨ 複数のHTMLからグラフ部分のみコピーして
利用 (Filterを利用し部屋毎の温度を表示)
ビル管理Webアプリ画面
Slide 8
Slide 8 text
まとめ
● Share機能を使ってInfoMotionで作成したグラフを自分のアプリに組込みました
Google Mapのような地図描画を実現できるleaflet(JavaScriptのOSSライブラリ)との組合
せにより、フロアマップにInfoMotionのグラフを組み込めました。
今後の課題
● グラフの色や線の太さなどを変更したかったですができない
⇒ InfoTypeの機能拡張や種類増加が必要
● グラフをアプリへ組込む際にShare機能で出力したHTMLを理解しないといけない
⇒ より簡単に組み込める方法を検討していきたい
グラフを使ったアプリを開発する際にはInfoMotionの利用をご検討頂けれ
ば幸いです
Slide 9
Slide 9 text
ご清聴ありがとうございました