Making control panels with SVG and Microsoft Office

Keywords: SVG, control panel, SCADA, remote control, Microsoft Office, SOAP, XML-DA

Gildas TREBAOL
Chaville
France
gtrebaol@free.fr

Biography

Gildas TREBAOL is a software engineer that develops real time control applications (Web-enabled SCADA applications, fieldbus interfaces, device drivers and control sofware for industrial automation or military equipments).


Abstract


This paper shows how SVG animated views can be used in remote control applications, and a software tool developed for making SVG control panels with Microsoft Office.

The original XML file and the SVG sample animations presented in this paper are available at http://gtrebaol.free.fr/doc/svgopen/2005/


Table of Contents


1. Principle of control panels stored in SVG files
2. Usage of SVG control panels in different configurations
     2.1 Control panel + real time connection
     2.2 Control panel + client-side script
     2.3 Control panel + object-oriented animation script
3. The tools for making SVG control panels
     3.1 The generation process
     3.2 Creation of a SVG view in a MS-Word document
     3.3 Using of MS-Office shapes or user-defined parametric shapes
     3.4 Configuration of the animations
     3.5 The set of available animations
     3.6 Hierarchical organization of the animations
     3.7 Inclusion of client-side scripts, encryption of ECMAScript files
     3.8 Connection to a remote control server
     3.9 Management of the generation process with the make utility
          3.9.1 Compilation reports
          3.9.2 Generating views in multiple formats
          3.9.3 Generating a catalog of views
4. Other competing or complementary tools
     4.1 Tools for making SVG drawings
     4.2 Tools for viewing SVG
     4.3 Other standards for animated vector graphics
          4.3.1 SVG versus Microsoft XAML
          4.3.2 SVG versus Macromedia Flash
     4.4 Tools for designing industrial control panels
     4.5 Tools for the remote control based on HTTP and XML protocols
5. Conclusion
Bibliography

1. Principle of control panels stored in SVG files

A SVG control panel is composed of 5 parts:

  1. The SVG graphics:
  2. XML data:
  3. A standard animation script:
  4. An optional client script:
  5. An optional communication layer:
principle.gif

Figure 1: Principle of SVG control panels

The corresponding .JS or .SVG files are stored in a standard Web server and downloaded on each web client. In a typical application, the size of the downloaded files is usually small:

2. Usage of SVG control panels in different configurations

configurations.gif

Figure 2: Usage of SVG control panels in 3 configurations

2.1 Control panel + real time connection

The goal is to display many real-time control variables on the schematic view of an automated system:

pseudo_scada.png

Figure 3: Animated view in SVG format, Firefox V1.0+ or Mozilla 1.8b2 (File size = 89KB)

animations.png

Figure 4: Annotated view describing the different kinds of animations

2.2 Control panel + client-side script

The goal is to develop a single animated view compatible with different Web browsers (SVG, VML, Flash):

diesel_word_2000.png

Figure 5: View designed in MS-Word 2000 (file size = 58 KB)

diesel_firefox_svg.png

Figure 6: View in SVG format, Firefox V1.0+ or Mozilla 1.8b2 (File size = 33KB)

diesel_ie6_svg.png

Figure 7: View in SVG format, Adobe SVG V2, Internet Explorer 6 (File size = 33KB)

diesel_ie6_vml.png

Figure 8: View in VML format, Internet Explorer 6 (File size = 47KB)

diesel_ie6_swf.png

Figure 9: View in SWF format, Flash plug in V7, Internet Explorer 6 (File size = 19KB)

2.3 Control panel + object-oriented animation script

The goal is to make a control panel similar to a user-interface developed with an object-oriented language like Java or Visual Basic:

machine_panel.png

Figure 10: View in SVG format, Adobe SVG V3, Internet Explorer 6 (File size = 31KB)

machine_panel_digits.png

Figure 11: Zoom on the included bitmap images used for the neon digits (33KB), the knob (7KB), the buttons (2KB) and the lights (1 KB)

3. The tools for making SVG control panels

As exposed in the first section, the panels are designed and configured with MS-Office (version 2000, XP or 2003):

3.1 The generation process

The files produced with MS-Office are translated to XML and SVG by a suite of document-processing tools:

Tools developed for generating SVG views from MS-Office documents
ProgramSizePurpose
office2XML428KBConverts documents from MS-Office format to XML and SVG format.
SVG2SWF405KBA translator that generates a static Flash image from a SVG image.
HTML2BMP32KBA screenshot utility that generates a raster image from a HTML page containing vector graphics.
bmf_convert228KBA utility for resizing and converting raster image in different formats.
scrypt44KBA utility for encrypting client-side scripts, in order to prevent reverse engineering.
np_create68KBA utility for generating a MS-Word design having an image size specified in pixels.
make104KBAn improved version of the UNIX make program, used for regenerating the out-of-date XML files after the update of a MS-Office source document.

Table 1

process.gif

Figure 12: The document-processing flow

3.2 Creation of a SVG view in a MS-Word document

embedded_view.gif

Figure 13: A MS-Word drawing that generates a SVG view

The np_create program can be used for creating an empty design with a specified width and height. It is useful when the size of a SVG view must be exactly the same as the size of a HTML <EMBED> or <IFRAME>.

3.3 Using of MS-Office shapes or user-defined parametric shapes

Microsoft Office provides a number of built-in shapes. Many shapes are parametric, so that you can adjust the shape with small yellow sliders.

Office2XML can translate most of the parametric shapes of MS-Word 2000. You can also develop your own parametric shapes, and include them in your MS-Word drawings.

parametric_shapes.gif

Figure 14: Some standard and user-defined parametric shapes

3.4 Configuration of the animations

In a drawing, each animation is a group of graphic elements that contains:

configuration_textbox.gif

Figure 15: Configuration of an animation

The principle of embedding parameters in a group of graphic elements allows to duplicate any animated components:

On the example view in section 2.2, you can see the various animations configured on the Diesel engine. The groups of animations can be nested, thus allowing to build a modular view like in section 2.3.

3.5 The set of available animations

The SVG control panels provide most of the animation functions available on a traditional SCADA system:

Different types of animations
#Animation name

RO: read-only

RW: read-write

WO: write-only

-- : static

Description
1colorROSets the color of a SVG element.
2buttonWOPush button.
3bistableRWOn/off button.
4geometryROGeometrical trajectory.
5displayROTextual display.
6inputRWTextual input.
7include--Include a ECMAScript file.
8hideROShow/hide animation.
9level_topRORectangular clipping from the top.
10level_rightRO... from the right.
11level_bottomRO... from the bottom.
12level_leftRO... from the left.
13radiomenuRWMulti-button selector.
14rotationRORotation animation.
16sequenceROSet one shape to display in a group of several shapes.
17selectRWIdem.
18sliderRWTranslate a shape on a linear or circular track.
19translationROIdem.
20stripROTranslate strips of bitmaps in a clipping rectangle.
21Border--Convert a rectangle to a 3D border.
22round_poly--Convert a polygon to a rounded polygon.

Table 2

3.6 Hierarchical organization of the animations

object_identifiers.gif

Figure 16: The hierarchical structure of animation identifiers

3.7 Inclusion of client-side scripts, encryption of ECMAScript files

Each SVG view can include optional client-side ECMAScript files:

3.8 Connection to a remote control server

3.9 Management of the generation process with the make utility

When a project contains many views, Office2XML and the other tools can work with the traditional make utility:

Here is a sample Makefile that generates all the views shown in this paper:

OFFICE2SVG = office2xml.exe -w e -e utf8 -x 1 -f svf -s t -j ../script/

.SUFFIXES: _v.html .html

.html_v.html: ../src/
	@echo building $@ from $<
	$(OFFICE2SVG) -o $@ -i $<

all: \
	diesel5_v.html		\
	panel2_v.html		\
	pompage7_v.html		\
	sirven_v.html		\
	SVG_views_figs_v.html

The following subsections present the main options of Office2XML.

3.9.1 Compilation reports

Optionally, Office2XML can generate a compilation report inserted in the HTML output file, before each view:

compiler_reports.png

Figure 17: Sample report table

3.9.2 Generating views in multiple formats

Optionally, Office2XML can generate views in the following formats:

When several output formats are enabled, the HTML output file contains a format selector inserted under each view:

multiple_formats.png

Figure 18: Sample file format selector

3.9.3 Generating a catalog of views

Optionally, Office2XML can generate a catalog showing the views generated from each MS-Word file:

catalog.png

Figure 19: Sample catalog of generated views

4. Other competing or complementary tools

4.1 Tools for making SVG drawings

You can also make SVG drawings with:

Office2XML is competing with these tools:

4.2 Tools for viewing SVG

You can view SVG drawings with:

Our SVG tools work in complementarity with the SVG viewers. We have tested the compatibility with Adobe and Mozilla SVG viewers. Upon request, we can check the interoperability with the embedded SVG viewers that you are using.

4.3 Other standards for animated vector graphics

SVG is competing with several proprietary standards, technically equivalents. SVG has the advantage to be an open standard:

4.3.1 SVG versus Microsoft XAML

I think that MS-Office file formats are more reliable than other Microsoft formats like XAML:

Moreover, bridging SVG and XAML seems easy:

4.3.2 SVG versus Macromedia Flash

Since Adobe and Macromedia have merged, the future of SVG could seem compromised. However, I think that SVG is still a safe format because SVG can be translated to SWF:

Using MS-Office for producing Flash documents could seem a weird technique, but it has some advantages:

This assertion can be illustrated by a real example: In 2004, I worked on the remote control software of an automated water purification plant.

For specifying each control panel of the user interface, our manager made MS-Word drawings like this one:

sirven_word.png

Figure 20: Control panel edited with MS-Word

Since our manager was not a software engineer, he hired a Flash developer for making the user interface. The Flash developer worked for more than 3 weeks for reproducing the same view in the Flash-MX environment:

sirven_swf.png

Figure 21: The same panel designed with Flash-MX 2004

On the other hand, translating the MS-Word view to SVG format could be done in a snapshot with office2xml, and viewed on Firefox without installing any plug in for SVG:

sirven_svg.png

Figure 22: The SVG panel generated from the MS-Word drawing

The Flash view generated from the SVG view is similar to the SVG version, like the example shown in section 2.2.

4.4 Tools for designing industrial control panels

SVG control panels are competing with other file formats used for configuring industrial control panels.

Nearly all the major automation companies have developed several proprietary tools for configuring their control panels. For the customer, that means the following troubles:

SVG control panels can replace traditional control panels when a factory is equipped with a remote control gateway:

4.5 Tools for the remote control based on HTTP and XML protocols

SVG control panels work in complementarity with the remote-control products based on XML:

5. Conclusion

With our suite of XML processors, the large community of MS-Word users can design sophisticate SVG control panels.

These SVG control panels can integrate animated vector graphics and traditional user-interface controls (text displays, buttons, sliders, ...) in a coherent architecture based on well-known and stable file formats (SVG, ECMAScript, Microsoft Office).

Used in combination with SVG-enabled Web browsers and XML+HTTP protocols like XML-DA, the technique of SVG control panels provides a lightweight and versatile solution for many remote control applications in industrial automation and consumer electronics.

Bibliography

[SVG]
Scalable Vector Graphics (SVG) 1.0 Specification, J. Ferraiolo, editor, W3C Recommendation, 4 September 2001. Available at http://www.w3.org/TR/SVG.

XHTML rendition made possible by SchemaSoft's Document Interpreter™ technology.