Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[Kuddel]

Hallo zusammen,

ich bin mit der Darstellung der Werte des Pollenflugadapters in meiner VIS nicht so ganz zufrieden:

Ich bin jetzt am überlegen, wie ich die Werte (0 bis 5) am besten als eine Art Farbverlauf darstellen kann.

0 = grün
5 = rot

Aktuell fehlt mir ein guter Ansatz.

Mein jetztiger Ansatz wäre.

Pro Werte zwei Kästen:
Ein nicht gefüllter Kasten
-> Wert = 3: Kasten 4 und 5 bleiben leer

Ein gefüllt Kasten mit der entsprechenden Farbe
-> Werte = 3: Kasten 0 bis 3 sind gefüllt mit grün, gelb, orange

Ich denk das kann man auf jeden Fall iwie optimieren.

Bin gespannt auf eure Vorschläge

[OliverIO]

@kuddel
https://stackoverflow.com/questions/30143082/how-to-get-color-value-from-gradient-by-percentage-with-javascript

[Kuddel]

@oliverio habe es Jetzt mit einzelnen Kästen pro Wert und mit Bindings gemacht.

War für mich doch etwas einfacher umzusetzen ^^

[OliverIO]

@kuddel
sieht ja gut aus.
der link den ich geschickt habe, wäre eine Funktion drin gewesen, mit der man
einen Farbcode auf dem gradienten zwischen grün und rot ausrechnen hätte können. aber du hast ja nur 5 stufen und keinen fließenden übergang.

Alternativ wäre noch gegangen, ein div mit einem farbverlauf und davor ein Zeiger, der die richtige Stelle markiert. Aber ich denke so ist es doch sehr anschaulich.

wenn ich nach solch Darstellungsbeispiele suche, dann lass ich mich durch das Internet inspirieren. kaum ein Problem wurde nicht schon mehrfach im netzt gelöst. Allergieseiten gibt es ja zu Hauf.