ウィジェットコレクション

コックピットアプリケーションには、事前に定義されたウィジェット タイプが含まれています。ウィジェット タイプごとに、構成するパラメータと表示するデータが異なります。

アラームリスト

アラームリスト ウィジェットは、オブジェクト、アラームの重大度、アラームのステータスでフィルタリングされたアラームの一覧を表示します。各アラームに提供される情報の詳細については、アラームの操作 を参照してください。

設定パラメータ

アセットノート

アセットノート ウィジェットは、管理ユーザーから現在のウィジェットのすべての所有者に提供するメッセージが表示されます。

このメッセージを提供できるのは、ホームダッシュボードの編集権限を持つユーザーのみです。

アセットプロパティ

アセットプロパティ ウィジェットは、現在のオブジェクトの属性のユーザー定義リストを表示します。現在のオブジェクトとは、デバイスまたはグループです。

設定パラメータ

アセットテーブル

アセットテーブル ウィジェットは、選択したアセットとそのすべての子デバイスの詳細をテーブル形式で表示します。これは非常に強力なウィジェットで、選択したオブジェクトのプロパティをテーブルに配置できます。

設定パラメータ

例

次のスクリーンショットでは、5 つの列が構成されています。3 つのプロパティ列「name」、「owner」、「type」は、それぞれ「名前」、「所有者」、「タイプ」のプロパティを参照します。さらに、メンテナンスモードの切り替えと、デバイスの再起動の 2 つのアクションがあります。

結果のテーブルは、次のように表示されます。

プロパティを追加する

+プロパティの追加 をクリックし、追加するプロパティを 1 つ以上選択します。

アクションを追加する

1. +アクションを追加 をクリックします。
2. メンテナンスモード表示 / 非表示 を選択し、メンテナンスモードを切り替える定義済みアクションを追加します。
3. 操作を作成 を選択して、シェルコマンドを実行するボタンを作成します。ダイアログボックスに、ボタンのラベルと実行するシェルコマンドを入力できます。

テーブルを修正する

列のヘッダーを編集するには、ラベル 列の値をクリックし、ラベルを編集します。

列を並べ替えるには、行の一番左にあるアイコン をクリックし、エントリごとドラッグ＆ドロップします。

プロパティまたはアクションを削除するには、該当する行にカーソルを合わせて、右側の 削除 をクリックします。

データポイントグラフ

データポイントグラフ ウィジェットは、グラフにデータポイント（メジャーメント）を表示します。表示方法は、データエクスプローラ と同じです。

データポイントグラフ ウィジェットを作成する最も簡単な方法は、データエクスプローラに移動して、トップメニューバーの 参照 をクリックし、ダッシュボードにウィジェットとして送信 を選択します。 設定するパラメータの詳細については、視覚化の変更 を参照してください。

データポイントリスト

データポイントリスト ウィジェットは、現在の値とデータポイントのプロパティを持つデータポイント（メジャーメント）を行ごとに表示します。

設定パラメータ

データポイントテーブル

データポイントテーブル ウィジェットの構成設定は「データポイントグラフ」ウィジェットとほぼ同じですが、データポイントテーブルでは、データを折れ線グラフではなく表形式で表示します。

データポイントテーブル ウィジェットは、選択されたデータポイント、時間間隔、および集計に基づいてデータを表示します。

範囲外の値は、黄色と赤色の範囲の構成に基づいて表内で強調表示されます。

イベントリスト

イベントリスト ウィジェットでは、選択したデバイスのイベントを監視できます。

さらに、特定の日付範囲を設定し、イベントをリアルタイムで監視することもできます。

フィールドバスデバイス

フィールドバスデバイス ウィジェットでは、Modbus デバイスのステータスを確認し、操作することができます。

フィールドバスデバイス ウィジェットの詳細については、フィールドバスデバイス ウィジェットの使用によるデバイスステータスの監視 を参照してください。

画像

画像 ウィジェットでは、ファイルから選択した 1 枚の画像を表示することができます。

画像がアップロードされると、画像サイズと配置を変更することができます。

情報ゲージ

情報ゲージ ウィジェットは、1 つのデータポイントを放射状ゲージという形で表示し、複数のデータポイントをラベルとして表示します。

ゲージ用に 1 つのデータポイントを選択し、左側にラベルとして表示される複数のデータポイントを選択できます。

情報ゲージ ウィジェットを作成するには、各セクションで少なくとも 1 つのデータポイントを有効にする必要があります。

HTML

HTML ウィジェットは、HTML を使用してフォーマットできるユーザー定義コンテンツを表示し、選択したアセットまたはデバイスのデータを使って動的に内容を反映できます。また、ウィジェットを高度モードに切り替えることで、JavaScript コードを使用して複雑な Web コンポーネントを構築できます。

設定パラメータ

• ターゲットアセットまたはデバイス：オプションの HTML 式が評価されるオブジェクトを選択します。
• アセットプロパティ：アセットプロパティ セクションで、選択したアセットのプロパティをコピーし、設定 セクションのコードエディタに貼り付けることができます。

このウィジェットには、2 つの異なるモードがあります。

1. 通常モード：プロパティをテンプレートリテラルとして追加しながら、HTML と CSS を適用できます。次のような簡単な式を使用できます。 ${this.c8yContext ? this.c8yContext.name : 'No device selected'}。${this.c8yContext} 変数は常に、選択されたターゲットアセットを参照します。

2. 高度モード：有効にすると、Lit フレームワークを使用して複雑な Web コンポーネントを構築できます。サポートされる ECMAScript モジュールをインポートできます。デフォルトで、leaflet、echarts、fetch、lit が提供されます。Web コンポーネントでレンダリングされたものはすべて、エンドユーザーに表示されます。fetch ライブラリをインポートすることで、追加のリクエストを実行できます。利用可能なインポートは次のとおりです。

   import { LitElement, html, css } from 'lit';
   import { styleImports } from 'styles';
   import { L } from 'leaflet';
   import * as echarts from 'echarts';
   import { fetch } from 'fetch'; // Use this instead of default fetch to avoid potential issues
   

スタイル設定とセキュリティに関する考慮事項

スタイルを使用する場合、カプセル化が有効になっていない場合はグローバルスタイルを適用できます。スタイルは常に CSS 変数とトークンを使用して、ダークモードやカスタムブランディングとの互換性を確保する必要があります。

デフォルトでは、通常の HTML ウィジェットはセキュリティのためにサニタイズされますが、高度モードでは開発者が適切なサニタイズを行う責任があります。デフォルトのサニタイズ動作は、コックピットアプリケーション構成 で変更できます。

簡単な例は次の通りです:

レガシーウィジェットの互換性

KPI

KPI（重要業績評価指標）ウィジェットは、データポイントをラベルとして表示します。例えば、デバイスの温度のデータポイントなどです。

設定パラメータ

左側で、表示するデータポイントを選択します。 「KPI」ウィジェットを作成するには、1 つのアクティブなデータポイントを選択する必要があります。複数のデータポイントを一度に選択すると、構成を保存できません。

右側では、データポイントの表示方法を調整できます。設定項目は、次の通りです。

• アイコン：データポイントの横に表示されるアイコン
• 小数点以下の桁数
• 表示する：タイムスタンプ、アイコン、トレンドアイコンを表示 / 非表示を切り替えます
• 計測値のフォントサイズ（px）

リニアゲージ

リニアゲージ ウィジェットは、データポイントをリニアゲージの形で表示します。最小および最大ターゲット値もゲージに表示されます。

「リニアゲージ」ウィジェットを作成するには、少なくとも 1 つのデータポイントを有効にする必要があります。

地図

地図 ウィジェットは、デバイスまたはグループのすべてのデバイスの位置を表示します。

地図をドラッグして移動したり、プラス と マイナス ボタンを使用して拡大 / 縮小することができます。

デバイスを表わすアイコンは色分けされています。使用する色は、次のルールに基づいています。

• 赤 = 少なくとも 1 つのクリティカルアラーム
• 橙 = 少なくとも 1 つのメジャーアラーム
• 黄 = 少なくとも 1 つのマイナーアラーム
• 青 = 少なくとも 1 つの警告
• グレー = アラームなし

デバイスアイコンをクリックすると、次の情報と併せてポップアップが表示されます。

• デバイス名。クリックすると、アプリケーションがそのデバイスに移動します。
• デバイスが最後に位置を報告した日付（利用可能な場合）

設定パラメータ

• アセットの選択：地図に表示されるデバイスを選択します。グループを選択すると、グループに含まれるすべてのデバイスが表示されます（サブグループ内のデバイスは除く）。
• マーカーアイコン：地図上のマーカーのアイコン
• ズームレベル：地図のデフォルトのズームレベル
• 中央の境界：地図のデフォルト座標
• 更新間隔：選択したデバイスまたはアセットの更新間隔。デバイスを 1 つだけ選択している場合、更新間隔の代わりに、リアルタイムオプションと「選択項目をフォロー」トグルを同時に選択できます。これにより、位置情報の更新後にデバイスを追跡します。

Markdown

Markdown ウィジェットは、Markdown コンテンツを表示するために使用できます。「Markdown」ウィジェットを使用すると、例えば新機能をユーザーに知らせることができます。

Markdown コンテンツを提供するには、いくつかの方法があります。

• Markdown ファイルをアップロードする
• 外部ソースへの URL を提供する
• 現在のアプリケーションの README ファイルをソースとして提供するために、相対ファイルパスとして「/README.md」を追加する

メッセージ送信

メッセージ送信 ウィジェットは、デバイスにメッセージを送信します。デバイス自体の動作はデバイスによって異なります。c8y_Message オペレーションに対応するデバイスのみで使用できます。

円グラフ

円グラフ ウィジェットは、現在の値を持つデータポイント（メジャーメント）を円グラフで表示します。

設定パラメータ

クイックリンク

クイックリンク ウィジェットは、グリッドまたはリスト形式でリンクを表示します。

リンクを追加、編集、または削除して、ニーズに合わせてウィジェットをカスタマイズできます。

放射状ゲージ

放射状ゲージ ウィジェットは、データポイントを放射状ゲージの形式で表示し、温度、圧力、パフォーマンスメトリクスなどの値をひと目で監視するのに最適です。

プリセットとカスタマイズ

「Default」、「Pointer」、「Progress bar」、「Progress indicator」、「Grade rating」など、さまざまなプリセットスタイルから選択できます。各プリセットは異なる視覚デザインを提供します。

「放射状ゲージ」ウィジェットを作成するには、少なくとも 1 つのデータポイントを有効にする必要があります。

より詳細に制御するには、詳細オプションを表示 をクリックして、ゲージの外観と動作をカスタマイズします。

詳細オプションの参照

リレーアレイ制御

リレーアレイ制御 ウィジェットでは、リレーの配列内でリレーのオン / オフを個別に切り替えることができます。このオペレーションに対応するデバイスでのみ使用できます。

リレー制御

リレー制御 ウィジェットでは、デバイスリレーのオン / オフを切り替えることができます。このオペレーションに対応するデバイスでのみ使用できます。

ローテーション

ローテーション ウィジェットでは、デバイスのオブジェクトモデルをレンダリングできます。

設定パラメータ

ローテーション ウィジェットでは、オブジェクトをドラッグしたり動かして回転できます。マウスを使用して拡大および縮小します。

SCADA

SCADA ウィジェットは、デバイスのステータスを画像表示します。

SCADA ウィジェットの詳細については、SCADA ウィジェットの使用によるステータス監視 を参照してください。

コードのサニタイズ オプションを、次から選択できます。

• 厳密： JS や Angularjs ディレクティブを一切許可しません。
• 緩い： 部分的な JS (イベント) とすべての Angularjs ディレクティブを許可します。
• なし： すべてを許可します。

サイロ

サイロ ウィジェットは、サイロとして現在の値を持つデータポイント（メジャーメント）を表示します。

設定パラメータ

信号機

信号機 ウィジェットは、デバイスの状態を信号機として表示します。

設定パラメータ