Farben von Hintergrundbildern ändern

[gaert]

Ich bin halt kein großer Freund von klassischen Icons - irgendwie versuche ich meine Visualisierungen (oder auch EDOMI selbst) möglichst so zu gestalten, dass auf grafische Elemente verzichtet werden kann. Ein einfaches Beispiel: Statt krampfhaft ein Symbol für die Aussentemperatur zu erfinden, schreibe ich lieber "Aussen: 20 C" (das Grad-Zeichen finde ich gerade auf meiner spanischen Tastatur nicht...). Oder mal in die Runde gefragt: Muss wirklich vor jedem Ein/Aus noch ne Glühbirne(!) platziert werden? Die Visuseite "Wohnzimmer" würde ich eher so aufteilen, dass intuitiv klar ist: Dat sind die Lampen - und dat andere da bezieht sich wohl auf den Fernseher...

Und ich bemühe mich die Elemente so zu platzieren, dass man quasi intuitiv damit rechnet, dass z.B. die Aussentemperatur gemeint ist. Beispiel Uhrzeit: Wenn diese irgendwie "oben" positioniert ist, weiß jeder sofort: Aha, Uhrzeit. Auch ohne Uhrsymbol davor... Wenn ich z.T. aktuelle(!) Windows-Anwendungen sehe, wo noch eine Diskette(!) als Icon zum Speichern zu bewundern ist... Was soll unsere Jugend noch damit anfangen?!

Wenn es unbedingt sein muss, greife ich auch gerne auf Unicode-Symbole zurück - äußerst praktisch.

[rdeckard]

Hat auch den Vorteil, dass man komplett andere Icons verwenden kann...nicht nur für Farben. (wie schon hier im Forum bei den 10% Schritten von Jalousien demonstriert)
Wenn man dann noch Bilder mit Mehrfachselektion importieren könnte.......duck und wech...

[gaert]

Also der gute alte Weg - m.E. vollkommen ausreichend.

[ggt]

@starwarsfan
In der smartVISU wurden bei Verwendung von *.png die Icons jeweils in blau, grün, orange, schwarz und weiß hinterlegt und dann dementsprechend zugewiesen.

[gaert]

Ja schon klar - gehen tut so ziemlich alles, natürlich auch serverseitig (ist ja auch nur ein PC). Nur sehe ich wirklich "keinen" Sinn darin - klar wäre es für solche Dinge einfacher, wenn EDOMI die Icons individualisieren würde. Aber mal im Ernst... Kann man nicht einfach die nötigen Änderungen in Photoshop & Co. per Makro fix mal durchlaufen lassen und halt ein paar Dutzend Icons generieren?!

Das Problem dabei ist übrigens nicht die Implementierung von irgendwelchen Bildmanipulationen, sondern eher die GUI: Wie teile ich dem "Bildmanipulator" mit, was ich erreichen will? Wenn ich jetzt implementiere, dass einfache s/w-Icons wie Deine in rot/gelb/... geändert werden können dauert es 2 Stunden, bis jemand will, dass seine Farbverlaufs-Icons auch grün werden sollen. Aber nur, wenn im Hintergrund kein Kreis ist. Außer das Icon ist rechteckig - dann aber nur bei rot. Oder gelb? Nee, beides! Jedoch sollte....... Merkst Du was?

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

[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)

[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]

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]

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

[rdeckard]

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

[gaert]

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

[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]

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

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