Aktuelle Version vom 31. Oktober 2017, 15:46 Uhr

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

Icon auswählen, um das Icon zu wählen, das standardmäßig links vom Gerät gezeigt wird; alternativ ganz unten auf Select Icon klicken, dann bekommt ihr alle Bilder angezeigt
devStateIcon auswählen, um unterschiedliche 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 bei Colorpicker generieren
Möchte man dass bei Klick auf das Icon auch eine Aktion ausgelöst wird, kann man dies als dritten Parameter mit angeben. Beispiel für einen Wechsel zwischen "around" und "away": around:status_available:away away:status_away_2:around.

Wenn ihr die Änderungen wie oben beschrieben durchführt, könnt ihr das Ergebnis gleich betrachten. Wenn alles passt, dann noch Save config drücken, dann wird alles fest abgespeichert.

Größe der Icons verändern

Auch das kein Problem. Öffnet einfach die für Eurer Template (wie sieht fhem bei Euch aus: rechts unten -> Select Style -> das was ihr dort gewählt habt ist Euer Template) zuständige css-Datei. Diese findet ihr im fhem-Verzeichnis unter www/pgm2. Dort fügt ihr einfach folgende Zeile ein und ändert ggf. die Größenangaben.

svg { height:32px; width:32px; }

Mehr Icons zur Auswahl

Grundsätzlich sind bei aktuellen fhem-Installationen die meisten Icons standardmäßig aktiviert. Navigiert doch einfach mal im fhem Verzeichnis in den www Ordner und dort in images. Die Ordner default, openautomation und fhemSVG sind standardmäßig aktiviert, d.h., Icons aus diesen Ordnern werden in fhem angezeigt. Wenn ihr zusätzlich die Icons auch aus den anderen Ordnern (z.B. icons_small) verwenden wollt, dann ergänzt einfach die entsprechende Zeile "WEB iconPath" in der fhem.cfg:

attr WEB iconPath fhemSVG:openautomation:default:icons_small

Das gleiche gilt, wenn ihr eine ältere fhem-Installation habt und noch nicht die Bilder z.B. aus fhemSVG angezeigt bekommt.

Weitere Iconsätze

Im Ordner /contrib der FHEM-Installation oder des SVN befinden sich weitere Iconsätze in Form von SVG-Dateien.

FontAwesome in IconFontAwesome.zip, s. http://fontawesome.io/icons/
IcoMoon in IcoMoon.zip, s. https://icomoon.io/#preview-free

Icons Farben zuweisen

Man kann Icons beliebige Farben zuweisen, indem man den Icon-Namen per "@" mit einem Farbnamen oder einer Farbcodierung versieht.

rc_dot@red
rc_dot@#a1d490

Hilfe zur Bestimmung der Farbcodierung kann man auf den folgenden Seiten finden:

Weitere Tipps

Weitere Tipps zu Icons finden sich auch auf der Seite Slider für 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.

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 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")
Wenn die Grafik nicht angezeigt wird sondern nur Text: In einem Editor den Inhalt mit einer funktionierenden SVG-Datei vergleichen und anpassen.
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">

SVG-Icons für das Modul remotecontrol: Schriftvorlage

Wer beispielsweise für das Modul remotecontrol noch andere Beschriftungen braucht, der kann sich diese ganz fix selbst machen. Im Ordner fhem\www\images\fhemSVG findet ihr die Datei rc_templatebutton.svg. Mit der macht ihr folgendes: Ganz einfach inkscape runterladen (http://inkscape.org/download/?lang=de), Datei öffnen, auf Text klicken, dann oben in der Leiste auf Text -> Schrift und Text -> Reiter Text, Text ändern. Ggf. Größe/Position anpassen, dann Pfad -> Objekt in Pfad umwandeln, dann Datei -> Speichern unter -> euer name und "Normales SVG" => FERTIG

@@ Zeile 1: / Zeile 1: @@
-Icons - alles rund um die Icons in Fhem
+Icons - alles rund um die Icons in FHEM
-= Fhem mit Icons verschönern =
+= 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
+Im [[FHEMWEB]] auf Detail-Ansicht des Gerätes gehen, danach in der attr Zeile per dropdown
 # Icon auswählen, um das Icon zu wählen, das standardmäßig links vom Gerät gezeigt wird; alternativ ganz unten auf '''Select Icon''' klicken, dann bekommt ihr alle Bilder angezeigt
-# '''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.
+# '''[[devStateIcon]] auswählen''', um unterschiedliche 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:
@@ Zeile 10: / Zeile 10: @@
 * wenn es sich bei dem Icon um eine svg-Datei handelt, kann mit @farbe die Farbe beeinflusst werden, z.B. <br /> <code>attr Geraet devStateIcon an:general_an@green aus:general_aus@red</code>, <br /> 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 bei [http://www.colorpicker.com Colorpicker] generieren
+* Möchte man dass bei Klick auf das Icon auch eine Aktion ausgelöst wird, kann man dies als dritten Parameter mit angeben. Beispiel für einen Wechsel zwischen "around" und "away": <code>around:status_available:away away:status_away_2:around</code>.
 Wenn ihr die Änderungen wie oben beschrieben durchführt, könnt ihr das Ergebnis gleich betrachten. Wenn alles passt, dann noch '''Save config''' drücken, dann wird alles fest abgespeichert.
 == Größe der Icons verändern ==
 Auch das kein Problem. Öffnet einfach die für Eurer Template (wie sieht fhem bei Euch aus: rechts unten -> Select Style -> das was ihr dort gewählt habt ist Euer Template) zuständige css-Datei. Diese findet ihr im fhem-Verzeichnis unter www/pgm2. Dort fügt ihr einfach folgende Zeile ein und ändert ggf. die Größenangaben.
-svg { height:32px; width:32px; }
+<pre>svg { height:32px; width:32px; }</pre>
 == Mehr Icons zur Auswahl ==
@@ Zeile 21: / Zeile 23: @@
 Das gleiche gilt, wenn ihr eine ältere fhem-Installation habt und noch nicht die Bilder z.B. aus fhemSVG angezeigt bekommt.
+=== Weitere Iconsätze ===
+Im Ordner /contrib der FHEM-Installation oder des SVN befinden sich weitere Iconsätze in Form von SVG-Dateien.
+* FontAwesome in IconFontAwesome.zip, s. [http://fontawesome.io/icons/ http://fontawesome.io/icons/]
+* IcoMoon in IcoMoon.zip, s. [https://icomoon.io/#preview-free https://icomoon.io/#preview-free]
+== Icons Farben zuweisen ==
+Man kann Icons beliebige Farben zuweisen, indem man den Icon-Namen per "@" mit einem Farbnamen oder einer Farbcodierung versieht.
+<pre>
+rc_dot@red
+rc_dot@#a1d490
+</pre>
+Hilfe zur Bestimmung der Farbcodierung kann man auf den folgenden Seiten finden:
+* [http://www.colorpicker.com www.colorpicker.com]
+* [http://www.html-color-names.com www.html-color-names.com]
 == Weitere Tipps ==
@@ Zeile 26: / Zeile 45: @@
 = Eigene Icons erstellen =
-Falls ihr eigene Icons basteln wollt - sehr gerne. Umso besser, wenn ihr diese dann mit uns teilt. Der passende [http://forum.fhem.de/index.php?t=msg&goto=85849 Thread im Forum].
+Falls ihr eigene Icons basteln wollt - sehr gerne. Umso besser, wenn ihr diese dann mit uns teilt. Der passende {{Link2Forum|Topic=12605|LinkText=Thread im Forum}}.
 == SVG-Icons ==
@@ Zeile 39: / Zeile 58: @@
 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
+* 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")
+* Wenn die Grafik nicht angezeigt wird sondern nur Text: In einem Editor den Inhalt mit einer funktionierenden SVG-Datei vergleichen und anpassen.
 * 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.
-<pre>
+<syntaxhighlight lang="XML">
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
@@ Zeile 55: / Zeile 75: @@
     id="svg2421"
     sodipodi:docname="usb-stick.svg">
-</pre>
+</syntaxhighlight>
+== SVG-Icons für das Modul remotecontrol: Schriftvorlage ==
+Wer beispielsweise für das Modul remotecontrol noch andere Beschriftungen braucht, der kann sich diese ganz fix selbst machen. Im Ordner fhem\www\images\fhemSVG findet ihr die Datei rc_templatebutton.svg. Mit der macht ihr folgendes:
+Ganz einfach inkscape runterladen (http://inkscape.org/download/?lang=de), Datei öffnen, auf Text klicken, dann oben in der Leiste auf Text -> Schrift und Text -> Reiter Text, Text ändern. Ggf. Größe/Position anpassen, dann Pfad -> Objekt in Pfad umwandeln, dann Datei -> Speichern unter -> euer name und "Normales SVG" => FERTIG
-[[Kategorie:Icons]]
+[[Kategorie:HOWTOS]]