FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Det20 am 27 November 2017, 08:54:03

Titel: progress - Farbe vom Label
Beitrag von: Det20 am 27 November 2017, 08:54:03
Hallo,

eine kurze Frage, ich komme leider nicht so recht weiter. Kann ich die Farbe vom Label innerhalb vom progress Widget ändern? Aktuell ist die grau, passt aber nicht zu meinem Hintergrundbild.
Titel: Antw:progress - Farbe vom Label
Beitrag von: setstate am 27 November 2017, 16:38:30
Hast du schon data-on-color probiert?
Titel: Antw:progress - Farbe vom Label
Beitrag von: Det20 am 27 November 2017, 16:48:38
Ja, bei mir tut sich da nix.
Titel: Antw:progress - Farbe vom Label
Beitrag von: setstate am 27 November 2017, 18:23:32
Mmmm, nach 2 Minuten habe ich auch gemerkt, dass das nur den Ring ändert.

Man muss in seiner css/fhem-tablet-ui-user.css das per CSS vorgeben.

.progress.value {
 color: #8bd !important;
}
Titel: Antw:progress - Farbe vom Label
Beitrag von: Det20 am 28 November 2017, 10:39:50
Klappt super, das habe ich gesucht. Vielen Dank!
Titel: Antw:progress - Farbe vom Label
Beitrag von: dt2510 am 18 Oktober 2019, 10:48:02
Die Farbe von Ring und das Label hab' ich schon mit eigenen Farbangaben per css ändern können  - das Label wie oben beschrieben und den Kreis per data-off-background-color mit eigener Farbangabe im css.

Was mir leider nicht gelingt ist den Fortschrittsbalken selbst per css-Farbe einzufärben. In meinem css ist die Farbe folgendermaßen definiert (wie etliche andere auch)
.progress_valve {color:#FFA500;} /* Orange */
Folgende Ergebnisse liefert die Angabe von data-on-color

- data-on-color="orange" (#FFA500) -> orangener Balken (#FFA500)
- data-on-color="progress_valve" (#FFA500) -> schwarzer Balken (#000000)
- ohne Angabe von data-on-color -> Balken in der Standardfarbe (#AA6900)

Da ich abhängig von der Tageszeit unterschiedliche Farben (Tag/Nacht Modus) nutzen möchte, muss ich natürlich auch ALLE Farben, die ich in FTUI verwende in der css.Datei definieren und auch in meinem HTML angeben. Leider finde ich für den Balken bisher noch keine Lösung ...

Hinweis: ich habe die Datei fhem-tablet-ui.css NICHT in meiner index.html eingebunden, sondern verwende ausschließlich eigene Positions-, Größen- und Farbangaben. Daher greift auch die umdefinition von .orange in der fhem-tablet-ui.css hier nicht, sondern liefert das gleiche Ergebnis wie "Orange".
Titel: Antw:progress - Farbe vom Label
Beitrag von: dt2510 am 21 Oktober 2019, 10:06:09
ich hab' mal zwei Screenshots angehängt ... den 1. mit meiner eigenen Farbangabe "progress_valve" (gleicher Farbwert wie "Orange"), den 2. mit der Farbangabe "Orange". Ich hab' die Javascript Files und tabletui css-Files schon durchsucht aber kann absolut nix finden ...
Titel: Antw:progress - Farbe vom Label
Beitrag von: yersinia am 21 Oktober 2019, 11:44:34
Sicher, dass es so funktioniert? Im progress widget code (https://github.com/knowthelist/fhem-tablet-ui/blob/master/www/tablet/js/widget_progress.js) steht dazu zB folgendes:
[23]     elem.initData('on-color', ftui.getClassColor(elem) || ftui.getStyle('.' + me.widgetname + '.on', 'color') || '#aa6900');Ich verstehe das so (möglicherweise falsch): wenn data-on-color gesetzt ist, prüfe
1. ob die CSS Farbe existiert und übernimm' diese; wenn nicht dann prüfe
2. ob es einen Style Definition für .progress.on gibt und übernimm' diese; wenn nicht dann
3. belege die Farbe #aa6900 vor

Anstelle von
.progress_valve {color:#FFA500;} /* Orange */müsste doch dann
.progress.on {color:#FFA500;} /* Orange */die Farben definieren, oder?

Vorausgesetzt, ich interpretiere den Code korrekt.
Titel: Antw:progress - Farbe vom Label
Beitrag von: dt2510 am 21 Oktober 2019, 11:48:23
Das war es tatsächlich  :o

Ich weiß gar nicht, was ich alles ausprobiert habe ... danke !!!