Add Color Animation

This topic describes how to create color animation for SVG graphics.

About this task

You can animate to change the color of the SVG graphic element.

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 Color Animation.
    Adds an entry for color animation under the element.
  4. On the Details panel, access the color animation properties for the entry.
  5. Enter information in the following fields:
    Field Name Description
    Animation Name Provide a name for reference.
    Data Item Select the data item you want to apply to the element. For example, a machine status indicator light changes color based on the machine's operational state.

    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.

    Color Table Configure one or more colors to change the color based on a specific value.
    To configure a color:
    1. Select the + icon.
    2. Select a logical Operator. For example, <
    3. Enter a Value (numerical or string).
      • Numerical example: If the value is less than 50, turn green. (OR)
      • String example: If the value is Low, turn green.
    4. Choose a Color. For example, green.
    5. Select Update.

    Similarly, add another value to the table that is >= 50 (or High) with red color.

    Result: If the value is less than 50 (or Low), the element's color remains green. If the value is greater than or equal to 50 (or High), the element's color turns red.

    Configured colors appear in a table with options to modify and delete the colors. You can also drag-to-reorder the list of colors in a table.

  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.