サマリ―カスタマイズ機能で在室管理

開発部の金子です。

今回はWMC-600+FASTIO+サマリ―カスタマイズ機能を組み合わせて、
在室状況管理の仕組みを作ってみました。

WMC-600とは

4.3インチの液晶画面を搭載した親機が920MHz帯特定小電力無線を用いて子機からセンサー情報(人感、開閉、温湿度等)を自動で収集します。
収集したデータを内蔵のLTE通信モジュールを介しクラウドと連携することができる製品です。

以下のサイトをご覧ください。

WMC-600紹介ページ

サマリ―カスタマイズ機能

FASTIO LOGGERのサマリー表示にはカスタマイズ機能があります。

カスタマイズ画面

custom_view

詳しくは割愛しますがざっくり説明するとJavascriptとCSSを独自に記述し読み込ませることで、従来の表示をカスタマイズしてオリジナルの見た目のサマリー画面を作成できる機能です。
画像などのファイルはまとめてZIP形式で圧縮しアップロードすることで利用が可能になります。

dashboard_custom

今回はこの機能を用いてWMC-600から取得した

  • ドアの開閉
  • 在室/空室
  • 部屋の窓1~4の開閉
  • 室温
  • 湿度
  • Co2濃度

の6項目のデータを可視化してみます。

データの取得

サマリ―カスタマイズ画面の入力欄に以下のようなプログラムを記述していきます。

aResには以下のようなデータが格納されています。

これらのデータから必要な情報を抜き出し、以下のように変数に格納します。

可視化

さて、ここまでで実際の計測データが取得ました。
次に可視化するための絵を用意します。

画面に必要な要素としては

  • 会議室が利用中かどうかが一目で判断できる。
  • ドアの開閉(意味合いとしては施錠されているか否か)状態が分かる。
  • 会議室の窓の閉め忘れがないか判断できる。
  • ついでに会議室の『空気も見える化』

です。

今回は製品として世に出すというよりコンセプトモデル的な要素が強いため自由にデザインしてみました。

5F会議室

手書きの図案をillustratorで書き起こし、全体像とドア/窓の開閉状態の部品を作成しました。

部品一覧

部品一覧
室温などの数字系部品についてはCSSで装飾した通常テキストで配置する事にしましょう。

グラフィックの配置

部品は用意できましたので配置をしていきます。
配置はJavascript+CSSで動的に行います。
要素ごとにDIVを用意しそれらをCSSのpositionを用いて目的の位置に配置します。
配置する要素の状況(開/閉など)を条件にDOMに設定するClassを変え、見た目部分をCSSで制御します。

CSSは以下。

完成品がこちら

ついでにビューの切り替えボタンなんかも配置していますが完成品は以下になります。

Finished product

ビューの切り替え

『会議室は使用されていて窓が2か所開いている』ことがぱっと見で把握できます。
逆に「空室なのに窓が開いている」「空室なのにドアが開いている」などが会議室に行かなくとも把握できるので管理も楽々ですね。

おわりに

いかがでしょうか。アイデア次第で色々な用途に対応できる画面を作成できるFASTIO LOGGER サマリ―カスタマイズ機能。
是非ご利用になってみてはいかがでしょうか。

Pocket