部品ライブラリを使用した画面作成

<< Click to Display Table of Contents >>

マニュアル > 監視システム構築ガイド > グラフィック画面の作成 >

部品ライブラリを使用した画面作成

部品ライブラリを使用した画面作成の紹介

ここでは、部品ライブラリを使用した画面の作成手順を簡単に説明します。

 

ラベル、エディットボックス、四角形、ボタンコントロールを使用し、以下のような簡易的な画面を作成する手順を紹介します。

 

(画面イメージ)

p_gra_0054

 

 

hint

Panel Editorの操作方法については、「Panel Editorの編集操作」に詳細な説明があります。また、部品ライブラリの利用方法については「部品ライブラリの利用」を参照してください。

 

hint

部品ライブラリの詳細な仕様については「ライブラリリファレンス」に記述されています。

 

 

■作成手順

 

以下の手順では、Panel Serverに以下のタグが登録されているものとします。

 

U01.F01.D0000 ・・・数値タグ

U01.F01.M0001 ・・・ビットタグ

U01.F01.M0002 ・・・ビットタグ

 

 

1.フォームにランプスイッチ部品を張り付ける

 

Panel Editorで編集対象のフォームを選択した状態で、メインエリア上部のタブを、「ライブラリ」に切り替えます。

 

p_gra_0055

 

すると、メインエリアがライブラリタブに変わります。

 

p_gra_0056

 

部品ライブラリの表示は、画面上部のフィルタ機能で絞り込むことができます。

ここでは、「基本部品」「ランプスイッチ」を選択します。

 

p_gra_0057

 

サムネイルから目的の部品をクリックして選択状態にして、メインエリアの上部にある「画面」タブにドラッグします(部品を選択するとチェックマークが表示されます)。

今回は例として、「lampswitch120」という部品を使用します。尚、画面タブにドラッグする際、マウスのボタンは押したまま、離さないでおいてください

 

p_gra_0058

 

すると、メインエリアの表示がフォームに切り替わります。切り替わったフォーム上で、部品を張り付けたい任意の場所でマウスのボタンを離すことで、指定した場所に部品が張り付けられます

 

p_gra_0059

 

対象のフォームに部品が張り付けられました。

 

 

hint

部品ライブラリの張り付け方法には、上記で紹介したドラッグ&ドロップによる方法の他に、ライブラリタブのサムネイルを右クリックにより「コピー」して対象のフォーム上で「張り付け」操作を行うことでも張り付けることができます。

 

 

2.ランプスイッチ部品に設定を行う

 

フォームに張り付けたランプスイッチ部品をダブルクリックすると、以下のダイアログが表示されます。

 

p_gra_0060

 

ダイアログの「入力タグ」に、「U01.F01.M0001」とタグパスを入力します。

 

p_gra_0061

 

尚、上記のように入力タグのみにタグパスを設定すると、ランプスイッチ部品はランプのみ(スイッチ機能なし)として動作します。

 

 

3.部品ライブラリからボタンスイッチ部品を張り付ける

 

続いて、ランプスイッチ部品と同じ要領で、フォームにボタンスイッチ部品を張り付けます。ライブラリのフィルタ機能で「基本部品」「ボタンスイッチ」と絞り込み、以下の部品を選択してフォームに張り付けてください。今回は例として「btnswitch202」を使用します。

 

p_gra_0062

 

フォームに部品が張り付けられました。

 

p_gra_0063

 

 

4.ボタンスイッチ部品に設定を行う

 

フォームに張り付けたボタンスイッチ部品をダブルクリックすると、以下のダイアログが表示されます。

 

p_gra_0064

 

ダイアログの「出力タグ」に、「U01.F01.M0001」とタグパスを入力します。

 

p_gra_0065

 

尚、上記のように出力タグのみタグを設定すると、ボタンスイッチはスイッチのみ(ランプ表示なし)として動作します。

 

 

5.ボタンスイッチをもう1つ張り付けてランプスイッチとして設定する

 

上記と同様の手順で、ボタンスイッチをもう一つ張り付けてください(※先に張り付けた部品をコピーしてもかまいません)。

 

p_gra_0066

 

今度は、ダイアログの「入力タグ」と「出力タグ」に、「U01.F01.M0002」と同じタグパスを入力します。

 

p_gra_0067

 

このように入力タグと出力タグにタグを設定すると、ボタンスイッチはランプスイッチとして動作します。

 

 

6.部品ライブラリからスライダー部品を張り付ける

 

続いて、フォームにスライダー部品を張り付けます。ライブラリのフィルタ機能で「基本部品」「スライダー」と絞り込み、以下の部品を選択してフォームに張り付けてください。今回は例として「slider301」を使用します。

 

p_gra_0068

 

フォームに部品が張り付けられました。

 

p_gra_0069

 

 

7.スライダー部品に設定を行う

 

フォームに張り付けたスライダー部品をダブルクリックすると、以下のダイアログが表示されます。

 

p_gra_0070

 

ダイアログの「入力タグ」と「入出力タグ」の両方に、「U01.F01.D0001」と入力します。

 

p_gra_0071

 

以上で設定は完了です。

 

 

8.動作確認

 

Panel Serverのオンライン(黄矢印)をクリックし、オンラインにします。

 

p_gra_0047

 

続いて、Panel Editorのブラウザ実行アイコン(緑矢印)をクリックし、Panel Browserをオンラインにします。

 

Panel Browserが起動したら、上記で作成したフォームを表示してください。

 

p_gra_0072

 

M0001を割り付けたボタンスイッチのONボタンをクリックします。

 

p_gra_0073

 

すると、同様にM0001が割り付けられたランプスイッチ部品の表示が、ON状態(赤色)に変化しました。

尚、このボタンスイッチには出力タグしか割り付けられていないため、ボタンの表示色は特に変化しません。

 

p_gra_0074

 

Panel Server側で対象のタグ「U01.F01.M0001」の現在値を見ると、「TRUE」に変化している事が確認できます。

 

p_gra_0075

 

ONボタン、OFFボタンのクリックの都度、画面のランプ表示およびタグの値(TRUE/FALSE)が切り替わることを確認してください。

 

続いて、M0002が割り付けられたボタンスイッチのONボタンをクリックしてください。

 

p_gra_0076

 

すると、ボタンの表示色がON状態に変化しました。

 

p_gra_0077

 

このように、ボタンスイッチはランプとしての機能も兼ね備えています。

 

Panel Server側で対象のタグ「U01.F01.M0002」の現在値を見ると、「TRUE」に変化している事が確認できます。

 

p_gra_0078

 

ONボタン、OFFボタンのクリックの都度、ボタンの表示状態およびタグの値(TRUE/FALSE)が切り替わることを確認してください。

 

続いて、D0001が割り付けられたスライダーの動作を確認します。

現在、U01.F01.D0001の値は「0」です。

 

p_gra_0079

 

スライダーの表示は、以下のようになっており、数値「0」が表示された状態です。

 

p_gra_0080

 

 

試しに、スライダーをマウスで操作してみます。

 

p_gra_0081

 

スライダーの操作により、数値が変化しました。

 

p_gra_0082

 

D0001タグにも、同様の値が書き込まれています。

 

p_gra_0083

 

スライダー部品に表示されているエディットボックスから、任意の値を入力してみてください。

 

p_gra_0084

 

すると、スライダーのメーターレベルも同様に変化しました。

 

p_gra_0085

 

D0001タグに、同様の値が書き込まれていることが確認できます。

 

p_gra_0086

 

 

このように、部品ライブラリを使うことでランプ表示やボタンスイッチ、数値表示や書き込み等の汎用的な機能を簡単に構築することができます。

 

 

hint

部品ライブラリの各部品は、標準コントロールの組み合わせによって構築されています。標準コントロールを張り付けて作り込みを行うことによっても、上記で使用した部品と同様の機能を実現することができます。