Scrollbar

This element generates a scrollbar. If a user drags the scroll box to a different position while the visualization is running, the property "Value" is set accordingly. The alignment of the scrollbar can be changed from horizontal to vertical.

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.

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:

Additional settings

Value	Variable of type integer, which contains the position of the scroll box in the scrollbar.
Minimum value	Smallest possible scrollbar value
Maximum value	Largest possible scrollbar value
Page size	If a user clicks in the scrollbar at runtime, the position of the scroll box is moved by the page size in the direction of the mouse position. The page size can be specified as a fixed value in pixels or as a variable of type integer.

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

Bar

Alignment

Here you can specify the alignment of the bar:

Horizontal
Vertical

The alignment can also be configured directly in the visualization, by changing the width and height of the scrollbar.

Direction of travel

If the alignment is horizontal, you can select the scrolling direction as follows:

Left to right
Right to left

If the alignment is vertical, you can select the scrolling direction as follows:

From bottom to top
From top to bottom

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 Scrollbar 3: . In addition, the level of transparency can be set for each color (0: fully transparent, 255: fully opaque).

Normal state

Frame color
Fill 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 state

Frame color
Fill 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.

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, compared to TwinCAT 2. In TwinCAT 3, in addition to the RGB components, the color transparency can also be defined with the hexadecimal number. 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

Frame color
Fill color

Variables of type DWORD for defining the frame and fill color for the element. They overwrite the values that are currently defined in "Colors". The values in the project variable are used, if the variable defined in "Color change" is FALSE.

Alarm state

Frame color
Fill color

Variables of type DWORD for defining the frame and fill color for the element in alarm state. They overwrite the values that are currently defined in "Colors". The values in the project variable are used, if the variable defined in "Color change" is TRUE.

	Transparency is not supported under Windows CE.

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: Left Centered Right
Vertical alignment	Defines the vertical alignment of the text through selection of: Top Centered Bottom
Text format	Defines the display of a text that is too long to be displayed completely in an element: Default – the text extends beyond the element. Line break – the text is automatically wrapped. Ellipsis - the text is displayed as far as possible and then truncated with "...".
Font:	Defines the font through selection from predefined fonts: Standard Heading Large heading Title Note Press to opens the dialog for user-defined font properties.
Font color	Defines the font color for the element. Either from the selection list or via the dialog that opens when is clicked.

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. 1: italics 2: bold 4: underlined 8: deleted 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. 0: top left 1: centered horizontally 2: right 4: centered vertically 8: below Example MAIN.nFlag (nFlag := 5;) The text is displayed centered horizontally and vertically.

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.

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.