3. エンジニアリング実習
3.9. グラフィック画面の作成
3.9.3. メイングラフィック画面作成
いよいよグラフィック画面の作成です。
以下に，はじめにメイングラフィック画面を作成する手順を示します。
● 手順 1 画面サイズ設定
(1)
グラフィックデザイナのメニューバー［ファイル(F)
］－［プロパティ(I)
］を選 択します。開いた「ファイルプロパティ」ダイアログの「属性」タブを選択し，画面サイズを「
820 × 830
」として［OK
］ボタンを押します。(2)
グラフィックウィンドウの表示サイズを変えたい場合には，メニューバー［表 示(V)
］－［ズームアウト(O)
］または［ズームイン(I)
］で調整できます。図
3.9.3.-1
「ファイルプロパティ」ダイアログ● 手順 2 テキスト表示
以下に，「
Y
流量」というテキストを貼り付け，その文字の色をCv
値によって変 化させる手順を示します。今回は
Y
流量のCv
値が90
を越えると赤色，10
未満で青色に変わるように定義す ることになります。(1)
作画ツールバー内のテキストプリミティブのツールボタンを押し，グラフィッ クウィンドウ上でクリックします。カーソルが表示されるのでそこに「Y
流量」と入力します。
図
3.9.3.-2
テキストプリミティブのツールボタンと選択モードのツールボタン(2)
まず，選択モードのツールボタンをクリックし，次に，「Y
流量」のテキスト プリミティブを右クリックし，［プロパティ(P)
］メニューを選択します。図
3.9.3.-3
［プロパティ(P)
］の選択テキストプリミティブのツールボタン 選択モードのツールボタン
(3)
開いた「テキスト」ダイアログの「テキスト」タブで，テキストプリミティブ のフォントやサイズを調整してください（フォント:MS
ゴシック，サイズ:32
）。(4)Y
流量のCv
値が90
を越えると赤色に変化する定義をするために，「テキスト」ダイアログの「図形モディファイ」タブの「モディファイ条件」グループで，
［色変化
(R)
］のプルダウンメニューから「通常色変化」を選び，［変化色(N)
］ を赤に設定します（デフォルト）。図
3.9.3.-4
「テキスト」ダイアログの「図形モディファイ」タブ(5)
グラフィックデザイナのメニューバーの［ツール(T)
］－［データソース(T)
］を 選択します。図
3.9.3.-5
［データソース(T)
］の選択(6)
開いたデータソース選択ダイアログのツリービューの「DataSource
」－「OPC1
（
localhost
）」－「MainGroup
」－「Y
流量」から「Cv
」プロパティをドラッグ して，「テキスト」ダイアログの「図形モディファイ」タブの「モディファイ 条件」グループの［条件式(O)
］にドロップすると，そこに「
@Data(“MainGroup.Y
流量.Cv”)
」が自動入力されます。図
3.9.3.-6
「Cv
」の［条件式(O)
］へのドラッグ&
ドロップ(7)
「>90
」と続けて入力し，［追加(D)
］ボタンを押すと，ダイアログ下部に，定 義したモディファイ条件が表示されます（No.1
）。図
3.9.3.-7
「>90
」の［条件式(O)
］への追加入力図
3.9.3.-8
定義したモディファイ条件の表示の確認(8)
同様にして，Y
流量のCv
値が10
未満で青色に変化する定義をするために，「テキスト」ダイアログの「図形モディファイ」タブの「モディファイ条件」
グループで，まずは，［色変化
(R)
］のプルダウンメニューから「通常色変化」を選び，［変化色
(N)
］の色付きボタンを押し，開いた「色の設定」ダイアログ で青を選び，［OK
］ボタンを押します。図
3.9.3.-9
［変化色(N)
］のボタンと「色の設定」ダイアログ(9)
データソース選択ダイアログのツリービューの「DataSource
」－「OPC1
（
localhost
）」－「MainGroup
」－「Y
流量」から「Cv
」プロパティをドラッグ して，「テキスト」ダイアログの「図形モディファイ」タブの「モディファイ 条件」グループの［条件式(O)
］にドロップすると，そこに「
@Data(“MainGroup.Y
流量.Cv”)
」が自動入力されます。(10)
「<10
」と続けて入力し，［追加(D)
］ボタンを押すと，ダイアログ下部に，定義したモディファイ条件が表示されます（
No.2
）。(11)
「テキスト」ダイアログの［OK
］ボタンを押します。図
3.9.3.-10
「テキスト」ダイアログの「図形モディファイ」タブ● 手順 3 データ文字表示
以下に，
Y
流量のCv
値のデータを文字で表示させる手順を示します。(1)
作画ツールバー内のデータ文字表示プリミティブのツールボタンを押し，グラ フィックウィンドウ上でクリックします。図
3.9.3.-10
データ文字表示プリミティブのツールボタン図
3.9.3.-11
データ文字表示プリミティブ(2)
データ文字表示プリミティブを右クリックし，［プロパティ(P)
］メニューを選 択します。(3)
開いた「データ文字表示」ダイアログの「テキスト」タブで，データ文字表示 プリミティブの大きさを調整してください（フォント:MS
ゴシック，サイ ズ:32
）。(4)
「データ文字表示」タブを開きます。Y
流量のレンジ（0.0
～100.0
）に合わせ，［整数部桁数
(I)
］を「3
」に，［小数部桁数(E)
］を「1
」に，それぞれ，設定し ます。(5)
グラフィックデザイナのメニューバーの［ツール(T)
］－［データソース(T)
］を 選択します。データ文字表示プリミティブのツールボタン
(6)
開いたデータソース選択ダイアログのツリービューの「DataSource
」－「OPC1
（
localhost
）」－「MainGroup
」－「Y
流量」から「Cv
」プロパティをドラッグ して，「データ文字表示」ダイアログの「データ文字表示」タブの［表示デー タ(S)
］にドロップすると，そこに「@Data(“MainGroup.Y
流量.Cv”)
」が自動入 力されます。図
3.9.3.-12
「Cv
」の［表示データ(S)
］へのドラッグ&
ドロップ● 手順 4 矩形バー表示
以下に，
Y
流量のCv
値のデータを矩形バーで表示させる手順を示します。(1)
作画ツールバー内のデータ矩形バー表示プリミティブのツールボタンを押し，グラフィックウィンドウ上の適当な位置で大きさを調整しながらドラッグ＆ド ロップします。
図
3.9.3.-13
データ矩形バー表示プリミティブのツールボタン図
3.9.3.-14
データ矩形バー表示プリミティブ(2)
データ矩形バー表示を右クリックし，［プロパティ(P)
］メニューを選択します。(3)
開いた「データ矩形バー表示」ダイアログの「塗り」タブで，［ベタ塗り色(C)
］ グループの色付きボタンを押し，開いた「色の設定」ダイアログで緑を選び，［
OK
］ボタンを押します。図
3.9.3.-15
「データ矩形バー表示」ダイアログデータ矩形バー表示プリミティブのツールボタン
(5)
開いたデータソース選択ダイアログのツリービューの「DataSource
」－「OPC1
（
localhost
）」－「MainGroup
」－「Y
流量」から「Cv
」プロパティをドラッグ して，「データ文字表示」ダイアログの「データ文字表示」タブの［表示デー タ(S)
］にドロップすると，そこに「@Data(“MainGroup.Y
流量.Cv”)
」が自動入 力されます。［上限値
(M)
］に「100.0
」，［下限値(I)
］に「0.0
」と入力します。図
3.9.3.-16
「Cv
」の「表示データ(S)
」へのドラッグ&
ドロップ● 手順 5 押しボタン表示
以下に，押しボタンを表示させる手順を示します。
(1)
コントロールプリミティブツールバー内の押しボタンプリミティブを選択し，グラフィックウィンドウ上の適当な位置で大きさを調整しながらドラッグ
&
ド ロップします。図
3.9.3.-17
押しボタンプリミティブのツールボタン図
3.9.3.-18
押しボタンプリミティブ(2)
押しボタンプリミティブを右クリックし，［プロパティ(P)
］メニューを選択し ます。(3)
開いた「押しボタン」ダイアログの「機能」タブを開きます。(4)
［機能種別(F)
］に「監視・ログオンウィンドウ呼び出し」を選択します。(5)
［ウィンドウ名(D)
］に「グラフィックウィンドウ」を選択します。(6)
［パラメータ(P)
］に「“window=trend”
」と入力します。(7)
［自ウィンドウで表示する(W)
］をチェックします。押しボタンプリミティブのツールボタン
①「監視・ログオンウィンドウ呼び出し」を選択
②「グラフィックウィンドウ」と入力
④チェックします ③「"window=trend"」と入力
(9)
作画ツールバー内のテキストプリミティブのツールボタンを押し，「トレンド」と入力し，サイズ調整しながらボタンの上に移動します。
(10)
「トレンド」のテキストプリミティブを右クリックし，［プロパティ(P)
］メニューを選択します。
(11)
開いた「テキスト」ダイアログの「テキスト」タブで，テキストプリミティブのフォント，文字の色，背景の色，サイズ，フォントスタイルを調整してくだ さい。
図
3.9.3.-20
押しボタン上のテキストのプロパティ調整(12)
［OK
］ボタンを押します。● 手順 6 ファイル名
ここで一度ファイルを別名で保存します。それには，メニューバーの［ファイル
(F)
］－［名前を付けて保存
(A)
］を選択し，ファイルの場所として次のフォルダを確認 します。32bit OS
の場合C:\Program Files\YOKOGAWA\VDS\Work\HMI\JISSYU\Graphic 32bit OS
の場合C:\Program Files (x86)\YOKOGAWA\VDS\Work\HMI\JISSYU\Graphic
「ファイル名
(N)
」に「maingr
」と指定して保存します。● 手順 7 フェースプレートを貼り付ける
FIC001
のフェースプレートを定義します。・
FIC001
の定義(1)
メニューバーより［挿入(I)
］－［リンクパーツ(N)
］を選択します。(2)
開いたリンクパーツウィンドウの「すべてのフォルダ」ツリービューの「
LinkParts
」－「FacePlate
」－「PAS_POU
」を選択します。図
3.9.3.-21
リンクパーツウィンドウ(3)
リンクパーツウィンドウの「開いているフォルダ:PAS_POU
」ビューより「
PAS_PID
」を選択します。図
3.9.3.-22
リンクパーツウィンドウによるフェースプレートの選択(4)
リンクパーツウィンドウ内の右上部に現れたフェースプレートのプレビューイ メージをドラッグして，グラフィックデザイナのグラフィックウィンドウ上に ドロップします。図
3.9.3.-23
フェースプレートのドラッグ&
ドロップ(5)
リンクパーツウィンドウを閉じます。(6)
フェースプレートを右クリックして［プロパティ］を選択します。(7)
開いた「リンクパーツ:PID
」ダイアログの「データソース展開」タブを選択し ます。図
3.9.3.-24
「リンクパーツ:PID
」ダイアログ(8)
グラフィックデザイナのメニューバーの［ツール(T)
］－［データソース(T)
］を 選択します。(9)
開いたデータソース選択ダイアログのツリービューの「DataSource
」－「OPC1
（
localhost
）」－「FCX01
」－「FIC100
」をドラッグして，「リンクパーツ
:PAS_PID
」ダイアログの「データソース展開」タブの［データソース(D)
］欄へドロップします。
図
3.9.3.-25
「FIC001
」の［データソース(D)
］へのドラッグ&
ドロップ補足
「データソース」欄へドロップできない場合には，「ファイルプロパティ」ダイアログの「属性」タ ブで「データソース展開機能を使用する」ボックスにチェックを入れた上で再び試みてください。
(10)
データソース(D)
に「"FCX01.FIC001"
」が設定されるので，［OK
］ボタンを押 して，データソース選択ダイアログを閉じます。図
3.9.3.-26
「リンクパーツ:PAS_PID
」ダイアログ● 手順 8 アラームサマリ表示
以下に，アラームサマリを表示させる手順を示します。
(1)
作画ツールバー内のメッセージプリミティブのツールボタンを選択し，グラ フィックウィンドウ上に大きさを調整しながらドラッグ＆ドロップします。アラームメッセージがはっきりと表示できるような大きさに設定します。
図
3.9.3.-27
メッセージプリミティブのツールボタン図
3.9.3.-28
メッセージプリミティブメッセージプリミティブのツールボタン
(2)
「メッセージ」プリミティブを選択して右クリックし，「プロパティ(P)
」を開 き，「メッセージ」タブを開きます。［プリミティブ種別(T)
］で「アラームサ マリ」を選択して［OK
］ボタンを押します。図
3.9.3.-29
「メッセージ」ダイアログ● 手順 9 作成画面の確認
メイングラフィック画面に表示させるプリミティブを定義しました。必要に応じて，
テキスト，データ文字表示，バー表示などを移動させて，上書き保存します。
ドキュメント内
TI 34P02K12-01
(ページ 75-93)