Add Datalink Animation

This topic describes how to animate text for SVG graphics.

About this task

In SVG, you can create text elements and animate them. You can also use input data to create dynamic and interactive animations by linking data to the animation properties. At runtime, the animation is executed based on the data. For example, change in color of an element based on data values.

Procedure

  1. Right-click the element you want to animate.
  2. Select Add DataLink Animation.
    Adds an entry for text animation under the element.
  3. On the Details panel, access the text animation properties for the entry.
  4. Enter information in the following fields:
    Field Name Description
    Animation Name Provide a name for reference.
    Data Type Choose from these data types to configure animation properties:
    • Text
    • Decimal
    • Integer
    Data Item Select the data item you want to apply to the element.

    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.
    Zero Fill Select this check box if you want to fill unused digits with zeroes.

    For example, if the graphic can display a maximum of four digits and the current value is 25, it is displayed as "0025" when zero fill is enabled.
    Integer Digits If Zero Fill is enabled, enter the number of digits for display.
    Group Digits Select this check box if you want to group the digits in a graphic display making it easy to read.

    For example, 123456 can be grouped as "123,456".
    Scientific Select this check box if you want to display numbers in scientific notation. This option is useful for displaying very large numbers in a more compact and readable format.
    Decimal Digits Enter the number of decimal places to display a number. This option helps to avoid displaying unnecessary decimal places or rounding errors.
  5. On the toolbar, select Save.