概要
表示キャンバスは、編集画面で作成したキャンバスを読み取り専用で閲覧するための画面です。
配置されたアイテム（テキスト、画像、センサ値、グラフなど）をそのまま表示し、IoT センサのリアルタイムデータも自動的に反映されます。編集操作は行えないため、誤ってレイアウトを変更してしまう心配はありません。
キャンバス切替え
複数のキャンバスが作成されている場合、「キャンバス」メニューの「表示」からキャンバスを選択して切り替えることができます。
- キャンバス > 表示: 画面上部のメニュー「キャンバス」ドロップダウンから「表示」を選択し、閲覧したいキャンバスを選択します。
- 複数キャンバスの切替え: 用途ごとに作成されたキャンバス（例: フロアマップ、センサ一覧、ダッシュボードなど）を自由に切り替えられます。
センサ値表示
IoT センサのデータがリアルタイムにキャンバス上へ反映されます。
リアルタイム更新
- センサ値は 5分間隔のポーリング で自動更新されます。
- ページを開いたまま放置しても、常に最新のセンサ値が表示されます。
テキストボックスへの反映
- 編集画面で TextRef アイテムにバインドされたセンサ値が、テキストボックスに自動反映されます。
- 温度・湿度・照度などの数値がフォーマット文字列に従って表示されます。
センサアイコンの状態切替え
Sensor Image アイテムは、編集画面で設定されたモードに応じて表示画像が自動的に切り替わります。
状態モード
センサの検知状態・警報状態に応じて画像が切り替わります。
| 状態 | 表示 | 説明 |
|---|---|---|
| ON | ON 画像 | センサが検知中・閉状態のとき |
| OFF | OFF 画像 | センサが未検知・開状態のとき |
| ON 警報 | ON 警報画像 | ON かつ警報状態のとき |
| OFF 警報 | OFF 警報画像 | OFF かつ警報状態のとき |
電波モード
センサの電波強度（RSSI レベル）に応じて画像が切り替わります。
| レベル | 表示 | 説明 |
|---|---|---|
| 0 | 電波0 画像 | 電波レベル 0（圏外/最弱） |
| 1 | 電波1 画像 | 電波レベル 1 |
| 2 | 電波2 画像 | 電波レベル 2 |
| 3 | 電波3 画像 | 電波レベル 3（最強） |
ドア開け閉め・人感センサ以外のセンサ値の更新間隔は5分です。即座に最新値を確認したい場合は、ページを手動でリロードしてください。
表示向き
キャンバスの表示方向を切り替えることができます。
- Landscape（横向き）: 横長レイアウトでキャンバスを表示します。PC やワイドモニターでの閲覧に適しています。
- Portrait（縦向き）: 縦長レイアウトでキャンバスを表示します。タブレットやスマートフォンでの閲覧に適しています。
表示向きを切り替えると、ウィンドウサイズに合わせてキャンバスが自動的に拡大・縮小されます。
表示向きは編集画面のキャンバス設定で設定された解像度に基づきます。ウィンドウサイズに応じて自動調整されるため、デバイスを問わず快適に閲覧できます。
タブ操作
編集画面で配置されたタブアイテムは、表示画面でもクリックして切り替えることができます。
タブの切替え
- タブアイテムのヘッダー部分をクリックすると、選択されたタブに切り替わります。
- 選択中のタブはアクティブスタイルで強調表示されます。
タブ連動アイテムの表示制御
- 同じ bindKey が設定されたアイテムは、タブの切替えに連動して表示・非表示が制御されます。
- 例えば、タブ「概要」を選択すると概要に関連するアイテムのみが表示され、「詳細」を選択すると詳細に関連するアイテムのみが表示されます。