Icons - Versionsgeschichte

Sailor: /* SVG-Icons */

2026-02-18T09:00:04Z

SVG-Icons

← Nächstältere Version		Version vom 18. Februar 2026, 11:00 Uhr
Zeile 79:		Zeile 79:
	id="svg2421"		id="svg2421"
	sodipodi:docname="usb-stick.svg">		sodipodi:docname="usb-stick.svg">
			<defs>
			<style>.cls-1{fill-rule:evenodd;}</style>
			</defs>
	</syntaxhighlight>		</syntaxhighlight>

Torxgewinde: Icons tauchen erst nach Neustart oder set WEB rereadicons auf

2025-03-23T17:55:37Z

Icons tauchen erst nach Neustart oder set WEB rereadicons auf

← Nächstältere Version		Version vom 23. März 2025, 19:55 Uhr
Zeile 23:		Zeile 23:

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

			Damit neu hinzugefügte Icons erkannt werden ist es notwendig FHEM neuzustarten, oder dem FHEMWEB device einen Befehl zum einlesen der Icons zu senden:<syntaxhighlight lang="perl">
			set WEB rereadicons
			</syntaxhighlight>

	=== Weitere Iconsätze ===		=== Weitere Iconsätze ===

Krikan: Verschiebung der waschto-links nach Literatur#Webseiten

2017-10-31T14:46:17Z

Verschiebung der waschto-links nach Literatur#Webseiten

← Nächstältere Version		Version vom 31. Oktober 2017, 16:46 Uhr
Zeile 80:		Zeile 80:
	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:		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		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 =~~
	* [https://waschto.eu/aufwerten-von-fhem-devices-durch-icons/ How-To: FHEM-Devices mit Icons aufwerten]
	* [https://waschto.eu/eigene-icons-fuer-fhem-erstellen/ How-To: Eigene Icons erstellen und in FHEM einbinden]

	[[Kategorie:HOWTOS]]		[[Kategorie:HOWTOS]]

Trelle: /* Mehr Icons zur Auswahl */ Hinweis auf Icons Verzeichnis /contrib

2017-09-28T09:21:43Z

Mehr Icons zur Auswahl: Hinweis auf Icons Verzeichnis /contrib

← Nächstältere Version		Version vom 28. September 2017, 11:21 Uhr
Zeile 23:		Zeile 23:

	Das gleiche gilt, wenn ihr eine ältere fhem-Installation habt und noch nicht die Bilder z.B. aus fhemSVG angezeigt bekommt.		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 ==		== Icons Farben zuweisen ==

Waschto: How-To hinzugefügt zum Erstellen eigener Icons

2017-09-06T08:17:00Z

How-To hinzugefügt zum Erstellen eigener Icons

← Nächstältere Version		Version vom 6. September 2017, 10:17 Uhr
Zeile 76:		Zeile 76:
	= Links =		= Links =
	* [https://waschto.eu/aufwerten-von-fhem-devices-durch-icons/ How-To: FHEM-Devices mit Icons aufwerten]		* [https://waschto.eu/aufwerten-von-fhem-devices-durch-icons/ How-To: FHEM-Devices mit Icons aufwerten]
			* [https://waschto.eu/eigene-icons-fuer-fhem-erstellen/ How-To: Eigene Icons erstellen und in FHEM einbinden]

	[[Kategorie:HOWTOS]]		[[Kategorie:HOWTOS]]

Waschto: Link zu einem How-To hinzugefügt

2017-09-06T08:15:37Z

Link zu einem How-To hinzugefügt

← Nächstältere Version		Version vom 6. September 2017, 10:15 Uhr
Zeile 73:		Zeile 73:
	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:		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		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 =
			* [https://waschto.eu/aufwerten-von-fhem-devices-durch-icons/ How-To: FHEM-Devices mit Icons aufwerten]

	[[Kategorie:HOWTOS]]		[[Kategorie:HOWTOS]]

Markusbloch: Anpassung von -Tags nach

2017-07-26T17:58:39Z

Anpassung von <source>-Tags nach <syntaxhighlight>

← Nächstältere Version		Version vom 26. Juli 2017, 19:58 Uhr
Zeile 58:		Zeile 58:
	* 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.		* 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.

	<~~source~~ lang="XML">		<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 68:		Zeile 68:
	id="svg2421"		id="svg2421"
	sodipodi:docname="usb-stick.svg">		sodipodi:docname="usb-stick.svg">
	</~~source~~>		</syntaxhighlight>

	== SVG-Icons für das Modul remotecontrol: Schriftvorlage ==		== SVG-Icons für das Modul remotecontrol: Schriftvorlage ==

Markusbloch: Ersetzung von Forum-Links mit Vorlage Link2Forum

2017-03-19T19:30:17Z

Ersetzung von Forum-Links mit Vorlage Link2Forum

← Nächstältere Version		Version vom 19. März 2017, 21:30 Uhr
Zeile 38:		Zeile 38:

	= 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 ~~[http://forum.fhem.de/index.php/topic,~~12605~~.0.html~~ 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 ==		== SVG-Icons ==

Krikan: FHEM(R)

2017-01-24T17:49:30Z

FHEM(R)

← Nächstältere Version		Version vom 24. Januar 2017, 19:49 Uhr
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		Im [[FHEMWEB]] auf Detail-Ansicht des Gerätes gehen, danach in der attr Zeile per dropdown
Zeile 51:		Zeile 51:
	Jetzt wird es wichtig - fhem ist etwas sensibel, was svgs anbelangt und will diese zudem farblich umgestalten. Daher folgendes unbedingt beachten:		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		* 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		* alle Texte müssen in Pfade umgewandelt werden

Ph1959de: Wikifiziert + kleine Korrekturen

2016-05-16T17:48:36Z

Wikifiziert + kleine Korrekturen

← Nächstältere Version		Version vom 16. Mai 2016, 19:48 Uhr
Zeile 2:		Zeile 2:
	= 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		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		# 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.		# '''[[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:		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.		* 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		* 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 "~~arround~~" und "away": <code>~~arround~~:status_available:away away:status_away_2:~~arround~~</code>.		* 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.		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.
Zeile 25:		Zeile 25:

	== Icons Farben zuweisen ==		== Icons Farben zuweisen ==
	Man kann Icons beliebige Farben zuweisen, indem man den Icon-~~Name~~ per "@" mit einem Farbnamen oder einer Farbcodierung versieht.		Man kann Icons beliebige Farben zuweisen, indem man den Icon-Namen per "@" mit einem Farbnamen oder einer Farbcodierung versieht.
	<pre>		<pre>
	rc_dot@red		rc_dot@red
	rc_dot@#a1d490		rc_dot@#a1d490
	</pre>		</pre>
	~~Farben~~ kann man ~~bspw.~~ auf den folgenden Seiten finden:		Hilfe zur Bestimmung der Farbcodierung kann man auf den folgenden Seiten finden:
	* [http://www.colorpicker.com www.colorpicker.com]		* [http://www.colorpicker.com www.colorpicker.com]
	* [http://www.html-color-names.com www.html-color-names.com]		* [http://www.html-color-names.com www.html-color-names.com]
Zeile 58:		Zeile 58:
	* 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.		* 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~~>		<source 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 68:		Zeile 68:
	id="svg2421"		id="svg2421"
	sodipodi:docname="usb-stick.svg">		sodipodi:docname="usb-stick.svg">
	</~~pre~~>		</source>

	== SVG-Icons für das Modul remotecontrol: Schriftvorlage ==		== SVG-Icons für das Modul remotecontrol: Schriftvorlage ==