ウィジェットリファレンス

IronFlock のボードはウィジェットで構成されています。各ウィジェットタイプにはそれぞれ固有の用途があり、ライブデータの表示からユーザー入力のキャプチャまで対応します。ウィジェットパネルからウィジェットをドラッグして、ボードキャンバスに追加し、設定パネルで設定します。

ウィジェットは4つのグループに分かれています：チャートとステータス表示のためのデータ可視化、静的およびリッチコンテンツのためのコンテンツとメディア、入力のキャプチャやコマンドの送信のための入力と制御、そしてボードページ間の移動のためのナビゲーション。

データ可視化

ライブデータおよび履歴データをチャート、ゲージ、ステータス表示に変換するウィジェットです。

直交座標チャート

時系列またはカテゴリカルデータを折れ線グラフ、棒グラフ、またはその組み合わせで表示します。同じチャート上に複数のデータシリーズをサポートします。

使用場面： センサー値の時系列トレンド、複数シグナルの並列比較、日次合計の棒グラフ表示。

設定項目：

• アプリのデータカラムを指すデータシリーズ（1 つ以上）
• シリーズごとのチャートタイプ：折れ線、棒、バブル
• X 軸のタイプ：時間ベースまたはカテゴリカル
• Y 軸ラベルとタイムウィンドウ（例：1 分ごとに集約した直近 5 分間）
• シリーズごとのカラー

ゲージ

カラーしきい値ゾーン付きの放射状ゲージで単一のライブ値を表示します。

使用場面： 温度、圧力、充填レベルなど、緑/黄/赤ゾーンで一目で状態を把握したい値。

設定項目：

• 読み取るデータカラム（常に最新の値を表示）
• 単位と小数精度
• カラーゾーンの境界（例：安全: 0–60、警告: 60–80、クリティカル: 80–120）
• オプション：ノイズを平滑化するために直近 N 件の読み取り値を平均化

値表示

1 つ以上の単一値をラベルと単位付きで表示します。クリーンでミニマル — KPI タイルに最適です。

使用場面： 現在の温度、稼働時間、最後のイベント、またはキーメトリクスを数値として表示。

設定項目：

• データカラム（1 つ以上、それぞれにラベルと単位）
• 小数精度
• 値ごとのテキストカラー

シグナル

現在の値に基づいて色が変わる円形または四角形のコンパクトなステータスインジケーター。一目でわかるステータスボードを提供します。

使用場面： デバイスのオンライン/オフラインボード、多数の資産にまたがるOK/警告/エラー状態、しきい値ベースのステータスライト。

設定項目：

• シグナル（1 つ以上、各シグナルはデータカラムを読み取る）
• シグナルごとのカラーマッピングルール：完全一致（例：ONLINE）または数値比較（例：>=70）
• レイアウト（水平または垂直）とシェイプ（円形または四角形）
• オプションのタイトルとサブタイトル

ドーナツチャート

比率セグメントを示す円形チャートです。

使用場面： 分布の表示 — 例：オンライン vs オフラインのデバイス、製品タイプ別の生産シェア。

設定項目：

• セグメント（各セグメントにラベル、カラー、データカラムまたは固定値）
• カットアウトサイズ（内側の穴の直径を制御）

テーブル

設定可能なカラムを持つ表形式でデータ行を表示します。

使用場面： マシンのリスト、最近のイベント、点検記録、その他の構造化データセットの表示。

設定項目：

• カラム（各カラムにヘッダー、データカラム、表示タイプ）
• 行の高さとヘッダーフォントサイズ
• 表示する行数

カラム表示タイプ： プレーンテキスト、数値、ステート（値をカラーにマッピング）、ブーリアン、画像、ボタン（クリック可能なリンク）。

ヒートマップ

2 次元にわたる強度を可視化するグリッドベースのヒートマップです。

使用場面： 曜日・時間帯別のエネルギー消費量、シフトごとのマシン稼働率、時間にわたる異常パターン。

設定項目：

• X 軸（例：時間帯）と Y 軸（例：曜日）のカラム
• ヒート強度の値カラム
• 最小/最大スケールと、連続またはステップ式のカラーグラデーションの選択

状態履歴

資産ごとに状態が時間とともにどう変化したかを示す水平タイムラインです。

使用場面： マシンステータス履歴（稼働中/停止中/メンテナンス中）、シフトログ、イベントタイムライン。

設定項目：

• ステート名とそのカラー（例：Running = 緑、Failure = 赤）
• タイムスタンプ、ステート値、資産名のデータカラム

マップ

インタラクティブマップ上に地理データを表示します。円マーカーとトラッキングラインに対応しています。

使用場面： デバイスの位置表示、車両追跡、フィールド資産の位置表示。

設定項目：

• マップスタイル（ライトまたはダーク）
• シリーズ（1 つ以上）：円（最新位置マーカー）またはライン（移動軌跡）
• 緯度・経度のデータカラム
• デバイスや資産ごとにデータを分割するピボットカラム

SCADA

ポンプ、バルブ、タンク、モーター、配管、ゲージなどのインタラクティブな産業用SVGシンボルをThingsBoard SCADAライブラリからレンダリングし、ライブデータバインディングと状態ベースのカラーリングを提供します。

使用場面： プロセス図やプラントミミック — 概略図上でポンプ、バルブ、タンク、フローのライブ状態を表示。

設定項目：

• 表示するシンボルタイプ
• シンボルの状態を駆動するデータバインディング（稼働中/停止中、開/閉、液面レベル）
• 状態カラー（稼働中、停止中、警告、クリティカル）およびその他のシンボルごとのスタイリング

プロセス全体の画面構築については、SCADA を参照してください。

コンテンツとメディア

静的およびリッチコンテンツ（画像、フォーマット済みテキスト、埋め込みウェブページ）のためのウィジェットです。

画像

URL から静的な画像を表示します。ロゴ、図面、説明用グラフィックに便利です。

画像オーバーレイ

背景画像の上にライブデータ値を配置します — フロアプラン、図面、概略図に最適です。

使用場面： 工場フロアプラン上に温度を重ねて表示、タンク図面上に充填レベルを表示。

設定項目：

• 背景画像の URL
• オーバーレイピン：画像上の相対座標に配置されたプログレスバーまたはテキストラベル
• 各ピンのデータカラム（ライブ値または固定値）

Markdown

Markdown（CommonMarkおよびGitHub Flavored Markdown）をシンタックスハイライト付きコードブロックとライブ変数補間でレンダリングします。

使用場面： ドキュメントパネル、手順書、またはフォーマット済みテキストとライブデータ値を組み合わせた動的なメモ。

設定項目：

• Markdown ソーステキスト
• テキスト内で {{variableName}} を使って参照される変数（各変数はデータカラムまたは固定値にバインド）

ラベル

タイポグラフィと配置を完全に制御できる、単一の設定可能なテキストラベルを表示します。

使用場面： セクションタイトル、キャプション、静的な注釈、またはテキストとしてレンダリングされた単一の動的な値。

設定項目：

• 表示するテキスト（改行は保持されます）
• フォントサイズ、カラー、ウェイト、スタイル
• 水平および垂直方向の配置、背景色

埋め込み

外部ウェブコンテンツを隔離されたiframeに埋め込みます — 単一ページ、またはレスポンシブグリッドに配置された複数ページ。

使用場面： サードパーティのダッシュボード、ドキュメント、外部ツール、またはウェブアクセス可能なページをボード内に統合。

設定項目：

• 埋め込むURL（対象サイトがiframe埋め込みを許可している必要があります）
• コンテンツの上に表示されるオプションのタイトル
• マルチ埋め込みモード：グリッドに配置された複数のURL、設定可能なギャップ付き

入力と制御

ユーザー入力をキャプチャしたり、コマンドやフィルターをプラットフォームに送り返すウィジェットです。

フォーム

ユーザー入力をアプリのデータバックエンドに書き込む、設定可能なデータ入力フォームです。

使用場面： 手動データキャプチャ — 点検記録、メンテナンスログ、オペレーター入力、パラメーターのセットポイント。

設定項目：

• 各種タイプのフォームフィールド：テキスト、数値、チェックボックス、テキストエリア、ドロップダウン、日時
• フィールドごとのオプション：ラベル、必須、デフォルト値、バリデーション、最小/最大、ターゲットデータカラム
• オプションのタイトル、サブタイトル、ダイアログで開くかどうか

スイッチ

ライブ値を反映し、フリップ時にデバイスアクションをトリガーする、Material Design トグルスイッチ（1 つ以上）。

使用場面： 機器のオン/オフ切り替え、バイナリデバイス設定のトグル、ダッシュボードからの制御コマンドの送信。

設定項目：

• スイッチ（1 つ以上、各スイッチはデータカラムを読み取る）
• ON/OFF のステートマッピング：完全一致値または数値比較（例：>50）
• トグル時に呼び出されるターゲットアプリ、デバイス、アクショントピック
• スイッチごとのラベルと値のカラー

フィルタードロップダウン

他のウィジェットが消費するフィルターパラメーターとして選択値を公開する、定義済みオプションのドロップダウンです。

使用場面： デバイスタイプ、ライン、場所、またはその他のカテゴリでボード全体をフィルタリングするユーザー操作。

設定項目：

• ドロップダウンの上に表示されるラベル
• 他のウィジェットがデータクエリで参照するパラメーターキー
• オプションのリスト（各オプションにラベルと値）

フィルターカレンダー

日付/時刻範囲ピッカー（単一日付または範囲）で、選択したタイムスタンプを他のウィジェット向けのフィルターパラメーターとして保存します。

使用場面： 時系列ダッシュボード、履歴分析、ユーザーが選択可能なタイムウィンドウを持つレポート。

設定項目：

• 開始および終了パラメーターキー（単一日付モードは一方のみ、範囲モードは両方を使用）
• 一度に表示する月数（1〜3）
• 入力ラベル

ナビゲーション

複数ページのボードのページやセクション間を移動するためのウィジェットです。

ナビバー

クリック可能なタイトルまたはブランドと複数のルーティングアイテムを持つ水平トップナビゲーションバーです。

使用場面： 複数ページのボードのページ間のトップレベルナビゲーション。

設定項目：

• タイトル/ブランドテキストとその遷移先ルート
• ナビゲーションアイテム（各アイテムにラベル、Material アイコン、ルート）
• フォントサイズ、ウェイト、カラー
• {{variable}} 置換によるダイナミックルートセグメント

ナビボタン

別のページへのルーティングまたはブラウザバックナビゲーションを実行する、単一のクリック可能なボタンです。

使用場面： 戻るボタン、コールトゥアクションリンク、または特定のボードビューへのジャンプ。

設定項目：

• ボタンラベルとオプションの Material アイコン
• 遷移先ルート（自動バックナビゲーションの場合は空白のまま）
• フォントサイズとカラー
• {{variable}} 置換によるダイナミックルートセグメント

サイドナビゲーション

Material アイコンとルートベースのアクティブアイテムハイライト付きの垂直サイドメニューです。

使用場面： 複数のセクションやビューを持つダッシュボードの永続的なサイドナビゲーション。

設定項目：

• オプションのルート付きタイトル
• ナビゲーションアイテム（各アイテムにラベル、Material アイコン、ルート）
• 現在のルートに基づくアクティブアイテムのハイライト
• フォントサイズ、ウェイト、カラー