Visualization and Interaction with Synoptics

Implementation Based in SVG

Table of Contents

Related Work
Mobile SCADA with Thin Clients – a Web Demonstration
SVG for SCADA Applications
Control Systems and Real-Time Metering Systems
Web-based Industrial Process Monitoring
Solution Proposal
System Requirements
Data Model
Module Division
Technological Selection
Graphical Objects Organization
Visualization Model
Supported Animation Types
Graphic User Interface Elements
Format Conversion
Performance Analysis
Client Component Support

This paper is related to a project regarding specification to the “Web HMI” (Human-Machine Interface) [Rodrigues04] being developed in Efacec, a Portuguese company dedicated to electromechanics and electronics. The project consists in adding a multi-user Web access to some of the company’s products. The complexity of such a project leads to module partitioning, being the presented project conducted mostly over the synoptics (animated schematic diagrams) module.

SCADA is the acronym for Supervisory Control And Data Acquisition. Refers a large-scale, distributed measurement and control system, and is also used to refer to the central unit which monitors and controls a complete site. Most of the control is actually performed by smaller and simpler units, typically supporting override or supervisor level management. SCADA/HMI systems motivated essentially for the need of a friendly front-end to a complex system containing several distributed components across a site. Among several data presentation formats made available are included lists (tabular format) and engineering-equivalent diagrams, added with animation and color information, designated by synoptics (Figure 1).

(adapted from [Wikipedia06a])

SCADA systems are typically seen as low interoperable, legacy proprietary systems. Nevertheless, emergent standards with interoperability in mind, such as IEC 61850, are already starting to change the way they are seen, and the Web 2.0 is no exception to this major turnover. Interest has been rising due to the omnipresence, reduced setup process, potential interoperability and maintenance easiness which overall characterizes Web-based solutions.

The Web 2.0 [O’Reilly05] is a concept born by a turnover in the traditional Web. Success enterprises created using the Web as a platform and totally dependent on it, as well as major improvements in Web experience were the main reasons to coin the term. Web experience improvements were mostly supported by the introduction of new technological approaches, such as AJAX [Garrett05], bringing usability to a level similar to desktop applications and, therefore, allowing the creation of true Rich Internet Applications (RIA).

The project is conducted within CLP 500, a platform developed by Efacec which represents a generation of automation equipments with high hardware and software integration levels. On the top of the platform’s hierarchy there is a central unit (Figure 2), seen as the server component for the presented work.

Currently, the CLP 500 platform supports local, single-user access (though multi-user environment is supported). It is expected, with the work here presented, to add remote access capability, through a local network, as well as multi-user access capability. The diagram in Figure 3 represents the goal to be achieved. It shows the need to keep a substantial abstraction level while designing the system, in order to allow access by multiple devices, such as personal computers and mobile devices.

The present document is organized in a sequence, partially analogous to the Software Engineering process used as project guidelines. In section 2, the state of the art is analyzed to understand the need to conduct such a project. Section 3 advances a solution proposal to the problem, followed by an overview of implementation, presented on section 4. Section 5 evaluates the obtained results and section 5.2 makes the summary of the work developed, of relevant difficulties found during project the course and of matters to address in the future.

Recent developments in SVG and related technologies are awaking both academic and industrial communities, these realizing the emerging potential in many applications: from e-learning to industrial control, added value for costumers and new commercial opportunities are being created. Nevertheless, existing solutions are still somehow embryonic, waiting for platform and technological stability. The present work does not attempt to present a rich feature system, but a stable framework which allows obtaining it in a modular form, with the reliability and performance expected from an enterprise application.

The framework, in the synoptic visualization and interaction concern, should offer a feature level at least similar to the traditional synoptic environment of CLP 500 (Figure 5) [Magalhães06].

In terms of synoptic features, the new system should offer (window at the right, in the image) device representations with existent data and poke points (interactive areas) used for interaction. Devices, whose alarm state is not acknowledged, blink in intervals to call for the operator attention. In terms of interaction, internal and external navigation mechanisms are available. The first type includes, essentially, zoom and panning, while the second type is related to synoptic navigation by replacing the current window or creating a new one.

Other interaction features include control dispatch and attribute visualization. These consist in opening a context (controls or attributes) window, after selection of the correspondent graphical device, for action taking and detail viewing, respectively. The system holds a number of other interesting features, such as multilayer, de-cluttering, thumbnail and configurable views for initial setup and/or quick access over a predetermined area of interest.

The system design was preceded by a requirement specification. Multiplatform concern, support for communication over several network types (such as the Internet in addition to intranet), reliability, performance and security goals were conceived in order to allow phasing and establishing priorities for the project.

In this section, the system implementation is analysed, with emphasis on the client component of the framework, for technological and proof of concept reasons.

In synoptics, typically there are many animated objects to represent, which made a pooling approach for graphical updates unfavorable. This originated an implementation of the client’s graphical engine based on the MVC (Model-View-Controller) software pattern [Gamma95]. This foresees the existence of a data model, for which there is a set of different views and modifier agents (controller).

Two new device concepts were created to implement this pattern: discreet and continuous. Discreet devices, usually the most common in traditional synoptics, consist of distinct graphical representations, shown in accordance with the physical device state. Continuous devices consist in using a data source, which may assume a wide range of values, to animate a graphical object’s property or to be displayed in a gauge. Therefore, the MVC pattern was adapted to best suit the project’s needs.

One of the main differences to the original software pattern is the fact that state information and set state methods are associated to observers and not to subjects. This solution allows elevating the model abstraction, making possible the usage of different observer types over the same graphical object. Another advantage is lowering the processing load, as the state information is not acquired from the graphical object but from the internal data model. Using current state information at observer level avoids creating an additional object, used to link the data object to the graphical object, which had to be sufficiently abstract to support the available observer types.

To create a higher level of abstraction in the framework, and also for information encapsulation reasons, the entity types referred in 3.2 were modeled as a single data type.

To determine the requirements fulfilment level and evaluate the solution’s effectiveness, a set of tests was conducted, mostly focused over performance and integration with the target product. The obtained results point out good integration and very reasonable performance levels. Several foreseen improvements are identified and marked as future work. Project output examples follow.

Carrascal main synoptic (Figure 13) attempts to show proof of effectiveness: while containing a relevant number of dynamic elements (over 250 animated devices), a usable user experience is still achieved, even during high stress system operation.

Alqueva dam synoptic (Figure 14) shows employment of the continuous animation controller (bar elements used to display water level), demonstrating one of the possible uses for this very flexible abstraction.

IAT command using PDA (Figure 15) was a sample demonstration created to demonstrate the feasibility of accessing the developed system through mobile devices.

System requirements validation included performance parameters, from which some are here included.

The test environment was composed by an embedded hardware central unit (referred to as the “server”), a consumer machine (referred to as the “client”) and an intranet connection (referred to as the “network”).  The server consisted of a x86 400 MHz CPU and 512 MB of RAM, running Windows XP Embedded SP2 and the latest available versions of CLP 500 (5.2.1) and HMI 500 (0.8.3) software; the client consisted of a x86 3.0 GHz CPU, and 1 GB of RAM, running Windows XP SP3 and the latest available versions of Mozilla Firefox (3.0.1), Opera (9.52), Safari (3.1.2), Internet Explorer (7.0) with Adobe SVG Viewer (6.0) and Batik (1.7).

The synoptic environment used in evaluation is a synoptic containing over 250 animated elements, from which about 200 are discreet animations. For comparison purposes, modified versions of the same synoptic were created, while retaining the original graphic information: without framework support, to measure the framework overhead; without animated entities, to measure the framework scalability. Numerical results presented were obtained through the measurement of three samples for at least two of the stated client implementations; an arithmetic mean is afterward computed on the set of gathered values.

Table 1 states measured synoptic load time. In the developed system, there is a reasonable difference between loading graphics information only and loading the framework also (with no animated entities); this foresees potential improvements on the framework loading process. Loading a relevant data model (more than 250 animated entities) also contributes significantly for a loading time increase; nevertheless, assuming this number of entities to be a medium to high complexity sample, the typical loading time will keep below the target 10 seconds. In comparison with the traditional system, the much higher loading times can be explained by the network overhead and pre-processing involved (for example, uncompressing graphics data), not suffered by the traditional system.

Table 2 shows processor usage for the most relevant graphical events: device state change and unaccepted alarm state (which corresponds to visual state toggling in predefined intervals). Static environment and a high number of periodic device state changes bring to light the network overhead involved in the developed system; graphically dynamic situations (large number of devices in unaccepted alarm state) reveal values for the developed system slightly below those of the traditional system, which can be seen as a considerable achievement.

Table 3 displays results obtained for measuring memory usage in distinct situations. By comparing the developed work’s behavior in all three situations, it can be stated that the framework’s memory overhead is, to some extend, low compared to the overall graphics rendering. The traditional system has a much lesser memory footprint, which would be expected given its high specialization.

Table 4 displays network bandwidth required for operation in different situations. The measured values for the developed system anticipate potential improvements, although the framework is already suitable for usage over commonly available connections (ranging from 1 MBps Ethernet to commercial Internet connections). The traditional system wasn’t evaluated for this parameter, as it was designed for local access.

This paper presented an implementation for visualization and interaction with synoptics. Main project purpose was to add remote access capability to an existing product, foreseeing application to other potential company products. The project included development of a specialized graphics solution for synoptics, due to the specificities associated with this particular SCADA data presentation format.

It can be stated that the main project goals were accomplished: a functional, stable framework for visualization and interaction with synoptics was obtained. Regarding the client component, the technological investment in SVG and ECMAScript (part of SVG specification) revealed effective. The association allowed obtaining a platform for visualization, interaction and implementation of domain-specific logic in a very flexible approach. In terms of the server component, the concern in keeping a high abstraction level during the system design and implementation allows (theoretical) access for clients based in different architectures and technologies.

The developed system brings a new range of features, added to the traditional synoptic system feature set. Among them are included:

  • Partial client access to the system by mobile devices;

  • Implementation of dynamic device animations not supported by the traditional system;

  • Potential to apply the framework to other company products.

During development, several difficulties were raised, mostly originated in the high bet placed in SVG as RIA engine. The absence of GUI features, previously referred, was one of the hardest issues to cope with: it meant developing a small GUI element set for user interaction. Implementation limitations were another major challenge, as most widely available SVG implementations still pose important content restrictions. While scripting allows overcoming some of the existing limitations (such as lack of SMIL support, for example) native support would surely boost performance and ease both content generation and system maintenance. Finally, interoperability and incoherent behavior across implementation were also recurrent problems. Coping with the standards is overall good among most implementations, although there are minor to important inconsistencies for some features (such as zoom and pan, for example). The behavior mismatches required special treatment, additional trickery or even switching to an alternative approach for the same purpose. Some of them are due to issues in implementations, other indicate the need of additional, wider and more accurate test-suites for the specification.

Great expectation is placed on SVG 1.2 [Andersson05] which seems to address most of the experienced difficulties, through a much more extensive test-suite and interesting feature introduction (such as non scaling stroke, for example) for application in synoptics and other technical illustrations.

From the large set of foreseen enhancements, the following are highlighted:

  • Implement remaining features supported by the traditional system such as multi-layer, pre-configured views and less commonly used animation types;

  • Uniform user interaction among supported implementations (native browser, plug-ins) for coherency improvements while interacting with the system (GUI elements and synoptic intra-navigation features such as zoom and pan);

  • Switch to a server-push approach for data exchange in order to achieve an important reduction on latency times and required operating bandwidth.

The author would like to express his gratitude to the Automation and Protection team elements who, especially during design and prototyping phase, fed the project with interesting and valuable feedback.

[Andersson05] Ola Andersson et. al., April 2005, Scalable Vector Graphics (SVG) Tiny 1.2 Specification, W3C. (

[Bos05] Bert Bos et. al., June 2005, Cascading Style Sheets, level 2 revision 1, W3C. (

[Brand03] Klaus-Peter Brand et. al., 2003, Substation Automation Handbook, Utility Automation Consulting Lohmann, Switzerland.

[Crowford06] Douglas Crowford, March 2006, JSON Data-interchange format. (

[ECMA99] Unknown authors, December 1999, ECMAScript Language Specification, ECMA International. (

[Efacec08] Unknown authors, 2008, Efacec, Efacec Group. (

[Gamma95] Eric Gamma et. al., 1995, Design Patterns – Elements of Reusable Object-Oriented Software, Addison-Wesley.

[Garcia04] Rodrigo Garcia and Esther Gelle, 2004, SVG for SCADA Applications – A practical approach, SVG Open. (

[Garrett05] Jesse Garrett, February 2005, Ajax: A New Approach to Web Applications, Adaptative Path. (

[Goodger04] Ben Goodger et. al., August 2004, XML User-interface Language (XUL), Mozilla Foundation. (

[Lewis05] Christopher Lewis et. al., September 2005, SPARK - SVG Programmers' Application Resource Kit, Sourceforge. (

[Magalhães06] Helder Magalhães, June 2006, HMI 500 – Especificações, Efacec Engenharia S. A..

[Magalhães07] Helder Magalhães, April 2007, HMI 500 – Desenho, Efacec Engenharia, S. A..

[Nick05] Jay Nick, 2005, SVG Demos of Control Systems and Real-Time Metering Systems, WPS Energy. (

[O’Reilly05] Tim O'Reilly, September 2005, What Is Web 2.0, O’Reilly Media, Inc.. (

[Paulo05] Rogério Dias Paulo, 2005, Web-based Industrial Process Monitoring, Efacec Sistemas de Electrónica S.A.. (

[Rodrigues04] Paulo Rodrigues, February 2004, URT500 – Requisitos – Web HMI, Efacec Sistemas de Electrónica S.A..

[Tan02] Lukas Tan and Ken Taylor, November 2002, Mobile SCADA with Thin Clients – a Web Demonstration, MIEAust. (

[Wikipedia06a] Several Authors, March 2006, SCADA, Wikipedia, the free encyclopedia, Wikimedia Foundation. (