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 machineStatus.

You can implement this using three Smart Image conditions like:

// Condition 1
value == 0
// Image: red_icon.svg

// Condition 2
value == 1
// Image: green_icon.svg

// Condition 3
value == 2
// Image: yellow_warning.svg