Home | Demos | Products

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

This is a pure HTML5 and JavaScript SCADA Viewer graphical framework that demonstrates features used by typical SCADA, HMI, and process control and monitoring applications, with page navigation, sending commands, setpoint editing and alarm monitoring.

Functionality User Interaction


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 SCADA Viewer source code provides a comprehensive framework that can be used by an application as is by simply providing custom drawings. It may also be extended as needed to implement application-specific functionality.

The drawings are created with either the GLG Graphics Builder or the GLG HMI Configurator, which allow a user to create graphical symbols, define their dynamic behavior and the source of data for run-time animation using a point-and-click interface, without a need to write graphics code. 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. It also shows how tags can be populated dynamically based on each symbol's ID property. The page context (such as a room number) can also be used to reassign tags on the page.

Page navigation is implemented using either HTML buttons or a tab menu in the drawing. Alternatively, an HTML list may be used to display a list of pages.

The drawings to be loaded are defined by the onclick method of the HTML navigation buttons. In the Plant Monitoring page, the drawings are also defined in the DrawingFileList property of the tab menu. Alternatively, a list of available drawings may be queried from the server.

The Drill Down button on the Command Samples page demonstrates the drill down feature. Clicking on the engine symbol on the Engine page also drills down to a page showing historical data. A Back button may be used to navigate to the previously displayed page.

Hovering mouse over objects (or touching and holding on mobile devices) displays tooltips with additional information. On desktop devices, the cursor changes to hand on mouse over for objects that execute commands on a mouse click.

Clicking (or touching on mobile devices) on symbols in the drawing activates various popup dialogs, including Setpoint Editing dialogs, dialogs for starting or stopping the selected piece of equipment, or the real-time chart dialogs that show historical data for the selected value.

The Alarm button activates the Alarm dialog displaying active alarms that can be acknowledged by Ctrl-clicking (or by clicking on mobile devices) on the selected alarm row.

The Viewer demonstrates two access permission modes: User and Administrator. In the User mode, only monitoring functionality is enabled, while the control functionality (including dialogs for editing setpoints and changing equipment state) is disabled. The Change User Role button activates a popup dialog for changing user role, requiring a password when the mode is changed from User to Administrator.

The Viewer uses a generic approach for defining popup dialogs. 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. A popup dialog is associated with an object in the drawing via a command attached to the object.

The Subdrawings feature is used for value display and value adjustment widgets. These widgets reference an external file (a subdrawing template). Changes made to the template file (.sd) are propagated to all drawings that reference the subdrawing.

The Viewer also demonstrates the use of an integrated zooming and panning API. By default, it zooms and pans the drawing displayed in its viewing area. The Real-Time Strip-Chart page provides a different zooming and panning functionality to zoom and scroll the data displayed in strip charts.

Animation is done with simulated data that use JSON as an example of a data exchange format. However, provided with a data source in a real application, it will display live data queried from the 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:

Interaction on Mobile Devices

The User Interaction section uses the mouse click and hover over terms which describe user interaction on desktop devices.
On mobile devices, the touch action should be used instead clicking, and touch and hold instead of hovering the mouse over.

User Interaction

  • The Viewer automatically adjusts its size depending on the browser width. On desktop devices, use the Change Drawing Size button to test drawing resizing.
  • 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 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.

    The tags can also be populated dynamically based on each symbol's ID property. The page context (such as a room number) can also be used to reassign tags on the page.

    DataFeed object is used to supply dynamic data values for animation. The demo uses simulated data generated by DemoDataFeed. The application can provide a custom implementation of LiveDataFeed to query realtime data from a custom data acquisition system. To use live data for animation, set RANDOM_DATA flag in GlgViewer.js to false.