Professional Documents
Culture Documents
IntegraXor HMI/SCADA
Version 3.70
Tutorial for Beginners
Prepared by:
Wong Foot Yow
http://www.integraxor.com
Page 1 of 57
Revision: 2.2
Contents
Introduction...........................................................................................................................4
Product..............................................................................................................................................4
Purpose.............................................................................................................................................4
Dependencies....................................................................................................................................5
Industrial Automation Basics...........................................................................................................6
Basic Knowledge..................................................................................................................7
Programmable Logic Controllers (PLC)..........................................................................................7
Data & Communications..................................................................................................................7
PLC & IntegraXor............................................................................................................................8
Project Overview................................................................................................................10
Candy Factory.................................................................................................................................10
New Project....................................................................................................................................10
Project Management.......................................................................................................................12
Running the Project........................................................................................................................13
Sample Projects..............................................................................................................................15
Device Configuration..........................................................................................................16
3 Steps.............................................................................................................................................16
Supported Devices..........................................................................................................................23
Graphical Animation...........................................................................................................24
Inkscape SAGE...............................................................................................................................24
Get Tag & Set Tag..........................................................................................................................27
Web Buttons...................................................................................................................................30
Slider Movement............................................................................................................................31
Visibility (Opacity).........................................................................................................................33
More Animations............................................................................................................................35
Server-side Scripting..........................................................................................................36
Javascript........................................................................................................................................36
My First Javascript.........................................................................................................................36
Client-side Scripting............................................................................................................40
Many side scripting.........................................................................................................................40
Inkscape SAGE Script....................................................................................................................41
More scripts....................................................................................................................................42
HTML..................................................................................................................................43
HTML Basics..................................................................................................................................43
My First HTML..............................................................................................................................43
Project HTML.................................................................................................................................45
Calling HTML from SVG..............................................................................................................46
More HTML...................................................................................................................................47
Alarms................................................................................................................................48
Alarm Management........................................................................................................................48
Copyright Ecava Sdn Bhd 2011.
Page 2 of 57
Revision: 2.2
Page 3 of 57
Revision: 2.2
Introduction
TH E I N TE R N E T H A S B E E N TH E MO S T F U N D A M E N T A L C H A N G E D U R I N G MY L IF E T I M E A N D
F O R H U N D R E D S O F YE A R S . S O M E O N E TH E O TH E R D A Y S A I D , I T' S T H E B I G G E S T T H I N G
S I N C E G U TE N B E R G , A N D T H E N S O ME O N E E L S E S A I D N O , I T ' S TH E B I G G E S T TH I N G S I N C E
TH E I N V E N TI O N O F W R I TI N G .
- R U P E R T MU R D O C H
Product
IntegraXor is a web-based SCADA software with features such as SVG graphic
visualization & animation, real time device connectivity with Modbus, OPC and major
protocols, alarm functions, ODBC database logging, trending and reporting. 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.
Page 4 of 57
Revision: 2.2
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.
Page 5 of 57
Revision: 2.2
Page 6 of 57
Revision: 2.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.
Page 7 of 57
Revision: 2.2
Apart from PLCs, IntegraXor can also communicate with various other devices such as
robots and drives that has the supported communication protocol and port.
Page 8 of 57
Revision: 2.2
Page 9 of 57
Revision: 2.2
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 > All Programs > Ecava > IntegraXor Editor. This will open IntegraXor's Project
Editor where you will configure the server side of the application.
With the Project Editor (PE), click File > New Project.
Page 10 of 57
Revision: 2.2
Name our project, 'candy'. You may create it in any directory. For this tutorial, we will
create a new directory called My Projects in My Documents as the location of our Candy
project.
Page 11 of 57
Revision: 2.2
The left pane shows that within the Candy project, there are several folders (nodes) such
as General, Timer, IO, Database and User. These nodes contain the configuration of the
project. Do not be alarmed if you cannot find the tags tab. They can be found by clicking
on the devices (eg. MbusDevice) configured under ports (eg. COM1, ETH01) within the
IO node.
Clicking on an item on the left pane will automatically open the corresponding tab on the
middle pane. The tab will remain open until you close them by clicking on the 'X' on the far
right. Click on the General tab, check to ensure that our new project name is configured in
the Project ID entry. Enter Candy Project in the Title to show this heading in the frontend.
Page 12 of 57
Revision: 2.2
Page 13 of 57
Revision: 2.2
Then,
Internet
Explorer
will
open
with
the
following
website
address:
Page 14 of 57
Revision: 2.2
Sample Projects
Our website has a sample project available for download. Visit http://www.integraxor.com
to download. The sample project contain screens from real life applications and
demonstrate how IntegraXor can be used. Unzip the downloaded sample project. Right
click on the igx file. Select Edit to run the Project Editor or select Run to start the Project.
We will add more sample projects when they are available.
Page 15 of 57
Revision: 2.2
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).
Here, we will create a new serial RS232 port called COM2 in the next available line. Give
your port a recognizable name (COM2) in the Name entry, a description (Serial Port 2)
and enter COM2 in the Address entry. Save your changes.
Page 16 of 57
Revision: 2.2
Page 17 of 57
Revision: 2.2
Parameter
Value
Name
PLC_A
Description
Address
Path
Timer
SEC01
Driver
Modbus
After selecting Modbus, click on the PLC_A entry and the detailed right pane will be
shown. Here, the Modbus settings can be changed from the default. Details of this setting
can be found in our User Guide (available online at our website).
Page 18 of 57
Revision: 2.2
Memory addresses are different for each make of PLC. Typical Modbus address ranges
and the corresponding IntegraXor tag setting are as follows:
Description
Tag Attribute
00000-09999
0-9999
10000-19999
0-9999
30000-39999
0-9999
40000-49999
0-9999
Page 19 of 57
Revision: 2.2
For Modbus, Batch allows a group of tags with contiguous addresses to be polled in a
cycle instead of individual polling. This will speed up communication especially if the
addresses are fragmented. Example: Batch 1 for addresses 1,2,3 and Batch 2 for
addresses 23,24,25. Details of this setting can be found in our User Guide.
The above steps provide an initial guide to configure your own devices. Check the User
Guide for supported protocols and details on how to configure them.
Page 20 of 57
Revision: 2.2
Click on 'IO' node and unchecked the Enable check box to disable COM2 port. IntegraXor
will not poll devices configured in this port if this check box is disabled. Save your changes.
Under 'IO', click on '[Virtual]' node to open the virtual tags tab. Create the following tags
which will be used in the following tutorial:
Tag Name
Data Type
Persist
level_chocolate
real32
mdb
level_syrup
real32
mdb
level_vanilla
real32
mdb
level_strawberry
real32
mdb
Some tags have been created. Click on the entry to modify the configuration of the tag.
The other settings can remain as default.
Page 21 of 57
Revision: 2.2
Run your project with the above changes. In IntegraXor server, the Watch window
provides real-time values of all the configured tags as well as system tags. Ensure the
Watch window is open clicking on View > Watch Window. In the Watch window, locate one
of the above tags in the Watch window for example 'level_syrup'. Double click on the value
to set a new value, say 10.5. If the project stops, this value will be saved to database if
Persist is configured. You can also add the tag to the favorite watch list (click on
) to
Page 22 of 57
Revision: 2.2
Supported Devices
IntegraXor version 3.7 supports any device that runs on Modbus Serial (RTU or ASCII),
Modbus TCP/IP, OPC, GE Fanuc's SNP, Omron's FINS and Mitsubishi Melsec-Q. We will
continue to add native drivers to IntegraXor as we believe communication to devices forms
an integral part of a SCADA system and it should not be dependent on third party software
such as OPC servers. If the developer can choose to use native drivers instead of
purchasing another OPC server software for device communication, the developer can
reduce overall cost of the project.
Page 23 of 57
Revision: 2.2
Graphical Animation
Inkscape SAGE
Under 'Screen' node of the Project Editor, click on 'overview.svg' to launch Inkscape SAGE
and edit this graphic file. As an alternative, you can use Windows Explorer, go to My
Documents > My Projects > Candy. Right click on overview.svg and select Inkscape.
Inkscape SAGE is the tool for drawing graphics and configuring animation based on your
tags.
Select and delete all existing items in overview.svg. In Inkscape, select the Rectangle tool
on the left (square icon). Drag to create a rectangle in overview.svg. Click on Select tool
(arrow icon) to return to selection mode.
Page 24 of 57
Revision: 2.2
Next, right click on the tank and select Object Properties (or hit CTRL+SHIFT+O). Select
'Bar'
animation,
enter
app.currentTime.second
in
Tag
field.
This
tag
called
app.currentTime.second is an internal tag which contains the time value of seconds. Enter
0 in the Min field and 59 in the Max field. Click OK. Save overview.svg.
Page 25 of 57
Revision: 2.2
You can draw another rectangle to show the outline of the tank. However, this new object
lies on top of our animated tank object. You can either set the Opacity (Visibility) to 50% in
the Fill and Stroke of the tank outline object or send the object lower below the animated
tank object by selecting menu Object > Lower (or hit Page Down).
Select the Gradient tool on the left (or hit CTRL+F1), click and drag across the tank outline
object to create a gradient. Use edit gradients in the Fill and Stroke to customize additional
stops or offsets to create a 3D effect. Change the thickness and style of the object's outline
/ stroke in 'Stroke Paint' and 'Stroke Style' tabs of the Fill and Stroke.
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.
Page 26 of 57
Revision: 2.2
Page 27 of 57
Revision: 2.2
Page 28 of 57
Revision: 2.2
Alternatively, you can use the 'Pop-up' or 'Open' animation to prompt for input or even
open a new HTML page.
Page 29 of 57
Revision: 2.2
Page 30 of 57
Revision: 2.2
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 and Bezier
curves/straight line tool. See diagram below. Press shift and click on both objects. Select
menu Object > Group (or hit CTRL+G).
Page 31 of 57
Revision: 2.2
Click on the grouped object, 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 the
drawing and refresh your Internet Explorer.
Page 32 of 57
Revision: 2.2
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.
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.
Page 33 of 57
Revision: 2.2
Next, return to Project Editor 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
Page 34 of 57
Revision: 2.2
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.
Page 35 of 57
Revision: 2.2
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
Open Notepad in Start > Programs > Accessories. Copy the following into your notepad.
//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',
setTag( 'agitator_posB',
setTag( 'agitator_posC',
setTag( 'agitator_posD',
break;
case 2:
setTag( 'agitator_posA',
setTag( 'agitator_posB',
setTag( 'agitator_posC',
setTag( 'agitator_posD',
break;
case 3:
setTag( 'agitator_posA',
setTag( 'agitator_posB',
setTag( 'agitator_posC',
setTag( 'agitator_posD',
break;
case 4:
setTag( 'agitator_posA',
setTag( 'agitator_posB',
setTag( 'agitator_posC',
setTag( 'agitator_posD',
break;
}
1);
0);
0);
0);
0);
1);
0);
0);
0);
0);
1);
0);
0);
0);
0);
1);
Page 36 of 57
Revision: 2.2
Save this script as agitator.js in your project's script folder (My Documents > My Projects >
candy > scripts). Extension js denotes that this is a Javascript file.
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.
Now, we need to run this script every second. In the Project Editor, click on 'Script' node to
open the Script tab. Enter the following in the next available line and save.
Parameter
Value
Name
agitator
Description
File Name
scripts/agitator.js
Trigger By
Timer
Timer
SEC01
Page 37 of 57
Revision: 2.2
After save, a new item (agitator) will appear under 'Script' node. Click on it to open this
script in a new tab. Here you can modify the script directly.
Page 38 of 57
Revision: 2.2
Finally, we restart the project by going to IntegraXor server. Select Tools > Restart Project.
Refresh your Internet Explorer. Your candy factory is now mixing a batch of candy.
Page 39 of 57
Revision: 2.2
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 Project Editor.
Page 40 of 57
Revision: 2.2
Using Inkscape SAGE, add a button in overview.svg using the Rectangle tool. Label it as
'Top-up all'. Right click the button and select Object Properties. Select Script, 'mouseup'
event and copy & paste the following script into the script field.
setTag('level_chocolate',100);
setTag('level_vanilla',100);
setTag('level_strawberry',100);
setTag('level_syrup',100);
alert("Top-up Complete.");
Save overview.svg, refresh Internet Explorer and test your script. The script will run when
you release the click of the mouse (called 'mouseup').
Page 41 of 57
Revision: 2.2
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.
Page 42 of 57
Revision: 2.2
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.html.
<html>
<head>
<title>Hello, world</title>
</head>
<body>
Hello, world.
</body>
</html>
Run hello.html 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.
Page 43 of 57
Revision: 2.2
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 for easy configuration by the developer using the
Project Editor. No modification is required at this html. At the Project Editor, click on the
Screen tab on the left pane to open the Screen configuration which contain the contents to
display. Here you can modify the web page (html) by changing the Name and Path values.
Page 44 of 57
Revision: 2.2
Page 45 of 57
Revision: 2.2
Page 46 of 57
Revision: 2.2
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.
Page 47 of 57
Revision: 2.2
Alarms
Alarm Management
Alarms are useful to inform the user that a condition has exceeded the design limit.
Configuration of alarms are done in Project Editor. 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 Project Editor, select Process group under Alarm tab. Add a new alarm and enter the
following:
Name
va_lo
Message
Log To
mdb
Tag Name
level_vanilla
Trigger By
Compare Value
Condition
Tag < L1
Limit 1
20
Page 48 of 57
Revision: 2.2
Page 49 of 57
Revision: 2.2
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 Project Editor.
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 agitator.js.
Next, go to your project folder and edit plot.htm with notepad. Within the Javascript, you
will find the var setting for the trend chart as shown below.
Page 50 of 57
Revision: 2.2
Page 51 of 57
Revision: 2.2
Currently, the project's trend is configured with temperature, pressure and weight. We will
replace this trend with a trend of both our tags. Replace the above script with the script
below:
var pen = [
{
name: 'Production',
enabled: true,
unit: 'Units',
min: 0,
max: 80,
pens: [
{
name: 'Package Output',
tag: 'package_output',
format: '###'
},
{
name: 'Package Defects',
tag: 'package_defect',
format: '###'
}
]
}
];
Save plot.htm and restart your project. Click on Trend tab to view your trend chart.
Page 52 of 57
Revision: 2.2
Page 53 of 57
Revision: 2.2
Microsoft Access
By default, the template project has been configured to log to an Access database called
dblog.mdb. In Project Editor, 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 Project Editor, 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.
Page 54 of 57
Revision: 2.2
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' table to verify that your data has
successfully been logged. If you have OpenOffice, you can also connect to this database
and view the contents.
Page 55 of 57
Revision: 2.2
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.
Page 56 of 57
Revision: 2.2
Conclusion
I N F O R M A T I O N TE 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 MI N G I N E XT R I C A B L Y I N T E RW O V E N .
I D O N ' T TH I N K A N YB O D Y C A N T A L K M E A N I N G F U L L Y A B O U T O N E W I THO U T TH E T A L K I N G
A B O U T TH E O T H E R .
- BILL GATES
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
Page 57 of 57
Revision: 2.2