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