Push Technology for SVG based SCADA

Efficient way of message exchange in web and SVG based SCADA HMI

Shiro Sakurai

Shiro is a graduate student at Computer Science department of San Jose State University, He is interested in Wireless Networking, Embedded Computing, HTML5


A Supervisory Control and Data Acquisition (SCADA) system is commonly used in factory and home automation system to visualize data from the sensor devices. With the emergence of web technology, web based Human Machine Interface (HMI) is recent trend of SCADA system. The project proposes utilizing push technology for asynchronous data change notification to web browser based SCADA HMI that may significantly reduce network traffic.

Table of Contents

Periodical Polling
Push Technology
Experiment Setting
Performance Analysis


A Supervisory Control and Data Acquisition (SCADA) system is commonly used computer system in the factory or building automation fields. A Human Machine Interface (HMI) subsystem is the major subsystem of SCADA and presents data from sensors to a human operator. It also accepts input from the operator to send commands to control devices. Traditionally, the vendors of SCADA system provided proprietary HMI software as a part of their software product. However, along with the growth of web technology and good reputation of multi-tier architecture, a web based SCADA HMI will gain popularity.

There exist two type of solution for Web SCADA: Adobe Flush and Real Time Messaging Protocol (RTMP), and Scalable Vector Graphics (SVG) and Ajax Technology.[2]

Both solution satisfies one of the major requirements of SCADA HMI that is visualizing data from sensor devices using animation. However RTMP based solution has advantage in terms of obtaining up to date value of the sensor devices which changes continuously and asynchronously.

By focusing on SVG based Web SCADA, this paper compares two underlying techniques to obtain up to date data from sensor devices, periodical polling and push technology and shows significance of push technology for SVG based Web SCADA system.

Periodical Polling

Fig.1 Periodicacl Polling

A periodical polling technique is often used to retrieve up to date value from external devices. In polling system, SCADA HMI periodically asks current value of the sensor devices to the web server, then animate graphics accordingly. The SCADA HMI program running on a web browser performs following steps on every polling period.

  • Send request message to the web server to initiate data acquistion.

  • Wait for the response from the web server.

  • Update visualization objects according to the response.

This approach is inefficient in terms of exchanging message between SCADA HMI and web server as follows:

  • Requires request message to initiate data exchange.

  • Response message contains all the sensor variable that are shown in SCADA HMI, even if they are not changed since last inquiry

  • Polling interval needs to be short enough to minimize delay even if the update interval of the data is large.

In addition, the system might lose variable change event if the data of a sensor device changes two or more times during polling interval.

As a result, the communication channel between SCADA HMI and Supervisor is likely to fill the useless messages. In addition, the approach is not scalable since the polling interval must be larger than network delay and Supervisor's processing time which is considerably large in the large system with tens of thousands of sensor devices. Thus, it is better to have a scheme that achieves exchanging data between SCADA HMI and Supervisor at the right time and smaller size.

Push technology

Fig.2 Pushing Technology

Push technology is also used to deliver the up to date value of the sensor devices to the web browser. In pushing system, SCADA HMI is always listening to a data update message from the web server and animate graphics when it receives message. Consequently, the traffic between SCADA HMI and Supervisor is significantly reduced since only the messages with relavant changes are exchanged as described in [3]

The drawbacks of push technology might be:

Comet or Reverse Ajax is compatible with all major web browsers.[5], [6] However, they are push like technology so that web browser and web server loses connection between them. Therefor the server needs to have complex program to keep track of the date update queue for each client.

Experiment Setting

Fig.3 Components relation

The experiment is conducted with following components.


Following list is JavaScript implementation for periodical polling. The function pollData() is called on each timeout and creates XMLHttpRequest object and update SVG objects on arrival of the response from the server.

function pollData() {
  var req = new XMLHttpRequest();
  req.onreadystatechange = function() {
    if(req.readyState == 4 && req.status == 200) {
      vars = req.responseXML.getElementsByTagName("variable");
      for(i = 0;i < vars.length;i++) {
        barname = "bar1" + vars[i].getAttribute("name");
        g = document.getElementById(barname);
        numValidPoll += DoUpdateBar(g,vars[i].getAttribute("value"));
      document.getElementById("numPoll").value = "" + numPoll;
      document.getElementById("numValidPoll").value = "" + numValidPoll;
      if(pollInterval > 0) {

List.1 Polling Implementation

Following list is JavaScript implementation for push technology. The function initWS() is called only once per experiment and creates a WebSocket object. The onmessage() function is called upon arrival of pushed data from the server.

function initWS() {
  if(ws != null) {
  ws = new WebSocket("ws://gundam/scada");
  ws.onopen = function(evt) {
    document.getElementById("wsState").value = "Connected";
  ws.onmessage = function(evt) {
    document.getElementById("lastMsg").value = evt.data;
    parser = new DOMParser();
    xmlmsg = parser.parseFromString(evt.data,"text/xml");
    vars = xmlmsg.getElementsByTagName("variable");
    for(i = 0;i < vars.length;i++) {
      barname = "bar2" + vars[i].getAttribute("name");
      g = document.getElementById(barname);
      numValidWSmsg += DoUpdateBar(g,vars[i].getAttribute("value"));
    document.getElementById("numWSmsg").value = "" + numWSmsg;;
    document.getElementById("numValidWSmsg").value = "" + numValidWSmsg;
  ws.onerror = function(evt) {
    document.getElementById("wsState").value = "Received error";
  ws.onclose = function(evt) {
    ws = null;
    document.getElementById("wsState").value = "Closed";

List.2 Pushing Implementation

The screen capture is shown in Fig.4. Note that the top two bars, binded to the variables having the two highest update frequency, are not mached between polling (left) and pushing (right).

Fig.4 Screen Capture

Experiment result

The experiment shows that the polling method records 20% less updates on SVG animation and 280% more data value messages than the web-socket method when the polling interval is set to the average update interval of the data variable with the highest update frequency. However, no significant visible difference on this setting. On the other hand, when the polling interval is set to twice the average interval of the same variable, SVG animation shows clear visible difference between the two methods. In fact, the polling method gets 35% less update but 95% more data value messages than web-socket method in this setting.


A web browser is the desirable platform for SCADA HMI from its availability and familiarity. By standardization of SVG in web browser, web based SCADA system may achieve truly hardware and operating system independence since it does not require proprietary plug-ins for graphics. Standardization of web-socket and browser support is also crucial for SCADA system because stateless nature of HTTP protocol may not handle a huge number of asynchronous events well as shown in the experiments of this project.


[1] Tang Qiaoying, Zhao Chenghui. "The Application of Ajax Asynchronous Refresh in General used Database Maintenance System". Proceedings, Geoscience and Remote Sensing (IITA-GRS), 2010 Second IITA International Conference, volume 1, Aug. 2010, IEEE.

[2] Lee KweeHui, Wong FootYow. "SVG Animations' Constraint in SCADA Applications". Proceedings, SVG Open, 2010, Aug. 2010, SVG Open.

[3] Junman Sun, Huajing Fang, Ganyi Wang, Zhendong He. "Information Push Technology and Its Application in Network Control System". Proceedings, International Conference on Computer Science and Software Engineering (CSSE), 2008, Dec. 2008, IEEE.

[4] Angela Bonifati, Stefano Ceri, Stefano Paraboschi. "Pushing Reactive Services to XML Repositories using Active Rules". Proceedings, 10th international conference on World Wide Web (WWW), 2001, May. 2001, IEEE.

[5] David Crane, Phil McCarthy. Comet and Reverse Ajax: The Next-Generation Ajax 2.0, 2008, Apress.

[6] Ali Mesbaha, Arie van Deursenb. "A component- and push-based architectural style for AJAX applications" The Journal of Systems and Softwar 81, 2008, Elsevier.

[7] Ian Hickson Ed. "The WebSocket API" Editor's Draft 13 April 2011 W3C Editor's Draft, 2011, W3C.