OVERVIEW

This example provides a sample implementation of a generic GLG viewer application that loads a GLG drawing created in the GLG Builder or GLG HMI Configurator, animates the drawing using tags defined in the drawing and handles user interaction, including commands attached to objects in the editor.

SCADA CONFIGURATION MENU PAGE

This page displays the process_main.g drawing that represents an example of a main screen layout containing several areas. The top area includes controls that perform an action defined for this widget in the drawing.

-  Role Indicator shows current user privileges: Administrator role (green) enables process monitoring and control (write operations), while Non-Administrator role (red) enables only process monitoring functionality.   

-  ESC key closes a currently active popup, if any.

-  Validate/Save/Cancel buttons in a popup:

     Validate button validates/checks the value changes made by the user.
     Save button saves/writes the new values to the back-end system.
     Cancel button cancels changes and closes the popup.

CUSTOM SUB-PAGES

REALTIME CHART PAGE

A chart widget is a Subdrawing that uses a chart template drawing rtchart_scroll.g.

Each chart instance is configured dynamically at run-time using provided Metadata. The Description resource of each chart widget is used as a key to find corresponding metadata record. The metadata include information for yaxes and plots, such as axis label, low/high ranges, plot color, tag, linked axis, etc. 

Toolbar buttons of each chart allow to scroll the chart data, zoom the chart, change X axis time span, etc. 

ALARM PAGE (ALARM DIALOG)

The Alarm dialog gets populated with a list of system alarms obtained once a second (GetAlarmData).

Ctrl+clicking on an alarm row acknowledges the alarm, communicating with the back-end system by sending a Write command (DataFeed.ACKAlarm). On a mobile device, a touch event on the alarm row acknowledges the alarm.

ADDITIONAL VIEWER FUNCTIONALITY DETAILS

-  HTML buttons at the top navigate between various drawings. The drawing name for each button is specified in glg_viewer.html. The drawings (.g files) are located in the ./drawings directory.

-  Process Monitoring and Control page includes an advanced HMI functionality, including a page layout containing several areas (each displaying its own drawing), navigation between sub-pages, dynamic population of tags, custom commands or events when selecting widgets, popups, two-way data communication including input and output, etc. 

-  Drawing animation is implemented using tags attached to a widget's dynamic data driven parameter, such as Value. The tag's TagSource property represents a data source variable from the back-end system that drives the animation.

-  Tags are populated dynamically at run-time based on the widget ID assigned in the editor at design time (in the GLG Builder or HMI Configurator). Alternatively, tags can be defined and stored in the drawing at design time. The Viewer code can be easily extended to implement a custom tag assignment logic.

-  The Subdrawings feature is used for the widgets listed below. 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.

      AnalogValue Display widget   (template analog_value.sd)
      AnalogValueAdjustment widget (template analog_value_adjustment.sd)
      Digital Input widget         (template digital_input.sd)

Subdrawing templates are located in the subdrawings subdirectory of the location of .g files (./drawings/subdrawings).

- RealTime Chart can be configured dynamically at run-time using provided Metadata. The Description property of the chart widget is used to find a corresponding metadata record in MetadataTable.

- PopupDialog or PopupMenu command can be attached to a widget to display a popup when the widget is selected with the mouse. The widget defines the drawing name to be displayed in the popup. For example, AnalogValue widget has a PopupDialog command that displays a drawing edit_alarm_sp.g allowing to edit alarm setpoints and save new values in the back-end.

- The Viewer includes functionality to support PageType and WidgetType, so that the code can be augmented based on these properties. 

- DataFeed object is used to supply dynamic data values for animation. The example 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.

- Role Indicator shows the state of the UserRole (administrator or regular user), which is obtained by DataFeed.GetUserRole() based on user login credentials. The application should provide a custom implementation of LiveDataFeed.GetUserRole() to obtain the client's user role.

USING LIVE DATA FOR ANIMATION

1. Provide custom implementation of the Read/Write methods in LiveDataFeed.java.
2. Set RANDOM_DATA flag in GlgViewer.js to false.

GLG API

This example is written using GLG Extended API.

MORE INFORMATION

Refer to README.txt file for more detailed information on the example functionality, module description, etc.