ioBroker Visualisierung mit lovelace – Teil 23 – Picture (Bild) Glance

In diesem Artikel zeige ich Dir die Verwendung der Karte Picture (Bild) Glance für die Anzeige von Informationen.

In den letzten Artikeln habe ich bereits einige Karten und Tipps und Tricks rund um iobroker lovelace vorgestellt. Mit dem neuen Update des Adapter kamen jetzt auch neue Karten und Funktionen hinzu, welche ich nun gerne in einem kleinen Artikel zeige. In diesem Artikel zeige ich euch die Karte Picture (Bild) Glance. Mit dieser Karte können Informationen unterhalb eines Bilds dargestellt werden.

Im ersten Schritt öffnen wir zunächst im Bereich Instanzen die Adapter-Webseite. Mit dieser Webseite wird die Visualisierung dargestellt. Zudem wird hier auch direkt die Konfiguration erledigt.

In der Visualisierung klicken wir dann oben rechts auf den Sandwitch-Button und dann auf die Schaltfläche „Benutzeroberfläche konfigurieren“. Nun öffnet sich die Konfiguration der Visualisierung.

In meinem Fall handelt es sich um eine leere Umgebung, in die wir nun eine neue Karte einfügen möchten. Dazu klicken auf die große blaue Schaltfläche Karte hinzufügen.

Im neuen Fenster wird dann die Karte Bild Glance gewählt.

In der Karten-Konfiguration können wir hier nun mit der Konfiguration beginnen. Mit der Eigenschaft Titel können wir hier einen optionalen Titel für die Karte hinterlegen. Dieser wird unten in einer separaten Leiste des Bildes dargestellt. Im Feld Bildpfad können wir eine eigene Bilddatei hinterlegen. Diese kann z.B. über VIS in einen Ordner hochgeladen und dann hier dargestellt werden. Optional kann an Stelle der Bilddatei auch eine Kamera-Entität verwendet werden. Über die Tipp-Aktion kann zudem das Steuern von Aktoren konfiguriert werden. Über die Halte-Funktion (lang gedrückt halten) können optional auch weitere Informationen dargestellt werden.

Unterhalb der Konfiguration werden dann die einzelnen Entitäten (Aktoren oder Sensoren) definiert. Diese Entitäten werden dann in Form von kleinen Info-Icons nebeneinander dargestellt. Mit einem Klick auf das Icon wird dann entweder der Aktor gesteuert (Aktion Umschalten) oder eine Info dargestellt.

Nach dem wir nun die Karte konfiguriert haben, kann die Konfiguration über die X-Schaltfläche oben links gespeichert werden.

In der Visualisierung wird die neu eingefügte Karte nun wie folgt dargestellt. Ich finde die Darstellung der Karte sehr gut gelungen.

Ich hoffe ich konnte Dir damit weiterhelfen und freue mich wie immer über Deine Fragen, Anregungen oder Kommentare zum Thema 🙂