Dieser Thread dient der Dokumentation vom Hinzufügen zusätzlicher icons(-sets) in FTUI3 - und soll den Hauptthread (https://forum.fhem.de/index.php/topic,115259.0.html) entlasten.
FTUI3 liefert eigene icons (https://github.com/knowthelist/ftui/tree/master/www/ftui/icons) mit. Wenn icons fehlen sollten, kann man diese in diesem Thread vorschlagen bzw. anfragen (https://forum.fhem.de/index.php/topic,115259.0.html).
Eingebunden werden icons aus anderen Quellen über das path Attribut.
FTUI3 standard icon (ohne path da das Standard-Verzeichnis
icons verwendet wird):
<ftui-icon name="bomb"></ftui-icon>Icons aus anderer Quelle:
<ftui-icon path="pfad/zum/ordner" name="name-des-icons-ohne-svg-dateiendung"></ftui-icon>Für Icons welche im FHEMWEB zur Verfügung stehen:
<ftui-icon path="../images/openautomation" name="fts_door_open"></ftui-icon>Icon-Quellen:
Zitat von: octek0815 am 06 Januar 2021, 11:04:22oder hier...
https://www.onlinewebfonts.com/icon/426272
Zitat von: yersinia am 06 Januar 2021, 13:12:41
Ok, verstehe ich. Wenn man fa will geht es zB so auf der console für Version 5.15.1:
cd /tmp
wget https://use.fontawesome.com/releases/v5.15.1/fontawesome-free-5.15.1-web.zip
unzip fontawesome-free-5.15.1-web.zip
sudo mv /tmp/fontawesome-free-5.15.1-web/svgs /opt/fhem/www/ftui/fa-svg
sudo chown fhem:dialout /opt/fhem/www/ftui/fa-svg
sudo chown fhem:dialout /opt/fhem/www/ftui/fa-svg/*
Die fa-svg icons liegen nun im ftui Verzeichnis unter fa-svg, welche sich dann nochmal in brands, regular und solid (https://fontawesome.com/icons?d=gallery&s=brands,regular,solid&m=free) unterteilen.
optional (löscht das runtergeladene Archiv sowie den Ordner, Benutzung auf eigene Gefahr):
cd /tmp
rm fontawesome-free-5.15.1-web.zip
rm -r fontawesome-free-5.15.1-web
Zitat von: yersinia am 06 Januar 2021, 13:24:32
SVGs für weather icons (http://erikflowers.github.io/weather-icons/):
cd /tmp
wget https://github.com/erikflowers/weather-icons/archive/master.zip
unzip master.zip
sudo mv /tmp/weather-icons-master/svg /opt/fhem/www/ftui/wi-svg
sudo chown fhem:dialout /opt/fhem/www/ftui/wi-svg
sudo chown fhem:dialout /opt/fhem/www/ftui/wi-svg/*
Die weather-icons befinden sich dann, analog zu fa-svg, direkt unter wi-svg.
optional (löscht das runtergeladene Archiv sowie den Ordner, Benutzung auf eigene Gefahr):
cd /tmp
rm master.zip
rm -r weather-icons-master/
EDIT:
material icons von Christoph Morrison (https://forum.fhem.de/index.php?action=profile;u=17701) bereitgestellte icons (https://forum.fhem.de/index.php/topic,117254.0.html) können, wenn man sie nicht wie im Thread (https://forum.fhem.de/index.php/topic,117254.0.html) beschrieben in FHEM via update integrieren möchte, auch -wie oben beschrieben- via wget direkt von github laden:
FHEM-Icons-Material-Templarian (https://github.com/fhem/FHEM-Icons-Material-Templarian/archive/master.zip)
FHEM-Icons-Material-Google (https://github.com/fhem/FHEM-Icons-Material-Google/archive/master.zip) (Dateigröße: 333MB !!!)
Zitat von: octek0815 am 06 Januar 2021, 13:27:13oder diese wenn es bunt und animiert sein soll...
https://bas.dev/projects/weather-icons
https://www.amcharts.com/free-animated-svg-weather-icons/
Ein Thread um zwischen Tag- und Nacht-Wetter-Icons zu unterscheiden: [FTUI3ß] Andere Wettericons (https://forum.fhem.de/index.php/topic,117473.0.html)
Bei den Weather-icons kann es icons geben, die ein Leerzeichen im Dateinamen enthalten - dann können diese uU nicht von ftui-icon gefunden werden. Ich habe das mit dem Befehl mv gelöst - was faktisch einer Umbenennung entspricht. Wenn ihr der Anleitung aus post #1 gefolgt seid, dann sehen die Codeschnippsel so aus:
cd /opt/fhem/www/ftui/wi-svg
sudo mv wi-moon-alt-waxing-crescent-6\ .svg wi-moon-alt-waxing-crescent-6.svg
sudo mv wi-moon-alt-waxing-gibbous-6\ .svg wi-moon-alt-waxing-gibbous-6.svg
sudo mv wi-moon-waning-crescent-4\ .svg wi-moon-waning-crescent-4.svg
sudo mv wi-moon-waning-gibbous-5\ .svg wi-moon-waning-gibbous-5.svg
sudo mv wi-moon-waxing-crescent-6\ .svg wi-moon-waxing-crescent-6.svg
sudo mv wi-moon-waxing-gibbous-4\ .svg wi-moon-waxing-gibbous-4.svg
Ich schreibe grad auf 3.0 um bzw neu ;D
Früher gab es die Klasse "warn", die dafür gesorgt hat, dass der Wert beim Icon rechts oben mit angezeigt wurde. Gibt es das noch?
Ich baue grad meinen Abfall Kalender in FTUI mit ein, lasse den Mülleimer bei Resttagen 0 und 1 hüpfen, hätte aber trotzdem gerne die Resttage mit angezeigt:
<ftui-icon name="trash-o" size="3" color="brown" [class-name]="myAbfall:Biotonne | map('`0|1`:hop,`.*`:')"></ftui-icon>
Dafür gibt es:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/badge.html
Demo:
https://knowthelist.github.io/ftui/www/ftui/examples/badge.html
LG
Zitat von: mr_petz am 17 November 2022, 18:18:21
Dafür gibt es:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/badge.html
Demo:
https://knowthelist.github.io/ftui/www/ftui/examples/badge.html
LG
Leider bin ich da nicht weiter gekommen
Zitat von: mkriegl am 17 November 2022, 18:14:41
Ich schreibe grad auf 3.0 um bzw neu ;D
Früher gab es die Klasse "warn", die dafür gesorgt hat, dass der Wert beim Icon rechts oben mit angezeigt wurde. Gibt es das noch?
Ich baue grad meinen Abfall Kalender in FTUI mit ein, lasse den Mülleimer bei Resttagen 0 und 1 hüpfen, hätte aber trotzdem gerne die Resttage mit angezeigt:
<ftui-icon name="trash-o" size="3" color="brown" [class-name]="myAbfall:Biotonne | map('`0|1`:hop,`.*`:')"></ftui-icon>
Du musst unter deiner Zeile <ftui-icon name=.....></ftui-icon> den Zusatz "badge" noch definieren, z.B.
<ftui-badge [text]="device:reading" class="size-0"></ftui-badge>Probiere das mal so.
Gruß Markus
Ok Bsp:
<ftui-icon name="trash-o" size="3" color="brown" [class-name]="myAbfall:Biotonne | step('0:hop,2:``')">
<ftui-badge color="danger" class="size-0" [text]="myAbfall:Biotonne_days"></ftui-badge>
</ftui-icon>
LG
Edit.
Vergessen zu erwähnen...
Im Bsp. oben hüpft der Badge mit.
Wenn du das nicht willst, dann alles in eine cell oder row packen und den Badge aus dem icon holen... Bsp:
<ftui-cell>
<ftui-icon name="trash-o" size="3" color="brown" [class-name]="myAbfall:Biotonne | step('0:hop,2:``')">
</ftui-icon>
<ftui-badge color="danger" class="size-0" [text]="myAbfall:Biotonne_days"></ftui-badge>
</ftui-cell>
Danke. Ja, darf ruhig mithüpfen, aber danke. Wenigstens habe ich wieder was mit ftui-cell gelernt ;D
Ich bin zu blöd,
ich habe eine SVG mit dem Namen: window-car.svg im Ordner icons unter: opt/fhem/www/tablet/ftui3/icons
Wenn ich versuche das sag wie folgt einzubinden:
<ftui-icon path="../icons" name="window-car" size="2"></ftui-icon>
bekomme ich kein Bild angezeigt. Ich habe alles mögliche mit dem Pfad versucht, ohne Erfolg :-(
@TimoD
Wenn die schon im Ordner ftui3/icons liegen (sprich im Standardordner) brauchst du keinen path angeben.
<ftui-icon name="window-car" size="2"></ftui-icon>
LG mr_petz
Das war einfach :-) DANKE