Visualization Element: Tabs

Symbol:

Category: Common Controls

The element displays selected visualizations in tabs. The tabs can be used by means of the tab header without having to configure an input configuration. A visualization user switches between visualizations by clicking the tab header.

Element properties

Are all element properties available?

All properties are available only after you select the Advanced option or the All categories filter in Properties.

Element name	Example: `Assembly A` Assign individual names for elements so that they are found faster in the element list.
Element Type	Tabs
Tab width	Width of the tab (in pixels) If there is not space for all tab headers, then a scroll bar is added. Example: `30`
Tab height	Height of the tab (in pixels) Integer literal Example: `15` From style

Are all element properties available?

All properties are available only after you select the Advanced option or the All categories filter in Properties.

Scaling type

Scaling type	Defines the scaling of the height and width of the referenced visualization The visualization is displayed in either a frame or a tab element.
Isotropic	The visualization is scaled to the size of the element to be displayed. With a fixed height-to-width ratio, the visualization retains its proportions.
Anisotropic	The visualization is scaled to the size of the element to be displayed. The height and width are each individually scaled to the element.
Fixed	The visualization is displayed in its original size, regardless of the dimensions of the element to be displayed.
Scroll Bar	The visualization is displayed in the element without any scaling. If it is larger than the element, then the element is provided with a scroll bar. Note: Assign variables to the properties Scrollposition variable horizontal or Scrollposition variable vertical. You can process the data for the scroll bar position in the application.
Dynamic scrollable	The size of the visualization is calculated dynamically and cyclically. When the size is calculated, the visibility of the elements of the referenced visualization is taken into account. The scroll bars are displayed only in case the contents of the referenced visualization cannot be fully displayed in the frame area after the dynamic calculation.

Deactivation of the background drawing

: The non-animated elements of the referenced visualization are displayed as background images (background frame) in order to optimize the performance of the visualization.

The advantage is that background elements, such as colored rectangles, are drawn once in the background.

standard icon : Deactivates the background display in order to prevent the behavior described above.

It can become problematic if another element (of the main page) is supposed to run behind this background frame. In this rare case, it makes sense to set this option so that the rectangle actually runs behind it.

Note

The property is available for the following settings:

The client animation functionality is not enabled: In the Visualization Manager, on the Settings tab, the Support client animations and overlay of native elements option is not selected.
When the client animation is enabled, the background drawing is automatically executed.
The Scaling type property is set to Scrollable.

Scroll bar settings

The properties include variables for the position of the scroll boxes in the scroll bars. You can process the data for the scroll box position in the application.

Scrollposition variable horizontal

Scrollposition variable vertical

Requirement: The Scaling type property is Fixed and scrollable.

Variable (integer data type, also as array) for the position of the horizontal or vertical scroll box

Example:

PLC_PRG.iScrollHor[CURRENTCLIENTID]

PLC_PRG.iScrollVer[CURRENTCLIENTID]

CURRENTCLIENTID indicates the current display variant.

The array contains the position for each display variant. If the visualization is running on multiple display variants, then the position changes are disconnected from each other.

In this example, the variable is declared as an array:

iScrollHor: ARRAY[0..20] OF INT;

iScrollVer: ARRAY[0..20] OF INT;

Tip

You can combine the variables to a Unit conversion.

Swiping

With this feature, the visualizations referenced in the element (Frame or Tabs) can be toggled by means of a swipe gesture (pan or flick gesture).

Swiping behavior

Requirement: Swiping is possible only when the Multitouch handling option is selected.

Options for how a visualization user needs to perform the swipe (pan or flick gesture) to trigger an image change to the next referenced visualization in the element:

Horizontal swiping: Swiping from right to left, and vice versa
Vertical swiping: Swiping from top to bottom, and vice versa
Not swipable: Swiping is disabled (default)

Hint: Set the scaling type to Anisotropic.

Swiping preview

Requirement: The option is available only in overlay mode (Support client animations and overlay of native elements option) to display the preview images on multitouch devices.

: During the swipe gesture, a preview image of the next visualization is displayed in the frame.

For more information, see: Referencing of Visualizations or Settings

References

Configure Button	Opens the Frame Configuration dialog. The dialog allows you to manage the referenced visualizations.
References	Visualization references which have been selected in the Frame Configuration dialog
Name of the visualization reference	Example: `visRectangle`
Heading	Heading in the tab of the tab element Example: `Panel`
Image ID	Image ID in the theme `<image pool name>.<ID>` Example: `Imagepool_A.1` for the image with ID `1` in `Imagepool_A`
Invisible	Boolean variable to dynamically hide the corresponding tab Example: `PLC_PRG.bInvisible` `TRUE`: The tab is hidden. Note: This function is not implemented for the integrated visualization (no `VISU_TASK)`.
Interface parameter of the visualization reference	Example: `iX` If the visualization has an interface with variables or parameters, then they are listed here with the variable name (as child properties) with the initialization value (next to it under the Value column). Hint: You can find the data type of the interface parameters in the interface editor.

Position

The position defines the location and size of the element in the visualization window. This is based on the Cartesian coordinate system. The origin is located in the upper left corner of the window. The positive horizontal X-axis runs to the right. The positive vertical Y-axis runs downwards.

X	The X-coordinate (in pixels) of the upper left corner of the element Example: `10`
Y	The Y-coordinate (in pixels) of the upper left corner of the element Example: `10`
Width	Specified in pixels Example: `150`
Height	Specified in pixels Example: `30`

Tip

You can change the values by dragging the box symbols to other positions in the editor.

Toggle variable

Variable

Variable (integer data type) for the index of the active visualization

Example: PLC_PRG.uiActiveVisuID.

The variable controls the switching of the referenced visualizations. The variable indexes the frame visualizations which are displayed on the tab at runtime. When the value of the variable changes, it switches to the recently indexed visualization on the tab.

Tip

The Frame Configuration dialog includes a list of referenced visualizations. The visualizations are automatically numerically indexed via the order in the list. Adapt the order of the frame visualizations to generate the desired index.

State variables

The variables control the element behavior dynamically.

Invisible

Variable (BOOL) for toggling the visibility of the element

TRUE: The element is not visible at runtime.

Example: bIsVisible with VAR bIsVisible : BOOL := FALSE; END_VAR

Deactivate inputs

Variable (BOOL) for toggling the operability of the element

TRUE: User inputs do not have any effect in runtime more. The element is shown as deactivated.

Tip

The Invisible property is supported by the "Client Animation" functionality.

Permissions

Note

Available only when a user management is set up for visualization.

Access Rights button

Opens the Access Rights dialog. There you can edit the access privileges for the element.

. Status messages:

Not set. Full rights.: Access rights for all user groups : operable
Rights are set: Limited rights: Access is restricted for at least one group.