# デジタル一覧の作成

トレーニング > 応用編 > 信号一覧画面の作成 > # デジタル一覧の作成 |

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

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

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

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

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

4.コントロールビューから、グリッドコントロールを選択してフォームに貼り付けます。
グリッドのプロパティを変更します。
・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が起動し、クライアント設定ファイルが開かれて実行されます。

2.デジタル一覧が表示されました。
現在、各タグの値はFALSE（Off）であるため、ランプは灰色表示です。Panel Serverのタグモニタから任意に値を変更してみてください。試しに、T51にTRUEを設定してみます。
T51の状態ランプが緑色に変化すればOKです。その他のタグの値も編集を行い、ランプ表示が変化することを確認してください。