トレーニング > 応用編 > 信号一覧画面の作成

ここでは、タグ名、ランプ表示、コメントを一覧で表示するデジタル一覧画面を作成してみます。

デジタル一覧フォームの作成

1.デジタル一覧用にフォームを作成します。
Folder01を右クリックし、フォームの追加を行います。ここでは、名前を“digital”に変更してください。
tra_0472

フォームの名称を変更したら、ルートプロパティのDefaultFormルートプロパティを、“digital”に変更してください。
tra_0473

2.レイアウトを作成します。
3Dフレームコントロールとラベルコントロールを使って、デジタル一覧画面のレイアウトを作成してみます。アナログ一覧フォームをコピーして作成してもかまいません。
tra_0474

3.グリッドを作成します。

4.コントロールビューから、グリッドコントロールを選択してフォームに貼り付けます。
tra_0468

tra_0475
グリッドのプロパティを変更します。

・DefaultHeightを30にします
・HeaderColsを0にします
・HorizontalScrollをFalseにします

※その他のプロパティはスクリプトから変更します

5.グリッドの初期化スクリプトを記述します。

以下のスクリプトをOnInitializeイベントに記述してください。

event OnInitialize()
{
//列数の設定（タグ名、状態、コメント、計3列）
this.Cols = 4;
//行数の設定（１５点のアナログタグ、計１５行）
this.Rows = 15;

//色設定
this.SetCellProperty("all", "FillColor", "#FFFFFF");
this.SetCellProperty("all", "TextColor", "#000000");

//各列の沸設定
this.SetCellType("col", "label", 0);
this.SetColWidth(0, 100);
this.SetData(0, -1, "タグ");

this.SetCellType("col", "lamp", 1);
this.SetColWidth(1, 70);
this.SetData(1, -1, "状態");
this.SetCellProperty("col", "Shape", "circle", 1);
this.SetCellProperty("col", "OnColor", "#00FF00", 1);
this.SetCellProperty("col", "OffColor", "#666666", 1);

this.SetCellType("col", "label", 2);
this.SetColWidth(2, 590);
this.SetData(2, -1, "コメント");
this.SetCellProperty("col", "TextAlignX", "left", 2);

//監視対象タグの追加、ラベル枠文言の指定
var vTags[this.Rows];
for( var i = 0; i < this.Rows; i++){
var vTag = "T" & ::NS(i + 51, 0, 2, F);
vTags[i] = vTag;
this.SetData(0, i, vTag );
this.SetData(2, i, vTag & "コメント");
}
this.AddTag(vTags);
}

ランプの表示書式（ランプの形）は、

　this.SetCellProperty("col", "Shape", "circle", 1);

で指定しています。ここでは「円」（"circle"）を指定していますが、「正方形」などで表示することも可能です。

又、ランプの表示色は、

　this.SetCellProperty("col", "OnColor", "#00FF00", 1);

　this.SetCellProperty("col", "OffColor", "#666666", 1);

で指定しています。この場合、Onの時が緑色、Offの時が灰色になります。

6.グリッドの表示更新スクリプトを記述します。

次に、グリッドの表示を動的更新するためのスクリプトを記述します。アナログ一覧と同様に、OnTagValueChangedイベントに以下のスクリプトを記述してください。

event OnTagValueChanged(tagname,value)
{
var vIndex;

vIndex = ::CNum(::RightStr(tagname, 2)) - 51;

this.SetData(1, vIndex, ::NS(value, 0));
}

これでデジタル一覧フォームの作成は完了です。ここまでの作業で設定ファイルを保存してください。

動作確認

作成したアナログ一覧の動作を確認してみます。Panel Serverがオンライン状態で確認して下さい。

1.Panel Editorの下図のアイコンをクリックすると、Panel Browserが起動し、クライアント設定ファイルが開かれて実行されます。

tra_0013

2.デジタル一覧が表示されました。

tra_0476

現在、各タグの値はFALSE（Off）であるため、ランプは灰色表示です。Panel Serverのタグモニタから任意に値を変更してみてください。試しに、T51にTRUEを設定してみます。

tra_0477

T51の状態ランプが緑色に変化すればOKです。その他のタグの値も編集を行い、ランプ表示が変化することを確認してください。

デジタル一覧の作成

デジタル一覧の作成