dl-breadcrumbs__homedl-breadcrumb-item__separatorConfiguration and programmingdl-breadcrumb-item__separatorProgramming with CODESYSdl-breadcrumb-item__separator...dl-breadcrumb-item__separatorCODESYS Visualizationdl-breadcrumb-item__separatorAnimation of elements dl-breadcrumb-item__separatorConfiguring rotations and offsets
dl-pagination__prev-inactivedl-pagination__prev-activedl-pagination__next-inactivedl-pagination__next-active
Configuring rotations and offsetsdl-permalink__symbolPermalink

You can animate a visualization element and have it shifted or rotated at runtime. To do this you assign variables in its property “Absolute movement” and then program the animation in the application code.

Configuring an offset

You can configure an offset of the element by programming the variables in “Absolute movement  Movement”.

Requirement: A project with a visualization is open.

  1. Open the visualization and add an element “Rectangle”.

    The view “Properties” displays the configuration of the element.

  2. In the application in the POU ‎PLC_PRG‎, declare type-compliant variables: ‎ diOffsetX : DINT;‎ and ‎diOffsetY : DINT;‎

  3. Configure the property “Absolute movement  Movement  X” with ‎PLC_PRG.diOffsetX‎ and “Y” with ‎PLC_PRG.diOffsetY‎.

  4. Implement a shift of the element, for example by means of a modulo division of the value:

    diOffsetX := diOffsetX MOD 100;

    diOffsetY := diOffsetY MOD 100;

  5. Compile, load and start the application.

    The application runs. The visualization opens. The rectangle moves.

Configuring a rotating element

When an element rotates, then the center point of the element rotates precisely around its center. The center is defined in the property “Center”. The center point of an element is calculated internally. If the center point and center coincide, then there is no rotation.

You can configure a clockwise rotation of the element by increasing the value of the variable “Absolute movement  Rotation”.

Requirement: A project with a visualization is open.

  1. Open the visualization and add an element “Rectangle”.

    The view “Properties” displays the configuration of the element.

  2. In the application in the POU ‎PLC_PRG‎, declare a type-compliant variable:‎rValue : REAL;‎

  3. Configure the property “Absolute movement  Rotation” with ‎PLC_PRG.rValue‎.

  4. Implement the clockwise rotation of the element by increasing the value of the variable:

    ‎rValue := rValue + 0.1;‎

  5. Compile, load and start the application.

    The application runs. The visualization opens. The rectangle rotates about the center. The alignment of the element with respect to the coordinate system is fixed.

    _visu_img_prp_rotation

Configuring a rotating element

When an element performs an inner rotation and rotates, then the center point of the element rotates precisely around its center. This is the point defined in the property “Center”. The alignment of the element also rotates relative to the coordinate system. If the center point of the element and the center coincide, this produces a rotation on the spot.

You can configure a clockwise rotation of the element by increasing the value of the variable “Absolute movement  Inner rotation”.

If the visualization is In runtime, you can see that the element rotates (also relative to the coordinate system of the visualization).

Requirement: A project with a visualization is open.

  1. Open the visualization and add an element “Polygon”, which you form into a pointer.

    The view “Properties” displays the configuration of the element.

  2. Drag the center point of the element to the base of the pointer.

  3. In the application in the POU ‎PLC_PRG‎, declare a type-compliant variable:

    ‎rValue : REAL;‎

  4. Configure the property “Absolute movement  Inner rotation” with ‎PLC_PRG.rValue‎.

  5. Implement the clockwise rotation of the element by increasing the value of the variable:

    rValue := rValue + 0.1;

  6. Compile, load and start the application.

    The application runs. The visualization opens. The pointer rotates about its base.

    _visu_img_inner_rotation