Pages
Image & Smart Image
Overview
The Image and Smart Image controls allow you to visually enhance your interface with static or conditionally changing images.
These can be used for:
- Icons and symbols
- Backgrounds or logos
- State-dependent graphics (e.g. machine status)
1. Image (Static)
Description
The Image control displays a fixed image – such as a logo or background graphic.
It has no logic or conditions – the image stays the same regardless of system state.
Key Properties
- Image URL – Choose the image to display
- Position / Size – Define layout using % values
- No connection to variables or logic
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 [code_block_0]) 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]