Making Image Lists Dynamic

The image list entries can be made dynamic with help of the 'Image list'/'Image list when down' dynamics or the 'Action ...' dynamic assigned to an HMI button object. This allows to select the displayed image from an image list at runtime by changing the program variable connected to the dynamic.

This topic describes how to make image list entries dynamic using the 'Image list' dynamic bound to a button object. At runtime, the button will display an image from the image list depending value of a process variable. For details about the 'Action ...' dynamics and how to connect it to an image list using the 'Write image list value' action, see the corresponding sub-topics in the "Dynamics Reference" chapter.

The following procedure assumes the following:

You have created an image list with several image list entries and value ranges as described in the topics "Creating and Managing Image Lists" and "Editing and Filtering Image Lists"..
The project contains a numeric variable (integer or floating point) or an HMI tag of type INT or REAL/LREAL.
The project contains an HMI page.

Proceed as follows:

Insert a button object into the HMI page.
Click the 'Dynamics' tab in the properties window of the button. If the properties window is not visible, right-click the object and select 'Show/Hide Settings' from the context menu or click the in-place button.
On the 'Dynamics' tab, click the 'New Dynamic' button at the top of the tab and select the 'Image > Image list' dynamic.
Connect a numeric variable (integer or floating point) to the dynamic. To do so, click the input field right of the 'Variable' field and select a variable. The value of this variable determines which image the button displays when executing the HMI application. Depending on the value of the configured variable, the image from the associated image list is displayed at runtime.
When binding a variable or HMI tag of type REAL/LREAL to the 'Image list' dynamic, the 'Integer converter strategy' field is additionally shown. Here you can set whether the variable value is truncated or rounded before it is used as source value.
Connect the image list to the dynamic. To do so, click the input field right of the 'Image list' field and select the image list from which an image is displayed (the field provides all image lists for selection you have created in you project).

Example