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:
- The top row displays the name and type of the selected object; it also contains buttons for quick access to the geometrical dynamics and command actions attached to the object, if any. On the right of the top row there is a control that displays the cursor position in both screen and world coordinates.
- The bottom row of the Status Area contains the Prompt Area that displays messages and prompts for action; it also contains the Log button that displays a log of messages generated by the current editing session.
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:
- New Drawing (Resize and Stretch) creates a resizable drawing that stretches or changes the size of objects in the drawing when the drawing's window is resized. Several suboptions allow to create drawings with different aspect ratio matching the aspect ratio of the display: 1:1, 4:3 and 16:9.
- New Drawing (Resize, No Stretch) creates a drawing that changes the size of objects in the drawing when the drawing is resized, but does not stretch the objects, maintaining the X/Y aspect ratio. The suboptions allow to create drawings with aspect ratio matching the aspect ratio of the display: 1:1, 4:3 and 16:9.
- New Drawing (Fixed Scale, No Stretch) creates a drawing that does not stretch or resize the objects in the drawing, but shows a smaller or bigger part of the drawing area when the window is resized. The two suboptions provide choices for specifying the size of the drawing: Custom Size allows to specify the width and height of the drawing in pixels, and the Size From Config File option uses the size specified in the glg_hmi_config file.
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 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.
There are several types of available objects in the HMI Configurator:
- Prebuilt GLG Widgets available in the Palettes menu. These widgets provide a list of public properties, which make it easier to modify the widget's appearance and behavior
- Predefined Components provided by a OEM vendor are prebuilt components with the application-specific appearance and dynamic behavior. A predefined component may provide a list of public properties for simplified editing.
- Simple graphical objects may be created using the Shapes, Images and Text palette and include polygons, arcs, text objects, images and other graphical primitives. The appearance of graphical primitives is defined by their attributes (or properties).
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.
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.
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.
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.
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 FillColor and EdgeColor attributes control the polygon's colors. To select the fill color from a color palette click on the ellipsis button for the FillColor or EdgeColor attribute and select a color from a color palette. The colors may also be entered as RGB values by typing them into the corresponding Value fields of the Properties dialog. You can also select colors from a custom OEM color palette: Ctrl-click on the color palette to swap the palettes.
By default, the color RGB values are displayed in the [0;1] range, but it may be changed to the [0;255] range by setting the ColorDisplay255 variable in the glg_hmi_config configuration file.
- The LineWidth defines the line width in pixels. To select a line width from a palette, click on the ellipsis button for the LineWidth attribute.
- The LineType attribute defines the line type. Use the ellipsis button for the LineType attribute to display a palette of available line types.
- The FillType attribute controls whether the polygon is drawn as an outline, fill or both. In addition to combination of the EDGE and FILL values, it also has a line fill (LFILL) value that is used to draw thick lines with two colors, using EdgeColor for the line's edge and FillColor for the middle part of the line.
- The OpenType attribute controls whether the polygon draws the line connecting the first and last polygon's points.
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.
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.
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:
Controls the vertical extent of the rounded corners.
Controls the horizontal extent of the rounded corners. If set to -1, the value of Radius1 is used, and the size of rounded corners may be controlled with a single parameter - Radius1.
Specifies units used for Radius1 and Radius2 attributes and may have the following values:
- SCREEN COORDINATES - corner radiuses are defined in screen coordinates; the size of the rounded corners stays constant.
- WORLD COORDINATES - corner radiuses are defined in world coordinates; the size of the rounded corners changes proportionally when the drawing is resized, but stays constant when the object is resized with the mouse.
- RELATIVE - corner radiuses are defined as coefficients in the [0;1] range relative to the extent of the rectangle's corresponding side. The size of the rounded corners changes proportionally when the drawing or the object is resized, maintaining a constant ratio between the size of the rounded corners and the length of the object's side in the corresponding direction.
The number of line segments used to render rounded corners. The default value is 7. A higher value may be used for nicer rendering of rectangles with large corner radiuses.
The Arc object is used to represent both arcs and circles. There are two types of arcs:
- a chord arc simply joins the two ends of the curve with a straight line
- a sector arc is shaped like a piece of a pie, with two straight lines joined at the center of the arc.
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:
- ArcFillType defines the type of the arc: chord or sector .
- StartAngle and EndAngle define the start and end angles of the arc. The angles are measured in degrees (counter clockwise) from the 3 o'clock position.
- Radius defines the arc's radius.
- Resolution specifies the number of line segments used to render the perimeter of an arc or a circle. A circle drawn with a resolution of 5 is simply a regular pentagon. The default resolution is 100. A smaller value may be used for small arcs and circles to increase performance when the drawing contains a large number of arcs.
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.
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.
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:
- ImageType defines the type of the image: a fixed-size image with 1 control point or a scalable image with two control points.
- ImageFile defines the location of the image file in the GIF, JPEG, PNG or BMP format. The type of the file is determined by the file's extension: .gif, .jpg, .png or .bmp. Using relative image paths is recommended for more flexible deployment.
- Anchor defines the vertical and horizontal alignments of the fixed size image relative to its control point. The choices are CENTER, LEFT, or RIGHT for horizontal alignment, and CENTER, TOP, or BOTTOM for the vertical. The attribute has no effect for scalable images.
- TransparentColor defines the image color to be rendered as transparent. This may be used for rendering icons with transparent background. The color RGB values are specified using the default 0-1 range, or using 0-255 range if the 255 Color Display option is activated. All image pixels with this RGB color value will be rendered as transparent.
By default, the attribute is set to a value which disables transparency: (-1,-1,-1) in the default color mode, or (-255,-255,-255) value in the 255 Color Display mode. For transparent GIF images, the TransparentColor setting overrides the transparent color defined in the GIF file. If TransparentColor is set to the disabled value described above, the transparent color defined in the GIF file is used.
Windows Note: the transparent color mode is supported on OS versions that support TransparentBlt method.
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:
- Fixed Text displays a string at a specified position. To create a fixed text object, select the Fixed Text icon , click in the drawing to define the text's position, then type the string in the text entry box. The text may be scaled when the drawing is zoomed or resized if requested by the setting of the TextScaling attribute. The FontSize attribute defines the base font and the MinFontSize attribute specifies the minimum font size.
- Fit To Box Text fits a string within a bounding box. To create a scaled text object, select the Fit To Box icon , click on two points to define the diagonal corners of the bounding box, then type the string in the text entry box. Resizing the bounding box changes the font size of the string. The FontSize attribute defines the maximum and the MinFontSize attribute controls the minimum size allowed. The actual font size is determined dynamically by constraining the text to the rectangle.
- Wrapped or Truncated Text fits the string in a bounding box by either wrapping or truncating long text lines that do not fit. The text of this type can also be created by using the Fit To Box text icon , then selecting a desired text type from the text type menu popup and clicking on two points in the drawing to define the diagonal corners of the bounding box. The text may be scaled when the drawing is zoomed or resized if requested by the setting of the TextScaling attribute. The FontSize attribute defines the base font and the MinFontSize attribute specifies the minimum font size.
- Spaced Text displays a string within a bounding box, with flexible orientation. Changing the box repositions the string. To create a Spaced text object, select the Object, Create, Text, Spaced Text menu option, click on two points to define a line, then click on a third point to define the height of the bounding box. Finally, type the string in the text entry box. The third control point is used for line positioning when the text object has several lines. Similar to the Fit To Box text, the Spaced text is fit to the area defined by it's three control points, with the FontSize and MinFontSize defining the maximum and minimum font sizes for scaling.
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):
- TextColor defines the color of the text.
- TextString is the text string displayed by the text object. The TextString of a multi-line text can be edited only by using the text edit field of the Attribute Properties dialog (ellipsis button ).
- TextType can be FIXED, FIT TO BOX, TRUNCATED, WRAPPED, WRAPPED & TRUNCATED or SPACED.
- TextScaling defines how the text should be scaled when the drawing is zoomed or resized. It is applicable to all text types except the FIT TO BOX and SCALED, which are always scaled to fit to the text box regardless of the attribute setting. The attribute can have the following values:
- NONE to disable text scaling and always display the text using the selected FontSize.
- ZOOM to scale the text when the drawing is zoomed, but not when it is resized.
- RESIZE to scale the text when the drawing is resized, but not when it is zoomed.
- ZOOM & RESIZE to scale the text on both zooming and resizing.
- The FontSize attribute defines the base font size for scaling, which is then adjusted up or down to scale the text. The MinFontSize attribute controls the minimum font size allowed. Setting MinFontSize to -1 may be used for automatic text label decluttering: the text will disappear if the drawing is zoomed out and there is not enough space to draw the text.
- For the ZOOM scaling type, the zoom factor of the drawing's viewport is used to increase or decrease the text's font size. For the RESIZE scaling, a ratio of the current width of the viewport to its base width is used to adjust the font size. The base width of a viewport is defined by the viewport's BaseWidth attribute. The font size will be increased to scale the text if the current width is greater than the base width, and decreased if the current width is smaller.
- Note that the text is scaled by selecting different size fonts from the viewport's font table, not by changing the dimensions of the characters. If the font sizes defined in the font table for a particular font type are not listed in the ascending order, resizing text objects that use this font type may produce unexpected results.
- Direction defines whether text is horizontal, vertical or rotated vertical.
- Anchoring defines vertical and horizontal text alignments relative to the text object's control point for the fixed text, or within the text bounding box for other text types.
- LineAnchoring defines horizontal alignments of text lines of a multi-line text object.
- FontType Specifies the type of the font used to draw the text. The available font types are defined in the drawing's font table attribute.
- FontSize defines the font size of the fixed text, or the maximum font size to use for fitting other text types. The available font sizes are defined in the drawing's font table attribute.
- MinFontSize specifies the minimum font size to use when scaling the text. Setting
MinFontSize to -1 activates automatic decluttering feature for scaled text: the text will not be drawn if there is not enough space to fit the smallest font (of size 0) into the text area
- Text Box is an optional Box Attributes object that controls attributes of an optional box drawn around a text object. A filled box may be used to provide a background for drawing a text object. The text box can be added to an object using the Add Text Box toolbar icon and is also accessible by using the Add/Edit Text Box button in the Object Properties dialog. The Box Attributes object has attributes similar to the polygon object, with a new Box Offset attribute that defines additional X and Y offsets between the text and the box's edges. To delete box attributes, use the Delete Text Box button in the Box Attributes's properties.
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:
- MarkerType defines the shape of the marker, which can be any combination of the following components: square and filled square, circle and filled circle, diamond and filled diamond, cross and dot.
- MarkerSize defines the size of the marker in pixels.
- FillColor and EdgeColor define colors used to draw the marker's components.
A spline is used to render smooth curves whose shape is controlled by the control points. There are two types of splines:
- B spline, which is smoother
- C spline, which is not so smooth, but passes through the control points.
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:
- SplineType defines the type of a spline, B or C.
- SplineResolution is the number of line segments used to render each spline segment. The default value for this is 10. A larger value may be used to increase the rendering quality of splines with large segments or high curvature.
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:
- A recta-linear connector connects objects with linear segments, maintaining right angles between adjacent segments. It has a variable number of control points that define its segments.
- an arc connector connects objects with an arc path and three control points.
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:
- EdgeType is a read-only attribute defining the type of the connector: recta-linear or arc.
- Direction defines the orientation of the first segment of a recta-linear connector: vertical or horizontal.
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:
- FillColor defines the color of the map's background, which is visible when the map is sufficiently zoomed out.
- GISDisabled disables the GIS Object for quick editing.
- GISProjection Defines the projection used to render the map: RECTANGULAR or ORTHOGRAPHIC. The rectangular projection displays the world as a rectangular region; the orthographic projection maps the whole world onto a sphere, and is often used for the top-level globe-like views.
- GISCenter defines the latitude and longitude of the map to be displayed in the center of the GIS Object. This attribute is of the geometrical (G) type and is a set of three values. The first two values supply the longitude and latitude correspondingly, while the third value must be set to zero.
- GISExtent defines the extent of the map visible in the GIS Object. This attribute is of the geometrical (G) type and is a set of three values. The first two values supply the X and Y extents, while the third value must be set to zero.
- GISAngle defines the map rotation angle in degrees for the rectangular projection.
- GISStretch defines the stretch mode. If the attribute is set to YES, the map is stretched, otherwise the aspect ratio of the map is preserved.
- GISDataFile specifies a Server Data File (.sdf) which describes the dataset to be used by the Map Server to generate the map image.
- GISLayers defines a list of layers to be displayed in the generated image. The value of this attribute is a comma separated list of layer names, defined in the Server Data File. The "default" string may be used to display the default layers.
- GISVerbosity controls diagnostic output. May be set to a value from 0 (no debugging output) to 10 (maximum debugging output) to assist debugging of the Map Server setup.
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.
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:
- GradientType determines both the gradient geometry as well as the colors used for rendering. The following types of the gradient geometry are supported: LINEAR, SPHERICAL, ELLIPTICAL, CONICAL and LINE WIDTH.
The gradient color usage can be DIRECT (the color changing from object color to gradient color) or INVERSED (from gradient color to object color). The LINEAR gradient can also be ACYCLIC (the color changing from the first color to the second color) or CYCLIC (from the first color to the second color and back to the first one). If the value of the gradient type is NONE, the gradient is disabled.
- GradientColor defines the second color for the gradient fill. The gradient renders the object with a color smoothly changing from the object's color to the gradient color, or vice versa for the inversed gradient types.
- GradientAngle defines the gradient angle for linear gradient or the start angle for conical gradient. The angle is measured counter-clock wise relative to the X axis.
- GradientLength defines the relative length of the gradient in the range of 0 to 1, controlling the percentage of the object to be rendered with a gradient fill (the rest of the object will be rendered with a solid color). For example, a value of 1 results in the whole object being rendered with a gradient fill. If the value is equal to 0.5, half of the object will be rendered with a gradient fill, and the other half will be filled with a solid color. If the Gradient Length is larger than 1, the gradient fill will extend beyond the boundaries of the object and will be clipped.
- GradientCenter defines the center of the gradient fill in relative coordinates, so that the [0;1] range of each of its coordinates corresponds to the object's boundaries in the specified direction. The Z coordinate of the center is ignored. For example, a value of (0.5, 0.5, 0.5) centers the gradient inside the object. A value of (0, 0, 0) positions the gradient's center in the lower left corner of the object.
- ShadowOffset specifies the cast shadow offset in pixels. The X and Y coordinates of the offset value define the shadow pixel offset in the corresponding direction. Negative values may be used to inverse the offset's direction. If the value is (0,0), no shadow is rendered.
The Z component of the offset value is interpreted as the shadow transparency. If the Z value is between 0 and 1, the shadow is rendered as transparent, with a greater transparency for the Z values closer to 0.
- ShadowColor defines the color of the cast shadow.
- FillDirection is the angle that defines the direction of the fill dynamics. The angle is measured counter-clock wise, relative to the X axis. One of the predefined values (UP, DOWN, LEFT, RIGHT) may be selected from the menu, and ellipsis button for the FillDirection property may be used to enter the angle value in the Attribute Properties dialog.
- FillAmount controls fill dynamics. It is a relative value in the range of 0 to 1 defining the percentage of the object filled with the object's FillColor. The FillDirection attribute defines the fill direction. If the value is 1, the whole object is drawn. If the value is less than 1, only a portion of the object's fill will be drawn, as defined by the fill amount. The object's fill type must have FILL enabled in order to be rendered. The object's edge is not affected by the value of the Fill Amount. For text objects, only the text is clipped; the text box is not affected.
- ArrowType controls the type of arrow(s) attached to a polygon or any of its subclasses (spline, arc or connector). The arrow type is a composite attribute that determines both the arrows' type (EDGE, FILL or FILL & EDGE) and position (START, END, START AND END or MIDDLE). For arrows positioned in the middle of the polygon, the arrow type also determines an arrow's direction: DIRECT (from start to end point) or INVERSED (pointing from end to start). If the value is NONE, no arrows are rendered. The difference between FILL and FILL & EDGE arrow types becomes visible for lines with line width greater than 1. The geometry of the arrowheads is controlled by the ArrowShape attribute and is adjusted to match the line width for thick lines.
- ArrowShape controls the shape of the arrow in pixels. The X and Y coordinates of the arrow shape value are used. The X coordinate defines the length of the arrow along the line, the Y coordinate defines the width of the arrow's one side in the direction perpendicular to the line. If null value is specified (0,0,0), the default values are used.
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:
- FillColor controls the color of the drawing area.
- EdgeColor defines the color of the drawing border. On Windows, the border is always black and the attribute is ignored.
- LineWidth defines the border width in pixels. On Windows, it may be only 0 or 1.
- ShadowWidth specifies the width of the shadow drawn along the viewport's border. The sign of the ShadowWidth controls the type of the bevels: raised shadows for positive values and depressed shadows for negative values.
- ZoomEnabled enables or disables the run time use of keyboard accelerators for integrated panning and zooming. Refer to the page page 84 of the GLG User's Guide and Builder Reference Manual for the list of supported accelerators.
- ProcessMouse controls run time mouse events. Click events must be enabled for selecting objects with the mouse click. Move events must be enabled for processing object tooltips and MouseOver events.
- DisableInput may be used to disable input for viewports containing dial and meter widgets.
- BaseWidth specifies a viewport's base width used to scale text objects with the RESIZE scaling displayed in the viewport. If the viewport is resized and its current width becomes greater than the base width, the font size of the text objects will be increased. If the current width becomes smaller than the base width, the font size will be decreased.
- Set BaseWidth button sets BaseWidth of the viewport to its current width.
The Screen Attributes button in the viewport's Properties dialog display the following additional viewport attributes:
- OpenGLHint specifies the driver to be used for the viewport's rendering: OpenGL or GDI.
- Stretch XY enables or disables stretching of the drawing. If set to NO, the drawing preserves the X/Y ratio of objects.
- PushIn controls which parts of the viewport are visible when Stretch XY is turned off. If set to NO, the best fit is used to map the drawing extent to the window and some parts of the drawing may be invisible. If set to YES, the complete drawing extent will be visible.
- FonttableFile specifies a font table file to be used as the default font table. The file is saved using the Save Font Table button in the Fonttable Properties dialog.
- Add/Edit Font Table button provides an access to the properties of the font table which define fonts available for the drawing. A default set of fonts is used by default. Refer to the Font Table section on page 162 of the GLG User's Guide and Builder Reference Manual for details of the font table attributes and editing.
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:
- Move moves the object in an arbitrary direction by the specified X, Y and Z distances.
- MoveX moves the object in the X direction.
- MoveY moves the object in the Y direction.
- Scale scales the object by the specified scale factor.
- ScaleX scales the object in the X direction.
- ScaleY scales the object in the Y direction.
- Rotate rotates the object by the specified angle around the specified center.
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:
- InputValue is the data value that animates the dynamics.
- RangeHigh and RangeLow define the high and low ranges of the input value.
- Properties that depend on the type of dynamics, such as:
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):
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:
Colors to be used, where N is a zero-based color index.
The zero-based index controlling which color to use from the list.
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:
Colors to be used, where N is a zero-based color index.
Thresholds to be used, where N is a zero-based threshold index. Threshold values must be specified in the increasing order.
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.
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:
Enables or disables blinking. When set to 0, the blinking is disabled and the OffColor is used.
The blinking interval in seconds.
The first color.
The second color.
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:
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.
The color to use when the value goes outside of the LowLow / HighHigh range.
The default color to use when the value is inside the Low / High range.
The color to use when the value goes outside of the Low / High range.
The monitored value.
The High range.
The HighHigh range.
The Low range.
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:
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.
The monitored value.
The blinking interval in seconds.
The first color.
The second color.
The High range.
The Low range.
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:
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.
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:
The line type to use when the flow is disabled. The default value is 0 (solid line).
The line type pattern to use when the flow is enabled.
Enables the flow animation if set to 1, disables it if set to 0.
Controls the flow speed by defining a timer interval (in milliseconds) that is used to update the animation.
Inverses the flow direction if set to 1. The default value is 0 (direct flow).
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:
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.
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.
The Range Alert dynamics changes the attribute's value when the monitored value goes out of the specified range. It has the following properties:
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.
The monitored value.
The value to use when the value is inside the Low / High range.
The value to use when the value goes outside of the Low / High range.
The value to use when the value goes outside of the LowLow / HighHigh range.
The HighHigh range.
The High range.
The Low range.
The LowLow range.
The ValueWarning, RangeHighHigh and RangeLowLow properties are not present in the Range Alert dynamics attached to the Visibility attribute.
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:
Enables or disabled blinking. When set to 0, blinking is disabled and the OffValue is used.
The blinking interval in seconds.
The first color.
The second color.
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:
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.
The monitored value.
The blinking interval in seconds.
The value to use for blinking when the value goes outside of the range.
The default value to use when the value is inside the range.
The High range.
The Low range.
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:
This value is compared with the threshold and controls which attribute value to use.
The visibility value to use when the input value is less than the threshold. May be set to 0 or 1.
The visibility value to use when the input value is greater than the threshold. May be set to 0 or 1.
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:
The value to be displayed.
The label used to annotate the value.
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.
The number of digits after the decimal point in the value display.
The string used as a separator between the label and the value.
The unit string displayed after the value.
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:
The string to be displayed.
The label used to annotate the string value.
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.
The string used as a separator between the label and the string.
The second annotation displayed after the string.
Input parameters, where N is 1-based index of the input parameter.
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:
- TagName is a string attribute that assigns a meaningful name to a tag to identify the tag in an application and assist the user in mapping the tags to data sources using a Tag Browser. TagName is persistent and does not change when the tag's data source is modified.
- TagSource is a string attribute that defines a source of run-time data used to dynamically change the value of the attribute the tag is attached to. For example, TagSource may specify a name of a field in the process database used to supply real-time data for animating the attribute. Any attribute with a tag attached may be accessed by the tag's TagSource.
- The TagComment attribute is a string that may be used to store any additional user-defined information associated with the tag.
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.
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:
- Alarm Label contains a user-defined label used to identify the alarm.
- Enabled parameter enables or disables the alarm by setting its value to 1 or 0, respectively.
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:
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:
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.
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.
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.
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.
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:
- Click on the Set Horizontal Space button to select the operation to be performed. Notice that the label of the text edit box at the bottom of the Layout Toolbox displays the selected operation and is set to Horiz.Space.
- Enter 50 as the value in the Horiz. Space text box and press Enter. This will position all rectangles to be within 50 world coordinates from each other in the horizontal direction.
- Use the Up and Down buttons to increase or decrease the space between the rectangles using the specified Increment.
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.