Autor Thema: [FTUI 3] zusätzliche icons hinzufügen (font-awesome, weather icon usw)  (Gelesen 2382 mal)

Offline yersinia

  • Hero Member
  • *****
  • Beiträge: 1543
    • Cyanide & Happiness
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:
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:
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
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 !!!)
oder 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.2 (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

Offline yersinia

  • Hero Member
  • *****
  • Beiträge: 1543
    • Cyanide & Happiness
Ein Thread um zwischen Tag- und Nacht-Wetter-Icons zu unterscheiden: [FTUI3ß] Andere Wettericons
viele Grüße, yersinia
----
FHEM 6.2 (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

Offline yersinia

  • Hero Member
  • *****
  • Beiträge: 1543
    • Cyanide & Happiness
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.2 (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

Offline mkriegl

  • Jr. Member
  • **
  • Beiträge: 95
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>



Offline meier81

  • Full Member
  • ***
  • Beiträge: 430
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 || SIGNALduino 433MHz mit Maple mini || WS980 Wetterstation || Xiaomi Mi Robot mit valetudo-FW || Buderus web KM100 || div. Tasmota-Devices

Offline mr_petz

  • Hero Member
  • *****
  • Beiträge: 1261
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>
« Letzte Änderung: 18 November 2022, 21:47:02 von mr_petz »

Offline mkriegl

  • Jr. Member
  • **
  • Beiträge: 95
Danke. Ja, darf ruhig mithüpfen, aber danke. Wenigstens habe ich wieder was mit ftui-cell gelernt ;D

Offline TimoD

  • Full Member
  • ***
  • Beiträge: 190
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 :-(

Offline mr_petz

  • Hero Member
  • *****
  • Beiträge: 1261
@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

Offline TimoD

  • Full Member
  • ***
  • Beiträge: 190
Das war einfach :-) DANKE

 

decade-submarginal