Tipp: Webui Spielerei und optimierung mit color.map: Farbverlauf, Ränder usw.

[DerHeimer]

Ich spielte gerade mit der color.map rum.

Nur kurz für die, die nicht wissen, worum es geht:
In der Datei color.map kann man seine Farben anpassen. Dazu die Datei color.map aus dem Ordner /www/webui/in den Ordner /usr/local/etc/config/ kopieren und beliebig anpassen. Das ganze ist unkritisch - mache ich was falsch und der Browser zeigt nichts mehr an, dann einfach diese Datei löschen. So what...

Jedoch gehen hier nur einfache Farben...

Code: Alles auswählen

...
contentBackground       #ffffff
backgroundStart         #a21616
backgroundEnd           #ffffff
black                   #000000
clickable               #a21616
inactiveBackground      #bcc7cb
...

... ja, wirklich, geht hier nicht mehr? Doch!
Der Inhalt scheint einfach 1:1 in die style.css kopiert zu werden. Und das ist dann auch schon der Trick.
Schreibe ich also in die Color.map das hier rein (Bsp für Firefox - siehe weiter unten):

Code: Alles auswählen

background              "#009900; background-image: linear-gradient(to bottom right, red, green)"

Dann sieht das Ganze so aus (mit Absicht solch komische Farben genommen, damit der Effeckt besser zu sehen ist):

Wichtig sind die Anführungszeichen und das Semikolon nach dem Ersten Befehl 'background'. Auch aufpassen, dass keine falschen Klammern oder ähnliches dabei sind, das nimmt der Browser weg.
Somit kann man dann sowas machen:

2019-01-17 19_49_24-Window.png (24.21 KiB) 4683 mal betrachtet

2019-01-17 19_52_51-Window.png (17 KiB) 4683 mal betrachtet

2019-01-17 19_54_49-Window.png (18.29 KiB) 4683 mal betrachtet

2019-01-17 20_24_12-Window.png (13.34 KiB) 4683 mal betrachtet

Man kann hier nun machen, was man möchte. Wenn mann mehrere Browser verwendet, werden unter umständen andere Befehle benötigt. Wer sich etwas in CSS auskennt weiß, dass man hier dann mehrer Zeilen verwenden muss. Dass gibt man hier einfach auch ein - nur halt ohne Zeilenumbruch, sondern nur mit einem Semikolon am Ende einer jeden Zeile.

So habe ich mir einen Rolladen gebastelt:

2019-01-17 20_21_41-Window.png (12.08 KiB) 4683 mal betrachtet

Das geht also mit allen Eintragungen. Auch mit den Buttons z.B.:

2019-01-17 20_23_07-Window.png (2.58 KiB) 4683 mal betrachtet

Na das erst mal als Anregung. Ist für mich auch alles neu.
Wer Lust hat, kann ja seine color.map dann hier vorstellen.

Viel Spaß beim Basteln.
Der Heimer

[DerHeimer]

Hier ein Beispiel einer etwas mehr angepassten Seite.
Die Colormap (nur auf Firefox optimiert - Anpassung an Chrom oder so ist aber kein Problem) habe ich auch mal beigefügt.

EDIT: Ich sehe gerade, dass es ja noch einfacher sein kann alle Browser zu unterstützen. Ich passe mal noch was an und lade diese Datei dann auch hoch.

Das schöne ist ja, dass nach einem Firmwareupdate diese Datei erhalten bleibt (sie ist auch im Backup).

Wenn man einen groben Fehler macht, bleibt zwar der Bildschirm z. B. nur blau - aber das ist kein Problem, da man dann einfach die Datei löscht oder den Fehler behebt und schwupps geht wieder alles.

Ich editiere diese immer mit vim direkt auf der CCU. Einmal writen und F5 im Browser und sofort werden die Änderungen gezogen.

Der Heimer

[DerHeimer]

Hier mal eine "recht fertige" in schwarz/blau/glossy gehaltene Version.
Diese läuft nun unter Chrome, Firefox und wahrscheinlich allen anderen möglichen und aktuellen Browsern.

Bin echt überrascht, wieviel man einstellen kann.
Klar gibt es hier und da ein paar Tricks, da doch irgendwo was querschießt.
Aber man kann sogar die Button"Bilder (die Buttons sind teilweise Bilder ) überschreiben und durch reines CSS ersetzen.
.

color_map black-blue-glossy.zip

(1.11 KiB) 147-mal heruntergeladen

.

color_map black-blue-glossy v2.zip

(1.12 KiB) 153-mal heruntergeladen

2019-01-23 17_57_51-HomeMatic WebUI.png (22.84 KiB) 4228 mal betrachtet

Version color_map black-blue-glossy v2.zip hinzugefügt, um die Zahlen bei Slidern besser lesen zu können. Leider sind die Zahlen vom Style her m. E. im Widget direkt codiert. Somit habe ich keine "normale" Chance dieses Anzupassen. Also musste ich den Hintergrund aufhellen.
Wenn ihr irgendwo komische Farben (lila, gelb, etc..) findet, dann habe ich diese nicht in der UI gefunden. Könnt ja mal sagen, wo ihr die Farbe gefunden habt.

Heimer

[Matthias K.]

Schließ dich dochmal mit Stilgar kurz, er macht da gerade auch was: viewtopic.php?f=41&t=46033

Vielleicht bekommt ihr das gemeinsam sogar als AddOn verpackt!?

[DerHeimer]

Schließ dich dochmal mit Stilgar kurz, er macht da gerade auch was: viewtopic.php?f=41&t=46033

Hi,
von da komme ich. Meine Lösung habe ich entwickelt, da ich mit der anderen einfach zu viele Probleme hatte und mein Tablet auch dieses nicht richtig darstellte.
Beide Lösungen kann mann auch nicht direkt vergleichen. Es ist eher wie bei den beiden Raspi CCU Lösungen. Das Ergebniss ist quasi das Gleiche, dennoch ist der Ansatz ganz anders.
Bei meiner Lösung kannst du nahezu jeden aktuellen Browser sofort verwenden. Dafür bist Du nicht so frei wie bei Stilgars Lösung.
Bei beiden Lösungen kannst Du aber gleichschnell alles deaktivieren. Dafür ist bei meiner das Ganze wesentlich einfacher und schneller implementiert, wenn man weiß, wie man auf die CCU kommt. Spezielle Schreibschütze müssen nicht entfernt werden.

Gruß,
Heimer

[blackhole]

color_map black-blue-glossy.zip

Das sieht richtig gut aus. Schönes Ergebnis mit wirklich wenig Code -ohne "echte" Modifikation- statt dessen per von eQ-3 vorgesehenem Weg. Das ist der eigentliche Clou. Updatefest und Bestandteil jedes Backups ist das ja per Default. Ich bin begeistert.

Hier und da noch ein wenig Kosmetik und Optimierungen in der Lesbakeit und das wird ein Renner.

Was man anders/besser machen kann ist natürlich immer höchst subjektiv, daher halte ich mich mit Wünschen/Vorschlägen zurück.
Statt dessen ein ernstgemeintes ...

... weiter so, echt klasse!

[Helmut112]

Hallo DerHeimer köntest Du vieleicht für Dummies eine Schritt für Schritt Anleitung geben.

Gruß Helmut

[DerHeimer]

Hallo DerHeimer köntest Du vieleicht für Dummies eine Schritt für Schritt Anleitung geben.

Gruß Helmut

Das mache ich gerne bald. Ich werde es dann oben direkt reinschreiben. Benötige aber noch etwas Zeit.

[Matthias K.]

von da komme ich. Meine Lösung habe ich entwickelt, da ich mit der anderen einfach zu viele Probleme hatte und mein Tablet auch dieses nicht richtig darstellte.

OK, danke für die Info. Die Lösung gefällt mir auch besser, allein deshalb, weil sie auf jedem Gerät zieht, da ja direkt das CSS auf der CCU angepasst wird und nicht im Nachgang im Bowser.

Weiter so!

[tomi_cc16]

Könnt ihr euch nicht zusammen tun und ein gemeinsames Addon erstellen?

viewtopic.php?f=41&t=46033