Anfängerfragen zu Icons

Begonnen von Octopus180, 22 April 2016, 08:14:57

Vorheriges Thema - Nächstes Thema

Octopus180

Moin Moin

ich beschäftige mich seit ein paar Wochen mit FHEM und Tablet UI. Ich habe schon einige Sachen die für wichtig sind umgesetzt und durch lesen im Foren und Doku´s einiges dazu gelernt. Zurzeit beschäftige ich mich damit für mich ein Tablet UI aufzubauen , damit in der Küche ein Tablet an die Wand kann zum bedienen einiger Geräte.
Jetzt komm ich zu meinen Problem , ich möchte gerne den AB meiner FritzBox über Tablet UI ein/aus schalten. Das habe ich auch schon soweit hin bekommen das die Befehle ausgeführt werden. Natürlich mit man das mit den richtigen Icons versehen. Ich bin beim durchstöbern im Internet auf einer Seite gestossen , der auch seinen AB über Tablet UI schaltet. Er benutzt Icons die mir sehr gefallen.
Ich habe rausgefunden das er Icons mit der Bezeichnung : data-icon="ma-voicemail" benutzt. Ich suche schon seit einer Woche wie ich Icons mit dieser Bezeichnung nutzen kann.

Das gleiche Problem hatte ich auch mit oa-Icons und habe dann heraus gefunden das die Zeile : <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />  mit in die Index.html muss.

Doch leider finde ich nichts über die ma-Icons.

Ich hätte noch eine zweite Frage , gibt es eigentlich irgendwo eine Auflistung welche Icons es gibt und wie die Bezeichnung ist.

mfg

Peter

jnewton957

Hallo,

die ma-xxx icons sind die von Roman und dort der Kategorie: Material.

Du musst auch hier: <link rel="stylesheet" href="/fhem/tablet/fonts/roman/style.css" /> in die index.html oder deiner Seite übernehmen.

Dann brauchst du natürlich noch die style.css

Die gesamte super Umsetzung von Roman findest du auf: http://ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-tablet

Dort eben die zip Datei downloaden, entpacken und die style.css bei dir unter /fhem/tablet/fonts/roman/ abspeichern.

Ein Verzeichnis aller icons kenne ich nicht. Die meiiten icons findest du auf den Seiten von font-awesome. Dort dann bei Beispiele und du hast 500 icons mit Namen. Fangen alle mit fa- an

Viel Spass weiterhin.

Jörg
FHEM6.2 auf Pi5
V 1.66 nanoCUL 433 (IT)
V 1.66 nanoCUL868 (HM)
sqlite3 LogDb
ELRO AB440, DECT200,  TFA30.3125, esp8266, HM, TabletUI, IR-Schreiblesekopf (Udo),tibber Pulse, Kostal Pico, cfos Wallbox, Modbus TCP

Octopus180

Erstmal danke für deine Antwort. Ich werde es mir mal anschauen und schauen ob ich umgesetzt bekomme.

Gruß

Peter

roman1528

Jap richtig..

Leider kann ich dir auf deine Mail nicht antworten, weil die liebe Quälekomm meine Adresse in Ihren Mail-Servern gesperrt hat. Der Anschiss ist schon raus^^

Mail:
Zitat
Moin.

Die "ma" Icons ist ein Custom-Icon-Font. Dazu steht auch was im FHEM-Wiki: FTUI Constum-Fonts ... oder so ähnlich.
Im Anhang findest du eine .ZIP-Datei. Den darin befindlichen Ordner in /tablet/fonts/ entpacken und in die index.html (genau wie bei oa-*) einfügen.

<link rel="stylesheet" href="fonts/material/style.css" />

Eine Demo findest du dort auch: /material/demo.html in deinem Browser öffnen.


Eine Demo der anderen Symbole (fontawesome, fhem, openautomation) gibt es auch. Da mumst du leider mal im Forum suchen. Es gibt ein Script welches die Icon-Fonts ausliest und in eine Demo-Seite verpackt. Bzw. irgendwer hat diese erstellte Demoseite irgnedwo gepostet. Viel  Erfolg. Für die FontAwesome-Icons kannst du aber auch auf http://fortawesome.github.io/Font-Awesome/icons/ nachschauen... die 4.6 Icons sind noch nicht inkludiert! Vor den dort stehenden Namen einfach ein "fa-" hängen^^

Grüße^^

Nützliche links:
http://www.fhemwiki.de/wiki/FHEM_Tablet_UI#Icon-Konfiguration
http://www.fhemwiki.de/wiki/FHEM_Tablet_UI/FAQ#Wie_kann_ich_eigene_Icons_verwenden.3F
i3-10305T 4x3GHz;8GB RAM;250GB & 1TB NVMe:
FHEM 6.2;FTUI;8" Tablet's+Fully;NsPanelPro;HUE;ESPRGBWW;HM(CCU3);Duofern; ASC;MQTT(Tasmota);netatmo;SONOS;eBus;DbLog;XiaomiDevice;NUT;ModbusAttr

RPi3+: FHEM 6.2;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.2;DIY Relais-Board;I²C;GPIO;RFID;Photovoltaik

Octopus180

Hallo Jörg und Roman , nachdem ihr mir erklärt habt wo ich suchen , habe ich die Dateien in mein System eingebunden und so verändert das jetzt alles funktioniert. Vielen Dank für eure Hilfe

Gruß

Peter