画面構成
編集画面は大きく3つのエリアで構成されています。
- 左: パレット — 配置するアイテムを選ぶエリア。カテゴリごとにアイテムが並んでいます。
- 中央: キャンバス — ドロップしたアイテムを配置・編集するメインエリア。
- 右: プロパティ — 選択中のアイテムの設定（サイズ、色、バインド先など）を行うエリア。
画面上部のメニューから「キャンバス」タブと「設定」タブを切り替えられます。また、キャンバスの新規作成・削除・切替えもメニューから行えます。
基本操作
配置・選択・移動
- 左パレットから中央キャンバスへドラッグ＆ドロップしてアイテムを配置します。
- アイテムをクリックすると選択状態になり、右プロパティパネルに設定が表示されます。
- 選択したアイテムはドラッグで自由に移動できます。
サイズ変更
- 右プロパティの「＋拡大」「－縮小」ボタンで比率を保ったままサイズ変更します。
- W（幅）/ H（高さ）の数値を直接入力して変更することもできます。
- 選択時に表示されるリサイズハンドルをドラッグしてもサイズ変更できます。
削除
- 右プロパティの「削除」ボタンで選択中のアイテムを削除できます。
- キーボードの
DeleteまたはBackspaceキーでも削除できます。
右クリックメニュー
- キャンバス上のアイテムを右クリックすると、コンテキストメニューが表示されます。
- 重ね順の変更（最前面/最背面への移動）などの操作ができます。
パレットアイテム
パレットは「通常アイテム」と「KMIoTアイテム」の2カテゴリに分かれています。各アイテムをキャンバスにドラッグ＆ドロップして配置します。
通常アイテム
すべてのユーザが利用できる基本アイテムです。
| アイテム名 | 説明 |
|---|---|
| 長方形 | 矩形シェイプ（塗り色・枠線のカスタマイズ） |
| 固定文字 | 固定テキスト表示 |
| 画像ファイル | 画像ファイル表示 |
| テーブル | テーブル表示（複数データソース対応） |
| タブ | タブ切替え（連動バインド対応） |
KMIoTアイテム
IoT センサやカメラなど KMIoT 連携機能に特化したアイテムです。
| アイテム名 | 説明 |
|---|---|
| センサ画像 | センサ連携アイコン（状態モード: ON/OFF/警報、電波モード: 電波レベル0〜3 で画像切替え） |
| カメラ画像 | カメラ画像表示（日時指定） |
| グラフ | グラフ埋め込み（折れ線/棒グラフ） |
| データ一覧 | データ一覧表示 |
| テキストボックス | センサ値参照テキスト（IoT データバインド） |
背景画像
パレット下部の「＋」ボタンから背景画像を追加できます。背景画像はキャンバス全体の背景として表示されます。
データベース
共通データベースのデータをテーブル形式で表示するアイテムです。データベース画面で作成したデータキーを選択して利用します。
矩形（Square）
矩形シェイプはキャンバス上に配置する基本的な図形です。右プロパティで以下の設定ができます。
- 塗り色: RGB カラーピッカーで塗り色を指定。透明度も設定できます。
- 枠線色: 枠線の色を指定します。
- 枠線幅: 枠線の太さをピクセル単位で指定します。
テキストアイテム
Text（固定テキスト）
任意のテキストを表示するアイテムです。右プロパティのテキスト入力欄で内容を編集します。
TextRef（センサ値参照テキスト）
IoT センサのデータをリアルタイムに表示するテキストアイテムです。
- バインド先: 右プロパティで参照するセンサ ID を指定します。
- フォーマット文字列:
{温度}℃ / {湿度}%のようにプレースホルダーを使って表示形式をカスタマイズできます。
対応センサ種別
| 種別 | 説明 | 主な値 |
|---|---|---|
| th | 温湿度センサ | 温度、湿度 |
| shodo | 照度センサ | 照度 |
| door | ドア開閉センサ | 開 / 閉 |
| jinkan | 人感センサ | 検知 / 未検知 |
テキストスタイル
Text / TextRef ともに以下のスタイル設定が可能です。
- フォントファミリー
- 太さ（bold / normal）
- サイズ（px）
- 色（通常色 / 警報色）
画像アイテム
Image
- 右プロパティの「画像プレビュー」から画像を選択します。
- 1枚の画像（imageOn）を表示します。
Sensor Image（センサ連携アイコン）
センサの状態に応じて表示画像を切り替えるアイテムです。右プロパティの「画像設定」で状態と電波の2つのモードを切り替えられます。各モードの画像は独立して設定できます。
状態モード
センサの検知状態・警報状態に応じて画像を切り替えます。
- ON 画像: センサが ON（検知/閉）の状態で表示。
- OFF 画像: センサが OFF（未検知/開）の状態で表示。
- ON 警報画像: ON かつ警報状態で表示。
- OFF 警報画像: OFF かつ警報状態で表示。
電波モード
センサの電波強度（RSSI レベル）に応じて画像を切り替えます。
- 電波0: 電波レベル 0（圏外/最弱）で表示。
- 電波1: 電波レベル 1 で表示。
- 電波2: 電波レベル 2 で表示。
- 電波3: 電波レベル 3（最強）で表示。
- 右クリックで画像の削除メニューを開けます。
背景画像
キャンバス全体の背景として使用する画像です。パレット下部の「＋」ボタンから追加します。
カメラ画像
カメラデバイスから撮影された画像を日時指定で表示するアイテムです。
- From / To: 取得する画像の日時範囲を指定します。
- 署名付き URL で画像を取得し、プレビュー表示します。
テーブルアイテム
テーブル形式でデータベースのデータを表示するアイテムです。右プロパティでデータベースを指定します。
タブアイテム
複数のタブを切り替えて表示内容を変更するアイテムです。
- タブヘッダー: カンマ区切りでタブ名を設定します（例:
概要,詳細,設定）。 - bindKey: タブ連動キーを設定すると、同じ bindKey を持つ他のアイテムがタブ切替えに連動して表示/非表示を切り替えます。
テキストスタイル（フォント、サイズ、色）もカスタマイズできます。
グラフアイテム
キャンバス内にグラフを埋め込むアイテムです。
- From / To: グラフに表示する日時範囲を指定します。
- チャートタイプ: 折れ線（line）または棒グラフ（bar）を選択します。
- 平均間隔: none（生データ）、10分、1時間、1日、10日から選択します。
- イベント表示モード: 回数表示（count）または時間表示（time）を選択します。
- データソース: KMIoT センサデータまたは共通データベースのデータを表示できます。
データ一覧アイテム
センサデータを一覧表形式で表示するアイテムです。グラフと同じセンサ情報・期間設定を使用しますが、チャートではなくデータ行をそのまま表示します。
- センサ情報: 表示対象のセンサを選択します（カメラセンサを除く）。
- From / To: 表示する日時範囲を指定します。
データベースアイテム
共通データベースのデータをテーブル形式で表示するアイテムです。
- データキー選択: 右プロパティのセレクトボックスで、データベース画面で作成済みのデータベースキーを選択します。
- 表示/非表示切替え: アイテム上の DB アイコンをクリックすると、テーブルの表示/非表示を切り替えられます。
- データキーを選択すると、データベースからカラム定義とデータ行が自動的に取得されます。
キャンバス設定
向き
- Landscape（横向き）: 横長のキャンバス。
- Portrait（縦向き）: 縦長のキャンバス。
解像度
キャンバスの幅・高さをピクセル単位で設定できます。向きごとに異なるサイズを指定可能です。
保存
編集内容は右プロパティ下部の「OK」ボタンで保存されます。保存データが表示キャンバスに表示されます。
- 変更があるアイテムは自動的に検出され、保存対象になります。
- 新規配置したアイテムも保存時にサーバーに送信されます。