Diagramm

ioBroker VIS Bar Widget – farbige Visualisierung

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 gschweiften 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

Schreibe einen Kommentar

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