1

WebVisuWebVisu設計・作画マニュアル設計・作画マニュアル

2

Web-visualizationとは

プログラム

750-841750-871750-873

グラフ表示

数値表示

ランプ表示

数値設定

ON/OFF設定

CSVﾌｧｲﾙ生成

グローバル変数あるいは％I、％Q、％Mの絶対アドレス

数値書込みと読み込み、

XML、JAVAｱﾌﾟﾚｯﾄ

WAGO-IO-PRO CAA(Codesys)

Web領域

ﾌﾟﾛｸﾞﾗﾑ領域

Web_visualizationとは、750　Ethernetｺﾝﾄﾛｰﾗにおいて、Webr領域にXMLﾌｧｲﾙやJAVAなどを書き込むことによってデータのﾋﾞｼﾞｭｱﾙ表示を可能にする機能です。

XMLﾌｧｲﾙやJAVAプログラムはWAGO-IO-PRO CAA（Codesys)で作図することによって自動生成されます。

つまりWAGO-IO-PRO CAAだけで内部ロジックとブラウザに表示させる画面の両方を作成することができます。

3

WAGO-IO-PRO CAA(Codesys)

WebVisu.htm

制御プログラム

Web-Visu画面

実行ファイルXML, HTML

WebVisu.htm FTP接続で転送

画像ファイルBitmap, GIF,Jpg

アプレットXML記述データ

ｸﾞﾛｰﾊﾞﾙ変数

ブラウザ起動

Web-visualizationの手順　　

①プログラム、画面作成

①ﾌﾟﾛｸﾞﾗﾑと画面を作成する

③ブラウザで起動

　　・%I　%Q　%Mおよびｸﾞﾛｰﾊﾞﾙ変数を使う　　・必要な場合はTask_configuration　　　を設定する。②必要なファイルの書き換え　　・日本語表示にはWeb_visu書き換えが必要　　・通信パラメータをWeb_visuで設定する③ブラウザで起動　　・立ち上がりはJAVA起動のため時間がかかる　　・JAVAは最新版をインストールしておく

②必要なファイルを　　転送・書き換え

750-841750-871750-873

4

Web-visualization機能使用上の注意

　　　　　①プログラムとWeb-visualization機能のバランスを検討する

　　⇒プログラム本体とWeb-visualization機能のバランスをとるためにTask_configuration機能を活用する　　　　→　メインプログラムのサイクル周期は最速（free wheel状態)になっていますが、これをcyclicに　　　　　　設定することによってCPUパワーの余裕を作り、通信がスムーズに行われるよう調整します。

　　⇒プログラムの動作をなるべく軽くする　　　　→　実数やダブルワードなどの演算・表示をなるべく減らすようにします。　　　⇒パソコンからI/Oシステムにアクセスする周期を調整する　　　　→ 　Webvisu.htm内に通信周期を決めるパラメータがありますので、この値を調整します。　　　　　　　　　②日本語表示用のパラメータを変更したWebvisu.htmを再転送するのを忘れないこと

　　⇒日本語の表示を可能にするためには、Webvisu.htm内に、日本語表示用のパラメータを設定します。

　　⇒新しくプログラムを書き直した時には再度Webvisu.htmを転送することが必要です。変更作成　　　したWebvisu.htmをプログラムフォルダ内に入れておくと便利です。

　　　　　③接続するパソコン側の注意

　　⇒表示するパソコンに組み込まれているJAVAは最新のものをセットアップしておく　　　　→　最新のJAVAは　http://java.com/ja/　からダウンロードできます。これをインストールしてください。

　 ⇒作成した画面はXMLファイル形式で生成されますので、ブラウザのスクロールバーは無効になります。

5

日本語表示パラメータの設定 – 1

WebVisuはそのままでは日本語表示をすることができません。日本語を表示するためにWebVisu.htmファイルにフォントの指定を追記します。

また、更新間隔などのパラメータもこのWebVisu.htmファイルに記載されています。

日本語表示のためのパラメータなどはデフォルトで転送されるWebVisu.htmファイルを編集しておくと便利です。

デフォルトで転送されるWebVisu.htmは C:¥Program Files¥WAGO Software¥CoDeSys V2.3¥Visu (標準でインストールされた場合)に格納されています。

WebVisu.htmを右クリックし、WordPadで開きます。

6

日本語表示パラメータの設定 – 2

WebVisu.htmをWordPadで開いたら、下段に <param name=“COMPRESSEDFILES” value=“TRUE”> の記述があるので、下に続けて下記青字のように追記します。

追記が完了したら『ファイルを上書き保存』してWordPadを終了してください。

この作業が完了すると次回のダウンロードの時から自動的にこのファイルがターゲットへコピーされます。

<param name="UPDATETIME" value="200">

<param name="USECURRENTVISU" value="FALSE">

<param name="USEFIXSOCKETCONNECTION" value="FALSE">

<param name="USEURLCONNECTION" value="TRUE">

<param name="COMPRESSEDFILES" value="TRUE">

<param name="ENCODINGSTRING" value="MS932">

<param name="TOOLTIPFONT" value="Dialog">

<param name="PLCSTATEINTERVAL" value="200">

</APPLET>

</BODY>

WebVisu.htm に以下青字部分を追記

…

パソコンから通信リクエスト間隔をm秒単位で設定します

複数のパソコンからブラウザ接続する場合には、この値を１秒以上に設定しておかないとブラウザに表示されるデータ更新が極端に遅くなることがあります。

<追記> ブラウザの日本語表記を指定します。

<追記> ツールチップ用のフォントを指定します。

<追記> 750-841のプログラム動作領域とWEB領域の　　　 データ更新間隔を指定します。

7

設定ファイルのダウンロード

日本語表示パラメータの設定　などで設定したパラメータをターゲットへダウンロードする方法です。画像ファイルなどもこの方法でダウンロードします。

対象のターゲットにログイン後、トップメニュー – Online – Write file to PLC を選択し、転送したいファイルを選択して開くボタンをクリックします。

8

Web-visualizationの準備（Target Setting)

Codesysを開き、Preference - Target Settings – Visualization を開くと下図のような画面が出てきます。

設定項目の中のWeb Vizualization チェックボックスを有効にします。

チェックボックスを有効にする。

Display width in pixcel : WebVisu領域の幅指定 (px)Display height in pixcel : WebVisu領域の高さ指定(px)

チェックボックスを入れるとWebVisuファイルを圧縮して転送されます。

9

新規画面の作成

最初のページの名前は　PLC_VISU　を設定してください。このページが最初に表示されるメイン画面となります。

Visualizationを右クリックして　Add　Objectを選びます。

最初のメイン画面名、PLC_VISU　をタイプします。

Visualization タグを選択します

※　メイン画面以外は任意のファイル名が可能

10

オブジェクト移動最小単位の設定

画面に貼り付けるグラフや文字の要素の最小移動単位を決定します。

PLC_VISUの画面上で右クリックをして[Settings]を選択「します。

[Grid]を選択してSizeを　1　に設定してください。グラフや文字の最小移動単位を最小の「1」にします。これできめ細かな配置が可能です。選択後の移動はマウスドラッグあるいはパソコンの矢印キーが使えます。

11

画面作成のツールバー

Codesys画面上部にあるツールバーの内訳は下記のようになります。

デジタルの状態表示、アナログ値の設定ウィンドウ、アドレスを指定しなければ単純なテキストボックスとしても使えます。

範囲指定するための選択ツール

単純な線を描くためのツール

画面中にビットマップ図などを貼り付ける時に使う範囲指定ツール

デジタル入力するための押ボタン

アナログ入力するためのスライドスイッチ

アナログメータ

トレンドグラフ（チャート表示） アナログ表示用バーグラフ

12

テキストボックスの作成 (Text)

下図のような設定をするとテキストボックスに各種データを表示することができます。

Font を押して日本語フォントを選択し、文字セットを日本語にセットします。

プログラム上の変数などを割り当てる場合は使用する変数によって、%d(10進数),%x(16進数),%s(STRING)など…を入力します。文字列を入力するとテキストボックスとして使用することができます。

詳細情報は？をクリックすることによって確認することができます。

13

テキストボックスの作成 (Colors)

Colors 項目はテキストボックスの色に関係するパラメータを入力することができます。

Variables項目のChange Color変数のステートによって色を変えることができます。

Change Color : OFFの場合はColorで設定された色

Change Color : ONの場合はAlarm Colorで設定された色

に変化します。

Change Color : OFFの場合

Change Color : ONの場合

このチェックボックスをONにした場合、背景色が透過色(無色)になります。

14

テキストボックスの作成 （Motion absolute)

Motion absolute 項目は設定することによって変数の値分テキストボックスを移動させることができます。

X-Offset: 　X軸の移動量をﾋﾟｸｾﾙ値で指定します。

Y-Offset:　Y軸の移動量をﾋﾟｸｾﾙ値で指定します。

Scale:　大きさを×10%値で指定します。(100%=1000)

Angle:　回転角度を指定します。(度)

15

テキストボックスの作成 （Motion relative)

Motion relative 項目は設定することによって変数の値によってテキストボックスのサイズを変えることができます。

Left edge: 　左端を変数の値(ﾋﾟｸｾﾙ値)分拡張します。

Top edge: 　上端を変数の値(ﾋﾟｸｾﾙ値)分拡張します。

Right edge: 　右端を変数の値(ﾋﾟｸｾﾙ値)分拡張します。

Bottom edge: 　下端を変数の値(ﾋﾟｸｾﾙ値)分拡張します。

16

テキストボックスの作成 （Variables)

Variables 項目はテキストボックスの動作に関係するパラメータを入力することができます。

Colors 項目で設定したAlarm Colorに色を変更するための変数を指定します。値がTRUEで Alarm Colorに変わります。

ここに入力した変数の値を Text 項目のContent の指定値に従って表示することができます。

図のように直接アドレスを指定することもできます。

設定されたBOOL値が【TRUE】の場合にテキストボックスは非表示になります。

17

テキストボックスの作成 (Input)

Input 項目はテキストボックスの入力に関係するパラメータを入力することができます。

Toggle Variable : トグルスイッチになります。一度クリックすると設定されたデバイスがONになり、もう一度クリックするとOFFになります。

Tap variable : プッシュスイッチになります。クリックされているときのみ設定されたデバイスがONになります。

Zoom to vis : 画面切り替えスイッチになります。設定値は切り替え先の画面名を入力してください。

Text input of variable ‘Textdisplay’ :テキストボックスにWebブラウザから値を書き込みたい時に使用します。Min: と Max: は入力する数値のリミットを設けることができます。

Dialog title : Text input of variable ‘Textdisplay’をONにした場合で、システムキーボードをだした時のタイトルの設定です。

18

テキストボックスの作成 (Zoom to vis)

Zoom to vis 項目は対象のテキストボックスがクリックされたときに設定された画面にジャンプさせることができます。

クリックで画面切り替え

ここに切り替え先の画面の名称を入力します。

19

テキストボックスの作成 (Text input of variable ‘Textdisplay’)

画面上のテキストボックスに数値及びストリングデータを入力したい場合に使用します。

入力の方式を選択します。

　Text : ｷｰﾎﾞｰﾄﾞから直接入力　Numpad : 画面上のﾋﾞｼﾞｭｱﾙﾃﾝｷｰから入力　Keypad : 画面上のﾋﾞｼﾞｭｱﾙｷｰﾎﾞｰﾄﾞから入力

Keypadを選択した場合、画面上にﾋﾞｼﾞｭｱﾙｷｰﾎﾞｰﾄﾞが表示されます。

入力値のリミット値を設定します。

20

テキストボックスの作成 (Text for tooltip)

Text for tooltip 項目は設定されたテキストボックスにカーソルを合わせると、Cntent : に設定された値がツールチップで表示されます。

この項目は日本語に対応していないため日本語を入力すると文字化けをしますが、ターゲットへダウンロードすると正常に表示されます。

21

データテーブルの作成

ツールバー上のTableを選択するとデータアレイの中身をテーブル方式で表示することができます。

スクロールバーを使用してデータをスクロールして表示できます。

22

データテーブルの作成

データテーブルの作成のオプションは下図のとおりです。

ここにデータアレイの変数名を入力します。

①ここをクリックして・・・

②>ボタンをクリックする。

ダブルクリックで列の名前、フォントが変更できます。

Column header : 列の名前Column width : データセルの幅設定

23

トレンドグラフの作成

任意の変数を指定してトレンドグラフを作成することができます。トレンドの収集はWebVisu画面を開いている間のみとなっています。

24

トレンドグラフの作成

トレンドグラフの設定は下記の各項目になっています。

時間軸(X)の設定をします。

要素軸(Y)の設定をします。

計測したい変数を指定します。

25

トレンドグラフの作成

Horizontal axisの設定は次のとおりになっています。

時間軸の設定の大目盛りの区切りを設定します。Visibleのチェックをはずすと非表示になります。

凡例の表示フォーマット、刻みを設定します。

HH :24時間表記(時)hh : 12時間表記(時)

mm : 分

ss : 秒

Duration :　トレンドグラフ全体のｻﾝﾌﾟﾙ時間を入力します。

Main scale : 　時間軸の中目盛りの間隔を入力します。

Sub scale :　時間軸の小目盛りの間隔を入力します。

Degree of accuracy :　サンプリング周期(何秒に一度とるか)を　設定します。　

26

トレンドグラフの作成

Vertcal axsis の設定は次のとおりになっています。

要素軸の設定の大目盛りの区切りを設定します。Visibleのチェックをはずすと非表示になります。

凡例のフォント、刻みを設定します。

要素軸のデータのスケーリングをする項目です。

Start :最も小さいのデータの値を入力します。End : 最も大きいデータの値を入力します。Main scale : 中目盛りの区切りを設定します。Sub scale : 小目盛りの区切りを設定します。

27

トレンドグラフの作成

Chosse variableの詳細設定は次のようになっています。

ADD ボタンを押してからVariable 部に変数を入力します。その後、Color,Linetypeを選択し、よければOKを押して確定します。

変数を削除する場合は Variable部で削除する変数を選択し、Deleteボタンをクリックします。

28

スクロールバーの作成

ツールバー上のScroll barを選択すると指定した変数の値をスクロールバーで変更することができます。

スクロールバーの移動で設定された変数の値を変化させることができます。

29

スクロールバーの作成

スクロールバーの作成のオプションは下記の通りになります。

Minimum value : 　ｽｸﾛｰﾙﾊﾞｰが一番下(左)の時の値を設定します。

Slider :　ｽｸﾛｰﾙﾊﾞｰで変化させたい変数を設定します。

Maximum value :

　ｽｸﾛｰﾙﾊﾞｰが一番上(右)の時の値を設定します。

Invisble :　ここに設定された変数が【TRUE】の時にｽｸﾛｰﾙﾊﾞｰ　が非表示になります。

30

メーターの作成

ツールバー上のMeterを選択すると指定した変数の値をアナログメーターで表示することができます。

31

メーターの作成

ツールバー上のMeterを選択すると指定した変数の値をアナログメーターで表示することができます。

Variable/Scale ボタンを押すと変数の定義及びスケーリングの設定ができます。

Scale start : メータの開始部分の値の設定です。Scale end : メータの終了部分の値の設定です。Main scale : 大区分の目盛りの割り振りです。Sub scale : 小区分での目盛りの割り振りです。Unit : メーターの名前の設定です。　Font selectionでフォント指定ができます。Scale format : 表示する目盛りの値のフォーマットを設定します。　非表示にしたい場合は『%』のみを設定します。Variable : メーターに値を表示する変数を設定します。Invisible* : ﾒｰﾀｰを非表示にしたい時に指定します。　値がTRUEで非表示になります。

*CoDeSys Ver2.3.9.22から追加された機能です。

32

棒グラフの作成

ツールバー上のBar Displayを選択すると指定した変数の値を棒グラフで表示することができます。

33

棒グラフの作成

Bar Displayの設定は下記のようになっています。

読み込む変数が設定された値より大きく(小さく)なった場合にAlarm Colorに色を変化させることができます。

34

棒グラフの作成

Bar Displayの設定は下記のようになっています。

Orientation : 棒グラフの向きを指定できます。　Horizontal : 水平向きの棒グラフになります。　Vertical : 垂直向きの棒グラフになります。

Running direction : 　棒グラフのスタートの位置を指定できます。　HorizontalとVerticalで表記が変わります。

Use color areas :　変数の値によって色を変えたい場合に指定します。　チェックをON後、 Color areasボタンで指定します。

Variable / Scale :　棒グラフに表示する変数の指定、　表示フォーマットの設定ができます。

　詳細はメーターの作成

*CoDeSys Ver2.3.9.22から追加された機能。TRUEで棒グラフが非表示になります。

内の項目をご参照ください。

35

ヒストグラムの作成

ツールバー上のHistogramを選択すると指定した変数の値をヒストグラムで表示することができます。変数はデータアレイで指定します。

36

ヒストグラムの作成

ヒストグラムの作成のオプションは下記のとおりです。

Presentation : ヒストグラムの種類を指定します。　Barchart : 棒グラフで表示します。　Lines : ピーク値を線で表示します。　Curve : 折れ線グラフで表示します。

データアレイの変数名を入力します。(最後の［*］は入力しない)

Arraybegin : 　ヒストグラムに表示するアレイデータの開始値を入力します。Arrayend : 　ヒストグラムに表示するアレイデータの終了値を入力します。Barwidth :　ヒストグラムのバーの幅を入力します。

*CoDeSys Ver2.3.9.22から追加された機能。TRUEでﾋｽﾄｸﾞﾗﾑが非表示になります。

37