Pages
2. Smart Image (Dynamic)
Description
The Smart Image control allows dynamic image changes depending on system states or variable values.
You define conditions using simple JavaScript logic (like value == 1) and assign an image that will be shown if the condition is met.
If multiple conditions are defined, the first one that matches will be executed.
Key Properties
- Connection String – Connect to a variable or data point
- Conditions – Add one or more logic-based rules
- Script – JavaScript condition (evaluated against connected variable)
- Image URL – The image to display when the condition is true
Example: Machine Status
Assume your Connection String is linked to a variable [code_block_1].
| Status Value | Meaning | Image Displayed |
|---|---|---|
| [code_block_2] | Stopped | red_icon.svg |
| [code_block_3] | Running | green_icon.svg |
| [code_block_4] | Error | yellow_warning.svg |
You can implement this using three Smart Image conditions like:
[code_block_5]
value == 1