MW100CustomWeb Manual

DAQMASTER MW100 Custom Web
Technical Information for Creating Custom Web Pages Using Microsoft Expression Web 4
DAQMASTER MW100 Custom Web Copyright Yokogawa Electric Corporation August 2013
-1-
Notes about Using This Document

Scope of This Document
This document does not explain the basic operations of your PC's operating system (OS) such as Windows 7. For this information, read the relevant users guide or related materials. This document does not explain the basic settings and operations of configuration tools, related software, and equipment. For such details, see the relevant manuals.
Disclaimer
Yokogawa makes no warranties regarding the configuration information explained in this document. Yokogawa assumes no liability to any party for any loss or damage, direct or indirect, caused by the use of the configuration information explained in this document.
Software Handling Precautions

Yokogawa makes no warranties regarding the software. All reverse-engineering, such as reverse compilation or the reverse assembly, of the software is strictly prohibited. No part of the software may be transferred, converted, or sublet for use by any third party, without prior written consent from Yokogawa.
-2-
Contents
1. 2. 3. 4. 5. 6.

Introduction ............................................................................................ 4 Custom Web Parts ................................................................................... 5 Items to Prepare ..................................................................................... 7 Limitations .............................................................................................. 8 Preparation ............................................................................................. 9 Creating Custom Web Pages ............................................................. 12
12 13 16 19 26 38 41 43
6.1 Opening the Template Page and the Parts Collection 6.2 Duplicating and Embedding the Communication Applet 6.3 Deleting a Control Applet or Duplicating and Embedding a Control Applet 6.4 Embedding Custom Monitoring Web Parts 6.5 Embedding Custom Control Web Parts 6.6 Inserting Characters Using the Parts Collection 6.7 Inserting Images Using the Parts Collection 6.8 Adjusting the Size and Position by Changing the Style Attributes
7. Transferring a Custom Web Page to the MW100 ....................................... 45 8. Checking the Operation .......................................................................... 46
-3-
1. Introduction
This document explains how to create DAQMASTER MW100 custom Web pages using Microsoft Expression Web 4, a Web page creation application. You can use Expression Web 4 to embed MW100 Trend Graph displays, Digital displays, and other parts as you like in Web pages that you create. Fig. 1 is a flowchart of how to create custom Web pages.
(1) Create a Web page using Expression Web 4.
User
Expression Web 4
(2) Insert a CompactFlash card into the MW100.
CompactFlash card
MW100
(3) Transfer the Web page to the MW100.
Expression Web 4
MW100
(4) Access the MW100 from Internet Explorer.
Internet Explorer
MW100
Fig. 1 Flowchart for creating a custom Web page

-4-
2. Custom Web Parts (1)

You can create custom Web pages by combining the parts shown in Figs. 2 and 3.
Alarm Trend Graph
Digital
Meter Vertical Bar Graph
Overview
Horizontal Bar Graph Fig. 2 Custom monitoring Web parts

Alarm TAG
-5-
2. Custom Web Parts (2)
Measure Start/Stop
Manual Sample
Math Start/Stop/Reset/Clear
Timer Reset
Transmit Start/Stop
Record Start/Stop
Alarm Ack Manual DO Relay On/Off
File Divide Measure/Thinning
Clear Error
Message R3.01 or later/R2.22
Arbitrary Output
Fig. 3 Custom control Web parts

-6-
3. Items to Prepare
DAQMASTER MW100 (firmware release no. R2.11 or later)
The most recent firmware is available below. URL: http://www.yokogawa.com/ns/mw100/
CompactFlash card
For storing custom Web pages. To use only monitoring parts, prepare at least one set; to also use control parts, prepare as many sets as there are MW100s. Use genuine Yokogawa products (772093, 772094, and 772095) .
Custom Web template software suite

"MW100CustomWeb_040.zip" (available along with this document)
PC
A PC with Microsoft Expression Web 4 installed. If Microsoft Expression Web 4 is not installed, download and install it. Also note the system requirements for using DAQMASTER MW100 and Expression Web 4.
-7-
4. Limitations
The maximum number of MW100s that can be monitored from a single page is 10. The maximum number of Trend Graphs that can be embedded in a single page is 6, and the total number of channels is 60. Only a single Overview can be embedded for each MW100.
-8-
5. Preparation (1)
If not installed already, install Microsoft Expression Web 4. If you do not have, obtain a free version by following the procedure below.
Open the Microsoft Web page. Open Download Center.
If the Web page that opens is not the US version, move to the US (English) version.
-9-
5. Preparation (2)
Search for Expression Web 4. Check the system requirements, and install it according to the instructions.
Select Expression Web 4 Free Version.
- 10 -
5. Preparation (3)
Create a work folder. Copy the custom Web template software suite to the work folder. Fig. 4 shows an example of the folder contents when the work folder is "c:observer" . Duplicate or rename the template page as necessary for your purpose. Note that the maximum number of characters in the file name is eight (the extension is "htm" ) .
observer [work folder] control2.htm [parts collection] form2.htm [template page] custom.js [control program] Custom.cla [control program] Aoctrl.cla [control program] image alack1.png [icon image] alack2.png [icon image] mestart1.png [icon image] mestart1.png [icon image] Fig. 4 Work folder contents
- 11 -
6. Creating Custom Web Pages (1)

6.1 Opening the Template Page and the Parts Collection
Start Expression Web 4. On the [File] menu, click [Open] , and open the template page (default file name "form2.htm" ) and the parts collection ( "control2.htm" ) in the work folder. Figs. 5 and 6 show the pages that will open. You can create a custom Web page by pasting the parts from the parts collection into the template page.
Fig. 5 Template page

Fig. 6 Parts collection
- 12 -

6.2 Duplicating and Embedding the Communication Applet
* The procedure described here is necessary only if you need to monitor multiple MW100s from a single page. Click the communication applet "Commu.class" at the upper right of the template page to select it. On the [Edit] menu, click [Copy] and then [Paste] to duplicate the applet. You can also right-click and click [Copy] and then [Paste] . Use the cursor or mouse to move the applet to the appropriate position.
Fig. 7 Duplicating "Commu.class"
Fig. 8 Dragging the edge to move
Fig. 9 After duplicating and moving (for two MW100s)
Repeat this procedure to create duplicates as many times as there are MW100s.
- 13 -

Click the communication applet "Commu.class" to select it. In the [Tag Properties] panel at the lower left, edit the applet attributes as shown in Table 1.
Table 1 Editing communication applet attributes Attribute code codebase name "Commu.class" (verify) 1st MW1001: "/web/" (verify) Other MW100s: "http://xx.xx.xx.xx/web/" 2 (change) 1st MW1001: "MW1" (verify) 2nd MW100: "MW2" (verify) : : : [N]th MW100: "MW[N]" (verify) You can adjust the position. For details, see p. 43. Value
style
Fig. 10 Communication applet attributes
1 MW100 in which the custom Web page will be stored 2 xx.xx.xx.xx is the MW100 IP address or host name.
- 14 -

Double-click the communication applet "Commu.class" to open the Java Applet Properties. Edit the applet parameters as shown in Table 2. To change a value, first select the parameter, and then click [Modify...] to open an edit dialog box. In the edit dialog box, select the [Specify value] check box, and change the value in the [Data] box.
Table 2 Editing communication applet parameters Name peer lang user pass "Mw100" English model: "English" (verify) Japanese model: "Japanese" (change) Login user name1 Login password1 Value
1 Set these parameters if the login function is enabled.
Fig. 11 Communication applet parameters
Fig. 12 Edit dialog box
Note: There is an increased risk of leaks for the user name and password set in the applet parameters. If you only need to use monitoring parts, use a "User" level user. If you need to use control parts, you will need to use an "Admin" level user, but we recommend that you use the system in a secure network.
- 15 -

6.3 Deleting a Control Applet or Duplicating and Embedding a Control Applet
* If you intend to monitor a single MW100 from a single page and also use control parts, you do not have to carry out the procedure in this section. When using only monitoring parts Click the control applet "Custom.class" at the upper right of the template page to select it. On the [Edit] menu, click [Delete] to delete the applet. You can also right-click and click [Cut] .
Fig. 13 Deleting "Custom.class"
Fig. 14 After deleting
- 16 -

When monitoring multiple MW100s from a single page and also using control parts Click the control applet "Custom.class" at the upper right of the template page to select it. On the [Edit] menu, click [Copy] and then [Paste] to duplicate the applet. You can also right-click and click [Copy] and then [Paste] . Use the cursor or mouse to move the applet to the appropriate position.
Fig. 15 Duplicating "Custom.class"
Fig. 16 Dragging the edge to move
Fig. 17 After duplicating and moving (for two MW100s)
Repeat this procedure to create duplicates as many times as there are MW100s.
- 17 -

Click the control applet "Custom.class" to select it. In the [Tag Properties] panel at the lower left, edit the applet attributes as shown in Table 3.
Table 3 Editing control applet attributes Attribute code codebase name Value "Custom.class" (verify) 1st MW1001: "/" (verify) Other MW100s: "http://xx.xx.xx.xx/" 2 (change) 1st MW1001: "custom1" (verify) 2nd MW100: "custom2" (verify) : : : [N]th MW100: "custom[N]" (verify) You can adjust the position and size. For details, see p. 43.
style
Fig. 18 Control applet attributes
- 18 -

6.4 Embedding Custom Monitoring Web Parts
On the [Edit] menu, click [Copy] to copy a monitoring custom Web part, which is arranged in the left half of the parts collection. You can also right-click and click [Copy] . Switch to the template page, and on the [Edit] menu, click [Paste] to paste the part. You can also right-click and click [Paste] . Use the cursor or mouse to resize and move the part to the appropriate position.
Fig. 20 Using cursor keys or dragging the edge to move; Fig. 19 Embedding custom monitoring using [Ctrl] + cursor keys or dragging the edge to resize Web parts
Repeat this procedure to create the custom Web page.

- 19 -

Click the custom monitoring part that was pasted into the template page to select it. In the [Tag Properties] panel at the lower left, edit the applet attributes as shown in Table 4.
Table 4 Editing the applet attributes of a monitoring custom Web part Attribute alt Value "Trend Graph" , "Digital" , "Vertical Bar Graph" , "Meter" , "Alarm" , "Horizontal Bar Graph" , "Overview" , or "Alarm TAG" (verify) "Display.class" (verify) 1st MW1001: "/web/" (verify) Other MW100s: "http://xx.xx.xx.xx/web/" 2 (change) You can adjust the position and size. For details, see p. 43.
code codebase style
Fig. 21 Applet attributes (Trend Graph)
- 20 -

Double-click the custom monitoring Web part that was pasted into the template page to open the Java Applet Properties. Edit the applet parameters as shown in Tables 5 to 12. You can edit the parameters in the same manner as editing the communication applet parameters as explained on p. 15.
Table 5 Editing Trend Graph applet parameters Name control Value 1st MW1001: "MW1" (verify) 2nd MW100: "MW2" (change) : : : [N]th MW100: "MW[N]" (change) "Trendh" (verify) Display group number "1" to "18" Measurement group number "1" to "3" Background color "white" or "gray"
draw group fifo bgcolor
Fig. 22 Applet parameters (Trend Graph)
1 MW100 in which the custom Web page will be stored
- 21 -

Table 6 Editing Digital applet parameters Name control Value 1st MW1001: "MW1" (verify) 2nd MW100: "MW2" (change) : : : [N]th MW100: "MW[N]" (change) "Digital" (verify) Measurement channel number "1" to "60" or math channel number "101" to "400" 2 Background color "white" or "gray" Frame/channel number (tag name) "on" (show) or "off" (hide) Alarm status "on" (show) or "off" (hide) Unit "on" (show) or "off" (hide) Bar graph "on" (show) or "off" (hide) Table 7 Editing Vertical Bar Graph applet parameters Name control Value 1st MW1003: "MW1" (verify) 2nd MW100: "MW2" (change) : : : [N]th MW100: "MW[N]" (change) "Bar" (verify) Measurement channel number "1" to "60" or math channel number "101" to "400" 4 Background color "white" or "gray" Frame/channel number (tag name) "on" (show) or "off" (hide) Alarm status "on" (show) or "off" (hide) Digital "on" (show) or "off" (hide) Unit "on" (show) or "off" (hide)
draw channel bgcolor frame alarm unit bar
draw channel bgcolor frame alarm digital unit
1 MW100 in which the custom Web page will be stored 3 MW100 in which the custom Web page will be stored 2 A001 corresponds to "101" , and A300 corresponds to "400" . 4 A001 corresponds to "101" , and A300 corresponds to "400" .
- 22 -

Table 8 Editing Meter applet parameters Name control Value 1st MW1001: "MW1" (verify) 2nd MW100: "MW2" (change) : : : [N]th MW100: "MW[N]" (change) "Meter" (verify) Measurement channel number "1" to "60" or math channel number "101" to "400" 2 Background color "white" or "gray" Frame/channel number (tag name) "on" (show) or "off" (hide) Alarm status "on" (show) or "off" (hide) Digital "on" (show) or "off" (hide) Table 9 Editing Alarm applet parameters Name control Value 1st MW1003: "MW1" (verify) 2nd MW100: "MW2" (change) : : : [N]th MW100: "MW[N]" (change) "Alarm" (verify) Measurement channel number "1" to "60" or math channel number "101" to "400" 4 Background color "white" or "gray" Alarm level "1" to "4" Frame/channel number (tag name) "on" (show) or "off" (hide)
draw channel bgcolor frame alarm digital
draw channel bgcolor level frame
3 MW100 in which the custom Web page will be stored 4 A001 corresponds to "101" , and A300 corresponds to "400" .
1 MW100 in which the custom Web page will be stored 2 A001 corresponds to "101" , and A300 corresponds to "400" .
- 23 -

Table 10 Editing Horizontal Bar Graph applet parameters Name control Value 1st MW1001: "MW1" (verify) 2nd MW100: "MW2" (change) : : : [N]th MW100: "MW[N]" (change) "Barh" (verify) Measurement channel number "1" to "60" or math channel number "101" to "400" 2 Background color "white" or "gray" Frame/channel number (tag name) "on" (show) or "off" (hide) Table 11 Editing Overview applet parameters Name control Value 1st MW1003: "MW1" (verify) 2nd MW100: "MW2" (change) : : : [N]th MW100: "MW[N]" (change) "Overview" (verify) Specify measurement channel numbers 1 to 60 or math channel numbers 101 to 400 4 by using dots to separate channel numbers as in "001.003.005" or by using hyphens to specify ranges as in "004-008"
draw channel bgcolor frame
draw channel
1 MW100 in which the custom Web page will be stored 2 A001 corresponds to "101" , and A300 corresponds to "400" . 3 MW100 in which the custom Web page will be stored 4 A001 corresponds to "101" , and A300 corresponds to "400" . 5 Regardless of the syntax, redundant channels are excluded, and channels are sorted in ascending order.
Example) "1-10.101-110" (channels 001 to 010 and A001 to A010)
- 24 -

Table 12 Editing Alarm TAG applet parameters Name control Value 1st MW1001: "MW1" (verify) 2nd MW100: "MW2" (change) : : : [N]th MW100: "MW[N]" (change) "Alarmtag" (verify) Measurement channel number "1" to "60" or math channel number "101" to "400" 2 Alarm level "1" to "4" Display format during no alarm "[a]; [b]; [c]; [d]" [a]: Font color4 [b]: Background color4 [c]: Font size (unit: pixel) or "auto" [d]: "blink" or "normal" (no blinking) Label during alarm active3 Display format during alarm active5 Label during alarm hold3
Name (contd.) holdprop alarmhold alarmholdprop

1 2 3 4
Value (contd.) Display format during alarm hold5 Label during alarm active and hold3 Display format during alarm active and hold5
draw channel
level normalprop
MW100 in which the custom Web page will be stored A001 corresponds to "101" , and A300 corresponds to "400" . Up to 40 characters Color designation according to Table 13 or RGB designation using hexadecimal notation "#000000" to "#ffffff" 5 Same as parameter normalprop.
*1: Web normal Label during MW100 no alarm3 *2: A001 "101" , A300 "400"
Table 13 Color assignments

Color Designation black red brown chocolate orange yellow olive y.green green lime white Color Designation cyan teal lightblue blue darkblue b.violet violet magenta purple maroon
alarm alarmprop hold
- 25 -

6.5 Embedding Custom Control Web Parts
Copy a custom control web part, which is arranged in the right half of the parts collection, and paste into the template page. The procedure is the same as that for custom monitoring Web parts as explained on p. 19. Note that the message part consists of a set of multiple parts. Refer to Fig. 24, and use the message part as a whole. Use the cursor or mouse to resize and move the part to the appropriate position.
Click the edge to copy Do not copy each part the whole set. separately Fig. 23 Embedding custom control Web parts Fig. 24 Note on copying the message part
Repeat this procedure to create the custom Web page.

- 26 -

Parameter settings for button parts (parts other than Message parts and Arbitrary Output parts) Click the button part that was pasted into the template page to select it. In the [Tag Properties] panel at the lower left, edit the attributes as shown in Table 14.
Table 14 Editing button part attributes Attribute alt border height id "0" (verify) Button height "25" (unit: pixel, changeable) 1st item: e.g. "mestart1" (verify) 2nd item: e.g. "mestart2" (verify) : : : [n]th item: e.g. "mestart[n]" (verify) e.g. "image/mestart1.png" (verify) You can adjust the position. For details, see p. 43. Button width "31" (unit: pixel, changeable) Value e.g. "Measure Start" (verify)
src style Fig. 25 Button part attributes (Measure Start button) width
- 27 -

Scroll the [Tag Properties] panel at the lower left so that Events is displayed. Edit the event actions according to Table 15 (parts other than Transmit and Manual DO Relay) and Table 16 (Transmit Start/Stop and Manual DO Relay On/Off).
Table 15 Editing button part (parts other than Transmit and Manual DO Relay) events Event onclick Action 1st MW1001: e.g. "javascript:MeasureStart("custom1")" (verify) 2nd MW100: e.g. "javascript:MeasureStart("custom2")" (change) : : : [N]th MW100: e.g. "javascript:MeasureStart("custom[N]")" (change) 1st item2: e.g. "mestart1.src="image/mestart2.png"" (verify) 2nd item2: e.g. "mestart2.src="image/mestart2.png"" (change) : : : 2 [n]th item : e.g. "mestart[n].src="image/mestart2.png"" (change) 1st item2: e.g. "mestart1.src="image/mestart1.png"" (verify) 2nd item2: e.g. "mestart2.src="image/mestart1.png"" (change) : : : [n]th item2: e.g. "mestart[n].src="image/mestart1.png"" (change)
onmousedown
onmouseup
Fig. 26 Button events (Measure Start button)
1 MW100 in which the custom Web page will be stored 2 Match the order of the "id"s that were verified with button part attributes on p. 27.
- 28 -

Table 16 Editing button part (Transmit Start/Stop and Manual DO Relay On/Off) events Event onclick Action <When all channels are applicable (default) > 1st MW1001: e.g. "javascript:TransStart("001-060", "custom1")" (verify) 2nd MW100: e.g. "javascript:TransStart("001-060", "custom2")" (change) : : : [N]th MW100: e.g. "javascript:TransStart("001-060", "custom[N]")" (change) <When specific channels are applicable> Change "001-060" to specific channels in the event actions shown above. Example) Channel 001 of the 1st MW1001: e.g. "javascript:TransStart("001", "custom1")" Channel 011 to 020 of the 3rd MW100: e.g. "javascript:TransStart("011-020", "custom3")" onmousedown 1st item2: e.g. "trstart1.src="image/trstart2.png"" (verify) 2nd item2: e.g. "trstart2.src="image/trstart2.png"" (change) : : : 2 [n]th item : e.g. "trstart[n].src="image/trstart2.png"" (change) 1st item2: e.g. "trstart1.src="image/trstart1.png"" (verify) 2nd item2: e.g. "trstart2.src="image/trstart1.png"" (change) : : : 2 [n]th item : e.g. "trstart[n].src="image/trstart1.png"" (change)
onmouseup
1 MW100 in which the custom Web page will be stored 2 Match the order of the "id"s that were verified with button part attributes on p. 27.
- 29 -

Parameter settings for Message parts In the Message parts that were pasted into the template page, click the message selection at the left to select it. In the [Tag Properties] panel at the lower left, verify the attributes with the values shown in Table 17.
Table 17 Verifying the message selection attributes Attribute name Value (for R3.01 and later) 1st item: "msgnumN1" (verify) 2nd item: "msgnumN2" (verify) : : : [n]th item: "msgnumN[n]" (verify) "1" (verify) Value (for R2.22) 1st item: "msgnumO1" (verify) 2nd item: "msgnumO2" (verify) : : : [n]th item: "msgnumO[n]" (verify) "1" (verify)
size Attribute name
Fig. 27 Message selection attributes
size
- 30 -

For R3.01 and later, scroll the [Tag Properties] panel at the lower left so that Events is displayed. Then edit the actions assigned to the events according to Table 18.
Fig. 28 Message selection events Table 18 Editing message selection events Event onchange Action (for R3.01 and later) 1st item1: "javascript:msgN1.disabled=(msgnumN1.selectedIndex==0)?false:true;" (verify) 2nd item1: "javascript:msgN2.disabled=(msgnumN2.selectedIndex==0)?false:true;" (change) : : : 1 [n]th item : "javascript:msgN[n].disabled=(msgnumN[n].selectedIndex==0)?false:true;" (change)
1 Match that the order of the "name"s verified with the message selection attributes on p. 30. - 31 -

For R3.01 and later, using the same procedure edit attributes of the free message box at the center according to Table 19.
Table 19 Editing free message box attributes Attribute name Value (for R3.01 and later) 1st item1: "msgN1" (verify) 2nd item1: "msgN2" (verify) : : : 1 [n]th item : "msgN[n]" (verify) Box width "20" (unit: characters, changeable) "text" (verify)
size type
1 Verify that the order matches the order of the "name"s verified with the message selection attributes on p. 30.
Fig. 29 Free message box attributes (R3.01 and later only)
- 32 -

Using the same procedure, edit attributes of the message button on the right according to Table 20.
Table 20 Editing message button attributes Attribute name Value (for R3.01 and later) 1st item1: "msgbuttonN1" (verify) 2nd item1: "msgbuttonN2" (verify) : : : 1 [n]th item : "msgbuttonN[n]" (verify) "button" (verify) Button text "send" (changeable) Value (for R2.22) 1st item1: "msgbuttonO1" (verify) 2nd item1: "msgbuttonO2" (verify) : : : 1 [n]th item : "msgbuttonO[n]" (verify) "button" (verify) Button text "send" (changeable)
type value Attribute name
Fig. 30 Message button attributes
type value
1 Verify that the order matches the order of the "name"s verified with the message selection attributes on p. 30.
- 33 -

Scroll the [Tag Properties] panel at the lower left so that Events is displayed. Edit the actions assigned to the events according to Table 21 on the next page.
Fig. 31 Message button events
- 34 -

Table 21 Editing message button events Event onclick 1st item1: Action (for R3.01 and later) <To write to the 1st MW1002> "javascript:SendMessage(msgnumN1.selectedIndex, msgN1.value, "custom1")" (verify) <To write to the [N]th MW100> "javascript:SendMessage(msgnumN1.selectedIndex, msgN1.value, "custom[N]")" 1 [n]th item : <To write to the 1st MW1002> "javascript:SendMessage(msgnumN[n].selectedIndex, msgN[n].value, "custom1")" <To write to the [N]th MW100> "javascript:SendMessage(msgnumN[n].selectedIndex, msgN[n].value, "custom[N]")" Action (for R2.22) <To write to the 1st MW1002> "javascript:SendMessage(msgnumO1.selectedIndex + 1, null, "custom1")" <To write to the [N]th MW100> "javascript:SendMessage(msgnumO1.selectedIndex + 1, null, "custom[N]")" 1 [n]th item : <To write to the 1st MW1002> "javascript:SendMessage(msgnumO[n].selectedIndex + 1, null, "custom1")" <To write to the [N]th MW100> "javascript:SendMessage(msgnumO[n].selectedIndex + 1, null, "custom[N]")" 1st item1: (verify) (change)
Event onclick
(change)
1 Match that the order of the "name"s verified with the message selection attributes on p. 30. 2 MW100 in which the custom Web page will be stored
- 35 -

Parameter settings for Arbitrary Output parts Click the Arbitrary Output part that was pasted into the template page to select it. In the [Tag Properties] panel at the lower left, edit the applet attributes as shown in Table 22.
Table 22 Editing Arbitrary Output applet attributes Attribute alt code codebase style "AO Control" (verify) "Aoctrl.class" (verify) 1st MW1001: "/" (verify) Other MW100s: "http://xx.xx.xx.xx/" 2 (change) You can adjust the position and size. For details, see p. 43. Value
Fig. 32 Arbitrary Output applet attributes
- 36 -

Double-click the Arbitrary Output part that was pasted into the template page to open the Java Applet Properties. Edit the applet parameters according to Table 23. You can edit the parameters in the same manner as editing the communication applet parameters as explained on p. 15.
Table 23 Editing Arbitrary Output applet parameters Name direction channel control Value Display direction "Vertical" or "Horizontal" (changeable) AO channel number "1" to "60" 1st MW1001: "custom1" (verify) 2nd MW100: "custom2" (change) : : : [N]th MW100: "custom[N]" (change) Digital and adjustment button "on" (show) or "off" (hide)
digital
1 MW100 in which the custom Web page will be stored
Fig. 33 Arbitrary Output applet parameters
- 37 -

6.6 Inserting Characters Using the Parts Collection
Right-click on the template page, and click [Page Properties...] to display the page properties. If necessary, click the Language tab, and change the language parameters as shown in Table 24.
Table 24 Editing language parameters Item Page language Mark current document as: HTML encoding Save the document as: Character encoding for saving the custom Web page Example) "Japanese (Shift-JIS)" Language of the text used on the page Example) "Japanese (Japan)" Value
Fig. 34 Language parameters in page properties

- 38 -

Copy any of the text parts in the parts collection (e.g. "Monitor Parts" ), and paste it into the template page. The procedure is the same as that for custom monitoring Web parts as explained on p. 19. To select text, click the edge to select the whole frame. With the part selected, click the [...] button at the right of the [style] attribute that appears in the [Tag Properties] at the lower left panel to open the Modify Style dialog box.
Fig. 35 Embedding a text part

Fig. 36 Text part style attributes
- 39 -

If necessary, change the Font category parameters as shown in Table 25. (Descriptions of each parameter will be omitted.) You can also adjust the position and size in this dialog box. For details, see p. 43.
Table 25 Editing style attributes (Font) Item font-family font-size font-weight font-style font-variant text-transform color text-decoration Fig. 37 Text part Modify Style dialog box Font size Font weight Font style (e.g. italic) (not used) (not used) Font color Text decoration (e.g. underline) Description Font family
- 40 -

6.7 Inserting Images Using the Parts Collection
Copy the image file that you want to insert in the "image" folder within the working folder. Note that the maximum number of characters in the file name is eight (the extension is three characters). Copy the DAQMASTER MW100 logo image at the upper left of the parts collection, and paste it into the template page. The procedure is the same as that for custom monitoring Web parts as explained on p. 19. In the [Tag Properties] panel at the lower left, edit the attributes as shown in Table 26.
Table 26 Editing image part attributes Attribute alt border height1 src style width1 Fig. 38 Copying and pasting image parts
Value Text to display when the image cannot be displayed (changeable) "0" (verify) Image height (unit: pixel, change) "image/xxxxx.jpg" 2 (change) You can adjust the position. For details, see p. 43. Image width (unit: pixel, change)
1 Leave it blank to set the size to the original image size. 2 xxxxx.jpg is the image file name
- 41 -

Embed the image at any position you like. The procedure is the same as that for custom monitoring Web parts as explained on p. 19. As described in Table 26, you can leave the height and width attributes blank or right-click and click [Reset Size] to set the size to the original image size (Fig. 39).
Fig. 39 Resetting to the original image size
Fig. 40 Embedding the image
- 42 -

6.8 Adjusting the Size and Position by Changing the Style Attributes
Instead of using the cursor or mouse, you can also adjust the position and size by changing the style attributes of each part as described below. First click the part whose position and size you want to adjust to select it. Next, click the [...] button at the right of the [style] attribute that appears in the [Tag Properties] panel at the lower left to open the Modify Style dialog box.
(Monitor part example)
(Button part example) Fig. 41 Part style attribute
(Message part example)
- 43 -

Under Category at the left of the Modify Style dialog box, click Position to select it. If necessary, adjust the position and size parameters as shown in Table 27.
Table 27 Editing style attributes (position) Item position z-index width height top right bottom left Fig. 42 Modify Style dialog box Value "absolute" (verify) Order of overlap "1" (do not change under normal circumstances) 1 Width (default unit: pixel) Height (default unit: pixel)
2 2
Distance from the top edge (default unit: pixel) (not used) (not used) Distance from the left edge (default unit: pixel)
1 For example, if you want to arrange the image part as a background image, change the index to a number less than 1 (e.g. "0" ). 2 Do not use for button and image parts (use the "height" and "width" attributes to adjust the size as described on pp. 27 and 41).
- 44 -
7. Transferring a Custom Web Page to the MW100

Insert a CompactFlash card into the MW100. Using an FTP client, connect to the MW100 FTP server.
For the procedure, see the instructions for the FTP client that you are using. For your reference, the procedure when using Windows Explorer is provided below. From the Start menu, start Windows Explorer. In the address bar, enter the following: If the login function is enabled: "ftp://uuuuu:ppppp@xx.xx.xx.xx/" 1, 2 If the login function is disabled: "ftp://xx.xx.xx.xx/" 2
1 uuuuu is the login user name ( "Admin" level); ppppp is the corresponding login password. 2 xx.xx.xx.xx is the MW100 IP address or host name.
Transfer the files listed in Table 28 to the MW100 root directory.

Table 28 Files to transfer to the MW100 MW100 1st MW100 Other MW100s When using only monitoring parts All files in the [image] folder custom.js Custom Web page that you created (No files need to be transferred.) When also using control parts In addition to the files on the left, Aoctrl.cla Custom.cla Aoctrl.cla Custom.cla
- 45 -
8. Checking the Operation

From the Start menu, start Internet Explorer. In the address bar, enter the following: "http://xx.xx.xx.xx/ffffffff.htm" 1
1 xx.xx.xx.xx is the IP address or host name of the 1st MW100; ffffffff is the name of the custom Web page file.
Check that the custom Web page that you created is displayed.
Fig. 43 Checking the operation

- 46 -
YOKOGAWA, vigilantplant and DAQMASTER are either registered trademarks or trademarks of Yokogawa Electric Corporation in the United States and/or other countries. Microsoft, Windows and Internet Explorer are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. CompactFlash is a registered trade mark or trade mark of Sandisk Corporation in the United States and/or other countries. Java is a registered trademark or trademark of Oracle America, Inc. in the United States and/or other countries.
- 47 -

MW100CustomWeb Manual

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

MW100CustomWeb Manual

Uploaded by

Copyright:

Available Formats

DAQMASTER MW100 Custom Web

Notes about Using This Document

Software Handling Precautions

(2) Insert a CompactFlash card into the MW100.

(3) Transfer the Web page to the MW100.

(4) Access the MW100 from Internet Explorer.

Fig. 1 Flowchart for creating a custom Web page

2. Custom Web Parts (1)

Alarm Trend Graph

Meter Vertical Bar Graph

Horizontal Bar Graph Fig. 2 Custom monitoring Web parts

2. Custom Web Parts (2)

Alarm Ack Manual DO Relay On/Off

File Divide Measure/Thinning

Message R3.01 or later/R2.22

Fig. 3 Custom control Web parts

Custom Web template software suite

Select Expression Web 4 Free Version.

6. Creating Custom Web Pages (1)

Fig. 5 Template page

Fig. 6 Parts collection

6. Creating Custom Web Pages (2)

Fig. 7 Duplicating "Commu.class"

Fig. 8 Dragging the edge to move

Fig. 9 After duplicating and moving (for two MW100s)

6. Creating Custom Web Pages (3)

Fig. 10 Communication applet attributes

6. Creating Custom Web Pages (4)

1 Set these parameters if the login function is enabled.

Fig. 11 Communication applet parameters

Fig. 12 Edit dialog box

6. Creating Custom Web Pages (5)

Fig. 13 Deleting "Custom.class"

Fig. 14 After deleting

6. Creating Custom Web Pages (6)

Fig. 15 Duplicating "Custom.class"

Fig. 16 Dragging the edge to move

Fig. 17 After duplicating and moving (for two MW100s)

6. Creating Custom Web Pages (7)

Fig. 18 Control applet attributes

6. Creating Custom Web Pages (8)

Repeat this procedure to create the custom Web page.

6. Creating Custom Web Pages (9)

code codebase style

Fig. 21 Applet attributes (Trend Graph)

6. Creating Custom Web Pages (10)

draw group fifo bgcolor

Fig. 22 Applet parameters (Trend Graph)

1 MW100 in which the custom Web page will be stored

6. Creating Custom Web Pages (11)

draw channel bgcolor frame alarm unit bar

draw channel bgcolor frame alarm digital unit

6. Creating Custom Web Pages (12)

draw channel bgcolor frame alarm digital

draw channel bgcolor level frame

6. Creating Custom Web Pages (13)

draw channel bgcolor frame

Example) "1-10.101-110" (channels 001 to 010 and A001 to A010)

6. Creating Custom Web Pages (14)

Name (contd.) holdprop alarmhold alarmholdprop

Table 13 Color assignments

alarm alarmprop hold

6. Creating Custom Web Pages (15)