dl-breadcrumbs__homedl-breadcrumb-item__separatorConfiguration and programmingdl-breadcrumb-item__separatorProgramming with CODESYSdl-breadcrumb-item__separator...dl-breadcrumb-item__separatorCODESYS Visualizationdl-breadcrumb-item__separatorReference, user interfacedl-breadcrumb-item__separatorVisualization Elementsdl-breadcrumb-item__separatorVisualization Element 'Bar Display'
dl-pagination__prev-inactivedl-pagination__prev-activedl-pagination__next-inactivedl-pagination__next-active
Visualization Element 'Bar Display'dl-permalink__symbolPermalink

Symbol:

_visu_img_bar_display

Category: “Measurement Controls”

The element displays the value of a variable.

Element properties

“Element name”

Example: ‎GenElemInst_2‎

“Type of element”

“Bar Display”

“Value”

Variable (numeric data type)

The value of the variable is displayed as a bar length.

Element property 'Center'

The properties contain fixed values for the coordinates of the point of rotation. This point of rotation is shown as the _visu_icon_center_point.png symbol. The point is used as the center for rotating and scaling.

“X”

X-coordinate of the point of rotation

“Y”

Y-coordinate of the point of rotation

You can also change the values by dragging the symbols (_visu_icon_center_point.png) to other positions in the editor.

These properties are available only when you have selected the “Support client animations and overlay of native elements” option in the Visualization Manager.

“Animation duration”

Defines the duration (in milliseconds) in which the element runs an animation

  • Variable (‎integer value‎)

    Example: ‎Menu.tContent‎ with ‎VAR tContent : INT := 500; END_VAR‎

  • Integer literal

    Example: ‎500‎

Animatable properties

  • “Absolute movement”, “Movement”, “X”, “Y”

  • “Absolute movement”, “Rotation”

  • “Absolute movement”, “Interior rotation”

  • “Absolute movement”, “Exterior rotation”

The animated movement is executed when at least one value of an animatable property has changed. The movement then executed is not jerky, but is smooth within the specified animation duration. The visualization element travels to the specified position while rotating dynamically. The transitions are smooth.

“Move to foreground”

Moves the visualization element to the foreground

Variable (‎BOOL‎)

Example: ‎bIsInForeground‎ with ‎VAR bIsInForeground : BOOL := FALSE; END_VAR‎

‎TRUE‎: At runtime, the visualization element is displayed in the foreground.

‎FALSE‎: At runtime, the visualization element is displayed in the layer where it was inserted in the visualization editor.

Element property 'Position'

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

“X”

X coordinate of the upper left corner of the element

Specified in pixels.

Example: ‎10‎.

“Y”

Y coordinate of the upper left corner of the element

Specified in pixels.

Example: ‎10‎.

“Width”

Specified in pixels.

Example: ‎150‎

“Height”

Specified in pixels.

Example: ‎30‎

You can also change the values by dragging the box symbols (_visu_icon_position_element) to other positions in the editor.

Element property 'Background'

“Background color”

Drop-down list with background colors

Note: This property depends on the style. For example, there are no heterochromatic background images for “FlatStyle” and “Whitestyle”.

“Own image”

  • “image”: Image ID of the background image. You select the background image from an image pool by clicking the button_threedots.png symbol.

    Info: If you specify the “<default>” value or select the image from the “Default” category in the input assistant, then the original element background image is used.

  • “Transparent color”: Color of pixels that are displayed as transparent.

    Selection from drop-down list or input assistant.

“Optimized drawing”

_cds_icon_option_activated: The background image is drawn one time. If there is a change in the foreground, then only the affected part of the image is redrawn.

_cds_icon_option_deactivated: The background image is redrawn in cycles.

Note: Deactivating this option is sensible only in certain exceptional cases.

Element property 'Bar'

“Diagram type”

Position of the scale

  • “Scale besides bar”

  • “Scale in bar”

  • “Bar in scale”

  • “No scale”

“Orientation”

Orientation depending on the ratio of width to height of the Bar Display:

  • “Horizontal”

  • “Vertical”

“Running direction”

Direction the values are increased.

Drop-down list for “Orientation Horizontal”:

  • “Left to right”

  • “Right to left”

Drop-down list for “Orientation Vertical”:

  • “Bottom to top”

  • “Top to bottom”

“Optimum size for bar”

_cds_icon_option_activated: The bar width requires the majority of the element surface.

Note: This property depends on the style. It is not provided for “FlatStyle” or “WhiteStyle”.

Element property 'Scale'

“Scale start”

Least value of the scale and the lower limit of the value range for the element.

Example: ‎0‎

_visu_icon_variable: The property “Variable” is shown below.

“Variable”

Variable (integer data type). Contains the scale start.

Example: ‎PLC_PRG.iScaleStart‎

Declaration:

PROGRAM PLC_PRG
VAR
		iScaleStart : INT := 0;
END_VAR

“Scale end”

Greatest value of the scale and the upper limit of the value range for the element.

Example: ‎100‎

_visu_icon_variable: The property “Variable” is shown below.

“Variable”

Variable (integer data type). Contains the scale end.

Example: ‎PLC_PRG.iScaleEnd‎

Declaration:

PROGRAM PLC_PRG
VAR
		iScaleEnd : INT := 120;
END_VAR

“Main scale”

Distance between 2 values on the rough scale.

Example: ‎10‎

_visu_icon_variable: The property “Variable” is shown below.

“Variable”

Variable (integer data type). Contains the distance.

Example: ‎PLC_PRG.iMainScale‎

Declaration:

PROGRAM PLC_PRG
VAR
		iMainScale : INT := 20;
END_VAR

“Subscale”

Distance between 2 values on the fine scale.

You can hide the fine scale by setting the value to ‎0‎.

Example: ‎2‎

_visu_icon_variable: The property “Variable” is shown below.

“Variable”

Variable (integer data type). Contains the spacing.

Example: ‎PLC_PRG.iSubScale‎

Declaration:

PROGRAM PLC_PRG
VAR
		iSubScale : INT := 5;
END_VAR

“Scale line width”

Specified in pixels.

Example: ‎3‎

“Scale color”

Color of scale lines

  • _cds_icon_three_dots:

    The “Color” dialog box opens.

  • _cds_icon_arrow_down: A drop-down list with color names opens.

“Scale in 3D”

_cds_icon_option_activated: Tick marks are displayed with slight 3D shadowing.

Note: This property depends on the style. Not available for “FlatStyle”.

“Element frame”

_cds_icon_option_activated: A frame is drawn around the element.

Element property 'Label'

“Unit”

Text that is displayed in the element.

Example: Units displayed in m/s.

“Font”

Font for labels (example: scale numbering).

Selection from the drop-down list or by clicking the button. button_threedots.png

“ Scale format (C Syntax)”

Values scaled in "printf" syntax

Examples: ‎%d, %5.2f‎

“Max. text width of labels”

(optional) Value that redefines the maximum width of the scale label. The correct value is normally set automatically.

Note: Change this value only if the automatic adjustment does not yield the expected result.

“Text height of labels”

(optional) Value that redefines the maximum height of the scale label. The correct value is normally set automatically.

Note: Change this value only if the automatic adjustment does not yield the expected result.

“Font color”

Selection from the drop-down list or by clicking the button_threedots.png button.

Element property 'Positioning'

“Horizontal offset”

Distance from the scale (bar) to the horizontal element frame

Specified in pixels.

Used for achieving the exact position relative to the background image.

“Vertical offset”

Distance from the scale (bar) to the vertical element frame

Specified in pixels.

Used for achieving the exact position relative to the background image.

“ Horizontal scaling”

Horizontal division of the scale

Specified in pixels.

Used for achieving the exact positioning relative to the background image.

“Vertical scaling”

Vertical division of the scale

Specified in pixels.

Used for achieving the exact positioning relative to the background image.

Element property 'Colors'

“Graph color”

Color of the bar

“Bar background”

_cds_icon_option_activated: The background of the bar is black.

_cds_icon_option_deactivated: The background of the bar is white.

“Frame color”

Color that the frames are drawn.

“Switch whole color”

_cds_icon_option_activated: The total color of the bar is switched to the color of the color area of the current value.

“Use gradient color for bar”

_cds_icon_option_activated: Bar is displayed with a gradient.

“Color range markers”

The color areas can be separated from each other inside the bar with a vertical mark.

  • “No markers”: No display.

  • “Marker forwards”: The color of the vertical mark corresponds to the color of the previous color area.

  • “Marker backwards”: The color of the vertical mark corresponds to the color of the next color area.

“Color areas”

“Create new”

A new color area is added.

“ Delete”

The color area is removed from the list.

“Begin of area”

Start value of the color area

“End of area”

End value of the color area

“Color”

Color that is used for displaying the area.

Element property 'Absolute movement'

The properties contain IEC variables for controlling the position of the element dynamically. The reference point is the upper left corner of the element. In runtime mode, the entire element is moved.

“Movement”

“X”

Variable (numeric data type). Defines the X position (in pixels).

Example: ‎PLC_PRG.iPos_X‎.

Increasing this value in runtime mode moves the element to the right.

“Y”

Variable (numeric data type). Defines the Y position (in pixels).

Example: ‎PLC_PRG.iPos_Y‎.

Increasing this value in runtime mode moves the element downwards.

“Rotation”

Variable (numeric data type). Defines the angle of rotation (in degrees).

Example: ‎PLC_PRG.iAngle1‎.

The midpoint of the element rotates at the “Center” point. This rotation point is shown as the _visu_icon_center_point.png symbol.

In runtime mode, the alignment of the element remains the same with respect to the coordinate system of the visualization. Increasing the value rotates the element to the right.

 _visu_img_prp_rotation

“Interior rotation”

Variable (numeric data type). Defines the angle of rotation (in degrees).

Example: ‎PLC_PRG.iAngle2‎.

In runtime mode, the element rotates about the point of rotation specified in “Center” according to the value of the variable. In addition, the alignment of the element rotates according to the coordinate system of the visualization. Increasing the value in the code rotates clockwise.

The rotation point is shown as the _visu_icon_center_point.png symbol.

Note: If a static angle of rotation is specified in the “Position  Angle” property, then the static angle of rotation is added to the variable angle of rotation (offset) when the visualization is executed.

 _visu_img_prp_inner_rotation

You can link the variables to a unit conversion.

The “X”, “Y”, “Rotation”, and “Interior rotation” properties are supported by the "Client Animation" functionality.

See also

Element property 'State variables'

The variables control the element behavior dynamically.

“Deactivate inputs”

Variable (‎BOOL‎). Toggles the operability of the element.

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

Element property 'Access rights'

Requirement: User management is set up for the visualization.

“Access rights”

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.