Icons: Unterschied zwischen den Versionen

Aus FHEMWiki
K (Verschiebung der waschto-links nach Literatur#Webseiten)
 
(21 dazwischenliegende Versionen von 9 Benutzern werden nicht angezeigt)
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 ==
== Geräten Icons zuweisen ==
Im FHEMWEB auf Detail-Ansicht des Gerätes gehen, danach in der attr Zeile per dropdown <br>
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<br>
# 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
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.
# '''[[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.
<br><br>
 
Dabei gilt folgendes:<br>
Dabei gilt folgendes:
- Icon-Dateiname OHNE Dateiendung eingeben<br>
* 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.  
* 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.
<pre>attr Geraet devStateIcon an:general_an@green aus:general_aus@red</pre>
* 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
wobei hier die beiden Dateien general_an.svg und general_aus.svg heißen.
* 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>.
- 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<br>
 
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.
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.
<pre>svg { height:32px; width:32px; }</pre>


== Mehr Icons zur Auswahl ==
== 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:
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:
<pre>attr WEB iconPath fhemSVG:openautomation:default</pre>
<pre>attr WEB iconPath fhemSVG:openautomation:default:icons_small</pre>
 
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 ==
== Weitere Tipps ==
Weitere Tipps zu Icons hier in der Wiki:<br>
Weitere Tipps zu Icons finden sich auch auf der Seite [[Slider für HM-Rolladensteuerung anzeigen]].
http://www.fhemwiki.de/wiki/Slider_f%C3%BCr_HM-Rolladensteuerung_anzeigen


= Eigene Icons erstellen =
= 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
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 ==
== SVG-Icons ==
Hier einige Tipps zum Erstellen von SVG-Icons. SVGs bieten einige Vorteile:
Hier einige Tipps zum Erstellen von SVG-Icons. SVGs bieten einige Vorteile:
- SVGs sind vektorbasiert und somit frei skalierbar
* 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
* 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:
* [http://inkscape.org/download/?lang=de 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:


Wie geht es nun:<br>
* 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
- Inkscape (http://inkscape.org/download/?lang=de) besorgen (Open Source)<br>
* 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
- Loszeichnen<br><br>
* alle Texte müssen in Pfade umgewandelt werden
Jetzt wird es wichtig - fhem ist etwas sensibel, was svgs anbelangt und will diese zudem farblich umgestalten. Daher folgendes unbedingt beachten:<br>
* das gesamte Bild muss als "Normales SVG" gespeichert werden (Standardeinstellung bei Inkscape ist "Inkscape SVG")
- 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)<br> - das solltet ihr beim zeichnen beachten
* Wenn die Grafik nicht angezeigt wird sondern nur Text: In einem Editor den Inhalt mit einer funktionierenden SVG-Datei vergleichen und anpassen.
- 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<br>
* 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.
- alle Texte müssen in Pfade umgewandelt werden<br>
- das gesamte Bild muss als "Normales SVG" gespeichert werden (Standardeinstellung bei Inkscape ist "Inkscape SVG")<br>
- 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. <br>


<pre>
<syntaxhighlight lang="XML">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<!-- Created with Inkscape (http://www.inkscape.org/) -->
Zeile 47: Zeile 74:
   viewBox="0 0 585 585"
   viewBox="0 0 585 585"
   id="svg2421"
   id="svg2421"
   sodipodi:docname="usb-stick.svg"></pre>
   sodipodi:docname="usb-stick.svg">
 
</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]]

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

  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.

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