Skip to main content

Configuring Movement and Rotation

You can animate a visualization element so that is moves or rotates at runtime. To do this, you assign variables in its property Absolute movement and program the animation in the application code.

Note

0_Sample_ProjectSample projects with visualization elements

Configuring a movement

You can configure the movement of an element by programming the variable in Absolute movement → Movement.

Requirement: A project with a visualization is open.

  1. Open the visualization editor and add a Rectangle element.

    The Properties view shows the configuration of the element.

  2. In the application, declare type-compliant variables in the PLC_PRG POU.

    Declaration in ST

    PROGRAM PLC_PRG
VAR
    diOffsetX : DINT;
    diOffsetY : DINT;
END_VAR

  3. Configure the Absolute movement → Movement property.

    X with PLC_PRG.diOffsetX

    Y with PLC_PRG.diOffsetY

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

    Implementation

    PROGRAM PLC_PRG
VAR
    diOffsetX : DINT;
    diOffsetY : DINT;
END_VAR
    diOffsetX := diOffsetX MOD 100;
diOffsetY := diOffsetY MOD 100;

  5. Compile, download, and start the application.

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

Rotation around a fixed point

An element can be rotated around a fixed point. Under the Center property, define the fixed point with X/Y coordinates. The midpoint of the element is calculated internally. The alignment of the element is does not change with respect to the coordinate system.

When the visualization is run, the element is moved so that its midpoint draws a circular path around the fixed point (center).

Tip

Note that no movement occurs in a configuration where the midpoint and center coincide.

Requirement: A project with a visualization is open.

  1. Open the visualization and add a Rectangle element.

    The Properties view shows the configuration of the element.

  2. In the application, declare a type-compliant variable in the PLC_PRG POU.

    Declaration in ST

    PROGRAM PLC_PRG
VAR
    rValue : REAL;
END_VAR

  3. You can configure a right rotation of the element by setting the Absolute movement → Rotation property with a variable whose value is increased programmatically.

    1. Configure the Absolute movement → Rotation property.

      Rotation with PLC_PRG.rValue

    2. Implement the clockwise rotation of the element by increasing the value of the variable in your IEC code.

      Implementation

      PROGRAM PLC_PRG
VAR
    rValue : REAL;
END_VAR
rValue := rValue + 0.1;

  4. Compile, download, and start the application.

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

    _visu_img_prp_rotation.png

Rotating element

Interior rotation

An element can also perform a self-rotation. To do this, configure the Interior rotation property. Under the Center property, define the fixed point with X/Y coordinates. The midpoint of the element is calculated internally. In addition, the position changes of the element must be programmed.

When executed, the element rotates around this fixed point. Then the alignment of the element rotates with respect to the coordinate system.

Tip

Note that the element rotates at the position when the midpoint and center coincide.

Requirement: A project with a visualization is open.

  1. Open the visualization and add a Polygon element that you shape into a pointer.

    The Properties view shows the configuration of the element.

  2. In the Position → Angle property, specify a static angle of rotation.

    The angle of rotation has an initial value.

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

  4. In the application, declare a type-compliant variable in the PLC_PRG POU.

    Declaration in ST

    PROGRAM PLC_PRG
VAR
    rValue : REAL;
END_VAR

  5. You can configure a right rotation of the element by setting the Absolute movement → Rotation property with a variable whose value is increased programmatically.

    1. Configure the Absolute movement → Interior rotation property.

      Interior rotation with PLC_PRG.rValue

    2. Implement the clockwise rotation of the element by increasing the value of the variable in your IEC code.

      Implementation

      PROGRAM PLC_PRG
VAR
    rValue : REAL;
END_VAR
rValue := rValue + 0.1;

  6. Compile, download, and start the application.

    The application runs. The visualization opens. The pointer rotates about its base. The angle of rotation increases continuously starting at the position that determines the static angle of rotation, because the static angle of rotation is added to the angle of rotation. The static angle of rotation acts as an offset.

    _visu_img_inner_rotation.png
In this section: