Farben von Hintergrundbildern ändern

[starwarsfan]

Hallo miteinander,

hat es schon jemand hinbekommen, die Farben von Hintergrundbildern der Designelemente dynamisch zu ändern? Konkret verwende ich das KNX-UF-IconSet und möchte deren Farben KO-abhängig ändern. Die Farbangaben in der Konfiguration der Designelemente haben darauf augenscheinlich keinen Einfluss oder übersehe ich etwas? Die Icons selber geben das auf jeden Fall her, in der CV funktioniert das ja ohne Probleme.

[rdeckard]

Ich denke, die Farbe eines Bildes (Bitmap) wirst du nicht ohne weiteres ändern können. Für solche dynamische Änderungen an einem Bild wäre eher SVG gedacht, was aber zurzeit ja nicht unterstützt wird.

Was aber geht: Du hast ja eine HintergrundFARBE und ein Hintergrundbild. Die Hintergrundfarbe kannst du über KO ändern. Und das daraufliegende Hintergrundbild muss dann einfach eine Alphamaske besitzen (z.B. PNG-Format), bei der das Bild durchsichtig ist und somit die Element-Hintergrundfarbe durchscheint.

z.B. die Edomi-Logos, die ich vor ein paar Tagen hier eingestellt habe, sind so aufgebaut. Nimm doch mal so eines zum Testen. Dann kannst du die Hintergrundfarbe unabhängig vom eigentlichen Bild ändern. Das Bild bleibt natürlich gleich.

[starwarsfan]

Jo, das ist mir klar. Die Icons des KNX-UF-IconSet sind PNGs mit durchsichtigem Hintergrund. Der Punkt ist aber, dass ich eben genau die Farbe des Icons ändern will, was mit der CV funktioniert.

[rdeckard]

ok, sorry, hab dich falsch verstanden. Dachte, du meinst wirklich nur die Hintergrundfarbe. Du hast aber geschrieben: Farben von Hintergrundbildern. ;-)
Es gibt für PHP Libraries, um Grafiken zu bearbeiten. Da könnte man bei monochromen Bitmaps sicher einfach die Farbe ändern. Das müsste jedoch Christian implementieren. Wäre sicher toll (zusammen mit SVG-Support, da könnte man dann noch viel mehr machen...)

Solange du aber nicht x verschiedene Farben für jedes Symbol haben möchtest, kannst du zurzeit ja einfach auf vordefinierte Grafiken ausweichen. Gibt ja batchfähige Grafiktools, mit denen du z.B. alle PNGs in einem Folder auf eine bestimmte Farbe setzen kannst. Dann hast du nicht mal viel Arbeit damit. Dann die Grafiken nach Edomi importieren (ok, DAS ist leider noch Handarbeit) und je nach Status das entsprechende Bild laden.

Bei den typischen kleinen Grafiken hast du hier nicht wirklich ein Problem mit dem mehrfachen Speichern von Grafiken.

[gaert]

Selbstverständlich geht das... Das Element kann ein Bild UND eine Hintergrundfarbe gleichzeitig haben - sofern das Bild transparente Bereiche hat, scheint dann die Hintergrundfarbe durch.

Beispiel - einmal mit schwarzem Hintergrund, einmal mit grünem Hintergrund (dynamisches Design - gesteuert von "TEST 5"). Das Bild ist natürlich exakt das selbe: Bildschirmfoto 2016-02-03 um 17.43.50.png
Bildschirmfoto 2016-02-03 um 17.44.00.png

[starwarsfan]

Na ich denke mal, dass das eben ohne zusätzliche Bearbeitung der Bilder gehen sollte. Das hat m.M.n. auch nichts mit PHP zu tun, da das die CV ja auch gänzlich ohne PHP macht.

Anyway, mal abwarten was der Edomi-Guru dazu sagt...

[gaert]

Er hat sich bereits geäußert...

[rdeckard]

Grafiken können serverseitig (PHP) oder clientseitig (CSS oder JS) geändert werden. Kommt immer drauf an, was man erreichen möchte. (Clientseitig ist schneller und erzeugt keinen zusätzlichen Traffic, was aber bei einem Webserver zuhause wohl keine Rolle spielen sollte.)

[gaert]

Serverseitig (PHP) ändert EDOMI keine Bilder - ist ja nicht Photoshop. Aber wie gesagt kann man natürlich mit Transparenzen spielen.

[rdeckard]

gaert
Ja, aber du hast ihn auch falsch verstanden. Er möchte ja nicht den Hintergrund, sondern die Kugel einfärben.

[starwarsfan]

Hallo Christian,

das hat sich jetzt wohl überschnitten.

Du hast mich missverstanden. Dass der Hintergrund durchscheint ist mir klar und das verwende ich bereits. Meine Frage zielte aber explizit darauf, die vorhandene Farbe zu ändern! Hier ein Screenshot dazu. Die Icons sehen vom Farbsetup her alle so aus, wie die linke Markierung. PNGs mit transparentem Hintergrund und weissem "Bild". Die rechte Markierung zeigt die Icons mit angepasster Farbe je nach Status. Der Hintergrund ist dabei jeweils der schwarzgraue Farbverlauf.

2016-02-03_CV_colorChange.png

[gaert]

Das würde nur mit einem "Trick" gehen: Das Icon muss quasi invertiert sein, d.h. der weiße Anteil ist transparent, der graue Anteil ist grau... Und dann die gewünschte Farbe als Hintergrund festlegen - voila.

Per PHP nun die Icons selbst einzufärben geht m.E. etwas zu weit... Wie will man das implementieren? Welche Farbe soll ersetzt werden? Immer weiß? Was ist mit Antialiasing? Wenn jemand ein Schwarz-auf-Weiß-Icon hat - dann doch schwarz ersetzen?! Das wäre dann die EDOMI-Photoshop-Edition...

[starwarsfan]

Neenee, an einer Photoshop-Edition hab' ich nicht wirklich Interesse.

Ich werd' mal drüben im CV-Forum fragen, wie das mit dem Ändern der Farbe funktioniert...

[gaert]

Es gibt seit HTML5/CSS3 übrigens durchaus die Möglichkeit, Bilder im Browser in Grenzen zu verfremnden - also z.B. die Farben zu "shiften", Helligkeit/Kontrast zu verändern, etc. Aber das wird aktuell nicht unterstützt, da ich hier nicht wirklich einen Bedarf gesehen habe. Außerdem ist das äußerst laaaaangsam... (zumindest bei größeren Bildern)

[rdeckard]

yep..http://stackoverflow.com/questions/7...-image-via-css zeigt ein paar Beispiele.

übrigens...Photoshop-Edition klingt jetzt sehr abschätzend...dabei wird oft serverseitig mit Bildern gearbeitet. (Skalieren, croppen etc.)
Das kann je nach Situation schon Sinn machen. Und jetzt ein kleines Bitmap-Bild in eine andere Farbe umwandeln (mit entsprechenden Antialiasing) finde ich jetzt nicht lächerlich. Ich möchte da nur diese mächtigen Webserver Graphicslibraries etwas in Schutz nehmen.