Hintergrundfarbe nach Bedingung ändern?

Kharim · 27 Mai 2016, 07:57:14

Hallo Zusammen,

ist es möglich die Hintergrundfarbe nach einer Bedingung zu ändern?

(siehe Anhang: meine Raum/Thermostatübersicht)
Ich möchte nun jeweils den "Kasten" hinter dem Thermostat rot färben, wenn eine bestimmte Bedingung erfüllt ist.
[[Bedingung: Temperatur unter Taupunkt - die Werte sind in verschiedenen Devices verfügbar]]]

Idee: Kann ich die Farbe direkt angeben und diesen Wert aus einem Dummy beziehen?
Im Dummy könnte ich dann wiederum mittels notify und Bedingung die Farbe eintragen.

Danke,
Kharim

setstate · 27 Mai 2016, 08:26:27

Gute Idee, aber out of the Box nicht möglich.
Man müsste ein kleines neues Plugin anlegen, was sich auf ein Reading subscriben kann und bei Update sofort ein per ID hinterlegtes HTML Element verändert. Ist mit wenigen Codezeilen erledigt.

Kharim · 27 Mai 2016, 13:03:49

Schade.....also kann ich mir ja im Grunde nur irgendwie da einen Switch hin packen der eben An oder Aus anzeigt.....und dann wie beschrieben per Dummy und Notify arbeiten...

setstate · 27 Mai 2016, 20:06:19

das hat mir jetzt keine Ruhe gelassen

Das Label Widget bringt ja schon alles nötige mit, warum nicht das nutzen

Code Auswählen


<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="3" data-sizey="3">
               <div data-type="label" data-device="dummy1" data-limits-get="state"
                    data-classes='["bg-red","bg-green"]' data-limits='["0","1"]'
                    class="fullsize fixedlabel absolute">

                    <div data-type="thermostat" data-device="WohnzimmerHeizung_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="AgroWeather:fc0_tempMax" class="top-space-2x left-space"></div>
                    <div data-type="thermostat" data-device="WohnzimmerHeizung2_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="top-narrow left-space"></div>

                </div>
            </li>
        </ul>
    </div>
</body>

Das kann ich jetzt mit dem Dummy auf rot und grün umschalten

Kharim · 27 Mai 2016, 20:23:39

wow...ich versteh es jetzt zwar noch nicht, werd es aber testen :-D

Ich weiß, ich bin schlimm, aber kann man statt grün auch die standardfarbe schwarz belassen?

setstate · 27 Mai 2016, 20:40:02

oh, schwarz ist noch nicht definiert, das müsstest du in das fhem-tablet-ui.css File nachtragen

Code Auswählen

.bg-black { background-color:#2A2A2A;}

Die Funktion ist ganz einfach: Das Label Widget füllt das ganze Gridster Element aus, die anderen Widgets befinden sich innerhalb des Labels.

Code Auswählen


data-device="dummy1" data-limits-get="state"
data-classes='["bg-red","bg-green"]' data-limits='["0","1"]'

Wenn das Reading "state" im Device "dummy1" den Wert "0" hat, füge die CSS Klasse "bg-red" hinzu. Wenn Wert "1", füge die CSS Klasse "bg-green" hinzu. Man kann fertige Klassen aus der fhem-tablet-ui.css benutzen oder eigene in die css/fhem-tablet-ui-user.css eintragen.

Die benutzen festen CSS Klassen für das Label class="fullsize fixedlabel absolute" machen folgendes:
fullsize 100% in Breite und Höhe
fixedlabel kein Update des Inhaltes, nur die Classen austauschen
absolute feste Position

Kharim · 29 Mai 2016, 17:00:17

krasse Sache....sowas gehört ins Wiki *gg*

Dank dir