Add Color Animation
This topic describes how to create color animation for SVG graphics.
About this task
Procedure
-
Open the graphic to modify.
See Edit Graphic.
- Navigate to and right-click the element you want to animate.
-
Select Add Color Animation.
Adds an entry for color animation under the element.
- On the Details panel, access the color animation properties for the entry.
-
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:- Select the + icon.
- Select a logical Operator. For example,
<
- 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.
- Numerical example: If the value is less than
- Choose a Color. For example, green.
- 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 to50 (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.
- On the toolbar, select Save.
Results
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. |