Hallo,
habe versucht ein eigenes Icon ins Tablet Ui zu integrieren.
(Nach den Anweisungen im Wiki)
Klappt leider nicht.
Habe das Icon mit Inkscape erstellt ( als .svg, mit fill = 60%grau, stroke = ohne Farbe)
(ist angehängt)
Danach mit IcoMoon den Font erstellt und downgeloadet.
Name= ECMICON_fill, ClassPrefix= my_
dann Style.css editiert:
- die 5 Fragezeichen und die Ziffern dahinter entfernt.
von so:
@font-face {
font-family: 'ECMICON_fill';
src: url('fonts/ECMICON_fill.eot?gxxlbc');
src: url('fonts/ECMICON_fill.eot?gxxlbc#iefix') format('embedded-opentype'),
url('fonts/ECMICON_fill.ttf?gxxlbc') format('truetype'),
url('fonts/ECMICON_fill.woff?gxxlbc') format('woff'),
url('fonts/ECMICON_fill.svg?gxxlbc#ECMICON_fill') format('svg');
font-weight: normal;
font-style: normal;
}
auf so:
@font-face {
font-family: 'ECMICON_fill';
src: url('fonts/ECMICON_fill.eot');
src: url('fonts/ECMICON_fill.eot') format('embedded-opentype'),
url('fonts/ECMICON_fill.ttf') format('truetype'),
url('fonts/ECMICON_fill.woff') format('woff'),
url('fonts/ECMICON_fill.svg') format('svg');
font-weight: normal;
font-style: normal;
}
.icon{ auszutauschen ist nicht nötig, da nicht vorhanden,
sondern bereits das hier: [class^="my_"], [class*=" my_"] {
die Zeile auskommentiert: /* line-height: 1; */
Danach den Inhalt des ZipFiles nach
/opt/fhem/www/tablet/myfonts kopiert.
In den <head> der Page dann noch <link rel="stylesheet" href="myfonts/style.css"> eingefügt.
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* main page
*
load this page via widget pagebutton
-->
<link rel="stylesheet" href="myfonts/style.css">
</head>
<body>
Dann den Namen des funktionierenden Icons durch den meines eigenen ersetzt und die html Datei hochgeladen.
<div data-type="switch"
data-device="FBDECT_Funksteckdose_ECM"
data-set-on="on"
data-set-off="off"
data-states='["off","on"]'
data-icons='["my_ECMICON_fill","my_ECMICON_fill"]'
data-background-icon=""
data-background-colors=""
data-colors='["red","green"]'
class="normal top-space">
</div>
Die Stelle, an der das Icon sein sollte, ist aktiv, das Icon jedoch nicht zu sehen.
Muss der fill eine bestimmte Farbe haben?
Ich sag schon mal danke!