Version vom 14. Juli 2013, 20:16 Uhr

Icons - alles rund um die Icons in Fhem

Fhem mit Icons verschönern

Im FHEMWEB auf Detail-Ansicht des Gerätes gehen, danach in der attr Zeile per dropdown
a) icon auswählen, um das Icon zu wählen, dass standardmäßig links vom Gerät gezeigt wird; alternativ ganz unten auf Select icon klicken, dann bekommt ihr alle Bilder angezeigt
b) devStateIcon auswählen, um unschiedliche Schaltzustände mit unterschiedlichen Icons zu versehen; alternativ ganz unten auf Extend devStateIcon klicken, dann bekommt ihr alle Bilder angezeigt und könnt sie dem jeweiligen Schaltzustand zuordnen.

Dabei gilt folgendes:
- Icon-Dateiname OHNE Dateiendung eingeben
- wenn es sich bei dem Icon um eine svg-Datei handelt, kann mit @farbe, die Farbe beeinflusst werden, z.B.

attr Geraet devStateIcon an:general_an@green aus:general_aus@red

wobei hier die beiden Dateien general_an.svg und general_aus.svg heißen. - statt des Standardfarbnamens, kann übrigens auch der 6-stellige Hex-Code übergeben werden (ohne # am Anfang). Den Code könnt ihr z.B. hier http://www.colorpicker.com/ generieren

Eigene Icons erstellen

Falls ihr eigene Icons basteln wollt - sehr gerne. Umso besser, wenn ihr diese dann mit uns teilt. Der passende Thread im Forum: http://forum.fhem.de/index.php?t=msg&goto=85849

SVG-Icons

Hier einige Tipps zum Erstellen von SVG-Icons. SVGs bieten einige Vorteile: - SVGs sind vektorbasiert und somit frei skalierbar - SVGs sind, wenn man sie genauer betrachtet, gut lesbarer und veränderbarer Quellcode und können deswegen leicht über css manipuliert werden

Wie geht es nun:
- Inkscape (http://inkscape.org/download/?lang=de) besorgen (Open Source)
- Loszeichnen

Jetzt wird es wichtig - fhem ist etwas sensibel, was svgs anbelangt und will diese zudem farblich umgestalten. Daher folgendes unbedingt beachten:
- fhem ersetzt bei allen fill:#000000 und fill="#000000" die sechs Nullen mit einem Farbcode, wenn dieser mit übergeben wurde (sh. Fhem mit Icons verschönern weiter oben)
- das solltet ihr beim zeichnen beachten - daher arbeite ich immer so, dass ich beispielsweise Rechtecke/Kreise zeichne und diese dann mit "Kontur in Pfad umwandeln" umwandle -> dann ist das Rechteck transparent, die Linie schwarz (und wird von fhem erstetzt) und alles klappt
- alle Texte müssen in Pfade umgewandelt werden
- das gesamte Bild muss als "Normales SVG" gespeichert werden (Standardeinstellung bei Inkscape ist "Inkscape SVG")
- letzter wichtiger Tipp: Eine Zeile darf im SVG nicht fehlen, sonst zeigt fhem es nicht an. Wenn ihr Euer SVG in einem Texteditor öffnet (ich empfehle notepad++), schaut in in der <svg>-Definition, ob die Zeile mit viewBox dabei ist. Wenn nicht, dann nach unterem Format ergänzen.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
   version="1.0"
   width="585"
   height="585"
   viewBox="0 0 585 585"
   id="svg2421"
   sodipodi:docname="usb-stick.svg">

@@ Zeile 3: / Zeile 3: @@
 Im FHEMWEB auf Detail-Ansicht des Gerätes gehen, danach in der attr Zeile per dropdown <br>
 a) icon auswählen, um das Icon zu wählen, dass standardmäßig links vom Gerät gezeigt wird; alternativ ganz unten auf Select icon klicken, dann bekommt ihr alle Bilder angezeigt<br>
-b) devStateIcon auswählen, um unschiedliche Schaltzustände mit unterschiedlichen Icons zu versehen; alternativ ganz unten auf Extend devStateIcon klicken, dann bekommt ihr alle Bilder angezeigt
+b) devStateIcon auswählen, um unschiedliche Schaltzustände mit unterschiedlichen Icons zu versehen; alternativ ganz unten auf Extend devStateIcon klicken, dann bekommt ihr alle Bilder angezeigt und könnt sie dem jeweiligen Schaltzustand zuordnen.
 <br><br>
 Dabei gilt folgendes:<br>
@@ Zeile 11: / Zeile 11: @@
 wobei hier die beiden Dateien general_an.svg und general_aus.svg heißen.
 - statt des Standardfarbnamens, kann übrigens auch der 6-stellige Hex-Code übergeben werden (ohne # am Anfang). Den Code könnt ihr z.B. hier http://www.colorpicker.com/ generieren
 = Eigene Icons erstellen =