Home | Demos | Products
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 configuration file is used to define a set of drawings to be displayed. On start-up, the Viewer reads the configuration file and initializes the navigation menu based on the information provided in the configuration file. A new drawing can be added to the Viewer by simply adding its filename to the configuration file. Alternatively, a list of available drawings can be queried from the server.
A page navigation menu is implemented as part of the GLG drawing. Alternatively, navigation can be implemented using HTML buttons (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 and panning API. By default, it zooms and pans the drawing displayed in its viewing area. However, when the Real-Time Strip-Chart is activated by a corresponding button, the same code zooms and scrolls the data displayed in the strip chart.
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 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.