[FTUI 3] zusätzliche icons hinzufügen (font-awesome, weather icon usw)

[yersinia]

Dieser Thread dient der Dokumentation vom Hinzufügen zusätzlicher icons(-sets) in FTUI3 - und soll den Hauptthread entlasten.

FTUI3 liefert eigene icons mit. Wenn icons fehlen sollten, kann man diese in diesem Thread vorschlagen bzw. anfragen.

Eingebunden werden icons aus anderen Quellen über das path Attribut.
FTUI3 standard icon (ohne path da das Standard-Verzeichnis icons verwendet wird):

Code Auswählen Erweitern

<ftui-icon name="bomb"></ftui-icon>
Icons aus anderer Quelle:

Code Auswählen Erweitern

<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:

Code Auswählen Erweitern

<ftui-icon path="../images/openautomation" name="fts_door_open"></ftui-icon>

Icon-Quellen:

oder hier...

https://www.onlinewebfonts.com/icon/426272

Ok, verstehe ich. Wenn man fa will geht es zB so auf der console für Version 5.15.1:

Code Auswählen Erweitern

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 unterteilen.

optional (löscht das runtergeladene Archiv sowie den Ordner, Benutzung auf eigene Gefahr):

Code Auswählen Erweitern

cd /tmp
rm fontawesome-free-5.15.1-web.zip
rm -r fontawesome-free-5.15.1-web

SVGs für weather icons:

Code Auswählen Erweitern

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):

Code Auswählen Erweitern

cd /tmp
rm master.zip
rm -r weather-icons-master/

EDIT:
material icons von Christoph Morrison bereitgestellte icons können, wenn man sie nicht wie im Thread beschrieben in FHEM via update integrieren möchte, auch -wie oben beschrieben- via wget direkt von github laden:
FHEM-Icons-Material-Templarian
FHEM-Icons-Material-Google (Dateigröße: 333MB !!!)

oder diese wenn es bunt und animiert sein soll...

https://bas.dev/projects/weather-icons
https://www.amcharts.com/free-animated-svg-weather-icons/

[yersinia]

Ein Thread um zwischen Tag- und Nacht-Wetter-Icons zu unterscheiden: [FTUI3ß] Andere Wettericons

[yersinia]

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:

Code Auswählen Erweitern

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

[mkriegl]

Ich schreibe grad auf 3.0 um bzw neu
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:

Code Auswählen Erweitern

<ftui-icon name="trash-o" size="3" color="brown" [class-name]="myAbfall:Biotonne | map('`0|1`:hop,`.*`:')"></ftui-icon>

[mr_petz]

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

[mkriegl]

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

[meier81]

Ich schreibe grad auf 3.0 um bzw neu
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:

Code Auswählen Erweitern

<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.

Code Auswählen Erweitern

<ftui-badge [text]="device:reading" class="size-0"></ftui-badge>

Probiere das mal so.

Gruß Markus

[mr_petz]

Ok Bsp:

Code Auswählen Erweitern


<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:

Code Auswählen Erweitern


<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>


[mkriegl]

Danke. Ja, darf ruhig mithüpfen, aber danke. Wenigstens habe ich wieder was mit ftui-cell gelernt

[TimoD]

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:

Code Auswählen Erweitern

<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

[mr_petz]

@TimoD

Wenn die schon im Ordner ftui3/icons liegen (sprich im Standardordner) brauchst du keinen path angeben.

Code Auswählen Erweitern


<ftui-icon name="window-car" size="2"></ftui-icon>


LG mr_petz

[TimoD]

Das war einfach DANKE