# 監視画面を作成する-初級-

トレーニング > 基本編 > 2.エディタによる画面開発 > # 監視画面を作成する-初級- |

監視画面を作成する

プロジェクトが作成できましたので、次に監視画面を追加します。今回のトレーニングでは、「部品ライブラリ」と呼ばれる部品を使用して監視画面を作成します。「部品ライブラリ」は用途に応じた様々な部品が用意されていますが、今回は「数値部品」と「ビット部品」を利用します。

数値部品の配置

1.Panel Editorのワークスペースビューに「User」フォルダを右クリックして「フォームの追加」を選択します。「Form01」が追加されます。

2.下図の「ライブラリ」タブをクリックして、ライブラリ選択画面を表示します。

3.初期状態ではライブラリ選択画面には、すべての部品が表示されていますので、表示条件で「基本部品」ー「数値表示」と絞り込んで、一番左側の部品を使用します。

4.使用する部品ライブラリをドラッグして「画面」タブにマウス移動して、フォームに切り替わったらドラッグしたままフォームに移動してドロップします。数値表示部品がフォーム上に貼り付けられました。

5.続いて、数値入力部品をフォームに追加します。今回は、同じ部品を2つ貼り付けます。ライブラリ選択画面に戻り、表示条件で「基本部品」ー「数値入力」と絞り込んで一番左の部品を選択します。選択している状態で、キーボードの「Ctrl」キーと「C」キーを同時に押します。「画面」タブでフォームを表示して、「Ctrl」キーと「V」キーを同時に2回押します。数値入力部品が２つ貼り付けられました。

| フォーム上に同じ部品を複数貼り付けたい場合は、「Ctrl+C」（コピー）と「Ctrl+V」（貼り付け）のキー操作が便利です。

6.フォーム上に3つの部品が表示されていますが、レイアウトを調整します。部品は、クリックして選択しドラッグ＆ドロップで簡単に移動ができます。移動中は他の部品とそろえる為のガイドラインが表示され、簡単に配置決めができます。
ツールバーの「ガイド」をON（青枠表示）します。既にONになっている場合は、必要ありません。
数値表示部品のサイズを変更します。部品を選択して表示された■の内、右側の真ん中をドラッグしたまま右にサイズを延ばします。ガイドラインなどを利用して調整します。
次のステップで、レイアウトした数値表示部品と数値入力部品にタグを割り付けます。

| タグとは、PLCデバイスの値をPanel Serverが通信して格納する器になります。画面からは、このタグに対して読み書きする事で、PLCデバイスへの読み書きを実現します。タグの登録や詳しい説明は、「3.サーバの設定」で行います。ここでは、サンプル用に標準フレームワークで用意しているタグを利用して割り付けを行います。

7.Panel Serverを表示して、左側のツリーから「Application」-「Tag」-「Driver」-「Samples」-「F02」を選択します。右側にタグの一覧が表示されるので、「D000」を選択してキーボードの「Ctrl」+「C」を押します。

8.Panel Editorに戻り、数値入力部品の左側に配置した方をダブルクリックします。「入出力タグ」部分にフォーカスを合わせ、キーボードの「Ctrl」+「V」を押します。すると、先の手順でコピーした「Samples.F02.D0000」のタグが貼り付けられました。この割り付けにより、この部品から入力した値が「Samples.F02.D0000」のタグに出力されます。同様に右の数値入力部品にも同じ「Samples.F02.D0000」のタグを割り付けます。

9.先の手順と同様に数値表示部品にも「Samples.F02.D0000」のタグを割り付けます。数値表示部品の場合は、「入力タグ」に登録します。

10.今作成したフォームを左側のメニューから呼び出せる様に設定します。左側のツリーの「Client-client.xml」部分を選択し、プロパティ一覧の「_MenuConf」の[...]ボタンをクリックします。テキスト入力できる画面が表示されるので、以下のテキストを入力します。

[Training] Training,Form01,画面1,,

| メニューへの追加方法の詳細は、本トレーニングの「監視画面をメニューに追加する」を参照してください。

動作確認

数値部品を追加した監視画面を実際に動かしてみます。

1.Panel Serverをオンラインモニターにします。

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

3.実行画面で左メニューに「画面1」が追加されていますので、クリックして先程作成したフォームを表示します。

4.左側の数値入力部品に5を入力して下さい。数値入力後「Enter」キーを押すか、フォーカスが外れる（部品以外を選択する）と他の部品の値も変わります。また、Panel Serverの「Samples.F02.D0000」のタグの値も変わっていることが確認できます。右側の数値入力部品で数値を入力しても、他の部品の数値が同じになります。これは、3つの部品に同じ「Samples.F02.D0000」のタグの値を入力・表示しているためです。

5.動作確認が終了したら、Panel Serverをオフラインにします。

ビット部品の配置

1.「数値部品の配置」で作成したフォーム「Form01」に、引き続きビット部品を配置します。ライブラリ選択画面の、表示条件で「基本部品」ー「オルタネートスイッチ」と絞り込んで、一番左側の部品を使用します。数値部品と同様の手順でドラッグ&ドロップでフォームへ配置します。

2.続いてライブラリ選択画面の、表示条件で「基本部品」ー「ランプスイッチ」と絞り込んで、一番左側の部品を使用します。数値部品と同様の手順でドラッグ&ドロップでフォームへ配置します。

3.最後にライブラリ選択画面の、表示条件で「基本部品」ー「イメージランプ」と絞り込んで、一番左側の部品を使用します。数値部品と同様の手順でドラッグ&ドロップでフォームへ配置します。

4.フォーム上のレイアウトを調整します。数値部品と同様に配置場所を移動させます。また、ここでイメージランプ部品の大きさを変更します。右下の■をキーボードの「Shift」を押しながら、左上にドラッグします。「Shift」を押しながらマウスを操作することで、縦横比が保たれたまま縮小・拡大することができます。

5.Panel Serverを表示して、左側のツリーから「Application」-「Tag」-「Driver」-「Samples」-「F01」を選択します。右側にタグの一覧が表示されるので、「M000」を選択してキーボードの「Ctrl」+「C」を押します。

6.Panel Editorに戻り、オルタネートスイッチ部品をダブルクリックします。「入力タグ」部分にフォーカスを合わせ、キーボードの「Ctrl」+「V」を押します。先の手順でコピーした「Samples.F01.M0000」のタグが貼り付けられました。また、「出力タグ」にも同じタグを割り付けます。「入力タグ」は本部品の状態を取得するタグを、「出力タグ」には本部品から出力するタグを設定します。今回は同じタグを「入力タグ」「出力タグ」に割り付けます。

7.先の手順と同様にランプ部品、イメージランプ部品にも「Samples.F01.M0000」のタグを割り付けます。両方とも、「入力タグ」のみに登録します。

動作確認

ビット部品を追加した監視画面を実際に動かしてみます。

1.Panel Serverをオンラインモニターにします。

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

3.「画面1」を開きます。オルタネートスイッチ部品をクリックすると、ランプ部品とイメージランプ部品の色が変わります。Panel Serverの値を確認すると、スイッチがOFF(緑)の時「Samples.F01.M0000」の値はFALSE、スイッチがON(赤)の時TRUEとなっています。

| ビットを表すタグはTRUEかFALSEの値をとります。TRUEはONの状態で、FALSEはOFFの状態です。

4.動作確認が終了したら、Panel Serverをオフラインにします。