ioBroker VIS Bar Widget – farbige Visualisierung

Diagramm
Lesedauer: 2 Minuten

In VIS gibt es standardmäßig ein Bar Widget, mit dem sich ein Füllbalken in einer Farbe darstellen lässt. Eine Farbe ist vielleicht nützlich, um den Fortschritt anzeigen zu lassen. Möchte man aber z.B. eine Auslastung anzeigen, die den Status “normal”, “erhöht” und “kritisch” visuell darstellen soll, stößt man mit einer Farbe schnell an seine Grenzen. Es sei denn, man legt den Balken 3 Mal mit verschiedenen Farben an und blendet ihn je nach Wert aus. Das geht auch einfacher!

Einfache Bar

Dazu legt man sich das Bar Widget auf die VIS und passt die entsprechenden Werte an.
Ich benutze hier den Datenpunkt von ioBroker, der den freien RAM in % anzeigt. Als Farbe habe ich rot gewählt und die Ausrichtung ist horizontal.

Einfache Bar mit Datenpunkt
Einfache Bar mit Datenpunkt

Bar mit dynamischer Farbe

Wie oben schon erwähnt, könnte man das Bar Widget nun 3 Mal an der gleichen Stelle positionieren und die Farben grün, gelb und rot für die Zustände normal, erhöht und kritisch nutzen und sie jeweils ausblenden. Das wäre natürlich machbar aber unsinnig, da VIS dies per JavaScript erledigen kann. Damit man nun auf einen Blick sehen kann, wie hoch die Auslastung ist und ob sich der Wert im Bereich normal, erhöht und kritisch befindet, kann man für sich selbst überlegen, welche Werte sinnvoll sind.

Ich würde hier empfehlen, das jeder Wert unter 50 als normal gilt, Werte bis 66 als erhöht und alles über 66 gilt als kritisch. Dies kann aber individuell angepasst werden. Um nun die Farbe dynamisch anpassen zu lassen, kopierst Du bitte folgendes in den Bereich Skripte in der View. Sollten Dir die Werte nicht zusagen, so kannst Du diese in den “Highlight”-Zeilen angegebenen Werte anpassen.

function colorBarHex(i)
 {
     var hex = "#3D993F";
 
     if ( i < 50 ) 
     {
         hex = "#3D993F"; // Grün
     }
     else
     {
         if ( i < 66 ) 
         {
             hex = "#FFCC00"; // Gelb
         }
         else
         {
             hex = "#D91616"; // Rot
         }
     }
     
     return hex; 
 }

Damit das Skript nun auch die richtige Farbe an das Bar Widget zurück gibt, muss dieses an den Farbwert gebunden werden. Als Farbwert setzen wir also folgenden Code:

{i:system.host.ioBroker.mem;colorBarHex(i)}

Die geschweiften Klammern sagen VIS, das es sich hier um eine Funktion handelt.
i ist hier eine temporäre Variable, der der Wert des Datenpunktes system.host.ioBroker.mem zugewiesen wird. colorBarHex() ist die JavaScript Funktion, die wir oben in den Bereich Skripte kopiert haben. Ihr wird der Parameter i übergeben.

Dynamische Bar mit Farbwechsel
Dynamische Bar mit Farbwechsel

Ansicht der Balken in VIS

So sehen die Balken dann in Aktion aus.

Dynamische Bar in Funktion
Dynamische Bar in Funktion
Wie hat Dir der Beitrag gefallen?
Bewertung: 5/5 - abgegebene Bewertungen: 1

10 Gedanken zu „ioBroker VIS Bar Widget – farbige Visualisierung

  1. Romann Antworten

    Hi,

    deine Anleitung hat mir vor einem Jahr super weiter geholfen! Erstmal danke dafür!

    Ich habe das ganze jetzt in vis-2 migirert. Hier scheint das aus irgendeinem Grund nicht zu funktionieren. Das Skript wurde zwar übernommen, aber der Farbwert wird hier nicht mehr ermittelt.

    Hast du eine Idee woran das liegen könnte?

    VG
    Romann

  2. Michael Antworten

    Hallo,
    lieben Dank für die tolle Anleitung, das habe ich sogar hinbekommen… 🙂

    Eine Frage habe ich: Wenn ich mehrere Bars in der View habe, wird das Script für alle übernommen.
    Gibt es da eine Möglichkeit wie jedem einzelnen Bar ein eigenes Script zuweisen kann?

    Vielleicht hast du ja eine Idee… 🙂

    VG… Michael…

    • Stephan Autor des BeitragsAntworten

      Hallo Michael,
      klar, du kannst das Skript mit Zahlen ergänzen

      colorBarHexZahl(i)

      und dann weiterverwenden.

      Gruß,
      Stephan

  3. Smirre Antworten

    Hallo Stephan,

    genau sowas habe ich gesucht. Zwar genau umgekehrt mit den Farben. Der Balken zeigt bei mir jetzt den Zustand des Akku-Packs bei meinem NUKI an.

    Vielen herzlichen Dank für die kostenlose Veröffentlichung!!

    LG

    Smirre

    • Stephan Autor des BeitragsAntworten

      Hallo Jens,
      hierzu legst Du einfach ein String Widget über die Bar. Die Bar selbst unterstützt keinen Text.

      Gruß,
      Stephan

  4. James Antworten

    DANKE – Danach hab ich schon eine Weile gesucht.
    Auch als Anfänger leicht umzusetzen, klappt auf Anhieb :o)

    • Stephan Autor des BeitragsAntworten

      Das freut mich sehr! 😉
      Vielen Dank für die Rückmeldung. Auch weiterhin viel Spaß mit den anderen Skripten auf meiner Seite!

Schreibe einen Kommentar

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