Icons - alles rund um die Icons in Fhem

Fhem mit Icons verschönern

Geräten Icons zuweisen

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

Mehr Icons zur Auswahl

Grundsätzlich habt ihr schöne Standardicons bei fhem mit dabei und aktiviert. Navigiert doch einfach mal im fhem Verzeichnis in den www Ordner und dort in images. Der Ordner default ist standardmäßig aktiviert, dh. icons aus diesem Ordner werden in fhem angezeigt. Wenn ihr zusätzlich die Icons auch aus den anderen Ordnern (z.B. openautomation oder fhemSVG) verwenden wollt, dann ergänzt einfach die entsprechende Zeile "WEB iconPath" in der fhem.cfg:

attr WEB iconPath fhemSVG:openautomation:default

Weitere Tipps

Weitere Tipps zu Icons hier in der Wiki:
http://www.fhemwiki.de/wiki/Slider_f%C3%BCr_HM-Rolladensteuerung_anzeigen

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">