Home | Demos | Products

WEB HMI / SCADA: GLG SCADA Viewer Web Demo (HTML5 & JavaScript)

This is a pure HTML5 and JavaScript example that demonstrates features used by typical SCADA, HMI, and process control and monitoring applications. More information



Overview

This demo shows an example of a SCADA Viewer application deployed in a web browser using pure HTML5 and JavaScript. The SCADA Viewer loads arbitrary drawings created by the end users and updates them with data without any knowledge about the content of the drawings. As a result, no source code changes are required to add a new drawing or to add more objects into an existing drawing.

The drawings are created with either the GLG Graphics Builder or GLG HMI Configurator, which allow a user to create graphical objects, define their dynamic behavior and the source of data for run time updates using a point-and-click interface, without the need to write graphics code by hand. The drawings are saved into files with a .g extension that are loaded and displayed on a web page using the GLG JavaScript Library.

At run time, the SCADA Viewer loads the drawings, queries the list of data tags defined in each drawing and updates the drawings from the datasources specified by the end user in the data tags.

A configuration file is used to define a set of drawings to be displayed. On start-up, the Viewer reads the configuration file and initializes the navigation menu based on the information provided in the configuration file. A new drawing can be added to the Viewer by simply adding its filename to the configuration file. Alternatively, a list of available drawings can be queried from the server.

A page navigation menu is implemented as part of the GLG drawing. Alternatively, a navigation menu can be implemented using HTML buttons (as shown in the mobile version of the Viewer), or using an HTML list.

The Viewer uses a similar generic approach for defining popup dialogs to implement drill-down functionality. All information about the popup dialogs is defined in the drawing: a new popup dialog may be added by editing the drawing and without any changes to the source code of the Viewer.

The demo also demonstrates the use of an integrated zooming and panning API. By default, it zooms and pans the drawing displayed in its viewing area. However, when the Real-Time Strip-Chart is activated by a corresponding button, the same code zooms and scrolls the data displayed in the strip chart.

The demo uses simulated data. However, provided with a data source in a real application, it will display live data.

The GLG JavaScript Library is used to deploy the drawing on a web page. The library provides an API to load and display the drawing, animate it with real-time data and handle user interaction.

The GLG JavaScript Library implements full GLG run-time functionality present in the GLG C/C++, C# and Java libraries, allowing the same graphical page and programming logic to be shared between the desktop, web and mobile versions of an application. For example, this web demo has the same functionality as the corresponding desktop versions:

User Interface