Icons

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

1. 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
2. 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:

• www.colorpicker.com
• www.html-color-names.com

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

Links

• How-To: FHEM-Devices mit Icons aufwerten
• How-To: Eigene Icons erstellen und in FHEM einbinden