チュートリアル - センサーデータ可視化用のウェブインタフェース

1. 概要
2. サーバへの接続
3. 主画面
3.1 画面構成
3.2 グラフ表示領域の削除
4. 設定画面
4.1 画面構成
4.2 センサー種別一覧

1. 概要

チュートリアルSTEP2用のバックエンド側システムは、センサーデータ可視化用のウェブインタフェースを用意しています。手元のウェブブラウザから指定のURLに接続することで、センサー種別ごとの読取値が時系列でグラフ表示される様子を観測できます。

2. サーバへの接続

バックエンド側のシステムが稼働中の状態で、観測用PCのウェブブラウザから以下のURLに接続してください。もちろんお手元のスマートフォンやタブレットからの接続でも構いません。

    http://<server_address>/

上記URLのserver_address要素は、 IPアドレスまたはFQDN (Fully Qualified Domain Name) 形式で記述します。「バックエンドシステム用のコンテナイメージが稼動する」ホスト機材のアドレスを指定してください。コンテナ起動時の設定でウェブサーバのポート番号を標準の80番から変更した場合、このserver_address要素を<address>:<port>形式で指定してください。

URLが正しいはずなのにウェブサーバに接続できない場合、一般的なTCP/IP通信レベルの接続失敗が考えられます。経路制御やファイアウォールの設定などを見直してください。 server_addressをFQDNで指定した場合、DNSが正常動作するかも見てください。

3. 主画面

3.1 画面構成

主画面はヘッダ部とボディ部に分かれています。ヘッダ部にはタイトルと設定ボタン（歯車アイコン）が配置されています。ボディ部はセンサー種別ごとの時系列グラフ表示領域（カード）が縦に並ぶ構成となっています。

グラフ表示画面

＜凡例＞

タイトル
設定ボタン（歯車アイコン）
センサー種別ごとのグラフ表示カード
グラフ表示カードの閉じるボタン（×）

Android端末側からは周期的にセンサーデータが送られ、バックエンド側に逐次蓄積されます。センサーデータが追加され続けている限りグラフ表示領域は自動更新され続けます。

グラフ表示画面では、既定値として以下のセンサー種別の表示領域が用意されています。

照度計（light）
地磁気計（magnetic_field）
重力計（gravity）

Android端末側でのセンサー実装状況あるいは所望のセンサー種別に対応するため、利用者が表示対象のセンサー種別を変更可能です。設定ボタン（歯車アイコン）から設定画面を開いて変更してください。

画面構成はウェブブラウザのローカルストレージ領域に保存されるので、いったんブラウザを終了してサーバに再接続すると画面構成が再現されます。

3.2 グラフ表示領域の削除

各グラフ表示カードの右上にある閉じるボタン（×）を押下すると、当該センサー種別のグラフ表示領域を個別に削除できます。

4. 設定画面

4.1 画面構成

主画面ヘッダ領域の右端にある設定ボタン（歯車アイコン）を押下すると、以下のような設定画面がポップアップ表示されます。

設定画面