Intranet SCADA Graphics Using SVG

SVG today is really a great technology to display vector based graphics and animations in a web browser, and this makes it a good choice for presenting SCADA graphics in the intranet environment.

In the past SVG suffered from bad and incomplete implementations and dependency on proprietary plugins. SVG is now part of the HTML5 spec and today it is natively supported by most modern browsers. Even wider adoption and better implementations will come in the future for sure.

See this for the current status of SVG support by major browsers. This other chart presents a detailed SVG features implementation status by a number of SVG layout engines. Note that SVG already has good support by mobile browsers, this means you can view the graphics in tablets and smartphones as well.

There are many vector graphics software that can export SVG files, see this list. I can recommend Inkscape as an outstanding multi platform open source software that has SVG as its native file format.

SVG being a XML text file makes it easy to build and change the files by means of script languages as PHP, Python, Perl, etc.

The web browsers builds and makes available to its Javascript engine the SVG DOM model. Using this model you can dynamically change attributes of the SVG objects, create and remove nodes, add and control animations. That is all you need to make great SCADA graphics.

Here we developed a screen converter from the SAGE SCADA/EMS system file format to SVG, so we can display those screens in the intranet, feeded with real time data, the delay can be as low as 5 seconds.

The SVG file is embedded into a html file using the iframe tag or the embed tag, like this:

  • < iframe id=’svgscreen’ name=’svgid’ src=’svg_file.svg’ > < / iframe >
  • < embed  id=’svgscreen’ src=’svg_file.svg’ type=’image/svg+xml’ / >

Other options are the object tag and directly embedding the SVG in the html document. The image tag support SVG but does not allows javascript manipulation of the SVG DOM. See this for more details.

To begin the javascript SVG DOM manipulation it’s necessary to wait until the SVG file is fully loaded by the browser, this can be attained waiting for the onload event of the SVG object. Example using jQuery:

  • $(‘#svgscreen’).load( function() { … } );

The next step is to obtain the SVG doc DOM model:

  • var embedElem = document.getElementById(‘svgscreen’);
  • var svgDoc = embedElem.getSVGDocument();

After this you can access the SVG DOM, individual elements can be accessed by:

  • svgElem = svgDoc.getElementById( “elem_id” );

The element attributes can now be read and written using getAttributeNS and setAttributeNS:

  • var elemStyle = svgElem.getAttributeNS( null, “style” );
  • svgElem.setAttributeNS( null, ‘style’, “stroke:white; stroke-width: 2” );

New elements can be created and appended using createElementNS and appendChild.

Real time data can be requested from the javascript using Ajax calls, this is easier to accomplish through a lib like jQuery. The real time SCADA data must be available in the intranet web server in some way. In our case we read SCADA data from the SAGE system via a IEC 60870-5-104 connection, write the data to a MySQL database, the web server reads the database using PHP when requested by the Ajax calls and transfer the data to the client that displays it in the web browser manipulating the SVG DOM.

This is really not difficult to implement, the SVG DOM manipulation in the browser is an immensely powerful technique. All those are standard technologies build to evolve and to last. HTML5 is a reality now and is future proof, there is no need to worry, you’ll never lose investing in it.

Ricardo Olsen in-2c-14px, MEng. ::


2 thoughts on “Intranet SCADA Graphics Using SVG

  1. How about another graphics technology named “canvas”? I selected canvas when I had a decision between SVG and canvas. As criteria I selected high speed, complete implementations in major browsers, existence a set of JS canvas frameworks and a easy implementations with ExtJS WEB application.

    1. Canvas is also part of HTML5 technology, it’s a great option to draw graphics in the browser. It is the most common choice for HTML5 2D games.
      I think the main consideration in choosing SVG or Canvas is at which level you desire to do your graphics.
      With SVG you work at a higher level of abstraction, each graphic object, e.g. a rectangle have a DOM representation with properties like width, height, fill color, border thickness, etc. that you can manipulate at a very high level. To move a rectangle, just change it’s x and y property or do a translation.
      With Canvas, once you draw a rectangle it becomes just a bunch of pixel, to move it you need to erase it and draw again in other position, you must control almost all aspects of rendering at a low level.
      Canvas gives you have more speed and more control but it comes at a cost of more programming.
      The good thing is we have options, very good standard options to do graphics in HTML5.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s