Pages
Image & Smart Image
Übersicht
Die Steuerelemente Image und Smart Image ermöglichen es, die Benutzeroberfläche visuell aufzuwerten – entweder mit festen oder zustandsabhängigen Bildern.
Anwendungsbeispiele:
- Icons und Symbole
- Logos oder Hintergründe
- Visuelle Statusanzeige (z. B. Maschinenzustand)
1. Image (Statisch)
Beschreibung
Das Image-Element zeigt ein festgelegtes Bild – z. B. ein Logo oder einen Hintergrund.
Es reagiert nicht auf Systemzustände oder Variablen – das Bild bleibt immer gleich.
Wichtige Eigenschaften
- Image URL – Bestimmt, welches Bild angezeigt wird
- Position / Größe – Layout über % Werte festlegen
- Keine Verbindung zu Variablen oder Logik
2. Smart Image (Dynamisch)
Beschreibung
Mit Smart Image können Bilder abhängig vom Zustand einer Variable oder eines Skripts angezeigt werden.
Man definiert Bedingungen über einfache JavaScript-Logik (z. B. [code_block_0]) und weist jedem Fall ein Bild zu, das angezeigt wird, wenn die Bedingung erfüllt ist.
Wenn mehrere Bedingungen definiert sind, wird nur die erste zutreffende ausgeführt.
Wichtige Eigenschaften
- Connection String – Verbindung zu einer Variable oder Datenquelle
- Conditions – Eine oder mehrere Bedingungen hinzufügen
- Script – JavaScript-Bedingung, die auf die verbundene Variable angewendet wird
- Image URL – Das Bild, das bei erfüllter Bedingung angezeigt wird
Beispiel: Maschinenstatus
Angenommen, dein Connection String ist mit der Variable [code_block_1] verbunden.
| Statuswert | Bedeutung | Angezeigtes Bild |
|---|---|---|
| [code_block_2] | Gestoppt | red_icon.svg |
| [code_block_3] | Läuft | green_icon.svg |
| [code_block_4] | Fehler | yellow_warning.svg |
Du kannst drei Bedingungen wie folgt definieren:
[code_block_5]