FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Wetterhexe am 18 März 2018, 10:29:20

Titel: switch widget ignoriert data-background-colors
Beitrag von: Wetterhexe am 18 März 2018, 10:29:20
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:

      <div data-type="switch" data-device="dummy1" data-background-colors='["green","red"]'></div>
Titel: Antw:switch widget ignoriert data-background-colors
Beitrag von: setstate am 18 März 2018, 11:02:49
oh Mist. Das sind die "!important" in der CSS ab Zeile 3488 /* color theme classes for widgets */

Die müssen weg.
Titel: Antw:switch widget ignoriert data-background-colors
Beitrag von: choenig am 18 März 2018, 11:05:17
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:

<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
Titel: Antw:switch widget ignoriert data-background-colors
Beitrag von: setstate am 18 März 2018, 22:02:42
!important muss bleiben, aber die Selektoren sind falsch. Ich bin noch dran ...


/* 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;
}
Titel: Antw:switch widget ignoriert data-background-colors
Beitrag von: Wetterhexe am 18 März 2018, 23:14:28
ok super, danke!
dachte schon ich wär zu blöd ein paar importants zu entfernen  ;D
Titel: Antw:switch widget ignoriert data-background-colors
Beitrag von: Brause am 19 März 2018, 05:02:55
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.


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

i#bg { color: transparent !important; }


Gruss Brause
Titel: Antw:switch widget ignoriert data-background-colors
Beitrag von: setstate am 19 März 2018, 07:34:14
Zitat von: Brause am 19 März 2018, 05:02:55
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.


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

i#bg { color: transparent !important; }


Gruss Brause

Ich würde das so angeben


/* 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


<link rel="stylesheet" href="css/ftui-night.css" data-type="theme" data-device="ftui_is_night" data-get-on="on" data-get-off="!on" >
Titel: Antw:switch widget ignoriert data-background-colors
Beitrag von: Brause am 19 März 2018, 07:44:11
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
Titel: Antw:switch widget ignoriert data-background-colors
Beitrag von: Brause am 19 März 2018, 16:39:17
Ja sehr schön.
Das funktioniert.

DANKE
Titel: Antw:switch widget ignoriert data-background-colors
Beitrag von: Wetterhexe am 19 März 2018, 17:54:46
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:

      <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>
Titel: Antw:switch widget ignoriert data-background-colors
Beitrag von: setstate am 19 März 2018, 19:19:25
Muss ich mir anschauen. Ziel ist es, immer Icon und Hintergrund gleich zu skalieren.

Passiert das auch bei big, bigger, large usw.?
Titel: Antw:switch widget ignoriert data-background-colors
Beitrag von: Wetterhexe am 19 März 2018, 19:50:03
ZitatMuss ich mir anschauen. Ziel ist es, immer Icon und Hintergrund gleich zu skalieren.
ok, dann wäre das aktuelle Verhalten ja korrekt.

ZitatPassiert 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.
Titel: Antw:switch widget ignoriert data-background-colors
Beitrag von: Masterfunk am 20 März 2018, 09:53:11
Ich habe das gleiche Problem mit den "data-on" Colors.
Titel: Antw:switch widget ignoriert data-background-colors
Beitrag von: Eisix am 21 März 2018, 13:23:30
Hallo,

background-color aus einem reading hat bisher so funktioniert.

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

                <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
Titel: Antw:switch widget ignoriert data-background-colors
Beitrag von: setstate am 21 März 2018, 14:02:56
Deine Variante mit data-background-colors ist eigentlich in Ordnung.
Oder auch die kurze Variante

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:
data-off-background-color="ftuitest:stateColor"
Titel: Antw:switch widget ignoriert data-background-colors
Beitrag von: Eisix am 21 März 2018, 14:36:58
Beide Varianten haben bei mir keine Änderung bewirkt.

Kein Problem ich warte auf die neue Version. Läuft momentan nur auf meiner DEV Seite. Wenn ich testen soll sag bescheid.

Danke für den Support.

Gruß
Eisix