Add Click Zone Animation
This topic describes how to trigger animations when a user clicks on a specific area.
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 Click Zone Animation.
Adds an entry for click zone animation under the element.
- On the Details panel, access the click zone animation properties for the entry.
-
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.
Actions Add one or more action values to animate specific areas in an element. To add an action:- Select the + icon.
- Select an action to define what happens when a user interacts with
a specific area. For example, the
URL
action opens the specified web page, (OR)Go To Page
leads to the specified page. - Select Update.
You have the option to modify or delete all the action values added to a specific area. You can also drag-to-reorder the actions list.
Data Item Select the data item you want to apply to the element. For example, clicking on the HMI tank opens a detailed view showing historical water level data, leveraging the data item associated with the sensor. 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 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.
- 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. |