switch widget ignoriert data-background-colors

[Wetterhexe]

Hallo allerseits,

seit kurzem werden bei meinen switch widgets die data-background-colors ignoriert. Stattdessen werden die default colors verwendet.
Hat jemand ähnliches beobachtet?

Auf ein einfaches Beispiel runtergebrochen ... statt grüner/roter Hintergrund wird #aa6900/#505050 angezeigt:

Code Auswählen Erweitern


      <div data-type="switch" data-device="dummy1" data-background-colors='["green","red"]'></div>


[setstate]

oh Mist. Das sind die "!important" in der CSS ab Zeile 3488 /* color theme classes for widgets */

Die müssen weg.

[choenig]

Hi,

ich habe etwas ähnliches beobachtet:

Ich habe einen switch, und wenn dieser keine data-colors enthält, wird die Hintergrundfarbe ignoriert.

So funktioniert es:

Code Auswählen Erweitern


<div data-type="switch" data-device="rg_Gast"
     data-get="state" data-set="state"
     data-states='["home","gotosleep","absent","none"]'
     data-set-states='["none","none","home","home"]'
     data-icons='["fa-user-plus","fa-user-plus","fa-user-plus","fa-user-plus"]'
     data-colors='["red", "#444444", "#444444", "#444444"]'
     data-background-colors='["transparent", "transparent", "transparent", "transparent"]'
     class="container big compressed" style="margin-top:10px;"></div>


Lösche ich jetzt die data-colors-Zeile, wird die Hintergrundfarbe sichtbar.

Könnte die selbe Ursache haben.

EDIT: Zu Spät

LG
Christian

[setstate]

!important muss bleiben, aber die Selektoren sind falsch. Ich bin noch dran ...

Code Auswählen Erweitern


/* Switch */
/* Foreground On */
[data-type="switch"]:not([data-colors]):not([data-on-color]) .active i#fg {
    color: #2A2A2A !important;
}
/* Foreground Off */
[data-type="switch"]:not([data-colors]):not([data-off-color]) :not(.active) i#fg {
    color: #2A2A2A !important;
}
/* Background On */
[data-type="switch"]:not([data-background-colors]):not([data-on-background-color]) .active i#bg {
    color: #aa6900 !important;
}
/* Background Off */
[data-type="switch"]:not([data-background-colors]):not([data-off-background-color]) :not(.active) i#bg {
    color: #505050 !important;
}


[Wetterhexe]

ok super, danke!
dachte schon ich wär zu blöd ein paar importants zu entfernen 

[Brause]

Hallo setstate

kannst Du mir noch einen Tip geben, wie ich diese Vorgaben durch meine eigene css wieder überschreiben kann.
da ich diese in der Tag/Nacht-Umschaltung ändere.

Code Auswählen Erweitern


.switch.on  { color: #008000 !important; }
.switch.off { color: #808080 !important; }

i#bg { color: transparent !important; }


Gruss Brause

[setstate]

Hallo setstate

kannst Du mir noch einen Tip geben, wie ich diese Vorgaben durch meine eigene css wieder überschreiben kann.
da ich diese in der Tag/Nacht-Umschaltung ändere.

Code Auswählen Erweitern


.switch.on  { color: #008000 !important; }
.switch.off { color: #808080 !important; }

i#bg { color: transparent !important; }


Gruss Brause

Ich würde das so angeben

Code Auswählen Erweitern


/* Switch */
/* Foreground On */
[data-type="switch"]:not([data-colors]):not([data-on-color]) .active i#fg {
    color: #008000 !important;
}
/* Foreground Off */
[data-type="switch"]:not([data-colors]):not([data-off-color]) :not(.active) i#fg {
    color: #808080 !important;
}
/* Background On */
[data-type="switch"]:not([data-background-colors]):not([data-on-background-color]) .active i#bg {
    color: transparent !important;
}
/* Background Off */
[data-type="switch"]:not([data-background-colors]):not([data-off-background-color]) :not(.active) i#bg {
    color: transparent !important;
}


So könnte man die Tag/Nacht Umschaltung per FHEM aufbauen

Code Auswählen Erweitern


<link rel="stylesheet" href="css/ftui-night.css" data-type="theme" data-device="ftui_is_night" data-get-on="on" data-get-off="!on" >


[Brause]

Ja die Tag/Nacht-Umschaltung habe ich ja am laufen, funktioniert ja auch.

nur die Farb-Zuordnung der Schaltzustände und des Hintergrundes, hat es nicht mehr getan.

werde ich heute Abend mal probieren.

Danke erstmal

[Brause]

Ja sehr schön.
Das funktioniert.

DANKE

[Wetterhexe]

super, die Hintergrundfarben funktionieren wieder

Leider habe ich jetzt ein anderes Phänomen. Ich habe die class "tall" verwendet um ein Symbol zu vergrößern. Ursprünglich wurde nur das Symbol selbst vergrößert, der Hintergrund hatte immer die gleiche Größe. Jetzt wird der Hintergrund ebenfalls vergrößert, das sieht etwas merkwürdig aus

widget Definition:

Code Auswählen Erweitern


      <div class="tall" data-type="switch" data-device="KEwasser" data-icon="wi wi-raindrops" data-states='["on","off"]' data-colors='["deepskyblue","#404040"]' data-background-color="transparent" data-set-on="off"></div>


[setstate]

Muss ich mir anschauen. Ziel ist es, immer Icon und Hintergrund gleich zu skalieren.

Passiert das auch bei big, bigger, large usw.?

[Wetterhexe]

Muss ich mir anschauen. Ziel ist es, immer Icon und Hintergrund gleich zu skalieren.

ok, dann wäre das aktuelle Verhalten ja korrekt.

Passiert das auch bei big, bigger, large usw.?

ja

EDIT: hab gerade gesehen daß ich bei diesem Icon die data-background-color="transparent" gesetzt hatte, das icon wird aber mit background color angezeigt. Deswegen die "Übergröße" im Vergleich zu früher.

[Masterfunk]

Ich habe das gleiche Problem mit den "data-on" Colors.

[Eisix]

Hallo,

background-color aus einem reading hat bisher so funktioniert.

Code Auswählen Erweitern


                <div data-type="switch"
                        data-device="Heizung.Status_WZ"
                        data-cmd="setreading"
                        data-get="Heizung"
                        data-set="Heizung"
                        data-states='["manuell","automatic","boost","off"]'
                        data-set-states='["automatic","boost","off","manuell"]'
                        data-icons='["oa-sani_heating_manual","oa-sani_heating_automatic","fs-sani_heating_boost","fs-general_aus"]'
                        data-colors='["#5EDAFF","#21a000","#FF5E5E","grey"]'
                        data-background-color="Heizung_WZ:stateColor"
                        class="inline"
                ></div>


Mit Version 2.7 sollte es so funktionieren wenn ich das richtig verstanden habe. Das "red" funktioniert aber der Wert aus dem reading kommt nicht an. Muss das anders geklammert werden, vermute mal Ja. Wie ?

Code Auswählen Erweitern


                <div data-type="switch"
                        data-device="Heizung.Status_WZ"
                        data-cmd="setreading"
                        data-get="Heizung"
                        data-set="Heizung"
                        data-states='["manuell","automatic","boost","off"]'
                        data-set-states='["automatic","boost","off","manuell"]'
                        data-icons='["oa-sani_heating_manual","oa-sani_heating_automatic","fs-sani_heating_boost","fs-general_aus"]'
                        data-colors='["#5EDAFF","#21a000","#FF5E5E","grey"]'
                        data-background-colors='["red","Heizung_WZ:stateColor","Heizung_WZ:stateColor","Heizung_WZ:stateColor"]'
                        class="inline"
                ></div>



Gruß
Eisix

[setstate]

Deine Variante mit data-background-colors ist eigentlich in Ordnung.
Oder auch die kurze Variante

Code Auswählen Erweitern

data-background-colors='["Heizung_WZ:stateColor"]'

Wie ich aber gerade im Code sehe, wird data*-colors nicht bei den Reading-Subscriptions beachtet. Wenn nicht zufällig ein anderes Element dieses Reading schon abonniert hat, wird es nicht von FHEM geholt.

Bis ich das geändert habe, funktioniert aber diese Alternativ:

Code Auswählen Erweitern

data-off-background-color="ftuitest:stateColor"