PREV NEXT

Generic Logic, Inc. www.genlogic.com


1 Using GLG HMI Configurator

The GLG HMI Configurator is a simplified drawing editor intended for end users to edit the application's drawings or create new drawings. The HMI Configurator enables you to add new objects to a drawing, as well as edit attributes of the existing objects in the drawing. The HMI Configurator's Run Mode can be used to test run-time animation of the drawing.

The first part of this document presents a tutorial-style overview of the tasks involved in editing drawings. The second part provides a formal list and description of all options on the GLG HMI Configurator's menus.

HMI Configurator Layout

When the HMI Configurator starts, you see the main window:

The HMI Configurator window contains the following areas:

The Toolbar contains icon buttons for fast access.
The Drawing Area contains the graphical objects of the drawing. By default, the drawing area contains an axis marker that shows the center of the coordinate system, and grid lines.
The Object Palette contains buttons for creating graphical objects.
The Control Panel contains zooming, panning and other controls.
The Status Panel contains two rows of controls:

Loading a GLG Drawing

A GLG drawing may be loaded into the HMI Configurator using the File, Open menu option. On Windows, the drawing may also be loaded by double-clicking on the drawing file.

A GLG drawing is a collection of objects contained in a viewport named "$Widget". If the "$Widget" viewport is missing, the drawing can not be loaded into the HMI Configurator. When the drawing is loaded into the HMI Configurator, the "$Widget" viewport is hidden from the user and its content is displayed in the drawing area.

Creating a New Drawing

When the HMI Configurator is first started, it automatically creates a new empty drawing.

The Configurator's New menu also provides several options for creating new drawings:

An empty drawing created by the HMI Configurator on start up uses the New Drawing (Resize and Stretch), 1:1 option.

Saving the Drawing

To save the drawing, use either the Save toolbar button or File, Save from the main menu.

The Options menu contains settings that control how the drawing is saved. The default ASCII save format enables the drawing to be displayed on different hardware platforms, as well as in the Java, C# and JavaScript versions of the Toolkit. The default Save Compressed option minimizes the size of the drawing.

The drawing is contained in a viewport named "$Widget", which is hidden from the user, but is included in the drawing file when the drawing is saved.

Creating Objects

There are several types of available objects in the HMI Configurator:

Adding Predefined Components to the Drawing

Prebuilt GLG Widgets and predefined components supplied by an OEM vendor are added to the Palettes menu. The Palettes, Custom Widget Samples menu option provides a palette containing samples of predefined components with defined public properties. To add a widget or component to the drawing, simply click on its icon in the palette, then position it with the mouse.

Use Object, Properties to inspect the component's public properties.

By default, Object, Properties displays public properties of an object or component in the Public Properties dialog. If an object or component does not have public properties defined, its attributes will be displayed in the Properties dialog. Refer to Editing Public Properties of Prebuilt Widgets and Custom Components on page 19 for more information.

Creating Graphical Objects

You can create graphical objects by selecting on of the drawing primitives in the Object Palette on the left of the Drawing Area:

All buttons in the HMI Configurator have tooltips, so you can move the mouse over a button to find its exact function.

To create an object, select one of the drawing primitives on the left (a Filled Polygon , for example) and click several times in the drawing to define the polygon's points. To finish, press the right mouse button on Windows, the middle mouse button on Linux/Unix, or the Escape key on both platforms.

For different objects, a different number of control points may be required. For example, an arc will require 3 control points.

Some objects may also require entering additional information. For example, you'll be asked to type a text string when creating a text object.

When objects are being created or any other actions requiring user input are performed, a prompt with additional instructions is displayed in the Prompt Area at the bottom.

Magnetic Mode

Some symbols, such as widgets from the process control or electrical widget sets, have attachment points that can be used for attaching lines representing pipes or wires. The Magnetic Mode is enabled by default to automatically attach pipes and lines to selected points.

When creating a polygon, moving a mouse over an object (such as a tank) makes all object's attachment and control points visible and highlights a point next to the mouse position. Clicking on the highlighted point will attach the end of the polygon to that point. The user can use Control-click to position the polygon point in the vicinity of the highlighted point without constraining.

The Options, Magnetic Connection Points menu may be used to either disable Magnetic Mode, or modify it to use the point's position without attaching to it. The Magnetic Mode default can also be changed using the MagneticMode variable in the glg_hmi_config file.

Editing GLG objects

After an object is created, it may be edited in a variety of ways. To edit an object, it has to be selected.

Selecting an Object and Changing Object Geometry

The simplest way to select an object is to click on it with the left mouse button. When an object is selected, its control points and resize box are highlighted in the drawing, and its name and type are displayed in the Status Panel at the bottom.

Control points appear at the vertices or other important points. To change the shape of the object, drag its control points with the mouse. The Control Point dialog for precise editing of a control point can be activated by Shift+clicking on the control point

.

The control point's position can be adjusted using the directional arrows, or it can be defined by entering the point's coordinates into the Value field of the dialog. To position the control point at the same location as another control point, click on the Use Point button, then click on another point to reuse its position.

If more than one control point is potentially selected by the Shift-click, the selection can be rotated using the arrow buttons in the dialog's upper right corner. The dialog also contains buttons for adding control point dynamics, tag and value monitoring alarms for advanced use. The dialog's Name field is a read-only and can not be changed in the HMI Configurator.

You an reposition an object by simply dragging it with the mouse. The move point at the object's center may be used to position the object precisely by Shift+clicking on the move point and using the arrows in the Move Handle dialog. The dialog's Position text field may be used to position the object by specifying the new coordinates of its center.

An 8-point resize box appears around an object. Use its points to resize the object. Objects with only one control point (markers, fixed text and fixed size images) can't be resized, and resize points for these objects appear desensitized (in a gray color). Shift+click on a resize point to position it precisely with the arrows in the Resize Handle dialog.

A rotate point appears on the right side on the resize box. To rotate an object, drag the rotate point with the mouse. To rotate an object precisely by a specified angle, Shift+click on the rotate point and use the arrows in the Rotate Handle dialog. For quicker or less precise rotation, drag the rotate point with the mouse.

If the object has geometrical dynamics attached, the Dynamics' Points (such as Start Point, End Point or Rotation Center) may also be displayed depending on the setting of the ControlPointDisplay variable in the glg_hmi_config configuration file.

To select an object with no fill (for example, an unfilled polygon), click on the object's edge. The FillType attribute controls this aspect of an object's appearance. To avoid accidental movement while you are selecting an object, use Shift+click to select the object.

Press the Escape key to unselect.

Choosing from Several Selected Objects

When several objects are located close to each other and it is difficult to select the object of your choice, you can use the Shift key to help choose among several objects.

Shift-clicking in the drawing area with the left mouse button pops up a menu that allows you to select an object out of several potentially selected objects.

If the Properties dialog is open, the arrow buttons in the upper right corner of the dialog may be used to select an object when several objects are potentially selected.

Using Undo

The changes applied to the object's geometry or attributes may be reverted by selecting Edit, Undo options from the main menu, where the last operation is displayed at the top of the menu. For example, try moving an object with the mouse. To undo the move operation, select Edit, Undo Object Move or Stretch.

For multiple step undo, Edit, Undo History option may be used. For example, try resizing the object using its resize box and then click and drag one of its control points with the mouse. To revert one or both of these operations, select Edit, Undo History, Undo Point Move to undo the point move operation, and then select Edit, Undo History, Undo Object Move or Stretch to undo the resize operation. Notice that the Undo History list displays performed operations in the reverse order, so that the last operation appears at the top of the list.

The order of undo steps is important and should be considered when reverting a complex sequence of editing operations.

Editing Object Properties

You can use the Properties toolbar button to bring the Object Properties dialog. Alternatively, you can use the right mouse button and select Properties from a popup menu, or Object, Properties from the main menu.

The Object Properties dialog allows you to edit an object's properties, or attributes. The terms properties and attributes will be used interchangeably in this document. We will refer to the Object Properties dialog simply as the Properties dialog in the rest of this manual.

Some generic properties common for all objects, such as Name and Visibility, are displayed at the top of the dialog. Specific properties that depend on the type of the selected object are listed below.

Some properties, for example the FillColor property, have an ellipses button next to them. The button indicates that the attribute is an object, and you can press it to bring the Properties dialog with a color palette and other options for editing the attribute. We will refer to this dialog as the Attribute Properties dialog in the rest of this manual to differentiate it from the Object Properties dialog.

You can select a new fill color from a palette or specify an RGB value in the Value field. You can also select colors from a custom OEM color palette: Ctrl-click on the color palette to swap the palettes.

You can also Shift-click in the color palette or select Options, Color Options, Pastel Colors to switch between pastel and regular colors.

By default, the color RGB values are displayed in the [0;1] range, but it may be changed to the [0;255] range by selecting Options, Color Options, 2555 Color Display option in the main menu. To permanently use the 255 color range, set the ColorDisplay255 variable in the glg_hmi_config configuration file.

For other attributes, different attribute-related pallets will be shown: try selecting the ellipsis button for the LineWidth and LineType attributes.

For the TextString attribute of a text object, the dialog will contain a text edit box for entering a multi-line text, while the text box in the Object Properties dialog allows only a single-line text string to be entered.

The Type field of the Attribute Properties dialog shows the type of the attribute object and may be D for double numerical values, S for string values or G (geometrical) for XYZ or RGB triples used to represent colors and control points.

The Name field is read-only and cannot be changed in the HMI Configurator. The read-only Tag field displays tag information. Refer to the Adding Tags for Data Supply section for information on adding and editing tags.

To reuse the attribute's value from another object in the drawing, click on the dialog's Use Object button, then click on the object whose attribute value you want to use. For example, if the dialog displays the FillColor property, using the Use Object button will reuse another object's FillColor. The Attribute Properties dialog also has buttons for adding attribute dynamics, tag and value monitoring alarm described in the following sections.

Editing Public Properties of Prebuilt Widgets and Custom Components

Prebuilt GLG Widgets available in the Palettes menu provide a list of public properties, which make it easier to modify the widget's appearance and behavior. Predefined components supplied by an OEM vendor may also have public properties for convenient editing.

By default, the HMI Configurator automatically selects what properties will be displayed in the object's Properties dialog. If the selected object has public properties, the Properties dialog will present a simplified view of the object by listing only its public properties and hiding all other attributes of the object.

If the selected object does not have public properties, the Properties dialog will list all attributes of the object.

The HMI Configurator can be configured (via the glg_hmi_config configuration file) to enable two property panels: one for the object attributes and another for public properties. In this case two Property icons will be present in the toolbar, and the Object menu will have Properties and Public Properties entries. The HMI Configurator can also be configured to disable editing of the predefined components other than changing their public properties.

The Custom Widget Samples palette provides samples of predefined components. Select Palettes, Custom Widget Samples and select the tank component. Select Object, Properties from the main menu or use the Properties toolbar icon to display the Properties dialog containing the list of the component's public properties. The ellipses button next to each property brings a dialog for editing the property. This dialog is similar to the dialog for editing object attributes described above.

Editing Objects with the Edit Toolbox

The Edit Toolbox can be used as an alternative to the Properties dialog for quick and easy editing of an object's visual appearance, as well as editing multiple objects or all objects in a group. Select a polygon in the drawing and click on the Edit Toolbox toolbar button to bring the Edit Toolbox.

You can edit various attributes, such as FillColor or LineWidth. For example, click on the LineWidth icon and select a new line width from the line width palette. Notice that the text box at the bottom of the dialog reflects the current setting for the selected attribute.

Only the attribute icons that are applicable to the selected object type are activated in the Edit Toolbox, while the other icons are disabled. For example, for the polygon object, the FillColor and EdgeColor icons are activated, while the TextColor buttons are disabled. The Edit Toolbox does not display all attributes of an object, but only the most commonly used attributes of a given object type.

Multiple Selection

Create three polygons using the Filled Polygon button. To select multiple objects for editing, click and drag a rectangle to enclose the objects you want to edit. For example, click and drag a rectangle to include all three polygons. This creates a temporary group that includes all selected objects.

Notice that the Status panel at the bottom of the HMI Configurator's window indicates that the selected object is of type Group and its name is $TempGroup, which is a predefined name for a temporary group. The resize box of a temporary group is shown as a dashed line. A temporary group is volatile and will be discarded when it is unselected.

To include or exclude an object from the group, Ctrl+click on the object you want to delete or add. For example, Ctrl+click on one of the polygons to delete it from the group. Ctrl+click on the same polygon again to add it back to the group.

To edit properties of three polygons, click on the Edit Toolbox toolbar button to bring the Edit Toolbox. Click on the FillColor button in the Edit Toolbox and select a new color in the color palette. All selected objects will reflect the color change.

In the above example, a temporary group was created using a click and drag operation that defined a rectangular area containing the objects to be selected. This option may be inconvenient in some cases, when there are several intersecting objects and precise object selection is required. Alternatively, a temporary group may be created by Ctrl+clicking on each object that needs to be selected.

For example, Ctrl+click on one of the polygons with the left mouse button to select it. Ctrl+click on another polygon, and then on the third one. All three polygons will be selected. Attribute editing of all selected objects can be done using the Edit Toolbox, as described above.

Press the Escape key to unselect the objects.

Graphical Objects and Their Attributes

While the attributes of graphical objects differ depending on the object type, the Name and Visibility attributes are common for all graphical objects. The Name attribute keeps a user-assigned name which can be used to identify the object at run time.

The Visibility attribute can be used to make the object invisible or to implement blinking dynamics. A value of 1 indicates that the object is visible; a value of 0 makes the object invisible. In the OpenGL version of the Configurator, the values between 0 and 1 make the object transparent, with the object transparency increasing as the visibility value decreases.

Optional Rendering Attributes, such as gradient fill, cast shadows, arrowheads and fill dynamics, can be added to most of the graphical objects as described in the Rendering Attributes section on page 28.

The rest of this chapter describes attributes of graphical primitives available in the HMI Configurator.

Refer to GLG Objects of the GLG User's Guide and Builder Reference Manual for description of attributes of other object types as well as detailed description of all object attributes.

Polygon Object

In GLG, the polygon is a fundamental graphical primitive. Most other GLG graphical objects (arcs, rectangles, etc.) inherit their attributes from the polygon object.

To create a filled polygon, click on the filled polygon icon , then click in the drawing area to define control points. Press the Escape key to finish. The open polygon and closed polygon icons create open or closed polygons with lines and no fill.

To edit the polygon's properties, use Object, Properties from the main menu or click on the Properties toolbar icon. It will display the polygon's Properties dialog containing the following properties:

The last item in the property list allows adding and editing optional rendering attributes, such as gradient fill, cast shadows, arrowheads and fill dynamics. These attributes are described in the Rendering Attributes section on page 28.

Parallelogram

The parallelogram object is used to create rectangles. To create a parallelogram, click on the rectangle or filled rectangle icon and select two points. It creates a parallelogram with three control points which define its shape.

The attributes of a parallelogram are the same as the attributes of a polygon except that the OpenType attribute is not present.

Rounded Rectangle

This object is used to create rectangles with rounded corners. To create a rounded rectangle, click on the filled rounded rectangle icon and select two points. It creates a parallelogram with rounded corners and three control points which define the object's shape.

The rounded rectangle inherits all polygon attributes like LineType and FillColor. In addition, a rounded rectangle has the following attributes:

Arc Object

The Arc object is used to represent both arcs and circles. There are two types of arcs:

A circle is simply a special case of an arc whose angle is 360.

To create an arc, click on one of the arc icons in the Object Palette, click in the drawing area to define the center of the arc, move the mouse and click to define its radius and the start angle, then move the mouse and click again to define the end angle. When creating a circle, only the center and the radius need to be defined.

Arcs and circles have two control points: a center and a vector point. These points coincide when an arc is created. You never need to edit these points, unless you want to change the arc's orientation in space. Make sure not to use the arc's control points to move an arc, otherwise it will cause the arc to rotate in 3D space. To move an arc, simply drag it with the mouse.

The arc inherits all polygon attributes like LineType and FillColor. In addition, an arc has the following attributes:

Circle

A circle is simply a special case of an arc whose angle is 360 and has the same attributes.

To create a circle, click on one of the circle icons in the Object Palette, click in the drawing area to define the center of the circle, then move the mouse and click to define its radius.

Circles have two control points: a center and a vector point. These points coincide when a circle is created. You never need to edit these points, unless you want to change the circle's orientation in space. Make sure not to use the circle's control points to move a circle, otherwise it will cause the circle to rotate in 3D space. To move a circle, simply drag it with the mouse.

Ellipse

An ellipse is a special case of a rounded rectangle with relative radiuses set to 1 and has the same attributes.

To create an ellipse, click on the filled ellipse icon and select two points. It creates a parallelogram with three control points which define the ellipse's bounds.

Image Object

The image object is used to embed images in the GIF, JPEG, PNG and BMP format. The GIF, JPEG and PNG formats are supported across all platforms, while the BMP format is supported only in the C/C++ version on Windows. Transparent colors are supported via the TransparentColor attribute, and image transparency is supported via the Visibility attribute (by setting it to fractional values).

An image may be of fixed size, defined by the size of the image in the original file, and have one control point. The image object may also be scalable, in which case it's size is adjusted to fit the rectangle defined by the image's two control points.

To create a fixed size image, click on the fixed image icon, then click in the drawing area to define the image's control point. To create a resizable image, use the scalable image icon and define two control points that define the image's area. An image object has the following attributes:

Text Object

The text object is used to place labels and legends in a GLG drawing. There are several types of text objects, which differ both in their behavior and in the number of control points:

The control points of the text define a position and the boundaries of the text. The text object's attributes define the string that appears in the drawing and the way it is displayed. All text objects have the following attributes (in addition to control points):

Marker Object

The marker object is used to mark a position in space. It has a fixed size, and does not change when a window is resized.

To create a marker, click in the marker icon and define the marker's control point. A marker object has the following attributes:

Spline Object

A spline is used to render smooth curves whose shape is controlled by the control points. There are two types of splines:

To create a spline, click on the spline or filled spline icon, then click in the drawing area to define control points. The spline inherits has the usual polygon attributes, like LineType and FillColor, and has two additional attributes:

Connector Object

The connector object may be used to connect other objects in the drawing. It is useful when connecting objects in a diagram drawing.

There are two types of connectors:

To create a recta-linear connector, select a horizontal or vertical recta-linear connector icons and define control points; press the Escape key to finish. To create an arc connector, click on the arc connector icon and define 3 control points.

A connector object inherits polygon attributes (EdgeColor, LineWidth and LineType) but also has the following attributes:

GIS Object

The GIS object is used to display maps in the drawing background. To create a GIS object, click on the GIS Object icon and select two control points that define the area of the map.

The GIS Object provides the following attributes to control projection, center and extent of the map:

Refer to the the GIS Object section of the GLG User's Guide and Builder Reference Manual for a detailed description of the GIS Object attributes and usage.

Rendering Attributes

The Rendering object may be attached to most of the graphical primitives to keep an extended set of optional rendering attributes, such as gradient fill, cast shadows, arrowheads and fill dynamics.

The rendering object can be attached to an object by clicking on the Add Gradient toolbar icon and is also accessible using the Add/Edit Rendering button in the Properties dialog. It has the following attributes:

To delete rendering attributes, use the Delete Rendering button in the Rendering Properties dialog.

Drawing and Viewport Attributes

A GLG drawing is contained in a viewport object, which controls the attributes of the drawing's window. The viewport object is also used as a container for dials, meters and other widgets.

The attributes of a drawing window are configured by editing the attributes of the drawing's viewport. To edit the drawing's attribute, press the Escape key to unselect any previously selected object, then bring the Properties dialog. It displays the following attributes:

The Screen Attributes button in the viewport's Properties dialog display the following additional viewport attributes:

The Edit, Keep Edit Ratio menu option provides access to the Keep Edit Ratio attribute of the top drawing viewport. If checked, the drawing will maintain its X/Y ratio to prevent shape distortion of circles and other objects.

Integrated Zooming and Panning

In the Configurator, the vertical and horizontal scrollbars on the sides of the Drawing Area can be used to scroll the drawing. The drawing can also be scrolled by Ctrl+clicking and dragging it with the mouse. To start dragging, the click should happen in an empty area of the drawing. If the whole drawing is completely occupied by objects, the dragging may be started by selecting the Scroll by Dragging option of the View menu, then clicking anywhere in the drawing and dragging the mouse.

If the drawing needs to be scrolled at run time, the integrated zooming and panning features of the drawing can be used. To activate the run-time scrolling, use the Edit, Run Time Scrollbars and select a desired scrolling direction: X, Y or both.

Adding Geometrical Dynamics

You can add dynamic behavior by adding move, scale and rotate dynamics to graphical objects. To add dynamics to the selected object, click on the Add Dynamics toolbar icon and select one of dynamics types:

To finish creating the Move dynamics, define two points in the drawing to specify the move distance. The scale and rotate dynamics require one control point to define the center of scaling or rotation. The MoveX and MoveY dynamics do not require additional points.

When dynamics are added to an object, the Object Dynamics dialog displays the dynamics' attributes. The control points of the dynamics are also displayed in the drawing using round markers and may be moved or edited the same way as any other control points. When the object is moved, the dynamic's control points are moved with the object (by default).

The attributes of geometrical dynamics include the following properties:

The input value range defined by the RangleLow to RangeHigh parameters is mapped to the range of the start and end parameters of the geometrical dynamics. For example, for the Rotation dynamics, changing InputValue from RangleLow to RangeHigh rotates the object from AngleStart to AngleEnd. If the RangleLow=0, RangeHigh=100, AngleStart=0 and AngleEnd=90, setting InputValue=50 rotates the object by 45 degrees.

To supply dynamic data, a tag may be attached to InputValue as described in the Adding Tags for Data Supply section.

If an object has geometrical dynamics attached, the Edit Dynamics toolbar icon and the Dynamics button in the Status panel become active and can be used to access the dynamics' properties.

If more than one geometrical dynamics is added to an object, the dynamics added last will appear at the top of the list. The order of dynamic actions is important and affects the combined dynamic behavior. The Up and Down buttons in the Object Dynamics dialog can be used to change the position of the selected dynamics in the list.

To delete the dynamics, use the Delete button in the Object Dynamics dialog.

The types of available dynamics may be limited or extended by an OEM vendor, who may also change the name of the dynamic's properties.

Adding Geometrical Dynamics to Control Points

Geometrical dynamics can be added not only to graphical objects, but also to an object's control points. To add dynamics to an object's control point, select the object, then Shift-click on the control point to display its Control Point dialog. Click on the Add Dynamics button and follow the steps for adding geometrical dynamics described above.

To edit a control point's dynamics, use the Edit Dynamics button of the Control Point dialog.

Adding Attribute Dynamics

In addition to geometrical dynamics, there are attribute dynamics, such as color dynamics, blinking, text dynamics, which are attached to the object attributes. For example, the Color List dynamics may be added to a polygon's FillColor attribute to change the color depending on the input value. The Blinking Alert dynamics may be attached to an object's Visibility attribute to start blinking when the controlling input value goes out of range.

The type of the dynamic behavior is defined not only by the dynamics' type, but also by the type of the attribute it is attached to. For example, the Color Blinking dynamics can be attached to an object's color to blink by alternating the color value, while the Blinking dynamics attached to the object's Visibility attribute blinks the object by alternating its visibility.

Attribute dynamics allow the user to implement a variety of dynamic behavior. For example, the text dynamics may be implemented by attaching the List dynamics to the text object's TextString attribute to change the displayed string depending on the input value. The Value Display dynamics may also be attached to the TextString attribute to display a numerical value of the input variable. The Visibility Threshold dynamics may be attached to the object's Visibility attribute to control the object's visibility based on the input value.

To add attribute dynamics to an object, display the object's Properties dialog and click on the ellipses button next to the attribute you want to add dynamics to. This will display the Attribute Properties dialog. Click on the Add Dynamics button and select the type of dynamics. The Attribute Dynamics dialog will show properties of the added dynamics.

The Attribute Dynamics dialog displays parameters according to the type of dynamics, as described below. The parameter of attribute dynamics used for animation, such as Input Value, has a tag attached to it, which is used to supply dynamic data as described in the Adding Tags for Data Supply section.

Any attribute dynamics attached to an object is visible in the object's Properties dialog as a button with the "X" label to the right of the attribute row. Clicking on the button displays a dialog for editing the dynamics.

The Copy button in the Attribute Dynamics dialog may be used to store the dynamics in the HMI Configurator's clipboard. It may be reused using the Paste Dynamics option in the menu which is displayed when the Add Dynamics button is pressed.

To delete the dynamics, use the Delete button in the Edit Dynamics dialog.

The following types of attribute dynamics are available (they may be limited or extended by an OEM vendor):

Color List

The Color List dynamics uses an integer index to select a color from a list. It may be applied to color attributes and has the following properties:

ColorN
Colors to be used, where N is a zero-based color index.
ColorIndex
The zero-based index controlling which color to use from the list.
Color Threshold

The Color Threshold dynamics compares an input scalar value with a list of thresholds and select a corresponding color from a list of colors. It may be applied to color attributes and has the following properties:

ColorN
Colors to be used, where N is a zero-based color index.
ThresholdN
Thresholds to be used, where N is a zero-based threshold index. Threshold values must be specified in the increasing order.
InputValue
This value is compared with the thresholds and controls which color to use. The color corresponding to the first threshold smaller than the input value is used.
Color Blinking

The Color Blinking dynamics alternates an attribute's color between the two specified colors. It may be applied to color attributes and has the following properties:

Enabled
Enables or disables blinking. When set to 0, the blinking is disabled and the OffColor is used.
Interval
The blinking interval in seconds.
OnColor
The first color.
OffColor
The second color.
Color Alert

The Color Alert dynamics changes an attribute's color when the monitored value goes out of the specified range. It may be applied to color attributes and has the following properties:

ActivateOnEqual
If set to 1 (True), blinking starts when the input value is equal to or exceeds the specified range. If set to 0 (False), blinking starts only when the value exceeds the range.
ColorAlarm
The color to use when the value goes outside of the LowLow / HighHigh range.
ColorOK
The default color to use when the value is inside the Low / High range.
ColorWarning
The color to use when the value goes outside of the Low / High range.
InputValue
The monitored value.
RangeHigh
The High range.
RangeHighHigh
The HighHigh range.
RangeLow
The Low range.
RangeLowLow
The LowLow range.
Color Blinking Alert

The Color Blinking Alert dynamics alternates the attribute's color between the default and alarm colors when the monitored value goes out of the specified range. It may be applied to color attributes and has the following properties:

ActivateOnEqual
If set to 1(True), the color is changed when the input value is equal to or exceeds the specified range. If set to 0 (False), the color is changed only when the value exceeds the range.
InputValue
The monitored value.
Interval
The blinking interval in seconds.
OnColor
The first color.
OffColor
The second color.
RangeHigh
The High range.
RangeLow
The Low range.
List

The List dynamics uses an integer index to select an attribute value from a list. It may be applied to attributes of either D (double, or numerical value) or S (string) type and has the following properties:

ListIndex
The zero-based index controlling which attribute value to use.
ValueN or TextStringN
Attribute values or text strings to be used, where N is a zero-based value or string index.
Flow

The Flow dynamics may be attached to the LineType attribute of lines and polygons to visualize flow of gases and liquids through pipes. The dynamics shifts a line type pattern along the length of the line to animate the flow, It has the following properties:

DisabledLineType
The line type to use when the flow is disabled. The default value is 0 (solid line).
EnabledLineType
The line type pattern to use when the flow is enabled.
FlowEnabled
Enables the flow animation if set to 1, disables it if set to 0.
FlowInterval
Controls the flow speed by defining a timer interval (in milliseconds) that is used to update the animation.
FlowInversed
Inverses the flow direction if set to 1. The default value is 0 (direct flow).
Threshold

The Threshold dynamics compares an input scalar value with a list of thresholds and select a corresponding attribute value from a list of values. It may be applied to attributes of either D (double, or numerical value) or S (string) type and has the following properties:

InputValue
This value controls which attribute value to use. It is compared with the thresholds in the list and the value corresponding to the first threshold smaller than the input value is used.
ThresholdN
Thresholds to be used, where N is a zero-based threshold index.The thresholds must be specified in the increasing order.
ValueN or TextStringN
Attribute values or text strings to be used, where N is a zero-based value or string index.
Range Alert

The Range Alert dynamics changes the attribute's value when the monitored value goes out of the specified range. It has the following properties:

ActivateOnEqual
If set to 1 (True), the attribute's value is changed when the input value is equal to or exceeds the specified range. If set to 0 (False), the value is changed only when the input value exceeds the range.
InputValue
The monitored value.
ValueOK
The value to use when the value is inside the Low / High range.
ValueWarning
The value to use when the value goes outside of the Low / High range.
ValueAlarm
The value to use when the value goes outside of the LowLow / HighHigh range.
RangeHighHigh
The HighHigh range.
RangeHigh
The High range.
RangeLow
The Low range.
RangeLowLow
The LowLow range.

The ValueWarning, RangeHighHigh and RangeLowLow properties are not present in the Range Alert dynamics attached to the Visibility attribute.

Blinking

The Blinking dynamics alternates an attribute's value between the two specified values. It may be attached to any attribute of D type (double, or numerical value), including the object's visibility. It has the following properties:

Enabled
Enables or disabled blinking. When set to 0, blinking is disabled and the OffValue is used.
Interval
The blinking interval in seconds.
OnValue
The first color.
OffValue
The second color.
Blinking Alert

The Blinking Alert dynamics alternates the attribute's value when the monitored value goes out of the specified range. It may be applied to any attribute and has the following properties:

ActivateOnEqual
If set to 1 (True), blinking starts when the input value is equal to or exceeds the specified range. If set to 0 (False), blinking starts only when the input value exceeds the range.
InputValue
The monitored value.
Interval
The blinking interval in seconds.
OnValue
The value to use for blinking when the value goes outside of the range.
OffValue
The default value to use when the value is inside the range.
RangeHigh
The High range.
RangeLow
The Low range.
Visibility Threshold

The Visibility Threshold dynamics compares an input scalar value with the specified threshold and set the object visibility to a matching value. It may be applied to an object's Visibility attribute and has the following properties:

InputValue
This value is compared with the threshold and controls which attribute value to use.
Threshold
The threshold.
VisState0
The visibility value to use when the input value is less than the threshold. May be set to 0 or 1.
VisState1
The visibility value to use when the input value is greater than the threshold. May be set to 0 or 1.
Value Display

The Value Display dynamics may be attached to the TextString attribute of text objects to display a numerical value using the specified format. It has the following properties:

InputValue
The value to be displayed.
Label
The label used to annotate the value.
MinLength
The minimum number of characters used to display the value. If the number of characters is less than MinLength, the value is padded with spaces on the left.
Precision
The number of digits after the decimal point in the value display.
Separator
The string used as a separator between the label and the value.
Units
The unit string displayed after the value.
Text Display

The Text Display dynamics may be attached to the TextString attribute of text objects to display a string using the specified format. It has the following properties:

InputString
The string to be displayed.
Label
The label used to annotate the string value.
MinLength
The minimum number of characters used to display the string. If the number of characters is less than MinLength, the string is padded with spaces on the left.
Separator
The string used as a separator between the label and the string.
Suffix
The second annotation displayed after the string.
JavaScript

The JavaScript dynamics allows using an arbitrary JavaScript expression to generate an output values of the transformation based on values of its input parameters. In the HMI Configurator, the JavaScript dynamics is provided for the D (double) and S (string) attributes. The dynamics has the following properties:

ArgN
Input parameters, where N is 1-based index of the input parameter.
JavaScript
The JavaScript expression.

Refer to the JavaScript section on page 195 of the GLG User's Guide and Builder Reference Manual for information on using input parameters in the JavaScript expression and examples of the JavaScript syntax.

Paste Dynamics

This option will be present in the menu if a transformation was copied using the Copy button of the Attribute Dynamics dialog. Using this option adds a copy of the stored dynamics to the attribute.

If the Treat Dynamics as Global on Copy option of the Options, Dynamics Options menu is set, the parameters of the added dynamics, such as a list of colors, will be constrained to the corresponding parameters of the original dynamics. Changing parameters of either dynamics changes them in all global copies.

The Treat Dynamics as Global on Copy option must be set before copying the dynamics, and works until the drawing is reloaded.

Adding Tags for Data Supply

All dynamics defined in the drawing are driven by changing values of their attributes. For example, if Move dynamics is attached to an object, it is animated by changing the dynamics' InputValue attribute. If an object has ColorList dynamics, it is animated by changing the value of its ColorIndex attribute. Since all attributes are inherently dynamic, any object attribute may be animated directly by supplying a new attribute value. For example, the FillColor attribute may be set to a new RGB color value.

To simplify drawing animation, tags may be attached to attributes to facilitate connectivity to real-time data. A tag is added to an attribute in a form of a tag object which has several attributes of its own:

Tags simplify data connectivity by providing mapping between dynamic attributes and data sources used to animate the drawing. The tag's TagSource attribute specifies the source of dynamic data for each attribute, such as a field in a process database. When an application receives a data change event for a particular field, it updates the corresponding tag.

In the HMI Configurator, the user can browse tags using the Tag Browser, which display a list of all tags defined either in the drawing or in the selected object. To change the database mapping, the user can browse tags, select the tag whose database connection needs to be changed and edit its TagSource.

Adding a Tag to an Object Attribute

To add a tag to an object's attribute, select an object and bring its Properties dialog. Click on the ellipsis button next to some attribute, for example LineWidth, to display the Attribute Properties dialog. Click on the Add Tag button to add a tag to the attribute: the Data Tag dialog will be displayed.

When a tag is added, its TagName and TagSource are initially set to the string "unset" and may be edited in the Data Tag dialog. Type "LineWidthAnimation" in the TagName field as a tag description, then enter "LWValue" in the TagSource field.

Close the Data Tag dialog by clicking on the OK button.

The values of the tag's TagName and TagSource attributes are displayed in the Tag field of the Attribute Properties dialog as two strings separated by the `/' character. To edit the tag again, click on the Edit Tag button of the Attribute Properties dialog.

The object's Properties dialog indicates the presence of added tags by placing a button with the "T" label to the right of the attribute row. Clicking on the button activates the Data Tag dialog.

To delete the tag, use the Delete button in the Data Tag dialog.

Mapping Tags to DataSources in the HMI Configurator

A tag's TagSource is usually set to the name of a field in a process database that provides the input value for animation. When the value of the database field changes, the application supplies the new tag value. Since TagSources are global, the application doesn't need to know which object or attribute they are connected to. If several tags have the same TagSource, all of them will be updated when the new value for this TagSource is supplied at run time.

A custom Data Browser may be supplied by an OEM vendor to display a list of available tags in the process database. The Data Browser is activated by the Browse button in the Data Tag dialog and displays a list of available tags. When a user selects a tag from the list, it is assigned to the tag' TagSource field.

The Data Browser uses a custom data browser DLL provided by the OEM vendor. If no custom DLL is provided, a default demo DLL provides an example of browsing hierarchically organized groups of tags.

Browsing Tags Defined in the Drawing

All tags defined in the drawing can be listed using the Tag Browser. Click on the Tags toolbar button or use Object, Tags menu option to activate the Tag Browser. If no objects are selected, the Tag Browser will show all tags defined in the drawing. If an object is selected, the Tag Browser will show only tags defined for the object.

Each tag's entry shows its TagName and TagSource attributes separated by the `/' character. Clicking on a tag entry selects it, showing the Data Tag dialog for editing the tag. The Edit Value button of the Data Tag dialog activates the Attribute Properties dialog for editing the value of the attribute the tag is attached to.

The Tag Browser also contains entries for sorting tags based on various criteria. The Filter field may be used to display only a subset of tags matching a regular expression that may contain the ? (any character) and * (any sequence of characters) wild cards. The Selected Tag Name/Source field may be used to select a tag by typing its TagName or TagSource.

Using Resources to Browse Objects

An object may be assigned a name (via the Name property) to make it accessible via a resource browser. The Resource Browser can be used to list all named objects in the drawing and edit their attributes without selecting the objects. Click on the Resources toolbar icon or use Object, Resources menu option to display the Resource Browser. The following picture shows the Resource Browser that displays resources of a group containing objects named Circle, Rectangle and Triangle.

When no objects are selected, the resource browser lists all named objects contained in the drawing, as well as the attributes of the drawing. Entries that have sub-resources, such as named objects, are annotated with the ">>" suffix in the resource browser. Double-clicking on such entry displays a list of resources inside it. Clicking on a resource entry without ">>" opens a dialog for editing its value. Double-click on the ".." entry to go back to the previous level in the resource hierarchy, one level at a time.

If some object is selected, the resource browser displays the object's resources, regardless of whether the object is named or not.

Any dynamics added to an object in the HMI Configurator are visible in the resource browser as a resource of that object, which may be used for a fast access to the dynamics' attributes. For example, the ColorList dynamics added to an object's FillColor attribute will appear as the "FillColor:ListDynamics>>" resource of the object. Double-clicking on this entry will display parameters of the dynamics.

The Filter field may be used to display a subset of resources whose names match a regular expression that may contain the ? (any character) and * (any sequence of characters) wild cards. The Selection field may be used to select a resource entry by typing its name.

The Resource Browser may be disabled using the glg_hmi_config file.

Prototyping Dynamic Behavior Using Run Mode

The Run mode is used to test the drawing's animation and is started by clicking on the Start toolbar icon. The Run mode toolbar contains controls for pausing the animation and changing its update rate. It also displays performance-related statistics, such as elapsed time and update rate.

The Run mode may use a custom data acquisition DLL supplied by an OEM vendor to animate the drawing with real-time data using tags defined in the drawing.

A random data generator may also be used to test the animation via the $datagen command supplied when the Run mode is started. The following sample command animates two tags named RotateAngle and MoveDistance:

$datagen -tag -sin d 0 90 RotateAngle
			-tag d 0 100 MoveDistance

The RotateAngle tag is animated with sinusoidal data in the range from 0 to 90, while the MoveDistance tag is animated with random data in the range from 0 to 100. The "d" parameter specifies the double (numerical) data type.

The drawing can also be animated using resources. For example, the following command animates the Value attribute of the dial widget named Dial1:

$datagen -sin d 0 10 Dial1/Value

Refer to the The Data Generation Utility on page 386 of the GLG Programming Reference Manual for a complete list of the datagen parameters.

Use the Stop toolbar icon to stop the Run mode.

Defining Alarms

An alarm can be attached to any attribute to monitor its value. The range alarm defines a normal range of the monitored value and generates an alarm message when the value goes outside of the normal range. There is also a change alarm that generates a message every time the monitored value changes. Alarms are defined in the drawing, but alarm messages are processed in the application's code.

To add an alarm to an attribute, click on the ellipsis button next to the attribute in the Properties dialog to bring the Attribute Properties dialog, then click on the Add Alarm button and select an alarm type. The Edit Alarm dialog will be displayed to edit the alarm's parameters.

While alarm attributes depend on the type of alarm as described in the following sections, all alarm objects share the following common attributes:

The rest of the alarm attributes depend on the alarm type and are described in the following sections.

If an attribute has an alarm attached, the Add Alarm button changes to Edit Alarm and can be used to edit the alarm. The object's Properties dialog indicates the presence of added alarms by placing a button with the "A" label to the right of the attribute row. Clicking on the button activates the Edit Alarm dialog.

To delete an alarm, use the Delete button in the Edit Alarm dialog.

The following alarm types are available:

Range Alarm

The Range alarm can be attached to an attribute of a D type (double, or numerical value) to monitor its value. The alarm message is generated when the value goes below or above the specified High/Low range.

The Range alarm has the following attributes:

High
Defines the high range of the value. The alarm message with the High subaction is generated when the value reaches or exceeds the High range.
Low
Defines the low range of the value. The alarm message with the Low subaction is generated when the value drops below or equal to the Low range.
Range2 Alarm

This alarm is similar to the Range alarm, but adds the following attributes that define a second set of thresholds in addition to High and Low:

High High
Defines the "high high" range of the value. The alarm message with the HighHigh subaction is generated when the value reaches or exceeds the HighHigh range.
Low Low
Defines the "low low" range of the value. The alarm message with the LowLow subaction is generated when the value drops below or equal to the LowLow range.
Change Alarm

The Change alarm can be attached to an attribute of any type (D, S or G) to monitor changes of its value. The Change alarm does not define any new attributes in addition to Alarm Label and Enabled.

The Change alarm generates an alarm message with the ValueChange action and NULL subaction every time the value is changed.

Browsing Alarms

The Alarm Browser may be used to display a list of alarms defined in the drawing or in individual objects. Select the Object, Alarms menu option to display the Alarm Browser.

If no object is selected, all alarms defined in the drawing will be displayed. If some object is selected, only the alarms attached to the attributes of that object will be listed. Each alarm entry in the Alarm Browser shows the alarm's AlarmLabel attribute.

When an alarm entry in the alarm browser is selected with the mouse, its Alarm Dialog is displayed. Clicking on the Prop button in the dialog opens the Attribute Properties dialog to edit the attribute (property) the alarm is attached to.

The Filter field may be used to display only a subset of alarms whose AlarmLabel matches a regular expression that may contain the ? (any character) and * (any sequence of characters) wild cards. The Selection field may be used to select an alarm by typing its AlarmLabel.

Using GLG Widgets and Palettes

The Palettes menu provides access to palettes of pre-built widgets and objects. A widget from a palette can be added to the drawing by simply clicking on the widget in the palette.

By default, the widget will be added and positioned in the center of the drawing. To enable manual widget positioning with the mouse, check the Palettes, Manual Widget Positioning menu option. To change the default setting, set the ManualWidgetPositioning variable in the glg_hmi_config configuration file.

The Palettes, Make Widget Viewports Transparent menu option may be checked to convert all widgets that use viewports, such as buttons or dials, to use light viewports with transparent background. The Arrange, Convert Viewport menu can be used to convert viewports to light viewports and back at a later time.

The widgets have built-in dynamics and are highly configurable. The appearance and behavior of each widget is controlled by widget resources.

Each widget also has public properties that facilitate simplified widget editing. Public properties list a subset of the most commonly used widget resources which could be edited via the Properties button. A complete list of widget resources is accessible via the Resource Browser .

A widget may be animated by supplying dynamic data to widget properties, such as the Value property of a dial or tank widget. A tag can be added to a widget property to specify the data source for the real-time data. A tag stores the name of the data source, and this name can be used in a program at run time to supply real-time data values. To add a tag, click on the ellipsis button next to the desired property in the Properties dialog, click on Add Tag in the activated property dialog and enter a data source name in the Tag Source field in the Tag dialog.

By default, only the Custom Objects and Custom Widget Samples palettes are installed. Other palettes are optional. Possible palettes include Real-Time Charts, 2D Graphs, 3D Graphs, Controls, Avionics, Process Control Symbols, Electrical and Electronic Circuit Symbols, and Special Widgets palettes, as well as the palettes provided by an OEM vendor.

The Palettes menu lists all available palettes. To display the Custom Widget Samples palette, select it from the palettes list. To add an object from a palette into the drawing, click on its icon in the palette. For example, click on the tank component in the Custom Widget Samples palette to insert a copy of the tank into the drawing. Give it a name and adjust its shape using the resize box.

Object Layout and Alignment

If you need to align or layout a group of objects, Layout Toolbox provides a point and click interface for such functionality. Examples of layout and alignment operations include aligning several objects horizontally or vertically, setting the same width for several objects, positioning objects within a defined distance from each other, or distributing the objects evenly across the defined extent in a horizontal or vertical direction.

Click on the Layout Toolbox button in the toolbar to activate a Layout Toolbox. Alternatively, the Layout Toolbox can be activated using Layout, Layout Toolbox option in the main menu. The following picture shows the Layout Toolbox:

The top of the Layout Toolbox contains icons for actions that do not require a value, such as aligning objects or making them the same width or height. The bottom of the toolbox contains controls for actions that require a value, such as setting an object's width or height to a specified value.

To experiment with the Layout Toolbox, create three rectangles using the Filled Rectangle button and position them horizontally, one next to another. Select all rectangles by clicking and dragging the mouse to define a rectangular area that encloses all three rectangles. This will create a temporary group containing all three rectangles.

Click on the Align Bottom button in the Layout Toolbox and notice that the bottom of all rectangles will be aligned.

The Select Anchor Object button in the Layout Toolbox may be used to define an anchor object. If an anchor is selected, its dimensions are used to align other objects. Click on the Select Anchor Object button, then click on one of the rectangles to define it as an anchor.

If the anchor is not defined, one of the objects in the group will be chosen as an anchor automatically. Once the anchor is defined, it will be persistent for all layout operations until another anchor is chosen or the objects are unselected.

Click on the Set Same Height button to set the height of all rectangles to the height of the anchor rectangle.

The icons in the upper half of the toolbox perform actions when you click on them, while the icons in the lower half of the dialog define actions to be performed when a numerical value is entered.

For example, follow these steps to position the rectangles with an even horizontal space between them:

The Coord: World / Screen control toggles between world and screen coordinates.

Press the Escape key to unselect the rectangles.

Defining Object Tooltips

The HMI Configurator provides support for integrated object tooltips. To add a tooltip to an object, select the object and use Object, Object Tooltip, Add Tooltip. The Object Tooltip dialog will appear. Enter the tooltip string into the Value field and close the dialog.

To enable tooltips in the drawing, the ProcessMouse attribute of the drawing has to be set to Move & Click. Press the Escape key to unselect the object, then bring the Properties dialog: it will display attributes of the drawing's viewport. Set ProcessMouse to Move & Click.

The HMI Configurator's Run mode can be used to test the tooltips. Press the Start toolbar icon to start the Run mode, move the mouse over the object and hold it until the tooltip appears. Use the Stop toolbar icon to stop the Run mode.

The tooltip can be edited or deleted using the Edit Tooltip and Delete Tooltip entries in the Object, Object Tooltip menu.


Generic Logic, Inc.
www.genlogic.com
PREV NEXT