SVG animations' constrain in SCADA application

Kwee Hui Lee and Foot Yow Wong
Ecava Sdn Bhd
Play (20min)	Download: MP4 \| MP3

SCADA/HMI, a real time monitoring system is recently developed to be working on web. It is very common for people nowaday, to be able to monitor and control their home/office and plant remotely using a web client.

SCADA/HMI, which is characterized by rich mimic, has traditionally functioned as a desktop application. When SCADA/HMI is required to run on intranet or Internet, Java technologies and ActiveX technologies, which are not W3C standard, were mainly used to handle the extensive graphical animations over this media.

SVG has made rich animations possible over the net without using proprietary technologies. Ecava has developed and delivered its first SVG based SCADA system called “IntegraXor” as early as 2003. Ecava further developed XSAC (IntegraXor SCADA Animation Code) which allows animations to be done easily by linking a JavaScript animation library instead of doing JavaScript programming. XSAC is a series of animation attributes written in JSON format which can be easily generated. Ecava has developed SAGE (Scada Animation GUI Editor) based on Inkscape for such purpose.

The JSON syntax contains the animation to work, a tag name to be listen, and the parameters to take action. For example a circle created in Inkscape is given a COLOR animation, and the color of the object shall change according to a predefined parameter associated with the tag value, which update from server. The update procedure requires a Javascript library to loop and make HTTP request to server.

Major Animations for SCADA application are Color, Level, Movement, Opacity, Rotate and Text. They are all tied to at least one variable which is normally associated with data from an external field equipment. The animations shall correspond to the actual status of the field equipments.

Below are some samples of XSAC as compared to native SVG animation elements which are extracted from SVG specification 1.1.

<table>

<tr>

<th>

XSAC

</th>

<th>

SVG Animations Elements

</th>

</tr>

<tr>

<td>

{attr:’color’, list:[{tag:VARm, data:NUMm, param:COLORm}, {tag:VARn, data:NUMn, param:COLORn}/*, …*/]}

</td>

<td>

</td>

</tr>

<tr>

<td>

{attr:’level’, tag:VAR1, from:NUM1, to:NUM2}

</td>

<td>

</td>

</tr>

<tr>

<td>

{attr:’move’, tag:VAR1, from:NUM1, to:NUM2, readonly:0, path:ID}

</td>

<td>

</td>

</tr>

<tr>

<td>

{attr:’opacity’, tag:VAR1, from:NUM1, to:NUM2}

</td>

<td>

</td>

</tr>

<tr>

<td>

{attr:’rotate’, tag:VAR1, from:NUM1, to:NUM2}

</td>

<td>

</td>

</tr>

</table>

SVG has animation elements and it is sufficient to support simple animations needed in SCADA mimic. However, a limitation in the design is the adaptation for external interaction. Moreover, the animation is designed to be time-oriented but not condition based or state orientated that reflects the value of a variable. As such, SCADA applications will not be able to utilize the built in design directly but they have to use JavaScript and DOM access to achieve some simple animation which involved colors, transformation, opacity and movements. In some scenario, SCADA applications need to remove an object, and append a new one in order to achieve simple animations.

We could do a workaround by using beginElementAt() and endElementAt() to freeze the animation at the desired position, but it could be confusing and it does not simplify the work required.

We propose to add state-oriented animation to the existing time-oriented animation, so that SVG native animations can be access directly. The state-oriented animation will preset a number of animations into an attribute, and the execution is determined by another attribute. A sample of this proposal is shown below:

Numerous colors can be preset into an animateColor tag, where the color to be shown depends on the attribute "state". In this scenario, external interaction will only need to change the property of "state", the animation will change accordingly. Similarly, animateMotion, animateTransform and animate itself can be inserted with 2 new attributes for state-oriented animation as well.

A state-oriented SVG animation has a lot of advantages, for instance it can be used by office/home applications that generates bar chart, pie chart, or any other type of data-oriented (hence state-oriented) presentations. Below are the examples of implementation after adding ‘state’ attributes.

<table>

<tr>

<th>

SVG Animations Elements with additional ‘state’ attribute

</th>

<th>

Effect

</th>

</tr>

<tr>

<td>

</td>

<td>

‘state’ default value is 0, so color shall start by first color ‘rgb(0,0,255)’. When value of ‘state’ change to 1, then color shall change to ‘rgb(128,0,0), and so on and so forth.

</td>

</tr>

<tr>

<td>

</td>

<td>

‘state’ initial value is 200, so initial height is 33%. And when state value increase to 300, ‘dur’ still functioning for animation effect whereby it shall consume 3 seconds which is interpolated to 9 seconds.

</td>

</tr>

<tr>

<td>

</td>

<td>

‘state’ initial value is 10%, so it will be started at 10% of the total path. And it shall take 6 seconds to travel from 0 to 100%.

</td>

</tr>

<tr>

<td>

</td>

<td>

‘state’ initialized with value of 10, it shall be proportional to ‘from’ and ‘to’ values. Total time needed to animate from ‘from’ to ‘to’ shall be 6 seconds.

</td>

</tr>

<tr>

<td>

</td>

<td>

‘state’ initialized with value of -10 which is at 180 degree. When value is at ‘from’, the position is 0 degree, when the value is at ‘to’ the position is at 360 degree.

</td>

</tr>

</table>

SVG animations’ constrain in SCADA application