ioBroker Visualisierung mit lovelace – Teil 20 – Das Markdown Widget

In diesem Artikel zeige ich Dir die Darstellungsmöglichkeiten des Markdown Widgets.

Mit dem Markdown Widget können formatierte Texte auf der Visualisierung dargestellt werden. Hierzu verfügt das Widget über eine spezielle Syntax, mit der Texte formatiert werden können. Im 20. Teil der Artikelreihe zeige ich Dir, wie ich dieses Widget für meine Visualisierung eingesetzt habe. Auf meiner Übersichtsseite der Visualisierung sollten alle Informationen rund um den Garten-Status (Bewässerung und Sensordaten) dargestellt werden.

Im ersten Schritt öffnen wir nun die Konfiguration unserer Lovelace Visualisierung. Dann wechseln wir auf die Ansicht, in die wir das Widget einfügen. In meinem Fall ist das die Übersichtsseite.

Über die Plus-Schaltfläche können wir nun ein weiteres Widget (Karte) hinzufügen. In der Auswahl klicken wir auf das gelb markierte Widget (Markdown).

Jetzt öffnet sich die Kartenkonfiguration, auf der wir das Widget konfigurieren können. Die Karte verfügt über einen optionalen Titel sowie das eigentliche Inhaltsfeld. In diesem Feld können wir nun unseren formatierten Text eingeben.

Für die Darstellung des Textes stehen die folgenden Formatierungsoptionen zur Verfügung:

**Text fett**
*Text kursiv*
# Überschrift 1
## Überschrift 1.1

In der Konfiguration des Widgets können wir uns direkt das Ergebnis der Eingaben im Vorschau-Bereich auf der rechten Seite ansehen.

Das Markdown Widget stellt neben den Standard-Formatierungen noch weitere Darstellungsmöglichkeiten zur Verfügung. Hierzu zählen Listen mit verschiedener Darstellung, horizontale Trennlinien sowie Links zu Webseiten.

Die vollständige Referenz zu den Markdown-Formatierungen findest Du hier:

https://commonmark.org/help/

Wir haben nun gesehen, wir Texte innerhalb vom Widget formatiert dargestellt werden können. Bei diesen Texten handelte es sich aber immer um statische Texte, welche so im Smarthome natürlich wenig Sinn machen. Daher schauen wir uns nun im nächsten Schritt die Möglichkeiten des Object-Bindings in Lovelace genauer an.

Ich habe bereits in einem früheren Artikel das Thema Object-Binding in VIS erklärt. Mit dieser Technik können wir die Werte von Datenpunkten direkt im Widget darstellen.

Wenn wir im Widget den Wert eines Datenpunkt anzeigen wollen, setzen wir dazu einfach die vollständige ID des Datenpunktes in geschweifte Klammern. Für mein Beispiel kopiere ich mir nun über die gelb markierte Schaltfläche die ID des Datenpunkt in die Zwischenablage.

Im Widget füge ich dann den folgenden Text ein.

Bodenfeuchtigkeit: {0_userdata.0.Sensor.Bodenfeuchtigkeit}%

Neben der normalen Anzeige von Datenpunkten können wir auch Bedingungen für die Anzeige definieren. Im folgenden Beispiel frage ich dazu einen Datenpunkt auf den Wert true oder false ab und gebe dann als Text aktiv oder inaktiv zurück.

Bewässerung Hochbeet: **{a:0_userdata.0.Devices.Bewaesserung.Hochbeet;a===true || a ==='true' ? 'aktiv' : 'inaktiv'}**

Im folgenden Beispiel siehst Du die Konfiguration meines Garten-Status:

Mit dem Markdown Widget kannst Du sehr einfach und schnell statische und dynamische Texte auf Deiner Visualisierung darstellen. Ich hoffe ich konnte Dir damit weiterhelfen und freue mich wie immer über Deine Fragen, Anregungen oder Kommentare zum Thema 🙂