Smart Image

The Smart Image control extends the functionality of the standard Image control by allowing users to define conditions that determine which image is displayed. This enables dynamic image changes based on real-time variables, system states, or user interactions.

Overview

Unlike the basic Image control, which displays a single static image, the Smart Image control can switch between multiple images depending on predefined conditions. This makes it useful for visual indicators, status icons, or dynamic UI elements that need to adapt to different scenarios.

Key Features

Conditional Image Display

Assign multiple images and define conditions to control which one is shown.
Use real-time variables, system states, or JavaScript-based logic to trigger changes.

Seamless Image Switching

Automatically updates the displayed image when the linked condition changes.
Ensures smooth visual transitions without requiring manual input.

Customizable Behavior

Set fallback/default images when no condition is met.
Define priority rules when multiple conditions apply.

Supports Various Use Cases

Works for status indicators, animations, or any UI element that needs to visually reflect changing conditions.

Use Cases

Status Indicators

Example: Display a green checkmark when a machine is running, a yellow warning when maintenance is needed, and a red error symbol if there is a failure.

Dynamic UI Elements

Example: Switch between different button images based on user selections or input values.

Process Visualization

Example: Show different images to represent different process stages in an industrial system.

Example Usage

If a Smart Image is connected to a variable called "systemStatus":

When systemStatus = "ok", it displays a green checkmark.
When systemStatus = "warning", it shows a yellow warning icon.
When systemStatus = "error", it changes to a red error symbol.

This makes the Smart Image a powerful tool for creating intuitive and visually adaptive interfaces.

Controls