Add Rotation Animation

This topic describes how to rotate SVG graphics.

About this task

Rotation animation in SVG graphics allows you to make elements turn or spin around a fixed point.

Procedure

  1. Open the graphic to modify.
  2. Navigate to Graphic Tree > Elements and right-click the element you want to animate.
  3. Select Add Rotation Animation.
    Adds an entry for rotation animation under the element.
  4. On the Details panel, access the rotation animation properties for the entry.
  5. Enter information in the following fields:
    Field Name Description
    Animation Name Provide a unique name for the animation.

    This name can be used to reference or identify the animation, making it easier to manage and control multiple animations on a single page.

    Input Bindings Configure dynamic input values that can control the rotation behavior of the element.
    • Value: Specify the tag that provides the actual input data value from a data source.
    • Minimum: Represents the minimum value associated with the specified tag.
    • Maximum: Represents the maximum value associated with the specified tag.

      The rotation angle of the element is determined through linear scaling of the input value between the specified input min/max, and mapping it to the output min/max values.

    Output Angle Specify the range within which the element can rotate.
    • Minimum: Enter the starting point of rotation angle. For example, 0 degrees could mean the tank (HMI graphic) is in its default upright position.
    • Maximum: Enter the end point of rotation angle. For example, setting this to 180 degrees might represent the tank being fully tilted or rotated to its maximum allowed position.
    Use Shape Center Determines the pivot point for the rotation.

    If this check box is enabled, the rotation will occur around the center of the SVG element, eliminating the need to manually specify the pivot point coordinates.

    If this check box is disabled, you need to manually specify the X and Y coordinates of the pivot point for the rotation.

    Data Item Select the data item you want to apply to the element. For example, wind turbine blades rotate according to wind speed data item, (OR) a HMI valve handle rotates to indicate its open or closed position based on a data item.

    See Create Data Item.

    Attribute The drop-down list contains several attributes, which can be associated with the data item in order to animate the HMI Graphic. The animation will apply to the selected attribute.
    Default Value Enter a default value for the selected attribute.

    This default value is used only when the data source is set to Manual in page designer. See Bind Your Data to Plug-ins.

  6. On the toolbar, select Save.

Results

The animation is applied.
Note: Modifying graphic templates in an application affect the rendering of data and animations in the runtime environment. You need to manually replace the instances of the graphic template with its latest version in all affected pages. Refer to the table:
Graphic Template Modifications What To Do
Added new animation Update graphic instances to see the new animations.
Deleted existing animation Update graphic instances to reflect the changes.
Modified visual elements (adding shapes, changing colors, etc.) No manual action required. Changes are automatically recognized by graphic instances in the runtime.