[Tablet UI] eigene Icons einbinden

Begonnen von Gunther, 08 November 2015, 23:36:40

Vorheriges Thema - Nächstes Thema

Gunther

Ich versuche eingene Icons (FB_Calllist) einzubinden. Leider klappt das noch nicht.

http://www.fhemwiki.de/wiki/FHEM_Tablet_UI/FAQ
Wie kann ich eigene Icons verwenden?

Ich habe Icons aus Illustrator in SVG gespeichert. Bei Icon Moon App hochgeladen und als Class-Prefix "GK" vergeben.
Ich habe hier die Dateien auf 64x64 eingestellt. Ist das korrekt (da in der css 32x32 steht)?
Nach dem Download weiß ich nicht, in welcher Datei ich im ZIP-File folgendes tun soll:

Im heruntergeladenen Zip-file aus der IcoMoon App muss die Zeile

line-height: 1;

auskommentiert oder gelöscht werden, da die Anzeige in den Buttons ansonsten "verschoben" wirkt.


Die Dateien des ZIP-Files habe ich hierhin entpackt:
/opt/fhem/www/tablet/eigenefonts/gk

In meinen html-Dateien habe ich folgendes ergänzt:
<link rel="stylesheet" href="/fhem/tablet/eigenefonts/gk/style.css">

Die Datei sieht so aus:
.icon {
display: inline-block;
width: 1em;
height: 1em;
fill: currentColor;
}

/* =======================================================================================
Example showing how to change the color/size of the icons:
.gkname {
font-size: 32px; // works because "width" & "height" were set using em units
color: red; // works for single-colored icons, because "fill" was set to "currentColor"
}
======================================================================================== */

.gkhilkeundgunther {
width: 1.095703125em;
}
#gkhilkeundgunther .path1, #gkhilkeundgunther .path3, #gkhilkeundgunther .path4, #gkhilkeundgunther .path6 {
fill: #8b075e;
}
#gkhilkeundgunther .path2, #gkhilkeundgunther .path5 {
fill: #fff;
}

#gkgkphoto .path1, #gkgkphoto .path2 {
fill: #000;
}
#gkgkphoto .path3 {
fill: #fff;
}


ich habe nun so in meiner html eingebunden. Beides funktioniert nicht:
<div data-type="symbol" data-device="Fritzboxanrufeliste" data-get="1-internal" data-get-on='["Sipgate","69182323","Privat","Oculus Concept","Fotografie","Fax","23232323"]' data-icons='["","","gkhilkeundgunther","gkoculusconcept","gkgkphoto","",""]' data-on-colors='["","","",blue","red","",""]'></div>

<div data-type="symbol" data-device="Fritzboxanrufeliste" data-get="1-internal" data-get-on='["Sipgate","69182323","Privat","Oculus Concept","Fotografie","Fax","23232323"]' data-icons='["","","gk-hilkeundgunther","gk-oculusconcept","gk-gkphoto","",""]' data-on-colors='["","","",blue","red","",""]'></div>
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

setstate

Hallo Gunther,
mit anderen Icon funktioniert es aber schon mal? Das das nicht "reinpfuscht" ...
Am besten, du gibst mal deine Font Files, dann probiere ich es bei mir mal aus.

Gunther

#2
ein von drei Icons gehen testweise mal als Homebutton eingehängt.

Hänge das mal an.

Edit: nur "gk-oculusconcept" funktioniert

Edit 2: Mir ist aufgefallen, dass es für die beiden nicht funktionierenden Icons path-Anweisungen gibt. Für das funktionierende Icon "gk-oculusconcept" nicht:

@font-face {
font-family: 'GK';
src:url('fonts/GK.eot?nq99fx');
src:url('fonts/GK.eot?nq99fx#iefix') format('embedded-opentype'),
url('fonts/GK.ttf?nq99fx') format('truetype'),
url('fonts/GK.woff?nq99fx') format('woff'),
url('fonts/GK.svg?nq99fx#GK') format('svg');
font-weight: normal;
font-style: normal;
}

[class^="gk-"], [class*=" gk-"] {
font-family: 'GK';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.gk-hilkeundgunther .path1:before {
content: "\e900";
color: rgb(139, 7, 94);
}
.gk-hilkeundgunther .path2:before {
content: "\e901";
margin-left: -1.095703125em;
color: rgb(255, 255, 255);
}
.gk-hilkeundgunther .path3:before {
content: "\e902";
margin-left: -1.095703125em;
color: rgb(139, 7, 94);
}
.gk-hilkeundgunther .path4:before {
content: "\e903";
margin-left: -1.095703125em;
color: rgb(139, 7, 94);
}
.gk-hilkeundgunther .path5:before {
content: "\e904";
margin-left: -1.095703125em;
color: rgb(255, 255, 255);
}
.gk-hilkeundgunther .path6:before {
content: "\e905";
margin-left: -1.095703125em;
color: rgb(139, 7, 94);
}
.gk-oculusconcept:before {
content: "\e906";
}
.gk-gkphoto .path1:before {
content: "\e907";
color: rgb(0, 0, 0);
}
.gk-gkphoto .path2:before {
content: "\e908";
margin-left: -1em;
color: rgb(0, 0, 0);
}
.gk-gkphoto .path3:before {
content: "\e909";
margin-left: -1em;
color: rgb(255, 255, 255);
}



Edit 3: Habe hier etwas gefunden, dass es an unterschiedlichen Farben liegen kann:
https://groups.google.com/forum/#!topic/icomoon/CG44M4_O5fo
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Gunther

Habe nun einfarbig gespeichert und es geht.
Man kann anscheinend auch bei IcoMoon App weitere Farben löschen.
Wichtig: den Code checken. Wenn da kein "pathx:before" vorkommen.
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

SirMarco

Servus in die Runde

versuche mich gerade daran Icons einzubinden, leider erfolglos.
Bin direkt nach dem WIKI vorgegangen, alles kopiert und eingebunden.

Nur der content wird angezeigt:
.ma-twitter:before {
    content: "\e900";
}
(siehe anhang)

Füge ich die Quick-Usage css in die index.html ein, funktioniert es.

Im Browser kommt folgende Meldung:

Failed to decode downloaded font: http://192.168.2.16:8083/fhem/tablet/css/fonts/wetter.ttf?qztm8f
index.html#menu.html:1 OTS parsing error: invalid version tag
index.html#menu.html:1 Failed to decode downloaded font: http://192.168.2.16:8083/fhem/tablet/css/fonts/wetter.woff?qztm8f
index.html#menu.html:1 OTS parsing error: invalid version tag


Danke für Support

Gruss
SirMarco

roman1528

In der style.css oben wo die font-datei-namen stehen... das fragezeichen hinter der dateiendung und die dahinter angehängten buchstaben entfernen.

ein paar zeilen tiefer muss line-height entfernt sein
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

SirMarco

Hervorragende Leistung von Dir  :)

Das mit den Buchstaben entfernen habe ich nicht gelesen

ujaudio

Danke für diesen Beitrag, nachdem ich auch jeweils die Fragezeichen und die nachfolgenden Buchstaben entfernt habe, funktioniert es einwandfrei! Sollte man das noch im Wiki ergänzen / verdeutlichen?
Einen lieben Gruß
Jürgen

ujaudio

Grundsätzlich funktioniert das mit den eigenen Icons prima. Aber: Manche Icons will mir IconMoonApp einfach nicht erstellen. Das mit den mehreren Farben habe ich gelesen und bereits in Gimp die Dateien auf reines schwarzweiß eingestellt. bevor ich die Icons mit Inkscape in svg-Daten umwandle. Woran könnte es denn noch liegen? Ist das Zwischenformat png das Problem?
Einen lieben Gruß
Jürgen