fc6aserieswebpage editor sales manual plc/fc6a... · fc6aserieswebpage editor sales manual (product...

FC6A Series Web Page Editor

Sales Manual(Product Description・・・・Tutorial)

Think Automation and beyond�

(Product Description Tutorial)

WindLDR Ver. 8.20 or later

(Automation Organizer Ver. 3.20 or later））））

Issued by Automation BU

Issue No.：：：： 16-SMBE001-1Date of Issue ：：：：May 18th, 2016

Contents

1. System configuration

2. Start Web Page Editor

3. Create user web page

3.1. Components settings

3.1.1 Place components

3.1.2 Import components

3.1.3 Set link to devices

3.2 Components overview and

function example

5. Simulation

6. Download/Access user web page

6.1 Download methods

6.2 Access user web page (by URL)

6.3 Access user web page (by HTTP)

6.4 Set “Base Timer Period”

7. About web page capacity

7.1 Web page capacity


function example

3.2.1 Set Link/Event

3.2.2 Set “Goto Screen Button”

3.2.3 About Layer

3.3 Components usage example

3.3.1 Numeric input

3.3.2 Numeric indicator

3.3.2 Alternate switch

4. Save user web page

7.1 Web page capacity

7.2 Capacity confirmation method

8. Help function

1. System configuration(1)

・・・・Create web page1. Use Web Page Editor to

create web page

2. Download to FC6A

Ethernet


Internet Web Browser

・・・・Use WindLDR Web Page Editor to create user web page・・・・Available for creating custom web page and operating/ browsing user webpage which stored in FC6A HMI module.

3. Maintain FC6A

through web page


Items Description

WindLDR Ver.8.2.0 or later

System software of FC6A CPU module Ver.1.20 or later

System software of FC6A HMI module Ver.1.20 or later

Operating environment

・・・・IDEC Products


*Above-mentioned system software has been included in

Automation Organizer Ver. 3.20 or later.


・・・・Web Page Editor（（（（for development））））

Items Description

Supported browsers （Windows OS）・Google Chrome 47 or later・Mozilla Firefox 42 or later・Microsoft Internet Explorer 11

・・・・Web page viewer（（（（for operation））））


Items Description

Supported browsers （Windows OS）・Google Chrome 47 or later・Mozilla Firefox 42 or later・Microsoft Internet Explorer 11

Supported browsers (Android) Google Chrome 47 or later

Supported browsers (iOS) Safari 8 or later


Start Web Page Editor

Place components

Flow of creating web page using Web Page Editor


Save user web page

Download/ Access

user web page

Simulation


After double-clicking Web Page Editor, Web Page Editor will be

opened by default browser.


3. Create a web page


Place components



Save user web page

Download/ Access

user web page

Simulation

3.1 Components settings

Create user web page

Place components

Import Components



Import Components

Set link to devices

*This is a basic flow for creating user web page.

3.1.1 Place components


Drag & Drop a lamp from components list.

3.1.2 Import components(1)

Each component is displayed when

deploy the node of Web Page Editor.


Also available to import your favorite

images from “Symbol Factory”.


Symbol Factory


Selected and stored in Web Page Editor in WindLDR, High-resolution push

button/ pilot lamp which match the resolution of PC and smart devices in

“Symbol Factory”.


Double-click image or

press the “Copy” button

to import components.


Imported images are saved as child node

of each component.

to import components.


On Web Page Editor


Specify the pass of imported images

to change the image of lamp.

・・・・e.g. Specified part: when lamp is ON

Available to upload images which is

imported by WindLDR in property.

3.1.3 Set link to devices

By setting link to devices, FC6A

device is interlocked with

specified action in Web Page

Editor.

・・・・When setting device M0Link：：：：IDEC:M:M000


Link IDEC:M:M000

IO ：：：：in

*FC6A series device format

IDEC: Type of target device: Target device(.data type)

Please always set data types of devices when data register has been specified

its data type.

・・・・e.g. Data type：：：：Float, when linking to device address D0IDEC:D:D000.Float

3.1.3 Set link to devices(1)

About I/O settings of components

Determine input/ output direction of value between user web page and FC6A

series by I/O (in, out, i/o) settings.


In(read)

out(write)

i/o(read・・・・write)

FC6A seriesUser web page

3.1.3 Set link to devices(2)


You can select the device

that is being used in main

program of WindLDR from

“Device Tree”.

You can input directly for setting

in link box.

3.2 Components overview and function example(1)

・・・・Common settings of each components

Items Description

x X coordinates of component in layer area

y Y coordinates of component in layer area

width Width of layer

height Height of layer

visible Allow you to display or not

x = 0, y = 0

Layer area

x


y

You can input number in pixel step to

change the position/ size of components

in layer area.

You can also change the position/ size by

using device link.

3.2 Components overview and function example(1)

Below two items cannot be dynamically changed by using device link.

Items Description

Font Text font

Color Text color


Color and Font don’t change dynamically,

thus it is impossible to change by linking

device.

3.2.1 Set Link/Event(1)

Configuration example of label operation

When set 100 to D0

If D0 increases to 100, label

shows 100.


Label function is only capable

of displaying, thus, please set

I/O as “in”. If display of label is changed,

event (!onTextFormat) occurs,

the value is written to linked

device, and D1 becomes 100.


Configuration example of dynamic change for “Title” that attached on the frame

“Title” is only capable of displaying, and

setting is not required here. Please set I/O

as “in”.

If you input 100 to D0, Title

becomes device value which is

linked to the title.



Configuration example of switch operation

Output to M0, please set I/O as “out” or “i/o”.


You can set image as ON and OFF status.

ON OFF


Configuration example of check box operation

According to the value of

check box, M1 turns ON or OFF.


・・・・About event(!onValueChange)If value changes by operation of check

box, linked device turns ON.

However, turn M0 OFF from FC6A

series, display of check box is not

interlocked.

When using Web Page Editor to

operate, please set I/O as “out” or “i/o”.

However, if set I/O as “out”,

value(variable) leaves it as it is when

you operate from FC6A series.


Grouping Radio buttons

After grouping radio buttons,


After grouping radio buttons,

turn one of grouped radio

button ON, the other buttons

will not turn ON together.

Select and group multiple

configured radio buttons.

To set Text in advance will

make configuration items easy

to understand when setting

each radio button.


Configuration example of radio button

value = 0

value = 1

value = 2


Configurable value

increases in the order of

configured radio buttons.

According to the value of radio

button, value of D0 changes.

Same operation is performed in

Event (!onValueChange).


Push button

Same operation is

performed in Event

Button-down Button-up

Set operation of momentary switch.


performed in Event

(!onValueChange)


Text Input・・・・Set I/O as “in”

・・・・ Set I/O as “out”

Displaying a value of device

which is linked to a device.


If you set I/O of device which is linked to

Text as “in”, you can read (display) the

value. If you set I/O as “out”, you can write

(operate) the value.

When you set I/O as “i/o”, write and read

are both available.

Changing a value in text box to

write to device linked.

Event(!onTextChange) occurs

and output to device linked when

Text in text box is changed.


Trend graph


By Linking device of each line, maximum

of 8 data can be displayed as trend graph.

Available to only read (display), please set

I/O as “in”.

3.2.2 Set “Goto Screen Button”(1)

Double-click button of component

Goto Screen Button


・・・・Select “Jump to page and layer” when page has been saved multiply.

・・・・Select “Jump to URL” if you want to link it to other URL.

3.2.2 Set “Goto Screen Button” (2)


Select the page that you want to jump,

it can be switched to that page when

button is depressed.

You can specify ID of URL and

layer to link button with target

User Web Page and layer.

3.2.3 About Layer (1)

You can use layer function to overlap screen.

Size and

background color

can be set in

each layer.

Displaying layer


Layer 0

Layer 1

Layer 2Whole screen

3.2.3 About Layer (2)

You can specify the size of layer which is when creating user web page or

displaying browser.

1. Adjust for size of PC environment(browser) for development.

The size of layer is specified automatically in matching with size of browser displayed.

2. Adjust for size of PC environment(screen) for development

The size of layer is specified automatically in matching with size of screen displayed.


*If the size of layer area is larger than

browser, layer area will be displayed

with scroll bar when you open it by

browser.

3.2.3 About Layer (3)3. If you specify layer area and display size in matching with other size of browser which is different from development environment, you can specify width/ height and position (X-

coordinate, Y-coordinate).


When changing the size,

layer size can be referred

on Web Page Editor.

Select “Adjust to the

browser width/ height

when runtime”, when

you use smart-phone.*Image of displaying screen by

landscape smart-phone.

3.3 Components usage example

In Web Page Editor, below components can be created by

linking with device of FC6A.

・・・・Numeric input (by Text input function)・・・・Numeric display (by label function)・・・・Alternate switch


・・・・Alternate switch

3.3.1 Numeric input(1)


Place a “Text input”.

Link to device which you want to display on

Text in property.

e.g.

Link:[IDEC:D:D0.word]

IO:[out]

If you set property as above, value is written to

device [D0].

3.3.1 Numeric input (2)


Write value to device [D0].

3.3.2 Numeric display(1)


Place a “Label”.

Link to device which you want to display on

Text in property.

e.g.

Link:[IDEC:D:D0.word]

IO:[in]

If you set property as above, value is written to

device [D0].

3.3.2 Numeric display(2)


Linkage with device [D0] and displays

value.

3.3.3 Alternate switch(1)

Import the images of

switches that switch is

power-on and power-off

from Symbol Factory.


ONOFF After placing “switch”, set

each of image imported as

ON and OFF.

3.3.3 Alternate switch(2)


Link target device at link of value to

complete a alternate switch.

Image of operation

can be checked by

clicking image to

switch ON/ OFF.

4. Save User Web Page


Place components



Save user web page

Download/ Access

user web page

Simulation

4. Save User Web Page(1)

Select “OK” after writing the file

name of user web page in “Save

User web page can be separately saved aside from saving as project file.


name of user web page in “Save

name”.

Select “Save to local disk” to save

user web page only.

4. Save User Web Page(2)


User web page is saved as child node in Web

Page Editor of project window after saving.

5. Simulation


Place Components



Save user web page

Download/ Access

user web page

Simulation

5.1 Simulation

1. Set WindLDR as simulation mode.

You can check the operation of user web page without

downloading to FC6A.


2. Set mode of Web Page Editor as “RUN”.

*Simulation of Web Page Editor cannot be executed if the

simulation mode of WindLDR is not ON.

6. Download/Access Web page


Place components



Save user web page

Download/ Access

user web page

Simulation

6.1 Download methods

Download user web page to FC6A HMI module.


Put check mark in “Download web page”.

6.2 Access Web Page（（（（By URL））））Enter URL directly into Web browser to access.

You can access web page that is downloaded to FC6A HMI module by entering

below URL.

http:// IP address of HMI module: Port No. /viewer/view.htm?pagepath=

filename.page


*When downloading multiple pages, you can access the file that you want by only

changing the part after “Pagepath=”.

e.g.)When you want to access Page2.page

http://10.1.102.54:80/viewer/view.htm?pagepath=Page2.page

6.3 Access User Web Page （（（（By HTTP））））(1)

Configuration of redirect target on FC6A HMI module

1. Set redirect target of saved user web page.


Access the page that sets redirect target.

1.Start web browser and enter IP address of FC6A HMI module that is set in

Network settings.

6.3 Access User Web Page(by HTTP)(2)


2.After entering configured account name and password, it is allowed to

automatically access user web page that is set in redirect target.

6.4 Set Base Timer Period

Value of components and period of updating status can be changed by

changing “Base Timer Period (ms)” from settings dialog of Web Page Editor.

*Update period is in common for each component.

Settable display period


“Base Timer Period” can be changed

from 100 to 50,000 (ms).

7. About Web Page Capacity1. When using system web page, memory usage of system web page is

500KB.

2. When using Web Page Editor, memory usage of Web Page Editor

software is 2MB. 2MB500kB 2.5MB

The rest of 2.5MB capacity is available for using user web page. Total of

below files need to be used within 2.5MB.

- Files that made by Web Page Editor and imported images/videos


- Files that made by Web Page Editor and imported images/videos

- User web page made by HTML editor or JAVA script

Depending on whether system web page and Web Page Editor is used or not,

available capacity changes. You can select functions in “Web server” tab at

configuration dialog of HMI module.

7.1 Web Page Capacity(1)

2MB500kB 2.5MB

1. System web page + Web Page Editor

Available capacity for creating web page is 2.5MB.


2. System web page + User web page using HTML editor or JAVA script

(Without using Web Page Editor).

500kB 4.5MB

Available capacity for creating web page is 4.5MB.

※※※※Software created by FC5A Web server CPU module can be

reused.

7.1 Web Page Capacity(2)

2MB 3MB

3. Web Page Editor only

Available capacity for creating web page is 3MB.

4. User web page created by HTML editor or JAVA script.(Without using


5MB

4. User web page created by HTML editor or JAVA script.(Without using

system web page and Web Page Editor)

Available capacity for creating web page is 5MB.

*High added value and

professional oriented User Web

Page can be created if HTML

Editor or JAVA script HTML are

available.

7.2 Capacity confirmation method

You can confirm total capacity and

maximum capacity which are being


maximum capacity which are being

saved in download dialog.

8. Help function

Access Help from Web Page Editor


Finally

Since Web server function has been embedded on FC5A series, few users

have knowledge of HTML editor or JAVA script, high costs for creating a easy-

to-follow web page by web designer or development company. A simple

drawing tool is required from market.

To respond to this request, we offer FC6A Web Page Editor with enhanced

remote monitoring/ operating function in order to serve customers in today’s

IoT trend. This tool provides expanded customers an environment which

achieves remote monitoring more simply and efficiently.


achieves remote monitoring more simply and efficiently.

The request of remote monitoring is of common desire from who has a

large/small scale application, who has intellectual curiosity. It definitely is a

product which causes customers to be interested if you propose properly.

We wish you continued success!

Electronics& Automation Division

PLC Product Marketing

fc6aserieswebpage editor sales manual plc/fc6a... · fc6aserieswebpage editor sales manual (product...

Documents