環境
kibana 6.5.4 / index名 : sensor-*
目的
canvasの勉強を兼ねて使ってみる。
- 通常のVisualizeではできない表現をする。
- 画像データを使用したVisualizeを実現
使用するデータは、部屋の中と廊下にある温度情報を区別できて分かるようにする。
今の温度データの可視化(Visualize)
測定データ元にVisualizeから作成した画面
視覚的に青と緑のlineが"部屋の中" か "部屋の外" のどちらのセンサの区別ができない。
Canvasでの可視化(最終的な画面)
Canvasで部屋の中と部屋の外の温度を視覚的に分かるように表示させる。
canvasの設定
準備(画像)
使用する画像ファイルを作成する。
・温度表示のための画像
(温度計の枠) (温度計の中)
・部屋の間取り図 ※それっぽい図を作成
実現手順
Canvasの画面を開く
workpadを作成する
作成直後の画面
"Add element"から作成
※workpadの内容を編集することで、名前やページの大きさを変更することが可能。
選択可能なメニュー
画像追加
１．部屋の間取り図の追加
"Add element"からimageを選択し、右メニュー"select or drag and drop a file"から画像を選択する。
部屋の間取り図の画像が挿入される。
２．”温度計の枠”の画像を追加
間取り図の登録と同じような手順で画像を追加する。
３．”温度計の中”の画像を追加
"Add element"からImage revealを選択し、右メニュー"select or drag and drop a file"から画像を選択する。
４．配置調整
追加した画像を良い感じの配置に移動させる。
※画像のレイヤー調整方法
画像を選択中の右画面の矢印アイコンから"前面へ移動"や"背面へ移動"をさせることが可能
部屋の中の温度データ可視化①（最新の取得情報を表示）
１． "Add element"から Metric を選択する
２．右のメニューから参照するデータ情報を設定
①Dataタブを選択
②Change your date source を選択
③Elasticsearch SQL を選択
④SQLを入力
⑤previewを選択し、データソースが取得できていることを確認する
３．表示させるデータ情報を選択
①"Display"タブ を選択
②最新の温度を選択し、フォントやラベル情報を修正する。
③データが表示されたことを確認し、レイアウトや位置を調整する。
※桁数の表示や制限の方法は、よく分からないから幅を調整し表示しないようにしている。
部屋の中の温度データ可視化②（画像と温度データの紐づけ)
※何となく動いた手順で、取得するデータを数式入力させるための簡単な方法は調べきれていないので他のにもあるかもしれませんが、
SQL設定 → 設定値の修正 → 再度SQL修正 → 設定値の修正
という変な手順となっている。他手順で可能なのか?SQLが間違っているのか?設定漏れなのか?現状の仕様なのか?は不明
１．右のメニューから参照するデータ情報を設定
２．SQL入力①
select ～ from の間に数式を使って値を取得するようにする。
※入力するSQL(その①)
SELECT temperature/100 FROM "sensor-*"
WHERE
bt_address = 'XXXXXXXXXX'
ORDER
BY "@timestamp" DESC limit 100
３．DisplayタブのMeasureで書式を使った設定入力が可能なモードに変更する
４．SQL修正
DataタブからSQL設定を修正し保存する
※入力するSQL(その②)
SELECT * FROM "sensor-*"
WHERE
bt_address = 'XXXXXXXXXX'
ORDER
BY "@timestamp" DESC limit 100
５．Displayタブに戻ってMeasureの値を修正する。
値を0 ～ 1の間にする必要があるため、温度が 50度( 取得データ / 50 = 1 )で全体の画像表示となるような感じとしている。氷点下や５０度以上になるとどうなるのかは未確認
※△で何か表示されているけど無視している。
６．現地点での画面
※温度センサを置いている辺りに配置としている。
部屋の外の温度データ可視化③（最新の取得情報を表示）
上記の方法と同じ手順で実施
部屋の外の温度データ可視化④（温度データのグラフ表示）
１． "Add element"から Progress gaugeを選択し以下のような設定とする。
■dataタブ
■displayタブ
Canvasの画面
※表示データの更新は、左上のRefreshからデータ更新やauto-refresh interval設定は可能
現状で設定可能なことが分かったから、トビラの開閉とか単純なON/OFFでの可視化は画像表示(０のとき , 1のとき)を調整するだけで良いような感じだから実現できそう。
もう少しUIが使いやすくなると、フロアマップや座席表を使ったフロア内の温度,湿度,騒音等の可視化も、他社に環境を構築したりアプリやソフトを買う必要なく、簡単に作ることできるかも。
