ioBroker Jarvis – Teil 17 – Darstellung und Formatierung von Geräten

In diesem Artikel zeige ich Dir, wie Du die Formatierung und Darstellung von Geräten für die jarvis Visualisierung steuern kannst.

In den letzten Artikeln haben wir bereit Geräte zu unserer Visualisierung hinzugefügt, das Layout definiert und zusätzlich einige Widgets kennen gelernt. In diesem Artikel zeige ich Dir anhand dem StateList Widget, wie Du die Formatierung sowie die Darstellung von Geräten in der jarvis Visualisierung konfigurieren kannst.

Im ersten Schritt öffnen wir nun die jarvis Visualisierung. Klicke hier in der Liste der Instanzen auf das Adapter-Website Symbol vom jarvis-Adapter.

Nach dem die Visualisierung gestartet wurde, können wir im nächsten Schritt mit der Konfiguration beginnen. Klicke dazu auf das Zahnrad-Symbol oben rechts.

In der Geräte-Konfiguration fügen wir zunächst ein neues Gerät ein, mit dem ich den Status meines NAS visualisieren möchte. Klicke dazu auf die Schalfläche Gerät hinzufügen. Alternativ kannst Du natürlich auch ein bereits bestehendes Gerät verwenden, bei dem Du die Darstellung und Formatierung verändern möchtest.

In meinem Fall möchte ich einen Datenpunkt des NAS einsetzen, mit dem ich den Verfügbarkeitsstatus darstellen kann (Online/Offline). Als Gerätname verwende ich den Begriff NAS und als Gewerk Server.

Als States des Gerätes lasse ich hier nur den State online stehen und hinterlege hier den entsprechenden Datenpunkt.

Zudem hinterlege ich hier für die Darstellung und Formatierung der Werte die folgenden JSON-Zeichenfolgen.

Datenpunkt Stil im JSON-Format:

{
  "true": {"color":"#00ff00","fontWeight":"bold"},
  "false": {"color":"#ff0000","fontWeight":"bold"}
}

Mit dieser Definition wird die Farbe der Anzeige entsprechend dem Wert true/false gesteuert. Zudem wird der Wert fett dargestellt.

Anzeigevariante im JSON-Format:

{
  "true":"Erreichbar",
  "false":"Offline"
}

Mit dieser Definition wird der Wert true als Erreichbar und false als Offline dargestellt.

Im nächsten Schritt wechseln wir dann in den Bereich Layout um mit der Konfiguration der Visualisierung zu beginnen.

Im ersten Schritt füge ich nun eine neue Tab-Seite in die Visualisierung ein, auf der ich den Status von verschiedenen Geräten visualisieren möchte.

Im nächsten Schritt fügen wir dann über die Schaltfläche Widget hinzufügen ein neues Widget hinzu zu unserer Visualisierung hinzu.

Als Modul-Typ wählen wir StateList. Im nächsten Schritt können wir dann das vorher erstellte Gerät zu der Liste der States hinzufügen.

In der Visualisierung siehst Du jetzt, wie das erstellte Widget dargestellt wird. Neben den farbigen Texten können wir auch den Wert für die Darstellung verändern. Mit diesen Konfigurationsmöglichkeiten kannst Du den Status von jedem Gerät komfortabel in Deiner Visualisierung darstellen.

Im nächsten Beispiel zeige ich Dir, wie Du die Schriftfarbe eines Wertes auf der Visualisierung abhängig vom Wert farblich gestalten kannst. Als Datenpunkt verwende ich dazu die aktuelle Angabe der Stromleistung in Watt.

Den folgenden JSON-String habe ich in das unten im Screenshot gelb markierte Feld für den Datenpunkt Stil eingefügt.

{    
	">1000": { "color":"#ff0000" },    
	"<1000": { "color":"#ff0000" },
	"<200": { "color":"#FFFF00" }
}

Mit der Formatierung wird der Wert auf der Visualisierung rot dargestellt, wenn über 1000 Watt bezogen werden, gelb wenn es unter 1000 Watt sind und grün wenn es unter 200 Watt sind.

Ich hoffe Dir gefällt der Artikel. Über Kommentare, Anregungen oder Ideen freue ich mich wie immer 🙂

Matthias Korte

Hauptberuflich Software-Entwickler und seit einigen Jahren Smart-Home Fan. Angefangen hat alles mit einem RaspberryMatic und einer schaltbaren Steckdose. Mittlerweile habe ich einige Steckdosen, Sensoren, und Thermostate sowie ioBroker zur Visualisierung im Einsatz.

4 Gedanken zu „ioBroker Jarvis – Teil 17 – Darstellung und Formatierung von Geräten

  • 28. Dezember 2020 um 10:15
    Permalink

    Hallo

    Ich habe 2 Anliegen

    1. Ich möchte meine Werte in der Anzeige auf 2 bzw. 3 Nachkommastellen begrenzen.
    2. Die vorhandenen Stromwerte also Kwh multipliziert mit den Aktuellen Preisen, ohne extra einen neuen Datenpunkt anzulegen ging auch im HABpanel.

    ich würde mich über jede Hilfe freuen.

    LG

    Pierre

    Antwort
    • 30. Dezember 2020 um 22:23
      Permalink

      Hallo Pierre,

      das werde ich gerne in einen weiteren Artikel aufnehmen.

      Einen guten und vor allem gesunden Rutsch ins neue Jahr.
      LG Matthias

      Antwort
  • 21. März 2021 um 13:39
    Permalink

    Hallo,

    erst erst einmal Danke für die tollen Tutorials, die mir als Laie die Welt von ioBroker ein ganzes Stück geöffnet hat.

    Ist es denn auch möglich, Werte zu animieren (z.b blinken lassen). Wie gesagt bin Laie was das alles angeht

    Antwort
    • 22. März 2021 um 20:06
      Permalink

      Hallo Pascal,

      ja, ist möglich 🙂 Kommt in den nächsten Tagen als separater Artikel.

      LG Matthias

      Antwort

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.