Kreative Idee gesucht - Thermostat Widget vs. Level Widget

[Kharim]

Hallo Zusammen,

ich experimentiere gerade mit Möglichkeiten den Füllstand einer Abwassergrube, sowie einer Nutzwasser Zisterne optisch dazustellen.

Siehe Anhang:
- das linke Widget ist ein Thermostat und zeigt den Füllstand einer Abwassergrube
- das rechte Widget ist ein Volume und zeigt den Füllstand einer Zisterne

Nun beachte man bitte die Einfärbungen.
Eine Zisterne ist "im positiven Bereich" wenn sie gut gefüllt ist. Der Farbverlauf sollte hier also von rot (leer) nach grün (voll) verlaufen.
Eine Abwassergrube ist "im positiven Bereich" wenn sie leer ist. Der Farbverlauf sollte hier also von grün (leer) nach rot (voll) verlaufen.

Am Thermostat gelang es mir leider nicht den Hintergrund mittels Farbverlauf zu verfärben.
Dieses geht beim Volume. Allerdings lässt sich keine "Richtung" angeben - passt also nur für die Zisterne.

Erstaunlicher Weise tauscht der Farbverlauf beim Volume doch, wenn man Max und Min Grenzen vertauscht - dann ist aber keine Wertanzeige möglich.

Habt ihr eine Idee, wie man dies "optisch gleich" aber mit korrekten Farbverläufen umsetzen kann?

Code Auswählen Erweitern


<div data-type="thermostat" data-device="Abwasser"
data-get="state"
data-unit="%"
data-step="1"
data-min="0"
data-max="100"
data-mincolor="#00FF1A"
data-maxcolor="#FF0000"
class="big readonly">
</div>

<div data-type="volume" data-device="Zisterne"
data-get="state"
data-max="100"
data-min="0"
data-unit="%"
class="big readonly hue-tick">
</div>

<div data-type="volume" data-device="Zisterne"
data-get="state"
data-max="0"
data-min="100"
data-unit="%"
class="big readonly hue-tick">
</div>



Grüße,
Kharim

[Reinerlein]

Hi Kharim,

wäre dafür nicht genau das Range-Widget gedacht und geeignet? Das macht zwar keinen Farbverlauf, aber man kann mehrere Farbgrenzwerte angeben, sodass man vielleicht mit 4-5 Farben eine ausreichende farboptische Info hinbekommen kann...

https://wiki.fhem.de/wiki/FTUI_Widget_Range

Grüße
Reiner

[Kharim]

Ja naja....das Range ist ja nur "ein dummer Balken".
Mir gefiel die Idee und das Aussehen des Thermostats / Volumen so sehr, da es ein Gefühl des Bereiches vermittelt - intuitiv wie ein Geschwindigkeits/Drehzahlmesser.
Man sieht auf einem Blick, wo man zwischen Grün und Rot steht, bekommt den aktuellen Wert groß angezeigt und kann sofort abschätzen ob leer/50%/voll.
All das fehlt mir beim Range....

Man müsste beim Range mindestens den überhaupt möglichen Datenbereich farblich kennzeichnen können - also das was du beim Thermostat/Volumen durch den (farbigen) "Tick"-Bogen hast.....

[Reinerlein]

Hi Kharim.

wie gesagt, der Hintergrund ist nur einfarbig, aber man sieht ja wohl schon, wie weit der Bereich möglich ist.
Die Farbe erhält ja dann ein Teil des Balkens selbst, der kann ja beim Beispiel Zisterne rot bei kleinen Werten werden, und grün bei großen, und bei deiner Abwassergrube eben umgekehrt.
Aber in beiden Fällen ist der überhaupt mögliche Bereich ja trotzdem durch den hellgrauen Bereich markiert und damit immer sichtbar. Sonst wäre so ein Balken ja auch sinnlos, da er ja immer den Anteil eines ganzen visualisiert...

Welches Widget ich aber eigentlich meinte, war "Level" (https://wiki.fhem.de/wiki/FTUI_Widget_Level). Dabei wird der komplette Level-Balken eingefärbt. Dort kann man auch mehrere Farblimits angeben (bei Range gehen ja nur drei feste).

Aber einen Farb-Verlauf hast du dabei natürlich nie... wobei außer den "gelernten" Farben: "Rot" = "Achtung" und "Grün" = "Alles in Ordnung" auch kein Farb-Füllstands-Bezug existiert...
Was heißt denn z.B. Füllstand "Lila"? Das ist ja zunächst mal Assoziationslos Da hilft einem doch die Position des Balkenendes deutlich besser weiter...

Grüße
Reinerlein

[Kharim]

Hallo Reinerlein,

ja das Level Widget habe ich auch schon in der Hand (gehabt).

Aber auch damit habe ich so meine Probleme 
Siehe Screenshot oben.....links unten das ist ein Level mit folgendem Code:

Code Auswählen Erweitern

<header>Abwasser</header>
<div data-type="level" data-device='Abwasser'
data-max="100"
data-min="0"
data-limits='["40","70","100"]'
data-colors='["#ff0000","#f7fe2e","#82fa58"]'
class="bigger">
</div>

Wenn ich es richtig verstehe, sollte bis 40 der Balken rot gefärbt werden? Tut er aber nicht. Ich bekomme keinerlei Farbänderung hin.***
Das Nächste ist, verwende ich die Klasse "horizontal" mutiert der Balken zu einem Strich....keinerlei Größenklassen (big, large ect.) greifen dann mehr.
-> Auch keine Lösung

Ein paar schöne Ostertage,
Kharim

***Edit: habe eben durch Zufall bemerkt das die Werte der Farbgrenzen nicht als "Farbe bis zu diesem Wert" zu verstehen sind, sondern als "Farbe ab diesen Wert".
Ein    data-limits='["0","40","70"]' färbt also doch den Balken korrekt ein