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

Begonnen von yersinia, 08 Januar 2021, 12:20:51

Vorheriges Thema - Nächstes Thema

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):
<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 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:
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 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 !!!)
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/
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

yersinia

viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

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:
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
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

mkriegl

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>



meier81

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
QNAP NAS mit Debian VM, darauf FHEM, debmatic, influxdb2 und Grafana || HB-RF-ETH || WS980 Wetterstation || Xiaomi Mi Robot mit valetudo-FW || Buderus web KM100 || div. Tasmota-Devices || mehrere Homematic-IP und Homematic-Devices

mr_petz

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>

mkriegl

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

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:

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

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


LG mr_petz