# アナログ一覧の作成

トレーニング > 応用編 > 信号一覧画面の作成 > # アナログ一覧の作成 |

ここでは、タグ名、メーター表示、計測値、コメントを一覧形式で表示するアナログ一覧画面を作成してみます。

アナログ一覧フォームの作成

1.アナログ一覧用にフォームを作成します。
新規作成時に自動生成されている“Form01”を利用します。ここでは、名前を“analog”に変更してください。
フォームの名称を変更したら、ルートプロパティのDefaultFormプロパティを、“analog”に変更してください。
続けてStartupSizeのプロパティを"DEFAULTFORM"に変更します。
さらに、今回はルートプロパティの“PSTagAccessPath”プロパティに、“U01.F01.”を設定しておきます。

| PSTagAccessPathには、タグパスの接頭辞を設定することができます。この場合、“U01.F01.”までパスを設定した為、バインドやスクリプトからタグ名を指定する際の指定が、“T01”などのタグ名のみでOKになります。但し、この場合は“U01.F01.”配下のタグ以外には接続することができなくなります。複数のPLCとの接続を行う場合やフォルダを分けてタグ登録を行う場合には、PSTagAccessPathは使用できません。

2.レイアウトを作成します。
3Dフレームコントロールとラベルコントロールを使って、アナログ一覧画面のレイアウトを作成してみます。
上図は作成例です。このレイアウトで、中央にアナログ一覧を表示してみます。

3.グリッドを作成します。
コントロールビューから、グリッドコントロールを選択してフォームに貼り付けます。
グリッドを貼り付けた直後の状態です
グリッドのプロパティを変更します。
・DefaultHeightを30にします
・HeaderColsを0にします
・HorizontalScrollをFalseにします
※その他のプロパティはスクリプトから変更します

4.グリッドの初期化スクリプトを記述します。
グリッドを使用するには、スクリプトからオブジェクトの初期化を行う必要があります。初期化のスクリプトはOnInitializeイベントに記述します。以下のスクリプトをOnInitializeイベントに記述してください。

event OnInitialize() { //列数の設定（タグ名、メーター、計測値、コメント、計４列） 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", "meter", 1); this.SetColWidth(1, 130); this.SetData(1, -1, "メーター"); this.SetCellProperty("col", "MeterForeColor", "#00FF00", 1); this.SetCellProperty("col", "MeterBackColor", "#666666", 1); this.SetCellType("col", "label", 2); this.SetColWidth(2, 100); this.SetData(2, -1, "計測値"); this.SetCellType("col", "label", 3); this.SetColWidth(3, 430); this.SetData(3, -1, "コメント"); this.SetCellProperty("col", "TextAlignX", "left", 3); //監視対象タグの追加、ラベル沸文言の指定 var vTags[this.Rows]; for( var i = 0; i < this.Rows; i++){ var vTag = "T" & ::NS(i + 1, 0, 2, F); vTags[i] = vTag; this.SetData(0, i, vTag ); this.SetData(3, i, vTag & "コメント"); } this.AddTag(vTags); }

（解説）
this.Colsなどの“this”は、自分自身のオブジェクトを指します。this.xxxの書式で、スクリプトから自分自身のプロパティやメソッドにアクセスすることができます。
オブジェクトからタグを認識するためには、必ず“AddTag”メソッドでタグを認識する必要があります。AddTagされたタグのみが、そのオブジェクト内で操作することができるようになります。
グリッドへの値の追加はSetDataメソッドで行います。
this.SetData(3, 0, vTag & "コメント")
という記述の場合、0行・3列目のセルに、vTag変数の文字列(vTag変数にはタグ名"T01"などが格納されます)と"コメント”という文字列を連結した文字列を設定する、という意味になります。この“3”や“0”などの番号のことを「インデックス」と呼び、グリッドの枠位置（セル）を指定する際に利用します。インデックスは０から始まる番号で、この例の場合、外観的には1行・4列目に値が入ります。尚、インデックスに“-1”を指定すると、見出し行、見出し列の意味になります。また、for(条件){}の記述で、繰り返し処理を行います。

| スクリプトエディタはコピー＆ペーストで編集することができます。同じような処理の繰り返し記述などは、コピーして記述すると早く作業できます。尚、“//”（スラッシュ２文字）はスクリプトのコメントの意味です。“//”以降、改行までの文字列がコメントになります（コメントは必ずしもこの記述例のとおりに入力する必要はありません）。

| SetCellType("col", "meter", 1)の記述は、セルのタイプを指定するメソッドです。セルのタイプは第二引数に文字列で指定します。この例ではmeter（メーター）を指定しています。その他、ラベルの他、エディットボックスとして値の編集を可能とするセルタイプもあります。

| SetCellProperty("col", "MeterForeColor", "#00FF00", 1)の記述は、セルのプロパティを指定するメソッドです。この例ではメーターの色を指定しています。指定可能なプロパティはセルのタイプ毎に異なります。詳細はコントロールリファレンスを参照してください。

| SetColWidth(0, 100)などの記述は、グリッドの列幅を指定するメソッドです。この場合、列0（左端から１列目）の幅を100ピクセルにする、という意味になります。この値は各自が作成するコントロールのサイズに合わせて、自由に調整してください。

| グリッドコントロールの詳細なプロパティやメソッドについては、「グリッドコントロール」を参照してください。

5.グリッドの表示更新スクリプトを記述します。
次に、グリッドの表示を動的更新するためのスクリプトを記述します。グリッドの表示更新はタグの値変化に応じて自動的に行いたい為、OnTagValueChangedイベントが最適です。このイベントは、グリッドにAddTagされているタグの値が変化する度に発生するイベントです。
OnTagValueChangedイベントに、以下のスクリプトを記述してください。

event OnTagValueChanged(tagname,value) { var vIndex; vIndex = ::CNum(::RightStr(tagname, 2)) - 1; this.SetData(1, vIndex, ::NS(value, 0)); this.SetData(2, vIndex, ::NS((value), 0)); }

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

| OnTagValueChanged イベントには“tagname”と“value”の２つのパラメータがあります。tagnameには変化を検出したタグ名が、valueには当該タグの値が渡されます。 従って、スクリプト中の記述で、 vIndex = ::CNum(::RightStr(tagname, 2)) - 1; としている部分で、タグ名から数値部分を取り出し、グリッドの行インデックスを求めいています。 タグ名よりグリッドのどの行を更新するかを求めて、valueのタグ値で該当セルを更新しています。

動作確認

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

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

2.アナログ一覧が表示されました。
現在、各タグの値はゼロであるため、Panel Serverのタグモニタから任意に値を変更してみてください。試しに、T01に50を設定してみます。
計測値に50が表示され、メーターの左半分が緑色に変化すればOKです。その他のタグの値が変化することも確認してください。

| メーターのレンジは、0から100までの値を100％として表示します。この作成例では全てのタグが0-100であるため特に意識しませんでしたが、アナログ値が0-100以外のレンジの場合には、SetDataメソッドで値を設定する際にスケール変換してから設定してやります。 例）アナログ値が0-300の場合、メーターには0-300を0-100に変換して渡す this.SetData(1, vIndex, ::NS( ::Math.LinearTrans(T, value, 0, 300, 0, 100) ,0)); このような場合には、「Math.LinearTrans」メソッドの利用が役に立ちます。