Overview
Glg-CE 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:
Switching between drawings using navigation buttons.
Querying data tags defined in the drawing and using them to update the display with a real-time data feed.
Handling object selection events to open a pop dialog or a menu when an object of interest is selected with the mouse (or a touch on mobile devices).
Implementing a drill-down functionality.
Displaying a scrolling list of system alarms that can be acknowledged.
Zooming and panning the drawing.
User Interface
Click on a navigation button at the top to switch a displayed drawing.
Click on the Alarms button to display a popup dialog containing a scrolling list of system alarms. Click on an alarm row to acknowledge the alarm.
On the Water Treatment page, click on any motor icon (green rectangle) to display a popup dialog containing additional information for the selected motor.
On the Real-Time Strip Chart page, use the toolbar buttons to control the chart options.
To display tooltips, hover the mouse over any button or an object on the Solvent Recovery page (touch and hold on mbile devices).
On the Test Object Commands page, click on objects to perform actions described in the label above each object, such as:
popup a menu to chance the object state
display a drill-down or real-time chart dialog
send a command
execute a GoTo command to navigate to a different page.
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.