<< Click to Display Table of Contents >> マニュアル > 監視システム構築ガイド > グラフィック画面の作成 > 部品ライブラリを使用した画面作成

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

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

 

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

 

（画面イメージ）

 

 

 

 

 

■作成手順

 

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

 

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

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

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

 

 

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

 

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

 

 

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

 

 

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

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

 

 

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

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

 

 

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

 

 

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

 

 

 

 

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

 

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

 

 

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

 

 

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

 

 

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

 

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

 

 

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

 

 

 

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

 

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

 

 

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

 

 

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

 

 

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

 

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

 

 

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

 

 

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

 

 

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

 

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

 

 

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

 

 

 

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

 

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

 

 

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

 

 

以上で設定は完了です。

 

 

8.動作確認

 

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

 

 

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

 

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

 

 

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

 

 

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

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

 

 

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

 

 

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

 

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

 

 

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

 

 

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

 

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

 

 

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

 

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

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

 

 

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

 

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

 

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