Add Click Zone Animation

This topic describes how to trigger animations when a user clicks on a specific area.

About this task

Identify the element area and set up a click zone animation that responds to user clicks.

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 Click Zone Animation.
    Adds an entry for click zone animation under the element.
  4. On the Details panel, access the click zone 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.

    Actions Add one or more action values to animate specific areas in an element.
    To add an action:
    1. Select the + icon.
    2. 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.
    3. 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.

  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.