GUI マニュアル · Chapter 17

View Module

View Module は、装置の運転画面(HMI)を視覚的に作成する GUI デザイナーです。画面中央の XMachineEditorControl キャンバス上にボタン・ランプ・テキストなどの UI コントロールをドラッグして配置し、オペレーターが実際に見て操作する運転画面を構成します。

1 つの View モジュールは、画面レイアウトを収めたデザイン(.xmd)と、その画面で発生するイベントを処理するスクリプト(.xms)の 1 組で構成されます。デザインはこのデザイナーで、イベント関数は同じモジュールの Functions ノードで扱います。

View Module 画面
View Module 画面

主な領域

画面はコントロールを配置する単一のキャンバスを中心に構成されます。メイン画面のツールバーと併用して編集状態を切り替え、配置を整えます。

領域説明
デザインキャンバスXMachineEditorControl。コントロールを配置・移動・サイズ変更する作業領域です。
Lock Design トグルメイン画面のツールバーにあるトグルで、編集モードとロックモードを切り替えます。ロック中はコントロールが固定され、誤って動かすことを防ぎます。
整列ボタンメイン画面のツールバーの整列機能で、選択したコントロールを左・右・上・下に整列し、間隔をそろえます。

配置可能なコントロールの全一覧と各コントロールのプロパティは UI Controls で扱います。

データバインディング

各コントロールはデータバインディングを介して Run Module の変数と連結されます。たとえばランプコントロールを bool 変数にバインドすると変数値が真のときランプが点灯し、数値表示コントロールを座標変数にバインドすると現在位置が画面にリアルタイムで表示されます。

このように画面とランタイム変数を結び付けておくと、スクリプトが変数を更新するだけで画面も追従して更新されます。Run Module の変数宣言およびバインディングの例は、該当する章を併せて参照してください。

イベント接続

ボタンのように操作が必要なコントロールは、イベントを関数に接続します。ボタンの場合は、まず Property EditorAction プロパティを RunEvent に設定します。Action の既定値は None で、RunEvent のときのみクリック時に OnClickEvent に指定した関数が実行されます。次に XMachineEvent 項目の OnClickEvent プロパティに実行する関数名を指定します。ActionRunEvent の状態でボタンをダブルクリックすると、関数がない場合は自動生成され、その編集タブが開いて動作を記述できます。生成された関数は、同じ View モジュールの Functions の下にノードとして追加されます。段階的な例は最初のプロジェクトで扱います。

操作の流れ

  1. メイン画面のツールバーで Lock Design をオフにし、編集モードに切り替えます。
  2. キャンバスに必要なコントロールを配置し、位置とサイズを調整します。
  3. 複数のコントロールを選択し、整列ボタンでそろえます。
  4. 各コントロールのデータバインディングに Run Module の変数を指定します。
  5. イベントが必要なボタンは、ActionRunEvent に設定してから OnClickEvent に関数を接続し、動作を記述します。
  6. 編集を終えたら Lock Design を再びオンにして配置を固定します。

関連項目