brauche Icon Hilfe

[Eisix]

Hallo,

hätte einen kleinen Workaround der bei manchen Fällen hilft

Code Auswählen Erweitern


<img src="Pfad zum IMAGE" onclick="ftui.setFhemStatus('set Kommando')"></img>


Gruß
Eisix

[yersinia]

Ach, manchmal kann die Lösung einfacher sein, als man sich vorstellt (Baum und Wald und so....)

Code Auswählen Erweitern

<img src="Pfad zum IMAGE" onclick="ftui.setFhemStatus('set Kommando')"></img>

Danke für den Schubser.

Was auch gehen müsste ist

Code Auswählen Erweitern

<i class="fab fa-microsoft" onclick="ftui.setFhemStatus('set Kommando');"></i>
oder als div container der alle anderen Klassen aus FTUI aufnehmen könnte

Code Auswählen Erweitern

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

[Eisix]

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

Code Auswählen Erweitern


<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

[TWART016]

Ich habe Probleme beim Einbinden des XBox Icons

Code Auswählen Erweitern

<div data-type="switch" class="fab fa-xbox">


Hier wird mir das Icon neben dem Switch Symbol angezeigt, anstatt es zu ersetzen.

[yersinia]

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:

Code Auswählen Erweitern

<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(!!!). //EDIT

Wenn du nur das icon haben möchtest (ohne weitere Funktionen), genügt die Klassendefinition:

Code Auswählen Erweitern

<div class="fab fa-xbox"></div>
oder ganz spartanisch, ohne div-container:

Code Auswählen Erweitern

<i class="fab fa-xbox"></i>

[TWART016]

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:

Code Auswählen Erweitern

<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(!!!). //EDIT

Switch kenne ich. Nur weiß ich nicht, wie ich die fab Icons einbinden soll.

Wenn du nur das icon haben möchtest (ohne weitere Funktionen), genügt die Klassendefinition:

Code Auswählen Erweitern

<div class="fab fa-xbox"></div>
oder ganz spartanisch, ohne div-container:

Code Auswählen Erweitern

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

[yersinia]

Switch kenne ich. Nur weiß ich nicht, wie ich die fab Icons einbinden soll.

Offensichtlich nicht, denn dann hättest du das hier nicht überlesen:

Das könnte dann so aussehen:

Code Auswählen Erweitern

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

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?

Dieser Thread handelt das eigtl ganz gut ab.

EDIT: es wird aber höchstwahrscheinlich nicht funktionieren, siehe auch post #11 und folgende(!!!). //EDIT

[TWART016]

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:

Code Auswählen Erweitern

<div data-type="switch" class="fab fa-xbox" onclick="ftui.setFhemStatus('set test on');"></div>


Mit dem ist das nicht Icon nicht anklickbar.

Code Auswählen Erweitern

<i data-type="switch" class="fab fa-xbox"></i>


[yersinia]

Sobald ich data-type switch eintrage erscheint die Lampe als Icon:

Code Auswählen Erweitern

<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 probieren - wenn du Glück hast, hast du ein switch mit dem icon.

Mit dem ist das nicht Icon nicht anklickbar.

Code Auswählen Erweitern

<i data-type="switch" class="fab fa-xbox"></i>


Ja, das dient auch nur der Anzeige.

Klickbar aber ohne Statusanzeige/-wiedergabe geht so:

Code Auswählen Erweitern

<div class="fab fa-xbox" onclick="ftui.setFhemStatus('set test on');"></div>
oder

Code Auswählen Erweitern

<i class="fab fa-xbox" onclick="ftui.setFhemStatus('set test on');"></i>

[TWART016]

Das funktioniert so auch nicht. Entweder switch oder JS-handler onclick. Beides geht mWn nicht.
Du kannst den Vorschlag aus #19 probieren - wenn du Glück hast, hast du ein switch mit dem icon.

Das funktioniert leider nicht.

Ja, das dient auch nur der Anzeige.

Klickbar aber ohne Statusanzeige/-wiedergabe geht so:

Code Auswählen Erweitern

<div class="fab fa-xbox" onclick="ftui.setFhemStatus('set test on');"></div>
oder

Code Auswählen Erweitern

<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

[yersinia]

Wenn 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 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 noch sinnvoll ist, muss jeder selbst beurteilen.

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

Dann exkludiere die font-awesome.min.css vom Update:

Code Auswählen Erweitern

attr global exclude_from_update www/tablet/lib/font-awesome.min.css
(Überschreibt ggf bestehende Werte des attributes von global)