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>

<animateColor attributeName="fill" attributeType="CSS" from="rgb(0,0,255)" to="rgb(128,0,0)" begin="3s" dur="6s" fill="freeze" />

</td>

</tr>

<tr>

<td>

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

</td>

<td>

<animate attributeName="height" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="300" />

</td>

</tr>

<tr>

<td>

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

</td>

<td>

<animateMotion path="M 0 0 L 100 100" begin="3s" dur="6s" fill="freeze" />

</td>

</tr>

<tr>

<td>

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

</td>

<td>

<set attributeName="visibility" attributeType="CSS" to="visible" begin="3s" dur="6s" fill="freeze" />

</td>

</tr>

<tr>

<td>

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

</td>

<td>

<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="3s" dur="6s" fill="freeze" />

</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:

<animateColor attributeName="fill" attributeType="CSS" fill="freeze" colors="rgb(0,0,255), rgb(128,0,0)" state="0" />

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>

<animateColor attributeName="fill" attributeType="CSS" values="rgb(0,0,255),rgb(128,0,0),rgb(0,255,0)" state="0" fill="freeze" />

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

<animate attributeName="height" attributeType="XML" dur="9s" fill="freeze" from="100" to="400" state="200"/>

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

<animateMotion path="M 0 0 L 100 100" dur="6s" fill="freeze" state="10%"/>

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

<set attributeName="visibility" attributeType="CSS" to="visible" dur="6s" fill="freeze" from="0" to="100" state="10"/>

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

<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="10" dur="6s" fill="freeze" state="-10"/>

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

You may also like:

  1. A proposal for adding declarative drawing to SVG
  2. Measurement and Modeling of Chromatic Spatio-Velocity Contrast Sensitivity Function and its Application to Video Quality Evaluation
  3. Patent application for no glasses 3D
  4. Using Blender for Patent Absurdity / advocacy animations
  5. Using animations within LaTeX documents

  • Share
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 3.00 out of 5)
Loading ... Loading ...