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.

PLANT MONITORING AND CONTROL PAGE

This page displays main_layout_tabs.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.   

-  Engine, WasteHeatBoiler and RTCharts buttons navigate to a corresponding page(.g file) in the middle area. This is accomplished via the GoTo command attached to each button.

-  ConfigureAlarmSP button displays a dialog allowing to configure alarm setpoints. This is accomplished via the PopupDialog command attached to the button.

-  The area on the right is a subwindow that displays a separate drawing engine_measurements.g. The drawing name is defined in process_main.g.

-  Hover over a button or any other widget to see a tooltip. Cursor changing from pointer to hand indicates the widget is clickable and has an associated command or event.

-  Click (touch on a mobile device) on a slider inside a tank to display a stripchart showing historical data for the data variable/tag used to show a real-time value in the selected slider.

-  Click (touch on a mobile device) on an AnalogValue Display widget (a dynamic widget with a grey header) to popup a dialog allowing to change alarm setpoints for the data variable/tag used to display a real-time value in the selected widget.

-  Click (touch on a mobile device) on a Pump or Radiator to display a popup menu allowing to start/stop the device, by sending a Write command to the back-end system for the variable used to display the device state in the graphics.

-  Click on Engine state (ON/OFF) or Generator state (RUNNING/STANDBY/OFF) symbol to display a popup menu allowing to change the device state, by sending a Write command to the back-end system for a corresponding data variable/tag.

-  Check the Hibernate button to pause animation. Click/touch on an AnalogValue Adjustment widget (a dynamic widget with a blue header on the right) to popup a dialog allowing to adjust the analog value for the variable used in the selected widget.

-  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.

-  Spinners on the right: Use the demo-only spinners to change tag status, which gets reflected in the corresponding widget color (0:white, 1:yellow, 2:red). The status value of 2 makes the corresponding widget also blink using a blinking purple outline.

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.