Verwendung von Icons (data-icons)

[stobor]

Hallo,
ich möchte mir Frontends per TabletUI erstellen. Leider komme ich immer wieder mit den Icons nicht klar.
Prinzipiel habe ich Schalter so definiert:

Code Auswählen Erweitern

<div data-type="switch"
data-device="Arduino_Pin24_WP_onOff"
data-icons='["oa-sani_buffer_temp_all","oa-sani_buffer_temp_all"]'
data-colors='["Green","Red"]'
data-set-states='["off","on"]'
data-states='["on","off"]'
data-background-colors='["#2a2a2a", "#2a2a2a"]'
class="display-topcenter tall">
</div>
wie kann ich aber Symbole auswählen?
Ich versuche mich immer an den Icons der unter https://wiki.fhem.de/wiki/FHEM_Tablet_UI verlinkten Seiten zu bedienen:

• Eingebaute Icons ftui-window und ftui-door. Präfix ftui-. Beispiel: data-icon="ftui-door"
• Font-Awesome: Mehr als 500 Icons zur Auswahl. Präfix fa-. Beispiel: data-icon="fa-volume-up"
• Material Icons: Mehr als 900 Icons zur Auswahl. Präfix mi-. Beispiel: data-icon="mi-local_gas_station"
• FHEM und OpenAutomation Icons: Präfix fs- und oa-. Beispiel: data-icon="oa-secur_locked"
• Weather-Icons: Präfix wi . Beispiel: data-icon="wi wi-day-rain-mix"

Allerdings erscheinen die Symbole dann häufig nicht.

In Fhem direkt nutze ich bspw. das Icon sani_heating_heatpump:

Code Auswählen Erweitern

define Arduino_Pin24_WP_onOff FRM_OUT 24  #  Stromüberschuss vom Wechselrichter
setuuid Arduino_Pin24_WP_onOff 6451f174-f33f-2cfb-df1d-aa6e7987969bfaab
attr Arduino_Pin24_WP_onOff IODev Arduino1
attr Arduino_Pin24_WP_onOff activeLow yes
attr Arduino_Pin24_WP_onOff alias Wärmepumpe
attr Arduino_Pin24_WP_onOff devStateIcon on:sani_heating_heatpump@green off:sani_heating_heatpump@red
attr Arduino_Pin24_WP_onOff icon sani_heating_heatpump
attr Arduino_Pin24_WP_onOff room ArduinoCPU,PV-Anlage
attr Arduino_Pin24_WP_onOff stateFormat value

Versuche ich jetzt das Icon auch in meinem Web-Frontend einzusetzen, kommt immer kein Bild. Ich habe versucht, es so einzubinden:
data-icons='["oa-sani_heating_heatpump","oa-sani_heating_heatpump"]'
   oder auch so
data-icons='["ftui-sani_heating_heatpump","ftui-sani_heating_heatpump"]'

Auch die Verwendung aus fontawesome liefert immer nur eine leeres Feld:
data-icons='["fa-air-conditioner","fa-air-conditioner"]'

Gibt es da einen Trick?

[yersinia]

Davon abgesehen, dass FTUI2.x eol ist und du auf FTUI3 umsteigen solltest (sofern dein Anzeigegerät es auch unterstützt), solltest du die icons auch so benennen wie sie heissen. Welche icons zur Verfügung stehen siehst du im entsprechenden Ordner, für openautomation unter einer Debian/RaspiOS Installation via

Code Auswählen Erweitern

ls -lah /opt/fhem/www/images/openautomation
=>
[...]
-rw-r--r-- 1 fhem dialout 3,3K 19. Feb 2017  sani_boiler_temp.svg
-rw-r--r-- 1 fhem dialout 3,3K 19. Feb 2017  sani_buffer_temp_all.svg
-rw-r--r-- 1 fhem dialout 2,4K 19. Feb 2017  sani_buffer_temp_down.svg
-rw-r--r-- 1 fhem dialout 2,4K 19. Feb 2017  sani_buffer_temp_up.svg
-rw-r--r-- 1 fhem dialout 3,2K 19. Feb 2017  sani_domestic_waterworks.svg
-rw-r--r-- 1 fhem dialout 8,1K 19. Feb 2017  sani_earth_source_heat_pump.svg
-rw-r--r-- 1 fhem dialout 2,6K 19. Feb 2017  sani_floor_heating.svg
-rw-r--r-- 1 fhem dialout 2,2K 19. Feb 2017  sani_garden_pump.svg
-rw-r--r-- 1 fhem dialout 3,7K 19. Feb 2017  sani_heating_automatic.svg
-rw-r--r-- 1 fhem dialout 2,7K 19. Feb 2017  sani_heating_manual.svg
-rw-r--r-- 1 fhem dialout 2,0K 19. Feb 2017  sani_heating.svg
-rw-r--r-- 1 fhem dialout 2,4K 19. Feb 2017  sani_heating_temp.svg
-rw-r--r-- 1 fhem dialout 3,4K 19. Feb 2017  sani_irrigation.svg
-rw-r--r-- 1 fhem dialout 1,9K 19. Feb 2017  sani_pump.svg
-rw-r--r-- 1 fhem dialout 2,5K 19. Feb 2017  sani_return_temp.svg
-rw-r--r-- 1 fhem dialout 2,0K 19. Feb 2017  sani_solar.svg
-rw-r--r-- 1 fhem dialout 2,5K 19. Feb 2017  sani_solar_temp.svg
-rw-r--r-- 1 fhem dialout 7,6K 19. Feb 2017  sani_sprinkling.svg
-rw-r--r-- 1 fhem dialout 2,5K 19. Feb 2017  sani_supply_temp.svg
-rw-r--r-- 1 fhem dialout 2,2K 19. Feb 2017  sani_water_cold.svg
-rw-r--r-- 1 fhem dialout 2,2K 19. Feb 2017  sani_water_hot.svg
-rw-r--r-- 1 fhem dialout 1,8K 19. Feb 2017  sani_water_tap.svg
[...]Lass man das oa- weg.

Code Auswählen Erweitern

data-icons='["sani_buffer_temp_all","sani_buffer_temp_all"]'
sani_heating_heatpump_buffer.svg und sani_heating_heatpump.svg liegen unter /opt/fhem/www/images/fhemSVG und könnten via fts- eingebunden werden.

In deiner index.html hast du auch

Code Auswählen Erweitern

    <link rel="stylesheet" href="lib/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="lib/fhemSVG.min.css" type="text/css" />
    <link rel="stylesheet" href="lib/openautomation.min.css" type="text/css" />eingebunden?

[stobor]

Die Stylesheets habe ich eingebunden:

Code Auswählen Erweitern

    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />

Die Dateien sind auch vorhanden - siehe Screenshot "Verzeichnis.jpg"

Trotzdem liefert

Code Auswählen Erweitern

        <div data-type="switch"
            data-device="Arduino_Pin24_WP_onOff"
            data-icons='["fts-sani_heating_heatpump","fts-sani_heating_heatpump"]'
            data-colors='["Green","Red"]'
            data-set-states='["off","on"]'
            data-states='["on","off"]'
            data-background-colors='["#2a2a2a", "#2a2a2a"]'
            class="display-topcenter tall">
        </div>
kein Icon in der Darstellung. Mit anderen Icons habe ich das Problem nicht - wie bspw.: data-icons='["oa-sani_buffer_temp_all","oa-sani_buffer_temp_all"]'.

Hat noch jemand eine Idee oder Hilfestellung?

[yersinia]

Das was du vor hast wird mit den Rahmenbedingungen nicht funktionieren. Meine Annahme scheint auch falsch zu sein weil du bindest nicht direkt eine Grafik ein sondern über CSS Klassen einen Schriftsatz (font-family) - und in diesem ist sani_heating_heatpump nicht definiert (siehe zB /opt/fhem/www/tablet/lib/openautomation.css).
Alternativ kannst du es mit dem Image Widget versuchen, aber dies ersetzt mWn keinen switch.

[stobor]

Im FHEM Wiki wird ja die Verwendung beschrieben:

Icons
FTUI bringt einige Icons-"Schriftarten" mit, die für die Darstellung genützt werden können. Diese werden automatisch beim Start des UI eingebunden, sobald ein entsprechendes Icon-Präfix im Code der Seite vorkommt.

Verfügbare Icon-Schriftarten sind:

Eingebaute Icons ftui-window und ftui-door. Präfix ftui-. Beispiel: data-icon="ftui-door"
Font-Awesome: Mehr als 500 Icons zur Auswahl. Präfix fa-. Beispiel: data-icon="fa-volume-up"
Material Icons: Mehr als 900 Icons zur Auswahl. Präfix mi-. Beispiel: data-icon="mi-local_gas_station"
FHEM und OpenAutomation Icons: Präfix fs- und oa-. Beispiel: data-icon="oa-secur_locked"
Weather-Icons: Präfix wi . Beispiel: data-icon="wi wi-day-rain-mix"

(https://wiki.fhem.de/wiki/FHEM_Tablet_UI#Icons)

Vom Prinzip funktioniert das auch, allerdings scheint es inzwischen viele neue Icons in den Bibliotheken zu geben, die ich nicht verwenden kann. Wie kann ich diese denn aktualisieren?

[Ulm32b]

[...]
Vom Prinzip funktioniert das auch, allerdings scheint es inzwischen viele neue Icons in den Bibliotheken zu geben, die ich nicht verwenden kann. Wie kann ich diese denn aktualisieren?

Ich glaube nicht, dass innerhalb von FTUI2 Ergänzungen in den Bibliotheken wie "Material Icons" ohne tiefere Eingriffe möglich sind. Seitens des Entwicklers wird an FTUI2 keine Hand mehr angelegt. Es gibt andererseits eine relativ komplizierte Methode, svg-Bilder für FTUI2 nutzbar zu machen: https://wiki.fhem.de/wiki/FHEM_Tablet_UI_FAQ#Wie_kann_ich_eigene_Icons_verwenden?

Wenn Du neu einsteigst, ist es wohl besser, auf FTUI3 zu setzen. Leider fehlt dort nach wie vor eine Dokumentation wie bei FTUI2.

[stobor]

Ich nutze derzeit schon FTUI2.
Meine Hoffnung war, dass die Icons irgendwie eingebunden werden, und man hier ,,nur" irgendwie eine Aktualisierung durchführen muss, das m Icon-Aktualisierungen zu bekommen.

[yersinia]

Vom Prinzip funktioniert das auch, allerdings scheint es inzwischen viele neue Icons in den Bibliotheken zu geben, die ich nicht verwenden kann. Wie kann ich diese denn aktualisieren?

In der Standardinstallation gehen nur jene Icons, die FTUI2 mitliefert. Du kannst dies manuell erweitern, wenn du analysierst wie die Strukturen zusammengesetzt werden.
Für fa hab ich das hier beschrieben.