Home | Demos | Products
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.
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 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.
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.