You are on page 1of 58

Ecava Sdn. Bhd.

IntegraXor SCADA
Version 3.5
Tutorial for Beginners

Document number: IGX-TUB-35RTW

Document date: 15 January 2008

Last revision date: 06 July 2010

Prepared by:

Wong Foot Yow


http://www.integraxor.com

Copyright Ecava Sdn Bhd ©2010. Page 1 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Contents

Introduction...........................................................................................................................5

Product..............................................................................................................................................5

Purpose.............................................................................................................................................5

Dependencies....................................................................................................................................6

Industrial Automation Basics...........................................................................................................7

Basic Knowledge..................................................................................................................8

Programmable Logic Controllers (PLC)..........................................................................................8

Data & Communications..................................................................................................................8

PLC & IntegraXor............................................................................................................................9

Project Overview................................................................................................................11

Candy Factory.................................................................................................................................11

New Project....................................................................................................................................11

Project Management.......................................................................................................................13

Running the Project........................................................................................................................14

Sample Projects..............................................................................................................................16

Device Configuration..........................................................................................................17

3 Steps.............................................................................................................................................17

Supported Devices..........................................................................................................................23

Graphical Animation...........................................................................................................24

Inkscape SAGE...............................................................................................................................24

Get Tag & Set Tag..........................................................................................................................28

Copyright Ecava Sdn Bhd ©2010. Page 2 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Web Buttons...................................................................................................................................31

Slider Movement............................................................................................................................32

Visibility (Opacity).........................................................................................................................34

More Animations............................................................................................................................36

Server-side Scripting..........................................................................................................37

Javascript........................................................................................................................................37

My First Javascript.........................................................................................................................37

Client-side Scripting............................................................................................................41

Many side scripting.........................................................................................................................41

Inkscape SAGE Script....................................................................................................................42

More scripts....................................................................................................................................43

HTML..................................................................................................................................44

HTML Basics..................................................................................................................................44

My First HTML..............................................................................................................................44

Project HTML.................................................................................................................................46

Calling HTML from SVG..............................................................................................................47

Get Data with HTML......................................................................................................................48

More HTML...................................................................................................................................48

Alarms................................................................................................................................49

Alarm Management........................................................................................................................49

Alarm Configuration.......................................................................................................................49

Trending.............................................................................................................................51

Process Trending............................................................................................................................51

Copyright Ecava Sdn Bhd ©2010. Page 3 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Trend Configuration.......................................................................................................................51

Database & More................................................................................................................55

Database Management....................................................................................................................55

Microsoft Access............................................................................................................................55

Microsoft SQL Server.....................................................................................................................56

Other Databases..............................................................................................................................57

End of Tutorial................................................................................................................................57

Conclusion..........................................................................................................................58

Future of Industrial Automation.....................................................................................................58

Contact Us......................................................................................................................................58

Copyright Ecava Sdn Bhd ©2010. Page 4 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Introduction

“ T H E I N TE R N E T H A S B E E N TH E M O S T F U N D A ME N TA L C H A N G E D U R I N G M Y L I F E TI M E A N D
F O R H U N D R E D S O F Y E A R S . S O ME O N E T H E O T H E R D A Y S A I D , “ I T ' S TH E B I G G E S T TH I N G
S I N C E G U T E N B E R G , ” A N D TH E N S O M E 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 ITI N G . ” - RUPERT MURDOCH

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. Readers can refer to the online documentation for updated and detailed

user guides.

Copyright Ecava Sdn Bhd ©2010. Page 5 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Dependencies

Before we begin, we need to ensure we have the following software installed.

1) IntegraXor software

2) Adobe SVG Viewer (if using Microsoft Internet Explorer)

3) Inkscape SAGE

If you do not have all of the above, please go to http://www.integraxor.com to download

and install. It must be noted that currently, IntegraXor 3.5 can only be installed on

Microsoft Windows XP (and above) or Microsoft Windows Server 2003 (and above). The

front-end should be either Microsoft Internet Explorer 8.0 (and above), Mozilla Firefox 3.5

(and above) or Google Chrome 3.0 (and above). IntegraXor's development tools are free.

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.

Copyright Ecava Sdn Bhd ©2010. Page 6 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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 ©2010. Page 7 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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 Profibus. Example:

Copyright Ecava Sdn Bhd ©2010. Page 8 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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.

Diagram 2.1 : IntegraXor basic network architecture

Copyright Ecava Sdn Bhd ©2010. Page 9 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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.

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

Copyright Ecava Sdn Bhd ©2010. Page 10 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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 where you will configure the server side of the application.

With the Project Editor (PE), click File > New Project.

Diagram 3.1 : Creating a new project with Project Editor

Copyright Ecava Sdn Bhd ©2010. Page 11 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Name our project, Candy. You may create it in any directory. For this tutorial, we will

create the project in the default location called 'My Projects' directory in My Documents.

Diagram 3.2 : Candy project

Copyright Ecava Sdn Bhd ©2010. Page 12 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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 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.

Copyright Ecava Sdn Bhd ©2010. Page 13 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Diagram 3.3 : Candy project General properties

Running the Project

From the Project Editor, click on 'Run'. 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.

Copyright Ecava Sdn Bhd ©2010. Page 14 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Diagram 3.4 : IntegraXor server

Then, Internet Explorer will open with the following website address:

http://localhost:7131/Candy/index.html. You might have noticed that this is configured in

the post-launch of the General tab as "iexplore.exe" "<HOMEPAGE>index.html".

IntegraXor has a built-in webserver that delivers web pages such as index.html. It uses

port 7131. Go ahead and view your project over the intranet and internet. Ensure to

replace localhost with your appropriate IP address.

Copyright Ecava Sdn Bhd ©2010. Page 15 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Diagram 3.5 : IntegraXor project on Internet Explorer

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.

Copyright Ecava Sdn Bhd ©2010. Page 16 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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 (COM1).

Step 1: Create a Port

By default, COM1, ETH01 and OPC ports have been created. At Project Editor, click on

“IO” node to open the IO tab. All three ports will be listed and the tick marks show that they

are enabled. You can untick an item to disable it. Disabled items are greyed out.

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.

Copyright Ecava Sdn Bhd ©2010. Page 17 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Diagram 3.6 : New port

Step 2: Create a Device

Click on 'COM2' node in the left pane, the COM2 tab will open allowing the configuration of

devices for this port. On a new line, give the new device a name, say “PLC-A”. We will use

Modbus RTU as the communication protocol and assign SEC01 as the polling frequency.

Enter the following configuration for PLC01 device. Save changes.

Copyright Ecava Sdn Bhd ©2010. Page 18 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Parameter Value
Name PLC01
Description PLC at process area
Address 1
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.

Diagram 3.7 : New device

Copyright Ecava Sdn Bhd ©2010. Page 19 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Step 3: Create Tags

In the last step, we click on 'PLC-A' to open the tags tab to add tags that will be mapped to

the data areas in the PLC. Memory addresses are different for each make of PLC. Typical

Modbus address ranges and the corresponding IntegraXor tag setting are as follows:

Description Modbus address IntegraXor address Tag Attribute


Coils Status (Digital Output) 00000-09999 0-9999 Input Tag (False)
Inputs Status (Digital Input) 10000-19999 0-9999 Input Tag (True)
Input Register 30000-39999 0-9999 Input Tag (True)
Holding registers 40000-49999 0-9999 Input Tag (False)

Diagram 3.8 : Tags configuration

Copyright Ecava Sdn Bhd ©2010. Page 20 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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.

Since we will not be using an actual PLC for this project, 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 'IO' node and untick 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:

Name Data Type Persist


level_chocolate real32 mdb
level_syrup real32 mdb
level_vanilla real32 mdb
level_strawberry real32 mdb

The other settings can remain as default.

Copyright Ecava Sdn Bhd ©2010. Page 21 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Diagram 3.9 : Virtual Tags

Run your project. In IntegraXor server, 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 favourite watch list (click on ) to monitor the value or create your own

watch list.

Copyright Ecava Sdn Bhd ©2010. Page 22 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Diagram 3.10 : Watch tags

Supported Devices

IntegraXor version 3.5 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.

Copyright Ecava Sdn Bhd ©2010. Page 23 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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.

Diagram 4.1 : Inkscape SAGE draw rectangle

Copyright Ecava Sdn Bhd ©2010. Page 24 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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 (CTRL+SHIFT+F)...

Next, right click on the tank and select Object Properties (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.

Diagram 4.2 : Object Properties – Bar Animation

Copyright Ecava Sdn Bhd ©2010. Page 25 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Check IntegraXor Server to make sure project is running. Return to Internet Explorer, hit

F5 to refresh. You will see the level of your tank changing every second. Congratulations!

You have successfully created a basic graphic animation screen in IntegraXor.

Copyright Ecava Sdn Bhd ©2010. Page 26 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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.

Select the Gradient tool on the left, 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.

Copyright Ecava Sdn Bhd ©2010. Page 27 of 58 Revision: 2.00


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 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 4.3 : Adding Text

Copyright Ecava Sdn Bhd ©2010. Page 28 of 58 Revision: 2.00


Ecava Sdn. Bhd.

We also need to display the tank level in figures. Create another text box and enter #.## as

text. Right click and select Object Properties. Select 'Get' animation and enter level_vanilla

in the tag field. Click OK.

Diagram 4.4 : Get Tag

Copyright Ecava Sdn Bhd ©2010. Page 29 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Select 'Set' animation and enter level_vanilla. Save overview.svg and refresh your Internet

Explorer. Try to click on the text and change the value. Tip: #.## formats the display of

your data. Click on the text to edit. Add another # to the back #.###, you will see 3 decimal

places.

Diagram 4.5 : Set Tag

Alternatively, you can use the 'Pop-up' or 'Open' animation to prompt for input or even

open a new HTML page.

Copyright Ecava Sdn Bhd ©2010. Page 30 of 58 Revision: 2.00


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. Right click and select 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 the drawing and refresh Internet Explorer. Click on the button to set

it to 100.

Diagram 4.6 : Button Action

Copyright Ecava Sdn Bhd ©2010. Page 31 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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”.

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 > Group (or hit CTRL+G).

Diagram 4.7 : Group objects

Copyright Ecava Sdn Bhd ©2010. Page 32 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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 4.8 : Slider Animation

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.

Copyright Ecava Sdn Bhd ©2010. Page 33 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Diagram 4.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.

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.

Copyright Ecava Sdn Bhd ©2010. Page 34 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Diagram 4.10 : Stirrer Movement by Opacity

Next, return to Project Editor and create the following virtual tags.

Name Data Type


agitator_posA boolean
agitator_posB boolean
agitator_posC boolean
agitator_posD boolean
agitator_pos int16

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

Copyright Ecava Sdn Bhd ©2010. Page 35 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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'. 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.

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.

Copyright Ecava Sdn Bhd ©2010. Page 36 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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', 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;
}

Copyright Ecava Sdn Bhd ©2010. Page 37 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Save this script as agitator.js in your project's script folder (My Documents > 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 turning agitator blades
File Name scripts\agitator.js
Trigger By Timer
Timer SEC01

Copyright Ecava Sdn Bhd ©2010. Page 38 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Diagram 5.1 : New Script configuration

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.

Copyright Ecava Sdn Bhd ©2010. Page 39 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Diagram 5.2 : Agitator Script Editing

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.

Copyright Ecava Sdn Bhd ©2010. Page 40 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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.

Copyright Ecava Sdn Bhd ©2010. Page 41 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Inkscape SAGE Script

While server-side scripts are configured at the Project Editor, 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, 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').

Copyright Ecava Sdn Bhd ©2010. Page 42 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Diagram 6.1 : Inkscape SAGE Script

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.

Copyright Ecava Sdn Bhd ©2010. Page 43 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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.

Copyright Ecava Sdn Bhd ©2010. Page 44 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Diagram 7.1 : First HTML

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 located at the project's main directory. You

can open it with notepad or Wordpad. We have created this html as a template for easy

configuration by the developer. It checks menu.js for the content to display. Open menu.js

in notepad by right click then select edit. Here you can modify the web page by changing

the var values.

Copyright Ecava Sdn Bhd ©2010. Page 45 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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 at the main project folder.

Edit menu.js with notepad.

//Add in your page into this list


var menu = {
"Overview":"overview.svg",
"New Page" : "newadd.svg",
"Areas":{"One":"area01.svg","Two":"area02.svg","Three":"area03.svg"},
"Trend":"trend.htm",
"Alarm":"alarm.htm",

//the last page/item must not be terminated by comma.


"About":"about.svg"
};

//Name your project title here.


var title = "Untitled Project";

//Put your project logo, i.g. "images/mylogo.gif"


var logo = "system/images/v3-logo.gif";

//Add more debugging pages below


if (getTag("app.debug")){
menu["Sample"] = "sample.svg";
menu["Plot"] = "plot.htm";
}

This creates a new tab called New Page on your web page. Clicking on the tab loads

newadd.svg. Save menu.js and refresh your Internet Explorer. Try your modified web

page. Click on New Page. Click on Overview to return.

Copyright Ecava Sdn Bhd ©2010. Page 46 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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 newadd.svg in the source field.

In the Source Type drop down, select URL. In the Dest. Type drop down, select Current

Window. Save overview.svg and refresh. Test your button.

Diagram 7.2 : Open Animation

Copyright Ecava Sdn Bhd ©2010. Page 47 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Get Data with HTML

Here is another useful HTML basic script. Copy and paste the following into notepad.

Then, save as basictag.html at the main project folder.

<html>
<title></title>
<body onload="gettag()">
<center><h3 id="text">0</h3></center>
</body>
<script type="text/javascript" src="system/scripts/igrX.js"></script>
<script type="text/javascript">
function gettag(){
var tag1 = getTag("app.currentTime.second");

var text=document.getElementById("text");
text.innerHTML = tag1;

setTimeout(gettag, 1000);
}

</script>
</html>

While Candy project is running, open http://localhost:7131/Candy/basictag.html in Internet

Explorer. This is an example of getting and displaying IntegraXor tag data without using

SVG graphics.

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.

Copyright Ecava Sdn Bhd ©2010. Page 48 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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 Alarm tab. Add a new alarm and enter the following:

Name va_lo
Message Vanilla tank level LOW
Log To mdb
Tag Name level_vanilla
Trigger By Compare Value
Condition Less Than (<)
Compare Item 1 20

Copyright Ecava Sdn Bhd ©2010. Page 49 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Diagram 8.1 : Alarm Configuration

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

alarm by varying the value of level_vanilla. Try to click on an alarm to acknowledge.

Diagram 8.2 : Alarm Viewer

Copyright Ecava Sdn Bhd ©2010. Page 50 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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.

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


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

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.

Copyright Ecava Sdn Bhd ©2010. Page 51 of 58 Revision: 2.00


Ecava Sdn. Bhd.

var obj = [
{
name: 'Temperature',
enabled: true,
unit: '&deg;C',
min: 0,
max: 100,
pens: [{
name: 'Temp Cook',
tag: 'temperature_cook',
format: '#.##'
},
{
name: 'Temp Air',
tag: 'temperature_air',
format: '#.##'
}]
}, {
name: 'Pressure',
enabled: true,
unit: 'bar',
min: 0,
max: 100,
pens: [{
name: 'Press Cook',
tag: 'pressure_cook',
format: '#.###'
}]
},
{
name: 'Weight',
enabled: true,
unit: 'kg',
min: 0,
max: 100,
pens: [{
name: 'Weight Cook',
tag: 'weight_cook',
format: '###'
}]
}
];
var opt = {
gridx: 10,
realtime: false,
lograte: 5000,
title: 'Temperature',
backgroundColor: 'white',
refLineColor: 'black'
};

Copyright Ecava Sdn Bhd ©2010. Page 52 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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 obj = [
{
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: '###'
}
]
}
];
var opt = {
gridx: 10,
realtime: false,
lograte: 5000,
};

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 ©2010. Page 53 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Diagram 9.1 : Trending

Copyright Ecava Sdn Bhd ©2010. Page 54 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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 Project Editor, select Database node. 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.

Copyright Ecava Sdn Bhd ©2010. Page 55 of 58 Revision: 2.00


Ecava Sdn. Bhd.

Diagram 9.1 : Log Tag 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' 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.

Microsoft SQL Server

For those who are familiar with Microsoft SQL Server or can get the assistance of a

database administrator, you can try to log IntegraXor's data to this database. First, create

a new database for IntegraXor in your SQL Server. Go to Program Files > Ecava >

IntegraXor 3.5 > SQL. Use the appropriate SQL script files to create tables for IntegraXor

logging.

Copyright Ecava Sdn Bhd ©2010. Page 56 of 58 Revision: 2.00


Ecava Sdn. Bhd.

In Project Editor, an MS SQL Server Express connection named 'dblog' has been

configured as an example. Alternatively, you can create your own ODBC and enter the

connection string details in Project Editor.

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.

Copyright Ecava Sdn Bhd ©2010. Page 57 of 58 Revision: 2.00


Ecava Sdn. Bhd.

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 MI N G I N E X T R I C A B L Y I N TE R W O V E N.
I D O N ' T T H I N K A N YB O D Y C A N TA L K M E A N I N G F U L L Y A B O U T O N E W ITH O U T T H E TA L K I N G
A B O U T T H E O TH E R . ” - B I L L G A TE S

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 SCADA system must also be able to adapt quickly to the same

needs. With IntegraXor, we hope to bring the SCADA technology closer to this goal.

Contact Us

We welcome any comments or suggestions. Email us at:

support@integraxor.com

Copyright Ecava Sdn Bhd ©2010. Page 58 of 58 Revision: 2.00