メニュー 4.モニタリング画面を作成する 4.2.画像を管理する

4.1.Webブラウザからモニタリング画面を作成する

画面4-1-1.メニュー画面
画面4-1.メニュー画面 		　F&e Web ServerではWebブラウザを使ってモニタリング画面を 作成することができます。
　画面の作成は、はじめに
　　・部品を登録
しておき、
　　・部品を画面に配置
する流れになります。部品は300個まで登録できます。
　部品を配置する画面は 画面1〜画面20までの20画面作成できます。

　Webから作成・閲覧できるモニタリング画面はメニューの 「モニタリング画面(A)」と「モニタリング画面設定(@)」から アクセスして行います。それぞれの画面が「閲覧専用」「閲覧用の画面の作成」を 行う画面になります。

　まずは「モニタリング画面設定」と表示されている個所をクリックして 【画面4-1-2.モニタリング設定初期状態】を表示させます。
画面4-1-2.モニタリング設定初期状態
画面4-1-2.モニタリング設定初期状態

　初めはモニタリング画面に配置すべき部品の設定が行われていないので、 部品の設定を行う必要があります。

　部品の設定は　【部品一覧】ボタン(@)　をクリックすると 表示される【画面4-1-3.部品編集リスト】から行います。

4.1.1.部品を設定する


画面4-1-3.部品編集リスト
画面4-1-3.部品編集リスト 		　画面が表示されると登録されている部品の一覧が表示されます。 初期状態では何も登録されていません。

　部品の登録を行うには追加する部品の種類をリストから選択し、 追加ボタンをクリックして表示される【画面4-1-4.部品の編集】から行います。
　現在利用可能な部品の種類は
1. テキスト
2. 画像
3. インラインフレーム
4. FeWS名称 … ShowName()に対応
5. FeWSサービス状態 … ShowStatus()に対応
6. 信号名称 … FWS->Name()に対応
7. 信号値 … FWS->Data()に対応
8. デジタル出力ボタン … DoButton()に対応
9. [Applet]LED表示 … num.classに対応
10. [Applet]アナログメーター … meter.classに対応
11. [Applet]画像切替え … switchs.classに対応
12. [Applet]塗潰し(棒1) … percent1.classに対応
13. [Applet]塗潰し(棒2) … percent2.classに対応
14. [Applet]塗潰し(円) … percent3.classに対応
15. [Applet]画像加工 … imagefunc.classに対応
16. [Applet]履歴表示 … history.classに対応
17. [Applet]チャート表示 … chart.classに対応
18. [Applet]塗潰し表示 … fill.classに対応
19. [Applet]指針表示 … needle.classに対応
20. [Applet]数値表示 … simpledisp.classに対応
21. [Applet]行灯表示 … andon.classに対応
22. [Applet]コンパス表示 … compass.classに対応
23. [Applet]デジタル出力操作 … switchsOutput.classに対応
24. [Applet]時計 … clock.classに対応
です。
　既に部品が登録されている場合には部品リスト右に表示されている をクリックし、 追加と同様に【画面4-1-4.部品の編集】から編集することができます。
　登録されている部品を削除したい場合には部品リスト右に表示されている をクリックして削除します。 削除確認等は行われず、クリックした時点で削除されますのでご注意下さい。

画面4-1-4.部品の編集
画面4-1-4.部品の編集

画面4-1-5.部品のプレビュー
画面4-1-5.部品のプレビュー

 　新規に部品を追加したり、既存の部品の設定を編集する場合には 【画面4-1-4.部品の編集】から行います。この画面では選択された 部品の種類に合わせた設定が行えます。

　部品の設定は部品の種類により異なるのですが、 部品によっては必ず入力が必要な項目があります。
●[Appletの表記がある部品]で入力が必須な項目
　(1). 部品の大きさ … 部品の大きさを指定(ピクセル単位)
　(2). 対象信号 … 部品上に表示されるデータの対象信号を指定
　(3). 更新間隔 … 部品の表示を更新する間隔を指定
※これらが未入力の場合、部品が正常に表示されません。

　部品で使える画像は【画面4-1.メニュー画面】で【画像管理】と表示されている部分をクリックして表示される 【画面4-2-1.画像一覧画面】から登録します。

　部品の設定が完了したら更新ボタンをクリックして部品を登録します。 登録が完了すると、以降は【プレビュー】欄に作成した部品の プレビューが表示されるようになります。

4.1.2.画面の設定を行う


　部品を作成したら、作成した部品を画面に配置する設定に移ります。 メニュー画面や【画面4-1-3.部品編集リスト】で「モニタリング画面編集」と 表示されている部分をクリックして【画面4-1-5.画面の設定】を表示させます。
画面4-1-6.画面の設定
画面4-1-6.画面の設定

続いて、編集を行う画面をリストから選択し表示ボタンをクリックして 画面の設定を読込ませます(@)。
※初期状態では登録が行われていないので何も表示されません。
　設定を読込ませたら A 〜 D の設定を行います。
それぞれが画面全体の
・コメント … A
・更新間隔 … B
・背景画像 … C
・背景色 … D
の設定になります。

　コメント(A)には画面のコメントを入力します。
コメント未入力の場合は画面設定の保存を行いませんので コメントは必ず入力する必要があります 。

　更新間隔(B)は画面全体の再読み込み間隔を指定する値になります。 JavaAppletを使った部品([Applet]と記述されている部品)を配置する場合には 入力しないで下さい。

　背景画像(C)はhtml/images以下に置かれた画像(GIFまたはJPEG)を指定します。 背景画像有効にするには左のチェックボックスにチェックを入れておく必要があります。

　背景色(D)はRGBを16進数6桁で指定して下さい。 指定する色が分からない場合には【色指定】と表示されている部分をクリックすると 色選択用のパレットが開きますので、それをご利用ください。
パレットのは選択したい色の部分をクリックすることで値のセットが行えます。
背景色の設定を有効にするには左のチェックボックスにチェックを入れておく必要があります。

　ここまでの入力が完了したら更新ボタンを押して設定を保存します。

　設定した画面を削除する場合には、コメント(A)を未入力状態にして保存ボタンをクリックして行います。

4.1.3.部品を配置する


　画面全体の設定を行ったら、画面に部品を配置していきます。
画面4-1-7.部品の配置
画面4-1-7.部品の配置
配置する部品を@(登録済みの部品が表示されます)から選択します。
選択リスト左端の"[]"で括られた個所には部品の種類を表すアルファベットが付けられます。
内容は
　[ T ]…テキスト、[ I ]…画像、[ S ]…信号名称、[ V ]…信号値、　[ B ]…デジタル出力ボタン、[ A ]…JavaApplet
になります。

　部品を選択したら配置したい場所をAの枠で括られた領域内でマウスをクリックして 決定します。
クリックした座標がBにセットされます(Bからの入力も可能です)。 部品の選択、座標の決定が完了したらその部品の管理番号(E)を選択し 更新ボタンをクリックして部品配置を保存します。
部品の管理番号は各画面毎に1〜100まで設定でき、 1つの管理番号に対して1つの部品を登録できます。
※ 同じ部品を複数配置する場合は別の管理番号から同一部品を指定します。
※ 設定を変更し、登録する際には必ず管理番号を確認してください。

　部品の配置登録が完了すると配置設定一覧に配置登録を行った部品が 表示され、同時に右の画面に実際の部品が表示されます。

　配置登録した部品や配置した場所を変更するには、プレビュー表示されている 部品下の(C)をクリックするか、部品がリスト表示されている場所の 番号が表示されている部分(C)をクリックしてE,@,Bに値をセットして行います。
　部品の内容を変更する場合には、部品下の(D) をクリックするか、部品がリスト表示されている場所の右端に表示されている (D)をクリックして 【画面4-1-4.部品の編集】から行います。

4.1.4.作成した画面を閲覧する


画面4-1-8.モニタリング画面
画面4-1-8.モニタリング画面 		　上記手順を経て作成されたモニタリング画面は 【画面4-1-1.インストール後のメニュー画面】で「モニタリング画面」と 表示されている部分をクリックして表示される 【画面4-1-8.モニタリング画面】から閲覧できます。

　画面が表示された時点では画面には表示を行う画面の選択リストのみが 表示されます。この中からモニタリングを行いたい画面を選択し、 表示ボタンを押すことで作成したモニタリング画面を閲覧することができます。 リストには設定が行われているモニタリング画面のみが表示されます。


参考.作成した画面へのリンクを作成する

　作成したモニタリング画面はmenu.htmlなどの任意のHTMLファイルから リンクを作成し、直接目的のモニタリング画面を呼び出すようにすることができます。 各画面毎に以下のURLを呼び出してください。
(画面 1) http://【F&e Web ServerのIPアドレス】/cgi-bin/monitor.php?id=0
(画面 2) http://【F&e Web ServerのIPアドレス】/cgi-bin/monitor.php?id=1
(画面 3) http://【F&e Web ServerのIPアドレス】/cgi-bin/monitor.php?id=2
(画面 4) http://【F&e Web ServerのIPアドレス】/cgi-bin/monitor.php?id=3
(画面 5) http://【F&e Web ServerのIPアドレス】/cgi-bin/monitor.php?id=4
(画面 6) http://【F&e Web ServerのIPアドレス】/cgi-bin/monitor.php?id=5
(画面 7) http://【F&e Web ServerのIPアドレス】/cgi-bin/monitor.php?id=6
(画面 8) http://【F&e Web ServerのIPアドレス】/cgi-bin/monitor.php?id=7
(画面 9) http://【F&e Web ServerのIPアドレス】/cgi-bin/monitor.php?id=8
(画面10) http://【F&e Web ServerのIPアドレス】/cgi-bin/monitor.php?id=9
…
(画面20) http://【F&e Web ServerのIPアドレス】/cgi-bin/monitor.php?id=19
またid=0の後に&nomenu=1を付けると画面の選択リストと「メニューに戻る」のリンクを表示しないようにできます。
(画面 1 ※メニューなし) http://【F&e Web ServerのIPアドレス】/cgi-bin/monitor.php?id=0&nomenu=1


メニュー 4.モニタリング画面を作成する 4.2.画像を管理する
CONTEC.CO.,Ltd.