GEMOS Building Management and Security system's SVG Interface

For the SVG Open 2005 conference

Keywords: SVG editor, building management, graphical user interface (GUI)

Mr. Christopher B. Peto
Freelance Software Developer
Resource Solutions
Höhenweg 34
63303 Dreieich


Chris Peto has been working for over 14 years in the Building Management and Security Systems. His main areas are Graphical User Interfaces (GUI), Building automation, Device drivers, and Process control and management. Chris is involved in developing Christopher Lewis’s CGUI and a member of the SPARK team. Chris is one of the founding members of Vectoreal.


Any visualization of a building is done, normally, in vectors. Architects create/design all buildings today through CAD in a vector format, i.e. AutoCAD DWG or DXF format. SVG leads to an easy conversion/importation and visualization of these already finished plans as apposed to a static raster representation which when zooming in loses object definition, i.e. Sensors or Walls.

Real-time building visualization and control requires a dynamic format, like SVG which makes it easy to change the visualization of an object through the DOM and dynamic server created pages depending on messages and statuses from the real-time system.

GEMOS is a web based complete monitoring and control system for Buildings. It is a real-time system which can track/control external devices through interfaces on the server. The building areas/floors are visualized through floor plans in SVG. Message and Alarm handling follow through Measures (pre defined manual and automatic action scripts) and floor plan visualization. A floor plan can contain active objects, i.e. Fire, Camera, and/or Intrusion Sensors, Etc, or Intelligent objects, i.e. a gauge, all using SVG.

This presentation will show why and how GEMOS has used these SVG characteristic in a real-time system in the following ways:

1. Import/conversion process from CAD data in which the objects are separated from the graphics and put into SVG plans and database for later manipulation and visualization purposes. A very obvious advantage to this process is the significant decrease in initial system setup and system maintenance.

2. SVG dynamic manipulation in an all SVG editor. The online SVG editor interacts with the GEMOS web server to edit or create plans/displays that contain intelligent objects and already existing building objects. Through the use of intelligent objects the system becomes a very sophisticated modular structured organism, in which new objects can be “plug-ins” brought from different devices and device categories through the server. The editor has the ability to manipulate all objects without knowing what they are.

3. Real-time visualization and control of the system. • Very complex navigation panels which allow navigation of entire floors. • Use of push method to get status updates from server without polling. • Use of layering method to logically order objects by categories.

4. Printing under Windows and Linux. GEMOS requires a Alarm printing system to fulfill some countries fire systems, i.e. Austria’s ÖNORM.

Table of Contents

1. Introduction
2. Why SVG?
     2.1 Scalable
     2.2 Text Based
     2.3 Ability to Layer/Group
     2.4 Animated
     2.5 Standardized (Open)
3. Interface Implementation
     3.1 CAD Import assistant
     3.2 Dynamic creation of SVG with SVG Editor
     3.3 Display with Navigation Panel and Layers Dropdown
     3.4 Printing

1. Introduction

GEMOS is a web based Building Management and Security system. Real-time information is obtained from devices attached to the web server and visualized to stations through alarms and SVG graphic displays. This paper will describe the requirements for GEMOS and how they were solved with SVG and ECMAScript.

2. Why SVG?

Scalable Vector Graphics (SVG) was determined to be used in GEMOS because of its abilities like Scalable, Text based, Layering, Animation, and Standardization.

2.1 Scalable

One of the main requirements for GEMOS was that its user interface be used and displayed on many different stations and systems using web browser technologies with different hardware. Each of these systems could require a different layout due to screen size limitations. CAD drawings would be used that were already in a vector format. Before the use of SVG, CAD floor plans were manually scaled down to a fitting raster image. If any walls or sensors must be moved then the complete process of converting to a raster image and manually moving sensors was redone for each plan. Through the use of SVG in the CAD import assistant these scalable graphics can be easily converted and imported automatically plus scaled to fit any screen size.

2.2 Text Based

GEMOS uses a home grown server scripting (GMH) which, as all most others, produces a text based output. Because of the text based format , it is easy to dynamically produce an XML text in the format of SVG.

2.3 Ability to Layer/Group

In CAD drawings layers are used to separate and organize the different type of objects. This layering was required to be able to turn off certain areas of a complexity that are overwhelming to security or even fire departments that needed quick optimized information in order to get to the needed situation as fast as possible. This laying also provides a way of showing information that the user has the need to know. SVG grouping made it easy to directly use this 1-to-1 representation.

2.4 Animated

Certain objects and standards require that the responding agency, i.e. fire departments, can quickly come to a situation and find what has caused the problem in the least amount of time within a high stress situation. SVG SMIL allows the alarming sensor to stand out among the rest of the graphic, what could be at least 100 sensors, with blinking or direction indicators and provide a fast recognition of a possible thread or danger.

2.5 Standardized (Open)

Because SVG is a world wide standard the interface is well documented. The committee that decides upon the standard is made up of well know authors from well established companies and companies that also use this technologies and understand its demands and needs.

3. Interface Implementation

GEMOS’s SVG interface provides a solution from start to finish. It starts by the Architect/Planner that draws and designs the original building’s floor plans and proceeds down to printing out a floor plan for fire department that puts out the fire. A building is organized of a hierarchy of floors and sensor categories. These layers consist of base plan (usually the walls and solid structures), layers (usually sensors or buttons), and views (preset zooming/scaling on a complete floor).

3.1 CAD Import assistant

Building management is a constant evolving process. Walls are moved to accommodate for different company needs. New systems or existing systems are being change/updated all the time. This system of evolution or change needed to be optimized to allow for less expense and a high level of confidence in maintaining an accurate system of visualization and reporting while being a cost effective. The CAD Import Assistant realizes this requirement by allowing the original plans from the responsible designer/planner companies/departments to be changed with accuracy and while staying with budget.

The process starts with the floor plan being edited and saved by the architect. This CAD formatted (DXF or DWG) file is then saved into two different DXF files, one for sensors and one for walls or main structures. The DXF, with sensors, is then processed with ela-soft’s Perl script, which extract sensor coordinates and attributes and places them in a Comma Separated Value (CSV) file to be later used in CAD Import Assistant. The second DXF/DWG file of only static structural objects is converted with Savage Software’s CAD2SVG . Both these files are assigned the same name except for the ending, i.e. 1Floor.csv and 1Floor.svg, and uploaded to the server.

NOTE: Savage Software’s CAD2SVG is a CAD (DWG or DXF) to SVG converter that can be found at .


Figure 1: CAD Import Assistance File preparation flow diagram

From GEMOS’s web interface the CAD import assistant is opened and this 1Floor plan is used as background in the GEMOS hierarchy structure. There is a base floor plan and layers of sensors organized by sensor group, i.e. Intrusion or Fire, directly relating to their CAD layers. Figure 2 shows the CAD Import Assistant’s main start window.


Figure 2: CAD Import Assistant main window

Here the different object from the hierarchy tree (left), are connected to the various layers (right). Only one background SVG and sensor CSV pair are present for the entire floor, so regular expressions are used to filter only the desired sensors and their attributes, for each layer, out of the CSV. Because both files have the same name an extra field is not used for the CSV rather the name is constructed from the background SVG name using the .csv ending.

By pressing the “Sensor Check” button (far right) a new windows (see Figure 3) appears and is filled with all sensors and attributes matched by the regular expression.


Figure 3: Sensor association and verification preview window

In this window sensors can be associated to the actual GEMOS objects (left) and there position can be adjusted (See Figure 4) and seen in the preview (sensors as little red dots).


Figure 4: Sensor placement and preview frame

Here is a flow diagram of the CAD Import Assistant’s process.


Figure 5: Flow diagram of CAD Import Assistant

By pressing save all settings are written to the server in session parameters to be used in final database writing for this layer.

Upon verification of all layers, all session parameters are written to the database, plus a connection file is written which can be used by re-importing of this floor’s layers.

3.2 Dynamic creation of SVG with SVG Editor

The SVG editor is used to create or edit complete floor plans. It consists of many frames (See Figure 6) such as hierarchy tree (objects insertion frame, HTML and JavaScript), attributes (HTML and JavaScript) frame, main editor frame with the graphic and SVG properties window (pure SVG and ECMAScript), and refresh/loading (HTML and JavaScript) frame. The SVG editor’s SVG user interface is built using Christopher Lewis’s CGUI library .

NOTE: CGUI was developed by Christopher Lewis to be used in his GNOME viewer. The library is under LGPL and can be found here

When the SVG Editor is first started up all objects are loaded into session parameters from the database and any changes are recorded over the session parameters for later saving/loading of the graphic. After all frames are initialized and loaded the loading frame inserts the objects into the editor’s SVG interface.

GEMOS has much functionality in HTML components that could not be rewritten for SVG (due to cost and maintenance factors). Because of this mixture of HTML and SVG, GEMOS was forced, at the time of implementation, to use Adobe SVG Viewer (ASV) 3.x and Microsoft’s Internet Explorer with their ability to communication between the SVG and HTML worlds. It is hoped that with the outcome of newer SVG viewers that also support communication between the HTML/SVG worlds GEMOS’s SVG Interface will reach another major objective as to interoperability.


Figure 6: SVG Editor main window layout and its frames

Each object type, i.e. Sensor or Circle, has an object-oriented ECMAScript class like CCircle or CSensor that contains its attributes and properties, plus a reference to the DOM SVG object. All objects are then sorted in arrays. This optimizes the overall speed by not having to access the DOM through its functions, except when a change of position or style has been performed on an object.

New object insertion can be performed through the Object insertion HTML frame or the native SVG object tools, i.e. Text or Cubic Curve tool. The HTML frame contains system defined objects such as Sensor that pertain to system device or intelligent objects. When selecting an object from the HTML, a server script (GMH) is called to add the object to a session variable. This script calls a loading script in the loading frame. The loading script calls the corresponding object’s load script which knows how to create the object from the session variable and call a creation ECMAScript function from the main SVG editor frame. This function will create the object class and insert the object into the SVG Editors main object array. The main object array also inserts the objects SVG into the DOM. See figure 7 for the complete flow.


Figure 7: SVG Editor flow diagram

Object modification is achieved over the same process. This can occur from changes in the HTML attributes frame or SVG Editor Attributes window. Upon changes the session variables are changed. When the changes came from the HTML attributes frame the object’s corresponding load script is called through the loading frame which modifies the object in the SVG editor main frame. If the changes came from the SVG editors SVG interface then only the session variables are changed.

// Rect-Element

: $$ElemType==-100 &&   matchstr($$ElemAttrib,"(.*)\\|(.*)\\|(.*)\\|(.*)\\|(.*)") ?

    !doUpdate ?

Example 1: GMH server script to create a rectangle object over ECMA Scripting calls

function AddRectSvg(bIsSub,svg_doc,svg_root,x,y,w,h,style,
                    url,id,filter,rx,ry, version)

  if(!bIsSub) {
   var newitem = new CRectangle(id,x,y,w,h,rx,ry);
   newitem.filter = filter;
    //append to main graphic object list
  else {  //is a sub layer that cannot be edited
    var newitem = svg_doc.createElement("rect");
    newitem.setAttribute("rx",rx ? rx : 0);
    newitem.setAttribute("ry",ry ? ry : 0);
    if(filter && filter!="")
//function used for most basic SVG native objects
function GenUpdate(svg_doc,svg_root,id,x,y,w,h,style,filter,rx,ry)
  var newitem = svg_doc.getElementById(id);
  if(!newitem || !newitem.js_ref) return;
  newitem.js_ref.filter = filter;
  newitem.setAttribute("filter",filter && filter!="" ? "url(#"+filter+")" : "");
  if(x!=null) {
    if(newitem.js_ref.x != x ||
       newitem.js_ref.y != y ||
       newitem.js_ref.width != w ||
       newitem.js_ref.height != h
    undolist[undolist.length++] = 
          new UndoRedoItem(newitem.js_ref,"position");

    newitem.js_ref.x = x;
    newitem.setAttribute("x",x && x!="" ? x : "");
    newitem.js_ref.y = y;
    newitem.setAttribute("y",y && y!="" ? y : "");
    newitem.js_ref.width = w;
    newitem.setAttribute("width",w && w!="" ? w : 100);
    newitem.js_ref.height = h;
    newitem.setAttribute("height",h && h!="" ? h : 100);
  if(style) {
    if(style != newitem.js_ref.printStyle())
      undolist[undolist.length++] = new UndoRedoItem(newitem.js_ref,"style");

  if(rx || ry) {
    newitem.js_ref.rx = rx;
    newitem.setAttribute("rx",rx && rx!="" ? rx : 0);
    newitem.js_ref.ry = ry;
    newitem.setAttribute("ry",ry && ry!="" ? ry : 0);
function UpdateRectSvg(svg_doc,svg_root,id,x,y,w,h,style,filter,rx,ry)

Example 2: Here is the AddRectSvg, GenUpdate, and UpdateRectSvg ECAMScript functions in the SVG main window

After object insertion or modification the HTML attributes frame is updated to show the attributes for the selected object. If no objects are selected then the HTML attributes windows list all objects with links. If a link is pressed then over the loading frame the object is selected in the SVG Editor’s main frame.

Upon ‘Save’ event received all session parameters for this plan that represent its objects and settings are saved to the database.

3.3 Display with Navigation Panel and Layers Dropdown

GEMOS displays real-time status information through these floor plans created by the CAD Import assistant or created/modified by the SVG Editor. The online display contains a floor plan, navigation dropdown panel and layer control dropdown, all in pure SVG. See figure 8.


Figure 8: Real-time floor plan display with objects, navigation dropdown panel, and layer dropdown.

The user can zoom through drawing a rectangle directly on the floor plan or in the navigation panel or by using the ‘+/-/O’ buttons on the navigation panel. When zooming an ECMAScript controls the viewBox.

Control bars on the edges of the floor plan window perform panning of the graphic. By pressing on the control bars an ECMAScript moves the viewBox in the respective direction. The control bars for each direct (up, down, left and right) are only present when the floor plan can be panned, it is not allowed to pan farther then the boundaries of the initial SVG viewBox.

The layers are built up according to the hierarchical tree pertaining to each floor plan. These layers are achieved with the embedded svg <svg> element. The svg element was chosen over the group <g> element because of its ability to clip and scale. Through the layer dropdown control checkboxes, layers can be turned visible or not visible.

When the mouse is over sensor objects a tooltip text describing the objects name, location and status is shown.

If an objects status changes on the server a predefined refresh script is pushed to the browser’s hidden refresh frame which in turn locates and updates the objects attributes.

GEMOS achieves this push with a proprietary web server, which keep the connection open to the refresh frame.

3.4 Printing

One of the main requirements of the system is a printout containing the sensor in alarm and floor plan within a very specific time period (60 seconds) for the reacting authorities, i.e. Fire department, to use.

Printing for alarms is initiated over action scripts associated to the sensors. These script are performed at the server in which calls the predefined printing script. This script builds the SVG floor plans according to the operating system, i.e. Windows or Linux.

In Windows a proprietary program, WebPrinter, was developed to load the finished HTML/SVG plan and print it to the default printer. This program uses the VC++ HTMLBrowser control. The default printer can be set over parameters to the WebPrinter program. A HTML/SVG mixture is used because of a known bug in ASV 3.x that distorts the SVG unless it is in an <iframe>.

Under Linux the Apache Foreign Object Processor (FOP) is used. In this configuration a pure SVG file is created on the server of the floor plan with sensors. Then a shell script is called to convert the SVG to Adobe PDF using FOP which is then printed to a printer.


I would like to thank Michael Klitsch (ela-soft GmbH) for funding this project and allowing me free reign of design and development. Ela-soft's web page .


I would also like to thank Christopher Lewis for his allowing me to use and further develop CGUI, and for his never ending patience with me while I was coming up to par in CGUI and SVG. CGUI's web page .

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