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, with page navigation implemented via HTML buttons. More information


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 list of drawings to be displayed is defined in the HTML file, and HTML buttons are used for page navigation. A new drawing can be added to the Viewer by simply adding its filename to the list and adding an HTML button to load the drawing.

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

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 invoked using HTML buttons.

The demo uses simulated data. However, provided with a data source in a real application, it will display live data. The GlgViewer example in the examples_html5 directory of the GLG installation provides an example of using JSON for receiving data from a server.

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

Data Connectivity

The demo uses simulated data for animation. An application will use live data obtained from the server via asynchronous HTTP requests.

The data connectivity between the graphics and custom data sources is implemented using tags defined in the drawing at design time in the GLG Builder or HMI Configurator. A tag is attached to a dynamic data driven parameter of a graphical object. The tag's TagSource property represents a data source variable from the back-end data acquisition system that drives the animation.

An example of using asynchronous HTTP requests to query live data from a server in a JSON format may be found in the GlgViewer example in the examples_html5 directory of the GLG installation.