Eigene Icons für FHEM erstellen

Wie ich bereits in einem Artikel von mir erklärt habe, stellt FHEM bereits eine Vielzahl von Icons zur Verfügung. Für die meisten Geräte findet man somit das passende Icon. Dennoch kann es ab und zu Vorkommen, dass man nicht das passende Icon findet. Erstrecht für eigene Projekte, wie zum Beispiel eine RGB-Lichtkugel, wird man oft nicht fündig. In diesem Beitrag möchte ich euch deswegen zeigen, wir ihr eigene Icons erstellt und diese in FHEM einbindet.

Was sind SVGs

SVG steht für "Skalierbare Vektorgrafiken" und beschreibt zweidimensionale Vektorgrafiken. Ein "normales" Bild besteht aus soggenanten Bildinformationen, die den Farbwert für jeden einzelnen Pixel beinhalten. Vektorgrafiken dagegen bestehen aus den Grundformen wie Linien, Rechtecke oder Kreise. Eine Vektorgrafik enthält dann Informationen wie zum Beispiel Start- und Endpunkt einer Linie oder den Mittelpunkt und Radius eines Kreises. 

Diese ermöglicht eine einfache Skalierung von Vektorgrafiken ohne das die Linie unscharf werden.

Links eine stark vergrößerte pixelbasierte-Linie und rechts eine stark vergrößerte Linie als Vektorgrafik. Ein weiterer Vorteil von Vektorgrafiken ist, dass man im Nachhinein dessen Farbe ändern kann. Dies ist für FHEM sehr nützlich, da man so zum Beispiel das Icon je nach Device-Status unterschiedlich einfärben kann.

Vorbereitung

Die SVG-Icons erstellt man am besten mit der Open-Source-Software "Inkscape". Diese lässt sich für Windows und Mac auf der Herstellerseite herunterladen.

Einarbeitung

Bevor man mit dem Erstellen eigener Icons beginnt, solltet man sich bisschen in SVG-Icons und der Software Inkscape einarbeiten. Dazu lädt man sich am besten ein SVG-Icon aus der FHEM-Installation herunter. Diese befindet sich im Ordner "www/images/fhemSVG" im Installationsordner eurer FHEM-Installation. 

Danach öffnet ihr das heruntergeladene Icon mit Inkscape. Im folgenden zum Beispiel das Icon "ring.svg". 

Die Zeichenprogramm Inkscape ist übersichtlich aufgebaut und das Einarbeiten geht relativ leicht. Wer schonmal mit anderen Zeichenprogrammen gearbeitet hat und sei es nur Paint, wird schnell mit Inkscape zurecht kommen. 

Im Grunde kommt man bereits mit ein paar Buttons des Programmes aus. Zeichnen von Vektoren erfolgt über die Zeichenwerkzeuge auf der linken Seite. 

Es lassen sich einfache Rechtecke, Kreise, Polygone, Spiralen oder Freihandzeichnungen erzeugen. Komplexere Formen lassen sich durch Ziehen von aneinander geknüpfte Pfade erzeugen (siehe Bild 7. Icon von oben). Dazu einfach das entsprechende Werkzeug auswählen und dann durch das klicken auf die Zeichenfläche einfach die gewünschten Knotenpunkte hinzufügen.

Möchte man in FHEM später ausgefüllte Flächen haben, lassen sich selbst erstellte Formen durch den Farbtopf-Icon (siehe Bild letztes Icon) mit Farbe befüllen. Dafür einfach das Icon auswählen und die gewünschte Form anklicken. Es wird nun ein zweites Objekt erzeugt, welches als Form die eurer selbsterstellten Form besitzt, jedoch ausgefüllt ist. Die zuvor von euch erzeugten Form kann dann gelöscht werden. 

Je nach Form kann es jedoch dazu kommen, dass die erstelle ausgefüllte Form nicht komplett der selbst erstellten Form entspricht. Siehe Bilder. Entweder man löscht einfach die selbsterstellte Form und sieht somit den meist sehr minimalen Fehler nicht mehr, oder man passt, wie oben beschrieben, die Knoten der Form an.

Hat man eine Form gezeichnet lässt sie sich mit dem Pfeil-Icon anfassen und verschieben. Möchte man die einzelnen Knoten der Figur bearbeiten bzw. verschieben kann man dies über das entsprechende Werkzeug bewerkstelligen. 

Eigenes Icon erstellen

Nachdem man sich etwas mit der Software vertraut gemacht hat, kann man sich an das Erstellen eines eigenen Icons machen. Die optimale Größe eines Icon ist 558x558 Pixeln. Nachdem man in Inkscape ein neues Dokument angelegt hat, sollte man also über Datei / Dokumenteinstellung die Größe entsprechend anpassen.

Die hier eingestellte Größe ist jedoch nur die "Arbeitsgröße". Wie oben schon erwähnt, lassen sich SVG-Icons problemlos skalieren.

Nun kann man mit Hilfe von Kreisen, Rechtecken oder einfache Pfade sein gewünschtes Icon kreieren. Ich habe mir ein Icon für meine Lavalampe entworfen.

Möchte man nun, dass man bestimmte Flächen des Icons über FHEM mit Farbe füllen kann, muss man dies bereits bei der Erstellung des Icons konfigurieren. 

FHEM ersetzt später jede Fläche, welche mit #000000 gefüllt ist, mit der Farbe, die durch die entsprechenden Attribute übergeben wurde. Mehr zum Thema Icons mit Farbe füllen auf meinem Blog-Beitrag.

Damit dies auch der Fall ist, müssen die Flächen in Pfade umgewandelt werden. Dies geschieht über Pfad und dann "Kontur in Pfad umwandeln". Dadurch werden die Flächen transparent. Info: Die Flächen bleiben dennoch schwarz innerhalb von Inkscape.

Zusätzlich sollte überprüft werden, ob die Hintergrundfarbe wirklich Transparent ist. Dazu das gewünschte Objekt anklicken und dann über Objekt / Füllung und Kontur das entsprechende Fenster öffnen.

Bei meiner Lavalampe möchte ich später die mittlere Fläche einfärben können. Die beiden anderen sollen jeweils weiß bleiben. Dazu überprüfe ich zunächst die mittlere Fläche ob die Füllung auf #000000 gesetzt ist.

Hier ist nun zu erkennen, dass die Farbe auf #000000 gesetzt ist. Die beiden anderen Flächen werden ebenfalls überprüft.

Hier ist nun korrekter Weise die Füllung auf undefiniert gesetzt und FHEM interpretiert dies als weiße Fläche.

Nachdem ihr so euer Icon überprüft habt, könnt ihr dies nun abspeichern. Wichtig ist hier, dass ich das SVG-Icon als "normales SVG" speichert. Des Weiteren solltet ihr einen eindeutigen Namen verwenden. Der Name der SVG-Datei ist später auch der Name des Icons und wird in FHEM dann auch über diesen eingebunden. 

Icons in FHEM einbinden

Nachdem man nun sein SVG-Icon erstellt hat, kann man sich an das Einbinden in FHEM machen. Dazu muss man das Icon auf das System hochladen auf dem die FHEM-Installation läuft, zum Beispiel ein Raspberry Pi. Am einfachsten geht dies über ein FTP-Programm. 

Die Icons befinden sich innerhalb der FHEM-Installation im Ordner "www/images". Hier befinden sich unterschiedliche Ordner die jeweils Icons beinhalten. Ich empfehle euch einen extra Ordner für eure eigenen Icons zu erstellen. 

In meinem Fall "ownIcons". Damit FHEM auch in diesem Ordner nach Icons sucht, muss das Attribut "iconPath" gesetzt werden. 

attr WEB iconPath fhemSVG:openautomation:default:ownIcons

Habt ihr bereits weitere zusätzliche Icon-Ordner sollten diese ebenfalls mit in das Attribut aufgenommen werden.

Eigenes Icon in FHEM benutzen

Nachdem das Icon hochgeladen wurden, kann man dazu übergehen das Icon zu Verwenden. Wie dies genau funktioniert könnt ihr auf meinem Blogbeitrag nachlesen.

Man sieht nun sehr gut, dass der Mittelteil des Icons wie gewünscht eingefärbt wird. Dazu habe ich folgende Attribute gesetzt.

attr WZ_Lavalampe icon Lavalampe

attr WZ_Lavalampe devStateIcon on:Lavalampe@FF0000 off:Lavalampe@000000

Ich hoffe ich konnte verständlich erklären, wie ihr eure eigenen Icons erstellt und in FHEM einbindet. Solltet ihr ein cooles Icon erstellt haben, würde ich mich freuen, wenn ihr diese mit mir und meiner Community teilt würdet. Einfach innerhalb eines Kommentares anheften oder im FHEM-Forum der FHEM-Community bereitstellen.  

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar
Fotos und Bilder
 
 
 
sonstiges Dateiformat
 
 
 
wpDiscuz