Image
This element can be used to add an image to the visualization. An image is allocated to the image element by specifying the corresponding static ID in combination with the name of the image pool. The setting "Image ID variable" can be used to define the image to be displayed dynamically.
A background image for the visualization page can be set via a background dialog in the visualization editor.
Properties editor
The properties of a visualization element - except alignment and order - can all be configured in the properties editor. By default, this editor opens next to the visualization editor, or it can be opened explicitly via the "Properties" command (which can be found in the View menu as standard).
A property can be modified by editing the field "Value". To this end, an input field, a selection list, a dialog or checkbox that can be activated is provided in this field, depending on the element type. The value field opens
- after a double-click,
- after a single click in a selected field,
- via the space bar, if the field was already selected.
If a variable is assigned,
- simply enter its name.
- Use the
button to open the input assistant for selecting a variable. The Variables category lists all variables that have already been defined in the project.
Working in the list of properties can be made easier with the aid of default, sorting and filter functions.
Additional settings
Static ID | ID of the image file for a static definition. Enter the ID of the image file, as defined in the corresponding image pool (string). The name of the image pool should be prefixed in order to make the entry unambiguous. (This is not necessary if the image file is managed in the global image pool, as this pool is always scanned first.) Example: IP_ImagePool.ButtonImage Click the |
Draw frame | If this option is enabled, the image file is shown with a frame. |
Truncate | If this option is enabled together with scaling type "Unscaled", only the part of the image that fits in the element is shown. |
Transparency | If this option is enabled, the color specified in the property "Transparency color" is shown transparent. |
Transparency color | The button |
Scaling type | Here you can define how the image file responds to changes in the element frame size:
The image retains its proportions. That is, the height/width ratio is retained, even if the height and width of the element frame are changed separately.
The image adapts itself to the size of the element frame, i.e. the height and width can be changed independently of each other.
The image retains its original size, even if the size of the element frame changes. Another factor to consider is whether the option "Truncate" is enabled. With this setting the element size is automatically adjusted to the image size whenever a new image ID is allocated. |
Horizontal alignment | This setting is only available if the option "Expert" in the properties editor is enabled and if the image scaling type is "Isotropic". It is used to define the horizontal alignment relative to the element frame.
|
Vertical alignment | This setting is only available if the option "Expert" in the properties editor is enabled and if the image scaling type is "Isotropic". It is used to define the vertical alignment relative to the element frame.
|
Position
Here you can define the position (X/Y coordinates) and size (width and height) of the element in pixels. The origin is in the top left corner of the window. The positive x-axis is on the right, the positive y-axis runs downwards. If the values edited, the displayed element is simultaneously modified in the visualization editor.
X | Horizontal position in pixels – X=0 is the left edge of the window. |
Y | Vertical position in pixels – Y=0 is the upper edge of the window. |
Width | Width of the element in pixels |
Height | Height of the element in pixels |
Center
When a value is edited, the corresponding element 
is simultaneous moved in the visualization editor.
X | Horizontal position of the element pivot in pixels |
Y | Vertical position of the element pivot in pixels |
Colors
A color is defined based on a hexadecimal number consisting of red / green / blue (RGB) components. For each of these three colors, 256 (0-255) values are available, which can be entered here statically. The color can be selected from a selection list or via the color selection dialog, which can be opened via the button . In addition, the level of transparency can be set for each color (0: fully transparent, 255: fully opaque).
|
Color |
Select a frame and fill color for the default state. If the color switching variable is defined as FALSE, the element is in default state. |
|
Alarm color |
Select a frame and fill color for the element in alarm state. This is triggered, if the color switching variable is defined as TRUE. |
 | Transparency is not supported under Windows CE. |
Appearance
|
Line width |
Defines the frame line width in pixels. 0 codes the same as 1 and sets the line width to 1 pixel. If no frame is required, set the line type to invisible. |
|
Line type |
Defines one of the following line types for the outline:
|
Texts
These properties are used for a static definition of the element labelling. Each can contain a formatting sequence, e.g. %s. In online mode the sequence is replaced by the contents of the variables defined in "Text variables".
Text | Enter a text. It is used to label the element. The text can contain a formatting sequence, e.g. %s. The corresponding variable is defined in "Text variables". Note: The text can also be entered directly. If the element is selected in the visualization editor, an input field can be opened by pressing the space bar. |
Tooltip | Enter a text. It is used as a tooltip for the element and appears in the visualization only in online mode when the cursor is placed over an element. The text can contain a formatting sequence, e.g. %s. The corresponding variable is defined in "Text variables". |
Text properties
These properties are used for a static definition of the font. A dynamic definition of the font is possible in the category "Font variables".
Horizontal alignment | Defines the horizontal alignment of the text through selection of:
|
Vertical alignment | Defines the vertical alignment of the text through selection of:
|
Text format | Defines the display of a text that is too long to be displayed completely in an element:
|
Font: | Defines the font through selection from predefined fonts:
Press |
Font color | Defines the font color for the element. Either from the selection list or via the dialog that opens when |
Image ID variable
Image ID | Project variable of the type String that contains the image ID with which the element is to be displayed. The ID is defined in the image pool. The name of the image pool should be prefixed in order to make the entry unambiguous. For image files that are managed in the "GlobalImagePool", it is not necessary to specify an image pool, since this image pool is always searched first. |
Dynamic image
With this property, an image file can be reloaded at runtime. This allows camera images to be refreshed, for example.
The image file being reloaded must
- be exchanged in the client directory of the device that the PLC HMI client has been started on (C:\TwinCAT\3.1\Components\Plc\Tc3PlcHmi\[Port_X]\Visu) for PLC HMIs with a build <4022.28.
- be exchanged in the boot directory of the device that the control code is executed on (C:\TwinCAT\3.1\Boot\Plc\[Port_X]\Visu) for PLC HMIs with a build >=4022.28 and the PLC HMI Web.
- be exchanged in the boot directory of the device that the control code is executed on (:\ProgramData\Beckhoff\TwinCAT\3.1\Boot\Plc\[Port_X]\Visu) for PLC HMIs and PLC HMI Web with a build >=TC3.1.4026.0.
Bitmap version | Variable of an integer data type that contains the image version. If the value of the variable changes, the visualization reloads the image referenced in the "Image ID" property and displays it. |
Absolute movement
The element can be moved by changing the x- and y-position (pixels) of the top left corner of the element via an integer variable. Absolute coordinate values are used here.
Motion
| X: The integer variable entered here defines the current x-position of the top left corner of the element (in pixels). It can be used to move the element in x-direction. (A positive value moves the element from left to right). Y: The integer variable entered here defines the current y-position of the top left corner of the element (in pixels). It can be used to move the element in y-direction. (A positive value moves the element from top to bottom). |
Rotation | The integer variable entered here defines the angle (angular degrees) for rotating the element around a rotation point. Positive values = clockwise Note: In contrast to the behavior with ‘internal rotation’ (see below), the element itself does not rotate. Click on the element to show the rotation point |
Scaling | The integer variable entered here defines the current scaling factor (percent). The element size is adjusted linearly according to this value. The value is implicitly divides by 1000, so that it is not necessary to use REAL variables in order to shrink the element. The scaling always refers to the rotation point (center). Click on the element to show the rotation point |
Internal rotation | The integer variable entered here defines the angle (angular degrees) by which the element is rotated around its rotation point; positive values=mathematically positive=clockwise. In contrast to "Rotation" (see above), the element itself rotates. Click on the element to show the rotation point (center) |
Relative movement
The element can be moved relative to its fixed position. The top left and bottom right edges of the element are moved in x- or y-direction by a value (pixels) defined by an integer variable. In contrast to an absolute movement, a relative position is defined, i.e. the distance to the original position. This function can be used to change the shape of the element. Positive values move the horizontal edges downwards and/or the vertical edges to the right.
|
Top left movement
|
|
|
Bottom right movement
|
|
Text variables
You can display text that is stored in a variable. To do this, first add a formatting sequence in the text that is defined under the "Texts" property. Then assign a variable. In online mode the formatting sequence is replaced by the contents of the variables.
Example %f:
Enter "Result: %2.5f" in the "Texts" property. Enter "fValue" in the "Text variables" property. The variable must be a defined IEC variable. The element will then be labeled in online mode with "Result: 12.12345" if fValue = 12.1234567.
Text variable | Variable (of default data type) containing the information to be displayed. The type must match the formatting sequence in the "Texts" setting. |
Tooltipvariable | Variable of type String containing the tooltip text to be displayed. The entry in the property "Texts" must contain a formatting sequence. |
Dynamic texts
These parameters are used to define dynamic texts originating from text lists. This enables language change, for example.
A further possibility to define a text dynamically is to supply the text via a string variable. (see the category "Text variables")
Text list | Name of the text list, as used in the project tree, as a string Example: 'TL_ErrorList' |
Textindex | Index (ID) of the text, as defined in the text list, as a string. It can be specified directly in a static manner or as a string variable. |
Tooltipindex | Index (ID) of the tooltip text, as defined in the text list, as a string. It can be specified directly in a static manner or as a string variable. |
Font variables
These variables are used for dynamic font definitions for element texts via project variables. Static definitions are configured under "Text properties".
Font name | Specification of a variable of the type String that contains the font name that is to be used to label the element. (name specified as in the standard font dialog) Example: MAIN.sFont (sFont := ‘Arial’;) |
Size | Variable of type INT containing the size of the element text in pixels, as in the default dialog ‘Font’. Example: MAIN.nHeight (nHeight := 16;) |
Flags | Variable of type DWORD for defining the font display via one of the flag values listed below. A combined definition can be achieved by adding the respective flag values and specifying the sum.
Example: MAIN.nFlag (nFlag := 6;) The text is shown bold and underlined. |
Character set | The character set to be used for the font can be defined via the default font number. This number can be specified via a DWORD variable (see also the definition in the default font dialog) |
Color | Variable of type DWORD for defining the color of the element text. |
Flags for the text alignment | Variable of type DWORD for defining the text alignment via one of the flag values listed below. A combined definition can be achieved by adding the respective flag values and specifying the sum.
Example MAIN.nFlag (nFlag := 5;) The text is displayed centered horizontally and vertically. |
State variables
These are dynamic definitions of the availability of the element in online mode.
Invisibility | Specification of a boolean variable. If this returns TRUE, the element is invisible in online mode. |
Input disabled | Specification of a boolean variable. If TRUE is returned, inputs for the element have no effect. Also, the element itself is greyed out in the visualization, to indicate that no user inputs are possible. If the visualization uses the user management, the elements for user groups with access right "only visible" are grayed out. |
Input configuration
Here you can define the consequential action that should be performed when the user makes an input in the element in online mode. As long as no follow-on actions are defined, "Configure…" appears in the Properties field. Click on "Configure…" to open the Input Configuration, where you can assign follow-on actions. Each input action can be assigned any number of follow-on actions.
The following input events are available for an element:
- OnDialogClosed
- OnMouseClick
- OnMouseDown
- OnMouseEnter
- OnMouseLeave
- OnMouseMove
- OnMouseUp
OnDialogClosed | This event is triggered if one of the dialog boxes that were opened for user inputs is closed within a visualization. Note: This property is not limited to the element, for which it is configured, but applies within the entire visualization. It therefore does not respond to each dialog closing action. Currently there is no way to define such a property for the entire visualization. It therefore has to be assigned to one of its elements. |
OnMouseClick | This mouse event is triggered when the cursor points to an element and a full mouse click (pressing and releasing the mouse button) is executed on this item. |
OnMouseDown | This mouse event is triggered when the mouse button is pressed while the cursor points to an element. It is irrelevant where on the visualization the mouse button is released again. |
OnMouseEnter | This mouse event is triggered when the cursor is dragged to the element. It is irrelevant whether the mouse button is pressed or released. |
OnMouseLeave | This mouse event is triggered when the cursor leaves the element. It is irrelevant whether the mouse button is pressed or released. |
OnMouseMove | This mouse event is triggered when the cursor is moved within the element. It is irrelevant whether the mouse button is pressed or released. |
OnMouseUp | This mouse event occurs when the mouse button is released on the element. The mouse button was pressed prior to that outside of the element. |
Input configuration - hotkeys
A hotkey can be used to define a key or key combination and link it with a follow-on action (e.g. MouseDown, MouseUp), which is to be executed when a key event occurs (KeyDown, KeyUp). By default the MouseDown action is executed on KeyDown (press key) and the MouseUp action on KeyUp (release key). This can be useful if a visualization is to be operated both via mouse actions and keyboard entries, since the input actions then only have to be configured once. The key configuration for an element is also managed in the hotkeys configuration for the visualization. Any changes are always synchronized between this and the element properties editor.
Key | Assigning a key. A selection list contains all currently supported keys, e.g. M. |
Event(s) | Definition of the event to be executed, if the key or key and modifier are used. Possible values that are available in a selection list:
|
Shift | If this option is enabled, the key has to be used in combination with the Shift key. |
Control | If this option is enabled, the key has to be used in combination with the Ctrl key. |
Alt | If this option is enabled, the key has to be used in combination with the Alt key. |
Element properties
All element properties and their descriptions are listed below.
Element name | The element name can be changed. Standard name is "GenElemInst_x". "x" stands for a sequential number. |
Element type | The element type is entered here. For three element groups it is possible to switch between the corresponding elements by changing the element type: |
Color variables
The color variables used for dynamic definition of the element colors via project variables of type DWORD. A color is defined based on a hexadecimal number consisting of red, green and blue (RGB) components. In addition, the variables are used to specify the transparency of the color (FF: fully opaque - 00: fully transparent). The DWORD has the following structure: 16#TTRRGGBB
| The structure of the hexadecimal number differs from TwinCAT 2. In TwinCAT 3 it is possible to define the transparency of the color with the hexadecimal number in addition to the RGB proportions. The transparency is indicated by the first two digits after "16#". Colors with definitions starting with "16#00" are invisible, since they are fully transparent. |
Example:
nFillColor := 16#FF8FE03F;
- FF: transparency (fully opaque)
- 8F: red
- E0: green
- 3F: blue
Color change | Boolean variable, which controls the switching of the element color between "normal state" (variable = FALSE) and "alarm state" (variable = TRUE). |
Normal state | Variable of type DWORD for defining the element color. It overwrites the value that is currently defined in "Colors". The value in the project variable is used, if the variable defined in "Color change" is FALSE. |
Alarm state | Variable of type DWORD for defining the element color in alarm state. It overwrites the value that is currently defined in "Colors". The value in the project variable is used, if the variable defined in "Color change" is TRUE. |
| Transparency is not supported under Windows CE. |
Access rights
This setting relates to the access rights for the individual element. Click to open the Access rights dialog. The setting is only available if a user management was added to the PLC project. The following status messages are available:
Not set. All rights. | The default message is set, if the element is shown as available for all groups. |
Rights are issued: Limited rights. | The message is set, if the element is shown with limited behavior for at least one group. |