ioBroker Visualisierung mit lovelace – Teil 18 – Conditional Card

In diesem Artikel zeige ich Dir die Karte „Conditional Card“ oder auch „bedingte Elemente“ in ioBroker genannt.

Mit der Karte „Conditional Card“ oder zu deutsch „bedingte Karte“, können wir die Anzeige der Karte in der Visualisierung an Bedingungen knüpfen. Als Beispiel werden wir eine ioBroker Adapter-Updates Anzeige implementieren, die nur sichtbar sein soll, wenn Updates vorhanden sind. ioBroker stellt hierfür eigene Datenpunkte zur Verfügung. Wir werden die folgenden Datenpunkte für unsere Visualisierung einsetzen:

• newUpdates (true/false)
• updatesList (Zeichenfolge mit den Adapternamen)
• updatesNumber (Anzahl Updates)

Im ersten Schritt habe ich die einzelnen Datenpunkte nun für Lovelace aktiviert. Dazu einfach die Konfiguration der einzelnen Datenpunkte öffnen und wie folgt konfigurieren:

Im nächsten Schritt wechseln wir nun in die Lovelace Visualisierung und starten mit der Konfiguration. Über die Plus-Schaltfläche können wir nun die Karte „Bedingte Elemente“ (gelb markiert) hinzufügen.

Jetzt beginnen wir mit der Konfiguration der Karte. Die Karte kann nur über den Code-Editor konfiguriert werden, da derzeit noch kein visueller Editor für die Karte zur Verfügung steht. Im folgenden Foto siehst Du die Konfiguration:

Die Karte besitzt im wesentlichen zwei Definitionsbereiche.

Im Bereich conditions werden die Bedingungen für die Anzeige der Karte festgelegt. Hierzu gibt es eine Entität, sowie ein state. Über den state wird der Wert festgelegt, bei dem die Karte angezeigt werden soll. Zudem verfügt die Karte noch über die Eigenschaft state_not, mit der die Bedingung formuliert werden kann. Wenn mehrere Entitäten für die Bedingung verwendet werden, wird automatisch ein logischer UND-Operator zur Verknüpfung verwendet.

In unserem Beispiel wird hier die Entität input_boolean.ioBrokerUpdates mit dem Wert true (wahr) verwendet.

Der zweite Bereich card definiert die anzuzeigenden Entitäten innerhalb der Karte. In diesem Bereich definieren wir einfach die einzelnen Entitäten, die auf der Visualisierung dargestellt werden sollen. Ich habe hier die einzelnen Entitäten für die Update-Anzeige eingefügt. Zudem habe ich noch eigene Icons sowie den Namen eingefügt.

Anbei die komplette Definition der Karte.

type: conditional
conditions:
  - entity: input_boolean.ioBrokerUpdates
    state: true
card:
  type: entities
  entities:
    - entity: sensor.ioBrokerUpdateCount
      name: Anzahl Updates
      icon: 'mdi:information'
    - entity: input_text.ioBrokerUpdatelist
      name: Adapter
      icon: 'mdi:format-list-bulleted'
  title: ioBroker
  show_header_toggle: false

In der Visualisierung wird die Karte nun wie folgt dargestellt.

Über Kommentare unterhalb des Artikels oder per E-Mail freue ich mich wie immer 🙂