Browser Based Visualisation, Live Streaming Data

Designed and developed a browser-based interface to display real-world data using dynamic (SVG) graphics. The browser page was updated using live streaming technology, now superseded by other technologies such as AJAX. Plant machinery could also be controlled using the browser.

Introduction

This project built on the previous projects for the company, making use of the fact that the projects were designed as COM objects. The key concept of the Visualisation Tool was that the browser should provide the graphical user interface for the display of real-time values from various sources. There was no central web site; the software could all be installed locally on one machine although it still operated as a client-server model. Using the browser in this way simply means the system could be expanded easily to work over a network, including the Internet.

The product requirement was for a visualisation tool that would present live information about a building's control performance to the user in graphical form. The data points would be from a range of the company's controller products. In addition it would be able to store logged values, presenting them as a graph and manage alarm limits for each data point.

The project started by building a core engine - an application server - in C++ that would hold a model of the various users allowed to access the system, the web pages and data points that would appear on them. The engine is able to provide dynamic updates of each data point to multiple clients.

A Java applet was designed to provide an interface between the application server and the Internet Explorer browser running on the client. An efficient proprietary protocol was designed to link the browser to the server and keep the bandwidth of this link to a minimum as we wanted the response time to be as fast as possible. The idea behind this system is described by Donepudi S Raghu Kumar in an article on the DevX website.

The application server presented numerous COM interfaces that allowed the web server to access this object model when the client requested each page. The page sent to the browser was dynamically generated using the data contained in the model. For the web server we chose to use Microsoft's IIS as it is provided with the operating system and is easy to configure with ADSI scripts. We created a number of ASP scripts to create the HTML for the client based on the model held in the application server.

IIS was configured using a VBScript to access the ADSI. This interface allows IIS to be administered remotely but also allows the complex configuration to be hidden from the end-user as this can be performed automatically when the software is installed.

SVGs (Scalar Vector Graphics) display the changing values to the user on their browser. These graphics can incorporate scripting written in JavaScript that allows the Document Object Model (DOM) of the graphic to be manipulated at any time. The graphic re-draws to reflect the latest value received without the page needing to be reloaded in the browser. This feature is a significant improvement over other web based visualisation tools made available by other companies.

To cater for the requirements of security we decided to make use of the Windows authentication built into IIS. IIS built in authentication uses the NT challenge response method and encrypts the user's name and password over the connection. However, it means the user's name must be created on the web server. ADSI and WMI are commonly used to create the accounts and are written in JavaScript or VBScript. These are able to create new Windows accounts, add users to groups and so on.

To provide logging and alarming functionality we made use of the Microsoft Desktop Engine, a free version of SQL Server 2000. Any data point can be selected for logging and/or alarming and the rate and limits can be set by the user. This configuration was possible from the browser by using more ASP scripts to accept the changes required by the user and making the calls to the application server using its COM interfaces. As each new value changed it was passed to logging and alarm handling routines where the value would be recorded in the SQL database or an email message generated as an alarm notification to the user.

Another program was developed using Visio as the GUI to configure the graphics, the users, the links to each sub-slide and so on. This configuration tool accessed the application server's COM interfaces and allowed the graphics to be dragged and dropped from the Visio stencil and assigned to a particular data point in the system. It is possible for users to use this application based on Visio to quickly configure each part of their "site" and to test the system using Internet Explorer, either on the same machine or remotely.

The installation program was created alongside the application to allow early beta versions to be evaluated by selected users. At Geode we aim to design a user interface that is powerful, yet intuitive. We often try to get feedback early on in the design so we can include any changes requested quite easily. For the installation of this product it was obvious that our experience with Install Shield alone would not be enough to install the various components required. For these kinds of complex product installations we usually create an HTA (HTML Application) page to present a list of components that need to be installed for the product to work. Among these was IIS, SQL Server, Internet Explorer and of course the part we developed; the application server and its associated ASP pages. The HTA page was able to detect whether components were already installed and would start the installation program of the other components when the user clicked on a link. Although quite a small part of the overall project, the HTA installer was well appreciated because it made the installation of this complex system very simple for the users.

The language specific phrases contained in a SQL database and at the time of writing the product has been translated into seven languages as well as English.

This project was completed in 2003 and we have been receiving excellent feedback from it.

Technology

The technologies involved in this project were very varied:

Benefits

• Simple installation (server platform)
• Browser interface (no software on the client)
• Generic Architecture, can show 3rd party data
• COM Component based, can be used in other products