Mps Web Fc34 Manual

MPS Distribution Station
Remote
Operation,
Monitoring,
Configuration
Table of Contents
Chapter 1
1.1 Starting a new project in FST 4 ………………………………………... 1-1
Project location on the hard drive 1-1

Creating a new project 1-1
1.2 Development of station control program…………………………….. 1-3
Controller settings 1-3

I/O configuration 1-4
Driver configuration 1-6
Allocation list 1-7
Control program development 1-9
How to create an STL program 1-12
1.3 Downloading station control program to FEC34……………………. 1-14
Downloading station control program 1-14
Chapter 2
2.1 FEC34 Command Interpreter (CI)………………………………….…... 2-1
CI commands and FEC34 operands 2-1
2.2 Accessing CI with FST terminal………….…………………………….. 2-3
Using terminal emulator of FST 2-3
2.3 Reading and modifying controller registers…………………………. 2-5
Reading an entire register 2-5

Reading a single bit of a register 2-5
Modifying an entire register 2-6
Modifying a single bit of a register 2-7
Online display of FEC34 registers 2-7
Chapter 3
3.1 Basic network concepts………...………………………………….…... 3-1
Network terminologies 3-1
3.2 Network topologies……………..………….…………………………….. 3-3
Bus topology 3-3

Ring topology 3-3
Star topology 3-4
3.3 TCP/IP………………………………………………………………………. 3-5
IP addresses 3-5
IP address classes 3-5
Subnet masks 3-6
Chapter 4
4.1 Modification of a project for remote access……...…………………. 4-1
Modifying a project for remote access 4-1

Downloading project and drivers to FEC34 4-3
Communicating with the controller over the network 4-4
4.2 Web page design with HTML for FEC34.…………………………….. 4-3
HTML tags 4-7

Basic HTML page structure 4-7
Creating an HTML document 4-8
Viewing an HTML document 4-10
4.3 Simple Web page with embedded CI commands…..………………. 4-13
Basic Web page with embedded CI commands 4-13

Repeated inquiries to the FEC34 Web server 4-14
4.4 Advanced Web page with embedded CI commands………………. 4-16
Design of an advanced Web page 4-16

Details of the HTML code 4-18
Creating, downloading and viewing the page 4-21
Chapter 5
5.1 HTML forms……………………………………..……...…………………. 5-1
HTML <FORM> tag and form elements 5-1
5.2 Processing user data……………………...…………………………….. 5-5
JavaScript 5-5
Event handlers with JavaScript 5-5
5.3 Remote station control with an HMI…………………..………………. 5-8
CISend JavaScript function 5-8

CISend2 Java Script function 5-9
Remote operation of the Swivel arm 5-10
Remote operation of the distribution station 5-13
Advanced HMI for remote operation of the distribution station 5-19
5.4 Remote station configuration with an HMI…………..………………. 5-23
HMI design for remote configuration of the distribution station 5-23

PLC program modifications for remote station configuration 5-27
Chapter 6
6.1 Dynamic Data Exchange (DDE) with IPC Data Server…..…………. 6-1
6.2 IPC Data Server installation and configuration…….……………….. 6-2
Installation 6-2
IPS Data Server configuration 6-2
Controller operands available through the IPC Data Server 6-4
6.3 Microsoft Excel spread sheet for remote process monitoring..…. 6-6
PLC program modifications 6-6

Excel spread sheet design 6-7
Remote process monitoring with Excel 6-14
1. Station Control Program
Chapter 1
Station Control Program
Summary
This chapter provides basic information about development of a PLC
program to operate a stand-alone MPS Distribution Station.
Specifically, it introduces details of using FST 4.0 software for the
development of the program.
Table of Contents
1.1 Starting a new project in FST 4 ………………………………………... 1-1
Project location on the hard drive 1-1

Creating a new project 1-1
1.2 Development of station control program…………………………….. 1-3
Controller settings 1-3

I/O configuration 1-4
Driver configuration 1-6
Allocation list 1-7
Control program development 1-9
How to create an STL program 1-12
1.3 Downloading station control program to FC34……………………. 1-14
Downloading station control program 1-14

Resources required
Software
• FST 4.0
Files
• DIST_STA project files
Hardware
• Personal computer
• MPS Distribution station with FC34 controller
• RS232 serial communications cable
1.1. Starting a new project in FST 4

In general, control programs of an automation system consist of several components such as:
• Source code for programs,

• Imported (compiled) modules from a library,
• I/O driver configurations,
• Allocation list,
• Several settings for the project as well as the controller hardware and,
• Project documentation.
In FST a project is used to organize all components of a control program. Each project has a
name. The name can be up to 8 characters long.
Project location on
the hard drive
During installation of FST, a project directory is created on the hard
drive of the computer. If default settings are used, this directory will
be at:
C:\FST4\Projects
However, it is possible to set the project directory to a different one

either during installation or after starting FST. In this chapter, it is
assumed that the default project directory is used.
When a new project is created, its name is used to create a

subdirectory under the Projects directory. All project files are then
saved into this subdirectory. For example, if a new project named
“DIST_STA” is created, a corresponding subdirectory on the hard
drive will be created as:
C:\FST4\Projects\DIST_STA
Then, all DIST_STA project files will be saved into this subdirectory.
This is a convenient organization of the project and its components
because if the project needs to be transferred to another computer,
simply copying the project subdirectory will ensure proper transfer of
all necessary files.
Creating a new
project
Start FST by clicking on the Windows START button and by navigating
to the program from the menus. If the default settings are used
during installation of FST you can start it by choosing:
Programs
Festo Software
1-1
FST 4
FST 4
1. From the FST menu select Project and New …. The New Project
window will be displayed:
The dialog box displays all projects that are in the current Projects
directory.
Enter DIST_STA as the name of the new project and click OK.
Remember the project name can have at most 8 characters and
must not be the name of an already existing project.
2. After entering a name for the new project, the Project Settings
dialog box is displayed. This dialog box allows you to choose the
controller type. Also you can enter a comment (up to 255
characters long). The comment is used to give a short description
for your project for easier recognition. Whenever you have to
select a project in FST this comment will be displayed together
with the project name and can be used for sorting lists. Choose
FEC Compact as the controller:
Enter Distribution Station Control as the comment. And click OK.
You have just started a new project called DIST_STA.
1-2
1.2. Development of station control program

After starting a new project, the next task is to develop a station control program. In this
chapter we will use Statement List Language (STL) to program the IPC FEC FC34 controller
using FST.
Development of the station control program involves the following steps:
1. Controller settings,
2. I/O configuration,
3. Driver Configuration,
4. Allocation list and,
5. Control program development.
Controller Settings
Controller settings refer to several runtime and download options for
an FST project. To modify these settings:
1. Double click the Controller Settings item in the Project Tree

window:
(If the Project Tree window is not currently displayed, select View,
Project Tree from the FST menu to display it). The Controller
Settings dialog box has various tabs:
1-3
2. Select Autostart from the Run Mode tab. This will automatically
start the project after it is downloaded to the controller without
having to give an explicit run command.
3. Depending on the controller type there can be more than one COM
port. The FC34 has only one COM port; therefore the controller
COM port should be set to zero (default). To set the
communication port for downloading programs to FEC from your
PC click on the Options tab and set the Controller COM Port to 0.
Click OK to finish controller settings.
I/O Configuration
The IPC is a modular system and there are numerous input and output
modules available. Therefore, it is necessary to indicate which I/O
module is used in the FEC controller. Double click the I/O
Configuration item in the Project Tree window to open the I/O
Configuration dialog box:
The standard IO module of the FEC is already entered and given the IO
address 0. If you want to change this address double click the entry
and modify. If you want to add other modules double click somewhere
inside the IO configuration and select the desired module.
1-4
Communication
Configuration
To establish communication between the PC and the FC34 the COM
port for the PC that will be used for communications.
To set the COM port for PC:
1. Select Preferences from the Extras menu.
2. Click on the Communication port tab.
3. Set Local COM Port to COM1 and Baudrate to 9600. (Here it is

assumed that the serial port cable from the FC34 to the PC is
connected to COM1).
4. Click OK.
Allocation List
Allocation list is used to assign names to specific I/O items. For
example, if a push button is wired to I1.0, then the name “START” can
be assigned to this I/O item through the Allocation List. The
advantage is that during control program development these names
can directly be used to refer to specific I/O devices, making the
program very easy to read and maintain. Therefore, an allocation list
should be developed before control program development. To start
an allocation list:
1. Double click Allocation List item in the Project View window. This
will open the Allocation List window.
1-5
2. To enter an assignment put the cursor somewhere inside the

Allocation List window and double click. This will open the
Allocation List Entry dialog box:
3. Assign the name “Eject” to I/O address O0.0 as shown below:
The comment “Ejector cylinder” will automatically be displayed in

your STL station control program every time you use “Eject”
symbolic operand. Automatic insertion of these comments makes
the control program very user friendly.
4. Following the procedure explained so far, enter the rest of the

Distribution Station Allocation List shown below:
1-6
1-7
Control Program
Development
Control program (or PLC program) can be developed using different
languages such as ladder programming or STL. In this chapter we will
use STL (Statement List).
The control program for the Distribution Station consists of two

programs:
• MAIN (Initializes the station and monitors front panel

buttons),
• CYCLE (contains steps to follow for part handling and
transfer to next station).
MAIN
The main program is designed to do the following:
1. Initialize the station by resetting the CycleRun Flag to indicate
that the station is currently not running, by sending the swivel
arm to the next station and by turning the vacuum off.
2. Start the cycle and set CycleRun flag if the start button is
pressed. Continuously loop to monitor the front panel
buttons. If the stop button is pressed stop the cycle.
CYCLE
The cycle program is designed to do the following:
1. Set delay timer durations,
2. If the cycle is already not running and the magazine is not
empty then start the cycle,
3. Feed a part with the Ejector,
4. When the part is fully ejected, move the swivel arm to the
magazine position,
5. When the arm gets to the magazine position, turn the vacuum
on and wait for the vacuum to build up,
6. When sufficient vacuum is built up, retract the Ejector,
7. When the ejector is fully retracted, transfer the part to the next
station,
8. When the swivel arm gets to the next station, turn vacuum off
to release the part and pause for a short duration,
9. When the vacuum is lost go back to the beginning of the cycle.
10. End of cycle.
Allocation List, MAIN and CYCLE programs corresponding to these

steps are given in the following pages.
1-8
ALLOCATION LIST
MAIN PROGRAM
STEP init
IF NOP
THEN RESET CycleRun 'Cycle running
1
SET Swi2Next 'Swivel to next
RESET Swi2Mag 'Swivel to mag.
SET VacOFF 'Vacuum OFF
STEP loop
IF START 'Start button
AND N MagEmpty 'Mag. Empty (NC)
AND N CycleRun 'Cycle running
THEN SET CycleProg 'Cycle program
SET CycleRun 'Cycle running
2
IF N STOP 'Stop button (NC)
IF NOP
THEN JMP TO loop
1-9
CYCLE PROGRAM
STEP init
IF NOP
THEN LOAD V100
1
TO T1Preset 'Timer 1 duration
LOAD V2
STEP start
IF N CycleRun 'Cycle running
2 OR MagEmpty 'Mag. Empty (NC)
THEN JMP TO end
OTHRW NOP
STEP ejector
3 IF NOP
THEN SET Eject 'Ejector cylinder
STEP
IF
4 EjectOUT 'Ejector extended
THEN RESET Swi2Next 'Swivel to next
SET Swi2Mag 'Swivel to mag.
STEP
IF
SwiAtMag 'Swivel at mag.
5 AND EjectOUT 'Ejector extended
THEN RESET VacOFF 'Vacuum OFF
SET VacON 'Vacuum ON
SET VacTimer1 'Delay timer 1
STEP
IF
6
VacSensor 'Vacuum Sensor ON
THEN RESET Eject 'Ejector cylinder
STEP
IF
7 EjectIN 'Eject retracted
THEN RESET Swi2Mag 'Swivel to mag.
SET Swi2Next 'Swivel to next.
STEP
IF
SwiAtNext 'Swivel at next
8
THEN RESET VacON 'Vacuum ON
STEP
IF
9 N VacSensor 'Vacuum Sensor ON
THEN RESET VacOFF 'Vacuum OFF
JMP TO start
STEP end
10 IF NOP
1-10
How to Create an
STL Program
This section describes how to create a new STL program using FST. It
is assumed that a project with correct settings has already been
created following the procedures described in this chapter.
To create a new STL program:

1. Right-click on Programs in the Project Tree window and select
Insert Programs from the pop up menu. This will display the New
Program window:
2. Set Number to 0 and type Main Program for the Comment and
click OK. This will start a new program file and will also pop up an
STL shortcuts toolbar as shown below:
1-11
To enter the first statement of the main program (given on page 1-10):
1. Click the STEP button of the STL Shortcuts toolbar and type init
and press Enter.
2. Click the IF and then the NOP buttons of the toolbar, press Enter.
3. Click the THEN button followed by the RESET button.
4. To enter an operand for the reset command click the Operand
button and choose CycleRun from the list. Press Enter.
Notice that you picked the operand from the Allocation list.
Therefore, it is quite important to make an Allocation list before
writing a control program. Otherwise, the symbolic operands will
not be available during program development. The program can
still be developed by entering names or direct I/O addresses but
the allocation list has to be edited parallel to the program
development.
5. Click SET, then Operand and choose Swi2Next from the list. Press
enter.
6. Click RESET, then Operand and choose Swi2Mag from the list
(this is necessary since the rotational cylinder at the swivel arm is
a double-acting one). Press Enter.
7. Click SET, then Operand and choose VacOFF from the list. Press
Enter.
8. Press Enter twice to advance the cursor down a couple of lines to
leave some space before you start entering the next statement.
You just finished entering the first statement of the main program.
Now enter the next statement to finish the main program.
When you are done with the main program, you need to start a new
file for the cycle program. Therefore, right-click on the Programs item
of the Project Tree and choose Insert program. Set the program
number to 1 and its name to Cycle. Enter all the control statements.
Finally, click on the Save All button on the main toolbar of FST (fourth
button from left).
1-12
1.3. Downloading station control program to FC34

The last step in station control program development is to download the program to FC34.
The download process transfers all necessary files of the project to the FC34 controller.
However, before a project can be downloaded to the controller, it must be compiled to a
binary project run file.
In this chapter serial port communication is assumed. Therefore, before downloading make
sure that the serial cable SM14 is connected from COM1 serial port of the PC to the COM port
of the FC34.
Downloading station
control program
1. To download the project either press F5 key or select Download
from the Online menu of FST.
2. If the project has never been downloaded or compiled before, the
following message will be displayed:
Click Yes to compile and download the project. The following

message window will indicate the results.
Press the START button on the distribution station to run the

program.
1-13
2. FC34 Command Interpreter (CI)
Chapter 2
FEC FC34 Command Interpreter (CI)
Summary
This chapter introduces the CI Command Interpreter. Specifically, it
demonstrates how to read and modify FC34 controller registers using
FST 4.0 software.
Table of Contents
2.1 FST Command Interpreter (CI)………………………………….…... 2-1
CI commands and FC34 operands 2-1
2.2 Accessing CI with FST terminal………….…………………………….. 2-3
Using terminal emulator of FST 2-3
2.3 Reading and modifying controller registers…………………………. 2-5
Reading an entire register 2-5

Reading a single bit of a register 2-5
Modifying an entire register 2-6
Modifying a single bit of a register 2-7
Online display of FC34 registers 2-7
Resources required
Software
• FST 4.0
Files
Hardware
• RS232 serial communications cable (SM14)
2.1. FST Command Interpreter (CI)

All FESTO controllers have a Command Interpreter. It is generally called “CI.” The CI is often
used as a tool to read and/or modify controller registers manually. The CI is part of the
controller operating system. Therefore, it is already in the controller and can be accessed via
a programming terminal.
Communication between the CI and the terminal is done through the serial port. There are
two ways of communicating with the CI:
1. Using any terminal emulator (such as the HyperTerminal program of Microsoft

Windows) or,
2. Using the terminal emulator built into the FST software.
CI commands and
FC34 operands
A complete CI command consists of:
• A command,
• An operand and,
• A parameter value.
The general format is:
<CI Command><Operand><Parameter value>
For example, to display the status of timer 2 the following CI command

would be constructed:
DT2
Where
D: Display command,
T: timer operand and,
2: parameter value (timer 2).
The following tables list FC34 CI commands, operands and

parameters.
2-1
Table 2.1. FST CI Commands

Command letter Command Description
Display content/status of
D = Display operand
M = Modify Modify operand
R = Run Start or continue program
S = Stop Stop program
X = Exit Exit CI
Table 2.2. FST CI Operands

Operand Meaning
A Output
E Input
F Error
M Flag
P Program
PS Program status
R Register
T Timer
TV Timer preselection
TW Timer word
Z Counter
ZV Counter preselection
ZW Counter word
Table 2.3. FST CI Parameters

Operand Parameter Parameter value
A x.y (output bit) 0.0 to 0.7
Wx (output word) W0
E x.y (input bit) 0.0 to 0.7 or 1.0 to 1.3
Wx (input word) 0 to 1 and 2 to 255 for trimmers
and fast counters
F
M x.y (Flag bit) 0.0 to 9999.15
Wx (Flag word) 0 to 9999
P x (Program) 0 to 63
PS x (Prog. status) 0 to 63
R x (Register) 0 to 255
T x (Timer) 0 to 255
TV x (Timer 0 to 255
preselection)
TW x (Timer word) 0 to 255
Z x (Counter) 0 to 255
ZV x (Counter 0 to 255
preselection)
ZW x (Counter 0 to 255
word)
2-2
2.2. Accessing CI with FST terminal

As mentioned earlier, it is possible to access the CI with any terminal emulator. However, in
this chapter we will look at how to access the FC34 CI using the terminal emulator of FST
software.
Using terminal
emulator of FST
Turn the distribution station power on and start FST by clicking on the
Windows START button and by navigating to the program from the
menus. If the default settings are used during installation of FST you
can start it by choosing:
Programs
Festo Software
FST 4
FST 4
1. If it is not already open, select Open from the File menu to open
the DIST_STA project.
2. Verify the serial communication settings by selecting Preferences
from the Extras menu. Make sure that the SM14 serial cable is
connected to the proper COM terminal of the PC.
3. Click the Online Terminal button on the toolbar or select Terminal
from the Online menu to start the terminal emulator. This will pop
up the following CI Terminal window:
4. To send a CI command type the command and press Enter or click

Send button. For example, enter the following command to
display the status of input bit zero:
DE0.0
2-3
The FC34 will respond with DE0.0=1 indicating that the input bit
zero is currently on.
2-4
2.3. Reading and modifying controller registers

Reading an entire
register
To read an entire register (a word) you must use the “D” command
with a proper parameter value. For example,
DEW0 Reads input (E) word (W) 0,
DAW1 Reads output (A) word (W) 1
The value returned from the controller is the decimal equivalent of

binary state of the operand. For example,
DEW0=9 means: bits 0 and 3 of the 16 bit input word are ON.
DAW1=12 means: bits 2 and 3 of the 16 bit output word are ON.
Reading a single bit

of a register
To read a single bit of a register (a word) you must use the “D”
command with a proper parameter value. For example,
DE0.0 Reads input (E) word 0, bit 0.
DA0.1 Reads output (A) word 0, bit 1.
2-5
If the value returned from the controller is 1 then that bit is ON. If it is
0 (zero) then that bit is OFF.
Modifying an entire
register
To modify an entire register (a word) you must use the “M” command
with a proper parameter value. For example, to move the swivel arm
of the distribution station from magazine to next station we can enter:
MAW0=4 Writes 4 to output (A) word (W) 0,
To bring the arm back to magazine we can enter:
MAW0=2 Writes 2 to output (A) word (W) 0,
2-6
Modifying a single
bit of a register
To modify a single bit of a register (a word) you must use the “M”
command with a proper parameter value. For example, to feed a part
from the magazine (make sure that the swivel arm is not at magazine):
MA0.0=1 Writes 1 to output (A) bit 0 of word 0,
To eject cylinder we can enter:
MA0.0=0 Writes 0 to output (A) bit 0 of word 0,
Online display of
FC34 registers
Another tool provided with the FST is the Online Display of all FC34
registers. This tool can be used along with the CI Terminal to view the
status of various controller registers and bits. Select Online Display
form the Online menu to display the following window:
2-7
3. Basics of Networking
Chapter 3
Basics of Networking
Summary
This chapter provides basic definitions of network terminology such
as IP address, TCP/IP, server, client, gateway, etc. In addition, it
introduces network topologies.
Table of Contents
3.1 Basic network concepts………...………………………………….…... 3-1
Network terminologies 3-1
3.2 Network topologies……………..………….…………………………….. 3-3
Bus topology 3-3

Ring topology 3-3
Star topology 3-4
3.3 TCP/IP………………………………………………………………………. 3-5
IP addresses 3-5
IP address classes 3-5
Subnet masks 3-6
Resources required
Software
• None
Files
• None
Hardware
• None
3.1. Basic network concepts

A network is a communication system that enables computer users to share computer
equipment, application software, and data, voice, and video transmissions. Networks can
link users who are in the same room or on different continents. Network information is
transmitted through wire, fiber-optic communications, or radio waves such as microwaves.
A network is formed by connecting various equipment, such as workstations, servers,

printers, hubs, etc. to each other. Each equipment on a network is called a node.
Laptop
Computer Server
Ethernet
Printer
Mainframe
A network with different types of nodes.
Network
terminologies
Workstation: is a computer that is home to local applications such as
Microsoft Office and that can run network applications such as
software that accesses data on a mainframe computer.
Client: is a computer that accesses a mainframe, a mini computer or a

microcomputer that allows access to multiple users. For example, a
personal computer that accesses another computer (host) for a file is
called a client.
Host: is a computer that has a network operating system to allow

multiple computers to access it at the same time.
Server: is a host computer that makes software applications, data

files and network utilities available to other network devices.
The Internet: is a collection of thousands of smaller networks around

the world linked by a vast array of network equipment and
communication methods.
Packets: are small units of data sent from node to node on a network.
3-1
Protocol: is an established guideline that specifies how networked

data is formatted into a packet, how the packet is transmitted, and
how it is interpreted at the receiving end.
TCP/IP: is a protocol particularly suited for medium to large networks.
Ethernet: is a set of standards for the infrastructure on which a

network is built.
Hub: is a central device that joins individual nodes or network

segments into a network.
Backbone: is a high-capacity communication medium that joins

networks and central network devices (such as hubs).
Gateway: enables communication between two different types of

networked systems, such as between complex protocols or between
different email systems.
3-2
3.2. Network topologies

Network topology refers to the physical layout of the network. There are three main
topologies:
1. Bus,
2. Ring, and
3. Star.
Each topology has advantages and disadvantages.
Bus topology
A bus topology network consists of running cable from one node to
the next.
Computer Laptop Server
Printer
Mainframe
Bus network topology
Ring topology
A ring topology is a network in the shape of a ring or circle, with nodes
connected around the ring.
Mainframe
Laptop
Printer
Computer
Server
Ring network topology
3-3
Star topology
In a star topology network the nodes are connected to a central hub,
resembling a star.
Computer
Laptop
Workstation
Hub
Printer
Computer
Server Computer
Server
Star network topology
Modern networks combine the logical communications of a bus

topology with the physical layout of a star topology using a backbone.
Laptop
Workstation
Hub
Printer
Computer
Server Computer
Backbone
Laptop
Workstation
Hub
Printer
Computer
Server Computer
Bus-star network layout
3-4
3.3. TCP/IP
TCP/IP (Transmission Control Protocol/Internet Protocol) is a packet transmission protocol
used around the world.
The TCP portion was originally developed to ensure reliable connections on government,
military and educational networks. It performs extensive error checking to ensure that data is
delivered successfully.
The IP portion provides network addressing to ensure that data packets quickly reach the
correct destination. It uses a dotted decimal notation system of addressing, which consists of
four numbers separated by a period, such as 141.134.77.15.
IP addresses
IP addresses are 32-bit binary numbers (zeros and ones) that contain
both a subnet address and a host address. For example, the following
is an IP address:
11000001000010100001111000000010
It is not easy to understand this number. Therefore, the number can

first be grouped into 8-bit sections called octets:
11000001 00001010 00011110 00000010
Then, each group can be converted into its decimal equivalent

separated by a period:
193.10.30.2
This format is commonly known as dotted-decimal format for an IP

address.
IP address classes
Each IP address consists of two fields:
• A netid field which is the logical network address of the

network (or subnet) to which the computer is attached,
• A hostid field, which is the logical device address that
uniquely identifies each host (or node) on a subnet.
Together the netid and the hostid provide each node of the network
with a unique IP address.
When the TCP/IP protocol was first developed, it was thought that
computer networks would fall into one of three categories called
Class A, Class B and Class C.
3-5
Class A addresses use only the first octet of the IP number to identify
a subnet (a group of networked devices). The remaining three octets
are used for node IDs. It was envisioned that a Class A network would
be made up of small number of clusters of subnets but with large
number of nodes in each subnet.
Class B addresses use the first two octets to identify a subnet. The
remaining two octets are used for node addresses.
Class C addresses use the first three octets to identify a network. The
remaining octet is used for node addresses.
Subnet masks
A subnet mask is a bit pattern that defines which portion of the IP
address represents a subnet address. For example, consider the
following class B IP address: 170.203.93.5. In binary form this is
equal to:
10101010 11001011 01011101 00000101
The default subnet mask for a class B address is:
11111111 11111111 00000000 00000000
In dotted-decimal notation this subnet mask is equal to:
255.255.0.0
The network software combines the subnet mask with the IP address
to identify the subnet ID and the host ID for a network node. The
subnet masks make this operation easier and faster.
Network information such as the IP address for a network device,

subnet masks and other network settings are managed by a network
administrator.
3-6
4. Remote Access to Distribution Station
Chapter 4
Remote Access to
Distribution Station
Summary
This chapter describes how to access the distribution station remotely
over the Internet. First, it explains how to modify a project to include
network drivers and a Web server. Then, it introduces fundamental
HTML tags necessary to implement a simple Web page. This is
followed by development of more advanced Web pages with
embedded CI commands to remotely monitor the Distribution Station.
Table of Contents
4.1 Modification of a project for remote access……...…………………. 4-1
Modifying a project for remote access 4-1

Downloading project and drivers to FC34 4-3
Communicating with the controller over the network 4-4
4.2 Web page design with HTML for FC34.…………………………….. 4-3
HTML tags 4-7

Basic HTML page structure 4-7
Creating an HTML document 4-8
Viewing an HTML document 4-10
4.3 Simple Web page with embedded CI commands…..………………. 4-13
Basic Web page with embedded CI commands 4-13

Repeated inquiries to the FC34 Web server 4-14
4.4 Advanced Web page with embedded CI commands………………. 4-16
Design of an advanced Web page 4-16

Details of the HTML code 4-18
Creating, downloading and viewing the page 4-21
Resources required
Software
• FST 4.0
• Notepad text editor
• Web browser (Internet Explorer or Netscape)
• Ping Windows utility program
Files
• Main1.htm Web page file
Hardware
• RS232 serial communications cable SM14
• Network and Ethernet cable
4.1. Modification of a project for remote access

The FC34 controller can be connected to a network using a TCP/IP driver making it possible to
access it by other computers using the TCP/IP protocol. In addition, the FC34 controller can
act as a World Wide Web server delivering web pages that can be viewed using a standard
browser such as Microsoft Internet Explorer or Netscape Navigator. Using these web pages, it
is possible to display and modify contents of the FC34 registers. As a result, the station can
be remotely operated, the process can be remotely monitored and the station can be
remotely configured.
Modifying a project
for remote access
In order to access the FC34 controller over a network and use it as a
Web server, we need to configure and download a TCP/IP and a Web
server driver as part of the project.
Network communication with the FC34 requires an IP number to be

used by the FC34, a network mask (subnet mask) and a Gateway IP
number. You need to obtain these numbers from your network
system administrator before the FC34 can be properly configured for
networking.
Also, when you configure network settings and drivers for the FC34 for
the first time, you need to use the RS232 serial communication to
download the settings and the drivers to the controller. After this, the
FC34 can be accessed over the network and therefore, the RS232
cable can be removed.
To configure network settings and drivers:
1. Run FST and open the DIST_STA project.

2. Double click the Driver Configuration item in the Project View
window. This will open the Driver Configuration window:
4-1
3. Double click somewhere inside the Driver Configuration window to

open the Select Driver window:
4. Select TCPIPFEC and click OK to include the TCP/IP driver in the

project. This will open the Driver Options window:
Enter the IP number to be used by the FC34, IP netmask and the

IP address gateway that you obtained from your network system
administrator. Click OK. The Driver Configuration window will
now list the TCP/IP driver.
5. To add the Web server to the project double click somewhere

inside the Driver Configuration window again. This will open the
Driver Selection window. Select WEB_SRVR and click OK.
6. A Driver Options window will open asking for the FC34 virtual
drive where the Web server will be installed. Select Drive B and
click OK. The Driver Configuration window will now list both
drivers:
4-2
7. Close the Driver Configuration window.
Downloading project
and drivers to FC34
At this point the TCP/IP and Web server drivers are configured and the
project is ready to be downloaded to the FC34. As mentioned before,
when downloading the network drivers to FC34 for the first time you
need to use RS232 serial communication with the FC34 to transfer the
network drivers to it. Once a project with the network drivers are
downloaded, the controller can be accessed over the network.
To download the project with the network drivers:
1. Save all files by clicking Save All button from the toolbar.
2. Verify that RS232 is the current communication mode by selecting
Preferences from the Extras menu and by choosing the
Communication port tab. Make sure that use RS232 is selected.
3. Press F5 key to start downloading the project. The FST will detect
the changes in the project and will prompt you to make the project
again. Click Yes to recompile the project. When the download is
completed the status window will look similar to the following:
4-3
Communicating with
the controller over
the network
Once the network drivers are downloaded to the FC34 using the
RS232 serial port, the controller will be ready for network
communications.
Testing the network connection

It is a good idea to test access to the controller over the network using
a utility program (ping) that comes with the Microsoft Windows
operating system. Using this test, we can verify whether the IP,
Gateway and Subnet mask settings were entered correctly.
1. Click START button of Windows and select Run.

2. In the dialog box type Command and click OK to start a DOS
Command window.
3. At the prompt type ping followed by the IP number you used for
the FC34 controller and hit Enter. For example, with the IP number
used in this chapter:
C:\> Ping 199.237.83.68 (Substitute your own IP number !)
The ping command sends test packets to the controller and tries to
receive them back from the controller. If the controller network
settings are correct you should get a reply back from the controller
such as:
If there is no reply (indicated by a Request timeout message) then,

there is something wrong with the network settings of the controller.
Verify the settings by going back to the TCP/IP driver in the FST (Driver
Configuration item in the project view window) or contact your
network system administrator.
4-4
Communicating with the controller over the network using the FST
If the above test was successful, then the controller is ready for
network communications.
The last step in setting up a project for network communications is to

go back and choose network communication as the communication
mode for the FST software.
1. Select Preferences from the Extras menu of the FST and click on
the Communication Port tab.
2. Enter the Controller IP Address (such as 199.237.83.68 in this
example) and select use TCP/IP:
3. If you check Save in Project option, all settings will be saved into
this project. Otherwise, they become settings for the FST in
general. Check the Save in Project option and click OK.
Now you are ready to communicate with the controller over the
network and therefore can remove the RS232 cable.
4-5
4.2. Web page design with HTML for FC34

HTML (HyperText MarkUp Language) is the standard programming language used to develop
basic Web pages. The language has many commands that enable the designer to use various
design elements such as different fonts, text and background colors, graphics, etc. in
designing a Web page. In this chapter, only the most fundamental HTML commands (tags)
will be reviewed to facilitate development of simple Web pages to communicate with the FC34
over the Internet. For a more detailed coverage of HTML please refer to a book on HTML.
HTML tags
HTML is a markup language where tags are inserted into regular text
to enhance the document in some way such as changing fonts, font
colors, or adding hyperlinks to other Web pages. The tags are not
visible to the viewer of the page. They tell the browser how to render
the page as it loads it from a Web server. The tags can be considered
as commands to the Web browser. They are enclosed in angle
brackets. For example:
<B> Festo FC34 </B>
uses the tag <B> to make the text “Festo FC34” boldface. Notice that
most tags must be used in pairs. The <B> in the above example tells
the browser where to start using boldface as it renders the page. The
</B> tells the browser where to stop using boldface.
Basic HTML tags

Tag Description Example
<B> Boldface <B>Festo FC34</B>
<I> Italic <Festo FC34</I>
<H1> Header 1 font style <H1>Festo</H1>
<H3> Header 3 font style <H3>Festo</H3>
<A> Hyperlink <A HREF=www.festo.com>Festo web site</A>
<IMG> Image <IMG SRC=”Festo.jpg”>
<PRE> Preformatted text <PRE>Hello World</PRE>
<HR> Horizontal ruled line <HR>
(inserts a line)
<BR> Break (end of line) <BR>
Basic HTML page

structure
An HTML document consists of two main sections:
• Head and
• Body
The head section is defined by the <HEAD> and </HEAD> tags. It

contains information about the document such as its title (<TITLE>
tag), keywords, etc.
4-6
The body section is defined by the <BODY> and </BODY> tags. It

contains the page text and all embedded tags.
For example, the following is a minimal HTML document:
<HTML>
<HEAD>
<TITLE>
Festo FC34 Controller Web Page
</TITLE>
</HEAD>
<BODY>
Festo FC34 Controller
</BODY>
</HTML>
Notice that the entire document content is enclosed between <HTML>

and </HTML> tags indicating that this is a Web page. The
whitespaces are ignored by the browser as it renders the page.
Therefore, the above page is the same as the following:
<HTML>
<HEAD><TITLE>Festo FC34 Controller Web Page</TITLE></HEAD>
<BODY>Festo FC34 Controller</BODY></HTML>
However, the first version is easier to read.
Creating an HTML
document
HTML documents can be created using:
• An HTML editor or,
• A simple text editor.
HTML editors are designed to create HTML documents using a

graphical user interface. In other words, you can create a document
much like in Microsoft Word by typing the text, selecting different
fonts and inserting images, etc. When the document is saved, it is
converted into HTML tags and saved as an HTML document. There are
many such editors available. However, it must be pointed out that the
translation to HTML is not always a perfect one resulting in the HTML
version of the document looking different than the original version.
In this chapter we will use a simple text editor, namely, Notepad. This
editor comes with the Windows operating system.
To create a simple Web page:
1. Start Notepad by clicking START button of Windows and

navigating to Programs, Accessories, Notepad.
2. Type the following:
4-7
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
Festo FC34 Controller
</BODY>
</HTML>
Note that the tags can also be typed in lowercase letters.

However, conventionally they are typed in uppercase letters to
make it easier to separate them from the rest of the text in the
document.
3. Save the file as an HTML file. This requires using “htm” or “html”
as an extension after the filename. Notepad will automatically
add a “txt” extension to any filename used. To avoid this, enclose
the filename and the extension in double quotes.
To save the file click File and select Save As. Navigate to a
directory where you want to save the file (remember this directory
for later exercises).
Type “main1.htm” (including the double quote marks) for

filename and click OK (shown on next page).
Viewing an HTML
document
You can view an HTML document using a browser such as Microsoft
Internet Explorer or Netscape Navigator. Throughout this chapter
Internet Explorer is used as the browser for viewing Web pages.
4-8
A Web browser can open a Web page
• located on the hard drive of the PC or,

• located on a different computer across a network with a Web
Server.
Currently, the Web page you just created is located on the hard drive
of the PC (local copy). Therefore, we will first view it from the hard
drive. Later, we will send the page to the FC34 Web server and view it
from there.
Viewing a page from the local hard drive:
1. Run the Internet Explorer by clicking START button of Windows

and navigating to Programs, Internet Explorer.
2. Click File menu of the Internet Explorer and select Open.
3. Click Browse to navigate to the file and click OK. The page will be
displayed as follows:
main1.htm Web page
This page is not very interesting but it shows the basic concepts of
creating and viewing an HTML page.
Viewing a Page from FC34 Web server:

Now we will send this Web page to the FC34 controller. Then, using
the browser we will ask the FC34 Web server to deliver the page to us
over the network. In this example, the Web page will be located on
the FC34 controller.
To send the page to the FC34 controller:
1. Start FST program.

2. Select File Transfer from the Online menu. This will start the file
transfer utility and will show you the current files on virtual drive A
of FC34.
3. Change to drive B where the Web Server files are kept:
4-9
4. The default display mode of the utility is “List”. Change it to

“Details” by clicking the last button on its toolbar. This will show
the file extensions, size and date information.
5. Click the download button (the one with blue arrow pointing
down). Navigate to the “main1.htm” Web page file on the hard
drive of the PC. Select the file and click Open. This will download
the file to the FC34. You should see the file in the listing of virtual
drive B of the FC34:
To view the Web page on the FC34 controller:
1. Start Internet Explorer.

2. Enter the IP number of your FC34 controller followed by the name
of the Web page a the URL address. For example,
http://199.237.83.68/main1.htm (substitute your own IP

number)
4-10
main1.htm Web page
The page will be delivered to your browser over the network by the
FC34 Web server.
Please note:
The Explorer has to be configured in a way that it allows to search for
WEB pages within the network not necessarily via a modem or similar.
4-11
4.3. Simple Web page with embedded CI commands

The FC34 Web server can interpret CI commands embedded as tags in an HTML document. As
a result, when you are designing a Web page, you can use the CI commands as if they were
HTML tags. When the FC34 Web server delivers the Web page, it first goes through the
document and replaces all the embedded CI tags with the current values of the registers.
Then, it delivers the page to the browser requesting it. This mechanism allows us to develop
web pages that can be used to remotely monitor the station.
Basic Web page with

embedded CI
commands
We will modify the “main1.htm” file that was created in the previous
section of this chapter to use an embedded CI command to view an
input register:
1. Open the “main1.htm” file with Notepad.

2. Modify the file as follows:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
Festo FC34 Festo Controller
<BR><BR>
This is Input Word 0: <FSTCI DEW0>
</BODY>
</HTML>
The <BR><BR> tags insert two blank lines in the page after the
“Festo FC34 Controller” text.
The embedded CI command <FSTCI DEW0> will be replaced by the

current value of the input word zero when the page is requested
from the FC34 Web server by the browser.
3. Save the file as “main2.htm” (with the quotation marks !).

4. Download it to the FC34 using the File Transfer utility of FST (as
explained in the previous section).
5. Run the Internet Explorer and enter your FC34 IP number followed
by the main2.htm filename as the URL:
4-12
main2.htm Web page
Notice how the embedded <FSTCI DEW0> tag is replaced by

number 5 (the current value of the input register).
Repeated inquiries
to the FC34 Web
server
A Web server delivers a Web page to the requesting browser and the
browser renders the page formatting it with the embedded tags. This
is a static mechanism of content delivery.
After the page is delivered to the browser, if the state of the station
changes the change will not be reflected in the Web page currently
being viewed unless the user hits the refresh button of the browser.
Even then, it is not guaranteed that the content will be updated
because, by default, the browser will make a copy of the Web page
(cache the page) on the local hard drive when it is first delivered.
Later, if the refresh button is pressed, it will get the cached copy and
display it instead of requesting the Web server to deliver the
document over the network again. This mechanism was developed to
help reduce network traffic.
Remember that the FC34 Web server goes through the requested Web
page and replaces the embedded CI commands with the current
values of registers. Therefore, unless we force the browser to request
a copy of the same page from the Web server again, we will not get an
updated page reflecting the current state of the register.
A simple way of requesting the Web server to deliver the page

repeatedly is to use the Refresh HTML meta tag. This tag has the
following format and must be placed in the head section of an HTML
document:
<META http-equiv=”refresh” content=”3”>
This tag tells the browser to request the current file from the Web
server every 3 seconds.
1. Open the “main2.htm” file and place the above meta tag into the
head section of the HTML document:
4-13
<HTML>
<HEAD>
<TITLE>
</TITLE>
<META http-equiv=”refresh” content=”3”>
</HEAD>
<BODY>
Festo FC34 Festo Controller
<BR><BR>
This is Input Word 0: <FSTCI DEW0>
</BODY>
</HTML>
2. Save the file and download it to the FC34 using the File Transfer
utility of FST.
3. Run the Internet Explorer and enter your FC34 IP number followed
by the main2.htm filename as the URL:
You should see the Web page being refreshed every 3 seconds
and therefore, the input word being updated. However,
sometimes it is hard to correlate the input word to the current
state of the station since the station may change its state faster
than the Web page can be updated.
4-14
4.3. Advanced Web page with embedded CI commands

The Web server in the FC34 controller can serve relatively advanced Web pages with
embedded graphics and other design elements in them. However, the FC34 CPU and memory
limitations have to be kept in mind while designing pages with embedded graphics.
In this section you will learn how to design an advanced Web page with embedded graphics.
The page will display the status of all FC34 input and output registers.
Design of an
advanced Web page
The advanced Web page you will design in this section will have the
following layout:
main3.htm Web page
The page starts with a Festo logo image that is also an active link to
the Festo-usa.com Web site. This is followed by a title and a table that
displays all input and output registers of the Distribution station.
Using such a page it is possible to monitor the station remotely over a
network such as the Internet.
The HTML code is given on the next page.
<HTML>
<HEAD>
<TITLE> MPS Distribution Station Remote Monitor </TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META http-equiv="refresh" content="3"> 1
</HEAD>
4-15
<BODY bgcolor="#CCCCCC">
<DIV align="center">
<A href="http://www.festo-usa.com"><IMG src="FestoLog.gif" width="113" height="20" border="0"></A>
<H2><FONT color="#0000CC">MPS Distribution Station Remote Monitor</FONT></H2>
<HR width="62%" align="center"> 2
<BR>
<TABLE width="62%" border="1"align="center"> 3

<TR>
<TD width="50%" bgcolor="#CCCC99" valign="middle">
<H3 align="center"><FONT color="#336633">Inputs</FONT></H3>
</TD>

<H3 align="center"><FONT color="#336633">Outputs</FONT></H3> 4
</TD>
</TR>
<TR>
<TD width="50%" valign="top" height="222" bgcolor="#DDDDDD" align="center">
<PRE><FONT color="#000000">
EjectIN (E0.0) :<FSTCI DE0.0>
EjectOUT (E0.1) :<FSTCI DE0.1>
SwiAtMag (E0.2) :<FSTCI DE0.2>
SwiAtNext (E0.3) :<FSTCI DE0.3>
(E0.4) :<FSTCI DE0.4>
VacSensor (E0.5) :<FSTCI DE0.5>
MagEmpty (E0.6) :<FSTCI DE0.6>
(E0.7) :<FSTCI DE0.7>
START (E1.0) :<FSTCI DE1.0>
STOP (E1.1) :<FSTCI DE1.1>
(E1.2) :<FSTCI DE1.2>
MANUAL (E1.3) :<FSTCI DE1.3>
</FONT></PRE>
</TD>

Eject (A0.0) :<FSTCI DA0.0>
Swi2Mag (A0.1) :<FSTCI DA0.1>
Swi2Next (A0.2) :<FSTCI DA0.2>
VacOFF (A0.3) :<FSTCI DA0.3>
VacON (A0.4) :<FSTCI DA0.4>
(A0.5) :<FSTCI DA0.5>
(A0.6) :<FSTCI DA0.6>
(A0.7) :<FSTCI DA0.7>
</FONT></PRE>
</TD>
</TR>
</TABLE>
</DIV> 6
</BODY>
</HTML>
main3.htm file listing
Details of the HTML

code
In this section we will look at the details of the HTML code for the
page. Notice that the code listed in the previous page is broken into 6
sections. The following paragraphs explain each section in detail.
4-16
Section 1:
This is the HEAD section of the HTML document where the title for the
page, as well as the content-type is declared. In addition, to load the
page from the FC34 server every 3 seconds we have the “refresh”
META tag as explained before. The title of the document is displayed
in the title-bar (top blue stripe) of the browser window when the page
is displayed by the browser.
Section 2:
This section of the code creates the following part of the page:
In this section we start defining the BODY of the page. Most of the
HTML tags have parameters associated with them. In this section we
are using the background color parameter of the BODY tag to set the
background of the page to a tone of gray color (given by the
“#CCCCCC” hexadecimal code). The BODY tag without any
parameters is used as follows:
<BODY>
The same tag with its “bgcolor” parameter is used as follows:
<BODY bgcolor=”#CCCCCC”>
Notice that the tag and its parameter are enclosed in the angle
brackets.
This is followed by the <DIV> tag. This tag allows us to define

sections in the HTML document and apply formatting to them. In this
case, we are defining the entire document as one section and setting
the alignment of everything in the document to center. Once again,
the <DIV> tag is used with its “align” parameter set to “center”.
To embed the FESTO logo image (graphics file) in the page we are
using the <IMG> tag. This tag requires a source file for the graphics
file to be displayed as the image. Therefore, the source parameter of
the <IMG> tag is set to “FestoLog.gif.” This is a GIF-type image file
that contains the blue FESTO logo displayed at the top of the page. In
addition to the source parameter the image width and height
4-17
parameters are also set. Finally, the border parameter is set to zero
indicating no borders around the image.
The <A> is the anchor tag. This tag is used to create hyperlinks in the
page. To make the FESTO logo image a hyperlink to the www.festo-
usa.com Web site we place the <A> tag in front of the <IMG> tag and
set its “href” parameter to the URL of the linked Web site.
The <H2> tag is a predefined “Heading2” style. This style displays

the “MPS Distribution Station Remote Monitor” text using a large font
size. In addition, the font color of the text is set to dark blue
(“#0000CC” hex number), using the <FONT> tag with its color
parameter.
To draw the horizontal line below the text, we use the <HR> tag. The
<HR> (horizontal rule) tag is used with its width set to 62% of the
browser window width and is aligned to be at the center of the page.
Finally, the <BR> tag is used to provide one line of spacing after the
horizontal rule.
Section 3:
The <TABLE> tag in this section defines a table whose width is set to
62% of the width of the browser window. In addition, the table border
width is set to 1 unit.
Section 4:
In HTML, first a table is defined (as in Section 3 above). Then, each

row of the table is defined using the <TR> (table row) tag. The code
enclosed between <TR> and </TR> tags in this section defines the
first row of the table.
The first row of the table contains two cells (columns). Each cell
content is enclosed in a <TD> … </TD> pair of tags. Therefore, the
first <TD> … </TD> tag pair defines the cell with the word “Inputs”
and the second pair of tags defines the cell with the word “output” in
it.
The width of each cell is set to 50% of the table width, along with the
cell background color setting and the vertical alignment of the text
setting.
4-18
Section 5:
Similar to the Section 4 above, this section of the code defines the
second row of the table. Once again, this row also contains two
columns each of which is defined by a <TD> … </TD> tag pair.
To format the list of FC34 inputs and outputs as seen in the page, we
use a <PRE> (“Preformatted”) tag. Any text enclosed in a pair of
<PRE> … </PRE> tags is displayed exactly it is typed in the HTML
code.
When the browser requests the page from the FC34 Web server, the
server first examines the page looking for the special <FSTCI> tags. It
then replaces these tags with the corresponding current register
values and sends the page to the browser. As a result, when the
browser receives the page all <FSTCI> special tags are replaced by
simple “0” or “1” register values.
Section 6:
This section simply finishes the document by closing the pending
<TABLE>, <DIV> and <BODY> tags.
Creating,
downloading and
viewing the page
To create this page:
1. Start the Notepad editor by clicking the START button of Windows

and by selecting Programs, Accessories, Notepad.
2. Type the HTML code for the page exactly as shown in the listing.
3. Save the file as “main3.htm” (do not forget to use the quotes
when saving).
4-19
To download the page to the FC34:
Remember that this page has an embedded FESTO logo in it.

Therefore, we need to download two files to the FC34:
• The Web page (main3.htm),
• The embedded graphics file for FESTO logo (FestoLog.gif)
1. Start the FST software and select File Transfer from the Online
menu. This will start the file transfer utility to send the files to the
FC34.
2. Make sure that the virtual drive B is selected. This is where the
Web server looks for files.
3. Click on the download button (with the downward blue arrow) and
navigate to the “main3.htm” file on your hard drive.
4. Click OK to download to the FC34.
5. Repeat steps 3 and 4 but this time to download the FestoLog.gif
image file.
To view the page,
1. Start the Internet Explorer browser.

2. Type the IP address of your FC34 controller followed by the
main3.htm file name. In this chapter, we used:
http://199.237.83.68/main3.htm (Use your own IP address)
3. Press the START button of the Distribution station and observe

the changing states of its inputs and outputs on the Web page.
4-20
5. Advanced HMI Development
Chapter 5
Advanced HMI
Development
Summary
This chapter describes design of advanced Human Machine Interfaces
(HMI) for remote operation and configuration of the Distribution
station. First, it introduces HTML forms and event handling with
JavaScript. Then, it explains how to design and implement a Web
page to remotely operate the station over the Internet. Finally, it
describes how to modify the PLC program and the HMI to remotely
configure the station.
Table of Contents
5.1 HTML forms……………………………………..……...…………………. 5-1
HTML <FORM> tag and form elements 5-1
5.2 Processing user data……………………...…………………………….. 5-5
JavaScript 5-5
Event handlers with JavaScript 5-5
5.3 Remote station control with an HMI…………………..………………. 5-8
CISend JavaScript function 5-8

CISend2 JavaScript function 5-9
Remote operation of the Swivel arm 5-10
Remote operation of the distribution station 5-13
Advanced HMI for remote operation of the distribution station 5-19
5.4 Remote station configuration with an HMI…………..………………. 5-23
HMI design for remote configuration of the distribution station 5-23

PLC program modifications for remote station configuration 5-27
Resources required
Software
• FST 4.0
• Notepad text editor
Files
• DIST_REM project files
• DIST_CFG project files
• hmi1.htm Web page file
• CISend.js file
Hardware
5.1. HTML forms

HTML is the standard language used to design Web pages. Earlier Web pages displayed
static information that was coded into the page by its designer using HTML tags. However, as
the technology advanced, Web pages started to have dynamic content that changed based on
the browser used, interactions of the user with various features of the page, etc.
One design element used in making a Web page dynamic is a FORM. Forms allow users to
enter information into a Web page. Forms can contain various other types of elements such
as buttons, drop-down lists, areas to enter text, etc. that are all associated with receiving
information from the user.
Design of a Web page with a functioning form requires two components to work together: (1)
A Web page with a form and associated elements to collect input data from the user; and (2)
A program that can receive the collected data and process it.
A typical Web page with a form can process the user input data by either sending it to a
program running on a server (typically called a CGI program) or can process the data on the
client machine that the user is using with the help of a scripting language such as JavaScript
or VBScript.
In this chapter, we will use client-side processing with JavaScript. Specifically, we will explore
the relationship between HTML forms and JavaScript to implement dynamic Web pages.
Using this technology, we will implement human-machine interfaces (HMI) for the distribution
station.
HTML <FORM> tag

and form elements
The <FORM> tag in a Web page signals the beginning of a form in the
page. A typical form contains various elements such as buttons,
combo boxes (drop-down lists), radio buttons, areas for text entry,
etc. as shown below:
Some form elements have a set of “events” that they can generate.
For example, the button element has an “onClick” event that it
5-1
generates when the user clicks on it. The Web page can react to the
user clicking the button through a so called “event handler.” An event
handler is a script (program) that is run when the button is clicked.
In this chapter we will look at some of these elements. For more

detailed coverage, please refer to a book on HTML or JavaScript.
Button element
The following code segment creates a Web page with a form that
contains a button. When the button is clicked, an event handler,
called “Move()” is run to move the arm to magazine position (details
of the event handler are not shown).
<HTML>
<HEAD>
<TITLE>Button Example</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H2>Distribution station</H2>
<FORM>
Swivel to Magazine:
<INPUT type="button" name="MoveArm" value="Move" onClick="Move()">
</FORM>
</BODY>
</HTML>
The <FORM> and </FORM> tags enclose the form within the Web
page where the user input will be received through the button
element. In the form we simply display a message on the page
(Swivel to Magazine:) and place a button next to it using the following
tag:
5-2
The <INPUT> tag specifies that this is an input field. This tag has
various attributes:
Attribute Definition
type specifies that this will be a button.
name assigns a name to the button object. Later this name can be used in a
script (program) to refer to the button object.
value Label displayed on the button.
onClick Click event generated by the button to call the “Move()” event handler
when the user clicks the button.
Check box
contains a checkbox. When the checkbox is checked its value is set to
1. This value can later be examined by a script to determine whether
the checkbox was checked or not.
<HTML>
<HEAD>
<TITLE>Checkbox Example</TITLE>
</HEAD>
<FORM>
Vacuum ON
<INPUT type="checkbox" name="VacuumON" value="1">
</FORM>
</BODY>
</HTML>
The check box element on the form is created using the following tag:
<INPUT type="checkbox" name="VacuumON" value="1">
5-3
Attributes of the tag are:
type specifies that this will be a checkbox.
name assigns a name to the checkbox object. Later this name can be used in a
script (program) to refer to the checkbox object.
value is the value that will be sent to the processing program when the
checkbox is checked.
Text box
contains a text box. The text, entered by the user, can later be
examined by a script.
<HTML>
<HEAD>
<TITLE>Text box Example</TITLE>
</HEAD>
<FORM>
Flag register value:
<INPUT type="text" name="FlagRegisterValue" maxlength="10">
</FORM>
</BODY>
</HTML>
Attributes of the tag are:
type specifies that this will be a text box.
name assigns a name to the text box object. Later this name can be used in a
script (program) to refer to the text box object.
maxlength Determines the width of the text box. It also limits the maximum
number of characters that can be typed into the text box by the user.
5-4
5.2. Processing user data

As mentioned earlier, a Web page with form elements can be used to get user input. There
are two ways of processing this input:
1. By sending it to a program running on a server (typically called a CGI program) or

2. By processing it on the client machine used by the user with the help of a scripting
language such as JavaScript or VBScript.
In this chapter we will use JavaScript for processing the user input.
JavaScript
JavaScript is a scripting (programming) language developed by
Netscape in collaboration with Sun Microsystems.
JavaScript is simply text typed into an HTML document. The script is

run (interpreted) by the Web browser while it is rendering the page.
Therefore, in order for the embedded JavaScript code in an HTML
document to work, the browser must understand the JavaScript
language.
In an HTML document, JavaScript code is enclosed in the following

tags:
<SCRIPT LANGAGE=”javascript”>
Scripting code here
</SCRIPT>
JavaScript is a case-sensitive language whose syntax is very similar to

“C” programming language. The JavaScript language details are
beyond the scope of this chapter. Therefore, please refer to a book on
JavaScript for more details.
Event handlers with

JavaScript
Some HTML form elements, such as a button, can generate events
based on the user interactions with the element. When the element
detects a certain user interaction, such as clicking a button, an event
handler can be called.
JavaScript can be used to implement an event handler. The event

handlers are JavaScript functions whose definitions are placed in the
HEAD section of the HTML document.
The following Web page displays a message box when the user clicks
the MOVE button:
5-5
<HTML>
<HEAD>
<TITLE>Button Example</TITLE>
<SCRIPT LANGUAGE="javascript">
function Move()
{
alert("You clicked the button");
}
</SCRIPT>
</HEAD>
<FORM>
Swivel to Magazine:
</FORM>
</BODY>
</HTML>
In this example, when the MOVE button is clicked it detects the

interaction and generates an onClick event. Then, the Move() event
handler is called to respond to the event.
The Move() event handler is implemented as a JavaScript function in

the HEAD section of the HTML document. When the function is called,
it displays a message box by executing the following statement:
alert("You clicked the button");
5-6
Note that the definition of the function is enclosed in a pair of

<SCRIPT> tags signaling to the browser that the content between the
tags need to be interpreted as JavaScript code not HTML.
5-7
5.3. Remote station control with an HMI

In this section, we will look at how to send commands from a Web page to the distribution
station to control the station remotely over the Internet.
CISend JavaScript
function
Remote control of the station can be accomplished by sending
appropriate CI commands to the station as a result of user
interactions with a Web page.
This requires development of a JavaScript function that can parse a

string to form the necessary CI command for the FC34. In this chapter,
we will use the following function:
// CISend sends a modify command to the web server

// Parameters:
// Operand: for example MW0
// Value: parameter value for the operand
function CISend(Operand,Value) {
var found;
var href;
if ( Value == "NaN" ) {
alert("Value is not a number");
return;
}
// Verify variable value

if ( (Value < -65535) || (Value > 65535) ) {
alert("Allowed range for value is -65535 to 65535");
return;
}
// Strip previous modify command from URL

href = this.location.href;
found = href.indexOf("?");
if ( found > 0 ) {
href = href.substring(0, found);
}
// Now add modify command to URL and reload

this.location.href = href + "?ci:" + "M" + Operand + "=" + Value;
}
CISend() function listing
The “CISend()” function has two arguments. The “Operand” is the CI

command to be sent to the FC34. The “Value” is the parameter value
for the command. For example, if we want to send MAW0 with a
parameter value of “0” (turning all outputs OFF), we could use the
following function call:
CISend(‘AW0’, ‘0’)
5-8
The function then takes these arguments and first checks the “value”
that was passed to it to make sure that it is acceptable. Then, it forms
a query string to the FC34 Web server to deliver the CI command to
the station.
CISend2 JavaScript
function
In many situations it is necessary or suitable to send more than just
one CI command. The following example combines two CI commands
into one function call so that we have 4 arguments: 2 operands and 2
parameters. To use this function it is very simple to modify the 2 coils
of a valve in one call.
// CISend2 sends 2 modify commands to the web server

// Parameters:
// Operand1: for example MW0
// Value1
// Operand2: for example MW1
// Value2
function CISend2(Operand1,Value1,Operand2,Value2) {
var found;
var href;
//Check value 1
if ( Value1 == "NaN" ) {
alert("Value1 is not a number");
return;
}
// Verify variable value1
if ( (Value1 < -65535) || (Value1 > 65535) ) {
alert("Allowed range for value1 is -65535 to 65535");
return;
}
//Check value 2
if ( Value2 == "NaN" ) {
alert("Value2 is not a number");
return;
}
// Verify variable value2
if ( (Value2 < -65535) || (Value2 > 65535) ) {
alert("Allowed range for value2 is -65535 to 65535");
return;
}
// Strip previous modify command from URL
href = this.location.href;
found = href.indexOf("?");
if ( found > 0 ) {
href = href.substring(0, found);
}
// Now add modify command to URL and reload

this.location.href = href + "?ci:" + "M" + Operand1 + "=" + Value1 + ";M" +
Operand2 + "=" + Value2;
}
CISend2() function listing
5-9
Both functions are saved in a single file so that each function can be
added to any HTML document by simply referring to this file from the
HTML document (as shown in the next section). The functions are
saved into “CISend.js” file. Note that this file must be in the same
directory as the Web page that is referring to it.
Remote operation of
the Swivel arm
Let’s develop a Web page that can be used to move the swivel arm of
the distribution station remotely. Please note that the swivel arm in
our station is controlled by a pneumatic valve with two coils. To
control the arm it is necessary to modify both coils. Therefore we use
the function CISend2( ). The following is the HTML code (hmi1.htm
file) for the Web page:
<HTML>
<HEAD>
<TITLE>Remote control of swivel arm</TITLE>
<SCRIPT LANGUAGE="javascript" src="CISend.js">
</SCRIPT>
<SCRIPT LANGUAGE=”javascript”>
function SwivelToMag()
{
//Turn bit 1 ON, Bit 2 OFF
CISend2(‘A0.2’,’0’, 'A0.1', '1');
return;
}
function SwivelToNext()
{
//Turn bit 2 ON, Bit 1 OFF.
CISend2(‘A0.1’,’0’, 'A0.2', '1');
return;
} 1
</SCRIPT>
</HEAD>
<H2>Remote Control of Swivel Arm</H2>
<FORM>
<INPUT type="button" name="ArmToMag" value="To Magazine"
onClick="SwivelToMag()">
<br>
<INPUT type="button" name="ArmToNext" value="To Next "
onClick="SwivelToNext()">
2
</FORM>
</BODY>
</HTML>
hmi1.htm file listing
5-10
The hmi1.htm Web page looks like this:
The code in the previous page is broken into two sections. The
following paragraphs explain each section. We’ll start with the second
section.
Section 2:
This section is an HTML form with two buttons. Each button has an
event handler that is called if the user clicks it. For example, the “To
Magazine” button calls “SwivelToMag()” event handler when it is
clicked.
Section 1:
In this section of the code we have the definition of JavaScript
functions SwivelToMag() and SwivelToNext() that are used as event
handlers for the two buttons on the Web page.
The section starts with the <SCRIPT> tag to indicate to the browser
that the following content is to be interpreted as JavaScript code.
Note that both of these event handlers use the CISend2() function.
However, the function is not defined in the HTML code of this Web
page. Instead, the file that contains the CISend2() function is
referenced to include it in the page. The reference is in the source
attribute of the <SCRIPT> tag as follows:

</SCRIPT>
The event handler for the “To Magazine” button is the

“SwivelToMag()” function. This function simply sends the two CI
commands to modify the outputs A0.1 and A0.2.
function SwivelToMag()
{
//Turn bit 1 ON, Bit 2 OFF
CISend2(‘A0.2’,’0’, 'A0.1', '1');
return;
}
5-11
Similarly, the event handler for the “To Next” button is the
“SwivelToNext()” function. This function simply sends the two CI
commands to modify the outputs.
function SwivelToNext()
{
//Turn bit 2 ON, Bit 1 OFF.
CISend2(‘A0.1’,’0’, 'A0.2', '1');
return;
}
To try this:
This Web page was saved as “hmi1.htm.” If it is already on the “B”
virtual drive of FC34 controller then point your browser to the
controller network address followed by the “hmi1.htm” file name to
run the page. For example:
http://199.237.83.68/hmi1.htm (use your own IP address)
If the page (and/or the CISend.js Java file) is not on the FC34 already,
you need to first download it to the controller using the FST software
(Chapter 4). Then, you can run it using the proper URL as explained
above.
5-12
Remote operation of
the distribution
station
In this section we will expand the Web page that was designed to
control the swivel arm (hmi1.htm). The new Web page will enable
control of each actuator in the station as well as remote starting and
stopping of the station.
Before you can test these HMIs you must download DIST_REM
project to the FC34. This project contains two flags that are used in
parallel to the actual START and STOP buttons on the station. This
way the station can receive START or STOP commands either from the
console buttons or from an HMI. The modified statements of the main
project program are shown below:
STEP loop
IF ( START 'Start button
OR RemSTART ) 'Remote Start
AND N MagEmpty 'Magazine Empty (NC)
IF ( N STOP 'Stop button (NC)

OR RemSTOP )
RESET RemSTOP
RESET RemSTART 'Remote Start
IF NOP
THEN JMP TO loop
MAIN Program on FC34 controller
Where RemSTART (flag F1.0) and RemSTOP (flag F1.1) were added in
parallel to the console buttons START and STOP. Also, whenever
either one of the STOP buttons is pressed, the RemSTART and
RemSTOP flags are cleared.
As we have done before in the design of the previos HMI, we will use
the “CISend()” function and push buttons with JavaScript event
handlers to build the page. The final HMI (hmi2.htm file) will look like
the following:
5-13
hmi2.htm Web page
In this design we will use an HTML table with two rows and four
columns. The first row will have the “Swivel arm”, “Feeder”,
“Vacuum” and “Station” titles for each column. The second row
contains two buttons in each column. Stacking buttons as seen in this
interface is not possible unless they are embedded in a table.
The following pages contain complete listing of the new HMI. The file
is called hmi2.htm. To try it, type the IP address of your FEC34
followed by hmi2.htm file name as the URL to open. If the hmi2.htm
and the CISend.js files are not already on the FEC34, you will have to
first download them (refer to Chapter 4).
5-14
<HTML>
<HEAD>
<TITLE>Remote control of MPS Distribution Station</TITLE>
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT> 1
</HEAD>
hmi2.htm file listing (continued on next page)
5-16
<BODY bgcolor="#CCCC99">
<H2 align="center"><IMG src="FestoLog.gif" width="110" height="19"></H2>
<H2 align="center"><FONT color="#0000FF" face="Verdana, Arial, Helvetica, sans-serif" size="3">MPS
Distribution Station</FONT></H2>
<H2 align="center"><FONT color="#0000FF" face="Verdana, Arial, Helvetica, sans-serif" size="3">Remote
Control</FONT></H2>
2
<TABLE width="52%" border="1" align="center">

<TR>
<TD width="21%" bgcolor="#CCCCCC">
<DIV align="center"><B><FONT face="Verdana, Arial, Helvetica, sans-serif" size="2"
color="#0000CC">Swivel arm</FONT></B></DIV>
</TD>
<DIV align="center"><FONT face="Verdana, Arial, Helvetica, sans-serif" size="2"
color=”#CC0000”>Feeder</FONT></B></DIV>
</TD>
<DIV align="center"><FONT face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#009900"><B>
Vacuum</FONT></B></DIV>
</TD>
<DIV align="center"><FONT face="Verdana, Arial, Helvetica, sans-serif"
size="2"><B>Station</B></FONT></DIV> 3
</TD> </TR>
<TR>
<TD width="21%" bgcolor="#9999FF">
<INPUT type="button" name="btnMagazine" value=" Magazine " , onClick="SwivelToMagazine()">
<INPUT type="button" name="btnNextStation" value="Next Station" , onClick="SwivelToNext()">
</TD>
<TD width="17%" bgcolor="#FF0000">
<INPUT type="button" name="btnFeed" value=" Feed ", onClick="FeedPart()">
<INPUT type="button" name="btnRetract" value=" Retract ", onClick="FeederRetract()">
</TD>
<TD width="17%" bgcolor="#00CC00">
<INPUT type="button" name="btnVacuumON" value=" ON ", onClick="VacuumON()">
<INPUT type="submit" name="btnVacuumOFF" value=" OFF ", onClick="VacuumOFF()">
</TD>
<TD width="17%" bgcolor="#000000">
<INPUT type="button" name="RemSTART" value=" START ", onClick="RemSTART()">
<INPUT type="submit" name="RemSTOP" value=" STOP ", onClick="RemSTOP()"> 4
</TD> </TR>
</TABLE>
</BODY>
</HTML>
hmi2.htm file listing (continued from previous two pages)
5-17
We will look at the details of this HTML document starting from the
BODY section of the document first.
Section 2:
In this section we are using the <H2> heading style tag along with
the <FONT> tag to define font style, size and color for the titles that
appear at the top of the page. In addition, the <IMG> tag is used to
display the Festo logo image file.
Section 3:
This section defines the first row of the table. This row contains four
columns (cells) which are defined by the <TD> … </TD> tag
pairs. They display titles for each column of the table.
Section 4:
This section defines the second row of the table. This row contains
four columns (cells) which are defined by the <TD> …</TD> tag
pairs. Each cell contains two buttons defined by the <INPUT> tag
with its “type” attribute set to “button.” Each button has an onClick
event handler which are implemented as JavaScript functions in the
HEAD section of the document.
Section 1:
This section contains the JavaScript implementation of all event
handlers for the buttons on the page. When a button is clicked by the
user, its event handler function is executed.
The section starts with a call to the “CISend.js” file that contains the
definition of the “CISend()” and the “CISend2()” functions we use to
send commands to the FC34 over the network.
5-18
Advanced HMI for

remote operation of
the distribution
station
In this chapter so far, we learned how to design and implement a Web
page that can be used to remotely operate the distribution station. In
Chapter 4 we looked at how to design a Web page to remotely monitor
the states of the station.
Now, we will put these two Web pages together to finalize the design
of an advanced HMI that can be used to remotely operate and monitor
the distribution station. This HMI was saved as hmi3.htm. Since it
was designed simply by putting two previously designed Web pages
together, detailed explanation of the HTML document will not be
provided.
To try this HMI please enter the IP address of your FC34 followed by
“hmi3.htm” file name as the URL in your browser (assuming the
hmi3.htm file is already on the FC34).
hmi3.htm Web page
5-19
<HEAD>
</SCRIPT>

</SCRIPT>
</HEAD>
hmi3.htm file listing (continued on next two pages)
5-20
Control</FONT></H2>

<TR>
color="#0000CC">Swivel arm</FONT></B></DIV>
</TD>

color="#CC0000">Feeder</FONT></B></DIV>
</TD>

color="#009900">Vacuum</FONT></B></DIV>
</TD>

size="2"><B>Station</B></FONT></DIV>
</TD>
</TR>
<TR>
<FORM>
<INPUT type="button" value=" Magazine " onClick="SwivelToMagazine()">
<INPUT type="button" value="Next Station" onClick="SwivelToNext()">
</FORM>
</TD>
<TD width="17%" bgcolor="#FF0000">

<FORM>
<INPUT type="button" value=" Feed " onClick="FeedPart()">
<INPUT type="button" value=" Retract " onClick="FeederRetract()">
</FORM>
</TD>
<TD width="17%" bgcolor="#00CC00">

<FORM>
<INPUT type="button" value=" ON " onClick="VacuumON()">
<INPUT type="submit" value=" OFF " onClick="VacuumOFF()">
</FORM>
</TD>

<FORM>
<INPUT type="button" value=" START " onClick="RemSTART()">
<INPUT type="submit" value=" STOP " onClick="RemSTOP()">
</FORM>
</TD></TR></TABLE>
<p>
hmi3.htm file listing (continued on next page)
5-21
<! -- Monitoring section from Chapter 4 -- >

<TR>

</TD>

<H3 align="center"><FONT color="#336633">Outputs</FONT></H3>
</TD>
</TR>
<TR>

(E0.4) :<FSTCI DE0.4>
(E0.7) :<FSTCI DE0.7>
(E1.2) :<FSTCI DE1.2>
</FONT></PRE>
</TD>

(A0.5) :<FSTCI DA0.5>
(A0.6) :<FSTCI DA0.6>
(A0.7) :<FSTCI DA0.7>
</FONT></PRE>
</TD>
</TR>
</TABLE>
</DIV>
</BODY>
</HTML>
hmi3.htm file listing (continued from previous two pages)
5-22
5.4. Remote station configuration with an HMI

So far, we learned how to design and implement a Web page for remote operation and
monitoring of the distribution station over the Internet.
Now, we will look at how the station can be remotely configured to process a desired number
of pucks.
HMI design for

remote configuration
of the distribution
station
In this example, remote configuration of the station requires being
able to specify a desired number of pucks to be processed by the
station. After the pucks are processed the station stops.
The new HMI shown below includes:
• A text input field to enter the desired number of pucks,

• A button (SET) to send the desired number of pucks to the
FC34,
• START and STOP buttons to remotely start and stop the
processing cycle.
hmi4.htm Web page
5-23
The new HMI was created by modifying the previous one (hmi3.htm).
Therefore, only the modification, namely, text input field and the
associated event handler will be described in detail. The following
code segment is used to put the text input field and the SET button
on the page:

<INPUT type="text" name="NumOfPucks" maxlength="6" size="10">
<INPUT type="button" name="SetNoOfPucks" value="Set" ,
onClick="SetNumOfPucks()">
</TD>
The first <INPUT> tag is used to create the text input field by setting
the “type” attribute of the tag to “text.” Also, the text input object is
named “NumOfPucks.” This is like a variable name used to refer to
the text field object. The “size” attribute determines the width of the
text input object. The “maxlength” attribute is the maximum allowed
number of characters that can be typed into the text input object by
the user.
The second <INPUT> tag is used to create the SET button object by
setting the “type” attribute of the tag to “button.”
The user of the Web page will first click on the text input field and type
the desired number of pucks to be processed by the station. Then,
the SET button will be clicked. When the button detects the mouse
click, it will call the onClick event handler called “SetNumOfPucks.”
This is implemented in the <HEAD> section of the page as a JavaScript
function as follows:
function SetNumOfPucks(){
//This function puts the number of pucks to be processed
//in flagword 2 of FC34
//Send to MPS
CISend('MW2',NumOfPucks.value);
return true;
}
This function is used to send a CI command to the FC34 to set

Flagword 2 to the desired number of pucks to be processed. The user
entry for the desired number of pucks in the text input object is stored
in the “value” property of the object. This property is accessed using
the object’s name followed by a dot and the name of the property.
Therefore, the “NumOfPucks.value” argument in the CISend() function
call above is simply the number that was entered by the user in the
text input field.
A complete listing of the Web page is given below.
5-24

</SCRIPT>

</SCRIPT>
</HEAD>
Control</FONT></H2>

<TR>
color="#0000FF">No.
of Pucks to Process</FONT></B></DIV>
</TD>
size="2"><B>Station</B></FONT></DIV>
</TD>
</TR>
<TR>
<INPUT type="text" name="NumOfPucks" maxlength="6" size="10">
<INPUT type="button" name="SetNoOfPucks" value="Set" , onClick="SetNumOfPucks()">
</TD>
hmi4.htm file listing (Continued on next page)
5-25

<INPUT type="button" name="RemSTART" value=" START ", onClick="RemSTART()">
<INPUT type="submit" name="RemSTOP" value=" STOP ", onClick="RemSTOP()">
</TD>
</TR>
</TABLE>
<! -- Monitoring section from Chapter 4 -- >
<TABLE width="62%" border="1"align="center">

<TR>

</TD>

<H3 align="center"><FONT color="#336633">Outputs</FONT></H3>
</TD>
</TR>
<TR>

(E0.4) :<FSTCI DE0.4>
(E0.7) :<FSTCI DE0.7>
(E1.2) :<FSTCI DE1.2>
</FONT></PRE>
</TD>

(A0.5) :<FSTCI DA0.5>
(A0.6) :<FSTCI DA0.6>
(A0.7) :<FSTCI DA0.7>
</FONT></PRE>
</TD>
</TR>
</TABLE>
</DIV>
</BODY>
</HTML>
hmi4.htm file listing (continued from previous page)
5-26
PLC program
modifications for
remote station
configuration
The next step in remote configuration of the station involves slight
modifications in the PLC program of the station.
Using the new HMI we are able to remotely put the desired number of
pucks to be processed into Flagword 2 of FC34. Therefore, if we
modify the PLC program by:
• adding a counter that loads this value to its Preselect,

• incrementing the counter every time a puck is delivered to the
next station and,
• stopping the station cycle when the count is reached
we can remotely configure the station to process the desired number

of pucks determined by the user and stop.
The modified allocation list is given below where Flagword 2 (FW2) is

used to hold the desired number of pucks to be processed. Counter 1
(C1) is used to keep track of how many pucks were processed.
Counter 1 Preselect (CP1) contains the current count.
The modified project was saved as DIST_CFG.
5-27
CYCLE 1 STEP init

PROGRAM IF NOP
THEN LOAD V100
LOAD V2
LOAD FW2 'No. of pucks
TO C1Presel 'C1 preselect
SET Counter 'Puck counter
STEP start
IF N CycleRun 'Cycle running
2 OR MagEmpty 'Mag. Empty (NC)
THEN JMP TO end
OTHRW NOP
STEP ejector
3 IF NOP
THEN SET Eject 'Ejector cylinder
STEP
IF EjectOUT 'Ejector extended
4 THEN RESET Swi2Next 'Swivel to next
SET Swi2Mag 'Swivel to mag.
STEP
IF SwiAtMag 'Swivel at mag.
AND EjectOUT 'Ejector extended
5 THEN RESET VacOFF 'Vacuum OFF
SET VacON 'Vacuum ON
STEP
6 IF VacSensor 'Vacuum Sensor ON
THEN RESET Eject 'Ejector cylinder
STEP
IF
7 EjectIN 'Eject retracted
THEN RESET Swi2Mag 'Swivel to mag.
SET Swi2Next 'Swivel to next.
STEP
IF
8 THEN RESET VacON 'Vacuum ON
INC Counter 'Puck counter
STEP
IF
N VacSensor 'Vacuum Sensor ON
AND Counter 'Puck counter
9 THEN RESET VacOFF 'Vacuum OFF
JMP TO start
IF N Counter 'Puck counter
STEP end
10 IF NOP
5-28
MAIN STEP init

PROGRAM IF NOP
1 SET Swi2Next 'Swivel to next
RESET Swi2Mag 'Swivel to mag.
STEP loop
IF ( START 'Start button
OR RemSTART ) 'Remote Start
AND N MagEmpty 'Mag. Empty (NC)
2 RESET RemSTART 'Remote Start
IF ( N STOP 'Stop button (NC)

OR RemSTOP ) 'Remote Stop
IF NOP
THEN JMP TO loop
The main program starts when either the console START button is
pressed or the START button on the HMI is pressed. Note that in step
2 the RemSTART bit is reset as soon as the program starts. This
allows the HMI start button to act like a momentary push button. If
this statement is omitted, the RemSTART bit remains ON (like a
latched physical START button) and keeps the station running
continuously.
When the cycle is started execution jumps to the cycle program. In

the first step we load the value in Flagword 2 (FW2) into the Preselect
of counter 1 (C1). Remember that the value in Flagword 2 is the
desired number of pucks to be processed by the station and it is
placed in there remotely from the HMI. This step is finished by
starting the counter.
The station goes through its processing cycle up to step 8. In this step
a puck is delivered to the next station and the counter is incremented.
In step 9 we check to see if the counter value is equal to the desired

number of pucks to be processed. If they are equal, the cycle ends.
Otherwise, the cycle is repeated to process the next puck.
To try this HMI and the PLC program first make sure that DIST_CFG
project and the hmi4.htm files are downloaded to the FC34 (if not,
refer to Chapter 4 for details on downloading to FC34). Then type the
IP address of your FC34 followed by hmi4.htm file name as the URL to
open in your Web browser.
5-29
6. Remote Monitoring with Excel
Chapter 6
Remote Monitoring
With Excel
Summary
This chapter describes design of an Excel spread sheet for remote
process monitoring of the Distribution station using Dynamic Data
Exchange (DDE). First, it introduces the IPC Data Server and its
configuration. This is followed by explanations of how the station
control program should be modified. Finally, it describes how to
design an Excel sheet and link it to the station through the DDE
mechanism to remotely monitor the process.
Table of Contents
6.1 Dynamic Data Exchange (DDE) with IPC Data Server…..…………. 6-1
6.2 IPC Data Server installation and configuration…….……………….. 6-2
Installation 6-2
IPS Data Server configuration 6-2
Controller operands available through the IPC Data Server 6-4
6.3 Microsoft Excel spread sheet for remote process monitoring..…. 6-6
PLC program modifications 6-6

Excel spread sheet design 6-7
Remote process monitoring with Excel 6-14
Resources required
Software
• FST 4.0
Files
• DIST_CFG project files
• DIST_DDE project files
• CISend.js file
• ExcelRemoteMonitor.xls
• FestoLog.gif
Hardware
• MPS Distribution station with FEC FC34 controller
6.1. Dynamic Data Exchange (DDE) with IPC Data Server

Dynamic data exchange (DDE) is a mechanism supported by Microsoft Windows applications
that enables two applications to "talk" to each other. This is accomplished using a shared-
memory technique.
Two applications, called DDE Client and DDE Server, exchange information by engaging in a
DDE conversation. The client application requests information from the server and sends
information and commands to it. The server application serves the needs of the client
application by returning information, accepting information, and carrying out commands.
The FST Software CD-ROM contains a DDE Server application called IPC Data Server. This
program can send and receive data from up to 48 IPC controllers (such as FEC FC34) over the
network. In addition, being a DDE Server, it can have a DDE conversation with Windows
applications such as Excel. Note that not all Windows applications are DDE enabled.
IPC 1
(FEC34)
DDE Client
(Excel)
IPC Data
Server
IPC 2
TCP/IP network
IPC 3
Personal computer
Using the IPC Data Server with a DDE Client application such as Excel enables us to bring live
data from the FEC FC34 into the DDE Client. In this chapter, we will see how Microsoft Excel
can be used for remote process monitoring of the MPS Distribution Station. We will be able
to create an Excel chart that automatically updates based on live data coming from the
station over the network.
6-1
6.2. IPC Data Server installation and configuration

Installation
The IPC Data Server is on the FST Software CD-ROM. To install the
program:
1. Put the FST Software CD-ROM in the drive,

2. Click START button of Windows and choose Run.
3. Click Browse and navigate to the following directory to run the
Setup program:
E:\TOOLS\IpcDataServer\SETUP.EXE
4. Click OK to install the program.
IPC Data Server

configuration
To be able to use the IPS Data Server, we must configure it first. This
requires specifying the network IP address of the FEC FC34 controller
and selecting the types of data to be retrieved from the FEC FC34 by
the IPC Data Server.
1. Click START button of Windows and navigate to Programs, Festo

Software, IPC Data Server, and select IPC Data Server to start the
program. Note that this path assumes that default program
installation options were used.
2. Click Config menu and select IPCs (TCP/IP) item (the first one).
This will open the following configuration window:
6-2
This window allows you to individually configure the first 16

controllers out of the 48 possible that the server can communicate
with. In this chapter we will configure only IPC1 to be the FEC
FC34 in the MPS distribution station.
3. Click the Config button next to IPC 1. This will open the following
window:
4. Click the check box next to Enable to start configuration.

5. Enter the network IP address of your FEC FC34.
6. The IPC Data Server can obtain various data from the FEC FC34
such as input words, output words, registers, etc. In this chapter
we need to obtain Flag word 2 and Flag word 3. As any telegram
transports 256 words at a time the Get Flag Words from 0 is
entered so that all flag words from FW0 to FE255 will be available
in the DDE client. Make the necessary changes in the window so
that it looks like the following:
6-3
Note that your IP Address will be different.
7. Click OK to close this window. Then, close the IPC IP

Configuration (1-16) window.
8. Make sure that the FEC FC34 in the distribution station is ON. You
should see the number of packets sent and received on the IPC
Data Server window:
Controller operands
available through
the IPC Data Server
Once the IPC Data Server is configured and started, most of the FEC
FC34 controller operands can be accessed. The DDE conversation
protocol requires the following format:
ApplicatioName|TopicName!Operand
The application name and the topic name keywords are separated by
a vertical line character that is found in most keyboards on the same
key as the backward slash character. The topic name and the operand
are separated by an exclamation mark.
When configuring a DDE client application, such as Microsoft Excel, to

communicate with the IPC Data Server you must use IPC_DATA for the
6-4
application name and IPC_1 (or the correct number for the configured
controller in place of “1”) as the topic. For example, if you are
configuring an Excel spread sheet where a cell is to display input bit 2,
you need to enter the following formula for that cell:
= IPC_DATA|IPC_1!E0.2
The following table lists all FEC FC34 controller operands available
through the IPC Data Server.
Table 6.1. Operands available through IPC Data Server

Operand (for FEC FC34) Description
Active 1 if controller is communicating with the
IPC Data Server
EW0 – EW1 Input words
E0.0 – E0.7 and E1.0 – E1.7 Input bits
AW0 Output word
A0.0 – A0.7 Output bits
R0 – R255 Registers
TV0 – TV255 Timer preselects
MW0 – MW9999 Flag words
M0.0 – M9999.15 Flag bits
6-5
6.3. Microsoft Excel Spread Sheet for remote process monitoring

In this section, we will see how Microsoft Excel can be used for remote process monitoring of
the MPS Distribution Station. Specifically, we will create an Excel chart that displays the
number of pucks processed by the distribution station based on live data coming from the
station over the network. This will be accomplished by initiating a DDE conversation between
Excel and the IPC Data Server. The Excel Spread sheet will be the DDE Client talking with the
IPC Data Server. The IPC Data Server will also manage communication with the FEC FC34
controller over the network.
PLC program
modifications
To use Excel along with the IPC Data Server for remote process
monitoring we have to make slight changes in the DIST_CFG PLC
program that was used in Chapter 5.
The first modification is in the allocation list. We need to add CW1

which holds the current puck count of Counter 1 (C1) as the pucks are
processed by the station.
The next modification is the addition of Flag word 3 (FW3) which will
hold the current puck count of Counter 1. Note that there is no
possibility to directly access CW1 from the IPC Data Server. Therefore,
it is necessary to transfer the puck count from CW1 into FW3 which
can be accessed from the IPC Data Server. The new allocation list is
as follows:
6-6
There are two changes made in the Cycle program Statement list. The
first change is in step 1 where the last line initializes the current count
for DDE to zero when the cycle is first started.
STEP init
IF NOP
THEN LOAD V100
LOAD V2
1 LOAD FW2 'No. of pucks
TO C1Presel 'C1 preselect
SET Counter 'Puck counter
LOAD V0
TO DDECount 'Cur. count DDE
The next modification is in step 8. In the original program after a puck

is delivered to the next station, the puck counter is incremented.
Now, the counter value (CW1) is also transferred to the Flag word 3 so
that it is available to be sent to the Excel sheet by the IPC Data Server.
STEP
IF
THEN RESET VacON 'Vacuum ON
8 SET VacTimer2 'Delay timer 2
INC Counter 'Puck counter
LOAD CurCount 'Cur. puck count
TO DDECount 'Cur. count DDE
The new project was saved as DIST_DDE.
Excel spread sheet

for remote process
monitoring
The purpose of the Excel spread sheet is to remotely monitor the
number of pucks processed by the station and update a bar chart. To
accomplish this, we will link two cells in Excel to two FEC FC34 Flag
words through the DDE conversation mechanism.
The PLC program uses Flag word 2 to store the desired number of
pucks to be processed. Flag word 3 stores the number of pucks
processed by the station so far. Now let’s see how the DDE link is
established:
1. Make sure that the IPC Data Server is running and configured as
explained in the previous section.
6-7
2. Make sure that the Distribution station is turned ON.

3. Start Excel.
4. Type the following text in cells A10 and A11:
5. Select cell B10 and type the following formula (as it appears
below):
=IPC_DATA|IPC_1!mw2
where
• IPC_DATA indicates the name of the IPC Data Server program,

• IPC_1 indicates the first IPC controller configured in the IPC
Data Server program (in this case the FEC FC34 of the
distribution station),
• mw2 is the Flag word 2.
Note that the IPC_DATA keyword and the IPC_1 keyword are
separated by a vertical line character that is found in most
keyboards on the same key as the backward slash character. The
IPC_1 keyword is separated from the mw2 parameter by an
exclamation mark. This format is required by the DDE protocol.
6-8
6. Select cell B11 and type the following formula (as it appears
below):
=IPC_DATA|IPC_1!mw3
This concludes linking the two cells to the distribution station

controller flag words. Next, we will create a bar chart to display the
data:
1. Click the Chart Wizard button on the Excel toolbar to start

inserting a chart in the sheet. This will open a series of windows
to collect information from you to make the chart. Select the first
chart type and click Next:
2. Click the Series tab to bring it forward:
3. Click Add to define the cell to be plotted as the first bar on the
chart. Then, type To process as the name for this data:
6-9
4. To specify the cell to be plotted first click in the Values text box.
Then, go back to the spread sheet and click on cell B10. This will
fill in the necessary formula automatically:
5. Click Add again to define the data to be plotted as the second bar
on the chart. Then, type Processed as the name for this data:
6-10
6. To specify the cell to be plotted second click in the Values text

box. Then, go back to the spread sheet and click on cell B11. This
will fill in the necessary formula automatically:
7. Click Next to open another window and type the chart title and Y-
axis label as MPS Distribution Station Process Monitor and
Number of Pucks, respectively:
8. Click Finish. This will put the chart on the sheet. Now position the
chart so that the window looks like the following:
6-11
9. Now let’s add a title and a logo and make some color changes to
make the page a bit more appealing as shown below:
ExcelRemoteMonitor.xls file
6-12
10. .Click the Drawing button on the Excel toolbar. This will pop up
another toolbar at the bottom of the screen. On this toolbar click
the Text Box button and draw a text box on the window as shown
below:
Click in the text box and type MPS Distribution Station Remote
Monitoring.
11. Highlight the text with the mouse and change its color to blue
using the Font Color button on the Excel toolbar. Also, change its
font size to 14 and center it.
12. To add the Festo logo (or any graphics from a file), click Insert
menu item and select Picture, From file. Then, navigate to the file
location and click Open on the dialog box to complete the task.
13. Now let’s change the background color. Click in cell A1. Hold the
SHIFT key down and click in cell E30. This will select all the cells
on the background. Right-click in the selected area and choose
Format Cells from the pop up menu. This will open the Format
cells dialog box. Click on the Patterns tab and select a light color.
Click OK.
14. Finally, let’s change the color of the bar that shows the number of
processed pucks on the chart. Right-click on the processed bar
(currently purple) and select Format Data Series from the pop up
menu. This will open a dialog box with multiple tabs. Click the
Patterns tab and select another color. Click OK.
15. You may have to resize the chart and the title text box to make
them look like those in the ExcelRemoteMonitor.xls file. Save
your work with a different file name.
6-13
Remote process
monitoring with
Excel
Now that we have an Excel sheet constructed and linked to the IPC
Data Server, we can test the system.
1. Make sure that the DIST_DDE project was downloaded to the FEC
FC34.
2. Make sure that the IPC Data Server is running and properly
configured.
3. Start Excel and open ExcelRemoteMonitor.xls file or the one you
just designed as explained above. A message will pop up
indicating that the workbook contains automatic links (the DDE
links) and will ask if you want to update the information. Click No.
4. Start your Web browser, point it to the FEC FC34 and run
hmi4.htm. Using the HMI specify the number of pucks to be
processed by the station as 5. Click SET.
5. Click START on the HMI to remotely start the station.
6. Switch over to the Excel file and watch the bar chart updating as
the pucks are processed. You may try to size the two windows so
that they fit your screen side-by-side as shown below:
Screen print of ExcelRemoteMonitor.xls and hmi4.htm files open side-by-side.
6-14

Mps Web Fc34 Manual

Загружено:

Сведения о документе

Исходное описание:

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Mps Web Fc34 Manual

Загружено:

Авторское право:

Доступные форматы

MPS Distribution Station

Project location on the hard drive 1-1

1.2 Development of station control program…………………………….. 1-3

Controller settings 1-3

1.3 Downloading station control program to FEC34……………………. 1-14

Downloading station control program 1-14

CI commands and FEC34 operands 2-1

2.2 Accessing CI with FST terminal………….…………………………….. 2-3

Using terminal emulator of FST 2-3

2.3 Reading and modifying controller registers…………………………. 2-5

Reading an entire register 2-5

Network terminologies 3-1

3.2 Network topologies……………..………….…………………………….. 3-3

Bus topology 3-3

3.3 TCP/IP………………………………………………………………………. 3-5

Modifying a project for remote access 4-1

4.2 Web page design with HTML for FEC34.…………………………….. 4-3

HTML tags 4-7

4.3 Simple Web page with embedded CI commands…..………………. 4-13

Basic Web page with embedded CI commands 4-13

4.4 Advanced Web page with embedded CI commands………………. 4-16

Design of an advanced Web page 4-16

HTML <FORM> tag and form elements 5-1

5.2 Processing user data……………………...…………………………….. 5-5

5.3 Remote station control with an HMI…………………..………………. 5-8

CISend JavaScript function 5-8

5.4 Remote station configuration with an HMI…………..………………. 5-23

HMI design for remote configuration of the distribution station 5-23

6.2 IPC Data Server installation and configuration…….……………….. 6-2

PLC program modifications 6-6

1.1 Starting a new project in FST 4 ………………………………………... 1-1

Project location on the hard drive 1-1

1.2 Development of station control program…………………………….. 1-3

Controller settings 1-3

1.3 Downloading station control program to FC34……………………. 1-14

Downloading station control program 1-14

1.1. Starting a new project in FST 4

• Source code for programs,

However, it is possible to set the project directory to a different one

When a new project is created, its name is used to create a

Enter Distribution Station Control as the comment. And click OK.

You have just started a new project called DIST_STA.

1.2. Development of station control program

Development of the station control program involves the following steps:

1. Double click the Controller Settings item in the Project Tree

To set the COM port for PC:

1. Select Preferences from the Extras menu.

2. Click on the Communication port tab.

3. Set Local COM Port to COM1 and Baudrate to 9600. (Here it is

2. To enter an assignment put the cursor somewhere inside the

3. Assign the name “Eject” to I/O address O0.0 as shown below:

The comment “Ejector cylinder” will automatically be displayed in

4. Following the procedure explained so far, enter the rest of the

The control program for the Distribution Station consists of two

• MAIN (Initializes the station and monitors front panel

Allocation List, MAIN and CYCLE programs corresponding to these

To create a new STL program:

1.3. Downloading station control program to FC34

Click Yes to compile and download the project. The following

Press the START button on the distribution station to run the

2.1 FST Command Interpreter (CI)………………………………….…... 2-1

CI commands and FC34 operands 2-1

2.2 Accessing CI with FST terminal………….…………………………….. 2-3