Programming a measurement data visualization

Development of a web-based visualization tool for laboratories

Schneider Elektronik GmbH, based in Steinbach, develops and produces innovative products for laboratory ventilation technology and has commissioned eWorks to program a web application for room visualization.

The first step was to jointly conceive and develop a web design for the visualization tool. Based on the client's visual templates, a building view (entry page from which you can navigate to the various floors), a floor view (floor plan from which you can navigate to the rooms) and a room view (detailed display of measured values for a specific room) were designed and implemented. As a special highlight, sensory alarm statuses are displayed directly and clearly in these views upon entry.

In order to achieve the best possible platform independence, the user interface was implemented as a web front end using standard web techniques (HTML, CSS, JavaScript, jQuery, JSON, etc.). Since the visualization is primarily used on permanently installed panel PCs, the focus of the web design was to optimize the application for touch devices. For this reason, particular attention was paid to ensuring that all control elements were sufficiently large so that they could be easily operated with fingers. Another focus was on making the application "responsive" (so-called "responsive design") to ensure optimal display on a wide range of screen sizes.

As the most detailed view, the room view offers a detailed display of the current room status, e.g. room temperature, room volume flow, differential pressure to the corridor, etc. The visualization includes information about which fume cupboards, volume flow controllers and other ventilation-relevant devices are installed in a room, which measured values they report and what the target/actual deviation is. Each individual data point in the application is queried at regular intervals using AJAX via a provided JSON interface and updated in real time. In this way, the application always shows the current status without the user having to independently request new information. In the event of an alarm status, the room view also provides precise information about which of the devices triggered the alarm.

Two particular technical challenges were posed by the fact that the software is delivered by an embedded web server with minimal storage space and computing capacity: on the one hand, the memory requirements of the developed jQuery code and the jQuery library itself had to be kept to a minimum so that it could be accommodated in the tiny device memory. On the other hand, the application had to be developed so robustly that it could run for months without having to be restarted. In the end, however, both challenges were solved: the developed application is a) tiny and b) runs for months with constant main memory requirements - without a web server restart and without a web browser restart.

eWorks supported its client from the start of the project with advice and web design, carried out the software development and helped with commissioning and troubleshooting. Schneider Elektronik GmbH has been using the developed visualization software in pilot operation at one of its customers ever since and is optimistic about future implementations at other customers.