progress - Farbe vom Label

Begonnen von Det20, 27 November 2017, 08:54:03

Vorheriges Thema - Nächstes Thema

Det20

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.

setstate

Hast du schon data-on-color probiert?

Det20


setstate

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;
}

Det20

Klappt super, das habe ich gesucht. Vielen Dank!

dt2510

#5
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".

dt2510

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

yersinia

Sicher, dass es so funktioniert? Im progress widget code 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.
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

dt2510

Das war es tatsächlich  :o

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