> For the complete documentation index, see [llms.txt](https://docs.kiloiot.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kiloiot.io/kilo-docs-de/kilo-iot-server/dashboards/adding-widgets/image-widget.md).
# Bild-Widget
Heften Sie Live-Sensorwerte an jedes Bild — Grundriss, Standortfoto, Geräteschema — mit dem Bild-Widget.
Das Image Widget verwandelt ein Bild in ein Live-Dashboard. Laden Sie ein Bild hoch — und es kann ein **beliebiges Bild sein**: ein Grundriss, ein Anlagenschema, ein Standortdiagramm, ein Foto eines Gebäudes, ein Foto eines Geräts wie der Silotanks oben — dann heften Sie Live-Messwerte darauf, jeweils genau dort, wo sich sein Sensor befindet.
Darum geht es: Sie lesen nicht mehr eine Liste von Gerätenamen, sondern schauen auf den realen Ort oder die Maschine und sehen, was jeder Teil davon gerade tut. Ein Werksleiter schaut auf das Silofoto und sieht, welcher Tank fast leer ist; ein Instandhaltungsingenieur schaut auf ein Anlagenschema und sieht, welche Komponente außerhalb der Toleranz liegt.
Laden Sie eine unterstützte Bilddatei — eine PNG oder JPG — eines beliebigen Ortes, Objekts oder Systems hoch, das Sie überwachen möchten. Jeder angeheftete Messwert zeigt seinen aktuellen Wert, seine Einheit und ein Symbol, und seine Farbe ändert sich, wenn Bedingungen ausgelöst werden, sodass der Status über das gesamte Bild auf einen Blick sichtbar ist.
## Image Widget konfigurieren
Hier ist eine vollständige Einrichtung für einen realen Fall — die Überwachung einer Reihe von Getreidesilos anhand eines einzelnen Fotos des Geländes. Ein Füllstandssensor in jedem Silo meldet seinen Füllstand als Prozentsatz. Dies ist ein Beispiel: Das Bild kann alles sein, und die Schritte sind gleich.
1. Öffnen Sie das Dashboard im Bearbeitungsmodus und klicken Sie auf **Image Widget** im Widget-Auswahlfenster. Das Einstellungsfenster öffnet sich — und anders als bei den anderen Widgets wird zuerst der **Darstellung** Tab geöffnet, weil Sie das Bild hochladen, bevor Sie irgendetwas darauf platzieren können.
2. Geben Sie einen Namen für das Widget ein — zum Beispiel „Silo-Levels“.
3. Das Widget beginnt mit einer Ebene, **Ebene 1**, die bereits erstellt ist. Geben Sie ihr einen klaren **Ebenenname** („Silo-Hof“) und laden Sie das Bild hoch — ein Foto der Silos. PNG- und JPG-Dateien werden akzeptiert.
4. Klicken Sie auf **Weiter** um zum **Datenquelle** Registerkarte zu öffnen.
5. Unter der Ebene klicken Sie auf **Datenquelle hinzufügen** — dadurch wird ein leerer Datenquellen-Block erstellt. Klicken Sie im Block auf **Gerät auswählen** und wählen Sie den Füllstandssensor des ersten Silos aus.
6. Klicken Sie auf **Messwert hinzufügen**. Legen Sie **Datentyp** auf **Telemetry**, wählen Sie den Füllstandsmesswert unter **Gerätemesswert**, und wählen Sie einen **Symbol**.
> **Können Sie Ihre Kennzahl nicht finden?** Das Image Widget heftet nur numerische Kennzahlen an. Wenn ein erwarteter Messwert fehlt, ist die Kennzahl als String oder Boolean und nicht als Integer oder Float gespeichert. Öffnen Sie **Geräte → Metriken**, suchen Sie die Kennzahl und ändern Sie, wie sie gespeichert wird, in Integer oder Float — sofern das Gerät tatsächlich eine Zahl meldet. Siehe [Messwerte](/kilo-docs-de/kilo-iot-server/devices/metric-templates.md).
7. Klicken Sie auf **Bedingungen: N** um das Bedingungen-Modal zu öffnen. Legen Sie eine **Standardfarbe**, dann klicken Sie für jedes Band auf **Bedingung hinzufügen** und füllen Sie die Zeile aus — eine **Bedingungsname**, **Datentyp** auf **Zahl**, die **Von** und **Bis** Werte festgelegt und eine **Farbe**. Die Farbe des Pins ergibt sich ausschließlich aus diesen Bedingungen. Für einen als Prozentsatz gemeldeten Silo-Füllstand fügen Sie vier hinzu:
* „Kritisch“ — **Von** 0, **Bis** 10 — burgunderrot (ein tiefes Rot)
* „Jetzt nachfüllen“ — **Von** 10, **Bis** 30 — rot
* „Bald nachfüllen“ — **Von** 30, **Bis** 60 — gelb
* „Normal“ — **Von** 60, **Bis** 100 — grün
Klicken Sie auf **Speichern** um das Modal zu schließen. Der Pin zeigt jetzt grün an, solange das Silo gut gefüllt ist, und wechselt beim Entleeren über Gelb und Rot zu einem burgunderfarbenen Rest — so erkennt der Bediener auf einen Blick am Foto, welchen Tank er füllen muss.
8. Der Pin für diesen Sensor erscheint auf dem Bild. **Ziehen Sie ihn** auf das Silo, zu dem er gehört. Verwenden Sie die Zoom-Steuerungen (+ / −) in der Vorschau, um ihn genau zu platzieren.
9. Wiederholen Sie das — **Datenquelle hinzufügen** für den Sensor jedes verbleibenden Silos, fügen Sie dessen Kennzahl und Bedingungen hinzu und ziehen Sie seinen Pin auf den richtigen Tank. Eine Ebene kann mehrere Datenquellen enthalten und eine Datenquelle mehrere Kennzahlen.
10. Klicken Sie auf **Speichern** um das Widget zum Dashboard hinzuzufügen.
Das Ergebnis: das Standortfoto mit einem farbigen Pin auf jedem Silo, jeweils mit dem live angezeigten Füllstand in Prozent — das gesamte Lagergelände auf einen Blick lesbar. Dieselben Schritte eignen sich für jedes Bild; nur das Bild, die Geräte und die Bedingungsbereiche ändern sich.
## Was Ebenen sind
A **Ebene** ist eine Bildansicht innerhalb desselben Image Widget — kein transparenter Überlagerungs-Layer auf einem einzelnen Bild. Jede Ebene hat ihr eigenes hochgeladenes Bild und ihre eigenen Pins. Wenn das Widget mehr als eine Ebene hat, erscheint ein **Ebenenumschalter** darauf; der Betrachter klickt darauf, um zwischen den Ansichten zu wechseln, sodass mehrere Bilder und Sensorsätze in einem Widget leben.
Ebenen kommen dort zur Geltung, wo ein Bild nicht alles zeigen kann. Nehmen wir die Silos — ein einzelnes Silo kann weit mehr als einen Sensor haben:
* **Ebene 1 — „Silo-Hof“.** Das Außenfoto aller Silos, auf jedem ein Füllstandspin. Diese Ansicht beantwortet *welches Silo Aufmerksamkeit benötigt*.
* **Ebene 2 — „In Silo 1“.** Wenn ein Silo eine Reihe von Sensoren trägt — etwa ein mehrpunktiges Temperaturkabel, das im Inneren nach unten verläuft — laden Sie ein offenes Schnittbild dieses Silos hoch und heften Sie jeden internen Sensor darauf an. Diese Ansicht beantwortet *was in diesem Silo vor sich geht*.
Auf dem Dashboard klickt der Bediener auf den Ebenenumschalter, um vom Hof-Überblick direkt zur Detailansicht im Inneren zu wechseln, ohne das Widget zu verlassen oder eine Geräteliste zu öffnen. Weitere Ebenen folgen demselben Muster — ein Foto des Förderband- und Pumpenbereichs, ein Diagramm des Bedienfelds — jeweils ein eigenes Bild mit eigenen Pins.
Ebenen eignen sich auch für ein mehrstöckiges Gebäude. Geben Sie jeder Etage ihre eigene Ebene — das Erdgeschoss auf Ebene 1, die darüberliegenden Stockwerke auf ihren eigenen — und heften Sie Temperatur, Luftfeuchtigkeit oder Belegung an den HVAC-Punkten jeder Etage an. Das Facility-Team nutzt den Ebenenumschalter, um das Gebäude Etage für Etage von einem Widget aus zu durchlaufen, wobei jede Etage ihre eigene Spezifikation hat.
Ein Grundriss ist hier einfach ein flaches Bild: Die vorhandenen architektonischen Zeichnungen werden einfach hochgeladen, je eine pro Etage — nichts muss gezeichnet oder modelliert werden. Die beiden sind unterschiedliche Werkzeuge: Das Image Widget heftet Live-Messwerte auf flache 2D-Pläne, die Sie bereits haben, während das [Digital Building Twin](/kilo-docs-de/kilo-iot-server/dashboards/adding-widgets/digital-building-twin.md) dazu dient, ein vollständiges 3D-Modell der Anlage von Grund auf zu zeichnen und zu betreiben.
**Ebenen oder separate Widgets?** Verwenden Sie Ebenen, wenn die Bilder unterschiedliche Ansichten desselben Ortes oder Systems sind. Verwenden Sie separate Image Widgets, wenn die Bilder zu verschiedenen Bereichen des Dashboards gehören oder nicht zusammenhängende Systeme abdecken.
Um mit Ebenen zu arbeiten: **Ebene 1** ist bereits vorhanden — benennen Sie es um und laden Sie sein Bild hoch. Klicken Sie auf **Neue Ebene hinzufügen** nur dann, wenn Sie eine weitere Bildansicht im selben Widget möchten. **Jede Ebene benötigt ihr eigenes Bild** — wenn Sie eine Ebene hinzufügen und sie leer lassen, **Weiter** geht es nicht weiter. Auf der **Datenquelle** Registerkarte fügen Sie unter der Ebene jede Datenquelle und Kennzahl hinzu, zu der sie gehört, und ziehen Sie jeden Pin auf das eigene Bild dieser Ebene.
## Anwendungsbeispiele
**Getreidesilo-Hof — Füllstände auf einen Blick** Ein Foto des Silostandorts mit einem Füllstandspin auf jedem Tank; Bedingungen grün über 60 %, gelb 30–60 %, rot 10–30 %, burgunderrot unter 10 %. Eine zweite Ebene enthält einen Schnitt durch das meistgenutzte Silo mit seinen internen Temperatursensoren entlang des Kabels angeheftet.
**Anlagenschema — Messwerte an der Maschine** Ein Schema einer Produktionslinie, ein Vibrationswert an jedem Motor und Lager angeheftet — grün 0–7 mm/s, bernsteinfarben 7–12, rot über 12. Der Ingenieur sieht, welche Komponente rau läuft, ohne Gerätenamen mit Maschinen abzugleichen.
**Mehrstöckiges Gebäude — eine Ebene pro Etage** Der Plan jeder Etage auf einer eigenen Ebene, HVAC und Temperatur pro Etage angeheftet — eine Serveretage mit engerem Bereich als die Büros.
Das Bild kann alles sein, was Sie fotografieren oder zeichnen können — ein Tanklager, ein Schaltraum, ein Kühlhaus, ein Lageplan — behandeln Sie dies daher als Ausgangspunkte, nicht als Grenzen. Überall dort, wo ein Messwert mehr aussagt, wenn Sie sehen *wo* es ist, platziert das Image Widget es dort.
## Was das Widget anzeigt
Auf dem Dashboard zeigt jede Ebene ihr Bild mit einem farbigen runden Pin an jeder von Ihnen festgelegten Position. Jeder Pin trägt das Symbol des Sensors, seinen aktuellen Live-Wert und die Einheit und wird in Echtzeit aktualisiert, wenn der Sensor meldet.
**Die Pin-Farbe ergibt sich ausschließlich aus Bedingungen.** Die erste passende Bedingung gewinnt; wenn keine Bedingung passt, verwendet der Pin die in der Bedingungen-Modal festgelegte Standardfarbe. Das Image Widget visualisiert den Status — wenn bei einem Messwert ein Grenzwert überschritten werden soll, kombinieren Sie es mit einem [Alarm](/kilo-docs-de/kilo-iot-server/alarm.md).
Wenn ein Widget zwei oder mehr Ebenen hat, **Ebenenumschalter** kann der Betrachter zwischen ihnen wechseln. Hat eine Ebene noch kein Bild oder sind im Widget noch keine Sensoren konfiguriert, wird dort stattdessen eine kurze Platzhaltermeldung angezeigt.
## Siehe auch
* [Bedingungen](/kilo-docs-de/kilo-iot-server/dashboards/adding-widgets/conditions.md) — Die Farblogik, die die Farbe jedes Pins bestimmt
* [Widgets hinzufügen](/kilo-docs-de/kilo-iot-server/dashboards/adding-widgets.md) — Bearbeitungsmodus und das Widget-Auswahlfenster
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.kiloiot.io/kilo-docs-de/kilo-iot-server/dashboards/adding-widgets/image-widget.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
