0% found this document useful (0 votes)

17 views148 pages

Using Web Page User Web Page HTML Creation: Web Server Function Application Guide

Uploaded by

DONG BUI

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

17 views148 pages

Using Web Page User Web Page HTML Creation: Web Server Function Application Guide

Uploaded by

DONG BUI

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 148

FACTORY AUTOMATION

Programmable Controller
MELSEC iQ-F Series

Web Server Function Application Guide

Using Web Page
User Web Page HTML Creation

</br>
<head>
TAG

CSS
HTML
INTRODUCTION
Thank you for purchasing the MELSEC iQ-F Series.
This guide describes the settings related to the Web server function of the FX5 CPU module.
It should be read and understood before attempting to install or use the module.

Regarding use of this product

• This product has been manufactured as a general-purpose part for general industries, and has not been designed or
manufactured to be incorporated in a device or system used for purposes related to human life.
• Before using the product for special purposes such as nuclear power, electric power, aerospace, medicine, or passenger
movement vehicles, consult Mitsubishi Electric representative.
• This product has been manufactured under strict quality control. However, when installing the product where major accidents
or losses could occur if the product fails, install appropriate backup or failsafe functions in the system.

Note

• If in doubt at any stage during the installation of the product, always consult a professional electrical engineer who is qualified
and trained in the local and national standards. If in doubt about the operation or use, please consult the nearest Mitsubishi
Electric representative.
• Mitsubishi Electric will not accept responsibility for actual use of the product based on these illustrative examples.
• This guide content, specification, etc., may be changed, without a notice, for improvement.
• The information in this guide has been carefully checked and is believed to be accurate; however, if you notice a doubtful point,
an error, etc., please contact the nearest Mitsubishi Electric representative. When doing so, please provide the document
number given at the end of this guide.

2
TABLE OF CONTENTS
INTRODUCTION ...................................................................................................................................................................... 2
RELEVANT CATALOGS/MANUALS ......................................................................................................................................... 4
PRECAUTIONS ........................................................................................................................................................................ 5
LIMITATIONS ........................................................................................................................................................................... 5

1. BASICS OF CREATING HTML <TAGS> 6

1.1 About HTML ...................................................................................................................................................................... 6
1.2 HTML Structure ................................................................................................................................................................ 7
1.3 Basic Rules About Tags .................................................................................................................................................. 9
1.4 Tag Types ........................................................................................................................................................................10
1.5 Naming Files ..................................................................................................................................................................12

2. CREATING AND DISPLAYING SIMPLE HTML DOCUMENTS ON A PERSONAL COMPUTER 13

2.1 Preparation ....................................................................................................................................................................13
2.2 HTML File Creation ........................................................................................................................................................13
2.3 Web Browser Display ....................................................................................................................................................15
2.4 Displaying HTML Source in the Web Browser ............................................................................................................16

3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE 17

3.1 Before Starting ..............................................................................................................................................................17
3.2 Preparation ....................................................................................................................................................................19
3.3 Reuse ..............................................................................................................................................................................21
3.4 User Web Page Creation ...............................................................................................................................................26
3.5 File Save Destination ....................................................................................................................................................59
3.6 Troubleshooting ............................................................................................................................................................62

4. LEARNING THE FUNCTIONS OF STYLE SHEETS (CSS) 64

4.1 Function Introduction ...................................................................................................................................................64
4.2 Common Items ..............................................................................................................................................................65
4.3 Overall Structure (UserWebStyle.css File) ..................................................................................................................67
4.4 Setting Details ...............................................................................................................................................................67
4.5 Style Sheet Details ........................................................................................................................................................68

5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS) 75
5.1 What Is JavaScript (JS)? ...............................................................................................................................................75
5.2 Common Items ..............................................................................................................................................................77
5.3 Table ................................................................................................................................................................................81
5.4 Graphs ............................................................................................................................................................................87
5.5 Image/Figure ..................................................................................................................................................................98
5.6 Operation Buttons .......................................................................................................................................................107

6. CREATING A DEVICE MONITOR WINDOW WITH CGI 113

6.1 What Is CGI? .................................................................................................................................................................113
6.2 Overview and Functions of CGI ..................................................................................................................................113
6.3 Common Specifications .............................................................................................................................................116
6.4 Device Reading Web Page Creation ..........................................................................................................................118
6.5 Device Writing Web Page Creation ............................................................................................................................125

7. REFERENCES 132
7.1 Style Sheet References ..............................................................................................................................................132
7.2 HTML Tag References .................................................................................................................................................137
7.3 Color Name/Color Code ..............................................................................................................................................143

3
RELEVANT CATALOGS/MANUALS
u Configuration of catalogs and manuals
The following catalogs and manuals should be referred to before using the Web pages.

Web server function

When using the system Web pages Web Server Function Application Guide
Using Web Page
Startup and Introduction

MELSEC iQ-R/MELSEC iQ-F

Web Server Function Guide Book

When using the user Web pages Web Server Function Application Guide
Using Web Page
User Web Page HTML Creation

MELSEC iQ-F FX5 User's Manual

(Ethernet Communication)

u Relevant catalogs/manuals
For the detailed specifications, precautions, and limitations of the product, refer to the following catalogs or manuals.

Name [Catalog/manual number] Explanation Available form

Web Server Function Application Guide Preparation of necessary equipment for the use
Using Web Page of the Web server function of the MELSEC iQ-F
PDF
Startup and Introduction and the introduction procedure for displaying the
[L(NA)08643ENG] Web page.
For users who create their own Web page from
Web Server Function Application Guide
the user Web page.
Using Web Page
Details on Style Sheet-based designs, JavaScript PDF
User Web Page HTML Creation
objects, and CGI objects used during HTML
[L(NA)08645ENG] (This guide)
creation.
MELSEC iQ-R/MELSEC iQ-F Web Server Function Guide
Specifications, procedures before operation, and e-Manual,
Book
troubleshooting of the Web server function. PDF
[SH-081982ENG]
Details on the Ethernet communication function. e-Manual,
MELSEC iQ-F FX5 User's Manual (Ethernet Communication)
For the Web server function, details on CGI PDF,
[JY997D56201]
objects that can be used in the user Web page. Print book

e-Manual refers to the Mitsubishi Electric’s FA electronic book manuals that can be browsed using a dedicated tool.
e-Manual has the following features:
Point
• Required information can be cross-searched in multiple manuals. (Cross Document Search)
• Pages that users often browse can be bookmarked.

4
PRECAUTIONS
Illegal access from external devices

Incorporate other measures if the safety of the programmable controller system must be maintained against illegal access
from an external device. Mitsubishi shall not be held liable for any system problems that may occur due to illegal access. The
user authentication of the Web server function is one of the methods for preventing illegal access (such as program or data
destruction) from an external device. It does not completely prevent illegal access.
Examples of measures against illegal access are given below.

• Install a firewall.
• Install a personal computer as a relay station, and control the relaying of sent/received data with an application program.
• Install an external device for which the access rights can be controlled as a relay station (contact the network provider or
equipment dealer for details on the external devices for which access rights can be controlled).

Firewall functions

• Filtering function
This function intercepts illegal packets and passes permitted
Firewall
packets only.

• Address conversion function

This function reciprocally assigns IP addresses between the
internal and external networks.

• Remote control and monitoring function

This function can be used to set a firewall and check logs from
another computer. Virus

Internet Internal network

LIMITATIONS
Response performance of Web pages

The response performance of Web pages varies according to the following causes.
The response performance may degrade due to the network line status or the communication status of the Ethernet function of
the FX5 CPU.
• Load factor of an Ethernet line (line congestion)
• Number of connections that are used simultaneously (refreshing other connections)
• Communication load status including the communication functions other than the Web server function set using the Ethernet
function of the FX5 CPU
• Large scan time of the FX5 CPU when Web page update is requested

Web server access

Up to four users can log in to the MELSEC iQ-F Series simultaneously.

If the file reading was not completed successfully or a message that requests to reload the page appears while the Web server
function is used, read the file again.

Communication timeout time

Since the communication timeout time depends on the browser specifications, it may not be the same as the timeout time of the
Web server (five minutes). The design of the error window differs depending on the browser.

Special Note For the precautions and limitations, refer also to “FX5 User’s Manual (Ethernet Communication) [JY997D56201]”.

5
1
1. BASICS OF CREATING HTML <TAGS>
BASICS OF CREATING HTML < TAGS >

About HTML HTML Structure Basic Rules About Tags Tag Types Naming Files

1.1 About HTML

What Is HTML?

HTML is an abbreviation for “Hyper Text Markup Language”. It is a language developed for creating Web pages. A great number
of Web pages currently accessible on the Internet have been created with HTML and can be viewed with Web browsers (such as
Internet Explorer® and Google Chrome®).
A Web browser reads HTML files and image files, organizes the contents into an easily readable form, and displays them as a Web
2 page.
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

The source of the HTML file of the Mitsubishi Electric site can be displayed
in Internet Explorer® with the following procedure.

Methods for displaying the source (operation example using Internet Explorer®)
Right-click the Internet Explorer® window and select [View Source].
Any of the methods listed on the left will display the
Select [View] - [Source] on the toolbar.
source at the bottom of the Web browser window.
Press the [F12] key.

Mitsubishi Electric site The screen shows a display example when Internet Explorer® is used.

3
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

4 Source display
of HTML file
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

HTML rules consist of a simple structure and character strings. HTML can be created easily.

6
1
1. BASICS OF CREATING HTML <TAGS>

BASICS OF CREATING HTML < TAGS >

About HTML HTML Structure Basic Rules About Tags Tag Types Naming Files

1.2 HTML Structure

Creating a Web page requires a language for writing the Web page, and there are various languages other than HTML such as
XHM, SGML, and XHTML.

Structure of HTML and meaning of each area

The figure below illustrates the basic structure of HTML and the meaning of each area.

Area that declares the HTML version and that the document
2
Declaration area (start)

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
was created with HTML

Area for information related to the Web page such as the title
Information area and character code

Area that specifies the text, images, and other such items to be
Body area displayed in Web browsers

Declaration area (end) Area that indicates the end of the HTML 3

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
HTML example
This example is a configuration that contains the minimum number of tags to write in an HTML file. This is a legal configuration,
so this file can be displayed in a Web browser.

Notepad

File Edit Format View Help

<!DOCTYPE html>
Declaration area (start)
<html lang="en">

<head>
4
<meta charset="UTF-8">
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

Information area
<title>Web Server Page</title>

</head>

<body>

Images and document contents Body area

</body>

</html> Declaration area (end)

7
1
1. BASICS OF CREATING HTML <TAGS>
BASICS OF CREATING HTML < TAGS >

About HTML HTML Structure Basic Rules About Tags Tag Types Naming Files

Elements of HTML documents

An HTML document consists of many elements. The following table lists some basic elements.

DOCTYPE declaration
<!DOCTYPE html> This tag is written at the beginning of an HTML document to declare the version of HTML.
<!DOCTYPE html> means that “This HTML is written in HTML5”.

html element
2 <html>: Start tag
</html>: End tag This tag pair indicates that the language of this document is HTML.
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

All elements should be written within the range between <html> and </html>.

head element
<head>: Start tag
</head>: End tag The information about the entire document, such as meta information and title information, is written
within the range between <head> and </head>.

meta element
<meta> Meta information (meta data) means “the information about information”. This tag indicates the
information about this HTML document. <meta charset="UTF-8"> means that “This HTML document is
written with the character code UTF-8”.

<title>: Start tag title element

</title>: End tag This tag pair specifies the title to be displayed in the title bar of the Web browser.

3 body element
<body>: Start tag
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

</body>: End tag This tag pair specifies the text, images, and tables to be displayed on the Web page.
Only the contents within the range between <body> and </body> are displayed on the Web page.

Entering tags with alphabet characters

The characters used for HTML tags are not case-sensitive, so <html> and <HTML> mean the same. In this guide, tags are written
in lowercase.

4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

8
1
1. BASICS OF CREATING HTML <TAGS>

BASICS OF CREATING HTML < TAGS >

About HTML HTML Structure Basic Rules About Tags Tag Types Naming Files

1.3 Basic Rules About Tags

In HTML, all information is written with “tags”. There are tags specified for a wide variety of items including paragraphs, line
breaks, and images.
This section explains the basic way of using tags.

What is a tag?

A tag is a symbol or a mark such as <html> or <head> that is used for creating HTML. The way to use tags is determined by the
2
rules of HTML. A document that is written according to the rules of HTML is called an “HTML document”. HTML is provided in

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
several versions including “HTML1.0” and “HTML4.01”, each of which has different specifications for the writing format and the
available tags.

Structure of tags

Tags can broadly be separated into the two types shown below.

Classification Format Description

The written details are nested in the tag. The <tag name> tag is called
Nestable tag <tag name> to </tag name>
the start tag and the </tag name> tag is called the end tag.
Some tags are used in a stand-alone manner. (Examples: <meta> tag,
Singular tag <tag name>
<img> tag, and others)

It is also possible to create a layered structure by writing tags within the contents of other tags. Note that although HTML is basically
written as a layered structure of tags, the deeper the layers, the more difficult the document is to read. 3

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
 Nested tag structure

Notepad

File Edit Format View Help

<head>
<meta charset="UTF-8">
Range of the head tags
<title>Web Server Page</title> Range of the title tags

</head>

<body>
Images and document contents Range of the body tags 4
</body>
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

Range of the html tags

</html>

Tags and elements

An “element” refers to the entire content enclosed by the start tag and end tag.

Element

<title>Web Server Page</title>

Start tag Contents End tag

Single-byte spaces after the start tag and before the end tag are ignored. Also, two or more consecutive single-
Point byte spaces within the tag contents are handled as if they were just one single-byte space.

9
1
1. BASICS OF CREATING HTML <TAGS>
BASICS OF CREATING HTML < TAGS >

About HTML HTML Structure Basic Rules About Tags Tag Types Naming Files

1.4 Tag Types

This section introduces tags that are commonly used with HTML.

Tags for writing the page structure

Web page
<header> Writes the contents that are displayed at the
header  Page title and similar contents
Header top of the Web page.
2
<footer> Writes the contents that are displayed at the
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

Footer bottom of the Web page. footer  Copyright display and similar contents

Tags for writing the document

The <h1> to <h6> tags are used to write the document headings. The larger the number in the tag, the smaller
the font size of the heading.

HTML document Web browser display

<h1>h1 heading</h1> h1 heading

<h1> to <h6>
Headings
<h2>h2 heading</h2> h2 heading
<h3>h3 heading</h3>
h3 heading
<h4>h4 heading</h4> h4 heading
3 <h5>h5 heading</h5>
h5 heading
<h6>h6 heading</h6> h6 heading
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

The <p> to </p> tags are used to write a paragraph in the document.

HTML document Web browser display

<p>Paragraph 1</p> Paragraph 1

<p> <p>Paragraph 2</p>
Paragraph Paragraph 2

Long sentences automatically breaks at the right edge of the display area, but this tag can be used to insert a
line break at the specified location.
4
HTML document Web browser display
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

The line break position can be specified as The line break position can be specified as
<br>
desired with the <br> tag. desired with the
Line break tag.

Line breaks within an HTML file are ignored. For an easy-to-understand display, use the <p> and <br> tags
Point effectively.

10
1
1. BASICS OF CREATING HTML <TAGS>

BASICS OF CREATING HTML < TAGS >

About HTML HTML Structure Basic Rules About Tags Tag Types Naming Files

Use the <table> tag to create a table. Use the <tr> and <td> tags to write the elements in the table, as shown in
the following example. For tag details, refer to Table in 7.2 HTML Tag References.

HTML document Web browser display

<table>
<tr>
<table>
<td>Apple 1</td><td>Apple 2</td> <td> </td> <td> </td>
Table
</tr> <tr> Apple 1 Apple 2 </tr>
<td>Orange 1</td><td>Orange 2</td> <tr> Orange 1 Orange 2 </tr> 2
</tr>

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
</table>

Other tags

To display an image, use the <img> tag to specify the image file. Commonly used image file formats are PNG,
JPEG, and GIF. (PNG is the recommended file format.)

Syntax: <img src="image file" title="image title">

HTML document Web browser display
<img>
<img src="company-logo.png" title="company-logo">
Displays
an image
Company Name Logo
3

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
company-logo.png

It is possible to jump to a different page by clicking part of a sentence or an image.

Syntax: <a href="link destination URL">text to click to jump to the link destination</a>
<a>
HTML document Web browser display
Anchor
(for <a href="2.html">Next</a> 1 2
jumping
<a href="1.html">Back</a>
to a link Next Back

destination)

4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

Related Page 7.2 HTML Tag References

11
1
1. BASICS OF CREATING HTML <TAGS>
BASICS OF CREATING HTML < TAGS >

About HTML HTML Structure Basic Rules About Tags Tag Types Naming Files

1.5 Naming Files

Characters that can be used for file names

The characters listed in the table below can be used.

Type Character
Single-byte alphabet abcdefghijklmnopqrstuvwxyz

2 Single-byte number 0123456789

Single-byte symbol (limited) - (hyphen), _ (underscore)
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

Naming Files

The name of the HTML file that is used as the top page of user Web pages must be “index.html”. The HTML files used for other
pages can be named as desired.

men u. html
Ex.
Name Extension

Why are there two file types: .html and .htm?

The normal extension for HTML files is “.html”, but personal computers that have old operating systems (MS-DOS®
Further and Windows® 3.1) could only handle extensions with up to three characters, so the extension “.htm” was used
3 information instead of “.html” and the extension “.jpg” was used instead of “.jpeg”. This is why the .html and .htm extensions both
exist. Both .html and .htm can be used, but only one of these extensions can be used according to the Web server
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

setting specifications.

uFile access mechanism

In the address bar of the Web browser, enter the IP address of the FX5 CPU module specified in the parameter to access the Web
server and call “index.html” automatically.

Only the file name of

Built-in Web server of the FX5 CPU the top page is fixed to
(Host station IP address: 192.168.1.10) “index.html”.

http://192.168.1.10 File
Title
Edit View Favorites Tools Help

4 Enter the above value.

Top page index.html
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

level.html historical.html device.html

Use easy-to-understand file names that match the display contents. Complicated file names and serial numbers
Point can be easily mistaken when entering URLs directly or setting links.

12
1
2. CREATING AND DISPLAYING SIMPLE HTML DOCUMENTS ON A PERSONAL COMPUTER

BASICS OF CREATING HTML < TAGS >

Preparation HTML File Creation Web Browser Display HTML Source Display

Use Notepad in Windows® to create an HTML file and display it in a Web browser (Internet Explorer®).
Moreover, learn the method of using a Web browser to check the HTML (source) of the displayed Web page.

2.1 Preparation

Prepare a personal computer running Windows® that complies with the following specifications.

Microsoft® Windows® 10
Personal computer
running Windows®
Microsoft® Windows® 8 2
Microsoft® Windows® 7

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
Required software Notepad For creating HTML files
(Standard software
included in Windows®) Internet Explorer 11® Web browser For displaying and checking created HTML files

2.2 HTML File Creation

This section uses an example in Windows® 10 to describe the procedure of using Notepad, which is included in Windows® as
standard, to actually create an HTML file and display it in a Web browser.

Opening Windows® Notepad

Open Notepad by any of the following methods.

uUsing a shortcut key uFrom the Start menu 3

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
Press the [Windows® logo ] + [R] keys simultaneously.
Click Notepad under Windows® Accessories.
Change “control” to “notepad”. Click [OK].

*: The window examples are from Windows® 10.

4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

Notepad window

13
1
2. CREATING AND DISPLAYING SIMPLE HTML DOCUMENTS ON A PERSONAL COMPUTER
BASICS OF CREATING HTML < TAGS >

Preparation HTML File Creation Web Browser Display HTML Source Display

Entering the HTML document

HTML is composed entirely of text, so Web pages can be created and edited through the use of a general-purpose text editor.

Enter the HTML document on

the right in Notepad.
<!DOCTYPE html>
<html>
<head>
2 <title>XX Manufacturing Equipment</title>
<meta>
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

</head>
<body>
<p><u>XX Manufacturing Equipment XX Process</u></p>
<p>Production Status</p>
</body>
</html>

Saving the created HTML document into a file

[Toolbar: File]
Click [Save As].
<!DOCTYPE html>
3 <html>
<head>
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

<title>XX Manufacturing Equipment</title>

Set the name of the HTML file of

the top page to “index.html”.

4 Select [UTF-8] for the Encoding.

Click [Save].
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

index . html
File name Extension

Save the top page with the file name “index.html”.

Pages other than the top page can be named as
desired, but use the extension “html”.

14
1
2. CREATING AND DISPLAYING SIMPLE HTML DOCUMENTS ON A PERSONAL COMPUTER

BASICS OF CREATING HTML < TAGS >

Preparation HTML File Creation Web Browser Display HTML Source Display

2.3 Web Browser Display

Double-click the “index.html”

file saved in the previous step.

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
uWeb browser display window
Internet Explorer® starts automatically and displays the Web page.

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

15
1
2. CREATING AND DISPLAYING SIMPLE HTML DOCUMENTS ON A PERSONAL COMPUTER
BASICS OF CREATING HTML < TAGS >

Preparation HTML File Creation Web Browser Display HTML Source Display

2.4 Displaying HTML Source in the Web Browser

Use one of the following methods to display the line numbers and HTML document at the bottom of the Web browser window.
• Right-click the Internet Explorer® window and select [View Source].
• Select [View] - [Source] on the toolbar.
• Press the [F12] key.

2
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

3
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

16
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

This chapter describes how to create a user Web page by using HTML files (the Web server function library) that can be obtained
from the Mitsubishi Electric representative.

3.1 Before Starting

Creation flow and related pages

This section explains the procedure for creating the Web page.

2
3.1 Before Starting

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
Check the Web page to create and the
procedure.

3.2 Preparation

Perform the advance preparation.

3.3 Reuse

User Web page library (index.html) overview

3
Learn the HTML to reuse. File correlations

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
index.html HTML document

3.4 User Web Page Creation

Create the Web page.

Menu page creation

Pressure meter page creation

Check whether the created HTML
can be displayed in a Web browser.
Temperature change page creation

4
Device monitor page creation
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

Insert the SD memory card in the PLC and

display the user Web page.

3.6 Troubleshooting

Refer to this if necessary. Check the points regarding what to do when

problems occur.
3.5 File Save Destination

Change the file save destination.

17
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Overall user Web page to create

In this chapter, the JavaScript and CGI objects that can be used with user Web pages are used to create an HTML page like that
shown below.
For details on and to change JavaScript and CGI objects, refer to their chapters.

• JavaScript details 5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)
Related Page
• CGI details 6. CREATING A DEVICE MONITOR WINDOW WITH CGI

2
uMenu: Page switching uLevel display: Pressure status display
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

Reuse the user Web page library to create the

Create a new user Web page.
component.

Refer to 3.4 User Web Page Creation Refer to 3.4 User Web Page Creation
- Menu page creation. - Pressure meter page creation.

Company logo 1. Pressure Meter

Menu
Switch the window.
1. Pressure Meter

2. Temperature Change Graph

123 22500

3. Device Monitor
3 Menu
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

u Historical graph: Temperature change

uDevice monitor: Device reading/writing
display

Reuse the CGI example in chapter 6 to create the Reuse the user Web page library to create the
component. component.

Refer to 3.4 User Web Page Creation Refer to 3.4 User Web Page Creation
- Device monitor page creation. - Temperature change page creation.

3. Device Monitor 2. Temperature Change Graph

Device name Data type Value
4 D10
D11
16-bit integer
32-bit integer
1234
123456
M0 Bit 0
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

Read

Device name Data type Value

D10 16-bit integer 3 Write
D11 32-bit integer 10 Write
M0 Bit 1 Write

Menu Menu

18
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

3.2 Preparation

Relevant • Web Server Function Application Guide Using Web Page Startup and Introduction
documents [manual number: L(NA)08643ENG]
Related page • 6. USING USER WEB PAGE

STEP 1. Prepare Web server HTML files.

Obtain the user Web page library from the Mitsubishi Electric representative. 2
Decompress the obtained file.

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
STEP 2. Confirm files and folders.

Check that the structure of the obtained files and folders is as shown below.

[File and folder structure]

User Web page library files

An explanation is given in STEP 3.

User Web page
This file is reused.
WWW USER index.html

User Web page library files

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
User Web page library files
JavaScript
FUserWebLib.js

User Web page library files

Style Sheet

css UserWebStyle.css

User Web page library files

PNG image file

img sample0.png

PNG image file An explanation is given in STEP 4.

These files are not used.
sample1.png
4
PNG image file
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

sample2.png

19
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

uFiles after Web page creation

Menu Web page

The name is the same as before the files were created, but
the Web page display details are different.
WWW USER index.html

Level display Web page

level.html
2
Historical graph Web page
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

historical.html

Device monitor Web page

device.html Created files

Login Web page

log-in_User.html

JavaScript

User Web page library

FUserWebLib.js
files for reuse

Style Sheet

3 css UserWebStyle.css
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

For the buttons used on the menu Web page

Style Sheet

button-menu.css

For the button used to return to the menu Web page

Style Sheet
button-back.css

Company logo image

png format image file
img companylogo.png Created files

STEP 3. Create HTML files.

Reuse index.html (an HTML file obtained from the Mitsubishi Electric representative) to create the level display Web page (level.
4 html) and the historical graph Web page (historical.html). For the reuse method, refer to 3.3 Reuse.
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

1. Pressure Meter 2. Temperature Change Graph

123 22500

Menu Menu

STEP 4. Delete unnecessary files.

The following image files in the img folder are not used in this guide. Please remove them.

Image file sample0.png sample1.png sample2.png

20
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

3.3 Reuse

“index.html” overview

The relationships between and the display objects of the files contained in the User Web page library are shown in the following
figure.

uFile correlations
2
The JavaScript parameter setting objects and image files written in white on a gray background are not used in the creation

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
example of this guide.

HTML file

index.html
Declaration area

Style Sheet file

Declarations (start)
UserWebStyle.css

File storage location specification

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
Style Sheet JavaScript file

JavaScript
FUserWebLib.js
JavaScript parameter settings

Objects (in order listed)

Information area

• Data Block object

• Historical graph object

• Logout button object

• Level display object

• Read button object 4

SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

• Write button object Image files

• Figure display object

sample0.png
• Image display object
sample1.png
Body area

HTML body sample2.png

Not used
Declaration area

Declarations (end)

21
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

index.html HTML document

The user Web page library HTML document (index.html) that is reused when creating the level display Web page (level.html) and
the historical graph Web page (historical.html) is shown below.

Line No. HTML

1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
2 3 <head>
4 
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
7 
8 <title>Sample</title>
9 <link href="./css/UserWebStyle.css" rel="stylesheet" media="all" />
10 
11 <script src="./FUserWebLib.js"></script>
12 
13 
14 <script>
15 var updateInterval = 5;
16 var dspLanguage = 'en-US';
17
18 // Data Block object
19 temp = [];
3 20 for(var i = 0; i < 8; i++){
21 temp.push({
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

22 dsp: 'X' + i,
23 name: 'X' + i,
24 base: 'B',
25 format: 6
26
27 });
28 }
29 for(var i = 0; i < 8; i++){
30 temp.push({
31 dsp: 'Y' + i,
32 name: 'Y' + i,
33 base: 'B',
34 format: 6
35
36 });
4 37 }
dataBlockParam = {
38
dev: temp,
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

39
40 direction: 1,
41 blkSize: 8,
42 devNamDisp: 1,
43 devNamCol: 'white',
44 devNamBkCol: '#808080',
45 devNamWidth: 100,
46 devNamHeight: 40,
47 devValCol: 'blue',
48 devValBkCol: 'white',
49 devValWidth: 80,
50 devValHeight: 50,
51 lnCol: 'blue',
52 xPos: 20,
53 yPos: 40
54 }
55 WSDatblk(dataBlockParam);
56

22
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Line No. HTML

57 // Historical graph object

58 temp = [];
59 num = 2;
60 temp.push({
61 devName: 'D0',
62 lnCol: 'red',
63 });
64 temp.push({ 2
65 devName: 'D1',

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
66 lnCol: 'blue',
67 });
68 hstGrpParam = {
69 xPos: 20,
70 yPos: 250,
71 grElmNum: num,
72 devFormat: 0,
73
74 grElm: temp,
75 grBkCol: '#F0F0F0',
76 dspCol: 'black',
77 pointNum: 20,
78 upper: 32767, //100,
79 lower: -32768, //0,
80 xLine: 9,
81 yLine: 5, 3
82 grHeight: 380,

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
83 grWidth: 550,
84 upperMargin: 15,
85 leftMargin: 75,
86 lowerMargin: 55,
87 rightMargin: 25
88 }
89 WSHstgrp(hstGrpParam);
90
91 // Logout button object
92 logoutBtnParam = {
93 xPos: 20,
94 yPos: 730,
95 btnHeigh: 26,
96 btnWidth: 100,
97 btnTxt: 'Log Out'
98 } 4
99 WSLogoutBtn(logoutBtnParam);
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

100

23
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Line No. HTML

101 // Level display object

102 WSLevel({
103 devName: 'D0',
104 direction: 0,
105 levCol: 'mediumblue',
106 upperCol: 'red',
107 lowerCol: '#00FF00',
2 108 bkCol: 'white',
109 upperVal: 32767,
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

110 lowerVal: -32768,

111 upperAlmV: 20000,
112 lowerAlmV: -20000,
113 dspAlmLn: 1,
114 almLnCol: 'black',
115 levLength: 400,
116 levWidth: 150,
117 dspVal: 1,
118 valFormat: 0,
119
120 devValCol: 'white',
121 devValBkCol: 'black',
122 devValWidth: 150,
123 devValHeight: 50,
124 xPos: 700,
3 125 yPos: 250,
126 });
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

127
128 // Write button object
129 WSWrtBtn({
130 devName: 'X0',
131 devBase: 'B',
132 devFormat: 6,
133
134 wrVal: '1',
135 wrBtn: 'write_btn',
136 btnTxt: 'OK',
137 btnWidth: 150,
138 btnHeigh: 50,
139 wrComfirm: 1,
140 language: 1,
141 xPos: 700,
4 142 yPos: 40,
143 });
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

144
145 // Write button object
146 WSWrtBtn({
147 devName: 'X0',
148 devBase: 'B',
149 devFormat: 6,
150
151 wrVal: '0',
152 wrBtn: 'write_btn',
153 btnTxt: 'NG',
154 btnWidth: 150,
155 btnHeigh: 50,
156 wrComfirm: 1,
157 language: 1,
158 xPos: 700,
159 yPos: 130,
160 });
161

24
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Line No. HTML

162 // Figure display object

163 WSFigure({
164 devName: 'D0',
165 devFormat: 0,
166
167 figType: 'tri',
168 figHeight: -30,
169 figWidth: 60, 2
170 defCol: 'red',

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
171 rangeNum: 2,
172 range:[
173 {
174 low: -5000,
175 high: 5000,
176 col: 'green',
177 },
178 {
179 low: -10000,
180 high: 10000,
181 col: 'blue',
182 },
183 ],
184 xPos: 300,
185 yPos: 730,
186 }); 3
187

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
188 // Image display object
189 WSPicture({
190 devName: 'D0',
191 devFormat: 0,
192
193 pictHeight: 30,
194 pictWidth: 30,
195 defPicture: './img/sample0.png',
196 rangeNum: 2,
197 range:[
198 {
199 low: -5000,
200 high: 5000,
201 picture: './img/sample1.png',
202 },
203 { 4
204 low: -10000,
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

205 high: 10000,

206 picture: './img/sample2.png',
207 },
208 ],
209 xPos: 200,
210 yPos: 730,
211 }); </script>
212 </head>
213 <body>
214 </body>
215 </html>

25
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

3.4 User Web Page Creation

Menu page creation

An image and buttons for switching the Web page are displayed on the page created with this example. Use a Style Sheet to
design the buttons for switching the Web page.

This Web page does not reuse index.html.

2
uSpecifications
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

[Design example]

Company logo Image display Background color

• companylogo.png • Color name: silver
Menu • Color code: #c0c0c0
Text display

1. Pressure Meter
Web page switching
2. Temperature Change Graph button display Link destination
• Design (Style Sheet) • level.html
• Page switching • historical.html
3. Device Monitor
• device.html

3
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

uFunctions to use
Reference
Function Creation method Example/special note
section
Background color Style Sheet Write a Style Sheet inside the HTML file. 7.1
Use an HTML tag to display the image.
Image display <img> tag
<img src="image file name" alt="alternatively displayed text">
Font size <h3></h3> tags <h3>Heading 3</h3> 7.2
Text display Underline <u></u> tags <u>Text in this range is underlined.</u>
Paragraph <p></p> tags Use <p></p> to indicate paragraphs and insert line breaks.
When the button is clicked, its display changes to that shown
on the right.
Design Style Sheet
Web page Text Text
switching button
Before being clicked After being clicked 7.1
4 display
(menu selection) Page switching <a></a> tags <a href="link destination URL">Displayed text</a>
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

Even if the width of the Web page is changed, the buttons

Centering Style Sheet
remain displayed in the center.

uFiles to create
File type File name Remarks
The file name of the initial user Web server page that is displayed
HTML index.html
is “index.html”. Do not change this name.
This file can be named as desired. If you change it, also change the file name
Image companylogo.png
of the image files in the <img> tags in the link settings of the HTML file.
This file can be named as desired. If you change it, also change the file name
Style Sheet button-menu.css of the Style Sheet file in the link settings of the HTML file.

26
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

uCreation procedure

STEP 1. Create a new HTML file.

For details on operations, also refer to the following.

Related Page
2. CREATING AND DISPLAYING SIMPLE HTML DOCUMENTS ON A PERSONAL COMPUTER

1. Start Notepad in Windows®.

2. Create the parts of the following HTML file from <!DOCTYPE html> to </html>.
3. On the Notepad toolbar, select [File] - [Save As].
2

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
4. In the File name field, enter “index.html”, and then click [Save]. Save the file in an easy-to-understand location.

[HTML]

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

<title>Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">

<link href="./css/button-menu.css" rel="stylesheet" media="all"/>

<style> 3
body {
background-color: #c0c0c0;

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
}
</style>

<style type="text/css">

</style>
</head>
<body>
 4
<img src="./img/companylogo.png" alt="" width="132" height="36" border="0" />

SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

<h2><u>Menu</u></h2>

<div class="web-center">
<p>
<a href="index1.html" class="button1">1. Pressure Meter</a>
</p>
<p>
<a href="index2.html" class="button2">2. Temperature Change Graph</a>
</p>
<p>
<a href="index3.html" class="button3">3. Device Monitor</a>
</p>
</div>
</body>
</html>

27
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

STEP 2. Create Style Sheet files.

1. Start Notepad in Windows®.

2. In Notepad, enter all the Style Sheet details shown below.
3. On the Notepad toolbar, select [File] - [Save As].
4. In the File name field, enter “button-menu.css”, and then click [Save].
For Style Sheet details, refer to 7.1 Style Sheet References.

2 [Design example] Use different colors to indicate the designs of the Web page switching buttons.
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

Company logo
Menu

1. Pressure Meter

2. Temperature Change Graph

3. Device Monitor

3
[Style Sheet]
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

class attributes: button3 class attributes: button2 class attributes: button1

a.button3{ a.button2{ a.button1{

display: block; display: block; display: block;
text-decoration: none; text-decoration: none; text-decoration: none;
height: 35px; height: 35px; height: 37px;
width: 250px; width: 250px; width: 250px;
line-height: 37px; line-height: 37px; line-height: 37px;
text-align: center; text-align: center; text-align: center;
color: #ffffff; color: #fff; color: #fff;
background: #3cb371; background: #f4a460; background: #4169e1;
-webkit-transition: 0.3s; -webkit-transition: 0.3s; -webkit-transition: 0.3s;
-moz-transition: 0.3s; -moz-transition: 0.3s; -moz-transition: 0.3s;
-o-transition: 0.3s; -o-transition: 0.3s; -o-transition: 0.3s;
-ms-transition: 0.3s; -ms-transition: 0.3s; -ms-transition: 0.3s;
transition: 0.3s; transition: 0.3s; transition: 0.3s;
} } }
4 a.button3:hover{
background: #fff;
a.button2:hover{
background: #fff;
a.button1:hover{
background: #fff;
color: #3cb371; color: #f4a460; color: #4169e1;
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

border:solid 1px #3cb371; border:solid 1px #f4a460; border:solid 1px #4169e1;

} } }

28
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

STEP 3. File storage destination.

Store the created files so that the file structure is as shown below.

[File structure after organization]

index.html
index.html
Store this file in the “USER” folder.
WWW USER 2
Log-in_User.html

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
FUserWebLib.js

UserWebStyle.css

css
button-menu.css
button-menu.css
Store this file in the “css” folder.

companylogo.png

img

3
STEP 4. Check whether the page can be displayed correctly in a Web browser.

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
Double-click the “index.html” file.

4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

29
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

Pressure meter page creation

This section explains the procedure for creating the pressure meter page.
Level display objects and a button for switching the Web page are displayed on the page created with this example. Reuse and
edit “index.html” to create the level display objects and use a Style Sheet to design the button for switching the Web page.

uSpecifications
[Design example]
2
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

Text display Background color

1. Pressure Meter
• Color name: skyblue
• Color code: #87ceeb

Level display objects

123 22500
Web page switching
Menu button display Link destination
• Design (Style Sheet) • index.html
• Page switching

uFunctions to use
3
Reference
Function Creation method Example/special note
section
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

Background color Style Sheet Write a Style Sheet inside the HTML file. 7.1
Use an HTML tag to display the image.
Image display <img> tag
<img src="image file name" alt="alternatively displayed text">
Font size <h3></h3> tags <h3>Heading 3</h3> 7.2
Text display Underline <u></u> tags <u>Text in this range is underlined.</u>
Paragraph <p></p> tags Use <p></p> to indicate paragraphs and insert line breaks.
Level display objects (two) Reuse the “level display object” in the HTML file in the user Web page library.
Devices D0 and D1
Change the evLength:, levWidth:, devValWidth:, and 5.4
Size
JavaScript devValHeight: parameters.
Display starting
Change the xPos: and yPos: parameters.
coordinates
When the button is clicked, its display changes to that shown
4 Design Style Sheet
on the right.

Web page Text Text

SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

switching button
Before being clicked After being clicked 7.1
display
(return to the menu) Page switching <a></a> tags <a href="link destination URL">Displayed text</a>
Display starting Embed a Style Sheet in the <a> tag to display the button in the
Style Sheet
coordinates lower-right corner.

uFiles to create
File type File name Remarks
Linked from the menu page.
HTML level.html
If the file name is changed, the menu page needs to be corrected.
This file can be named as desired. If you change it, also change the file name
Style Sheet button-menu.css
of the Style Sheet file in the link settings of the HTML file.

uRequired files
File type File name Remarks
JavaScript FUserWebLib.js Required for displaying the level display objects.
Style Sheet UserWebStyle.css Use a <link> tag to set links to the files on the left.

30
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

uCreation procedure
Create this component by reusing the file “index.html” included in the user Web page library obtained from the Mitsubishi Electric
representative.

STEP 1. Open the file to reuse in Notepad.

In Notepad, open the “index.html” file from the user Web page library.

Notepad

File Edit Format View Help

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

<title>Sample</title>
<link href="./css/UserWebStyle.css" rel="stylesheet" media="all" />

<script src="./UserWebLib.js"></script>


<script>
var updateInterval = 5;
var dspLanguage = 'en-US';

// Data Block object

temp = [];
for(var i = 0; i < 8; i++){
temp.push({
3
dsp: 'X' + i,

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
name: 'X' + i,
base: 'B',
format: 6
});
}

STEP 2. Save the file under a different name: “level.html”.

1. On the Notepad toolbar, select [File] - [Save As].

2. In the File name field, enter “level.html”, and then click [Save].

This prevents the original file from being overwritten incorrectly with the HTML file created by reusing the original.

STEP 3. Delete the lines (sections) that are unnecessary for the Web page being created from the HTML. 4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

Delete everything other than the sections for the level display objects.
For details on the lines to delete, refer to the next page.

Starting with STEP 3, use “level.html”. Exercise caution to avoid correcting the wrong file.

Before change After change

X0 X1 X7 OK
NG
X0 X1 X7

Level display
object (first)

Log Out 0

31
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

Sections to reuse

To create a Web page that uses a pressure meter (level display objects), reuse the sections indicated by “Do not delete.” in the
following table from the user Web page library (index.html) and delete the other sections indicated by “Delete”.

Pressure
Line No. HTML
meter

1 <!DOCTYPE html>
2 2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

4 
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

Do not delete.
7 
8 <title>Sample</title>
9 <link href="./css/UserWebStyle.css" rel="stylesheet" media="all" />
10 
11 <script src="./FUserWebLib.js"></script>
12 
13 
14 <script>
15 var updateInterval = 5;
16 var dspLanguage = 'en-US';
17
18 // Data Block object
3 19 temp = [];
20 for(var i = 0; i < 8; i++){
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

21 temp.push({
22 dsp: 'X' + i,
23 name: 'X' + i,
24 base: 'B',
25 format: 6
26
27 });
28 }
29 for(var i = 0; i < 8; i++){
30 temp.push({
31 dsp: 'Y' + i,
32 name: 'Y' + i,
33 base: 'B',
34 format: 6
35
4 36 });
Delete.

37 }
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

38 dataBlockParam = {
39 dev: temp,
40 direction: 1,
41 blkSize: 8,
42 devNamDisp: 1,
43 devNamCol: 'white',
44 devNamBkCol: '#808080',
45 devNamWidth: 100,
46 devNamHeight: 40,
47 devValCol: 'blue',
48 devValBkCol: 'white',
49 devValWidth: 80,
50 devValHeight: 50,
51 lnCol: 'blue',
52 xPos: 20,
53 yPos: 40
54 }
55 WSDatblk(dataBlockParam);
56

32
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

Pressure
Line No. HTML
meter

57 // Historical graph object

58 temp = [];
59 num = 2;
60 temp.push({
61 devName: 'D0',
62 lnCol: 'red',
63 }); 2
64 temp.push({

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
65 devName: 'D1',
66 lnCol: 'blue',
67 });
68 hstGrpParam = {
69 xPos: 20,
70 yPos: 250,
71 grElmNum: num,
72 devFormat: 0,
73
74 grElm: temp,
75 grBkCol: '#F0F0F0',
76 dspCol: 'black',
77 pointNum: 20,

Delete.
78 upper: 32767, //100,
79 lower: -32768, //0,
80 xLine: 9, 3
81 yLine: 5,

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
82 grHeight: 380,
83 grWidth: 550,
84 upperMargin: 15,
85 leftMargin: 75,
86 lowerMargin: 55,
87 rightMargin: 25
88 }
89 WSHstgrp(hstGrpParam);
90
91 // Logout button object
92 logoutBtnParam = {
93 xPos: 20,
94 yPos: 730,
95 btnHeigh: 26,
96 btnWidth: 100,
97 btnTxt: 'Log Out' 4
98 }
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

99 WSLogoutBtn(logoutBtnParam);
100

33
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

Pressure
Line No. HTML
meter

101 // Level display object

102 WSLevel({
103 devName: 'D0',
104 direction: 0,
105 levCol: 'mediumblue',
106 upperCol: 'red',
2 107 lowerCol: '#00FF00',
108 bkCol: 'white',
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

109 upperVal: 32767,

110 lowerVal: -32768,
111 upperAlmV: 20000,

Do not delete.
112 lowerAlmV: -20000,
113 dspAlmLn: 1,
114 almLnCol: 'black',
115 levLength: 400,
116 levWidth: 150,
117 dspVal: 1,
118 valFormat: 0,
119
120 devValCol: 'white',
121 devValBkCol: 'black',
122 devValWidth: 150,
123 devValHeight: 50,
3 124 xPos: 700,
125 yPos: 250,
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

126 });
127
128 // Write button object
129 WSWrtBtn({
130 devName: 'X0',
131 devBase: 'B',
132 devFormat: 6,
133
134 wrVal: '1',
135 wrBtn: 'write_btn',
136 btnTxt: 'OK',
137 btnWidth: 150,
138 btnHeigh: 50,
139 wrComfirm: 1,
140 language: 1,
4 141 xPos: 700,
142 yPos: 40,
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

143 });
Delete.

34
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

Pressure
Line No. HTML
meter

162 // Figure display object

163 WSFigure({
164 devName: 'D0',
165 devFormat: 0,
166
167 figType: 'tri',
168 figHeight: -30, 2
169 figWidth: 60,

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
170 defCol: 'red',
171 rangeNum: 2,
172 range:[
173 {
174 low: -5000,
175 high: 5000,
176 col: 'green',
177 },
178 {
179 low: -10000,
180 high: 10000,
181 col: 'blue',
182 },
183 ],
184 xPos: 300,
185 yPos: 730, 3

Delete.
186 });

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
187
188 // Image display object
189 WSPicture({
190 devName: 'D0',
191 devFormat: 0,
192
193 pictHeight: 30,
194 pictWidth: 30,
195 defPicture: './img/sample0.png',
196 rangeNum: 2,
197 range:[
198 {
199 low: -5000,
200 high: 5000,
201 picture: './img/sample1.png',
202 }, 4
203 {
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

204 low: -10000,

205 high: 10000,
206 picture: './img/sample2.png',
207 },
208 ],
209 xPos: 200,
210 yPos: 730,
211 }); </script>
212 </head>
delete.
Do not

213 <body>
214 </body>
215 </html>

35
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

STEP 4. Add a </script> tag.

Add a </script> tag on line 44 (blank).

Line No. HTML

…

…
18 // Level display object
…

2 41
42
xPos:
yPos:
700,
250,
43 });
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

44 </script> Addition
45 </head>
46 <body>
47 </body>
48 </html>

STEP 5. Correct items such as the size and display coordinates of the (first) level display object.

Correct items such as the size and display coordinates of the (first) level display object.

Line No. HTML

…

18 // Level display object

19 WSLevel({
3 20 devName: 'D0', Device specification
…

…
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

32 levLength: 400, 200,

Level size
33 levWidth: 150, 100,
…

39 devValWidth: 150, 100,

Device value display size
40 devValHeight: 50, 50,
41 xPos: 700, 100,
Display starting coordinates
42 yPos: 250, 50,
43 });

Before change After change

4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

36
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

STEP 6. Add a (second) level display object.

Line No. HTML

…

18 // Level display object

…

41 xPos: 100,
42 yPos: 50,
Copy lines 18 to 43 and paste these 2
43 });
lines between lines 43 and 44.

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
45 </script>
46 </head>
47 <body>
48 </body>
49 </html>

STEP 7. Correct the display position and size of the (second) level display object.

Line No. HTML

…

44 // Level display object

45
46
WSLevel({
devName: 'D0', 'D1', Device specification
3

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
…

66 devValHeight: 50,
67 xPos: 100, 300, Display starting coordinates
68 yPos: 50,
69 });
70 </script>
71 </head>
72 <body>
73 </body>
74 </html>

Before change After change

4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

37
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

STEP 8. Set the background color.

Add the HTML for the background color between lines 13 and 14.
If the background color is white, there is no need to add this HTML.

Line No. HTML

…
…

10 
2 11 <script src="./FUserWebLib.js"></script>
12 
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

13

</style>
14 <script>
15 var updateInterval = 5;
16 var dspLanguage = 'en-US';

STEP 9. Change the page title and add a Web page switching button.

Change the page title on line 8, and then add the HTML for the Web page switching button between lines 77 and 78.

3
Line No. HTML
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

8 <title>1. Pressure Meter</title> Page title text display

…

77 <body>

<h2><u>1. Pressure Meter</u></h2>

<a href="index.html" class="menu" style="position: absolute; left: 350px; top: 550px;" />Menu</a>
78 </body>
79 </html>

Before change After change

1. Pressure Meter
4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

38
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

STEP 10. Add the <link> setting to Style Sheet file for Web page switching button.
Add the HTML for the <link> settings of the Style Sheet file for the Web page switching button between lines 9 and 10.

Line No. HTML

…

7

8 <title>1. Pressure Meter</title>
9 <link href="./css/UserWebStyle.css" rel="stylesheet" media="all" />
2
<link href="./css/button-back.css" rel="stylesheet" media="all" />

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
10

STEP 11. Create Style Sheet files for the Web page switching button.

1. Start Notepad in Windows®.

2. Create the Style Sheet shown below.
3. On the Notepad toolbar, select [File] - [Save As].
4. In the File name field, enter “button-back.css”, and then click [Save].

This button is used on the “pressure meter page”, “temperature change page”, and “device monitor page”.

[Design example] Indicate the design of the Web page switching button.

3
1. Pressure Meter

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
123 22500

[Style Sheet]
class attributes: menu

a.menu{
display: block; 4
text-decoration: none;
height: 37px;
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

width: 250px;
line-height: 37px;
text-align: center;
color: #fff;
background: #4169e1;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}
a.menu:hover{
background: #fff;
color: #4169e1;
border:solid 1px #4169e1;
}

39
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

STEP 12. File storage destination.

Store the created files so that the file structure is as shown below.

[File structure after organization]

index.html

2 WWW USER
level.html
level.html
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

Store this file in the “USER” folder.

Log-in_User.html

FUserWebLib.js

UserWebStyle.css

css
button-menu.css

button-back.css
button-back.css
Store this file in the “css” folder.
3
companylogo.png
companylogo.png
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

Store this file in the “img” folder.

img

STEP 13. Check whether the page can be displayed correctly in a Web browser.

Double-click the “level.html” file.

If the following dialog box is displayed, click “Allow blocked content”.

Correctly displayed Web page

4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

40
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

Temperature change page creation

This section explains the procedure for creating the temperature change page.
A historical graph object and a button for switching the Web page are displayed on the page created with this example. Reuse
and edit “index.html” to create the historical graph object and use a Style Sheet to design the button for switching the Web page.

uSpecifications
[Design example]

2
Text display Background color
2. Temperature Change Graph

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
• Color name: sandybrown
• Color code: #f4a460

Historical graph object

Web page switching

Menu button display Link destination
• Design (Style Sheet) • index.html
• Page switching

uFunctions to use
Function Creation method Example/special note
Reference 3
section

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
Background color Style Sheet Write a Style Sheet inside the HTML file. 7.1
Font size <h3></h3> tags <h3>Heading 3</h3>
Text display Underline <u></u> tags <u>Text in this range is underlined.</u> 7.2
Paragraph <p></p> tags Use <p></p> to indicate paragraphs and insert line breaks.
Historical graph object Reuse the “historical graph object” in the HTML file in the user Web page library
Devices D0 and D1
Size Change the grHeight and grWidth parameters. 5.4
JavaScript
Display starting
Change the xPos: and yPos: parameters.
coordinates
When the button is clicked, its display changes to that shown
on the right.
Web page Design Style Sheet
switching button Text Text
display Before being clicked After being clicked 7.1 4
(return to the Page switching <a></a> tags <a href="link destination URL">Displayed text</a>
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

menu)
Display starting Embed a Style Sheet in the <a> tag to display the button in
Style Sheet
coordinates the lower-right corner.

uFiles to create
File type File name Remarks
Linked from the menu page.
HTML historical.html
If the file name is changed, the menu page needs to be corrected.
This file can be named as desired. If you change it, also change the file
Style Sheet button-back.css
name of the Style Sheet file in the link settings of the HTML file.

uRequired files
Use the files in the user Web page library as-is.
File type File name Remarks

JavaScript FUserWebLib.js Required for displaying the historical graph object.

Style Sheet UserWebStyle.css Use a <link> tag to set links to the files on the left.

41
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

uCreation procedure
Create this component by reusing the file “index.html” included in the user Web page library obtained from the Mitsubishi Electric
representative.

STEP 1. Open the file to reuse in Notepad.

In Notepad, open the “index.html” file from the user Web page library.

2
Notepad

File Edit Format View Help

DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

<title>Sample</title>
<link href="./css/UserWebStyle.css" rel="stylesheet" media="all" />

<script src="./UserWebLib.js"></script>


<script>
var updateInterval = 5;
var dspLanguage = 'en-US';

// Data Block object

temp = [];
for(var i = 0; i < 8; i++){
temp.push({
dsp: 'X' + i,

3
name: 'X' + i,
base: 'B',
format: 6
});
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

STEP 2. Save the file under a different name: “historical.html”.

1. On the Notepad toolbar, select [File] - [Save As].

2. In the File name field, enter “historical.html”, and then click [Save].

This prevents the original file from being overwritten incorrectly with the HTML file created by reusing the original.

STEP 3. Delete the lines (sections) that are unnecessary for the Web page being created from the HTML.

Delete everything other than the sections for the level display objects.
4
Starting with STEP3, use “historical.html”. Exercise caution to avoid correcting the wrong file.
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

Before change After change

X0 X1 X7 OK
NG
X0 X1 X7

Log Out 0

42
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

Sections to reuse

To create a Web page that uses a temperature change graph (historical graph object), reuse the sections indicated in the
following table from the user Web page library (index.html) and delete all the other sections.

Temperature
Line No. HTML change
graph

1 <!DOCTYPE html> 2
2 <html xmlns="http://www.w3.org/1999/xhtml">

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
3 <head>
4 
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
20 for(var i = 0; i < 8; i++){
21 temp.push({
22 dsp: 'X' + i,
23 name: 'X' + i,
24 base: 'B',
25 format: 6
26
27 });
28 }
29 for(var i = 0; i < 8; i++){
30 temp.push({
31 dsp: 'Y' + i,
32 name: 'Y' + i,
33 base: 'B',
34 format: 6
35 4
36 });
Delete.

SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

37 }
38 dataBlockParam = {
39 dev: temp,
40 direction: 1,
41 blkSize: 8,
42 devNamDisp: 1,
43 devNamCol: 'white',
44 devNamBkCol: '#808080',
45 devNamWidth: 100,
46 devNamHeight: 40,
47 devValCol: 'blue',
48 devValBkCol: 'white',
49 devValWidth: 80,
50 devValHeight: 50,
51 lnCol: 'blue',
52 xPos: 20,
53 yPos: 40
54 }
55 WSDatblk(dataBlockParam);
56

43
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

Temperature
Line No. HTML change
graph

57 // Historical graph object

58 temp = [];
59 num = 2;
60 temp.push({
61 devName: 'D0',
2 62 lnCol: 'red',
63 });
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

64 temp.push({
65 devName: 'D1',
66 lnCol: 'blue',
67 });
68 hstGrpParam = {
69 xPos: 20,
70 yPos: 250,
71 grElmNum: num,

Do not delete.
72 devFormat: 0,
73
74 grElm: temp,
75 grBkCol: '#F0F0F0',
76 dspCol: 'black',
77 pointNum: 20,
78 upper: 32767, //100,
3 79 lower: -32768, //0,
80 xLine: 9,
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

81 yLine: 5,
82 grHeight: 380,
83 grWidth: 550,
84 upperMargin: 15,
85 leftMargin: 75,
86 lowerMargin: 55,
87 rightMargin: 25
88 }
89 WSHstgrp(hstGrpParam);
90
91 // Logout button object
92 logoutBtnParam = {
93 xPos: 20,
94 yPos: 730,
Delete.

95 btnHeigh: 26,
4 96 btnWidth: 100,
97 btnTxt: 'Log Out'
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

98 }
99 WSLogoutBtn(logoutBtnParam);
100

44
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

Temperature
Line No. HTML change
graph

101 // Level display object

102 WSLevel({
103 devName: 'D0',
104 direction: 0,
105 levCol: 'mediumblue',
106 upperCol: 'red', 2
107 lowerCol: '#00FF00',

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
108 bkCol: 'white',
109 upperVal: 32767,
110 lowerVal: -32768,
111 upperAlmV: 20000,
112 lowerAlmV: -20000,
113 dspAlmLn: 1,
114 almLnCol: 'black',
115 levLength: 400,
116 levWidth: 150,
117 dspVal: 1,
118 valFormat: 0,
119
120 devValCol: 'white',
121 devValBkCol: 'black',
122 devValWidth: 150,
123 devValHeight: 50, 3
124 xPos: 700,

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
125 yPos: 250,
126 });
127
128 // Write button object
129 WSWrtBtn({
130 devName: 'X0',

Delete.
131 devBase: 'B',
132 devFormat: 6,
133
134 wrVal: '1',
135 wrBtn: 'write_btn',
136 btnTxt: 'OK',
137 btnWidth: 150,
138 btnHeigh: 50,
139 wrComfirm: 1,
140 language: 1, 4
141 xPos: 700,
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

142 yPos: 40,

143 });
144
145 // Write button object
146 WSWrtBtn({
147 devName: 'X0',
148 devBase: 'B',
149 devFormat: 6,
150
151 wrVal: '0',
152 wrBtn: 'write_btn',
153 btnTxt: 'NG',
154 btnWidth: 150,
155 btnHeigh: 50,
156 wrComfirm: 1,
157 language: 1,
158 xPos: 700,
159 yPos: 130,
160 });
161

45
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

Temperature
Line No. HTML change
graph

162 // Figure display object

163 WSFigure({
164 devName: 'D0',
165 devFormat: 0,
166
2 167 figType: 'tri',
168 figHeight: -30,
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

169 figWidth: 60,

170 defCol: 'red',
171 rangeNum: 2,
172 range:[
173 {
174 low: -5000,
175 high: 5000,
176 col: 'green',
177 },
178 {
179 low: -10000,
180 high: 10000,
181 col: 'blue',
182 },
183 ],
3 184 xPos: 300,
185 yPos: 730,
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

Delete.
186 });
187
188 // Image display object
189 WSPicture({
190 devName: 'D0',
191 devFormat: 0,
192
193 pictHeight: 30,
194 pictWidth: 30,
195 defPicture: './img/sample0.png',
196 rangeNum: 2,
197 range:[
198 {
199 low: -5000,
200 high: 5000,
4 201 picture: './img/sample1.png',
202 },
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

203 {
204 low: -10000,
205 high: 10000,
206 picture: './img/sample2.png',
207 },
208 ],
209 xPos: 200,
210 yPos: 730,
211 }); </script>
212 </head>
delete.
Do not

213 <body>
214 </body>
215 </html>

46
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

STEP 4. Add a </script> tag.

Add a </script> tag on line 51 (blank).

Line No. HTML

…

18 // Historical graph object

19 temp = [];
20 num = 2;
2
…

47 lowerMargin: 55,

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
48 rightMargin: 25,
49 }
50 WSHstgrp(hstGrpParam);
51 /<script> Addition
52 </head>
53 <body>
54 </body>
55 </html>

STEP 5. Correct items such as historical graph object size and display coordinates.

Correct items such as the size and display coordinates of the historical graph object.

Line No. HTML

3
…

18 // Historical graph object

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
19 temp = [];
20 num = 2;
…

29 hstGrpParam = {
30 xPos: 20,
31 yPos: 250, 60,
32 grElmNum: num,
…

43 grHeight: 380, 250,

44 grWidth: 550, 450,
45 upperMargin: 15,
46 leftMargin: 75, 55,
47 lowerMargin: 55,
48 rightMargin: 25,
49 }
50 WSHstgrp(hstGrpParam);
51 </sctipt>
52 </head>
53 <body>
54 </body> 4
55 </html>
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

Before change After change

47
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

STEP 6. Set the background color.

Add the HTML for the background color between lines 13 and 14.
If the background color is white, there is no need to add this HTML.

Line No. HTML

…

10 
11 <script src="./FUserWebLib.js"></script>
2 12 
13 
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

STEP 7. Change the page title and add a Web page switching button.

Change the page title on line 8, and then add the HTML for the Web page switching button between lines 58 and 59.

Line No. HTML

3
…

…
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

8 <title>2. Temperature Change Graph</title> Page title text display

…

58 <body>

<h2><u>2. Temperature Change Graph</u></h2>

<a href="index.html" class="menu" style="position: absolute; left: 500px; top: 550px;" />Menu</a>
59 </body>
60 </html>

Before change After change

2. Temperature Change Graph

4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

48
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

STEP 8. Add the <link> setting to Style Sheet file for Web page switching button.

Add the HTML for the <link> settings of the Style Sheet file for the Web page switching button between lines 9 and 10.

Line No. HTML

…

7

8 <title>2. Temperature Change Graph</title>
9 <link href="./css/UserWebStyle.css" rel="stylesheet" media="all" /> 2
<link href="./css/button-back.css" rel="stylesheet" media="all" />

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
10

STEP 9. Create Style Sheet files for the Web page switching button.

1. Start Notepad in Windows®.

2. Create the Style Sheet shown below.
3. On the Notepad toolbar, select [File] - [Save As].
4. In the File name field, enter “button-back.css”, and then click [Save].
This button is used on the “pressure meter page”, “temperature change page”, and “device monitor page”.

[Design example] Indicate the design of the Web page switching button.

3
2. Temperature Change Graph

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
Menu

[Style Sheet]
class attributes: menu

a.menu{
display: block; 4
text-decoration: none;
height: 37px;
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

49
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

STEP 10. File storage destination.

Store the created files so that the file structure is as shown below.

[File structure after organization]

index.html

WWW USER
2
level.html
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

historical.html
historical.html
Store this file in the “USER” folder.

Log-in_User.html

FUserWebLib.js

UserWebStyle.css

css
button-menu.css

3 button-back.css
button-back.css
Store this file in the “css” folder.
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

This is not necessary when creating the

companylogo.png
“pressure meter page” if the Style Sheet file
img “button-back.css” has already been stored.

STEP 11. Check whether the page can be displayed correctly in a Web browser.

Double-click the “historical.html” file.

If the following dialog box is displayed, click “Allow blocked content”.

4 Correctly displayed Web page

SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

50
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

Device monitor page creation

This section explains the procedure for creating the device monitor page.
Device reading CGI, device writing CGI, and a button for switching the Web page are displayed on the page created with this
example. Use a Style Sheet to design the buttons for switching the Web page.

This Web page does not reuse index.html. Refer to the following chapter to create the HTML.
 6. CREATING A DEVICE MONITOR WINDOW WITH CGI

uSpecifications 2
[Design example]

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
Background color
3. Device Monitor Text display
• Color name: mediumseagreen
Device name Data type Value
D10 16-bit integer 1234 • Color code: #3cb371
D11 32-bit integer 123456 Device reading CGI
M0 Bit 0
Read

Device name Data type Value

D10 16-bit integer 100 Write
D11 32-bit integer 600 Write Device writing CGI
M0 Bit 1 Write

Web page switching

Menu button display Link destination
• Design (Style Sheet) • index.html
• Page switching 3

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
uFunctions to use
Reference
Function Creation method Example/special note
section
Background color Style Sheet Write a Style Sheet inside the HTML file. 7.1
Font size <h3></h3> tags <h3>Heading 3</h3>
Text display Underline <u></u> tags <u>Text in this range is underlined.</u> 7.2
Paragraph <p></p> tags Use <p></p> to indicate paragraphs and insert line breaks.
Device reading CGI Reuse the CGI example (HTML) in this guide to create the component.
Devices D10, D11, and M0 6.4
CGI
Link file RdDevRnd.cgi file (built into the PLC)
Device writing CGI Reuse the CGI example (HTML) in this guide to create the component.
Devices D10, D11, and M0 6.5
Link file
CGI
WrDev.cgi file (built into the PLC)
4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

When the button is clicked, its display changes to that

shown on the right.
Web page Design Style Sheet
switching button Text Text
display Before being clicked After being clicked 7.1
(return to the Page switching <a></a> tags <a href="link destination URL">Displayed text</a>
menu)
Display starting Embed a Style Sheet in the <a> tag to display the button in
Style Sheet
coordinates the lower-right corner.

uFiles to create
File type File name Remarks

Linked from the menu page.

HTML device.html
If the file name is changed, the menu page needs to be corrected.
This file can be named as desired. If you change it, also change the file
Style Sheet button-back.css
name of the Style Sheet file in the link settings of the HTML file.

51
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

uProcedure
This section explains an outline procedure for using CGI objects to create HTML for reading/writing from/to devices.

Corrections
Additions
device.html
Create the HTML

STEP 1. STEP 2. STEP 3. STEP 4.

2 New HTML creation Device reading Device writing HTML additions and corrections
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

HTML creation HTML additions

• File name To create: To create: To create: Corrections

“device.html” • HTML document • JavaScript part • Device writing • Background color setting
• Some HTML parts CGI HTML • Web page switching
button addition

Start Notepad. Create the HTML document Add the HTML contained in Create the HTML document by reusing the
Save an empty document by reusing the HTML this guide to the existing HTML contained in this guide.
with the file name contained in this guide. HTML document.
“device.html”.
For details on the HTML file, For details on the HTML file,
Select “UTF-8” for the refer to the following. refer to the following.
Encoding before saving
the file. 6.4 Device Reading 6.5 Device Writing
Web Page Creation Web Page Creation

3
STEP 1.
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

Create a new HTML file for the device monitor page.

1. Start Notepad in Windows®.

2. On the Notepad toolbar, select [File] - [Save As].
3. In the File name field, enter “device.html”, select “UTF-8” for the Encoding, and then click [Save]. Save the file in an easy-to-
understand location.

Starting with STEP2, use “device.html”. Exercise caution to avoid correcting the wrong file.

STEP 2. Create the device reading CGI HTML.

Reuse the entire HTML written on the following page (<!DOCTYPE html> to </html>) to create the HTML file.

Related Page 6.4 Device Reading Web Page Creation - HTML creation example - HTML
4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

[Created details]

Device reading CGI sample HTML Newly created HTML

Create a file
Line No. HTML with the HTML device.html
contained in this
Declaration area (start) 1 <!DOCTYPE html> <!DOCTYPE html>
guide.
Information area
……

……

Body area
Declaration area (end) 117 </html> </html>

52
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

STEP 3. Add the device writing CGI (sample HTML).

Add two sections from the device writing CGI written in this guide to the following locations.

Related Page 6.5 Device Writing Web Page Creation - HTML creation example - HTML

1 Insert lines 10 (<script>) to 79 (</script>) of the device writing CGI sample HTML in the space between </script> and </head> in
device.html.
2
2 Insert lines 83 (<form>) to 111 (</form>) of the device writing CGI sample HTML in the space between </form> and </body> in

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
device.html.

[Created details]

Device writing CGI sample HTML Created HTML

Line No. HTML device.html

Declaration area (start) 1 <!DOCTYPE html> <!DOCTYPE html>
10 <script> <script>
Insert 1 .
……

……

……
Information area
79 </script> </script>
80 </head> </head>
3
82 <body> <body>

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
83 <form> <form>
Insert 2 .
……

……

……
Body area

111 </form> </form>

112 </body> </body>
Declaration area (end) 113 </html> </html>

4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

53
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

STEP 4. Correct HTML for coexistence with the device writing CGI.

Make corrections to use both the device reading CGI and a device writing CGI on a single Web page.
In this example, the device writing CGI ID names are corrected to values between 10 and 19 to prevent them from duplicating the
ID names used with the device reading CGI.

If these corrections are not made, the PLC and device reading/writing cannot be performed correctly.

[Correction details]
2
(1) (2) (3)
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

Before After Before After Before After

Line No. change change Line No. change change Line No. change change

210 id="DEV1" id="DEV10" 210 id="DEV2" id="DEV11" 222 id="DEV3" id="DEV12"

211 id="TYP1" id="TYP10" 211 id="TYP2" id="TYP11" 223 id="TYP3" id="TYP12"

212 id="DATA1" id="DATA10" 212 id="DATA2" id="DATA11" 224 id="DATA3" id="DATA12"

[HTML after correction]

Line No. HTML

…

201 <form>
202 <table id="devtbl2" class="devtbl" border="1">
203 <tr>
3 204 <th>Device name</th>
205 <th>Data type</th>
<th>Value</th>
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

206
</tr>
207
<tbody>
208
<tr> Before change After change
209
210 <td><input type="text" id="DEV10" name="DEV1" class="input" value="D10"/></td>
<td><input type="text" id="TYP10" name="TYP1" class="input" value="16-bit integer"/></td> (1)
211
<td><input type="text" id="DATA10" name="DATA1" class="input" value="3"/></td>
212
213 <td><input type="button" value="Write" class="input" onclick="WriteDeviceBlockTbl('devtbl2',1)"/></td>
214 </tr>
215 <tr>
216 <td><input type="text" id="DEV11" name="DEV1" class="input" value="D11"/></td>
217 <td><input type="text" id="TYP11" name="TYP1" class="input" value="32-bit integer"/></td> (2)
218 <td><input type="text" id="DATA11" name="DATA1" class="input" value="10"/></td>
219 <td><input type="button" value="Write" class="input" onclick="WriteDeviceBlockTbl('devtbl2',2)"/></td>
220 </tr>
221 <tr>
222 <td><input type="text" id="DEV12" name="DEV1" class="input" value="M0"/></td>
4 223
224
<td><input type="text" id="TYP12" name="TYP1" class="input" value="Bit"/></td>
<td><input type="text" id="DATA12" name="DATA1" class="input" value="1"/></td>
(3)

225
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

<td><input type="button" value="Write" class="input" onclick="WriteDeviceBlockTbl('devtbl2',3)"/></td>

226 </tr>
227 </tbody>
228 </table>
229 </form>

54
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

STEP 5. Set the background color.

Add the HTML for the background color between lines 9 and 10.
If the background color is white, there is no need to add this HTML.

Line No. HTML

…

7

8 <title>Device Reading CGI Sample</title> 2
9

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
<style>
body {
background-color: mediumseagreen;
}
</style>
10 <script>
11 // CGI request function
12 function ReadDeviceRandomTbl(devtblid) {

STEP 6. Change the page title and add a Web page switching button.

Change the page title on line 8, and then add the HTML for the Web page switching button between lines 158 and 159.

Line No. HTML 3

…

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
8 <title>3. Device Monitor</title> Page title text display
…

156 </script>
157 </head>
158 <body>

<h2><u>3. Device Monitor</u></h2>

<a href="index.html" class="menu" style="position: absolute; left: 400px; top: 350px;" />Menu</a>
159 <form>
160 <table id="devtbl" class="devtbl" border="1">

Before change After change

4
Device name Data type Value
D10 16-bit integer 1234 3. Device Monitor
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

D11 32-bit integer 123456

Device name Data type Value
M0 Bit 0
D10 16-bit integer 1234
Read
D11 32-bit integer 123456
M0 Bit 0
Device name Data type Value
Write Read
D10 16-bit integer 100
D11 32-bit integer 600 Write
Device name Data type Value
M0 Bit 1 Write
D10 16-bit integer 100 Write
D11 32-bit integer 600 Write
M0 Bit 1 Write

55
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

STEP 7. Add the <link> setting to Style Sheet file for Web page switching button.

Add the HTML for the <link> settings of the Style Sheet file for the Web page switching button between lines 8 and 9.

Line No. HTML

…

7

8 <title>3. Device Monitor</title>
2 <link href="./css/button-back.css" rel="stylesheet" media="all" />
9 
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

STEP 8. Create the Style Sheet file for Web page switching button.

1. Start Notepad in Windows®.

2. Create the Style Sheet shown below.
3. On the Notepad toolbar, select [File] - [Save As].
4. In the File name field, enter “button-back.css”, and then click [Save].

This button is used on the “pressure meter page”, “temperature change page”, and “device monitor page”.

[Design example] Indicate the design of the Web page switching button.

3
3. Device Monitor
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

Device name Data type Value

D10 16-bit integer 1234
D11 32-bit integer 123456
M0 Bit 0
Read

Device name Data type Value

D10 16-bit integer 100 Write
D11 32-bit integer 600 Write
M0 Bit 1 Write

[Style Sheet]
class attributes: menu

4 a.menu{
display: block;
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

text-decoration: none;
height: 37px;
width: 250px;
line-height: 37px;
text-align: center;
color: #fff;
background: #4169e1;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}
a.menu:hover{
background: #fff;
color: #4169e1;
border:solid 1px #4169e1;
}

56
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

STEP 9. File storage destination.

index.html

WWW USER

level.html

historical.html
2

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
device.html
device.html
Store this file in the “USER” folder.

Log-in_User.html

FUserWebLib.js

UserWebStyle.css

css
button-menu.css

button-back.css
button-back.css Store this file in the “css” folder.
3

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
This is not necessary when creating the
companylogo.png “pressure meter page” or the “temperature
img change page” if the Style Sheet file
“button-back.css” has already been stored.

STEP 10. Check whether the page can be displayed correctly in a Web browser.
Double-click the “device.html” file.
If the following dialog box is displayed, click “Allow blocked content”.

4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

57
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Pressure meter Temperature change Device monitor

Menu page creation page creation page creation page creation

Correctly displayed Web page

2
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

This completes the creation of all the user Web pages.

3 If Web pages are not displayed correctly, refer to 3.6 Troubleshooting.
For details on operations, refer to the following.
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

Relevant Web Server Function Application Guide Using Web Page Startup and Introduction
documents [manual number: L(NA)08643ENG]

4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

58
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

3.5 File Save Destination

Store the created user Web server files on an SD memory card. This section explains the destination in which to save the user Web
server files. If you want to change the file structure, consider this action by referring to the following explanation.

User Web page library file structure

This section explains the file structure of the user Web page library.
The following figure shows the file structure stored on the SD memory card with the file group provided by the user Web page library
2
and the user-created file group. Changing the folder structure or file names of the user library may prevent normal operation.

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
uWeb server file group
User library contents Folders and files created by users

Initially displayed HTML file

of the user Web page
Page that is displayed first
WWW USER index.html Do not change the file name and
file structure.
File for creating the user login window

Log-in_User.html
$MELPRJ$
JavaScript file

FUserWebLib.js 3

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
Style Sheet file

css UserWebStyle.css

img sample0.png

Sample image files

sample1.png Used with the index.html

“image display objects”
Image files that are not used can be deleted
without any problems. Also, additional image
sample2.png files can be stored in this folder for use.
4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

***_1.html
Files to which the user Web page will
be switched
Files can be named as desired.

***_*.html

Folders used to store images and similar data

Folder_1 File_1 Folders and files can be named as desired.

Multiple folders can be created.

Folder_* File_*

59
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

There is normally no need to change the folder structure or file names, but use the information here as a reference when sorting
by folder and when storing other JavaScript files in the folders. The explanation here covers JavaScript and Style Sheet files.

JavaScript files

uFile name
File name Function Description Default storage destination
A file included in the user Web
2 FUserWebLib.js Library of JavaScript objects
page library
./FUserWebLib.js
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

uHTML document
This section explains how to read JavaScript files from HTML files and how to change the path according to the file storage location.

u When the “index.html” and “FUserWebLib.js” files are on the same level (default storage destination)

HTML document Folder and file structure

WWW USER index.html

FUserWebLib.js
3
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

u When the “FUserWebLib.js” file is stored in a user-created folder (example: js)

HTML document Folder and file structure

WWW USER index.html

js FUserWebLib.js

uHow to write statements in the HTML file

Write the statements between the <head> and </head> tags. However, write the statements above the JavaScript starting line

4 (<script> ).
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

Line No. HTML

1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
7 
8 <title>Sample</title>
9 <link href="./css/UserWebStyle.css" rel="stylesheet" media="all" />
10 
11 <script src="./FUserWebLib.js"></script>
12 
13 
14 <script>
…
…

</head>

60
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Style Sheet files

uFile name
File name Function Description Default storage destination
File with commonly defined
UserWebStyle.css Style settings ./css/UserWebStyle.css
styles

uHTML document 2
This section explains how to read CSS files from HTML files.

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
It may be necessary to change the path depending on the file storage location.

u When the “index.html” and “UserWebStyle.css” files are on the same level

HTML document Folder structure on the SD memory card

WWW USER index.html

UserWebStyle.css

u When the “UserWebStyle.css” file is stored in the css folder (default storage destination) 3

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
HTML document Folder structure on the SD memory card

WWW USER index.html

css UserWebStyle.css

uHow to write statements in the HTML file

Write the statements between the <head> and </head> tags. However, write the statements above the JavaScript starting line
(<script> ).
4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

Line No. HTML

</head>

61
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE
BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

3.6 Troubleshooting

Problem details Points to check

Web page switching buttons are displayed as The Style Sheet file has not been read.
underlined text, not as buttons. Check the following details.

[Example 1] • The storage location of the Style Sheet is incorrect.

2 • The file name is incorrect.

DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

[Example 1] When the Style Sheet file is stored in the css folder
Bad <link href="./cssss/button-n enu.css" rel="stylesheet" media="all"/>
Good <link href="./css /button-m enu.css" rel="stylesheet" media="all"/>

[Example 2] When the Style Sheet file is stored in the css folder
[Example 2] Bad <link href="button-back.css" rel="stylesheet" media="all" />
Good <link href="/.css /button-back.css" rel="stylesheet" media="all" />

• There is a mismatch involving the name in the Style Sheet class

attributes: the name written on the HTML button does not match the
name written in the Style Sheet file.

[Example 1]
Bad HTML <a href="level.html" class="button1">1. Pressure Meter</a>
3 Style Sheet a.button{
Good HTML <a href="level.html" class="button1">1. Pressure Meter</a>
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

Style Sheet a.button1{

For the HTML file on the personal computer, the Web Check whether the Style Sheet files (button-menu.css and button-back.
page switching button can be displayed with the css) are stored on the SD memory card.
correct style in a Web browser. However, it cannot be
displayed correctly on the PLC-side Web page.

WWW USER
Personal computer CPU module
Style Sheet for the buttons used
on the menu Web page
css button-menu.css
Style Sheet for the button used to
On the
return to the menu Web page
personal computer SD memory card button-back.css
Web files Web files
4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

The Web page is not displayed in a Web browser. An All the HTML files cannot be referenced from the HTML file that you
error is displayed instead. attempted to display.
Check the following details.

• The file name is incorrect.

• The storage locations of the link destination HTML files are incorrect.

Ex. When all the HTML files are stored in the same location
<a href="level.htm " class="button1">1. Pressure Meter</a>
 File name extension mistake
<a href="/.user/historical.html" class="button2">2. Temperature Change Graph</a>
 Storage location specification mistake
<a href="device.html class="button3">3. Device Monitor</a>
 ["] missing after device.html

62
1
3. USING CUSTOMIZATION TO EASILY CREATE A USER WEB PAGE

BASICS OF CREATING HTML < TAGS >

Before Starting Preparation Reuse User Web Page Creation File Save Destination Troubleshooting

Problem details Points to check

Table or graph lines are not displayed. Alternatively, The Style Sheet file (UserWebStyle.css) cannot be referenced from the
OK, NG, and other buttons are displayed with the HTML file.
standard design of the Web browser.
[Correct display status]

Search... Search...

Menu Menu

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
Possible causes are listed below.
(1) The link specification <link href="file name" rel="stylesheet"
media="all" /> is not written in the HTML.
• HTML
<link href="./css/UserWebStyle.css" rel="stylesheet" media="all" /> 3
(2) The Style Sheet file name does not match the HTML link specification

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
<link href="file name" rel="stylesheet" media="all" />.
• HTML
<link href="./css/UserWebStyle.css" rel="stylesheet" media="all" />
• Style Sheet file name: [UserWebStyle.css]
(3) The storage location of the Style Sheet file in the HTML link
specification is incorrect.
• HTML
<link href="./css/UserWebStyle.css" rel="stylesheet" media="all" />
• Save destination: [www/css folder]
(4) If HTML files on the personal computer can be displayed in a Web
browser but the PLC-side Web page cannot be displayed correctly,
check whether the Style Sheet file (UserWebStyle.css) is stored on
the SD memory card.

Personal computer CPU module

4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

On the
personal computer SD memory card

Web files Web files

63
1
4. LEARNING THE FUNCTIONS OF STYLE SHEETS (CSS)
BASICS OF CREATING HTML < TAGS >

What Are Style Sheets? Common Items Overall Structure Setting Details Style Sheet Details

4.1 Function Introduction

A Style Sheet is a way to change the style of a Web page such as its design and layout. Whereas HTML defines the elements and
structure of the Web page, the Style Sheet specifies how to decorate the elements and structure.
When specifying the style of a Web page created with a language such as HTML or XHTML, CSS (Cascading Style Sheets), one type
of Style Sheet languages is most commonly used. Therefore, Style Sheets may generally be referred to as “CSS”.

uWeb page that does not use a Style Sheet uWeb page that uses a Style Sheet
2
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

In relation to the foundational Web page created with

Web page created with HTML alone, without using a
HTML, “design” and “layout” are controlled with the
Style Sheet, results in a dull page in which the text
Style Sheet. A Style Sheet can be used to arrange the
and images are arranged from top to bottom. HTML is
appearance of the page by changing the text and
used to write the text documents that are displayed in
background colors, drawing lines in various colors, and
browsers.
adjusting the margins.

3
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

Create the foundation of the Web page with HTML. The colors, lines, and layout can be changed with a Style Sheet.

Use a CSS file to arrange the appearance of the text displayed in a browser with an HTML file. Separating the text
Point and appearance into different files has a variety of advantages including making it possible to write these items by
focusing on their separate details and making it easier to divide work among multiple people.

uAn example of what can be done with Style Sheets

• When the page is created only with HTML

HTML code Browser display

<p>This is an example sentence. </p> This is an example sentence.

4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

• Change the character color to orange.

HTML code Browser display

<p>This is an example sentence. </p> This is an example sentence.

CSS code
p{
color: orange
}

• Change the font size to 20 px.

HTML code Browser display

<p>This is an example sentence. </p>

This is an example sentence.
CSS code
p{
color: orange
font-size: 20px
}

64
1
4. LEARNING THE FUNCTIONS OF STYLE SHEETS (CSS)

BASICS OF CREATING HTML < TAGS >

What Are Style Sheets? Common Items Overall Structure Setting Details Style Sheet Details

4.2 Common Items

This section explains the common items that you need to know to use Style Sheets.

Terminology

Item Description
Selector Target to which the Style Sheet will be applied.
Property Name of the style to apply. 2
Property value Details of the style to apply.

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
Style Sheet writing rules

Each Style Sheet statement consists of a selector, property, and property value.

Ex.
Property
Selector { Property : value ;}

What to
body { color : #ff0000 ;}
Target How to change it
change

Declaration

• The “property:property value” pair is called a Declaration .

• The declaration block for the selector is enclosed in curly brackets ( { } ).
• Multiple declarations can be specified. Each declaration is delimited with a semicolon ( ; ).
3

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
Style Sheet setting types

There are three ways to set the Style Sheet.

uRead the Style Sheet from a CSS file with a <link> tag.
Write the Style Sheet into a file with the “.css” extension, and then link to the CSS file from an HTML file to read the Style Sheet. To
link to the CSS file from an HTML file, use the <link> tag within the <head> tag.
Ex. Linking to “UserWebStyle.css” in the user Web page library

uWrite the Style Sheet with the <style> tag. 4

Use the <style> tag to write the Style Sheet inside the <head> tag in an HTML document.
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

Ex. Adding a Style Sheet that makes the body character color red

<head>
<style>
body { color: #ff0000; }
</style>
</head>

uAdd the Style Sheet to the elements.

Add the Style attribute to an element to write the Style Sheet directly. When you write the Style Sheet directly in an element, the
selector is not necessary.
Ex. Adding a Style Sheet to the <h1> Heading 1 <h1> element

<h1 style="color: #ff0000;">Heading 1</h1>

65
1
4. LEARNING THE FUNCTIONS OF STYLE SHEETS (CSS)
BASICS OF CREATING HTML < TAGS >

What Are Style Sheets? Common Items Overall Structure Setting Details Style Sheet Details

Style Sheet setting example

This section shows a setup example of using the <style> tag to write a Style Sheet.
To set the character color (property) of the body (selector) to red (property value), write the Style Sheet as shown below.

body { color:#ff0000; }

The above Style Sheet changes the color of the text between the <body> and </body> tags to “#ff0000 (red)”.

2 uHTML example
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

<style>
body { color:#ff0000; }
</style>
3 </head>
<body>
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

This example shows how to specify the character color with a Style Sheet (css).
</body>
</html>

uWeb browser display

4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

66
1
4. LEARNING THE FUNCTIONS OF STYLE SHEETS (CSS)

BASICS OF CREATING HTML < TAGS >

What Are Style Sheets? Common Items Overall Structure Setting Details Style Sheet Details

4.3 Overall Structure (UserWebStyle.css File)

The HTML document <link> tag is used to read the Style Sheet file.

HTML file Style Sheet file

index.html UserWebStyle.css

Style Sheet file storage destination specification

2
Internal structure of the Style Sheet file

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
Defines the button styles and the character color
Error message
for messages displayed when there are errors in
(style)
the created HTML or JavaScript objects.

JavaScript objects

Data Block object

Audio playback object Style Sheet*

Historical graph object

Each object has separate style settings.
Logout button object 3

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
Write object
(button style)

Level display object

(style)

* This is not used by the user Web page library HTML file
(index.html) from the Mitsubishi Electric representative.

4.4 Setting Details

The style of each object set with JavaScript takes priority, and even if the settings are changed with the Style Sheet (UserWebStyle.
4
css), these changes are not applied. However, if specific settings are omitted in the JavaScript, the Style Sheet settings are applied.
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

For details, refer to the following.

Related Page
5.1 What Is JavaScript (JS)? - Style Sheet (CSS)

If you change the Style Sheet (UserWebStyle.css) in the user Web page library, do not change the Style Sheet
Special Note
class names. However, do not define Style Sheet class names with the same names.

67
1
4. LEARNING THE FUNCTIONS OF STYLE SHEETS (CSS)
BASICS OF CREATING HTML < TAGS >

What Are Style Sheets? Common Items Overall Structure Setting Details Style Sheet Details

4.5 Style Sheet Details

This section explains the details of the Style Sheet file (UserWebStyle.css) in the user Web page library.

For details on Style Sheets, refer to the following.

Related Page
7.1 Style Sheet References

When you change a Style Sheet file, setting parameters and values incorrectly will prevent the objects from
Caution
2 being displayed in the Web browsers. Be sure to save a copy of the file before making changes.
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

Error message style

uError message display example

Error message display button

Error message

Setting of parameter "dev[0].base" is incorrect. Invalid data format for device "D0"

3 Setting of parameter "dev[1].base" is incorrect.

Setting of parameter "dev[2].base" is incorrect.
Setting of parameter "dev[3].base" is incorrect.
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

Setting of parameter "dev[4].base" is incorrect.

NG Error message
Setting of parameter "dev[5].base" is incorrect.
Setting of parameter "dev[6].base" is incorrect. display field
Setting of parameter "dev[7].base" is incorrect.
Invalid data format for device "D0"
Invalid data format for device "D1"
Invalid data format for device "D2"
32767
Invalid data format for device "D3"
Setting of parameter "direction" is incorrect.
Invalid data format for device "D4"
Invalid data format for device "D5"
Invalid data format for device "D6"
Invalid data format for device "D7"
Setting of parameter "dev" is incorrect.

4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

Log Out

68
1
4. LEARNING THE FUNCTIONS OF STYLE SHEETS (CSS)

BASICS OF CREATING HTML < TAGS >

What Are Style Sheets? Common Items Overall Structure Setting Details Style Sheet Details

uList of parameters
• Error message display button • Cursor

width background-color

cursor

height
2

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
• Error message, error message display field

: padding : margin *: Colors are used in the figure to clearly identify the padding
and margin locations.

margin-top
padding
Setting of parameter "dev[1].base" is incorrect.
margin-left
Setting of parameter "dev[2].base" is incorrect.

background-color 3

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

69
1
4. LEARNING THE FUNCTIONS OF STYLE SHEETS (CSS)
BASICS OF CREATING HTML < TAGS >

What Are Style Sheets? Common Items Overall Structure Setting Details Style Sheet Details

uStyle Sheet
Line No. Style Sheet statement Explanation

Common settings Settings for handling the display starting position

1 .partsBase{ Selector
2 position: absolute; Placement of the absolute position of the parent box
3 }

Global messages Settings for the global message box

2 4 .globalMessageArea{ Selector
5 position: absolute; Placement of the absolute position of the parent box
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

top: 2px; Distance from the reference position to the top

6
edge of the box
left: 2px; Distance from the reference position to the left
7
edge of the box
8 z-index: 2147483647; Specifies the box overlapping order.
9 background-color: white; Background color
border: solid 1px black; Parent box border specification
10 Setting values [thickness: 1 pixel, line type: solid
line, line color: black]
11 }

Error messages Error message list line spacing

12 .errorMessage{ Selector
13 margin: 0; Outer margin specification (top, bottom, left, and right)
3 14
padding: 1px 0; Inner margin specification (top and bottom: 1 pixel,
left and right: 0 pixels)
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

15 }

Error message display field Window that displays the error message list
16 .errorField{ Selector
17 position: absolute; Placement of the absolute position of the parent box
18 z-index: 2147483646; Specifies the box overlapping order.
19 margin-top: 22px; /* errorButton height + margin-top */ Outer margin specification (top)
20 margin-left: 2px; /* Same value as errorButton margin-left */ Outer margin specification (left)
21 background-color: white; Background color
border: solid 1px black; Error message display field border specification
22 Setting values [thickness: 1 pixel, line type: solid
line, line color: black]
23 }

Display button Button that displays the error message list

4 24 .errorButton{ Selector
25 position: absolute; Placement of the absolute position of the parent box
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

26 z-index: 2147483645; Specifies the box overlapping order.

27 width: 20px; Width
28 height: 20px; Height
29 margin-top: 2px; Outer margin specification (top)
30 margin-left: 2px; Outer margin specification (left)
31 background-color: red; Background color
border: solid 1px white; Display button border specification
32 Setting values [thickness: 1 pixel, line type: solid
line, line color: white]
33 text-align: center; Text centering
font-weight: bold; Font decoration type specification
34
Setting value [bold]
35 cursor: pointer; Specifies the shape of the mouse cursor.
36 }

70
1
4. LEARNING THE FUNCTIONS OF STYLE SHEETS (CSS)

BASICS OF CREATING HTML < TAGS >

What Are Style Sheets? Common Items Overall Structure Setting Details Style Sheet Details

Data Block object style

uList of parameters

background-color:

Object 001 Object 002 Object 003 Object 004 Object 005

1000 900 800 700 600

color:
2
Object 101 Object 102 Object 103 Object 104 Object 105

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
500 400 300 200 100 border:

uStyle Sheet Displayed with priority given to the JavaScript settings.

Line No. Style Sheet statement Explanation
37 /* ------------------------------------------------------------------------------ */
Parts enclosed in “/*” and “*/” are handled as
38 /* Data Block object */
comments.
39 /* ------------------------------------------------------------------------------ */
40 .datblk,
41 .datblk_name, Selector
42 .datblk_val{
Data cell border specification 3
43 border: 1px solid black; Setting values [thickness: 1 pixel, line type: solid

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
line, line color: black]
44 padding: 0; Inner margin specification (top, bottom, left, and right)
45 text-align: center; Text alignment setting (center)
46 color: black; Data cell character color specification
47 background-color: white; Data cell background color specification
48 }
49 .datblk{ Selector
Specifies how to display the data cell line.
50 border-collapse: collapse;
Setting value [overlaps the lines of the adjacent cells]
Specifies how to display white space (consecutive
single-byte spaces and tabs) and line breaks.
51 white-space: nowrap;
Setting values [Handle line breaks as single-byte spaces
and multiple consecutive spaces as a single space.]
52 }
53 .datblk_name, Selector 4
54 .datblk_val{
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

How to process text that protrudes outside of the cell

55 overflow: hidden;
Setting value [not displayed]
56 }

Audio playback object style

This function is not supported.

Line No. Style Sheet statement Explanation

57 /* ------------------------------------------------------------------------------ */
Parts enclosed in “/*” and “*/” are handled as
58 /* Audio playback object */
comments.
59 /* ------------------------------------------------------------------------------ */
60 .audio_btn{ Selector
61 padding: 0;
62 text-align: center;
63 color: black;
64 overflow: hidden;
65 }

71
1
4. LEARNING THE FUNCTIONS OF STYLE SHEETS (CSS)
BASICS OF CREATING HTML < TAGS >

What Are Style Sheets? Common Items Overall Structure Setting Details Style Sheet Details

Historical graph object style

uList of parameters
32767
stroke:
stroke-width:
stroke-linejoin:

2
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

background-color:
-32768
font-size:
2018-12-05 11:04:06 2018-12-05 11:05:41

uStyle Sheet
Line No. Style Sheet statement Explanation
66 /* ------------------------------------------------------------------------------ */
Parts enclosed in “/*” and “*/” are handled as
67 /* Historical graph object */
comments.
68 /* ------------------------------------------------------------------------------ */
69 .hstgrp{ Selector
70 border: 1px solid black;
Not used
3 71 background-color: white;
72 }
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

73 .hstgrp_frame{ Selector
74 stroke: black; Line color specification
75 stroke-width: 1px; Line thickness specification
76 stroke-linejoin: miter; Line joint and angle shape specifications
77 }
78 .hstgrp_text_x,
Selector
79 .hstgrp_text_y{
80 font-size: 18px; Font size specification
81 }
82 .hstgrp_line{ Selector
83 stroke: blue;
84 stroke-width: 1px; Not used
85 stroke-linejoin: round;
86 }
4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

72
1
4. LEARNING THE FUNCTIONS OF STYLE SHEETS (CSS)

BASICS OF CREATING HTML < TAGS >

What Are Style Sheets? Common Items Overall Structure Setting Details Style Sheet Details

Logout button object style

uList of parameters

color:

DOCUMENTS ON A PERSONAL COMPUTER

CREATING AND DISPLAYING SIMPLE HTML
uStyle Sheet
Line No. Style Sheet statement Explanation
87 /* ------------------------------------------------------------------------------ */
Parts enclosed in “/*” and “*/” are handled as
88 /* Logout button object */
comments.
89 /* ------------------------------------------------------------------------------ */
90 .logout_btn{ Selector
91 padding: 0; Inner margin specification (top, bottom, left, and right)
92 text-align: center; Alignment specification of the text within the button
93 color: black; Character color specification
Specification of how to process text that protrudes
94 overflow: hidden; outside of the cell
Setting value [not displayed]
3
95 }

A USER WEB PAGE

USING CUSTOMIZATION TO EASILY CREATE
Write object (button style)

uList of parameters

uStyle Sheet
4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

Line No. Style Sheet statement Explanation

96 /* ------------------------------------------------------------------------------ */
Parts enclosed in “/*” and “*/” are handled as
97 /* Write object (button style) */
comments.
98 /* ------------------------------------------------------------------------------ */
99 .write_btn{ Selector
100 height:50px;
Not used
101 width:100px;
Font decoration type specification
102 font-weight:bold;
Setting value [bold]
Character font type specification
103 font-famiry:Meiryo;
Setting value [Meiryo]
104 font-size:20pt; Font size specification
105 border-radius:10px
106 }

73
1
4. LEARNING THE FUNCTIONS OF STYLE SHEETS (CSS)
BASICS OF CREATING HTML < TAGS >

What Are Style Sheets? Common Items Overall Structure Setting Details Style Sheet Details

Level display object (style)

uList of parameters

2
DOCUMENTS ON A PERSONAL COMPUTER
CREATING AND DISPLAYING SIMPLE HTML

font-weight:

uStyle Sheet
Line No. Style Sheet statement Explanation
107 /* ------------------------------------------------------------------------------ */
Parts enclosed in “/*” and “*/” are handled as
108 /* Level display object (style) */
comments.
109 /* ------------------------------------------------------------------------------ */
110 .partsLevelValue{ Selector
Font decoration type specification
111 font-weight:bold;
Setting value [bold]
3 }
112
A USER WEB PAGE
USING CUSTOMIZATION TO EASILY CREATE

4
SHEETS (CSS)
LEARNING THE FUNCTIONS OF STYLE

74
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

5.1 What Is JavaScript (JS)?

JavaScript is a language for adding functions to Web pages. This makes it possible to realize interactive operations such as
displaying photograph slides and 2D/3D graphical animations.
By obtaining the user Web page library from the Mitsubishi Electric representative, you can use a JavaScript (JS) tool library.
This section explains the parameters of the JavaScript library objects. In this chapter, no details are listed regarding the general
writing of JavaScript.

List of objects
6

WITH CGI
CREATING A DEVICE MONITOR WINDOW
You can use the JavaScript objects in the user Web page library to read/write from/to devices from user Web pages.
The objects in the following table are included JavaScript object library (FUserWebLib.js).

Table
Data Block object (WSDatblk)

Object 001 Object 002 Object 003 Object 004 Object 005

1000 900 800 700 600

Object 101 Object 102 Object 103 Object 104 Object 105

500 400 300 200 100

Displays the specified device data as a table.

Graphs
7
Level display object (WSLevel) Historical graph object (WSHstgrp)

REFERENCES
Write button display

123 22500 123

Displays device value ratios as a bar graph. Displays device data as a chronological order line graph.

Images
Image display object (WSPicture) Figure display object (WSFigure)

0 1 2
Displays the specified image when the device value reaches Displays the specified figure when the device value reaches
the set value. the set value.

Operation buttons
Write button object (WSWrtBtn) Logout button object (WSLogoutBtn)

* Write 1 to X0.

* Write 0 to X0.

Writes the specified value to the specified device. Executes the logout operation.
*: The text displayed on the button can be changed.

75
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Usable files

The following files can be used.

File Extension MIME type

.html text/html
HTML
.htm text/htm
JavaScript .js text/javascript
CSS .css text/css
GIF image .gif image/gif
6 PNG image .png image/png
JPG/JPEG image .jpgx/.jpeg image/jpeg
WITH CGI
CREATING A DEVICE MONITOR WINDOW

Relationship between the extensions and MIME types of files on the Web
The concept of “extensions” and “MIME types” exists on the Web.
This is a mechanism for identifying the file type as text or HTML and for identifying the format of image files.
• The “extension” indicates what the file is. The extension is the last part of the file name from the dot (“.”) to the end.
• “MIME type” is a character string in the format of “type name/subtype name”. This “MIME type” is used to specify
Terminology the data format between Web servers and Web browsers. When a Web browser requests the “xxx.png” file from a
Web server, the Web server returns the details of "xxx.png” that it is an image/png type data. This enables the Web
browser to process the received data correctly.
• The MIME type is specified by writing “Content-Type” in the HTML document.
Ex. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">

Style Sheet (CSS)

7 The writing of the styles of user Web page text, buttons, and graphs can be omitted. If the written details are omitted or are
incorrect, the page is displayed according to the Style Sheet (UserWebStyle.css). The character font varies depending on the OS
REFERENCES

of the terminal that displays the user Web page.

Item Default
Character color Black
Background color White
Line color Black
Level display fill color Blue
Graph line color Blue
Font size 20 (in pixels)
Button character color Follows the Web browser settings.
Button background color Follows the Web browser settings.
Button line color Follows the Web browser settings.

Related Page 4. LEARNING THE FUNCTIONS OF STYLE SHEETS (CSS)

JavaScript description structure and processing flow

The roles of the different parts of a JavaScript description are classified as shown below. The object explanation pages are color-
coded according to these roles.

HTML file
Declarations JavaScript object
for usage JavaScript file library file Web browser display
Next page link settings
Title
File Edit View Favorites Tools Help

Parameter FUserWebLib.js
descriptions Object position, color,
File
device, and other such
Explained for
each object specifications

Execution Display the objects.

76
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

5.2 Common Items

This section explains the common items that you need to know to use JavaScript objects.

JavaScript writing rules

The parameters that follow the display object name are organized as shown below.

Ex.
Display object name { .partsBase { 6
: ; : ;

WITH CGI
CREATING A DEVICE MONITOR WINDOW
Parameter name Space Value (setting) Parameter setting position absolute

} }

• The parameter block is enclosed in curly brackets ( { } ).

• Enclose character strings in single ( ' ) or double ( " ) quotation marks. You can use either single ( ' ) or double ( " ) quotation
marks, but use the same type of symbol for the starting and ending marks.
• Parameter settings are composed of Parameter name + : + Space + Value (setting) .

Parameter specification

This section explains the parameter specifications that follow the display object name.

Description Default
Specification When the parameter of an optional setting is Displayed with the default settings. 7
omitted omitted

REFERENCES
Incorrect When the setting of a parameter is incorrect
specification

When set with a data format other than the For example, a parameter error occurs when a character string
Data format specified one such as “XYZ” is specified for a parameter that is set with a numeric
value. Set each parameter with its specified data format.

Coordinate When the X and Y coordinates are omitted The object is placed in the upper-left corner (coordinates 0, 0).
specification

Range check of the RGB value or color name In the HTML specifications, a range check of items such as the
Color RGB value and color name is not performed. If an incorrect setting
specification is specified, the displayed details vary depending on the type of
Web browser.

Device When specifying a “U\G” device name Use two “\” characters to specify a name as “U\\G”. (The first “\”
specification is an escape sequence*.)
* An escape sequence is a special character that is not output as-is and instead is used to control the output of characters such as to change the
character color, move the cursor, and delete characters.

77
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Devices that can be set

The settable formats and number bases of the devices that can be set in JavaScript objects are shown below.

: Settable, ×: Not settable

16-bit word 32-bit word
Signed Unsigned Signed Unsigned Single-
Device name Classification Bit precision
Decimal Hexadecimal Decimal Hexadecimal Decimal Hexadecimal Decimal Hexadecimal real
(K) (H) (K) (H) (K) (H) (K) (H) number (K)
6 User devices
Input (X) Bit 
WITH CGI
CREATING A DEVICE MONITOR WINDOW

Output (Y) Bit 

Internal relay (M) Bit 
Latch relay (L) Bit 
Link relay (B) Bit 
Annunciator (F) Bit 
Link special relay (SB) Bit 
Step relay (S) Bit 
Contact: TS Bit 
Timer Coil: TC Bit 
(T)*1 Current value:
Word   × × × × × × ×
TN
Contact: STS Bit 
Accumulation
Coil: STC Bit 
timer
(ST)*1 Current value:
Word   × × × × × × ×
7 STN
Contact: CS Bit 
REFERENCES

Counter Coil: CC Bit 

(C)*1 Current value:
Word   × × × × × × ×
CN
Contact: LCS Bit 
Long counter Coil: LCC Bit 
(LC)*1 Current value: Double
  × × ×
LCN word
Data register (D) Word         
Link register (W) Word         
Link special register (SW) Word         
System device
Special relay (SM) Bit 
Special register (SD) Word         
Module access device (U\G)*2
Module access device (G) Word         
Index register
Index register (Z) Word         
Double
Long index register (LZ)     
word
File register
File register (R) Word         

*1: When T, ST, C, or LC is specified, it is handled as the device of the current value (TN, STN, CN, or LCN).
*2: When specifying a device name that includes the “\” character such as “U\G”, use two “\” characters to specify the name as “U\\G”.
The first “\” (escape sequence) is a symbol that has the meaning of a special character, so the above expression is required.

78
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Device setting method

Refer to the correspondence table and set the devices.

devName: Specified value 1 Device name (device name + device number)

JavaScript
devBase: Specified value 2 Data number base
parameter name
devFormat: Specified value 3 Data format

6
uSetting examples

WITH CGI
CREATING A DEVICE MONITOR WINDOW
• Specifying input X7 • Specifying timer T25 (current value)

devName: X7 Input X7 devName: TN25 Timer T25

devBase: B Binary devBase: K Decimal
devFormat: 6 Bit devFormat: 0 16-bit signed

uCorrespondence table
JavaScript parameter name
1 Device 2 Data number 3 Data format 2 Data number base
Device name Classification name base
devFormat: Setting Description
devName: devBase:
2 K 2 H value
User devices K Decimal

Input (X) Bit X B 6 H Hexadecimal

7
Output (Y) Bit Y B 6 B Binary

REFERENCES
Internal relay (M) Bit M B 6
Latch relay (L) Bit L B 6 3 Data format
Link relay (B) Bit B B 6
Setting Description
Annunciator (F) Bit F B 6
value
Link special relay (SB) Bit SB B 6
0 16-bit signed
Step relay (S) Bit SB B 6
1 16-bit unsigned
Contact: TS Bit TS B 6
2 32-bit signed
Timer Coil: TC Bit TC B 6
(T) 3 32-bit unsigned
Current value:
Word TN K, H 0 1 4 Single-
TN
precision real
Contact: STS Bit STS B 6
number
Accumulation Coil: STC Bit STC B 6
5 Not used
timer (ST) Current value:
Word STN K, H 0 1 6 Bit
STN
Contact: CS Bit CS B 6
Counter Coil: CC Bit CC B 6
(C) Current value:
Word CN K, H 0 1
CN
Contact: LCS Bit LCS B 6
Long counter Coil: LCC Bit LCC B 6
(LC) Current value:
Double word LCN K, H 1 3
LCN
Data register (D) Word D K, H 0, 2, 4 1, 3
Link register (W) Word W K, H 0, 2, 4 1, 3
Link special register (SW) Word SW K, H 0, 2, 4 1, 3
System device
Special relay (SM) Bit SM B 6
Special register (SD) Word SD K, H 0, 2, 4 1, 3
Module access device (U\G)
Module access device (G) Word G K, H 0, 2, 4 1, 3
Index register
Index register (Z) Word Z K, H 0, 2, 4 1, 3
Long index register (LZ) Double word LZ K, H 2 3
File register
File register (R) Word R K, H 0, 2, 4 1, 3

79
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Update interval

The update interval of the user Web page is set with the HTML variable updateInterval.
This update interval is applied to all the user Web objects.

updateInterval Setting range HTML document

Not included 5 s interval (default) Omitted
5 to 120 s interval* Example: Setting the update interval to 10 s
Included
var updateInterval = 10;
6
*: If updateInterval is set to a value outside of the interval range of 5 to 120 s, operation will be performed with an interval of 5 s.
WITH CGI
CREATING A DEVICE MONITOR WINDOW

Message display language

The message display language is set with the HTML variable dspLanguage.
This section explains the variable setting and the message display language.

dspLanguage* Setting range HTML document

Not included English Omitted
ja-JP Japanese var dspLanguage = 'ja-JP';
en-US English var dspLanguage = 'en-US';
zh-CN Chinese (Simplified) var dspLanguage = 'zh-CN';
*: If dspLanguage is set to a value outside of the range, the display language is set to English.

7 uHow to write statements in the HTML file

Create the statements between the JavaScript starting and ending lines: <script> to </script>, which are placed between the
REFERENCES

<head> and </head> tags.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

<title>Sample</title>
<link href="./css/UserWebStyle.css" rel="stylesheet" media="all" />

<script src="./FUserWebLib.js"></script>


<script>
var updateInterval = 5; Update interval
var dspLanguage = 'en-US'; Message display language

</script>
</head>

80
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

5.3 Table

Data Block object (WSDatblk)

u Function u User Web page library window

Displays the specified device data as a table.

WITH CGI
CREATING A DEVICE MONITOR WINDOW
u Creation example

Direction: Horizontal
Row count: Two
Data count: Eight

Object design

Caution When the data format is set to single-precision real number, the data number base is changed to decimal.
7

REFERENCES
uHTML (JavaScript) structure
Create the HTML document for specifying the display devices consecutively as shown below with the number of rows or columns
of the devices to display.

Usage declaration Usage declaration

Parameters Display device specification Display device specification
(separate) (X0 to X7) Parameters (X0 to X7)
Parameters Data block (table construction) (separate) Display device specification
(common) settings (Y0 to Y7)

Execution Parameters Data block (table construction)

(common) settings
Execution

X0 X1 X2 X3 X4 X5 X6 X7 X0 X1 X2 X3 X4 X5 X6 X7

Y0 Y1 Y2 Y3 Y4 Y5 Y6 Y7

81
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

uList of parameters

• Vertical b direction: 0

b devValBkCol a devValCol
C yPos
b devNamBkCol a devNamCol

Object 001 1000 Object 101 500 b devValHeight

6 Object 002 900 Object 102 400

WITH CGI
CREATING A DEVICE MONITOR WINDOW

b blkSize Object 003 800 Object 103 300

Object 004 700 Object 104 200

Object 005 600 Object 105 100

C xPos devNamWidth
b b devValWidth

b blkSize
• Horizontal b direction: 1
b blkSize

Object 001 Object 002 Object 003 Object 004 Object 005 a dsp (item name)
7
1000 900 800 700 600 a name (device setting)
REFERENCES

a Item name and device settings

In the above list of parameters, dev sets the table item name and device.
The settings in JavaScript are split into dsp:, name:, base:, and format:.

u Item name setting … dsp:

Any character string (example: sensor) can be displayed.

In the following example, a sequence number (1 to 4) starting with the variable “i” set with a for statement is
added after 'sensor'.

Ex. for(var i = 1; i < 5; i++){ Display example

temp.push({ X1 = ON, X2 = OFF, X3 = OFF, X4 = ON
dsp: 'sensor'+i,
name: 'X'+i, Sensor1 Sensor2 Sensor3 Sensor4
base: 'B',
format: 6 1 0 0 1
});
}

u Device specification … name:

The value of the specified device (example: the values of X1 to X4) can be displayed.
In the following example, 'X' is the device classification and the sequence number (1 to 4) starting with the
variable “i” set with a for statement is the device number.

Ex. for(var i = 1; i < 5; i++){ Display example

temp.push({ X1 = ON, X2 = OFF, X3 = OFF, X4 = ON
dsp: 'sensor'+i,
name: 'X'+i, Sensor1 Sensor2 Sensor3 Sensor4
base: 'B',
1 0 0 1
format: 6
});
}

Related Page 5.2 Common Items - Device Setting Method

82
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

u Data number base … base:

Value Description
K Decimal
H Hexadecimal
B Binary

Related Page 5.2 Common Items - Device Setting Method

WITH CGI
CREATING A DEVICE MONITOR WINDOW
u Data format … format:

Value Description Value Description

0 16-bit signed 4 Single-precision real number
1 16-bit unsigned 5 Not used
2 32-bit signed 6 Bit
3 32-bit unsigned

Related Page 5.2 Common Items - Device Setting Method

u Device name (item name) display setting … devNamDisp:

Script Description Display example: Do not display device names.

devNamDisp: 0 Do not display. 1 0 0 1 7
devNamDisp: 1 Display (when omitted).
Display example: Display device names.

REFERENCES
X0 X1 X2 X3
1 0 0 1

u Character color specification … devNamCol: devValCol:

Script Description Remarks

devNamCol: Device name color specification RGB value or color name
devValCol: Device value color specification Examples: #ff0000 (RGB value), red (color name)

b Table construction settings

u Display direction specification … direction:

Script Description Display example: Vertical

direction: 0 Vertical (when omitted) X0 1 X2 0
direction: 1 Horizontal X1 0 X3 1

Display example: Horizontal

X0 X1
1 0
X2 X3
0 1

u Block size (horizontal cell count) specification … blkSize:

Script Description Remarks

This parameter changes the number of rows when the display
blkSize: Cell count specification direction is vertical and the number of columns when the
display direction is horizontal.

83
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

u Cell size specification … devNamWidth: devNamHeight: devValWidth: devValHeight:

Script Description Remarks

devNamWidth: Width
Device name cell
devNamHeight: Height
Positive real number (in pixels)
devValWidth: Width
Device value cell
devValHeight: Height

6
u Cell color specification … devNamBkCol: devValBkCol:
WITH CGI
CREATING A DEVICE MONITOR WINDOW

Script Description Remarks

devNamBkCol: Device name cell background color RGB value or color name
devValBkCol: Device value cell background color Examples: #FF0000 (RGB value), red (color name)

c Display starting coordinates setting

u Web browser display starting position setting … xPos: yPos:

Script Description Remarks

xPos: X-axis coordinate Setting range: Screen resolution of the personal
yPos: Y-axis coordinate computer (in pixels)

7
u How to view Web browser coordinates
REFERENCES

Ex. (xPos, yPos) = (100, 100)

X-axis (unit: pixel)

100 200 300 400 500 600 700 800
0

100 X0 X1 X2 X3 X4 X5 X6 X7

200 Y0 Y1 Y2 Y3 Y4 Y5 Y6 Y7

300
Y-axis (unit: pixel)

400

500

600

700

800

84
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

uHTML document explanation

Parameter handling
... Parameter setting required. An error occurs if this is not set.
... This parameter is not required when the device name display is set to “Do not display” (devNamDisp = 0).
... Details set with JavaScript.

Write all the required parameters. If a required parameter is not written or if a setting value is outside of its
Caution
range, an error occurs.
6

WITH CGI
CREATING A DEVICE MONITOR WINDOW
Line No. JavaScript Explanation

1 // Data Block object (WSDatblk) Write a comment.

2 temp = []; Declaration (label name)

Display device settings of lines 1 and 2

for statement start (variable name: i)
Display device specification (lines 1 and 2)

The lines within a for statement (from its start to its end) are executed
repeatedly. In the statement on the left, “i” is used as the variable for
counting the number of repetitions. The () part is composed of three
statements: the default value of the variable for the number of repetitions,
the end condition of the for statement, and the calculation for changing the
3 for(var i = 0; i < 8; i++){
number of repetitions.
The calculation for changing the number of repetitions is “i++”, so the
variable is increased by one each time the contents of the for statement are
executed until the for statement ends.
Write the part in the () so that the range matches the input device number. The
number of data items in the table is set with blkSize. Match i to that value + 1.
7
4 temp.push({ Device name setting start

REFERENCES
Name to display for the table item
5 dsp: 'X' + i, You can write any name such as 'Input'. The example on the left displays X0
to X7.
Device specification
6 name: 'X' + i, Specify the device number with device classification “+i”. Set the PLC device
name.
Device data number Setting value Description
7 base: 'B',
base B Binary

Setting value Description

8 format: 6 Device data format
6 Bit

9 }); Device name setting end

10 } for statement end

Display device settings of lines 3 and 4

Display device specification (lines 3 and 4)

11 for(var i = 0; i < 8; i++){ for statement start (variable name: i)

Device name setting start (The details are the same as those for line
12 temp.push({
number 3 above.)
Name to display for the table item
13 dsp: 'Y' + i, You can write any name such as 'Output'. The example on the left displays
Y0 to Y7.

Device specification
14 name: 'Y' + i, Specify the device number with device classification + i. Set the PLC device
name.

Device data number Setting value Description

15 base: 'B',
base B Binary

Setting value Description

16 format: 6 Device data format
6 Bit

17 }); Device name setting end

18 } for statement end

85
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Line No. JavaScript Explanation

Table overall settings

19 dataBlockParam = { JavaScript parameter setting start
Specify the multiple device names (values) set with the for statement on the
20 dev: temp,
previous page.
21 direction: 1, Display direction 0: Vertical 1: Horizontal
22 blkSize: 8, Block size
23 devNamDisp: 1, Device name display 0: Do not display. 1: Display (when omitted).
6 Character color: Specified with a color name in this
Parameters (common)

24 devNamCol: 'white',
example
WITH CGI
CREATING A DEVICE MONITOR WINDOW

Device name cell Background color: Specified with a color code (RGB
25 devNamBkCol: '#808080', color specification value) in this example
and size
26 devNamWidth: 100, Cell width (in pixels)
27 devNamHeight: 40, Cell height (in pixels)
Character color: Specified with a color name in this
28 devValCol: 'blue',
example
Background color: Specified with a color name in
29 devValBkCol: 'white',
this example
Device value cell color
30 devValWidth: 80, specification and size Cell width (in pixels)
31 devValHeight: 50, Cell height (in pixels)
Line color: Specified with a color name in this
32 lnCol: 'blue',
example
33 xPos: 20, Display starting X-coordinate (in pixels)
34 yPos: 40 position Y-coordinate (in pixels)

7 35 } JavaScript parameter setting end

Execution
REFERENCES

36 WSDatblk(dataBlockParam); Executes the display of the Data Block object.

86
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Level display object Historical graph object

5.4 Graphs

Level display object (WSLevel)

u Function u User Web page library window

Displays the current value of the specified

device as a level within the range of the upper
limit value and lower limit value.
6

WITH CGI
CREATING A DEVICE MONITOR WINDOW
u Creation example

Direction: Vertical

Object design

uHTML (JavaScript) structure

Create the object with the following structure. 7
Usage declaration

REFERENCES
Display device specification
Execution Parameters
Level display settings

87
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Level display object Historical graph object

uList of parameters

• Vertical b direction: 0

b levWidth
d yPos

b upperVal
b bkCol

6 b upperAlmVal b almLnCol
WITH CGI
CREATING A DEVICE MONITOR WINDOW

b upperCol
b levLength

b levCol

b lowerAlmVal

b lowerVal b lowerCol

c devValHeight 123 c devValCol 123 c devValBkCol 123

(Cell width of current value display)

d xPos c devValWidth

7 • Horizontal b direction: 1
REFERENCES

b levLength

b levWidth

123

a Device settings

u Device name … devName: Device classification + device number

Related Page 5.2 Common Items - Device Setting Method

u Data format … valFormat:

Value Description
0 16-bit signed (when omitted)
1 16-bit unsigned
2 32-bit signed
3 32-bit unsigned
4 Single-precision real number

Related Page 5.2 Common Items - Device Setting Method

88
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Level display object Historical graph object

b Level display settings

u Level direction … direction:

Script Description
direction: 0 Vertical (when omitted)
direction: 1 Horizontal

6
u Upper/lower limit value … upperVal: lowerVal:

WITH CGI
CREATING A DEVICE MONITOR WINDOW
Script Description
upperVal: Upper limit value
lowerVal: Lower limit value

u Upper/lower limit of alarm value … upperAlmVal: lowerAlmVal:

Script Description
upperAlmVal: Upper limit of alarm value
lowerAlmVal: Lower limit of alarm value

u Alarm value line display … dspAlmLn:

Script Description Display example: Display example:

dspAlmLn: 0 Do not display.
Do not display. Display. 7
dspAlmLn: 1 Display (when omitted).

REFERENCES
123 123

u Current value display … dspVal:

Script Description Display example: Display example:

Do not display. Display.
dspVal: 0 Do not display.
dspVal: 1 Display (when omitted).

123

89
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Level display object Historical graph object

u Color specification … levCol: upperCol: lowerCol: bkCol: almLnCol:

The level display color varies depending on the Lower limit Upper limit
of alarm value of alarm value
upper/lower limit of the alarm value. Lower limit Upper limit
value value
Level display color levCol:
Script Description
Upper limit of alarm
levCol: Level display color value color upperCol:
Lower limit of alarm
6 upperCol:
lowerCol:
Upper limit of alarm value color*
Lower limit of alarm value color*
value color lowerCol:

Background color bkCol:

WITH CGI
CREATING A DEVICE MONITOR WINDOW

bkCol: Background color Line color of alarm

value almLnCol:
almLnCol: Line color of alarm value
Display example:
*: When this parameter is omitted, the color is the same
The current value has exceeded
as the level display color.
the upper limit of the alarm value.

Display example:
The current value is within the upper
and lower limits of the alarm value.

Display example:
The current value is less than the
lower limit of the alarm value.

7
u Size specification … levLength: levWidth
REFERENCES

Script Description Remarks

levLength: Level length
Positive real number (in pixels)
levWidth: Level width

c Current value display cell

u Size specification … devValWidth: devValHeight:

Script Description Remarks

devValWidth: Cell width of current value
Positive real number (in pixels)
devValHeight: Cell height of current value

u Cell color specification … devValCol: devValBkCol:

Script Description Remarks

devValCol: Character color of current value
RGB value or color name
Background color of current Examples: #FF0000 (RGB value), red (color name)
devValBkCol:
value

90
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Level display object Historical graph object

d Display starting coordinates setting

u Web browser display starting position setting … xPos: yPos:

Script Description Remarks

xPos: X-axis coordinate
Personal computer setting range: Screen resolution (in pixels)
yPos: Y-axis coordinate
6
u How to view Web browser coordinates

WITH CGI
CREATING A DEVICE MONITOR WINDOW
Ex. (xPos, yPos) = (550, 150)

X-axis (unit: pixel)

100 200 300 400 500 600 700 800
0

100

200

300
Y-axis (unit: pixel)

400

500

600
7
700

REFERENCES
800

91
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Level display object Historical graph object

uHTML document explanation

Parameter handling
... Parameter setting required. An error occurs if this is not set.
... Details set with JavaScript.

Write all the required parameters. If a required parameter is not written or if a setting value is outside of its
Caution
range, an error occurs.

6
Line No. JavaScript Explanation
WITH CGI
CREATING A DEVICE MONITOR WINDOW

1 // Level display object Write a comment.

Execution

Data Block object parameter setting + display execution

2 WSLevel({
JavaScript parameter setting start

Device specification
3 devName: 'D0', Specify the device number with device classification + i (set the PLC device
name).
Display
4 direction: 0, 0: Vertical (when omitted) 1: Horizontal
direction
5 levCol: 'mediumblue', Level display color: Specified with a color name in this example
6 upperCol: 'red', Upper limit of alarm value color: Specified with a color name in this example
Lower limit of alarm value color: Specified with a color code (RGB value) in
7 lowerCol: '#00FF00',
this example
8 bkCol: 'white', Background color: Specified with a color name in this example
7 Upper limit value: Range of values that can be handled with the specified
9 upperVal: 32767,
device
REFERENCES

Lower limit value: Range of values that can be handled with the specified
10 lowerVal: -32768,
device
Upper limit of alarm value: Range of values that can be handled with the
11 upperAlmVal: 20000,
specified device
Parameters

Lower limit of alarm value: Range of values that can be handled with the
12 lowerAlmVal: -20000,
specified device
Alarm value
13 dspAlmLn: 1, 0: Do not display. 1: Display (when omitted).
line display
14 almLnCol: 'black', Line color of alarm value: Specified with a color name in this example
15 levLength: 400, Level length: Positive real number (in pixels)
16 levWidth: 150, Level width: Positive real number (in pixels)
Current value
17 dspVal: 1, 0: Do not display. 1: Display (when omitted).
display
0: 16-bit signed (when omitted) 3: 32-bit unsigned
Device data
18 valFormat: 0, 1: 16-bit unsigned 4: Single-precision real number
format
2: 32-bit signed
19 devValCol: 'white', Character color of current value
20 devValBkCol: 'black', Background color of current value
21 devValWidth: 150, Cell width of current value (in pixels)
22 devValHeight: 50, Cell height of current value (in pixels)
23 xPos: 700, Display X-coordinate (in pixels)
starting
24 yPos: 250, position Y-coordinate (in pixels)

25 }); JavaScript parameter setting end

92
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Level display object Historical graph object

Historical graph object (WSHstgrp)

u Function u User Web page library window

Displays a device value as a chronological order

line graph.

WITH CGI
CREATING A DEVICE MONITOR WINDOW
u Operation

The device value is read per update interval.

When the upper limit on the number of records
is reached, the oldest record is deleted and the
display is shifted to the left.
(1) Update interval portion
7

REFERENCES
(2) An update interval portion is outside the
display range.
Number of records (pointNum)
Old New
(2) (1)

Object design

• The numeric values that can be handled with the historical graph object are fixed to decimal values.
Restriction
• If a state in which the communication load is high continues, device values may be lost.

uHTML (JavaScript) structure

Create the HTML document for specifying the display devices consecutively as shown below with the number of device lines to display.

When there is one line When there are

three lines
Usage declaration
Usage declaration
Parameters (separate) Display device specification (first line)
Display device specification (first line)
Parameters (common) Historical graph settings Parameters
Display device specification (second line)
Execution (separate)
Display device specification (third line)
Parameters
Historical graph settings
(common)
Execution

First line First line

Second line

Third line

93
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Level display object Historical graph object

uList of parameters

b dspCol b lnCol b grBkCol

c yPos b leftMargin b rightMargin

b upperMargin
d upper

6
b grHeight: b xLine
WITH CGI
CREATING A DEVICE MONITOR WINDOW

d lower
b lowerMargin

c xPos b yLine
b grWidth

b pointNum

a Device settings

u Device name … devName: Device classification + device number

7
Related Page 5.2 Common Items - Device Setting Method
REFERENCES

u Data format … devFormat:

Value Description Value Description Value Description Value Description

Single-precision real
0 16-bit signed 2 32-bit signed 4 6 Bit
number
1 16-bit unsigned 3 32-bit unsigned 5 Not used

Related Page 5.2 Common Items - Device Setting Method

b Historical graph display settings

u Number of graph elements … grElmNum:

Setting
Script Description
range
Line count
grElmNum: 1 to 32
setting

u Number of records … pointNum:

Setting
Script Description 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
range
Number of data
points along the
pointNum: 5 to 100
horizontal axis
of the line graph

Ex. pointNum: 21

94
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Level display object Historical graph object

u Upper/lower limit value … upper: lower:

Script Description Remarks

upper: Upper limit value Device value (Y-axis) upper limit value and lower limit value settings
An error occurs if the value is outside of this range.
lower: Lower limit value For the bit data format, specify 1 for the upper limit value and 0 for the
lower limit value.

32767 6

WITH CGI
CREATING A DEVICE MONITOR WINDOW
-32768
2019-1-15 9:45:32 2019-1-15 9:45:52

u Vertical-axis interval (record) … yLine:

Script Setting range Description

Interval setting for displaying the vertical-axis graduation lines
yLine: 0 to 99
The specified value indicates the number of records in each interval.
7
Ex. yLine: 5 (vertical-axis interval)

REFERENCES
pointNum: 21
5 5 5 5 Vertical axes are displayed as
yLine
12345123451234512345 shown below in the Web browser.

u Number of horizontal-axis lines … xLine:

Script Setting range Description

xLine: 0 to 99 Setting for the number of lines to display for horizontal-axis graduation lines

Ex. xLine: 9

1
2
3
4
5
6
7
8
9

95
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Level display object Historical graph object

u Color specification … lnCol: dspCol: grBkCol:

Script Description
lnCol: Graph line color
dspCol: Character color
grBkCol: Graph background color

6 32767 32767
WITH CGI
CREATING A DEVICE MONITOR WINDOW

-32768 -32768
2019-1-15 9:45:32 2019-1-15 9:45:52 2019-1-15 9:45:32 2019-1-15 9:45:52

u Size specification … grHeight: grWidth:

Script Description Remarks

grHeight: Graph height
Positive real number (in pixels)
grWidth: Graph width

7 u Margin specification … rightMargin: leftMargin: upperMargin: lowerMargin:

Script Description Remarks

REFERENCES

rightMargin: Right margin

leftMargin: Left margin Positive real number (in pixels)
upperMargin: Upper margin Set to 0 when the parameter is omitted.
lowerMargin: Lower margin

c Display starting coordinates setting

u Web browser display starting position setting … xPos: yPos:

Script Description Remarks

xPos: X-axis coordinate
Setting range: Screen resolution (in pixels)
yPos: Y-axis coordinate

u How to view Web browser coordinates

Ex. (xPos, yPos) = (100, 200)
X-axis (unit: pixel)
100 200 300 400 500 600 700 800
0

100

200

300
Y-axis (unit: pixel)

400

500

600

700

800

96
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Level display object Historical graph object

uHTML document explanation

Parameter handling
... Parameter setting required. An error occurs if this is not set.

Write all the required parameters. If a required parameter is not written or if a setting value is outside of its
Caution
range, an error occurs.

Line No. JavaScript Explanation 6

// Historical graph object Write a comment.

WITH CGI
CREATING A DEVICE MONITOR WINDOW
1
2 temp = [];,
3 num = 2; Number of graph elements, setting range: 1 to 32
4 temp.push({ Specification of the first line
5 devName: 'D0', Device name: Device classification + device number
6 lnCol: 'red', Graph line color: Specified with a color name in this example
7 });
8 temp.push({ Specification of the second line
9 devName: 'D1', Device name: Device classification + device number
10 lnCol: 'blue', Graph line color: Specified with a color name in this example
11 });
Display device specification (lines 1 and 2)

12 hstGrpParam = {
13 xPos: 20, Display starting X-coordinate (in pixels)
14 yPos: 250, position Y-coordinate (in pixels)
Argument num sets the number of graph elements with num = 2 on line 7
15 grElmNum: num,
number 3.

REFERENCES
Value Description
16 devFormat: 0, Device data format
0 16-bit signed

The argument temp sets the device name and graph line color to a value
17 grElm: temp,
that does not exceed the value of num on line number 3.
18 grBkCol: '#F0F0F0', Graph background color: Specified with a color code in this example
19 dspCol: 'black', Character color: Specified with a color name in this example
20 pointNum: 20, Number of records
21 pointInt: 2,
22 upper: 32767, Upper limit value
23 lower: -32768, Lower limit value
24 xLine: 9, Number of horizontal-axis lines: 0 to 99
25 yLine: 5, Vertical-axis interval (number of records) at which to display lines: 0 to 99
26 grHeight: 380, Graph height (in pixels)
27 grWidth: 550, Graph width (in pixels)
Upper margin: Positive real number (in pixels; set to 0 when the parameter
28 upperMargin: 15,
is omitted)
Left margin: Positive real number (in pixels; set to 0 when the parameter is
29 leftMargin: 75,
omitted)
Lower margin: Positive real number (in pixels; set to 0 when the parameter
30 lowerMargin: 55,
is omitted)
Right margin: Positive real number (in pixels; set to 0 when the parameter is
31 rightMargin: 25
omitted)
32 } JavaScript parameter setting end
Execution

33 WSHstgrp(hstGrpParam); Executes the display of the Data Block object.

97
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Image display object Figure display object

5.5 Image/Figure

Image display object (WSPicture)

u Function u User Web page library window

Displays the specified image file when the

6 device value reaches a value in the set range.

WITH CGI
CREATING A DEVICE MONITOR WINDOW

u Creation example

Monitor device: D0
Number of images: Three (including the default
display image)

Set image file names:

sample0.png
sample1.png
sample2.png

7 Object design
REFERENCES

• As a guideline, ensure that the total size of all the image files in a single window is 100 kbyte or less.
Restriction • If setting ranges overlap, the images of the setting range with the lower number are displayed. For example, if
the device value is within setting range 1 and setting range 2, the display will be that for setting range 1.

uHTML (JavaScript) structure

Create the HTML document for the parameters consecutively as shown below to match the number of images that switch the
display.

Execution
Image display object settings
Parameters
Default display image
(common)
Image (first)
Image (second)
Parameters
(separate)
Image (fifth)

uList of parameters

C yPos b pictWidth b defPicture

b range.picture

C xPos
b pictHeight

98
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Image display object Figure display object

a Device settings

u Device name … devName: Device classification + device number

Related Page 5.2 Common Items - Device Setting Method

u Data format … valFormat:

6
Value Description Value Description

WITH CGI
CREATING A DEVICE MONITOR WINDOW
Single-precision real
0 16-bit signed 4
number
1 16-bit unsigned 5 Not used
2 32-bit signed 6 Bit
3 32-bit unsigned

Related Page 5.2 Common Items - Device Setting Method

b Image settings

u Image count setting … rangeNum:

Specifies the number of images to display. (The default display image is not included.) 7
Script Description Remarks

REFERENCES
Switch-to image count
rangeNum: Setting range: 1 to 5
setting

u Image file setting … defPicture: range.picture:

Specifies an image file. The image is displayed with the size specified by the image size setting.

Script Description Remarks

Default image file Displayed when the device value is outside the setting range.
defPicture:
specification Extension: .jpg, .jpeg, .gif, .png
Switch-to image file Displayed when the device value is inside the setting range.
range.picture:
specification Extension: .jpg, .jpeg, .gif, .png

Related Page 5.1 What Is JavaScript (JS)? - Usable files

u Image size setting … pictHeight: pictWidth:

Script Description Remarks

pictHeight: Image height Value: Positive real number (in pixels)
pictWidth: Image width If a negative number is specified, it is handled as its absolute value.

99
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Image display object Figure display object

u Device value range setting … range.low: range.high:

Script Description Remarks

Lower limit value of the device values
range.low: Lower limit value
that display the image Value: Positive real
Upper limit value of the device values number (in pixels)
range.high: Upper limit value
that display the image

6
Ex. rangeNum: 2
WITH CGI
CREATING A DEVICE MONITOR WINDOW

Default display
Image (first) range.low: -5000, range.high: 5000
Image (second) range.low: -10000, range.high: 10000

Lower limit Upper limit

value -10000 -5000 5000 10000 value

c Display starting coordinates setting

7 u Web browser display starting position setting … xPos: yPos:

REFERENCES

Script Description Remarks

xPos: X-axis coordinate
Setting range: Screen resolution of the personal computer (units of pixels)
yPos: Y-axis coordinate

u How to view Web browser coordinates

Ex. (xPos, yPos) = (300, 400)

X-axis (unit: pixel)

100 200 300 400 500 600 700 800
0

100

200

300
Y-axis (unit: pixel)

400

500

600

700

800

100
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Image display object Figure display object

uHTML document explanation

Parameter handling
... Parameter setting required. An error occurs if this is not set.

Write all the required parameters. If a required parameter is not written or if a setting value is outside of its
Caution
range, an error occurs.

Line No. JavaScript Explanation 6

WITH CGI
CREATING A DEVICE MONITOR WINDOW
1 // Image display object Write a comment.
Execution

Image display object parameter setting + display

2 WSPicture({
execution

Device specification
3 devName: 'D0',
Device classification + device number
Value Description
4 devFormat: 0, Device data format
0 16-bit signed

5 pictHeight: 30, Display range height of image file

6 pictWidth: 30, Display range width of image file
7 defPicture: './img/sample0.png', Name of image file to be displayed as default
8 rangeNum 2, Setting range count: Setting range: 1 to 5
9 range:[
10 {
Lower limit value of the device
7
11 low: -5000,
Parameters

Settings for changing values that display the image

REFERENCES
the image Upper limit value of the device
12 high: 5000,
(first) values that display the image
13 picture: './img/sample1.png', Specify an image file.
14 },
15 {
Lower limit value of the device
16 low: -10000,
Settings for changing values that display the image
the image Upper limit value of the device
17 high: 10000,
(second) values that display the image
18 picture: './img/sample2.png', Specify an image file.
19 },
20 ],
21 xPos: 150, Display starting X-coordinate (in pixels)
22 yPos: 50, position Y-coordinate (in pixels)
23 });

101
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Image display object Figure display object

Figure display object (WSFigure)

u Function u User Web page library window

Displays a figure with the specified color when

the device value reaches a value in the set
range.

6
WITH CGI
CREATING A DEVICE MONITOR WINDOW

u Creation example

Shape: Inverted triangle

Figure colors: Three (including the default
display figure color)

Object design

• If setting ranges overlap, the images of the setting range with the lower number are displayed.
For example, if the device value is within setting range 1 and setting range 2, the display will be that for setting
Restriction
range 1.
7 • The device value is monitored at a fixed interval.
REFERENCES

uHTML (JavaScript) structure

Set only the range portion for the colors that you want to display.

Execution Example of set image file names:

Figure display object settings sample0.png
Parameters
(common) Default display figure color sample1.png

Parameters (separate) Figure color setting (first) sample2.png

Parameters (separate) Figure color setting (second)

uList of parameters

• Oval (circle) • Rectangle (square)

b figWidth b defCol b figWidth b defCol

C yPos C yPos

C xPos C xPos
b figHeight b figHeight

• Triangle
b figWidth b defCol
C yPos

C xPos
b figHeight

102
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Image display object Figure display object

a Device settings

u Device name … devName: Device classification + device number

Related Page 5.2 Common Items - Device Setting Method

u Data number base … base:

6
Value Description

WITH CGI
CREATING A DEVICE MONITOR WINDOW
K Decimal
H Hexadecimal
B Binary

Related Page 5.2 Common Items - Device Setting Method

u Data format … devFormat:

Value Description Value Description

0 16-bit signed 4 Single-precision real number
1 16-bit unsigned 5 Not used
2 32-bit signed 6 Bit
3 32-bit unsigned
7
Related Page 5.2 Common Items - Device Setting Method

REFERENCES
u Device value range setting … range.low: range.high:

Script Description Remarks

Lower limit value of the device values
range.low: Lower limit value
that display the figure color Value: Positive real number (in
Upper limit value of the device values pixels)
range.high: Upper limit value
that display the figure color

b Figure settings

u Setting range count … rangeNum:

Specifies the number of colors (1 to 5) to change. (The default display color is not included.)

u Shape... figType:

Value Description Remarks

'Oval', Oval When specifying a circle, set the figure height to the figure width.
'Rect', Rectangle When specifying a square, set the figure height to the figure width.
When specifying an inverted triangle, set the height of the figure size to a
'Tri', Triangle
negative value.

u Figure size setting … figWidth: figHeight:

Script Description Remarks

figWidth: Figure width Real number (in pixels)
figHeight: Figure height If a negative number is specified, it is handled as its absolute value.

103
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Image display object Figure display object

u Figure color specification … defCol: rangecol:

Script Description Remarks

The color of the figure displayed when
Default display
defCol: the device value is outside the setting
color RGB value or color name
range. (Default display figure color)
Examples: #FF9900 (RGB value), red (color
The color of the figure displayed when name)
range.col: Change color each device value is inside the setting
6 range.
WITH CGI
CREATING A DEVICE MONITOR WINDOW

Related Page 7.3 Color Name/Color Code

Operation example
Centered on 0, an upper limit value and a lower limit value are set on, respectively, the positive side and
negative side.

Change Change Change Change Change

setting setting setting setting setting
Default value (third) (second) (first) (second) (third) Default value

Lower limit Upper limit

value low: -1500 -1000 -500 0 500 1000 1500 value high:

7
JavaScript example (extract)
REFERENCES

When three change colors are set, the JavaScript is as shown below.

JavaScript Explanation

figType: 'Oval', Oval figure

defCol: 'red', Default display color setting
Setting for the number of
rangeNum: 3,
colors to change
range:[
{
low: -500,
high: 500, Change setting (first)
col: 'green',
},
{
low: -1000,
high: 1000, Change setting (second)
col: 'blue',
{
{
low: -1500,
high: 1500, Change setting (third)
col: '#FF9900',
{
],

104
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Image display object Figure display object

c Display starting coordinates setting

u Web browser display starting position setting … xPos: yPos:

Script Description Remarks

X-axis
xPos:
coordinate
Setting range: Screen resolution of the personal computer (in pixels)
Y-axis
yPos:
coordinate 6

WITH CGI
CREATING A DEVICE MONITOR WINDOW
u How to view Web browser coordinates
Ex. (xPos, yPos) = (400, 400)

X-axis (unit: pixel)

100 200 300 400 500 600 700 800
0

100

200

300
Y-axis (unit: pixel)

400

500
7
600

REFERENCES
700

800

105
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Image display object Figure display object

uHTML document explanation

Parameter handling
... Parameter setting required. An error occurs if this is not set.

Write all the required parameters. If a required parameter is not written or if a setting value is outside of its
Caution
range, an error occurs.

6 Line No. JavaScript Explanation

WITH CGI
CREATING A DEVICE MONITOR WINDOW

Execution

1 // Figure display object Write a comment.

2 WSFigure({ Figure display object parameter setting + display execution

3 devName: 'D0', Device specification: Device classification + device number

Value Description
4 devFormat: 0, Device data format
0 16-bit signed

5 figType: 'tri', Figure type, example: Triangle

6 figHeight: -30, Figure size (If a negative Height: Real number (in pixels)
number is specified, it is
7 figWidth: 60, handled as its absolute Width: Real number (in pixels)
value.)
8 defCol: 'red', Default display color: Specified with a color name in this example
Setting range n: 1 to 5
9 rangeNum: 2, Setting range count
Specifies the number of colors to change.
7 10 range:[ Specification start of the setting range to change
11 {
REFERENCES

Lower limit value of the device values that

low:
Parameters

12 -5000,
display the figure color
Upper limit value of the device values that
13 high: 5000, Change setting (first)
display the figure color
Display color when the value is within the
14 col: 'green',
upper and lower limit values
15 },
16 {
Lower limit value of the device values that
17 low: -10000,
display the figure color
Upper limit value of the device values that
18 high: 10000, Change setting (second)
display the figure color
Display color when the value is within the
19 col: 'blue',
upper and lower limit values
20 },
21 ], Specification end of the setting range to change
22 xPos: 300, X-coordinate (in pixels)
Display starting position
23 yPos: 730, Y-coordinate (in pixels)
24 }); JavaScript parameter setting end

106
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Write button object Logout button object

5.6 Operation Buttons

Write button object (WSWrtBtn)

u Function u User Web page library window

Writes the specified value to the specified

device.
6

WITH CGI
CREATING A DEVICE MONITOR WINDOW
u Creation example

O K
The character string within the button can be
changed.

Object design

uHTML (JavaScript) structure 7

Create the HTML document for the parameters as shown below.

REFERENCES
Usage declaration
Parameters Writing device specification
Execution

uList of parameters

b btnWidth b logOutBtn
C yPos

C xPos
O K b btnHeight:

b btnTxt

a Device settings

u Device name … devName: Device classification + device number

Related Page 5.2 Common Items - Device Setting Method

u Data number base ... devBase:

Value Description
K Decimal
H Hexadecimal
B Binary

Related Page 5.2 Common Items - Device Setting Method

107
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Write button object Logout button object

u Data format … devFormat:

Value Description Value Description

0 16-bit signed 4 Single-precision real number
1 16-bit unsigned 5 Not used
2 32-bit signed 6 Bit
3 32-bit unsigned
6
Related Page 5.2 Common Items - Device Setting Method
WITH CGI
CREATING A DEVICE MONITOR WINDOW

u Write value … wrVal:

Script Description Remarks

The setting range varies depending on the number base or data format of the
wrVal: Write value
device.

Specify the input value with a character string. (Enclose it in single quotation marks ['].)
Special Note
Example: wrVal: '1'

b Button design

7 u Style Sheet class element name … wrBtn:

Script Description Remarks

REFERENCES

class element
wrBtn: Used with Style Sheet selectors
name

u Button display text … btnTxt:

Script Description
btnTxt: Text displayed on the button (A blank is displayed when this parameter is omitted.)

u Button size specification … btnWidth: btnHeigh:

Script Description Remarks

btnWidth: Button width
Positive real number (in pixels)
btnHeight: Button height

u Write confirmation message presence … wrComfirm:

Specifies whether to display a write confirmation message in the terminal OS when the button is operated (when
the device value is written).
 For details, refer to Message language ... language:.

Script Description Remarks

wrComfirm: 0 Do not display. 0 (do not display the write confirmation message) when this parameter
wrComfirm: 1 Display. is omitted.

108
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Write button object Logout button object

u Message language … language:

Script Description Remarks

language:0 Japanese
language:1 English Set to 1 (English) when the parameter is omitted.
language:2 Chinese (Simplified)

Ex. When the OS is Windows® 6

WITH CGI
CREATING A DEVICE MONITOR WINDOW
language:0 language:1 language:2

The title bar and button text in the dialog box shown above are displayed in the language set with the
language setting in Windows®. The windows shown above are from the Japanese version of Windows® 10.

REFERENCES
c Display starting coordinates setting

u Web browser display starting position setting … xPos: yPos:

Script Description Remarks

X-axis
xPos:
coordinate
Setting range: Screen resolution (in pixels)
Y-axis
yPos:
coordinate

u How to view Web browser coordinates

Ex. OK button: (xPos, yPos) = (700, 300)
NG button: (xPos, yPos) = (700, 400)

X-axis (unit: pixel)

100 200 300 400 500 600 700 800
0

100

200

300
Y-axis (unit: pixel)

O K

400
NG

500

600

700

800

109
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Write button object Logout button object

uHTML document explanation

Parameter handling
... Parameter setting required. An error occurs if this is not set.

Write all the required parameters. If a required parameter is not written or if a setting value is outside of its
Caution
range, an error occurs.

6 Line No. JavaScript Explanation

OK button
WITH CGI
CREATING A DEVICE MONITOR WINDOW

Execution

1 // Write button object Write a comment.

2 WSWrtBtn({ Write button object parameter setting + display execution

3 devName :'X0', Device specification Device classification + device number

Display device specification (lines 1 and 2)

Device data number Setting value Description

4 devBase :'B',
base B Binary

Setting value Description

5 devFormat :6, Device data format
6 Bit

Sets the write value to '1' (turns ON X0). Sets the input value with a character
6 wrVal :'1',
string. (Enclose it in single quotation marks ['].)
7 wrBtn :'write_btn', Style Sheet class element name
btnTxt :'OK', Sets the text displayed on the button to 'OK'.
7 8
btnWidth :150, Width (in pixels)
9
Button size
REFERENCES

10 btnHeight :50, Height (in pixels)

11 wrComfirm :1, Write confirmation message presence
12 language :0, Message language
13 xPos :700, Display starting X-coordinate (in pixels)
14 yPos :40, position Y-coordinate (in pixels)
15 } JavaScript parameter setting end

NG button
Execution

16 // Write button object Write a comment.

17 WSWrtBtn({ Write button object display execution

18 devName :'X0', Device specification Device classification + device number

Display device specification (lines 1 and 2)

Device data number Setting value Description

19 devBase :'B',
base B Binary

Setting value Description

20 devFormat :6, Device data format
6 Bit

Sets the write value to '0' (turns OFF X0). Sets the input value with a
21 wrVal :'0',
character string. (Enclose it in single quotation marks ['].)
22 wrBtn :'write_btn', Style Sheet class element name
23 btnTxt :'NG', Sets the text displayed on the button to 'NG'.
24 btnWidth :150, Width (in pixels)
Button size
25 btnHeight :50, Height (in pixels)
26 wrComfirm :1, Write confirmation message presence
27 language :0, Message language
28 xPos :700, Display starting X-coordinate (in pixels)
29 yPos :130, position Y-coordinate (in pixels)
30 } JavaScript parameter setting end

110
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Write button object Logout button object

Logout button object (WSLogoutBtn)

u Function u User Web page library window

Place the button for logging out.

u Creation example
6

WITH CGI
CREATING A DEVICE MONITOR WINDOW
Log Out
The character string within the button can be
changed.

Object design

• Only one logout button object can be used per Web page.
Restriction • Be sure to store the user login page (Log-in_User.html) on the SD memory card.
• If a parameter is not specified, the default style specified with the Style Sheet (UserWebStyle.css) is used.
7

REFERENCES
uHTML (JavaScript) structure
Parameters Display settings
Execution

uList of parameters

b btnWidth b logOutBtn
C yPos

C xPos
Log Out b btnHeight:

b btnTxt

a Button display settings

u Size specification … btnWidth: btnHeigh:

Script Description
btnWidth: Width (in pixels)
Button size
btnHeigh Height (in pixels)

u Button display text … btnTxt:

Script Description Ex. btnTxt: ' ' Japanese

Set text displayed on the button (A btnTxt: 'Log Out' English
btnTxt: blank is displayed when this parameter
is omitted.)
btnTxt: ' ' Chinese

111
5
5. LEARNING THE FUNCTIONS OF OBJECTS THAT CAN BE DISPLAYED WITH JAVASCRIPT (JS)
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is JavaScript? Common Items Table Graphs Image/Figure Operation Buttons

Write button object Logout button object

b Display starting coordinates setting

u Web browser display starting position setting … xPos: yPos:

Script Description Remarks
X-axis
xPos:
coordinate
Setting range: Screen resolution (in pixels)
Y-axis
yPos:
6 coordinate
WITH CGI
CREATING A DEVICE MONITOR WINDOW

u How to view Web browser coordinates

Ex. (xPos, yPos) = (100, 600)

X-axis (unit: pixel)

100 200 300 400 500 600 700 800
0

100

200

300
Y-axis (unit: pixel)

400

500

7 600
Log Out
REFERENCES

700

800

uHTML document explanation

Parameter handling
... Parameter setting required. An error occurs if this is not set.

Write all the required parameters. If a required parameter is not written or if a setting value is outside of its
Caution
range, an error occurs.

Line No. JavaScript Explanation

1 // Logout button object Write a comment.

2 logoutBtnParam = { JavaScript parameter setting start
Parameters

3 xPos 20, Display starting X-coordinate (in pixels)

4 yPos 730, position Y-coordinate (in pixels)
5 btnWidth 26, Width (in pixels)
Button size
6 btnHeight 100, Height (in pixels)
7 btnTxt 'Log Out' Text displayed on the button
8 } JavaScript parameter setting end
Execution

9 WSLogoutBtn(logoutBtnParam); Execution

112
5
6. CREATING A DEVICE MONITOR WINDOW WITH CGI

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is CGI? Overview and Functions of CGI Common Specifications Device Reading Web Page Creation Device Writing Web Page Creation

6.1 What Is CGI?

CGI stands for “Common Gateway Interface”.

Its mechanism is as follows: in response to a request from a Web browser or a similar source, a program is executed on a Web
server. The execution result is then returned to the client and is displayed on the Web browser. You can use CGI objects to create
a simple user Web page with a small file size.

The device reading and writing CGI objects shown below can be used in user Web pages.
6
Item CGI name Function Reference section

WITH CGI
CREATING A DEVICE MONITOR WINDOW
Device reading CGI RdDevRnd.cgi Reads the current value of the specified device. 6.4
Device writing CGI WrDev.cgi Writes the setting value to the specified device. 6.5

6.2 Overview and Functions of CGI

Overview of CGI

A Web server system operates on the FX5 PLC when the Web server function is enabled with a GX Works3 parameter.
The mechanism of CGI is as follows: in response to access from a Web browser, a CGI program is executed within the Web server
in the PLC, and then the result is returned to the Web browser.

FX5 PLC
7
(1) Request

REFERENCES
CGI program
Send data to the CGI.

File Edit View Favorites Tools Help

Web server
Execute the program. Web browser
system

(2) Response
Execution result
Return the result. Client
HTML file

113
5
6. CREATING A DEVICE MONITOR WINDOW WITH CGI
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is CGI? Overview and Functions of CGI Common Specifications Device Reading Web Page Creation Device Writing Web Page Creation

Functions of CGI

The device reading/writing CGI objects shown below can be used in user Web pages. There are two types of CGI objects: [those
for reading from devices] and [those for writing to devices]. You can use CGI to read/write values from/to devices by clicking
the read/write buttons.

uFunction of the CGI used to read from devices

Click [Read] to update and display the monitor values.
6 The default values are the device names and data formats created with the HTML. The values are blank until the [Read] button is
clicked. Also, the displayed device names and data formats can be changed.
WITH CGI
CREATING A DEVICE MONITOR WINDOW

Window example
CGI name RdDevRnd.cgi Device name Data type Value
Function Reads the current value of the specified device. D10 16-bit integer 1234
D11 32-bit integer 123456
M0 Bit 0
Read

Devices set with the HTML Constants set with the HTML

uOperation procedure
As an example, this section explains the procedure for changing D11 on line 2 to D20 and monitoring the devices.

7
REFERENCES

1 Click Read. 4 Clear (for example) D11.

Device name Data type Value Device name Data type Value
D10 16-bit integer D10 16-bit integer 1234
D11 32-bit integer 32-bit integer 123456
M0 Bit M0 Bit 0
Read Read Click the Close button (×) to delete the
device name.

2 Display the monitor values.

Device name Data type Value 5 Enter D20.

D10 16-bit integer 1234 Device name Data type Value
D11 32-bit integer 123456 D10 16-bit integer 1234
M0 Bit 0 D20 32-bit integer 123456
Read M0 Bit 0
Read

3 Click (for example) the D11 cell.

Device name Data type Value 6 Click Read to update the D20 monitor value.
D10 16-bit integer 1234 Device name Data type Value
D11 32-bit integer 123456 D10 16-bit integer 1234
M0 Bit 0 D20 32-bit integer 0
Read Select the device name to display the M0 Bit 0
Close button (×).
Read

Update and display the values of D20 (the device that was
changed), D10, and M0.

For Web page creation method of the device monitor using CGI parts, refer to the following.
• Specifications of the devices which can be used
Related Page 6.3 Common Specifications
• Procedure of device reading Web page creation
6.4 Device Reading Web Page Creation

114
5
6. CREATING A DEVICE MONITOR WINDOW WITH CGI

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is CGI? Overview and Functions of CGI Common Specifications Device Reading Web Page Creation Device Writing Web Page Creation

uFunction of the CGI used to write to devices

Click [Write] to write the entered values.
The default values are the device names, data formats, and values created with the HTML. Also, the device names, data formats,
and values can be changed and written.

Window example
CGI name WrDev.cgi Device name Data type Value
Function Writes the setting value to the specified device. D10 16-bit integer 3 Write
D11 32-bit integer 10 Write 6
M0 Bit 1 Write

WITH CGI
CREATING A DEVICE MONITOR WINDOW
Devices set with the HTML Constants set with the HTML
uOperation procedure
As an example, this section explains the procedure for changing D11 on line 2 to D20 and writing 55 to D20.

1 Click (for example) the D11 cell. 5 Clear (for example) value 10.

Device name Data type Value Device name Data type Value
D10 16-bit integer 3 Write D10 16-bit integer 3 Write
D11 32-bit integer 10 Write D11 32-bit integer Write
M0 Bit 1 Write M0 Bit 1 Write
Select the device name to display the Close Click the Close button (×) to delete the value.
button (×).
7

REFERENCES
6 Enter 55.
2 Clear (for example) D11.
Device name Data type Value
Device name Data type Value D10 16-bit integer 3 Write
D10 16-bit integer 3 Write 32-bit integer 55 Write
32-bit integer 10 Write M0 Bit 1 Write
M0 Bit 1 Write
Click the Close button (×) to delete the
device name.

7 Click Write.

Device name Data type Value

3 Enter D20. D10 16-bit integer 3 Write
Device name Data type Value D20 32-bit integer 55 Write
D10 16-bit integer 3 Write M0 Bit 1 Write
D20 32-bit integer 10 Write
M0 Bit 1 Write

The value 55 is written to D20 on the PLC.

4 Click (for example) the 10 cell.

Device name Data type Value

D10 16-bit integer 3 Write
D20 32-bit integer 10 Write
M0 Bit 1 Write
Select the value and click the Close button (×).

115
5
6. CREATING A DEVICE MONITOR WINDOW WITH CGI
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is CGI? Overview and Functions of CGI Common Specifications Device Reading Web Page Creation Device Writing Web Page Creation

6.3 Common Specifications

Data specified with CGI objects

uDevice name
Displays the device that can be accessed with the device reading CGI/device writing CGI.

Classification Device
Bit device*1 X, Y, M, L, B, F, SB, S, TS, TC, STS, STC, CS, CC, LCS, LCC, SM
6 Word device*2 T (current value), ST (current value), C (current value), D, W, SW, SD, U\G, Z, R
WITH CGI
CREATING A DEVICE MONITOR WINDOW

Double word device LC (current value), LZ

*1: Use hexadecimal to specify octal device names (X***, Y***). (Example: To specify X20, specify X10 in CGI.)
*2: When specifying the “U\G” device name, use two “\” characters to specify the name as “U\\G”. The first “\” (escape sequence) is a symbol that
has the meaning of a special character, so the above expression is required.

uDevice size
The usable device size varies depending on the device. Specify device number notations separately using octal, decimal, or
hexadecimal depending on the device.
: Can be used with both the device reading CGI and the device writing CGI, ×: Cannot be used
Device size
Device Notation
Bit Word Double word
User devices
Input (X) Octal*1  × ×
Output (Y) Octal*1  × ×
7 Internal relay (M) Decimal  × ×
Latch relay (L) Decimal  × ×
REFERENCES

116
5
6. CREATING A DEVICE MONITOR WINDOW WITH CGI

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is CGI? Overview and Functions of CGI Common Specifications Device Reading Web Page Creation Device Writing Web Page Creation

uDevice value
Use the notations shown below with the device values handled by CGI objects.

Value handling Handle device values with hexadecimal notation in the String format (as character strings).

Conversions made by When using octal, decimal, or real number values in a Web page, use JavaScript (FUserWebLib.js) to convert such
JavaScript values into hexadecimal.

It is not necessary to add “0x” at the start of the value. Zero padding is also unnecessary.
For example, to write the value “0x012F”, write “12F”.
In the same manner, the read value is displayed as “12F” without “0x” added at its start and without any zero 6
How to specify padding.

WITH CGI
CREATING A DEVICE MONITOR WINDOW
hexadecimal values
Alphabet characters in hexadecimal values are not case sensitive.
For example, to write the value “0x012F”, write “12F” or “12f”.
The alphabet characters in read values are displayed in uppercase.

REFERENCES

117
5
6. CREATING A DEVICE MONITOR WINDOW WITH CGI
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is CGI? Overview and Functions of CGI Common Specifications Device Reading Web Page Creation Device Writing Web Page Creation

Device reading CGI HTML Creation

Layout method
specifications Example

6.4 Device Reading Web Page Creation

Device reading CGI specifications

Name Function
Device reading CGI Requests the reading of the current value of the specified device.

uAccess method and access information

6 The main methods of communicating with CGI are GET and POST. The Web server function supports POST.
WITH CGI
CREATING A DEVICE MONITOR WINDOW

Item Description
Access method method=“POST”
Access destination information
/cgi/RdDevRnd.cgi
(URL)

uRequest specifications
The following table lists the parameters used by requests. Specify parameters with the query string format.
Specify DEV(n) and TYP(n) with sequence numbers. If these parameters are not specified with sequence numbers, an error will
occur.

Parameter Reference
Data type Description Setting range
name section
Hexadecimal character string Set this parameter so that the total number of devices specified
NUM string indicating the number of for reading and writing per Web page is 32 or less. Next page
7 reading devices (n: 1 to 20)
A character string containing 16 or less alphanumeric
REFERENCES

characters.
DEV1 string Device name 1 (Characters are not case sensitive. Indirect specification, bit 6.3
specification, digit specification, and index modification are not
possible.)
B: Bit
TYP1 string Device size 1 W: Word 6.3
D: Double word
…

DEV(n) string Device name n The same as parameter name [DEV1] given above 6.3
TYP(n) string Device size n The same as parameter name [TYP1] given above 6.3

Ex. D0, M100 … Reading 10 SD0 devices

NUM=A&DEV1=D0&TYP1=D&DEV2=M100& … &DEV10=SD0&TYP10=W

The query string format is a format used to pass data (parameters) to a Web server.
Assign values to parameters by adding the string [&parameter name=value] to the end of a URL. To pass multiple
Terminology
parameters, connect the query strings with [&].
Example: http://www.melsec/iq-f&param1=0&param2="Sample"

118
5
6. CREATING A DEVICE MONITOR WINDOW WITH CGI

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is CGI? Overview and Functions of CGI Common Specifications Device Reading Web Page Creation Device Writing Web Page Creation

Device reading CGI HTML Creation

Layout method
specifications Example

• The maximum number of devices that can be used on a single Web page is 32

Ex. Web browser display window Total: 10

Read

Device name Data type Value

D10 16-bit integer
D11 16-bit integer 5
D12 16-bit integer
D13 16-bit integer
6
D14 16-bit integer

WITH CGI
CREATING A DEVICE MONITOR WINDOW
Read

Write

Device name Data type Value

D10 16-bit integer 25 Write 5
D11 16-bit integer 3 Write
D12 16-bit integer 30 Write
D13 16-bit integer 55 Write
D14 16-bit integer 8 Write

uResponse specifications
The following table lists the parameters used by responses. Response data is in JSON format.
7

REFERENCES
Parameter
Data type Description
name
RET string Value Execution result (hexadecimal character string) details
0000 Normal
0001 Not logged in
0005 Illegal referer
4005 Too many devices
4030 Illegal device classification
4031 Out of device range
4041 Error: Specified buffer memory number + specified number of items to transfer is outside of the
buffer memory area.
4043 Non-existent module specification error
4080 CGI parameter error
DATA string Hexadecimal character string of the read values (an array)

Ex. Device reading CGI response data

{
"RET" : "0",
"DATA" : [ In the message, the response on the left is transferred in the following format.
"100",
Normal {"RET":"0", "DATA":["100", … , "FABC"]}
…

"FABC" Error {"RET":"4031"}

]
}

JSON is an abbreviation of “JavaScript Object Notation”.

Terminology This is a language for writing the data structure and is used as a simple database. It was created by aiming for a
format that can be easily handled by computers and easily viewed by users.

119
5
6. CREATING A DEVICE MONITOR WINDOW WITH CGI
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is CGI? Overview and Functions of CGI Common Specifications Device Reading Web Page Creation Device Writing Web Page Creation

Device reading CGI HTML Creation

Layout method
specifications Example

u Displaying device values in real-number format on a Web page

Device name Value Values are stored as single-precision real numbers in D0

D0 B36FH and D1.
In this figure, the device values are monitored as
D1 35A5H hexadecimal values.

6
Device name Value Make a request with D: double word specified for the
WITH CGI
CREATING A DEVICE MONITOR WINDOW

DATA[0] “35a5b36f” device size.

File Edit View Favorites Tools Help

Device name Data type Value

Single- Convert the read data into real-number format with
D0 precision 1.234568E-06 JavaScript.
real number

7
REFERENCES

120
5
6. CREATING A DEVICE MONITOR WINDOW WITH CGI

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is CGI? Overview and Functions of CGI Common Specifications Device Reading Web Page Creation Device Writing Web Page Creation

Device reading CGI HTML Creation

Layout method
specifications Example

Web browser display layout method

In the device reading CGI, the table is created with the <table> tag.
The <input> tag is used to set cell contents such as item names and the names of the devices to monitor.

Web browser display

Device name Data type Value

D10 32-bit integer
SD0 16-bit integer 6
M0 Bit

WITH CGI
CREATING A DEVICE MONITOR WINDOW
Read

The HTML document for the above table is shown below.

Device name Data type Value Different colors are used to indicate what objects are
D10 32-bit integer created by the HTML.
SD0 16-bit integer
M0 Bit
Read

REFERENCES
HTML document
Form
<form id="devform" name="readdev" method="post">

<table id="devtbl" class="devtbl" border="1"> Table construction

<tr>
<th>Device name</th><th>Data type</th><th>Value</th>
</tr>
<tbody>
<tr>
<td><input type="text" id="DEV1" name=" DEV1" class="input"value='D10' /></td>
D10
<td><input type="text" id="TYP1" name=" TYP1" class="input"value='32-bit integer' /></td>
row
<td><input type="text" id="VAL1" name=" VAL1" class="read-input"/></td>
</tr>
<tr>
<td><input type="text" id="DEV2" name="DEV2" class="input" value='SD0'/ ></td>
SD0
<td><input type="text" id="TYP2" name="TYP2" class="input" value='16-bit integer'/ ></td>
row
<td><input type="text" id="VAL2" name="VAL2" class="read-input"/></td>
</tr>
<tr>
<td><input type="text" id="DEV3" name="DEV3" class="input"value='M0'/ ></td>
M0
<td><input type="text" id="TYP3" name="TYP3" class="input"value='bit'/ ></td>
row
<td><input type="text" id="VAL3" name="VAL3" class="read-input"/></td>
</tr>
</tbody>
</table>

<input type="button" value="Read" class="input" onclick=" ReadDeviceRandomTbl(devtbl)"/>

</form>

For details on the form and table construction, refer to the following.
Related Page
7.2 HTML Tag References

121
5
6. CREATING A DEVICE MONITOR WINDOW WITH CGI
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is CGI? Overview and Functions of CGI Common Specifications Device Reading Web Page Creation Device Writing Web Page Creation

Device reading CGI HTML Creation

Layout method
specifications Example

HTML Creation Example

Use the following procedure to create the device reading Web page.

STEP 1. Use Notepad to create the HTML on the next page.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

6
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 *Because the Web server setting is UTF-8, specify UTF-8.) -->
<meta charset="UTF-8">
<title>Device Reading CGI Sample</title>
<meta http-equiv="X-UA-Compatible"
content="IE=edge"/>
WITH CGI
CREATING A DEVICE MONITOR WINDOW

STEP 2.
xhr.open('POST',
xhr.onreadystatechange "/cgi/RdDevRnd.cgi",
= FUNC; true);

Save the file with an HTML file format.

xhr.setRequestHeader('Content-Type',
xhr.send(param); 'application/x-www-form-urlencoded');

7
var FUNC = function() { ReadDeviceRandomTbl_Response(xhr, devtblid); }; // Response analysis function setting
xhr.onreadystatechange = FUNC;
xhr.send(param);

Operation >> Select [File] [Save As].

REFERENCES

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> Enter the File name (example: read-device.html).
<head>

<meta charset="UTF-8"> For the Encoding, select UTF-8, and then click
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

<title>Device Reading CGI Sample</title>

[Save].
<script>
// CGI request function
function ReadDeviceRandomTbl(devtblid) {
var devtblitem = document.getElementById(devtblid);
var i, devitem, typitem;
var tblrows = devtblitem.rows.length; If you specify a value other than UTF-8 for the
Point
var param;

// Setting the number of devices Encoding, the text may be garbled when the
param = "NUM=" + (tblrows - 1) + '&';
for( i=1; i < tblrows; i++ ) {
// Device name parameter setting
HTML is displayed in a Web browser.
devitem = document.getElementById(devtblitem.rows[i].cells[0].childNodes[0].id);
param += devitem.name + "=" + devitem.value + '&';

// Device size parameter setting

typitem = document.getElementById(devtblitem.rows[i].cells[1].childNodes[0].id);
if( "Bit" == typitem.value ) {
param += typitem.name + "=" + 'B';
}
else if( "16-bit integer" == typitem.value ) {
param += typitem.name + "=" + 'W';
}
else if( "32-bit integer" == typitem.value ) {
param += typitem.name + "=" + 'D';
}
else {
param += typitem.name + "=" + 'Q';
}
if( i < (tblrows - 1)) param += '&';
}
// CGI request
xhr = new XMLHttpRequest();
xhr.open('POST', "/cgi/RdDevRnd.cgi", true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

STEP 3.
var FUNC = function() { ReadDeviceRandomTbl_Response(xhr, devtblid); }; // Response analysis function setting

Double-click the created file to display it in a Web browser.

xhr.onreadystatechange = FUNC;
xhr.send(param);

STEP 4. Store the created HTML file on an SD memory card, and then use the Web server
function of the PLC to display this file.

122
5
6. CREATING A DEVICE MONITOR WINDOW WITH CGI

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is CGI? Overview and Functions of CGI Common Specifications Device Reading Web Page Creation Device Writing Web Page Creation

Device reading CGI HTML Creation

Layout method
specifications Example

uSample HTML

WITH CGI
CREATING A DEVICE MONITOR WINDOW
// CGI request function
function ReadDeviceRandomTbl(devtblid) {
var devtblitem = document.getElementById(devtblid);
var i, devitem, typitem;
var tblrows = devtblitem.rows.length;
var param;

// Setting the number of devices

param = "NUM=" + (tblrows - 1) + '&';
for( i=1; i < tblrows; i++ ) {
// Device name parameter setting
devitem = document.getElementById(devtblitem.rows[i].cells[0].childNodes[0].id);
param += devitem.name + "=" + devitem.value + '&';

// Device size parameter setting

REFERENCES
}
else if( "32-bit integer" == typitem.value ) {
param += typitem.name + "=" + 'D';
}
else {
param += typitem.name + "=" + 'Q';
}
if( i < (tblrows - 1)) param += '&';
}
// CGI request
xhr = new XMLHttpRequest();
xhr.open('POST', "/cgi/RdDevRnd.cgi", true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var FUNC = function() { ReadDeviceRandomTbl_Response(xhr, devtblid); }; // Response analysis function setting
xhr.onreadystatechange = FUNC;
xhr.send(param);
}

Continued on the next page

123
5
6. CREATING A DEVICE MONITOR WINDOW WITH CGI
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is CGI? Overview and Functions of CGI Common Specifications Device Reading Web Page Creation Device Writing Web Page Creation

Device reading CGI HTML Creation

Layout method
specifications Example

Continued from the previous page

// Response analysis function

function ReadDeviceRandomTbl_Response(xhr, devtblid) {
// Check of the XMLHttpRequest client status
// 0:UNSENT 1:OPENED 2:HEADERS_RECEIVED 3:LOADING 4:DONE
if( 4 != xhr.readyState ) {
// If the status is a value other than 4, DONE (operation complete), end the processing.
return;
6 }

// HTTP response code check

WITH CGI
CREATING A DEVICE MONITOR WINDOW

if ( 200 != xhr.status ) {
// If the value is not "200 OK", display an error dialog box.
alert("HTTP STATUS ERROR=" + xhr.status );
return;
}

var i, dataitem;
var devtblitem = document.getElementById(devtblid);
var tblrows = devtblitem.rows.length; // Obtain the number of table rows (including the header).
var res = JSON.parse( xhr.response ); // JSON character string analysis and processing

// Judgment of the result from the CGI

if( res.RET != "0000" ) {
// If an error has occurred, display an error dialog box.
alert("ERROR=" + res.RET);
}
else {
// If the result is normal, reflect the obtained values in the table.
7 for ( i = 1, m = 0; i < tblrows; i++, m++) {
dataitem = document.getElementById(devtblitem.rows[i].cells[2].childNodes[0].id);
// Set the table values to the reading result here (convert the hexadecimal character string to values).
REFERENCES

dataitem.value = parseInt(res.DATA[m], 16);

}
alert("Reading complete");
}
}
</script>
</head>
<body>
<form>
<table id="devtbl" class="devtbl" border="1">
<tr>
<th>Device name</th>
<th>Data type</th>
<th>Value</th>
</tr>
<tbody>
<tr>
<td><input type="text" id="DEV1" name="DEV1" class="input" value="D10"/></td>
<td><input type="text" id="TYP1" name="TYP1" class="input" value="16-bit integer"/></td>
<td><input type="text" id="DATA1" name="DATA1" class="read-input" ></td>
</tr>
<tr>
<td><input type="text" id="DEV2" name="DEV2" class="input" value="D11"/></td>
<td><input type="text" id="TYP2" name="TYP2" class="input" value="32-bit integer"/></td>
<td><input type="text" id="DATA2" name="DATA2" class="read-input" /></td>
</tr>
<tr>
<td><input type="text" id="DEV3" name="DEV3" class="input" value="M0"/></td>
<td><input type="text" id="TYP3" name="TYP3" class="input" value="Bit"/></td>
<td><input type="text" id="DATA3" name="DATA3" class="read-input" /></td>
</tr>
</tbody>
</table>
<input type="button" value="Read" class="input" onclick="ReadDeviceRandomTbl('devtbl')"/>
</form>
</body>
</html>

124
5
6. CREATING A DEVICE MONITOR WINDOW WITH CGI

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is CGI? Overview and Functions of CGI Common Specifications Device Reading Web Page Creation Device Writing Web Page Creation

Device writing CGI HTML Creation

Layout method
specifications Example

6.5 Device Writing Web Page Creation

Device writing CGI specifications

Name Function
Device writing CGI Orders the writing of the specified value to the specified device.

uAccess method and access information

The main methods of communicating with CGI are GET and POST. The Web server function supports POST.
6

WITH CGI
CREATING A DEVICE MONITOR WINDOW
Item Description
Access method method=“POST”
Access destination information
/cgi/WrDev.cgi
(URL)

uRequest specifications
The following table lists the parameters used by requests. Specify parameters with the query string format.

Parameter Reference
Data type Description Setting range
name section
Set this to 1.
Number of devices to write to
NUM string (Set this parameter so that the total number of devices specified Next page
(1).
for reading and writing per Web page is 32 or less.)
A character string containing 10 or less alphanumeric
characters.
DEV1 string Device name (Characters are not case sensitive. Indirect specification, bit 6.3 7
specification, digit specification, and index modification are not

REFERENCES
possible.)
B: Bit
TYP1 string Device size W: Word 6.3
D: Double word
DATA1 string Write value Hexadecimal character string —

Ex. Writing FFFF to D0

NUM=1&DEV1=D0&TYP1=W&DATA1=FFFF

125
5
6. CREATING A DEVICE MONITOR WINDOW WITH CGI
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is CGI? Overview and Functions of CGI Common Specifications Device Reading Web Page Creation Device Writing Web Page Creation

Device writing CGI HTML Creation

Layout method
specifications Example

• The maximum number of devices that can be used on a single Web page is 32

Ex. Web browser display window Total: 10

Read

Device name Data type Value

D10 16-bit integer
D11 16-bit integer

6 D12
D13
16-bit integer
16-bit integer
5

D14 16-bit integer

WITH CGI
CREATING A DEVICE MONITOR WINDOW

Read

Write

Device name Data type Value

D10 16-bit integer 25 Write
D11 16-bit integer 3 Write
5
D12 16-bit integer 30 Write
D13 16-bit integer 55 Write
D14 16-bit integer 8 Write

uResponse specifications
7 The following table lists the parameters used by responses. Response data is in JSON format.
REFERENCES

Parameter
Data type Description
name
RET string Value Execution result (hexadecimal character string) details
0000 Normal
0002 No user rights (CGI was executed by a user without the permission or rights to write to devices.)
0001 Not logged in
0005 Illegal referer
4005 Too many devices
4030 Illegal device classification
4031 Out of device range
4041 Error: Specified buffer memory number + specified number of items to transfer is outside of the
buffer memory area.
4043 Non-existent module specification error
4080 CGI parameter error
DATA string Hexadecimal character string of the read values (an array) from the devices written to

Ex. Device writing CGI response data

{ In the message, the response on the left is transferred in the following format.
"RET" : "0",
"DATA" : [
Normal {"RET":"0","DATA":["100"]}
"100"
]
} Error {"RET":"4031"}

126
5
6. CREATING A DEVICE MONITOR WINDOW WITH CGI

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is CGI? Overview and Functions of CGI Common Specifications Device Reading Web Page Creation Device Writing Web Page Creation

Device writing CGI HTML Creation

Layout method
specifications Example

u Displaying device values in real-number format on a Web page

Device name Data type Value

File Edit View Favorites Tools Help

Single- Convert the entered data into hexadecimal with

D0 precision 1.234568E-06 JavaScript.
real number

WITH CGI
CREATING A DEVICE MONITOR WINDOW
Device name Value Make a request with D: double word specified for the
DATA1 “35a5b36f” device size.

Device name Value Values are stored as single-precision real numbers in D0

D0 B36FH and D1.
In this figure, the device values are monitored as
D1 35A5H hexadecimal values.

REFERENCES

127
5
6. CREATING A DEVICE MONITOR WINDOW WITH CGI
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is CGI? Overview and Functions of CGI Common Specifications Device Reading Web Page Creation Device Writing Web Page Creation

Device writing CGI HTML Creation

Layout method
specifications Example

Web browser display layout method

In the device writing CGI, the table is created with the <table> tag.
The <input> tag is used to set cell contents such as item names and the names of the devices to monitor.

Web browser display

Device name Data type Value

6 D10 32-bit integer 3 Write
WITH CGI
CREATING A DEVICE MONITOR WINDOW

The HTML document for the above table is shown below.

Device name Data type Value Different colors are used to indicate what objects
D10 32-bit integer 3 Write are created by the HTML.

HTML document

7 <form id="devform" name="readdev" method="post">

Form
REFERENCES

<table id="devtbl" class="devtbl" border="1"> Table construction

<tr>
<th>Device name</th><th>Data type</th><th>Value</th>
</tr>
<tbody>
<tr>
<td><input type="text" id="DEV1" name=" DEV1" class=" input"value='D10'/></td>
<td><input type="text" id="TYP1" name=" TYP1" class=" input"value='32-bit integer'/></td>
<td><input type="text" id="DATA1" name=" DATA1" class=" input"value='3'/></td>
</tr>
</tbody>
</table>

<input type="button" value="Write" class="input" onclick=" WriteDeviceBlockTbl(devbl,1,1)"/>

</form>

128
5
6. CREATING A DEVICE MONITOR WINDOW WITH CGI

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is CGI? Overview and Functions of CGI Common Specifications Device Reading Web Page Creation Device Writing Web Page Creation

Device writing CGI HTML Creation

Layout method
specifications Example

HTML Creation Example

Use the following procedure to create the device writing Web page.

STEP 1. Use Notepad to create the HTML on the next page.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

6
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 *Because the Web server setting is UTF-8, specify UTF-8.) -->
<meta charset="UTF-8">
<title>Device Writing CGI Sample</title>
<meta http-equiv="X-UA-Compatible"
content="IE=edge"/>

WITH CGI
CREATING A DEVICE MONITOR WINDOW

<script>
<title>Device
functionWriting CGI Sample</title>
WriteDeviceBlockTbl(devtblid, row) {

dataitem;
<script> var xhr;
function
varWriteDeviceBlockTbl(devtblid, row) {
devtblitem = document.getElementById(devtblid);
var
// dataitem;
Setting the number of devices (fixed to 1)
var xhr;
param = 'NUM=1&';
var
// devtblitem
Device name =parameter
document.getElementById(devtblid);
setting
//
var Setting
devitem the= number of devices (fixed to 1)
document.getElementById(devtblitem.rows[row].cells[0].childNodes[0].id);
var param
param = 'NUM=1&';
+= 'DEV1=' + devitem.value + '&';
// Device name parameter setting
var
// devitem
Device size= parameter
document.getElementById(devtblitem.rows[row].cells[0].childNodes[0].id);
setting
param
var typitem += 'DEV1=' + devitem.value + '&';
= document.getElementById(devtblitem.rows[row].cells[1].childNodes[0].id);
if( 'Bit' == typitem.value ) {
// Device size+=
param parameter
'TYP1=' +setting
'B';
var
} typitem = document.getElementById(devtblitem.rows[row].cells[1].childNodes[0].id);
if(
else 'Bit'
if( == typitem.value
'16-bit integer' ==) {typitem.value) {
param += 'TYP1=' + 'B'; 'W';
}
else if( '16-bit
'32-bit integer' == typitem.value) {
param += 'TYP1=' + 'W'; 'D';
}
else if({ '32-bit integer' == typitem.value) {
param += 'TYP1=' + 'D'; 'Q';
}
else
param { += '&';
param += 'TYP1=' + 'Q';
}// Data parameter setting
param += '&'; = document.getElementById(devtblitem.rows[row].cells[2].childNodes[0].id);
var dataitem
param += 'DATA1=' + parseInt(dataitem.value).toString(16)
// Data parameter setting
var dataitem
// CGI request= document.getElementById(devtblitem.rows[row].cells[2].childNodes[0].id);
Details on the HTML are also included in the MELSEC iQ-F FX5 User's Manual (Ethernet Communication) [JY997D56201].
param
xhr = new += 'DATA1=' + parseInt(dataitem.value).toString(16)
XMLHttpRequest();
xhr.open('POST', "/cgi/WrDev.cgi", true);
// CGI request
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr FUNC
var = new =XMLHttpRequest();
function() { WriteDeviceBlockTbl_Response(xhr, typitem, dataitem); }; // Response analysis function setting

STEP 2.
xhr.open('POST',
xhr.onreadystatechange "/cgi/WrDev.cgi",
= FUNC; true);

Save the file with an HTML file format.

xhr.setRequestHeader('Content-Type',
xhr.send(param); 'application/x-www-form-urlencoded');
var FUNC = function() { WriteDeviceBlockTbl_Response(xhr, typitem, dataitem); }; // Response analysis function setting

7
xhr.onreadystatechange = FUNC;
xhr.send(param);

Operation >> Select [File] [Save As].

REFERENCES
Enter the File name (example: write-device.html).
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
For the Encoding, select UTF-8, and then click

<title>Device Writing CGI Sample</title>

[Save].
<script>
function WriteDeviceBlockTbl(devtblid, row) {
var dataitem;
var xhr;
var devtblitem = document.getElementById(devtblid);
// Setting the number of devices (fixed to 1)
var param = 'NUM=1&';
If you specify a value other than UTF-8 for the
// Device name parameter setting
var devitem = document.getElementById(devtblitem.rows[row].cells[0].childNodes[0].id);
param += 'DEV1=' + devitem.value + '&';
Point Encoding, the text may be garbled when the
// Device size parameter setting
HTML is displayed in a Web browser.
var typitem = document.getElementById(devtblitem.rows[row].cells[1].childNodes[0].id);
if( 'Bit' == typitem.value ) {
param += 'TYP1=' + 'B';
}
else if( '16-bit integer' == typitem.value) {
param += 'TYP1=' + 'W';
}
else if( '32-bit integer' == typitem.value) {
param += 'TYP1=' + 'D';
}
else {
param += 'TYP1=' + 'Q';
}
param += '&';

// Data parameter setting

var dataitem = document.getElementById(devtblitem.rows[row].cells[2].childNodes[0].id);
param += 'DATA1=' + parseInt(dataitem.value).toString(16)

// CGI request
xhr = new XMLHttpRequest();
xhr.open('POST', "/cgi/WrDev.cgi", true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var FUNC = function() { WriteDeviceBlockTbl_Response(xhr, typitem, dataitem); }; // Response analysis function setting
xhr.onreadystatechange = FUNC;

STEP 3.
xhr.send(param);

Double-click the created file to display it in a Web browser.

STEP 4. Store the created HTML file on an SD memory card, and then use the Web server
function of the PLC to display this file.

129
5
6. CREATING A DEVICE MONITOR WINDOW WITH CGI
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

What Is CGI? Overview and Functions of CGI Common Specifications Device Reading Web Page Creation Device Writing Web Page Creation

Device writing CGI HTML Creation

Layout method
specifications Example

uSample HTML

function WriteDeviceBlockTbl(devtblid, row) {

var dataitem;
var xhr;
var devtblitem = document.getElementById(devtblid);
// Setting the number of devices (fixed to 1)
var param = 'NUM=1&';
// Device name parameter setting
var devitem = document.getElementById(devtblitem.rows[row].cells[0].childNodes[0].id);
param += 'DEV1=' + devitem.value + '&';

// Device size parameter setting

else {
param += 'TYP1=' + 'Q';
}
param += '&';

// Data parameter setting

var dataitem = document.getElementById(devtblitem.rows[row].cells[2].childNodes[0].id);
param += 'DATA1=' + parseInt(dataitem.value).toString(16)

Continued on the next page

130
5
6. CREATING A DEVICE MONITOR WINDOW WITH CGI

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
What Is CGI? Overview and Functions of CGI Common Specifications Device Reading Web Page Creation Device Writing Web Page Creation

Device writing CGI HTML Creation

Layout method
specifications Example

Continued from the previous page

// Response analysis function

function WriteDeviceBlockTbl_Response(xhr, typitem, dataitem) {
// Check of the XMLHttpRequest client status
// 0:UNSENT 1:OPENED 2:HEADERS_RECEIVED 3:LOADING 4:DONE
if( 4 != xhr.readyState ) {
// If the status is a value other than 4, DONE (operation complete), end the processing.
return;
} 6
// HTTP response code check

WITH CGI
CREATING A DEVICE MONITOR WINDOW
if ( 200 != xhr.status ) {
// If the value is not "200 OK", display an error dialog box.
alert("HTTP STATUS ERROR=" + xhr.status );
return;
}

var value;
var res = JSON.parse( xhr.response ); // JSON character string analysis and processing
// Judgment of the result from the CGI
if( res.RET != "0000" ) {
// If an error has occurred, display an error dialog box.
alert("ERROR=" + res.RET);
}
else {
// If the result is normal, reflect the writing result values.
dataitem.value = parseInt(res.DATA[0],16);
alert("Writing complete");
}
}
</script>
7
</head>

REFERENCES
<body>
<form>
<table id="devtbl" class="devtbl" border="1">
<tr>
<th>Device name</th>
<th>Data type</th>
<th>Value</th>
</tr>
<tbody>
<tr>
<td><input type="text" id="DEV1" name="DEV1" class="input" value="D10"/></td>
<td><input type="text" id="TYP1" name="TYP1" class="input" value="16-bit integer"/></td>
<td><input type="text" id="DATA1" name="DATA1" class="input" value="3"/></td>
<td><input type="button" value="Write" class="input" onclick="WriteDeviceBlockTbl('devtbl',1)"/></td>
</tr>
<tr>
<td><input type="text" id="DEV2" name="DEV2" class="input" value="D11"/></td>
<td><input type="text" id="TYP2" name="TYP2" class="input" value="32-bit integer"/></td>
<td><input type="text" id="DATA2" name="DATA2" class="input" value="10"/></td>
<td><input type="button" value="Write" class="input" onclick="WriteDeviceBlockTbl('devtbl',2)"/></td>
</tr>
<tr>
<td><input type="text" id="DEV3" name="DEV3" class="input" value="M0"/></td>
<td><input type="text" id="TYP3" name="TYP3" class="input" value="Bit"/></td>
<td><input type="text" id="DATA3" name="DATA3" class="input" value="1"/></td>
<td><input type="button" value="Write" class="input" onclick="WriteDeviceBlockTbl('devtbl',3)"/></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

131
5
7. REFERENCES
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

Style Sheet HTML Tags Color Name/Color Code

Explanation for Usage
List of Properties Explanation Example

7.1 Style Sheet References

This section provides a simple explanation of the functions of the main properties of Style Sheets.
For details on Style Sheets such as how to use them, refer to commercially available reference books.

List of Properties

• This section explains the operations of the properties used by the user Web page library file (UserWebStyle.css).

6 No. Property Description No. Property Description

Determines the position of the 6 margin-left: Outer, left margin of the element
WITH CGI
CREATING A DEVICE MONITOR WINDOW

1 position:
element.
7 background-color: Element background color
Specifies the overlapping order
2 z-index: 8 border: Element border
of the element.
3 width: Element width 9 text-align: Text position specification

4 height: Element height 10 font-weight: Character thickness

Outer, upper margin of the 11 cursor: Cursor shape

5 margin-top:
element

Explanation

u No. 1 [position:] … Determines the position of the element.

7 Value Description
static Do not specify a placement method (default value).
REFERENCES

Placement in an absolute position (reference position: Upper-left corner

absolute
of the Web browser (entire window))
relative Placement in a relative position
Placement in an absolute position (reference position: Upper-left corner
fixed
of the Web browser (current display))

HTML

<div class="parent">
<p>Element (1)</p>
Browser display
<p id="absolute">Element (2)</p>
</div>
Style Sheet
Element (2)
.parent {
Element (1)
padding: 20px;
position: relative;
/*Set the parent element to relative.*/}
#absolute {
position: absolute;
top: 0;
left: 0;
}
/*Decorations are omitted.*/

132
5
7. REFERENCES

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
Style Sheet HTML Tags Color Name/Color Code
Explanation for Usage
List of Properties Explanation Example

u No. 2 [z-index:] … Specifies the overlapping order of the element.

Value Description If you do not specify the z-index, the element will be covered
Specifies the overlapping order with integers with the elements that are written later in the code.
Integer value (zero is used as the reference, and the larger
the value, the higher up the object is). Browser display

The same layer as the parent object. (Default

auto
value) First

HTML Second 6

WITH CGI
CREATING A DEVICE MONITOR WINDOW
<div id="example"> Third
<p class="one">First</p>
<p class="two">Second</p>
<p class="three">Third</p>
</div>
Style Sheet

/Set the parent element to relative./

#example { position: relative; } Browser display

/Set all three elements to absolute./ First

.one, .two, .three {
position: absolute; Second
}
Third 7
.one { z-index: 30; left: 0; top: 0; }

REFERENCES
.two { z-index: 20; left: 20px; top: 20px; }
.three { z-index: 10; left: 40px; top: 40px; }

/Coloring and other such settings are omitted./

u No. 3 [width:] … Element width

Element
u No. 4 [height:] … Element height height

width

HTML

<p>This is an example sentence.</p> Browser display

Style Sheet This is an

example
p { width: 100px;
sentence.
height: 100px;
background: orange;
}

133
5
7. REFERENCES
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

Style Sheet HTML Tags Color Name/Color Code

Explanation for Usage
List of Properties Explanation Example

u No. 5 [margin-top:] … Outer, upper margin of the

element margin-top
border
u No. 6 [margin-left:] … Outer, left margin of the element padding-top

margin-left

padding-left

margin-right
padding-right
u No. 7 [background-color:] … Element background Element contents
color
padding-bottom
6
background-color margin-bottom
WITH CGI
CREATING A DEVICE MONITOR WINDOW

u No. 8 [border:] … Element border

Value Description
none No border (default value) solid double
hidden No border
solid Solid line (one line)
double Double line (two lines)
groove Concave line
ridge Convex line
groove ridge
Interior concave line (shadow on the upper-
inset
left part)

7 outset
Interior convex line (shadow on the lower-right
part)
inset outset
REFERENCES

dotted Dotted line

dashed Dashed line

Line thickness

{ border: solid 1px black } dotted dashed

Line type Line color

u No. 9 [text-align:] … Text position specification

Value Description
left Left-aligned (default value)
center Centered
right Right-aligned

HTML

<p>Text with no Style Sheet specification</p> Browser display

<p class="center">Centered text</p>
Text with no Style Sheet specification
<p class="right">Right-aligned text</p>
Centered text
Style Sheet Right-aligned text
.center { text-align: center; }
.right { text-align: right; }

u No. 10 [font-weight:] … Character thickness

Value Description
normal Standard thickness
bold General thickness of bold text
lighter Slightly thinner compared to bold text
bolder Slightly thicker compared to bold text

134
5
7. REFERENCES

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
Style Sheet HTML Tags Color Name/Color Code
Explanation for Usage
List of Properties Explanation Example

u No. 11 [cursor:] … Cursor shape

Value Description Shape

Default value (selected automatically
auto —
depending on the situation)
default Default
XX {cursor: value:}
pointer Link For XX, write a selector that indicates on
crosshair Crosshairs what the cursor needs to be placed in order
for its shape to be changed.
6
context-menu Context menu

WITH CGI
CREATING A DEVICE MONITOR WINDOW
cell Cell selection

help Help

The cursor shape varies depending on the OS of the terminal that displays the user Web page.

Explanation for Usage Example

This section explains the operations of the properties of the Style Sheet of the “Menu” button used in “3. USING CUSTOMIZATION TO
EASILY CREATE A USER WEB PAGE”.

No. Property Description

Absolute/relative coordinate 1. Pressure Meter
A position:
specification
Coordinate position from the left
B left:
side of the Web browser 7
Coordinate position from the top
C top:

REFERENCES
of the Web browser

HTML
123 22500

<a href="index.html" class="menu" style="position:

Menu
absolute; left: 350px; top: 550px;" />Menu</a>

Style Sheet parameter part written in the HTML <a> tag

u No. A [position:] … Display coordinate specification method selection

Value Description Remarks

The element is placed at the default value position without applying
static Do not specify a placement method.
top, bottom, left, and right.
The upper-left corner of the Web browser (entire window) is set as the
absolute Placement in an absolute position reference position. The top, bottom, left, and right coordinate values
are applied.
The position displayed when static is specified with the position
relative Placement in a relative position property is set as the reference position. The top, bottom, left, and right
coordinate values are applied.
The same as “absolute” position. However, the upper-left corner of the
currently displayed Web browser is set as the reference position. (The
fixed Placement in an absolute position
element is displayed in an absolute position so that it stays in the same
position even if the user scrolls through the page.)

• When set to position: absolute (the setting used in this guide) • When set to position: relative

left: px; left: px;

1. Pressure Meter 1. Pressure Meter

top: ***px;

Web browser window Web browser window

Menu Menu

135
5
7. REFERENCES
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

Style Sheet HTML Tags Color Name/Color Code

Explanation for Usage
List of Properties Explanation Example

u No. B [left:] … Coordinate position from the left side of the Web browser

left: 350 px;

Web browser window

6
WITH CGI
CREATING A DEVICE MONITOR WINDOW

u No. C [top:] … Coordinate position from the top of the Web browser
top: 550 px;

Web browser window

7
Menu
REFERENCES

136
5
7. REFERENCES

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
Style Sheet HTML Tags Color Name/Color Code
Character string
List of Tags HTML Definition Image Link Table
modification

7.2 HTML Tag References

You can use tags (text enclosed in the less-than (<) and greater-than (>) signs) to specify a variety of items including text and
image displays.
Some tags are used in a nested manner and some are used in a stand-alone manner.

List of Tags

This section provides a simple explanation of the functions of the tags used in this guide. 6
Tags that are not used in the user Web page library file (index.html) but are used in “3. USING CUSTOMIZATION TO EASILY CREATE A

WITH CGI
CREATING A DEVICE MONITOR WINDOW
USER WEB PAGE” are included.

Value Tag Description

HTML definition <meta> Declaration
<br> Line break
<p> Paragraph
Character string modification
<i> Italic
<u> Underline
Image <img> Image display of an image file
Link <a> to </a> Link to a different Web page
Table <table> to </table> Table construction

REFERENCES
HTML Definition

Function Start End HTML document Web browser display

Declaration <meta> None <meta charset="UTF-8"> —

charset Kanji code

ISO-2022-JP JIS code
Element
Shift_JIS Shift JIS code
EUC-JP EUC code

137
5
7. REFERENCES
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

Style Sheet HTML Tags Color Name/Color Code

Character string
List of Tags HTML Definition Image Link Table
modification

Character string modification

uText
Tag
HTML document Web browser display
Function Start End

Display line one. <br> Display line one.

Line break <br> —
Display line two. Display line two.
6
Display line one.
<p>Display line one. </p>
WITH CGI
CREATING A DEVICE MONITOR WINDOW

Paragraph <p> </p>

Display line two.
Display line two.

uFont
Tag
HTML document Web browser display
Function Start End

Italic <i> </i> <i>Display line one. </i> Display line one.

Underline <u> </u> <u>Display</u> line two. Display line two.

7 Image
REFERENCES

Tag
HTML document Web browser display
Function Start End

<img src="image file" alt="alternative

Image
<img> — text" border="border" width="width"
display
height="height">

Element Description Image example

src="image file name" Sets the storage location and file name of the image file.
Specifies the text that is displayed (read) in place of the
alt="alternative text"
image.
Specifies the border around the image in pixels (0: no border
border="0"
is displayed).
sample0.png
width="300" Width specification Size: 30 × 30
height="10" Height specification

138
5
7. REFERENCES

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
Style Sheet HTML Tags Color Name/Color Code
Character string
List of Tags HTML Definition Image Link Table
modification

Reference

This section provides an explanation using an image file (sample0.png) in the user Web page library as an example.

STEP 1. Create a new image and save that file (example: sample0.gif) to the personal computer.

STEP 2. Check the size of the created image.

6
Display the image by dragging it to a Web browser.

WITH CGI
CREATING A DEVICE MONITOR WINDOW
STEP 3. Right-click the displayed image and display its properties.

When displaying the image with a 1/1 ratio, enter the size displayed next to Properties 7
Dimensions: (in pixels).

REFERENCES
uSetting example General

sample0.png
width="30"
height="30"
Protocol: File Protocol

For example, if you change 30 pixels to 15 pixels, the displayed image will be Type: Unusable

reduced to 1/4 of its original size.

Address:
You can also change the display size according to a percentage value with the (URL)

size of the image file used as 100%. Size: Unusable

Dimensions: 30 × 30 pixels

Created: 1/10/2019

Modified: 3/14/2018

OK Cancel Apply

STEP 4. Add the HTML as shown below between the <body> and </body> tags of the HTML
document.

uSetting example

src="./img/sample0.png"

uHTML

<img src="./img/sample0.gif" alt="Image 0" border="0" width="30" height="30">

139
5
7. REFERENCES
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

Style Sheet HTML Tags Color Name/Color Code

Character string
List of Tags HTML Definition Image Link Table
modification

Link

Tag
HTML document Web browser display
Function Start End
The link is indicated with blue, underlined text.
<a href="historical.html">2. Temperature
Link <a> </a>
Change Graph</a> 2. Temperature Change Graph

6
HTML Browser display
WITH CGI
CREATING A DEVICE MONITOR WINDOW

<p> 1. Pressure Meter

<a href="level.html">1. Pressure Meter</a>
</p>
2. Temperature Change Graph
<p>
<a href="historical.html">2. Temperature Change Graph</a>
</p>
3. Device Monitor
<p>
<a href="device.html">3. Device Monitor</a>
</p>

7 Only the file name of

Built-in Web server of the FX5 CPU the top page is fixed to
REFERENCES

(Host station IP address: 192.168.1.10) “index.html”.

http://192.168.1.10 File
Title
Edit View Favorites Tools Help

Enter the above value.

Top page index.html

level.html historical.html device.html

140
5
7. REFERENCES

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
Style Sheet HTML Tags Color Name/Color Code
Character string
List of Tags HTML Definition Image Link Table
modification

Table

Tag
HTML document Web browser display
Function Start End
Enclose the entire table in the <table> and </table>
tags.
<table>
Table <table> </table> Device name
</table> Device name

Create each row with the <tr> and </tr> tags.

6
<table border="1">
Table

WITH CGI
CREATING A DEVICE MONITOR WINDOW
<tr> </tr> <tr><td>Device one</td><td>Device two</td></tr> Device Device
row
</table> one two

For each row created with the <th> and </th> tags,
the text is emphasized.
<table border="1">
Table
<th> </th> <tr><th>Device name</th><th>Production count</th></tr>
heading Device Production
</table>
name count

List of attributes 7

REFERENCES
Only some of the attributes are listed in this guide.
Attributes that are not set are handled as zero.

uList of main attributes

Function Attribute HTML document Web browser display

Border border <table border="1"> Device

name

Cell color bgcolor <table bgcolor="green"> Device

name

colspan="1"
A B C
Device
Column-joining name
(horizontal direction)
colspan <td colspan="number of cells to join">
specification colspan="3"
attribute

Device name

rowspan="1" rowspan="3"

Row-joining 1 Device
(vertical direction) name
rowspan <td rowspan="number of cells to join"> Device
specification
2 name
attribute
3

141
5
7. REFERENCES
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

Style Sheet HTML Tags Color Name/Color Code

Character string
List of Tags HTML Definition Image Link Table
modification

uCell size specification

Function Attribute HTML document Web browser display

width
Cell width width

<td width="200" height="100">

Device name</td>
height Cell
Cell height height
6
WITH CGI
CREATING A DEVICE MONITOR WINDOW

uText display position specification

Function Attribute HTML document Web browser display

Text alignment
(left-aligned)
left <td align="left"> Device name
(td tag default
value)
Horizontal

Text alignment
(center)
center <td align="center"> Device name
(th tag default
value)

Text alignment
right <td align="right"> Device name
(right-aligned)
7
REFERENCES

Device name
Text alignment
top <td valign="top">
(top-aligned)
Vertical

Text alignment
(center) middle <td valign="middle"> Device name
(Default value)

Text alignment
bottom <td valign="bottom">
(bottom-aligned)
Device name

uTable creation example

A B C D
Line one A-1 C-1 D-1 Centered text
Line two A-2 B-2 C-2 Left-aligned text (default value)
D-2
Line three A-3 B-3 C-3 Left-aligned text (default value)

uHTML
<table border="1">

<tr bgcolor="green"><th width="100">A</th><th width="100">B</th><th width="100">C</th><th width="100">D</th></tr>

Line <tr align="center" bgcolor="white"><td colspan="2">A-1</td><td>C-1</td><td>D-1</td></tr>

one
Line <tr bgcolor="white"><td>A-2</td><td>B-2</td><td>C-2</td><td rowspan="2">D-2</td></tr>
two
Line <tr bgcolor="white"><td>A-3</td><td>B-3</td><td>C-3</td></tr>
three

</table>

142
5
7. REFERENCES

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
Style Sheet HTML Tags Color Name/Color Code

16 colors (basic colors) Web-safe colors, 216 colors Web color table, 147 colors

7.3 Color Name/Color Code

16 colors (basic colors)

These are the (16) basic colors defined by HTML.

HTML / CSS Hex Code

Color
Color Name #RRGGBB
6

WITH CGI
CREATING A DEVICE MONITOR WINDOW
black #000000

silver #c0c0c0

maroon #800000

purple #800080

green #008000

olive #808000

navy #000080

teal #008080

gray #808080

white #ffffff

red #ff0000

fuchsia #ff00ff 7
lime #00ff00

REFERENCES
yellow #ffff00

blue #0000ff

aqua #00ffff

143
5
7. REFERENCES
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

Style Sheet HTML Tags Color Name/Color Code

16 colors (basic colors) Web-safe colors, 216 colors Web color table, 147 colors

Web-safe colors, 216 colors

Web-safe colors is an assembly of 216 colors defined with red, green, and blue each split into 6 levels (6 × 6 × 6). The advantage
of using a color scheme with web-safe colors is that while the range is limited to 216 colors, nearly the same colors can be
reproduced without being greatly influenced by the performance of the computer.

Hex Code Hex Code Hex Code Hex Code Hex Code Hex Code
6 Color
#RRGGBB
Color
#RRGGBB
Color
#RRGGBB
Color
#RRGGBB
Color
#RRGGBB
Color
#RRGGBB
WITH CGI
CREATING A DEVICE MONITOR WINDOW

#000000 #003300 #006600 #009900 #00cc00 #00ff00

#000033 #003333 #006633 #009933 #00cc33 #00ff33

#000066 #003366 #006666 #009966 #00cc66 #00ff66

#000099 #003399 #006699 #009999 #00cc99 #00ff99

#0000cc #0033cc #0066cc #0099cc #00cccc #00ffcc

#0000ff #0033ff #0066ff #0099ff #00ccff #00ffff

#330000 #333300 #336600 #339900 #33cc00 #33ff00

#330033 #333333 #336633 #339933 #33cc33 #33ff33

#330066 #333366 #336666 #339966 #33cc66 #33ff66

#330099 #333399 #336699 #339999 #33cc99 #33ff99

#3300cc #3333cc #3366cc #3399cc #33cccc #33ffcc

7 #3300ff #3333ff #3366ff #3399ff #33ccff #33ffff

#660000 #663300 #666600 #669900 #66cc00 #66ff00

REFERENCES

#660033 #663333 #666633 #669933 #66cc33 #66ff33

#660066 #663366 #666666 #669966 #66cc66 #66ff66

#660099 #663399 #666699 #669999 #66cc99 #66ff99

#6600cc #6633cc #6666cc #6699cc #66cccc #66ffcc

#6600ff #6633ff #6666ff #6699ff #66ccff #66ffff

#990000 #993300 #996600 #999900 #99cc00 #99ff00

#990033 #993333 #996633 #999933 #99cc33 #99ff33

#990066 #993366 #996666 #999966 #99cc66 #99ff66

#990099 #993399 #996699 #999999 #99cc99 #99ff99

#9900cc #9933cc #9966cc #9999cc #99cccc #99ffcc

#9900ff #9933ff #9966ff #9999ff #99ccff #99ffff

#cc0000 #cc3300 #cc6600 #cc9900 #cccc00 #ccff00

#cc0033 #cc3333 #cc6633 #cc9933 #cccc33 #ccff33

#cc0066 #cc3366 #cc6666 #cc9966 #cccc66 #ccff66

#cc0099 #cc3399 #cc6699 #cc9999 #cccc99 #ccff99

#cc00cc #cc33cc #cc66cc #cc99cc #cccccc #ccffcc

#cc00ff #cc33ff #cc66ff #cc99ff #ccccff #ccffff

#ff0000 #ff3300 #ff6600 #ff9900 #ffcc00 #ffff00

#ff0033 #ff3333 #ff6633 #ff9933 #ffcc33 #ffff33

#ff0066 #ff3366 #ff6666 #ff9966 #ffcc66 #ffff66

#ff0099 #ff3399 #ff6699 #ff9999 #ffcc99 #ffff99

#ff00cc #ff33cc #ff66cc #ff99cc #ffcccc #ffffcc

#ff00ff #ff33ff #ff66ff #ff99ff #ffccff #ffffff

144
5
7. REFERENCES

CAN BE DISPLAYED WITH JAVASCRIPT (JS)

LEARNING THE FUNCTIONS OF OBJECTS THAT
Style Sheet HTML Tags Color Name/Color Code

16 colors (basic colors) Web-safe colors, 216 colors Web color table, 147 colors

Web color table, 147 colors

There are 147 colors that can be specified by color names.

HTML / CSS Hex Code HTML / CSS Hex Code

Color Color
Color Name #RRGGBB Color Name #RRGGBB

lightsalmon #FFA07A olive #808000

salmon #FA8072 darkolivegreen #556B2F

6
darksalmon #E9967A olivedrab #6B8E23

WITH CGI
CREATING A DEVICE MONITOR WINDOW
lightcoral #F08080 lightcyan #E0FFFF

indianred #CD5C5C cyan #00FFFF

crimson #DC143C aqua #00FFFF

firebrick #B22222 aquamarine #7FFFD4

red #FF0000 mediumaquamarine #66CDAA

darkred #8B0000 paleturquoise #AFEEEE

coral #FF7F50 turquoise #40E0D0

tomato #FF6347 mediumturquoise #48D1CC

orangered #FF4500 darkturquoise #00CED1

gold #FFD700 lightseagreen #20B2AA

orange #FFA500 cadetblue #5F9EA0

darkorange #FF8C00 darkcyan #008B8B

REFERENCES
lightyellow #FFFFE0 teal #008080

lemonchiffon #FFFACD powderblue #B0E0E6

lightgoldenrodyellow #FAFAD2 lightblue #ADD8E6

papayawhip #FFEFD5 lightskyblue #87CEFA

moccasin #FFE4B5 skyblue #87CEEB

peachpuff #FFDAB9 deepskyblue #00BFFF

palegoldenrod #EEE8AA lightsteelblue #B0C4DE

khaki #F0E68C dodgerblue #1E90FF

darkkhaki #BDB76B cornflowerblue #6495ED

yellow #FFFF00 steelblue #4682B4

lawngreen #7CFC00 royalblue #4169E1

chartreuse #7FFF00 blue #0000FF

limegreen #32CD32 mediumblue #0000CD

lime #00FF00 darkblue #00008B

forestgreen #228B22 navy #000080

green #008000 midnightblue #191970

darkgreen #006400 mediumslateblue #7B68EE

greenyellow #ADFF2F slateblue #6A5ACD

yellowgreen #9ACD32 darkslateblue #483D8B

springgreen #00FF7F lavender #E6E6FA

mediumspringgreen #00FA9A thistle #D8BFD8

lightgreen #90EE90 plum #DDA0DD

palegreen #98FB98 violet #EE82EE

darkseagreen #8FBC8F orchid #DA70D6

mediumseagreen #3CB371 fuchsia #FF00FF

seagreen #2E8B57 magenta #FF00FF

145
5
7. REFERENCES
CAN BE DISPLAYED WITH JAVASCRIPT (JS)
LEARNING THE FUNCTIONS OF OBJECTS THAT

Style Sheet HTML Tags Color Name/Color Code

16 colors (basic colors) Web-safe colors, 216 colors Web color table, 147 colors

HTML / CSS Hex Code HTML / CSS Hex Code

Color Color
Color Name #RRGGBB Color Name #RRGGBB

mediumorchid #ba55d3 cornsilk #fff8dc

mediumpurple #9370db blanchedalmond #ffebcd

6
blueviolet #8a2be2 bisque #ffe4c4
WITH CGI
CREATING A DEVICE MONITOR WINDOW

darkviolet #9400d3 navajowhite #ffdead

darkorchid #9932cc wheat #f5deb3

darkmagenta #8b008b burlywood #deb887

purple #800080 tan #d2b48c

indigo #4b0082 rosybrown #bc8f8f

pink #ffc0cb sandybrown #f4a460

lightpink #ffb6c1 goldenrod #daa520

hotpink #ff69b4 peru #cd853f

deeppink #ff1493 chocolate #d2691e

palevioletred #db7093 saddlebrown #8b4513

mediumvioletred #c71585 sienna #a0522d

7 white #ffffff brown #a52a2a
REFERENCES

snow #fffafa maroon #800000

honeydew #f0fff0

mintcream #f5fffa

azure #f0ffff

aliceblue #f0f8ff

ghostwhite #f8f8ff

whitesmoke #f5f5f5

seashell #fff5ee

beige #f5f5dc

oldlace #fdf5e6

floralwhite #fffaf0

ivory #fffff0

antiquewhite #faebd7

linen #faf0e6

lavenderblush #fff0f5

mistyrose #ffe4e1

gainsboro #dcdcdc

lightgray #d3d3d3

silver #c0c0c0

darkgray #a9a9a9

gray #808080

dimgray #696969

lightslategray #778899

slategray #708090

darkslategray #2f4f4f

black #000000

146
WARRANTY
Please confirm the following product warranty details before using this product.
• “WARRANTY” in MELSEC iQ-F FX5U User's Manual (Hardware) Manual number: JY997D55301
• “WARRANTY” in MELSEC iQ-F FX5UC User's Manual (Hardware) Manual number: JY997D61401

SAFETY GUIDELINES
• To ensure proper use of the product described in this guide, be sure to read the manuals of the product before use.
• This product has been manufactured as a general-purpose part for general industries, and has not been designed or
manufactured to be incorporated in a device or system used for purposes related to human life.
• Before using the product for special purposes such as nuclear power, electric power, aerospace, medicine, or passenger
movement vehicles, consult Mitsubishi Electric representative.
• This product has been manufactured under strict quality control. However, when installing the product where major accidents
or losses could occur if the product fails, install appropriate backup or failsafe functions in the system
• For the precautions concerning design, wiring, and others, read SAFETY PRECAUTIONS provided in the relevant manuals.

TRADEMARKS
Microsoft, Windows, and Internet Explorer are either registered trademarks or trademarks of Microsoft Corporation in the United
States and/or other countries.
Google Chrome is either a registered trademark or trademark of Google Inc.
The SD and SDHC logos are either registered trademarks or trademarks of SD-3C, LLC.
IOS (iOS) is either a registered trademark or trademark of Cisco Systems, Inc. and/or its affiliates in the United States and/or other
countries, and iOS is used under license by Apple Inc.
Ethernet is a registered trademark of Fuji Xerox Co., Ltd. in Japan.
Oracle and JavaScript are registered trademarks of Oracle and/or its affiliates in the United States and/or other countries.
The company names, system names and product names mentioned in this guide are either registered trademarks or trademarks
of their respective companies.
In some cases, trademark symbols such as ‘™’ or ‘®’ are not specified in this guide.

REVISIONS
* The document number is given in the bottom-left corner of the back cover of this guide.
Revision date Document number Description
September 2019 L(NA)08645ENG-A First edition
This guide confers no industrial property rights or any rights of any other kind, nor does it confer any patent licenses. Mitsubishi Electric Corporation
cannot be held responsible for any problems involving industrial property rights that may occur as a result of using the contents noted in this guide.
Programmable Controller
MELSEC iQ-F Series

HEAD OFFICE: TOKYO BLDG., 2-7-3, MARUNOUCHI, CHIYODA-KU, TOKYO 100-8310, JAPAN
http://Global.MitsubishiElectric.com

L(NA)08645ENG-A 1909(MEE) Printed September 2019 All trademarks acknowledged.

Introduction To HTML+CSS+Javascript
100% (1)
Introduction To HTML+CSS+Javascript
23 pages
PHP
100% (4)
PHP
21 pages
Introduction To Web Technologies: HTML + CSS + Javascript
100% (1)
Introduction To Web Technologies: HTML + CSS + Javascript
59 pages
HTML Css and Java Script
No ratings yet
HTML Css and Java Script
60 pages
HTML5 & CSS3 The Complete Manual 2014
94% (18)
HTML5 & CSS3 The Complete Manual 2014
132 pages
FSAD Notes Complete
No ratings yet
FSAD Notes Complete
210 pages
Web Design Lecture
No ratings yet
Web Design Lecture
105 pages
Web Tech Total
No ratings yet
Web Tech Total
143 pages
Video Link
No ratings yet
Video Link
140 pages
Ebook 23
No ratings yet
Ebook 23
51 pages
Fanuc 30i - 31i - 32i Model A - Alarm List
No ratings yet
Fanuc 30i - 31i - 32i Model A - Alarm List
91 pages
RK Intershipl
No ratings yet
RK Intershipl
27 pages
Como Conectar PLC FX5
No ratings yet
Como Conectar PLC FX5
40 pages
Study Guide - Intro To Web 500 2020 PDF
No ratings yet
Study Guide - Intro To Web 500 2020 PDF
91 pages
Lab Course - II (Web Technologies - I)
No ratings yet
Lab Course - II (Web Technologies - I)
80 pages
Web 2-Compressed
No ratings yet
Web 2-Compressed
62 pages
Web Development IMP Answers
No ratings yet
Web Development IMP Answers
65 pages
AWD Answer
No ratings yet
AWD Answer
21 pages
Lalit Kumar
No ratings yet
Lalit Kumar
16 pages
Nishant Yogesh Project
No ratings yet
Nishant Yogesh Project
24 pages
HTML Ebook Guide MERN
No ratings yet
HTML Ebook Guide MERN
55 pages
IT - SKILLS - UNIT - 2 (1) .PPTX (Read-Only)
No ratings yet
IT - SKILLS - UNIT - 2 (1) .PPTX (Read-Only)
40 pages
Computer Science 8 - Learning Module - Complete
No ratings yet
Computer Science 8 - Learning Module - Complete
63 pages
Industrial Training
No ratings yet
Industrial Training
21 pages
SEM I-Lab-III Workbook (1) - 1
No ratings yet
SEM I-Lab-III Workbook (1) - 1
81 pages
Cse 443
No ratings yet
Cse 443
21 pages
Web Design MANUAL
No ratings yet
Web Design MANUAL
24 pages
Html5 and Ccs3
100% (2)
Html5 and Ccs3
132 pages
Unit - 2 SDP Student
No ratings yet
Unit - 2 SDP Student
103 pages
Ussppe Hind
No ratings yet
Ussppe Hind
31 pages
Ilovepdf Merged
No ratings yet
Ilovepdf Merged
36 pages
Web Tech BCAFY Unit I
No ratings yet
Web Tech BCAFY Unit I
15 pages
Introduction To Website Developmet
No ratings yet
Introduction To Website Developmet
7 pages
E-Commerce File (Pranav Sapra)
No ratings yet
E-Commerce File (Pranav Sapra)
43 pages
Tutorial-3 - Webserver
No ratings yet
Tutorial-3 - Webserver
13 pages
HTML
No ratings yet
HTML
33 pages
Web Assignment
No ratings yet
Web Assignment
43 pages
CodeSchool BeginnersGuideToWebDevelopment PDF
100% (1)
CodeSchool BeginnersGuideToWebDevelopment PDF
40 pages
Web Dev 101: @miracleio
No ratings yet
Web Dev 101: @miracleio
39 pages
BRAHMASTRA ब्रह्मास्त्र (web developement)
No ratings yet
BRAHMASTRA ब्रह्मास्त्र (web developement)
6 pages
Alam
No ratings yet
Alam
15 pages
Presentation On Summer Internship Training On WEB DEVELOPMENT
No ratings yet
Presentation On Summer Internship Training On WEB DEVELOPMENT
18 pages
Web Design-Lecture1-Theory
No ratings yet
Web Design-Lecture1-Theory
32 pages
Training Report 1
No ratings yet
Training Report 1
38 pages
INTERNSHIP
No ratings yet
INTERNSHIP
30 pages
Competency Based Learning Material: Create Web Pages Using HTML
No ratings yet
Competency Based Learning Material: Create Web Pages Using HTML
45 pages
Web Development Fundamentals: Getting Started With Web Pages
No ratings yet
Web Development Fundamentals: Getting Started With Web Pages
17 pages
Design Our Job I I: Education Program Manual
No ratings yet
Design Our Job I I: Education Program Manual
20 pages
Assignment No:1 Web Programming
No ratings yet
Assignment No:1 Web Programming
21 pages
Website Designing Lectureflow
No ratings yet
Website Designing Lectureflow
10 pages
HTML History: - : Mark-Up Language), Which Is A Higher-Level Mark-Up Language That Has Long Been A
No ratings yet
HTML History: - : Mark-Up Language), Which Is A Higher-Level Mark-Up Language That Has Long Been A
4 pages
Introduction To Web Technology
No ratings yet
Introduction To Web Technology
5 pages
It Skills Chapter 2
No ratings yet
It Skills Chapter 2
20 pages
Brought To You by Code School - A Pluralsight Co
No ratings yet
Brought To You by Code School - A Pluralsight Co
39 pages
Cisco 300-410 - Vmar-2023 by - Any189q
No ratings yet
Cisco 300-410 - Vmar-2023 by - Any189q
142 pages
Fanuc 16 - 18 Model A - Alarm List
No ratings yet
Fanuc 16 - 18 Model A - Alarm List
40 pages
Fanuc 0 - 00 - 0mate Model C - Alarm List
No ratings yet
Fanuc 0 - 00 - 0mate Model C - Alarm List
26 pages
Introduction To Google SEO
No ratings yet
Introduction To Google SEO
116 pages
Avionics Basic Formulas, Symbols - Definitions
No ratings yet
Avionics Basic Formulas, Symbols - Definitions
20 pages
Abusing Active Directory Certificate Services - Certified - Pre-Owned
No ratings yet
Abusing Active Directory Certificate Services - Certified - Pre-Owned
143 pages
Fanuc 0 - 00 - 0mate Model A - Alarm List
No ratings yet
Fanuc 0 - 00 - 0mate Model A - Alarm List
13 pages
Rockwell Automation 1791ES-IB16 Guard I - O EtherNet - IP Safety Modules User Manual
No ratings yet
Rockwell Automation 1791ES-IB16 Guard I - O EtherNet - IP Safety Modules User Manual
100 pages
IPCAgility PortsandProtocols v32
No ratings yet
IPCAgility PortsandProtocols v32
15 pages
BancNet Egov Enrollment Procedures
No ratings yet
BancNet Egov Enrollment Procedures
1 page
Home Admin Web Hoplongtech - Com Public HTML Uploads Download 1415267212 Mitsubishi FX3 Series Catalog
No ratings yet
Home Admin Web Hoplongtech - Com Public HTML Uploads Download 1415267212 Mitsubishi FX3 Series Catalog
2 pages
FORM SSC.1 School Sports Club Registration Form v1
100% (1)
FORM SSC.1 School Sports Club Registration Form v1
2 pages
MICA SEM&Display Liveproject Template+ (2) +
No ratings yet
MICA SEM&Display Liveproject Template+ (2) +
13 pages
Các Size PH T Thông D NG:: STT Đư NG Kính TR C Mã SKF
No ratings yet
Các Size PH T Thông D NG:: STT Đư NG Kính TR C Mã SKF
11 pages
3 Fea RF - en
No ratings yet
3 Fea RF - en
2 pages
Introduction To BCT UNIT 1
No ratings yet
Introduction To BCT UNIT 1
41 pages
Eighteeth Nanopix Rontgensensor Zahnarzt Benutzerhandbuch en
No ratings yet
Eighteeth Nanopix Rontgensensor Zahnarzt Benutzerhandbuch en
65 pages
EP4535 5.5v1 Sophos Central XDR Data Lake APIs
No ratings yet
EP4535 5.5v1 Sophos Central XDR Data Lake APIs
15 pages
CAPSRSVer1 0
No ratings yet
CAPSRSVer1 0
494 pages
Networking v7
No ratings yet
Networking v7
197 pages
Gmail - Campus Drive Notification - SHV Energy Private Limited
No ratings yet
Gmail - Campus Drive Notification - SHV Energy Private Limited
3 pages
C-Eg44em - Sigma3-2021
No ratings yet
C-Eg44em - Sigma3-2021
35 pages
WWW - Manaresults.co - In: Board Diploma Examination, (C-20) October / November-2023 Dece - Fifth Semester Examination
No ratings yet
WWW - Manaresults.co - In: Board Diploma Examination, (C-20) October / November-2023 Dece - Fifth Semester Examination
3 pages
Assignment
No ratings yet
Assignment
7 pages
ASUSF9J
No ratings yet
ASUSF9J
63 pages
pQ4 - Applied - Empowerment Technology11-12 - Week5
No ratings yet
pQ4 - Applied - Empowerment Technology11-12 - Week5
4 pages
RHEL 8.5 - Release Notes
No ratings yet
RHEL 8.5 - Release Notes
184 pages
AWS CSOA Exam Scenarios
No ratings yet
AWS CSOA Exam Scenarios
62 pages
VMWare Initial Login Service Aid Agero - Windows Users Source Filev3
No ratings yet
VMWare Initial Login Service Aid Agero - Windows Users Source Filev3
5 pages
Karine Kpop Wiki Fandom 2
No ratings yet
Karine Kpop Wiki Fandom 2
1 page
Hands-On Training Guide
No ratings yet
Hands-On Training Guide
25 pages
Hachemaoui Sidi Mohammed
No ratings yet
Hachemaoui Sidi Mohammed
3 pages
URGENT!!! - Seeking Assistance in Finalisation
No ratings yet
URGENT!!! - Seeking Assistance in Finalisation
2 pages
ALM15 - Import Test Cases PDF
No ratings yet
ALM15 - Import Test Cases PDF
7 pages
Digital Assignment: Name: Ananth Sasank REG NO:19BIT0308
No ratings yet
Digital Assignment: Name: Ananth Sasank REG NO:19BIT0308
11 pages
Architectural Styles and The Design of Network-Based Software Architectures
No ratings yet
Architectural Styles and The Design of Network-Based Software Architectures
10 pages
kvCORE Smart Campaigns Templates, Triggers, Tasks, Oh My!
No ratings yet
kvCORE Smart Campaigns Templates, Triggers, Tasks, Oh My!
5 pages