Ecava Sdn. Bhd.

IntegraXor HMI/SCADA
Version 4.2
Tutorial for Beginners

Document number: IGX-TUB-4495

Document date: 1 March 2013

Last revision date: 29 October 2015

Prepared by:

Zainal Abidin Razali

HTTP://www.integraxor.com

Copyright Ecava Sdn Bhd ©2009. Page 1 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Contents

Chapter 1: Introduction...........................................................................................................4
Product..............................................................................................................................................4
Purpose.............................................................................................................................................4
Dependencies....................................................................................................................................4
Industrial Automation Basics...........................................................................................................4
Chapter 2: Basic Knowledge..................................................................................................5
Programmable Logic Controllers (PLC)..........................................................................................5
Data & Communications..................................................................................................................5
PLC & IntegraXor............................................................................................................................5
Chapter 3: Project Overview..................................................................................................7
Candy Factory...................................................................................................................................7
New Project......................................................................................................................................7
Project Management.........................................................................................................................7
Running the Project..........................................................................................................................8
Quiz 1................................................................................................................................................9
Chapter 4: Device Configuration..........................................................................................10
3 Steps.............................................................................................................................................10
Quiz 2..............................................................................................................................................15
Chapter 5: Graphical Animation...........................................................................................16
Inkscape SAGE...............................................................................................................................16
Get Tag & Set Tag..........................................................................................................................18
Web Buttons...................................................................................................................................20
Slider Movement............................................................................................................................21
Visibility (Opacity).........................................................................................................................23
More Animations............................................................................................................................24
Quiz 3..............................................................................................................................................24
Chapter 6: Server-side Scripting..........................................................................................25
Javascript........................................................................................................................................25
My First Javascript.........................................................................................................................25
Quiz 4..............................................................................................................................................27
Chapter 7: Client-side Scripting...........................................................................................28
Many side scripting.........................................................................................................................28
Inkscape SAGE Script....................................................................................................................28
More scripts....................................................................................................................................29
Quiz 5..............................................................................................................................................29
Chapter 8: HTML..................................................................................................................30
HTML Basics..................................................................................................................................30
My First HTML..............................................................................................................................30
Project HTML.................................................................................................................................31
Diagram 8.3 : New Sub-Menu........................................................................................................32
Calling HTML from SVG..............................................................................................................32
More HTML...................................................................................................................................33
Quiz 6..............................................................................................................................................33
Chapter 9: Alarms................................................................................................................34

Copyright Ecava Sdn Bhd ©2009. Page 2 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Alarm Management........................................................................................................................34
Alarm Configuration.......................................................................................................................34
Quiz 7..............................................................................................................................................35
Chapter 10: Trending...........................................................................................................36
Process Trending............................................................................................................................36
Trend Configuration.......................................................................................................................36
Quiz 8..............................................................................................................................................38
Chapter 11: Database & More.............................................................................................39
Database Management....................................................................................................................39
Microsoft Access............................................................................................................................39
Microsoft SQL Server.....................................................................................................................40
Other Databases..............................................................................................................................40
End of Tutorial................................................................................................................................40
Quiz 9..............................................................................................................................................40
Chapter 12: Conclusion........................................................................................................41
Future of Industrial Automation.....................................................................................................41
Contact Us......................................................................................................................................41

Copyright Ecava Sdn Bhd ©2009. Page 3 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Chapter 1: Introduction
“THE INTERNET HAS BEEN THE MOST FUNDAMENTAL CHANGE DURING MY LIFETIME AND
FOR HUNDREDS OF YEARS. SOMEONE THE OTHER DAY SAID, “IT'S THE BIGGEST THING
SINCE GUTENBERG,” AND THEN SOMEONE ELSE SAID “NO, IT'S THE BIGGEST THING SINCE
THE INVENTION OF W RITING.” - RUPERT MURDOCH

Product
IntegraXor is a HMI/SCADA software with graphic animation, real time device connectivity,
alarm functions, database logging, trending and reporting as basic functions. It is designed
from ground up using web technologies to create a complete tool for building sophisticated
and intelligent real-time systems.

Purpose
The purpose of this document is to give instruction to the reader on how to get started with
IntegraXor. Various tools in IntegraXor will be explored to create a simulated candy
factory. The examples here are meant to give initial guidance to the reader on how to use
IntegraXor and to assist the reader to quickly create and implement projects based on their
own requirement.

Dependencies
Before we begin, we need to ensure we have the following software installed.
1) IntegraXor SCADA Server software
2) Graphic Editor Inkscape SAGE

If you do not have all of the above, please go to

HTTP://www.integraxor.com/download.html to download and install. It must be noted that
currently, IntegraXor 4.2 can only be installed on Microsoft Windows XP version or above
and the front-end must be on any modern browser (AS 5+, FX 20+, GC 20+, IE 8+).
IntegraXor's development tools are free. Note that, Adobe SVG Viewer is needed for client
that running on IE8. You can install and develop as many projects as you want. Licensing
is for run-time systems only.

Also, as a truly web based product, IntegraXor utilizes HTML and Javascript as the
programming language. If you are not familiar with any one of the script, do not worry. We
will show you the basics. Have confidence that many people know these 2 programming
languages and help is widely available on the Internet.

Industrial Automation Basics

If you have used a HMI/SCADA software or a PLC before, you may skip the next chapter.
If you are new to Industrial Automation, you will need some basic knowledge of industrial
automation, communication protocols and concept of tags/points which you will find in the
next chapter.

Copyright Ecava Sdn Bhd ©2009. Page 4 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Chapter 2: Basic Knowledge
Programmable Logic Controllers (PLC)
A programmable logic controller (PLC) is a microprocessor based device used for
automation processes, such as control of machinery on factory assembly line, or control of
boxing machines and conveyor lines. A key feature of a PLC is the facility for input/output
(I/O) which connect to sensors and actuators. Through these I/Os, a PLC can read limit
switches, analog process variables (such as temperature and pressure), and the positions
of complex positioning systems. A PLC can operate electric motors, magnetic relays or
solenoids, pneumatic or hydraulic cylinders or analog outputs.

They are one of the most versatile and common device used for industrial automation.
They monitor the inputs, solve logic of a user program and control the outputs.

Data & Communications

A PLC has a wealth of information inside. Information such as math calculations or input
state of a device are stored in PLC's data area. Data areas are internal memory registers
of a PLC, each with it's own memory address. These data are accessible from external
systems via communication ports built in a PLC. Usually, a PLC will have a 9-Pin serial
RS232 port with Modbus included as one of the communications protocols. Optionally,
they may have Ethernet ports or various filed buses such DeviceNet or Profinet. Example:
the running state of a motor is available to the PLC via input 1. Depending on the make of
the PLCs, this input 1 may be addressed by the Modbus address 10001.

PLC & IntegraXor

IntegraXor is a tool to develop HMI/SCADA applications. IntegraXor has the
communication drivers to exchange data directly with a PLC via it's communication port. In
the above example, in order to get the motor running state data into IntegraXor, we need
to create the port, the PLC and then a digital tag with corresponding tag address 10001.
IntegraXor will poll the PLC via the communication port and update the tag with the real-
time information.

Apart from PLCs, IntegraXor can also communicate with various other devices such as
robots and drives that has the supported communication protocol and port.

IntegraXor also has tools to draw graphical user interface for the user. Example: A simple
tank can be represented by a rectangle and animated with the rising and falling of the tank
level. Alarms can be configured using IntegraXor for early detection and warning.
Database logging, trends and many other tools are also available in IntegraXor. The
flexibility of IntegraXor and the use of web technologies allows limitless possibilities for
your automation system on a global level.

Copyright Ecava Sdn Bhd ©2009. Page 5 of 41 Revision: 4.20

 Ecava Sdn. Bhd.

Diagram 2.1 : IntegraXor basic network architecture

Here's a screen shot of an application developed with IntegraXor.

Copyright Ecava Sdn Bhd ©2009. Page 6 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Chapter 3: Project Overview
Candy Factory
In this tutorial, we will create a new IntegraXor project and develop an application to
monitor and control a simple candy factory.

New Project
Click Start > Programs > Ecava > IntegraXor Editor. This will open IntegraXor's Project
Editor or in short, 'PE' where you will configure the server side of the application.
With the PE, click File > New Project.

Diagram 3.1 : Creating a new project with IntegraXor Editor

Name our project, 'candy'. You may create it in any directory. For this tutorial, we will
create a new directory called My Projects in /%Users%/My Documents as the location of
our Candy project.

Project Management
In the project install location, a new folder called 'candy' will be created. You will find the
project file, candy.igx file here along with several other files and directories. This 'candy'
folder will be your project folder. You may copy this folder to do backups or to distribute the
project.

The PE interface is divided into several tabs. Among them are General, Timer, Tag,
Database, Security, Alarm, Script, Screen and others.

Copyright Ecava Sdn Bhd ©2009. Page 7 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
After creating a new project, the first tab you will see is the General tab. In this tab, check
to ensure that our new project name is configured in the Project ID entry.

Diagram 3.2 : Candy project General properties

Running the Project

From the PE, click on 'Run Project' or you hit F5. IntegraXor server will run first. IntegraXor
server provides a window into the processes running behind IntegraXor. A great place to
check if everything is working fine.

Diagram 3.3 : IntegraXor server

Copyright Ecava Sdn Bhd ©2009. Page 8 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Then, Internet Explorer will open with the following website address:
HTTP://localhost:7131/Candy/. You might have noticed that this is configured in the Post-
launch under the General tab.

Diagram 3.4 : IntegraXor project on Internet Explorer

IntegraXor has a built-in web server that delivers web pages such as index.html. It uses
port 7131. Go ahead and view your project over the intranet and internet or in other words,
you now view the project as remote client. Ensure to replace localhost with your
appropriate (server) IP address.

Quiz 1
1. Please create a new project named after your name initial (eg. Zainal Abidin Razali as
zar) in My Documents > IntegraXor Projects folder. Run the project, print screen the
Overview page and save as 01Overview.png in My Documents > IntegraXor Projects >
<your initial> > *Quiz folder. *Note your must create a new folder named Quiz in your
project folder.

2. Try configure your PC as remote client to the PC next to you. Print screen the Overview
page and save as 02Remote.png in My Documents > IntegraXor Projects > <your initial> >
Quiz folder.

Copyright Ecava Sdn Bhd ©2009. Page 9 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Chapter 4: Device Configuration
3 Steps
Before we can do animation, we need to know where our data is coming from. IntegraXor
gets data from devices by polling it through communication ports. This configuration is
divided into 3 simple steps. We do not have an actual PLC for this tutorial. However, let's
say we have a PLC controlling the whole candy factory. This PLC, with Modbus device
address 1, is connected to the computer via a Serial RS232 port (COM2).

Step 1: Create a Port

Port is the first channel to determine in accessing external devices. A port can be a serial
communication port, or it can be Ethernet port, or any physical connectivity or third party
software-virtual connectivity to external devices.
Parameter Description
Enable On (Checked) / Off (Unchecked)
Name A name to be referred in Device table
Description Additional description
Address Physical port address
Interval Delay between devices in serial link or slow devices.

By default, COM1 and Ethernet-localhost port (ETH01 & OPC) has been created. Here, we
will create a new serial RS232 port called COM2. Expand Tag tab and click on the IO
Driver to open Port field to add a new port COM2, disable the others and save it.

Diagram 4.1 : Create New Port

Copyright Ecava Sdn Bhd ©2009. Page 10 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Step 2: Create a Device
One or more devices can be connected to the HMI/SCADA system via one defined Port.
This Device table will define the setting/behavior of the connected device(s).

Parameter Description
Enable On / Off
Name Any unique name that will be used to refer in Tag table
Description Additional description
Timer Define data pooling rate from device
Driver This column specifies the communication protocol used. Select (drop-down menu)
accordingly for the associate communication protocol.
Path String type node address
Address Numerical type node address
Parameters Driver parameters setting change accordingly to Protocol selected. Please refer to
(Driver) supplier device manual for more information about the connection parameter.

Click on COM2 to open Device field to add a new device. Give it a name, say “PLC02”. We
will use Modbus RTU as the communication protocol with 19200 baud rate and even parity
bit. Assign SEC01 as the polling frequency. After complete the configuration, save it.

Diagram 4.2 : Create New Device

Copyright Ecava Sdn Bhd ©2009. Page 11 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Step 3: Create Tags
Tag is common terminology in general industry for variable in programming term. There
are three type of tags in IntegraXor system, there are External IO (xio), Virtual IO (vir) and
Runtime (run). Both External IO and Virtual IO tag are required to be entered into Tag
table, moreover, tag that associates with Device is considered as External IO, otherwise is
called Virtual IO. Tag used during runtime that without being define in Tag table is called
Runtime tag.

Parameters Descriptions
Enable On / Off
Name A unique name
Description Additional description
Data type - boolean - int16 - int32
- int64 - int8 - uint8
- real32 - real64 - string
- uint16 - uint32 - uint64
Batch Batch indicating a chunk of data for one device shall be read or write together if
they are contiguous in data address arrangement.
Address Data address for numerical type
Path Data address for string type
Log Database I.D defined earlier. Enter if trending required.
Retentive Database I.D defined earlier. Enter if automatic save data required.
Read Role/Level Determines the tag's security role/level for reading.
Write Role/Level Determines the tag's security role/level for writing.
Default A default initialized value when server startup
Attribute The attributes for the tag behavior are as below:-
- Input tag
- Write only tag
- Log value on change (only applicable if Log parameters are defined)

In the last step, we click on 'PLC02' to open Tag field and add tags to map to the data
areas in the PLC. Memory addresses are different for each make of PLC.

Typical Modbus address ranges are as follows:

Description Modbus address
Coils Status (Digital Output) 00000-09999
Inputs Status (Digital Input) 10000-19999
Input Register (Analog Input) 30000-39999
Holding registers (Analog Output) 40000-49999

Copyright Ecava Sdn Bhd ©2009. Page 12 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Note that Batch in the Tag configuration must be greater than 0.

Diagram 4.3 : Tags configuration

Since we will not be using an actual PLC in this training, we will be using virtual tags as a
replacement. Virtual tags are internal tags that are not tied to any physical I/O. You can
use these tags as variables to contain data. These virtual tags do not count to the final
licensed I/O count so you can create as many virtual tags as you want.

Click on COM2 to and disable the device (PLC02). IntegraXor will not poll devices
configured in this port if this check box is disabled. Or you can remove the port by right
click on it and select remove option. Under Tag tree, click on Virtual and create the
following tags which will be used in the following tutorial:

Tag name Data type

level_chocolate real32
level_syrup real32
level_vanilla real32
level_strawberry real32

The other settings can remain as default.

Copyright Ecava Sdn Bhd ©2009. Page 13 of 41 Revision: 4.20

 Ecava Sdn. Bhd.

Diagram 4.4 : Virtual Tags

Run your project. In IntegraXor server, you can select one of the above tags in the Tag
field for example 'level_syrup', click on Get to see it's current value. You can enter a new
value, say 10.5 and click on Set to change the value. You can also add the tag to your
watch list to monitor the value.

Diagram 4.5 : Watch tags

Copyright Ecava Sdn Bhd ©2009. Page 14 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Quiz 2
1. Open the IntegraXor Editor. Create a proper IntegraXor server connection to item list
below:
Section: PLC SIM IO Quiz
Connection Details
Protocol: Modbus TCP/IP
IP: 127.0.0.1
Device ID: 1

IO List
Item Description Modbus Address
A Operator Interface
1 System Fault Alarm Beacon 00001
2 Auto/Manual Select Switch 10004
B Pump Control
1 Pump Start/Stop Command 00002
2 Pump Run/Stop 10005
3 Pump Trip 10006
C Valve Control
1 Valve Open/Close Command 00004
2 Valve Fully Open 10009
3 Valve Fully Close 10010
D Instrument
1 Reservoir Tank Level (0 - 10000m3) 40001
2 Reservoir Tank pH (0 – 14 pH) 40002
3 Reservoir Tank Outlet Flow Rate (0 - 1000m3/h) 40003
4 Reservoir Tank Outlet Flow Totalizer (Long) 40004

After you finished entering all the items above, print screen your PE and save; Port table
as 03Port.png, Device table as 04Device.png and Tag table as 05Tag.png in My
Documents > IntegraXor Project > <your initial> > Quiz folder.

Copyright Ecava Sdn Bhd ©2009. Page 15 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Chapter 5: Graphical Animation
Inkscape SAGE
Using Windows Explorer, go to My Documents > My Projects > candy. Right click on
overview.svg and open it with application called Inkscape. Inkscape SAGE is the tool for
drawing graphics and configuring animation based on your tags.

In Inkscape, select the Rectangle tool (F4) by click on icon. Drag to create a rectangle
in overview.svg. Click on Select tool (F1) by click on icon to return to selection mode.

Diagram 5.1 : Inkscape SAGE draw rectangle

This rectangle will be used to animate a tank's fill level in your candy factory. You can
change the color and border style of your tank level by selecting menu Object > Fill and
Stroke (right click and select Fill and Stroke... or hit SHIFT+CTRL+F)

Next, right click on the tank and select Object Properties (select menu Object > Object
Properties of hit SHIFT+CTRL+O). Select 'Bar' animation, enter app.currentTime.second in
Tag field. This tag called app.currentTime.second is an Application (server's internal) tag
which contains the time value of seconds. Enter 0 in the Min field and 59 in the Max field.
Click OK. Save (select menu File > Save or hit CTRL+S) overview.svg.

Copyright Ecava Sdn Bhd ©2009. Page 16 of 41 Revision: 4.20

 Ecava Sdn. Bhd.

Diagram 5.2 : Object Properties – Bar Animation

Return to Internet Explorer, hit F5 to refresh (after running the IntegraXor project). You will
see the level of your tank changing every second. Congratulations! You have successfully
created a basic graphic animation screen in IntegraXor.

You can draw another rectangle to show the outline of the tank. Use gradients in the Fill
and Stroke to create a 3D effect. Change the thickness and style of the object's outline /
stroke. Try changing the opacity (visibility) and see the effects.

Now, create 4 tanks for chocolate, strawberry, vanilla and syrup. Use the tags you created
earlier and configure Bar animation for each tank with Min 0 and Max 100.

Copyright Ecava Sdn Bhd ©2009. Page 17 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Get Tag & Set Tag
Apart from graphic visualization of the level, we also need some text visualization. The
Text tool is easy to find. On the left, select the Text tool (F8) with a Capital A as an icon.
Click on an empty area in overview.svg and key in 'Vanilla'. Now, you can label the rest of
your tanks.

Diagram 5.3 : Adding Text

We also need to display the tank level in figures. Create another text box and enter #.## as
text. Open Object Properties, select 'Get' animation and enter level_vanilla in the tag field.
Click Apply.

Diagram 5.4 : Get Tag

Copyright Ecava Sdn Bhd ©2009. Page 18 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Select 'Set' animation and enter level_vanilla. Click OK and save overview.svg. Refresh
your Internet Explorer to see the changes. Try to click on the text and enter a real/float
value.

Diagram 5.5 : Set Tag

Tip: #.## formats the display of your data. Click on the text to edit. Add '#' after decimal
point; #.###, refresh your Internet Explorer and you will see the different. By adding '#'
after decimal point in the text, it will give an effect how many decimal places you want to
display in your screen.

Copyright Ecava Sdn Bhd ©2009. Page 19 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Web Buttons
Buttons are used widely in automation. Start, Stop, Run, Open and Close are some of the
more common uses of a button. Here, we would like to create a button to top-up our tank
to 100. Draw a rectangle. Open Object Properties, select 'Set' animation and enter
level_vanilla. In the Source field, enter 100. Use the text tool to name your button, 'Top-up'.
Save and refresh. Click on the button to set it to 100.

Diagram 5.6 : Button Action

Tip: There are numerous tutorials on the Internet on how to draw Web 2.0 buttons with
Inkscape. 3D, gel and shadow effects make the overall look of your graphics more
pleasing. Do a search for “Inkscape button tutorial”.

Copyright Ecava Sdn Bhd ©2009. Page 20 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Slider Movement
For a straight line linear movement between 2 points, you can use the slider animation.
First, create an object. Here we will draw a piece of candy using the Spiral tool ( icon /
F9) and Straight line tool ( icon / SHIFT+F6). Press shift and click on both objects.
Select menu Object > Group (or hit CTRL+G).

Diagram 5.7 : Group objects

Next, right click on the grouped object and select Object Properties. In the Slider tab, enter
app.currentTime.second in the tag field, Min 0 and Max 59. Click OK.

Diagram 5.8 : Slider Animation

Copyright Ecava Sdn Bhd ©2009. Page 21 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Click on the grouped object, select Edit > Clone > Create Clone (or hit ALT+D). A clone
object will be created right on top of the original. Click on top (clone) object and place it at
the Max destination. This piece of candy will travel from the original position to the Max
position based on seconds time. Save and refresh your Internet Explorer.

Diagram 5.9 : Clone object

Tip: If you modify the original object, all cloned objects will be automatically modified as
well. However, ungroup action (CTRL+U) will remove all group animation. In order to keep
the group animation, right click on the group and select Enter Group. Now, you can select
the individual items for modification.

Copyright Ecava Sdn Bhd ©2009. Page 22 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Visibility (Opacity)
Another way to make an object move is to make it appear in the path of the movement.
Let's try this out by making a mixing tank. First, draw a tank. Then, we create 4 sets of
graphics with the agitator arms in 4 different positions like this.

Diagram 5.10 : Stirrer Movement by Opacity

Next, return to PE and create the following virtual tags.

Tag name Data type

agitator_posA boolean
agitator_posB boolean
agitator_posC boolean
agitator_posD boolean

Return to overview.svg, right click on the first set of agitator arms and select Object
Properties. Select Opacity animation and enter agitator_posA in the tag field. Maximum set
to 1 and minimum set to 0. Do the same with the other 3 set of graphics with tags
agitator_posB, agitator_posC and agitator_posD. Next, hold down the Shift key and click
on all 4 set of agitator graphics. This selects all 4 sets together. Alternatively, you can click
and drag your mouse across all 4 graphics. With all 4 sets selected, go the Objects menu
and select 'Align and Distribute' (or hit CTRL+SHIFT+A). Align all 4 horizontally and
vertically. This action overlaps the 4 graphics exactly on top of each other. The effect we
want is agitator position A to appear first then disappear. As soon as agitator position A
disappears, agitator position B appears and repeated for agitator position C and D. In
order to do this, we need the tags to alternately set to 1. We will do this with a script.
Proceed to the next chapter.

Copyright Ecava Sdn Bhd ©2009. Page 23 of 41 Revision: 4.20

 Ecava Sdn. Bhd.

Diagram 4.11 : Alignment of objects

More Animations
Try the Rotate and Color animations. Draw an object and use app.currentTime.second as
tag. You will be able to see the animation every second. Refer to IntegraXor's User Guide
for the complete listing of available animations.

Quiz 3
1. With your imagination and engineering knowledge, please draw in My Documents >
IntegraXor Projects > <your initial> > overview.svg a simple reservoir tank system referring
to IO list given in Quiz 2.

In the screen you must show at least the tank level animation, pump run/stop/trip status
and valve fully open/fully close status. Run your server, print screen Overview screen and
save as 07Mimic.png in My Documents > IntegraXor Projects > <your initial> > Quiz folder.

Copyright Ecava Sdn Bhd ©2009. Page 24 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Chapter 6: Server-side Scripting
Javascript
The most popular scripting language for the web is Javascript. It is easy to find Javascript
support and examples on the Internet. It is also a very easy, flexible and powerful
language to learn. In this section of the tutorial, you will be creating your first Javascript for
IntegraXor.

My First Javascript
In the PE, click on Script tab. Add a new script and enter the following details.

Diagram 5.1 : Create Server-side Script

Save it and automatically a JavaScript named run.js will be created in your project folder.

Copyright Ecava Sdn Bhd ©2009. Page 25 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Click on the newly created 'run' script to open it. Copy and paste the following into your run
script. Save the configuration.
//agitator rotation animation
var ctr = getTag( 'agitator_pos');
if (ctr < 4) {
ctr++;
}
else {
ctr = 1;
}
setTag( 'agitator_pos', ctr);

switch (ctr) {
case 1:
setTag( 'agitator_posA', 1);
setTag( 'agitator_posB', 0);
setTag( 'agitator_posC', 0);
setTag( 'agitator_posD', 0);
break;
case 2:
setTag( 'agitator_posA', 0);
setTag( 'agitator_posB', 1);
setTag( 'agitator_posC', 0);
setTag( 'agitator_posD', 0);
break;
case 3:
setTag( 'agitator_posA', 0);
setTag( 'agitator_posB', 0);
setTag( 'agitator_posC', 1);
setTag( 'agitator_posD', 0);
break;
case 4:
setTag( 'agitator_posA', 0);
setTag( 'agitator_posB', 0);
setTag( 'agitator_posC', 0);
setTag( 'agitator_posD', 1);
break;
}

We will briefly explain the script. The first line in this Javascript is a remark. This is done by
adding // in at the beginning of a line. Anything in the line after this // will not be executed
and considered as a remark. The script then gets the value of tag agitator_pos and stores
the value in a variable. Next, we add this value by 1. By calling this script every second, we
will have changing values of 1,2,3 and 4 every second. The next part of the script sets the
tag value of agitator_posA to 1 if value of agitator_pos is 1. The tag value of agitator_posB
to 1 if the value of agitator_pos is 2. Similar for C and D.

Ensure that Enable is selected or this script will not run. In the Trigger field, select SEC01
to run this script every second.

Copyright Ecava Sdn Bhd ©2009. Page 26 of 41 Revision: 4.20

 Ecava Sdn. Bhd.

Diagram 5.2 : Server-side Scripting

Finally, we restart the Scripts Task by going to IntegraXor server. Highlight 'Scripts' task
and select Tools > Restart Task (or hit F5). Refresh your Internet Explorer. Your candy
factory is now mixing a batch of candy.

Quiz 4
1. From your previous Quiz, create a server-side script to activate System Fault Alarm
Beacon when pump trip or tank level above 8000m3. Print screen your PE-shows the
newly added script and save as 08ServerScript.png in your Quiz folder.

Copyright Ecava Sdn Bhd ©2009. Page 27 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Chapter 7: Client-side Scripting
Many side scripting
The web defines server-side scripts as programs that are performed by the server in a
client-server networking. Common operations such as scaling and logging are generally
done at server-side. An advantage is that this lightens the work of clients.

The client-side scripts are generally referred to programs running at the client's side, the
web browser. User input may be different or environmental conditions are different such as
the time of day. An advantage is that this reduces unnecessary load on the server.

An important point to note is that client-side scripts will only run when activated at the web
browser. For scripts that are required to run with or without an open web browser, it is best
they are configured at the server-side in PE.

Inkscape SAGE Script

While server-side scripts are configured at the PE, client-side scripts are done at Inkscape
SAGE and HTML. Here, we will show you a simple script to top-up all tanks with a click of
a button.

Using Inkscape SAGE,open overview.svg in My Documents > My Projects > candy and
add a button using the Rectangle tool. Label it as 'Top-up all'. Right click the button and
select Object Properties. Select Script and enter the following script into the script field as
shows below.

Diagram 7.1 : Inkscape SAGE Script

Save the overview.svg file, refresh Internet Explorer and test your script.

Copyright Ecava Sdn Bhd ©2009. Page 28 of 41 Revision: 4.20

 Ecava Sdn. Bhd.

More scripts
In addition to the extensive Javascript resource on the Internet, you can refer to
IntegraXor's User Guide for a complete listing of IntegraXor specific commands such as
getTag and setTag.

Quiz 5
1. Then open My Documents > IntegraXor Projects > <your initial> > overview.svg, create
two command button to command pump start/stop and valve open/close using client-side
script method. Print screen your two command button Object Properties and save as
09Pump.png and 10Valve.png in your Quiz folder.

Copyright Ecava Sdn Bhd ©2009. Page 29 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Chapter 8: HTML
HTML Basics
HTML describes how a web browser should view a document. Writing a HTML file starts
by composing the text you want to display, then inserting any tags you want in the right
places. Do not confuse this tag with the data tags that you created in IntegraXor. HTML
tags begin with a < character and end with a > character. Tags tell a browser to do
something special, like show an image, make a link to another web page or show text in
italic. Learning HTML is also very easy.

My First HTML
Copy and paste the following into notepad. Then, save as hello.htm.

<html>
<head>
<title>Hello, world</title>
</head>
<body>
Hello, world.
</body>
</html>

Run hello.htm in Internet Explorer. In the above example, the <html> </html>, <head>
</head> and <body> </body> are called container tags. All displayed text, images,
hyperlinks, SVG and so on are contained between <body> and </body> tags.

Diagram 8.1 : First HTML

Copyright Ecava Sdn Bhd ©2009. Page 30 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Unlike the above example, IntegraXor cannot run by directly opening the html file in
Internet Explorer. IntegraXor's web page must connect to the IntegraXor server via port
7131 to get the data for display. Therefore, we have
HTTP://localhost:7131/candy/index.html as the web page address.

Now, take a look at your project's index.html. You can open it with notepad or Wordpad.
We have created this html as a template to produce the interface frames when project
runs.

Project HTML
In this tutorial, we will add one more tab on your web page that loads a new svg file called
newadd.svg to monitor the new section of our factory. First, use Inkscape SAGE to create
a new svg and save as newadd.svg. Open project with PE and click on Screen tree.

Right click on the pane and click New Menu to create a new tab called New Page on your
web page. Enter newadd.svg on the New Page tab. Save and refresh your Internet
Explorer (during project running). Try your modified web page. Click on New Page. Click
on Overview to return.

Diagram 8.2 : New Page

Copyright Ecava Sdn Bhd ©2009. Page 31 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Also you can add two or more sub-menu under same tab, you just need to right click on a
created menu and select New Sub-menu.

Lets add hello.htm we create earlier under New Page tab along with newadd.svg as sub-
menu. Also enter 'Candy Factory' in General-Title parameter.

Diagram 8.3 : New Sub-Menu

Then save and refresh your Internet Explorer again to see the different.

Calling HTML from SVG

Try this. Create a new button in overview.svg. Label it as 'Go to Packaging'. Right click and
select Object Properties. Select Open animation and enter package.svg in the source field.
In the Source Type drop down, select URL. In the Dest. Type drop down, select Current
Window. Add a page and svg file for this package.svg in PE. Save all and test your button.

Copyright Ecava Sdn Bhd ©2009. Page 32 of 41 Revision: 4.20

 Ecava Sdn. Bhd.

Diagram 8.4 : Open Animation

More HTML
Seen a nice web page and wonder whether you can do the same for your HMI/SCADA
system? The answer is YES. You can configure your HMI/SCADA system to play videos,
view camera feeds, view pdf and autocad files and even do email. The possibilities are
limitless.

Quiz 6
1. Modify your previous Quiz's files so that when IntegraXor runs, it will contains project
name as your name and four tab menu – shows;
• Main Menu - shortcut button/icon to Plant Overview, Alarm and Trending pages
• Plant Overview - the Reservoir Tank system mimic
• Alarm - alarm status page
• Trending - trending page
Print screen your Main Menu and Plant Overview page and save as 11Mainmenu.png and
12PlantOverview.png in your Quiz folder.

Copyright Ecava Sdn Bhd ©2009. Page 33 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Chapter 9: Alarms
Alarm Management
Alarms are useful to inform the user that a condition has exceeded the design limit.
Configuration of alarms are done in PE. The template project has an alarm page with all
the standard features included.

Alarm Configuration
Alarm configuration begins with the tag. Here, we will monitor the level_vanilla value. If our
level_vanilla goes below 20, we want to generate an alarm. We will compose a message
to alert the user of the condition. Our alarm message will be “Vanilla tank level LOW”.

In PE, select Process under Alarm tree. Add a new alarm and enter the following:
Enable Yes
Name va_lo
Message Vanilla tank level LOW
Tag Name level_vanilla
Trigger By Compare Value
Condition Less Than (<)
Limit 1 20

Diagram 9.1 : Alarm Configuration

Go ahead and add the alarms for the other tanks as well.

Copyright Ecava Sdn Bhd ©2009. Page 34 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Restart the Alarm task at IntegraXor server. Test the alarm by varying the value of
level_vanilla. Also, try to acknowledge the alarm and see the result.

Diagram 9.2 : Alarm Viewer

Quiz 7
1. Modify your previous Quiz's files so that when IntegraXor runs, it will display alarm
message when pump trip signal active and tank level above 8000m3. Print screen your
alarm page and save as 13Alarm.png in your Quiz folder.

Copyright Ecava Sdn Bhd ©2009. Page 35 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Chapter 10: Trending
Process Trending
A trend chart displays the direction changes of a value over time. Not every SCADA
application will require trending. Here, we will configure a simple trend chart to monitor a
new tag which we will create. The template project has an trend page with all the standard
features included.

Trend Configuration
We will begin by creating 2 tags to trend. Create the following tags in PE.
Name Data type Log
package_output int16 mdb
package_defect int16 mdb

We will need these values to be changing. Again, we use the seconds time to simulate
this. Copy the following script and paste it at the end of your run.js.

var myt = getTag( 'app.currentTime.second');

setTag( 'package_output', myt);
setTag( 'package_defect', 60-myt);

Next, go to Screen tab and edit plot.htm (Trend > Single Layer menu). You will find a
Javascript with a variable called var pen. Currently, the project's trend is configured with
several tag as example. We will overwrite (or append to) those configured trend with trend
of our new tags. Copy the following lines and paste In the plot.htm accordingly.

{
name: 'Package',
enabled: true,
unit: 'kg',
min: 0,
max: 100,
pens: [
{
name: 'Package Output',
tag: 'package_output',
format: '###'
},
{
name: 'Package Defect',
tag: 'package_defect',
format: '###'
}
]
}

Copyright Ecava Sdn Bhd ©2009. Page 36 of 41 Revision: 4.20

 Ecava Sdn. Bhd.

Diagram 10.1 : Edit plot.htm

Save plot.htm and restart your project. Click on Trend tab to view your trend chart.

You will find that data changes every 5 seconds. This is because the database mdb has
been configured to log every 5 seconds. You can scroll to view historical trends. Use the
zoom function to zoom in and out. You can also click on the start time and end time to
manually change the range.

Copyright Ecava Sdn Bhd ©2009. Page 37 of 41 Revision: 4.20

 Ecava Sdn. Bhd.

Diagram 10.2 : Trending

Quiz 8
1. Modify your previous Quiz's files so that when IntegraXor runs, it will shows 3 more
trending graph under Trend > Single Layer tab for:
• Level – Tank Level trending graph
• pH – Tank pH trending graph
• Flow rate – Outlet Flow rate trending graph
Save the trend page print screen pic as 14Trend.png

Copyright Ecava Sdn Bhd ©2009. Page 38 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Chapter 11: Database & More
Database Management
IntegraXor uses ODBC to log data. This ensures compatibility to a wide range of
databases from free Open Source databases to the large commercial databases such as
Oracle and Microsoft's SQL Server.

Microsoft Access
By default, the template project has been configured to log to an Access database called
dblog.mdb. In PE, select Database tab. There's one configuration called mdb which
connects to the dblog.mdb in the project folder. It is configured to log every 5 seconds.

In other sections of PE, you might find a “Log” field. Example: In our Alarm configuration,
we have selected the alarm to log to mdb.

In our Tag configuration, if we select “Log” mdb, we will log the data every 5 seconds to
the dblog.mdb. Go ahead and select mdb in the “Log” field for the level tags.

Diagram 11.1 : Log data to database

Run the project and vary the level data once in awhile. If you have Microsoft Access, you
can open the dblog.mdb and view the contents of 'log_xx' table (where 'xx' is the variable
number written to the database) to verify that your data has successfully been logged. If
you have OpenOffice, you can also connect to this database and view the contents.

Copyright Ecava Sdn Bhd ©2009. Page 39 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Microsoft SQL Server
For those who are familiar with Microsoft SQL Server, you can try to log IntegraXor's data
to this database. First, create a new database for IntegraXor in your SQL Server.

In PE, an MS SQL Server Express connection named '_mssql' has been configured as an
example. Alternatively, you can create your own ODBC and enter the connection string
details in PE.

Other Databases
Similar to Microsoft SQL Server, other databases can also be configured for logging. We
will continue to add sql scripts for various databases. Check with us if you need assistance
with any database.

End of Tutorial
This is the end of our tutorial. We will leave the user to explore the Security feature on his/
her own. Tip: Refer to our User Guide for details.

We are also working on further improvement to the product as well as adding more
features and modules. Check with us from time to time to find out about these
improvements. We also welcome suggestions on how to improve the product further.

Quiz 9
1. Make your final touch; remove all unwanted files, device, tags and alarm in your
previous Quiz's folder. Also try to improve your graphic and SCADA function.

If you done, call me for your course evaluation.

Copyright Ecava Sdn Bhd ©2009. Page 40 of 41 Revision: 4.20

 Ecava Sdn. Bhd.
Chapter 12: Conclusion
“ I N F O R M A T I O N T E C H N O L O G Y A N D B U S I N E S S A R E B E C O M I N G I N E X T R I C A B L Y I N T E R W O V E N.
I DON'T THINK ANYBODY CAN TALK MEANINGFULLY ABOUT ONE W ITHOUT THE TALKING
ABOUT THE OTHER.” - BILL GATES

Future of Industrial Automation

Companies must keep innovating to compete in this globalized world. Industrial automation
can no longer continue to play the role of guardians of machinery, production and safety.
Automation systems must easily adapt to changes just like how the PLC have been
designed for program and reprogram for high adaptability.

A website on the Internet changes very quickly to the current business needs and
requirements. Similarly, a HMI/SCADA system must also be able to adapt quickly to the
same needs. With IntegraXor, we hope to bring the HMI/SCADA technology closer to this
goal.

Contact Us

We welcome any comments or suggestions. Email us at:

[email protected]

Copyright Ecava Sdn Bhd ©2009. Page 41 of 41 Revision: 4.20