Editing and Filtering Image Lists

Editing image lists

Open the image list editor group in the editors area by double-clicking the image list in the COMPONENTS area.
The editor group contains two editors: the 'Image List' editor which is used to create and edit the image list entries and the 'Resources' editor which is used to define the language-specific images (see "Defining language-specific image lists").

Open the 'Image List' editor.

Each image list entry consists of the image name (incl. image width and height information), a start and end value and a write value. The start and end values define the value range which serves as the selection criterion for the image list entry at runtime. That means, if the variable (HMI tag) selected for the 'Image list' dynamic is within the specified range, the image matching the value range is shown in the visualization. The write value defines the value which is written to the variable (HMI tag) selected for the 'Image list' dynamic at runtime when an action is performed on the button showing the image.

Note
You can use all images that are contained in the current PLCnext Engineer project (local images and default images visible under the respective 'Images' folders in the COMPONENTS area) for the configuration of your image lists. (See the topic "HMI Objects, Symbols, Images" for details on adding images to the project.)

In order to prevent that an empty element is shown in the visualization if the value of the variable is not within any value range, you can enter a default image in the first (grey-colored) line of the table (the start and end value cannot be set for the default image). To write a specific value to the bound variable at runtime when the variable value is not within any value range or if the default image is selected by the user, you can enter the desired value in the 'Write Value' column.

Add an image list entry at the end of the list by clicking the button on the toolbar. Alternatively, left-click into the empty 'Select ...' input field, select an image from the dropdown list and confirm with <Enter> or use the context menu command 'Create Image List Entry'. To add a new image list entry between existing ones, select the table rows between which you want to insert and then click the button on the toolbar.
When adding new list entries, the following applies:
- The start, end, and write values are automatically selected, taking the existing values into account.
- If a series of values is detected, the series is continued, otherwise it is incremented by 1.
- The 'Image List' editor supports basic editing operations such as copying, pasting and cutting entries.
(To delete an image list entry, select the table line and press <Del> or click the 'Delete' button on the toolbar.)
In the 'Image' column select the desired image to be shown in the visualization at runtime. The dropdown list provides all images for selection which are contained in the current PLCnext Engineer project (local images and default images visible under the respective 'Images' folders in the COMPONENTS area).
In the 'Start value' and 'End value' columns enter the start and end value (values must be integer values).

Note
The value ranges of image list entries may not overlap. Overlapping values are displayed as errors.

You can increment or decrement the value ranges (start, end, and write value) of one or several list entries by 1 using the or button on the toolbar.
In the 'Write value' column enter the value (integer value) that is written to the variable at runtime when an action is performed on the button showing the image.
Optional: In the first line of the table, enter a default image and a write value. The default image is shown in the visualization if the value of the variable connected to the 'Image list' dynamic is not within any value range. The write value is written to the bound variable at runtime when the variable value is not within any value range or an action is performed on the button showing the default image.

You can now assign your image list with the 'Image list' dynamic to an HMI button object and display a specific image depending on the value of a connected integer variable (see "Making Image lists dynamic").

Filtering image lists

You can filter the image list entries by their properties or by text. To filter the entries by their properties, click the icon next to the search field at the top right above the table and mark the corresponding properties to activate the related filter. An activated filter is indicated by the framed filter icon and the icon shown in the top left-hand corner of the table. To deactivate a filter, click the filter icon again and deactivate the related properties.

To filter the image list entries by text, enter the search text into the 'Search' input field at the top right above the table. The search operates on all visible texts in the table. Deactivate the search by clicking the icon on the right of the 'Search' input field.