7. データをパネルにバインドする#

データバインドとは、スクリーンのパネルに表示するデータを配置することです。

7.1. パネルの構成#

パネルとは、ビジュアルパーツが表示される領域です。個々にビジュアルパーツを設定でき、表示サイズを変更できます。

../_images/image120.png
1 Edge Name

パネルにバインドするエッジの名前。

2 Panel Name

パネルの名前。設定されていない場合、バインドされた一つ目のデータ名が表示されます。

3 表示エリア

設定されたビジュアルパーツやデータの数値を表示するエリア。ビジュアルパーツの種類によって表示形式が異なります。

4 タイムスタンプ

データ取得時刻を表示します。

7.2. データバインド#

7.2.1. パネルを作成#

スクリーンパネル上で作成したい箇所のパネルを選択し、[1×1]または[2×2]を選択します。

../_images/image121.png

次の画像の例では「2×2」は選択可能となります。

../_images/image122.png

次の画像は「2×2」パネルを作成できない2つの例です。

../_images/image123.png

1 必要なスペースに他のパネルが設定されている場合

2 ウィンドウの右端または最終行のための必要なスペースが確保できない場合

  1. Panel Settingsの[Bind Data]を選択します。

  2. 表示されたウィンドウから、[Select Edge]を選択し、リストからEdgeを選択します。

    ../_images/image124.png
  3. Edgeがセットされたら、Select DataのリストからDataを選択 します。

    ../_images/image125.png
  4. Edgeと Data のセットが完了したら[x]をクリックしてウィンドウを閉じます。

  5. [x]をクリックしてPanel Settingsウィンドウを閉じます。

7.2.2. VISUAL PARTSを設定#

次にVISUAL PARTSを設定します。

方法1: Panel Settingsの[Visual Parts]ボタンを選択し、VISUAL PARTS一覧から選択します。

../_images/image127.png

方法2: コンテンツメニューより[Visual Parts]を選択します。一覧からビジュアルパーツを選択し、設定したいパネルにドラッグ&ドロップします。

../_images/image128.png

注釈

VISUAL PARTSからデータバインド

空白のスクリーンパネルに直接Visual Partsからデータバインドも可能です。

コンテンツメニューより[Visual Parts] を選択します。

設定したいビジュアルパーツを一覧より選択し、スクリーンパネルにドラッグ&ドロップします。

../_images/image128.png

Panel Nameを選択し、Panel Settings画面に表示されている項目の設定を行い、EdgeやDataを設定します。

注釈

ビジュアルパーツの 検索や絞り込み

Visual Partsは検索フォームからの検索やカテゴリでフィルターをかけて探すことができます。

名前で検索

../_images/visual-parts-filter-by-name.png

カテゴリで絞込み

../_images/visual-parts-filter-by-category.png

注釈

Edgeと関連付けられているDataについて

  • DataとEdgeが関連付けられている場合は、選択されたEdgeに関連付けられたDataのみが表示されます。全てのDataを表示したい場合は、 link-icon をクリックします。

    ../_images/image132.png
  • もう一度 link-icon をクリックすると、関連付けられたDataのみの表示に戻ります。

7.3. Panel Settingsを変更#

パネルの左上のエリアを選択し、Panel Settings画面の項目を設定します。

../_images/image133.png
1 Panel Name

パネルに表示する名前を入力します。空欄の場合は、データ名が表示されます。

2 Visual Parts

ビジュアルパーツを選択します。

3 Bind Data

データ取得元EdgeとDataを選択します。

4 Rendering Speed

パネル単位でパーツを描画する間隔の変更ができます。 小さくすることでPCへの負荷を抑えることが期待できます。

7.4. 複数のデータの設定#

ビジュアルパーツによっては、複数のデータをまとめて表示できます。 ビジュアルパーツによって、バインドできる最大データ数が違います。

複数のデータを設定したいパネルのPanel Nameを選択します。

Panel Settingsから[Add New Data]ボタンを選択し、データを設定します。

../_images/image134.png

Panel Settings画面の[x]を選択またはPanel Settings画面以外の場所を選択し、Panel Settings画面を閉じます。

7.4.1. Bind Dataの連続セット#

複数の計測データを表示可能なビジュアルパーツはDataを連続でバインドできます。

  1. [Panel Name]を選択します。

  2. [Quick add]を選択すると、Data とEdgeの選択ウィンドウを表示させたまま複数のDataを連続選択できます。

    ../_images/image135.png

7.4.2. データの並び替えついて#

ドラッグ&ドロップでデータの並び替えをできます。

入れ替え(カードの上にドロップします)

../_images/image136.png

割り込み(カードの隙間にドロップします)

../_images/image136.png

注釈

追加したBind Dataを削除するには

Panel Settingの「Bind Data」項目で、削除したいBind DataのDataをマウスオーバーし、[x]を選択します。

../_images/image138.png

7.5. パネルサイズの変更#

パネルをマウスオーバーした際に表示される端のガイド点をドラッグすることでパネルサイズを変更できます。

../_images/image139.png

7.6. パネル全画面表示切り替え#

パネル左端下にある enlarge-icon ボタン押下でパネルを拡大・縮小できます。

../_images/image141.png

7.7. パネルの位置変更#

パネルをスクリーンの空白位置にドラッグ&ドロップすることでパネルの位置を変更できます。

../_images/image142.png

7.8. パネルの入れ替え#

設定済みのパネルにドラッグ&ドロップすることでパネルを入れ替えます。

../_images/image143.png

7.9. パネルコピー#

Altキー(Macの場合optionキー)を押下しながらパネルをドラッグ&ドロップします。 設定済みのデータおよびオプション設定等がすべてコピーされます。

../_images/image144.png

7.10. パネルの削除#

パネルオペレーションツールの[Select All Panel] select-panel-icon を選択し、[Delete Panel] trash_can-icon を選択します。

../_images/image147.png

7.10.1. 個別データバインドの削除#

削除したいパネルにマウスオーバーし、表示された select-icon を選択します。

パネルオペレーションツールの[Delete Panel] trash_can-icon を選択します。

../_images/image149.png

注釈

パネル矩形選択

パネル間の隙間またはBlankパネルからマウスドラッグ操作にて、矩形選択が可能です。範囲内のパネルが全て選択されます。

7.11. タイムラインとパネルに設定されているエッジを一括で変更する#

タイムラインとパネルに設定されているデータ送信元エッジを、一括で変更することができます。

  1. パネルオペレーションツールの[Replace Edge] replace_edge-icon をクリックします。

  2. 置換対象のエッジ名(Replace:)と、新たに設定したいエッジ名(With:)を選択し、[Replace]をクリックします。

以下の例では、「edge01」のデータを表示しているすべてのタイムラインとパネルについて、「test-edge」のデータを表示するように変更します。

../_images/image150.png

7.12. エラー表示#

7.12.1. パネルでのエラー#

パネルでエラーが発生すると、パネルにメッセージが表示されます。

../_images/panel-error-example.png
Set bind data

データがバインドされていません。データをバインドしてください。

Set edge or data

EdgeかDataが設定されていません。EdgeとDataを設定してください。

Data not loaded yet

データがロードされていません。再度データをロードしてください。

Panel Error

本来想定していない形式のDataがBindされています。カスタマーサポートに連絡してください。

7.12.2. スクリーン全体のエラー#

一定のビジュアルパーツの組み合わせやビジュアルパーツ単体では処理できないエラーの場合は、スクリーンのみへの影響の場合は、スクリーン全体にエラーが表示されます。

../_images/image155.png

7.12.3. ブラウザー全体でのエラー#

全体へ影響される場合は、ブラウザー全体でエラーを表示します。

../_images/image156.png

7.13. 閾値を超えたデータの表示#

データ自体が設定された閾値を超える場合、パネルで閾値エラーが表示されます。 複数データの場合、1つのデータが閾値を超えてもエラー表示になります。

※ LINE Graphは閾値エラーをサポートしません。

../_images/threshold-error.png