WEB HMI / SCADA: GLG Process Web Demo (HTML5 & JavaScript)
This is a pure HTML5 and JavaScript example that loads a drawing created
with the GLG Graphics Builder into a JavaScript program and animates
it with real-time data using the GLG JavaScript Library API.
More information
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.
For example, this web demo has the same functionality as the corresponding
desktop version:
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 connnectivity 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/Hight 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.