Farben von Hintergrundbildern ändern

[Stoxn]

Hier mein Vorgehen auf dem Mac mit installiertem Perl und ImageMagick:

Die SVGs kannst Du z.B. von Weiß (#fff) in Rot (#f00) färben - also Suchen und Ersetzen:

perl -pi -w -e 's/#fff/#f00/g;' *.svg

Da mir die Visu mit SVGs zu langsam lädt, habe ich mittlerweile alles auf PNGs umgestellt.
Mit imagemagick kannst Du per Kommandozeile (hier Mac) einen ganzen Rutsch Bilder konvertieren:

mogrify +antialias -density 2000 -verbose -background none -size 400x400 -format png *.svg

[timberland]

Oder du packst die Icons in einen Font. Ist zwar anfangs eine wenig aufwendig...aber es lohnt sich

EDOMI_·_Visualisierung.pngEDOMI_·_Font.png

[Robby]

Ne blöde Frage. Wie bekomme ich denn Icons in ein Font?

Kannst Du mir ne kurze Schritt für Schritt Anleitung geben?

[mars]

Die Icons in einen Font zusammenfassen ist ja ideal, dann sind weder Vorder- noch Hintergrundfarben ein Thema ...
... und ich habe schon mehrere Dutzend in div. Farben importiert


Ja, eine Anleitung dafür wäre toll, und evtl. gehts mit Einverstädniss der Admins auch direkt als Download des Fonts im Servicebereich.

[Robby]

Das Problem an den Fonts/Icons besteht ja meistens darin, das man sich die aus diversen Internetseiten zusammen sucht. Für den Privatgebrauch ja kein Problem aber sie dann hochzuladen.....

[mars]

na, vielleicht etwas falsch ausgedrückt: Mein Vorschlag betrifft die Icons hier aus dem Forum, die sind ja ohnehin als Download verfügbar.
Wenn diese nun (zusätzlich) in Form einer Fontdatei verfügbar währen, verletzt das doch keine Rechte - oder?

[tger977]

also die Idee mit der Font Integration klingt sehr gut. An einer Anleitung hätte ich auch Interesse.

Aber: Ich frage mich wirklich noch warum und wie das in der Cometvisu mit diesen KNX-UF Icons hier aus dem Forum mit der Einfärbung problemlos geht und bei Edomi offensichtlich nicht?!

[timberland]

Hi,

wer mag kann sich das mal ansehen und testen. Ich habe 2 KNXUF Icons in den Font gegeben.

&#xE001 = Licht
&#xE004 = Steckdose

Anleitung wäre doch etwas zu lang. Für den Mac gibt es Glyphs und Windows wird es auch etwas geben. Vielleicht findet sich ja jemand der diese Icons verwendet und ergänzt den Font.

Download ist hier:

http://d.pr/f/XZ0z




EDOMI_·_Administration.png


KNXUF-Icon_-_KNXUF-Icon.png

[saegefisch]

Insgesamt sind die Fonts eine schöne Lösung - auch weil man - sofern die Fonts zueinander passen - man mit dem Ersetzen des Fonts alle Icons in der Visu mit einem Schlag ändern kann. Damit hat man stets eine homogene Icon-Welt und kann ohne "Bauchschmerzen" auch mal rasch ein Icon ändern. Okay, die Erstellung des Fonts macht auch Arbeit. Toller Ansatz, danke!

Nachteil ist die unausweichliche Einfarbigkeit (jedes Zeichens) bei Fonts. Es gäbe dazu alternative Lösungen ("sprite"), aber ich habe gestern ein paar Stunden damit experimentiert und es wäre mein Favorit - aber in Chrome lief es (noch) nicht sauber. Vielleicht die Zeit noch nicht reif dafür, aber es wäre die beste Lösung aus meiner Sicht: Mehrfarbigkeit im Icon, Klarnamen ("hazy", "dusty", Cloudy_night", "sperre_gesetzt",,,) statt Zeichencodes, Einfärben und mehr (z.B. Linenstärken) per CSS. Ich werde das im Blick behalten und es später mal wieder testen. Wenn es gehen sollte, würde es etwas Unterstützung von Christian brauchen, aber das wäre sehr flexibel und die Erstellung wäre mit jedem Texteditor möglich - es gibt aber auch Tools, die ein ganzes Verzeichnis zu einem SVG (mit <defs>) zusammen fassen. Und so könnte man wirklich leichten Fußes auch viele Icons mit einem Upload austauschen.

Die Einfarbigkeit bei den Fonts könnte man vermutlich durch Überlagerung zweier Elemente mit unterschiedlich gefärbten Icons lösen, z.B. Ein Schloss in weiß und ein Zeichen, dass aus einem Querstrich besteht legt man in Rot drüber oder ist unsichtbar (z.B. je nach KO).

Anmerkung: Wenn man sich "sein" Font zusammen stellt ist das unerheblich, aber wenn man nicht alles nutzen will, wäre es vermutlich sparsamer (auch in der Laufzeit) Fonts nach Themen zu haben: Wetter, Haus,... die "unnötigen" Icons können sich auch ganz schön läppern (ich z.B. habe keinerlei Wetter bei mir in der Visu)

[timberland]

Da müsste man das Icon trennen und überlagern.
Aber im Endeffekt geht es ja eigentlich nicht um so viele Icons in der Visu.

EDOMI_·_Administration.png
EDOMI_·_Administration.png
KNXUF-Icon.png
KNXUF-Icon_-_KNXUF-Icon.png

[saegefisch]

perfekt, genau das habe ich gemeint. Sehr cool, timberland! Der übliche Fall dürften vermutlich anders farbig durchgestrichene Icons sein; ansonsten kann man sich sicher meist auch monofarbig arrangieren. Obwohl die zweifarbige Steckdose...

[tger977]

an der Fontintegration habe ich mich mal versucht. Geht, ist aber irgendwie extrem aufwändig und ich habe einige icons im Einsatz...

Ich habe nun nochmal etwas recherchiert bzgl. CSS / webkit Optionen. Es gibt wohl schon Möglichkeiten mit webkit-filter oder auch per CSS über mix-blend-mode. Allerdings schaffe ich es nicht diese Optionen nur für das png oder svg icon anzuwenden. Bisher habe ich probiert diese Optionen in den "eigene CSS-Eigenschaften" im Design des Universalelementes einzutragen und nur als Hintergrundbild ein svg/png Bild auszuwählen. Allerdings passiert dann gar nichts oder es wird alles einheitlich eingefärbt...

Wie kann ich die eigenen CSS Eigenschaften auf nur das svg/img anwenden entsprechend folgendem code:

.icon {
     background: url(img/icon.png); /* Your icon */    
     position: relative; /* Allows an absolute positioned psuedo element */
}  
.icon::after{    
    position: absolute; /* Positions psuedo element relative to .icon */    
    width: 100%; /* Same dimensions as .icon */    
    height: 100%;    
    content: ""; /* Allows psuedo element to show */    
    background: #EC008C; /* The color you want the icon to change to */    
    mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */ }

[timberland]

Wem es interessiert, hier kann man sich ganz einfach Fonts aus den SVG's erstellen

https://icomoon.io/app/#/select

Ich hab mal alle KNXUF SVG's in den Font genommen. Falls es wer teste möchte
hier zum laden

http://d.pr/f/3zN1

Die Codes dazu findet ihr in der demo.html

wie gewohnt so zum eingeben &#xeb87

[MrMirror]

Spitze, direkt mal installiert, funktioniert super!

[stonie2oo4]

Vielen Dank,
das is ja Sau cool