数値表示器の作成

<< Click to Display Table of Contents >>

トレーニング(FA-Panel) > 応用編 > 表示器の作成 >

数値表示器の作成

アナログ表示器の作成(数値表示)

プロジェクトの新規作成」で登録したタグを画面に表示するアナログ表示器を作成してみます。アナログ表示の表現方法として、ここでは、「数値表示」をテーマに作成します。

 

1.フォームは新規作成時に自動的に作られる“Form01”を利用します。
 

2.3Dフレームコントロールでパネルを作成します。
表示器の枠となるコントロールとして、ここでは3Dフレームを使用します。
 
BorderStyleプロパティを「3D_RAISE1」変更して、浮き出た表現にしました
tra_0375
 

3.数値表示用のラベルを貼り付けます。
 
表示枠の中に、数値表示を行うためのラベルを貼り付けます。
tra_0376
 
ラベルを貼り付けたら、以下のプロパティを編集します。
 
・Textの“Label”を削除
・TextColorを#00FF00に(緑)
・TextFontのポイント数を大きく(16ポイント程度)
・BorderをTrueに変更
・FillをTrueに変更し、FillColorを#000000に(黒)
 
tra_0377
 

4.数値表示するタグをバインドします。
ラベルのTextプロパティのバインドにタグを割り付けます。ここでは、T01タグを使用します。
 
tra_0378
 

5.名称表示用のラベルを貼り付けます。
次に、この表示器の名称を固定表示するためのラベルを貼り付けます。ここでは、表示器の左の余白部分に、左寄せのラベルで“T01”と表示してみます。
tra_0379
 
そして、この表示器に表示するアナログ値の単位を固定表示するためのラベルを貼り付けます。ここでは、表示器の右の余白部分に、左寄せのラベルで“kg/h”と表示してみます。
tra_0380
 
ここまで作成した表示器を、1つのオブジェクトとしてグループ化しておきます。
 

6.設定ファイルを保存します。一通りの設定が終わったら、設定ファイルを保存しておきます。(※以降、設定ファイルの保存は都度行ってください)。
 


 

動作確認

 

作成した表示器の動作を確認してみます。Panel Serverがオンライン状態で確認して下さい。

 

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

2.アナログ値が表示されました。
 
tra_0381
 

3.Panel ServerのタグモニタからT01の値を編集し、表示器の値が切り替わることを確認してください。

 

これが、一般的な簡易アナログ表示器の作成例です。数値の寄せを右寄せにする、表示色を緑以外にする等のアレンジを加えることで、より実用的な表現が可能です。

 
 

アナログ表示器の作成(四角形メーター表示)

次に四角形メーターコントロールを使用して、アナログ値をバーグラフ的に表示する表示器を作成します。ここでは、メーター表示とラベルによる数値表示を組み合わせて表現してみます。引き続きForm01に作成します。

 

1.3Dフレームコントロールでパネルを作成します。
3Dフレームコントロールで、プロパティを変更して以下のようなパネルを作成してみて下さい。
 
tra_0382
 

 

2.数値表示部分を作成します。
先ほどの手順を参考に、上部のパネル枠内に数値表示器を配置してみます。
 
tra_0383
 
・Textの“Label”を削除
・TextColorを#00FF00に(緑)
・TextFontのポイント数を大きく(16ポイント程度)
・BorderをTrueに変更
・FillをTrueに変更し、FillColorを#000000に(黒)
・表示器のラベルに“IN:U01.F01.T02”をバインド
・名称用のラベルに“T02”と表示

 
 

3.メーター部分を作成します。
メーター表示部分に、四角形メーターコントロールを使用してみます。コントロールビューから、四角形メーターコントロールを選択してフォームに貼り付けます。
tra_0384
 
アナログ表示器の下あたりに、縦長に配置してみます
tra_0385
 
貼り付けた四角形メーターのValueプロパティにT02タグをバインドします。
 
tra_0386
 

hint

四角形メーターのプロパティを変更することで、以下のような表示変更が可能です。

メーターの塗りつぶし方向の変更(デフォルトは下から上に塗りつぶし)

メーターの最小値・最大値の変更(デフォルトは0から100。表示したいアナログタグのレンジに合わせて設定を調整する)

メーターの塗りつぶし色の変更(デフォルトは緑色)

 

 

4.メーターにスケール表示を付けます。
このままでもメーターとして動作しますが、メーターを読み取るための目盛りがほしいところです。そこで、垂直スケールコントロールを使用して、メーターのスケール表示を作成してみます。
コントロールビューから、垂直スケールコントロールを選択してフォームに貼り付けます。
tra_0387
 
ちょうど四角形メーターの高さと合うように配置してください。
tra_0388
 
数値の表示方法を変更します。NumberFormatプロパティの「...」をクリックして数値書式ダイアログを表示します。ここでは、小数点桁数を0とします。
 
tra_0389
 
スケールのメモリ表示はデフォルトで0~100なので、ここではこのまま使用します。
ここまで作成した表示器を、1つのオブジェクトとしてグループ化しておきます。

 

hint

垂直スケールのプロパティを変更することで、以下のような表示変更が可能です。

スケールのレンジ値変更(デフォルトは0から100)

スケールに表示する目盛りの数の変更(何分割とするかの設定)

スケールに表示する数値のフォーマット変更(小数点表示など)

 

 


 

動作確認

 
作成した表示器の動作を確認してみます。Panel Serverがオンライン状態で確認して下さい。

 

1.Panel Editorの下図のアイコンをクリックすると、Panel Browserが起動し、クライアント設定ファイルが開かれて実行されます。
 
tra_0013
 
表示器が表示されました。
 
tra_0390
 
現在、T02の値はゼロなので、Panel Serverのタグモニタから値を変更してみます。ここでは60と入力してみます。
 
tra_0391
 
アナログ値とともに、メーターが表示されました。