2.3.サンプル画面の編集
2.2.1〜2.2.3のいずれかの方法でサンプル画面のファイル(sample1.php)をPCにダウンロードしました。
このファイルを編集してサンプル画面のカスタマイズを行います。
−ご注意−
Webブラウザからではなく、
エクスプローラー/ftpコマンドを使ってPHPファイルをダウンロードした場合
、
編集する sample1.php の改行コードはLF(0x0a)、日本語文字コードはSJIS(Shift-JIS)になります。
この形式のテキストファイルはWindowsXP付属のメモ帳、ワードパッドでは
編集できませんので、
これら以外の編集可能なテキストエディタをご用意ください。
HTMLファイルは改行コードはCR+LF(0x0d+0x0a)、
日本語文字コードはSJIS(Shift-JIS)ですので、
WindowsXP付属のメモ帳、ワードパッドでも編集できます。
Webブラウザからダウンロードした場合には改行コードがCR+LFに自動変換されますので
PHP/HTMLのどちらでもWindowsXP付属のメモ帳、ワードパッドでも編集できます。
|
sample1.phpは以下のようになっています。
001 #!/usr/local/bin/php
002 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
003
004 <HTML>
005 <HEAD>
006 <META HTTP-EQUIV="Content-Type" CONTENT="text/css">
007 <LINK HREF="/css/style5.css" REL="stylesheet" TYPE="text/css">
008 <LINK REL="SHORTCUT ICON" HREF="/favicon.ico">
009 <SCRIPT LANGUAGE="JavaScript" SRC="/dispgif.js"></SCRIPT>
010 <TITLE>サンプル画面1</TITLE>
011 </HEAD>
012
013 <!--
014 <?
015 ///// F&eWS定義部 ここから(変更しないで下さい) /////
016 include("include/fws_monitor.inc");
017 include("include/common.def");
018 include("include/fws_device.cls");
019 include("include/fws_signal.cls");
020 include("include/fws_plc.cls");
021 $fws_device = new fws_dev( $DevInfoFile );
022 $fws_plc = new fws_plc( );
023 for( $i = 0; $i < 8 ; $i++ ){
024 $FWS[$i] = new fws_signal( $fws_device->device_id[$i] );
025 if( $fws_device->category_id[$i] > 0 && $fws_device->category_id[$i] < 4 ){
026 $FWS[$i]->getDataArray();
027 }
028 }
029 // PLCの情報を読込み
030 for( $i = 0x10; $i < 0x20 ; $i++ ){
031 $FWS["P".($i-0x10)] = new fws_signal( $i );
032 if( $FWS["P".($i-0x10)]->read_size > 0 ){
033 $FWS["P".($i-0x10)]->getDataArray();
034 }
035 }
036 // 仮想デバイスの情報を読込み
037 for( $i = 0x20; $i < 0x24 ; $i++ ){
038 $FWS["U".($i-0x20)] = new fws_signal( $i );
039 if( $FWS["U".($i-0x20)]->read_size > 0 ){
040 $FWS["U".($i-0x20)]->getDataArray();
041 }
042 }
043 ///// F&eWS定義部 ここまで(変更しないで下さい) /////
044 ?>
045 -->
046
047 <BODY BGCOLOR="#ddddff">
048
※※(1)※※
049 <H1>F&eITデバイスモニタリング例【<? ShowName(); ?>】</H1>
050
051 <A HREF="/menu.html">メニューに戻る</A>
052 <BR><BR>
※※(2)※※
053 <? ShowStatus(); // FeWS起動状態の表示 ?>
054 <BR>
055
056 <TABLE CLASS="inner" WIDTH="100%">
057 <TR>
058 <TD CLASS="inner" VALIGN="top" WIDTH="35%">
059 <TABLE CLASS="inner" WIDTH="100%">
060 <!-- 信号名称の表示 -->
061 <TR>
062 <TD BGCOLOR="yellow" ALIGN="center">
※※(3)※※
063 <? $DevId = 2; $Ch = 0; $Type = 0; ?>
064 <B><? $FWS[$DevId]->Name( $Ch, $Type ); ?></B>
065 </TD>
066 <TD BGCOLOR="yellow" ALIGN="center">
067 <B>
※※(4)※※
068 <? $DevId = 2; $Ch = 1; $Type = 0; ?>
069 <B><? $FWS[$DevId]->Name( $Ch, $Type ); ?></B>
070 </TD>
071 </TR>
072 <!-- デジタル表示 -->
073 <TR>
074 <TD CLASS="inner" ALIGN="center">
※※(5)※※
075 <? $DevId = 2; $Ch = 0; $Type = 0; ?>
076 <APPLET CODEBASE="/class" CODE="num.class" width="100" height="32">
077 <PARAM NAME="interval" VALUE="1">
078 <PARAM NAME="max" VALUE="8">
079 <PARAM NAME="min" VALUE="0">
080 <PARAM NAME="error_max_num" VALUE="3">
081 <PARAM NAME="fraction_digits" VALUE="3">
082 <PARAM NAME="fore_color" VALUE="#5555DD">
083 <PARAM NAME="back_color" VALUE="#000000">
084 <? printf("<PARAM NAME=\"signal[1]\" VALUE=\"%d-%d\">\n", $DevId, $Ch ); ?>
085 </APPLET>
086 </TD>
087 <TD CLASS="inner" ALIGN="center">
※※(6)※※
088 <? $DevId = 2; $Ch = 1; $Type = 0; ?>
089 <APPLET CODEBASE="/class" CODE="num.class" width="100" height="32">
090 <PARAM NAME="interval" VALUE="1">
091 <PARAM NAME="max" VALUE="8">
092 <PARAM NAME="min" VALUE="0">
093 <PARAM NAME="error_max_num" VALUE="3">
094 <PARAM NAME="fraction_digits" VALUE="3">
095 <PARAM NAME="fore_color" VALUE="#DD5555">
096 <PARAM NAME="back_color" VALUE="#888888">
097 <? printf("<PARAM NAME=\"signal[1]\" VALUE=\"%d-%d\">\n", $DevId, $Ch ); ?>
098 </APPLET>
099 </TD>
100 </TR>
101 <!-- Fillメータ表示(棒) -->
102 <TR>
103 <TD CLASS="inner" ALIGN="center">
※※(7)※※
104 <? $DevId = 2; $Ch = 0; $Type = 0; ?>
105 <APPLET CODEBASE="/class" CODE="percent2.class" width="100" height="50">
106 <PARAM NAME="interval" VALUE="1">
107 <PARAM NAME="max_limit" VALUE="8">
108 <PARAM NAME="min_limit" VALUE="0">
109 <PARAM NAME="num_show" VALUE="1">
110 <PARAM NAME="error_max_num" VALUE="3">
111 <PARAM NAME="fore_color" VALUE="#0000ee">
112 <PARAM NAME="fore_color2" VALUE="#000088">
113 <PARAM NAME="back_color" VALUE="#DDDDFF">
114 <PARAM NAME="font_size" VALUE="12">
115 <? printf("<PARAM NAME=\"signal[1]\" VALUE=\"%d-%d\">\n", $DevId, $Ch ); ?>
116 </APPLET>
117 </TD>
118 <TD CLASS="inner" ALIGN="center">
※※(8)※※
119 <? $DevId = 2; $Ch = 1; $Type = 0; ?>
120 <APPLET CODEBASE="/class" CODE="percent2.class" width="100" height="50">
121 <PARAM NAME="interval" VALUE="1">
122 <PARAM NAME="max_limit" VALUE="8">
123 <PARAM NAME="min_limit" VALUE="0">
124 <PARAM NAME="num_show" VALUE="1">
125 <PARAM NAME="error_max_num" VALUE="3">
126 <PARAM NAME="fore_color" VALUE="#ee0000">
127 <PARAM NAME="fore_color2" VALUE="#880000">
128 <PARAM NAME="back_color" VALUE="#DDDDFF">
129 <PARAM NAME="font_size" VALUE="12">
130 <? printf("<PARAM NAME=\"signal[1]\" VALUE=\"%d-%d\">\n", $DevId, $Ch ); ?>
131 </APPLET>
132 </TD>
133 </TR>
134 <!-- Fillメータ表示(円) -->
135 <TR>
136 <TD CLASS="inner" ALIGN="center">
※※(9)※※
137 <? $DevId = 2; $Ch = 0; $Type = 0; ?>
138 <APPLET CODEBASE="/class" CODE="percent3.class" width="100" height="100">
139 <PARAM NAME="interval" VALUE="1">
140 <PARAM NAME="max_limit" VALUE="8">
141 <PARAM NAME="min_limit" VALUE="0">
142 <PARAM NAME="num_show" VALUE="1">
143 <PARAM NAME="error_max_num" VALUE="3">
144 <PARAM NAME="fore_color" VALUE="#0000ee">
145 <PARAM NAME="fore_color2" VALUE="#000088">
146 <PARAM NAME="back_color" VALUE="#DDDDFF">
147 <PARAM NAME="font_size" VALUE="12">
148 <? printf("<PARAM NAME=\"signal[1]\" VALUE=\"%d-%d\">\n", $DevId, $Ch ); ?>
149 </APPLET>
150 </TD>
151 <TD CLASS="inner" ALIGN="center">
※※(10)※※
152 <? $DevId = 2; $Ch = 1; $Type = 0; ?>
153 <APPLET CODEBASE="/class" CODE="percent3.class" width="100" height="100">
154 <PARAM NAME="interval" VALUE="1">
155 <PARAM NAME="max_limit" VALUE="8">
156 <PARAM NAME="min_limit" VALUE="0">
157 <PARAM NAME="num_show" VALUE="1">
158 <PARAM NAME="error_max_num" VALUE="3">
159 <PARAM NAME="fore_color" VALUE="#ee0000">
160 <PARAM NAME="fore_color2" VALUE="#880000">
161 <PARAM NAME="back_color" VALUE="#DDDDFF">
162 <PARAM NAME="font_size" VALUE="12">
163 <? printf("<PARAM NAME=\"signal[1]\" VALUE=\"%d-%d\">\n", $DevId, $Ch ); ?>
164 </APPLET>
165 </TD>
166 </TR>
167 <!-- 画像表示 -->
168 <TR>
169 <TD CLASS="inner" ALIGN="center">
※※(11)※※
170 <? $DevId = 2; $Ch = 0; $Type = 0; ?>
171 <APPLET CODEBASE="/class" CODE="imagefunc.class" width="100" height="80">
172 <PARAM NAME="interval" VALUE="1">
173 <PARAM NAME="max_limit" VALUE="8">
174 <PARAM NAME="min_limit" VALUE="0">
175 <PARAM NAME="num_show" VALUE="1">
176 <PARAM NAME="error_max_num" VALUE="3">
177 <PARAM NAME="fore_color" VALUE="#0000AA">
178 <PARAM NAME="back_color" VALUE="#DDDDFF">
179 <PARAM NAME="image" VALUE="photo.gif">
180 <PARAM NAME="func_id" VALUE="2">
181 <PARAM NAME="font_size" VALUE="12">
182 <? printf("<PARAM NAME=\"signal[1]\" VALUE=\"%d-%d\">\n", $DevId, $Ch ); ?>
183 </APPLET>
184 </TD>
185 <TD CLASS="inner" ALIGN="center">
※※(12)※※
186 <? $DevId = 2; $Ch = 1; $Type = 0; ?>
187 <APPLET CODEBASE="/class" CODE="imagefunc.class" width="100" height="80">
188 <PARAM NAME="interval" VALUE="1">
189 <PARAM NAME="max_limit" VALUE="8">
190 <PARAM NAME="min_limit" VALUE="0">
191 <PARAM NAME="num_show" VALUE="1">
192 <PARAM NAME="error_max_num" VALUE="3">
193 <PARAM NAME="fore_color" VALUE="#AA0000">
194 <PARAM NAME="back_color" VALUE="#DDDDFF">
195 <PARAM NAME="image" VALUE="photo.gif">
196 <PARAM NAME="func_id" VALUE="1">
197 <PARAM NAME="font_size" VALUE="12">
198 <? printf("<PARAM NAME=\"signal[1]\" VALUE=\"%d-%d\">\n", $DevId, $Ch ); ?>
199 </APPLET>
200 </TD>
201 </TR>
202 <!-- メータ表示 -->
203 <TR>
204 <TD BGCOLOR="yellow" COLSPAN="2" ALIGN="center">
※※(13)※※
205 <? $DevId = 2; $Ch = 2; $Type = 0; ?>
206 <B><? $FWS[$DevId]->Name( $Ch, $Type ); ?></B>
207 </TD>
208 </TR>
209 <TR>
210 <TD CLASS="inner" COLSPAN="2" ALIGN="center">
※※(14)※※
211 <APPLET CODEBASE="/class" CODE="meter.class" width="100" height="80">
212 <PARAM NAME="interval" VALUE="1">
213 <PARAM NAME="max_limit" VALUE="10">
214 <PARAM NAME="min_limit" VALUE="0">
215 <PARAM NAME="max" VALUE="5">
216 <PARAM NAME="min" VALUE="0">
217 <PARAM NAME="num_show" VALUE="1">
218 <PARAM NAME="error_max_num" VALUE="3">
219 <PARAM NAME="fore_color" VALUE="#FFFFFF">
220 <PARAM NAME="back_color" VALUE="#226622">
221 <PARAM NAME="font_size" VALUE="12">
222 <? printf("<PARAM NAME=\"signal[1]\" VALUE=\"%d-%d\">\n", $DevId, $Ch ); ?>
223 </APPLET>
224 </TD>
225 </TR>
226 </TABLE>
227 </TD>
228 <TD CLASS="inner" VALIGN="top" WIDTH="35%" ALIGN="center">
229 <B>
※※(15)※※
230 <? $DevId = 2; $Ch = 0; $Type = 0; ?>
231 <? $FWS[$DevId]->Name( $Ch, $Type ); ?>〜
232 <? $FWS[$DevId]->Name( $Ch+2, $Type ); ?>
233 </B><BR><BR>
234 <!-- 履歴表の表示 -->
※※(16)※※
235 <APPLET CODEBASE="/class" CODE="history.class" width="200" height="80">
236 <PARAM NAME="interval" VALUE="5">
237 <PARAM NAME="max" VALUE="5">
238 <PARAM NAME="min" VALUE="0">
239 <PARAM NAME="point_num" VALUE="5">
240 <PARAM NAME="point_max_num" VALUE="50">
241 <PARAM NAME="fraction_digits" VALUE="3">
242 <PARAM NAME="font_size" VALUE="12">
243 <PARAM NAME="error_max_num" VALUE="3">
244 <PARAM NAME="fore_color" VALUE="#F9B868">
245 <PARAM NAME="back_color" VALUE="#666666">
246 <? printf("<PARAM NAME=\"signal[1]\" VALUE=\"%d-%d\">\n", $DevId, $Ch ); ?>
247 <? printf("<PARAM NAME=\"signal[2]\" VALUE=\"%d-%d\">\n", $DevId, $Ch+1 ); ?>
248 <? printf("<PARAM NAME=\"signal[3]\" VALUE=\"%d-%d\">\n", $DevId, $Ch+2 ); ?>
249 </APPLET>
250 <BR><BR>
251 <!-- チャート(縦・横)の表示 -->
※※(17)※※
252 <APPLET CODEBASE="/class" CODE="chart.class" width="200" height="140">
253 <PARAM NAME="interval" VALUE="2">
254 <PARAM NAME="max_limit" VALUE="8">
255 <PARAM NAME="min_limit" VALUE="-2">
256 <PARAM NAME="num_show" VALUE="1">
257 <PARAM NAME="point_num" VALUE="20">
258 <PARAM NAME="fraction_digits" VALUE="2">
259 <PARAM NAME="font_size" VALUE="12">
260 <PARAM NAME="orient" VALUE="1">
261 <PARAM NAME="error_max_num" VALUE="3">
262 <PARAM NAME="fore_color" VALUE="#0000ff">
263 <PARAM NAME="back_color" VALUE="#AAAAAA">
264 <? printf("<PARAM NAME=\"signal[1]\" VALUE=\"%d-%d\">\n", $DevId, $Ch ); ?>
265 <? printf("<PARAM NAME=\"signal[2]\" VALUE=\"%d-%d\">\n", $DevId, $Ch+1 ); ?>
266 <? printf("<PARAM NAME=\"signal[3]\" VALUE=\"%d-%d\">\n", $DevId, $Ch+2 ); ?>
267 </APPLET>
268 <BR><BR>
※※(18)※※
269 <APPLET CODEBASE="/class" CODE="chart.class" width="200" height="140">
270 <PARAM NAME="interval" VALUE="2">
271 <PARAM NAME="max_limit" VALUE="8">
272 <PARAM NAME="min_limit" VALUE="-2">
273 <PARAM NAME="num_show" VALUE="1">
274 <PARAM NAME="point_num" VALUE="20">
275 <PARAM NAME="fraction_digits" VALUE="2">
276 <PARAM NAME="font_size" VALUE="12">
277 <PARAM NAME="orient" VALUE="0">
278 <PARAM NAME="error_max_num" VALUE="3">
279 <PARAM NAME="fore_color" VALUE="#ff0000">
280 <PARAM NAME="back_color" VALUE="#888888">
281 <? printf("<PARAM NAME=\"signal[1]\" VALUE=\"%d-%d\">\n", $DevId, $Ch ); ?>
282 <? printf("<PARAM NAME=\"signal[2]\" VALUE=\"%d-%d\">\n", $DevId, $Ch+1 ); ?>
283 <? printf("<PARAM NAME=\"signal[3]\" VALUE=\"%d-%d\">\n", $DevId, $Ch+2 ); ?>
284 </APPLET>
285 </TD>
286 </TR>
287 </TABLE>
288
289 </BODY>
290 </HTML>
291
※実際には左端の行数は記述されていません。
※「※※(?)※※」は実際のファイルには記述されていません。
まずは上のsample1.phpの表示について説明します。
太字で記述されている個所がHTML内に埋め込まれたPHPスクリプトです。
この部分は「<?」〜「?>」で括られていて、その中身がPHPスクリプトの記述になります。
太字でない他の個所は全てHTMLでの記述になります。
色が付いている個所は、それぞれの色が以下の意を示しています。
ピンク … PHPの宣言
緑 … HTMLヘッダー
青 … F&e Web Server用の定義(変更不可)
オレンジ … F&e Web Serverの状態表示用関数
紫 … 信号名称の表示
赤 … JavaAppletでの表示の定義
色分けされた各部分の内容を説明します。
緑で表示されている部分ですが、この部分はHTMLのヘッダ部分になります。
PHPのみを使ったモニタリング画面を作成した場合、通常では画面の自動更新は行われません。
画面の自動更新を行う場合にはこの部分に画面の自動更新を行うように記述しておく必要があります。
※JavaAppletで表示を行う場合には記述不要です
自動更新を行う場合には以下の記述をHEADタグ内に挿入します。
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=sample1.php">
この記述ではWebブラウザに「5秒間隔でsample1.phpの再読込みを行う」ように
指示しています。
更新間隔を変更するには5の部分を書き換えることで行います。
またsample1.phpの部分は自動更新を行いたいファイル名に合わせて記述する必要があります。
この記述をHTMLのHEADタグに含めることでPHPを使ったモニタリング画面でも
ページの自動更新が行えるようになります。
青で表示されている部分ですが、
この部分はF&e Web Serverが提供する関数群等を利用する際に必須の部分になります。
この部分は変更を行わないで下さい。
またPHPを使ったサンプル画面を作成する場合には必ずこの部分の記述をHTMLヘッダーの後に含める必要があります。
オレンジで表示されている部分
(1),(2)ですが、
この部分はF&e Web Serverの全体の状態等を表示する関数になります。
詳しくは「PHPでの開発」項で説明します。
紫で表示されている部分
(3),(4),(13),(15)ですが、
この部分はF&e Web Serverで設定されたデバイスの信号名称を表示する部分になります。
詳しくは
「PHPでの開発(信号名称の表示)」項で説明します。
赤で表示されている部分
(5)〜(12),(14),(16)〜(18)ですが、
この部分はJavaAppletを使って、F&e Web Serverが収集したデバイスの
信号値を表示する部分になります。
詳しくは「JavaAppletでの開発」項で説明します。
sample1.phpの画面とソースの対応