Hi zusammen,
ich wollte meine FTUI wieder erweitern mit einer Netzwerkübersicht. Dafür wollte ich dieses Icon verwenden:
https://fontawesome.com/icons/network-wired?style=solid
nur wird es mir nicht angezeigt :(
kann man da was machen?
hier ist der code:
<!-- ============== Netzwerk ================ -->
<li data-row="2" data-col="2" data-sizex="1" data-sizey="1" class="semitransparent">
<header>Netzwerk</header>
<div class="">
<div
data-type="pagetab"
data-url="netzwerk.html"
data-icon="fa-network-wired"
data-on-color="#6093e5"
data-off-color="#6093e5"
class="">
</div>
<div class="anaus">Anzeigen</div>
</div>
</li>
ebenfalls bei dem icon wird mir nichts angezeigt:
<li><div data-type="push" data-icon="fa-satellite-dish"></div></li>
Meine es so verstanden zu haben das diese Icons gehen:
http://<fhemip>:8083/fhem/ftui/icons_table.html
Gruß
Thomas
Entweder du findest in TomLees link auf deinem FHEM System ein entsprechendes Icon (anstelle fon fa würde zB auch oa mit oa-it_network gehen) oder du kannst dir das fehlende fa Icon selbst besorgen und die fontawesome dateien auf deinem FHEM System entsprechend ergänzen/überschreiben.
Wie ergänzt/überschreibt man den ein icon korrekt ?
Die Frage hab ich mir gestern gestellt nachdem ich gesehen hatte das es auch fa-virus und fa-viruses gibt.
Gruß
Thomas
Zitat von: TomLee am 25 März 2020, 10:16:36Wie ergänzt/überschreibt man den ein icon korrekt ?
Gute Frage, da habe ich mir noch keine Gedanken gemacht. ???
Ich würde erstmal versuchen, die icon sets runterzuladen (zB fontawesome (https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself)).
Dann müssen die ins FTUI eingebunden werden bevor man diese nutzen kann, ich habe dazu diesen wiki artikel gefunden: https://wiki.fhem.de/wiki/FHEM_Tablet_UI_FAQ#Wie_kann_ich_eigene_Icons_verwenden.3F (https://wiki.fhem.de/wiki/FHEM_Tablet_UI_FAQ#Wie_kann_ich_eigene_Icons_verwenden.3F)
Und dann sollte das in meinem einfachen Verständnis funktionieren.
Oder man fragt setstate (https://forum.fhem.de/index.php?action=profile;u=7023) ob er die FTUI Source (https://github.com/knowthelist/fhem-tablet-ui/tree/master/www/tablet/fonts) entsprechend aktualisiert.
Nach meiner Kenntnis sind nicht alle Icons, die man auf fontawesome findet, frei benutzbar.
Zitat von: DocCyber am 02 April 2020, 15:44:45
Nach meiner Kenntnis sind nicht alle Icons, die man auf fontawesome findet, frei benutzbar.
Richtig, aber es gibt einen netten Reiter "Free", in dem alle freien Icons dargestellt sind. Leider sind nicht alle der dort angezeigten Icons auch in FHEM nutzbar.
[2022-03-30] Diese Beschreibung bezieht sich auf FTUI2 - für FTUI3 (https://github.com/knowthelist/ftui) siehe eigenen Thread (https://forum.fhem.de/index.php/topic,117545.0.html).
Ich hab das jetzt bei mir probiert und nach einigen Schwierigkeiten hinbekommen. So bin ich vorgegangen auf dem Terminal vom FHEM Raspi (Angaben ohne Gewähr, Gedächtnisprotokoll ;)):
1. das icon set runterladen, entweder manuell von der Webseite (https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself) (direkter Link (https://use.fontawesome.com/releases/v6.7.2/fontawesome-free-6.7.2-web.zip)) oder auf dem FHEM RasPi zB im tmp Verzeichnis via
cd /tmp
wget https://use.fontawesome.com/releases/v6.7.2/fontawesome-free-6.7.2-web.zip
2. das Archiv entpacken
unzip fontawesome-free-6.7.2-web.zip
3. den Ordner /opt/fhem/www/tablet/fonts und die Datei font-awesome.min.css sichern (just in case)
sudo cp -ar /opt/fhem/www/tablet/fonts /opt/fhem/www/tablet/fonts_backup
sudo cp /opt/fhem/www/tablet/lib/font-awesome.min.css /opt/fhem/www/tablet/lib/font-awesome.min.css.backup
4. die neuen webfonts nach fonts verschieben und Besitzer anpassen
sudo mv fontawesome-free-6.7.2-web/webfonts/fa-* /opt/fhem/www/tablet/fonts
sudo chown fhem:dialout /opt/fhem/www/tablet/fonts/fa-*
5. Datei all.min.css anpassen (Ändern des Quellordners von webfonts zu fonts)
sed -i 's/webfonts/fonts/g' /tmp/fontawesome-free-6.7.2-web/css/all.min.css
6. Dateien all.min.css und v4-shims.min.css zusammenführen in eine neue Datei font-awesome.min.css:
awk 1 /tmp/fontawesome-free-6.7.2-web/css/all.min.css /tmp/fontawesome-free-6.7.2-web/css/v4-shims.min.css > /tmp/fontawesome-free-6.7.2-web/css/font-awesome.min.css
7. font-awesome.min.css nach /opt/fhem/www/tablet/lib verschieben und Besitzer anpassen:
sudo mv /tmp/fontawesome-free-6.7.2-web/css/font-awesome.min.css /opt/fhem/www/tablet/lib/font-awesome.min.css
sudo chown fhem:dialout /opt/fhem/www/tablet/lib/font-awesome.min.css
8. FTUI Seite einmal neu laden und schauen ob alles da ist und wie vorher funktioniert (wenn nicht, wir haben bei Punkt 3 Backups erstellt)
9. Verhindern, dass die neuen Dateien mit dem nächsten FTUI Update überschrieben werden - in dem man diese vom Update exkludiert im global-Device von FHEM:
attr global exclude_from_update www/tablet/lib/font-awesome.min.css www/tablet/fonts/fa-*(Vorsicht: wird dieses RAW 1:1 in FHEM übernommen, überschreibt es bestehende Einträge; sollte man bereits exclude_from_update benutzen muss man dies nur um www/tablet/lib/font-awesome.min.css www/tablet/fonts/fa-* ergänzen)
10. Optional: den fontawesome Ordner und das runtergeladene Archiv aus /tmp löschen:
rm -r /tmp/fontawesome-free-6.7.2-web
rm /tmp/fontawesome-free-6.7.2-web.zip
EDIT I
Übrigens, die kostenlos enthaltenen Icons (Pakete solid und brands) kann man auf der Webseite (https://fontawesome.com/icons?d=gallery&s=brands,solid) sehen (für die Benutzung im FTUI muss den Iconnamen ein fa- vorangestellt werden: aus dizzy (https://fontawesome.com/icons?d=gallery&q=dizzy&s=solid) muss fa-dizzy werden usw.); dies sind dann mehr als derzeit für fontawesome unter http://<fhemip>:8083/fhem/ftui/icons_table.html zu finden
EDIT II
Falls was schief geht, so spielt man das Backup aus Punkt 3 wieder ein:
sudo rm -r /opt/fhem/www/tablet/fonts
sudo mv /opt/fhem/www/tablet/fonts_backup /opt/fhem/www/tablet/fonts
sudo mv /opt/fhem/www/tablet/lib/font-awesome.min.css.backup /opt/fhem/www/tablet/lib/font-awesome.min.css
EDIT III (2020-07-01)
Text aktualisiert auf neue fa5 Version v5.13.1; Backups aus Punkt 3 löschen via (ohne Gewähr und auf eigene Gefahr):
sudo rm -r /opt/fhem/www/tablet/fonts_backup
sudo rm /opt/fhem/www/tablet/lib/font-awesome.min.css.backup
EDIT IV (2020-07-20): Text aktualisiert auf neue fa5 Version v5.14.0
EDIT V (2020-10-11): Text aktualisiert auf neue fa5 Version v5.15.1
EDIT VI (2021-01-21): Text aktualisiert auf neue fa5 Version v5.15.2
EDIT VII (2021-04-04): Text aktualisiert auf neue fa5 Version v5.15.3
EDIT VIII (2021-11-06): Text aktualisiert auf neue fa5 Version v5.15.4
EDIT IX (2022-02-23): Text aktualisiert auf neue fa6 Version v6.0.0
EDIT X (2022-03-30): Text aktualisiert auf neue fa6 Version v6.1.1
EDIT XI (2022-08-09): Text aktualisiert auf neue fa6 Version v6.1.2
EDIT XII (2022-10-04): Text aktualisiert auf neue fa6 Version v6.2.0
EDIT XIII (2022-12-08): Text aktualisiert auf neue fa6 Version v6.2.1
EDIT XIV (2023-02-10): Text aktualisiert auf neue fa6 Version v6.3.0
EDIT XV (2023-06-07): Text aktualisiert auf neue fa6 Version v6.4.0
EDIT XVI (2023-09-17): Text aktualisiert auf neue fa6 Version v6.4.2
EDIT XVII (2024-03-05): Text aktualisiert auf neue fa6 Version v6.5.1
EDIT XVIII (2024-08-15): Text aktualisiert auf neue fa6 Version v6.6.0
EDIT XIX (2024-12-08): Text aktualisiert auf neue fa6 Version v6.7.1
EDIT XX (2024-12-17): Text aktualisiert auf neue fa6 Version v6.7.2
Für alle, die eine Übersicht der Icons haben wollen, hab ich mir ein kleines HTML mit JavaScript gebaut - es liest folgende fünf CSS Files aus, die im <head> Bereich via des <link /> Attribut eingebunden werden:
lib/font-awesome.min.css
lib/fhemSVG.min.css
lib/openautomation.min.css
lib/weather-icons.min.css
lib/material-icons.min.css
Die anhängende HTML muss in den gleichen Ordner wie die icons_tables.html (/opt/fhem/www/tablet) gespeichert werden und kann dann via http://[fhem-ip]:8085/fhem/ftui/icons_table_dyn.html aufgerufen werden. Das Laden kann etwas dauern; die CSS Files werden dynamisch ausgelesen.
Hallo,
ich habe genau nach dieser Anweisung die Font Awesome Icons hinzugefügt.
Allerdings bekomme ich für folgendes Icon nichts angezeigt.
https://fontawesome.com/icons/microsoft?style=brands
ZitatThe fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
Steht übrigens -etwas unscheinbar- auch auf der von dir verlinkten Seite:
Zitat<i class="fab fa-microsoft"></i>
https://fontawesome.com/icons/microsoft?style=brands
FTUI widgets stellen per default ein
fa vorran, das funktioniert in v5 noch mit den solids
, aber nicht mehr für brands. Den brands muss man ein fab vorranstellen. Anstelle von fa-microsoft musst du fab fa-microsoft nutzen.EDIT: die widgets können derzeit die fa icons mit den
fab prefixes nicht laden.
Ja, das funktioniert leider auch nicht
folgende def.
<link rel="stylesheet" href="lib/font-awesome.min.css" />
<header>Fenster</header>
<div class="inline top-space">
<div class="big"
data-type="symbol"
data-device="Fensterkontakt_WC"
data-states='["open","closed"]'
data-icons='["fab fa-microsoft faa-flash animated faa-slow","fab fa-microsoft"]'
data-colors='["black","white"]'>
</div>
<div data-type="label" class="cell small">WC</div>
Ok, das stimmt. Ich hab das mal bei mir nachgestellt.
Während
<i class="fab fa-microsoft"></i>
funktioniert, funktioniert die Verwendung von fab offensichtlich nicht mit den derzeitigen FTUI widgets.
Ja so wird das bei mir auch dargestellt.
Da wird aber die Zustandsänderung dann nicht gewechselt.
Vielleicht krieg man das doch irgendwie zum laufen.
Vielen Dank
Zitat von: neyzen am 05 Mai 2020, 15:01:58Vielleicht krieg man das doch irgendwie zum laufen.
Ja, bedeutet aber einen tieferen Eingriff in FTUI Dateien - und den Umbau von den eigenen FTUI Seiten.
Hallo,
hätte einen kleinen Workaround der bei manchen Fällen hilft
<img src="Pfad zum IMAGE" onclick="ftui.setFhemStatus('set Kommando')"></img>
Gruß
Eisix
Ach, manchmal kann die Lösung einfacher sein, als man sich vorstellt (Baum und Wald und so....)
Zitat von: Eisix am 05 Mai 2020, 15:55:54<img src="Pfad zum IMAGE" onclick="ftui.setFhemStatus('set Kommando')"></img>
Danke für den Schubser.
Was auch gehen müsste ist
<i class="fab fa-microsoft" onclick="ftui.setFhemStatus('set Kommando');"></i>oder als div container der alle anderen Klassen aus FTUI aufnehmen könnte
<div class="fab fa-microsoft" onclick="ftui.setFhemStatus('set Kommando');"></div>Allerdings würde bei keinem der drei obigen Lösungen die 'normalen' Funktionen wie bei zB dem symbol widget (Farbänderung bei Statusänderung etc.) nachgebildet, oder?
Farbänderungen wie bei einem normalen Icon nicht, aber was geht ist das, das Icon grau wird.
Nutze das bei mir in einem swiper für die Auswahl-Icons.
Eine andere Variante nur zum Status anzeigen
<div class="round top-narrow grow-1 inline" data-type="image" data-device="rr_XXX" data-state-get="state" data-states='["((home)|(gotosleep))","((absent)|(gone))"]' data-classes='["","faded"]' data-width="40" data-height="40" data-url="/fhem/images/Minion-Dancing-icon.png"></div>
Gruß
Eisix
Ich habe Probleme beim Einbinden des XBox Icons
<div data-type="switch" class="fab fa-xbox">
Hier wird mir das Icon neben dem Switch Symbol angezeigt, anstatt es zu ersetzen.
Wenn du es nicht richtig einbindest, wird das auch nicht richtig funktionieren. Doku zum switch widget -> https://wiki.fhem.de/wiki/FTUI_Widget_Switch
Das könnte dann so aussehen:
<div data-type="switch"
data-device="DEVICE"
data-set-states='["off","on"]'
data-states='["on","off"]'
data-icons='["fab fa-xbox", "fab fa-xbox"]'
data-colors='["white", "white"]'
data-background-colors='["green", "red"]'
class="">
</div>
EDIT: es wird aber höchstwahrscheinlich nicht funktionieren, siehe auch post #11 und folgende(!!!) (https://forum.fhem.de/index.php/topic,109488.msg1050662.html#msg1050662). //EDIT
Wenn du nur das icon haben möchtest (ohne weitere Funktionen), genügt die Klassendefinition:
<div class="fab fa-xbox"></div>
oder ganz spartanisch, ohne div-container:
<i class="fab fa-xbox"></i>
Zitat von: yersinia am 24 Dezember 2020, 10:08:33
Wenn du es nicht richtig einbindest, wird das auch nicht richtig funktionieren. Doku zum switch widget -> https://wiki.fhem.de/wiki/FTUI_Widget_Switch
Das könnte dann so aussehen:
<div data-type="switch"
data-device="DEVICE"
data-set-states='["off","on"]'
data-states='["on","off"]'
data-icons='["fab fa-xbox", "fab fa-xbox"]'
data-colors='["white", "white"]'
data-background-colors='["green", "red"]'
class="">
</div>
EDIT: es wird aber höchstwahrscheinlich nicht funktionieren, siehe auch post #11 und folgende(!!!) (https://forum.fhem.de/index.php/topic,109488.msg1050662.html#msg1050662). //EDIT
Switch kenne ich. Nur weiß ich nicht, wie ich die fab Icons einbinden soll.
Zitat von: yersinia am 24 Dezember 2020, 10:08:33
Wenn du nur das icon haben möchtest (ohne weitere Funktionen), genügt die Klassendefinition:
<div class="fab fa-xbox"></div>
oder ganz spartanisch, ohne div-container:
<i class="fab fa-xbox"></i>
Du meinst ohne die ganzen Widgets? Was ich zumindest bräuchte wäre die Farbe und data-get-on/off. Wie mache ich das am besten? Das svg herunterladen und in ein eigenes font einfügen?
Zitat von: TWART016 am 24 Dezember 2020, 15:46:38Switch kenne ich. Nur weiß ich nicht, wie ich die fab Icons einbinden soll.
Offensichtlich nicht, denn dann hättest du das hier nicht überlesen:
Zitat von: yersinia am 24 Dezember 2020, 10:08:33Das könnte dann so aussehen:
<div data-type="switch"
data-device="DEVICE"
data-set-states='["off","on"]'
data-states='["on","off"]'
data-icons='["fab fa-xbox", "fab fa-xbox"]'
data-colors='["white", "white"]'
data-background-colors='["green", "red"]'
class="">
</div>
Zitat von: TWART016 am 24 Dezember 2020, 15:46:38Du meinst ohne die ganzen Widgets? Was ich zumindest bräuchte wäre die Farbe und data-get-on/off. Wie mache ich das am besten? Das svg herunterladen und in ein eigenes font einfügen?
Dieser Thread handelt das eigtl ganz gut ab.
Zitat von: yersinia am 24 Dezember 2020, 10:08:33EDIT: es wird aber höchstwahrscheinlich nicht funktionieren, siehe auch post #11 und folgende(!!!) (https://forum.fhem.de/index.php/topic,109488.msg1050662.html#msg1050662). //EDIT
Zitat von: yersinia am 24 Dezember 2020, 16:01:35
Offensichtlich nicht, denn dann hättest du das hier nicht überlesen:Dieser Thread handelt das eigtl ganz gut ab.
Das hatte ich eingefügt, jedoch wird dort gar kein Icon angezeigt
In dem Thread war von Workarounds mit img und onclick die Rede.
Sobald ich data-type switch eintrage erscheint die Lampe als Icon:
<div data-type="switch" class="fab fa-xbox" onclick="ftui.setFhemStatus('set test on');"></div>
Mit dem ist das nicht Icon nicht anklickbar.
<i data-type="switch" class="fab fa-xbox"></i>
Zitat von: TWART016 am 24 Dezember 2020, 16:19:11Sobald ich data-type switch eintrage erscheint die Lampe als Icon:
<div data-type="switch" class="fab fa-xbox" onclick="ftui.setFhemStatus('set test on');"></div>
Das funktioniert so auch nicht. Entweder switch oder JS-handler onclick. Beides geht mWn nicht.
Du kannst den Vorschlag aus #19 (https://forum.fhem.de/index.php/topic,109488.msg1113866.html#msg1113866) probieren - wenn du Glück hast, hast du ein switch mit dem icon.
Zitat von: TWART016 am 24 Dezember 2020, 16:19:11Mit dem ist das nicht Icon nicht anklickbar.
<i data-type="switch" class="fab fa-xbox"></i>
Ja, das dient auch nur der Anzeige.
Klickbar aber ohne Statusanzeige/-wiedergabe geht so:
<div class="fab fa-xbox" onclick="ftui.setFhemStatus('set test on');"></div>oder
<i class="fab fa-xbox" onclick="ftui.setFhemStatus('set test on');"></i>
Zitat von: yersinia am 24 Dezember 2020, 16:25:25
Das funktioniert so auch nicht. Entweder switch oder JS-handler onclick. Beides geht mWn nicht.
Du kannst den Vorschlag aus #19 (https://forum.fhem.de/index.php/topic,109488.msg1113866.html#msg1113866) probieren - wenn du Glück hast, hast du ein switch mit dem icon.
Das funktioniert leider nicht.
Zitat von: yersinia am 24 Dezember 2020, 16:25:25
Ja, das dient auch nur der Anzeige.
Klickbar aber ohne Statusanzeige/-wiedergabe geht so:
<div class="fab fa-xbox" onclick="ftui.setFhemStatus('set test on');"></div>
oder
<i class="fab fa-xbox" onclick="ftui.setFhemStatus('set test on');"></i>
Wenn ich beides will, muss ich also doch eine eigene font nehmen?
Hier habe ich noch die font-awesome.min.css gefunden. Problem ist, wenn ich die css erweitere, wird diese beim Update überschrieben.
https://forum.fhem.de/index.php/topic,94370.msg872466.html#msg872466
Zitat von: TWART016 am 25 Dezember 2020, 14:45:04Wenn ich beides will, muss ich also doch eine eigene font nehmen?
Das, oder deine font-awesome.min.css erweitern - wie du ja in dem von dir verlinkten Post von setstate (https://forum.fhem.de/index.php/topic,94370.msg872466.html#msg872466) selbst gefunden hast.
Oder, die fa-multibutton.js anpassen, dass nicht automatisch
fa vorbelegt wird (Zeilen 94 und 99). Hat aber den Nachteil, dass bei allen fa icons dann explizit
fa,
fas oder
fab mitgegeben werden muss - dies bedeute aber auch, eine bestehende FTUI Installation anzupassen (zB auch die explizite Angabe von sonst standardisierten background icons).
Ob das mit (noch in der Entwicklung befindlichem) FTUI 3 (https://forum.fhem.de/index.php/topic,115259.0.html) noch sinnvoll ist, muss jeder selbst beurteilen.
Zitat von: TWART016 am 25 Dezember 2020, 14:45:04Hier habe ich noch die font-awesome.min.css gefunden. Problem ist, wenn ich die css erweitere, wird diese beim Update überschrieben.
https://forum.fhem.de/index.php/topic,94370.msg872466.html#msg872466
Dann exkludiere die
font-awesome.min.css vom Update (https://fhem.de/commandref_DE.html#update):
attr global exclude_from_update www/tablet/lib/font-awesome.min.css(Überschreibt ggf bestehende Werte des attributes von global)