Home | Demos | React | Angular | Products

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

The drawing was created with the GLG Graphics Builder, which allows a user to create graphical objects and define their dynamic behavior using a point-and-click interface, without the need to write graphics code by hand. The drawing is saved into a file (process.g). Click here to see available pre-built process control widgets.

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.

Features and User Interaction

• The drawing is screen resolution independent and can be displayed on devices with different screen sizes. The Change Image Size button can be used to resize the drawing.
• The demo uses simulated data, but an application-specific data acquisition mechanism can be used to supply live process data for animation from any remote data source.
• The data connectivity can be defined in the drawing by assigning tags to dynamic data-driven parameters.
• The demo shows how to handle application-defined user interaction, such as tooltips, object selection with the mouse (or a touch on mobile devices), or scrolling through the data displayed in the chart:
• Hover the mouse over an object in the drawing to display a tooltip for that object. On mobile devices, touch and hold an object to display its tooltip.
• The toggles in the lower left corner of the drawing can be used to change pipes' appearance.
• The valves can be opened by left clicking on them and closed by right clicking (if available). Note: The valve opening will still be adjusted by a running simulation.
• The pressure gauge's visibility can be changed by clicking on either the gauge or the heater tank with the mouse (or touching them on mobile devices).
• To scroll through the data accumulated in the history chart, click on the button above the chart to disable the chart's automatic scrolling, then scroll through the chart data using the activated horizontal scrollbar. A vertical scrollbar is automatically activated when the chart's data exceeds the chart's Low/High range.
• To examine data in the chart, hover the mouse over the chart to display a tooltip for the datasample at the mouse location. On mobile devices, touch and hold the chart area to display the tooltip. To disable chart scrolling, click on the button above the chart.