Eigene Icons laden nicht ...

Begonnen von fremitus, 12 Februar 2017, 16:21:51

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

fremitus

12 Februar 2017, 16:21:51
Hallo zusammen,

meine eigen erstellte (IcoMoon) Radiosender Icons laden einfach nicht. Ich habe nach Anleitung installiert und auch die diversen Hinweise hier im Forum berücksichtigt. Hier mein aktueller Code der Style.css (Auszug). Entsprechend den Hinweisen habe ich die Buchstaben und das Fragezeichen gelöscht. Im mitgelieferten Demo sind die SVG's gut abgebildet. Die Style.css wird korrekt geladen, so sagt es zumindest die Webkonsole:

Code Auswählen
@font-face {
  font-family: 'radio';
  src:  url('fonts/radio.eot4o');
  src:  url('fonts/radio.eot4o#iefix') format('embedded-opentype'),
    url('fonts/radio.ttf4o') format('truetype'),
    url('fonts/radio.woff4o') format('woff'),
    url('fonts/radio.svg4o#radio') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'radio' !important;
  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;
}

.font1-wdr2_logo_claim .path1:before {
  content: "\e957";
  color: rgb(225, 7, 42);
}

Parallel schmeisst meine FHEM Installation immer eine Fehlermeldung:
Code Auswählen
Firefox kann keine Verbindung zu dem Server unter ws://192.168.178.62:8083/fhem/?XHR=1&inform=type=status;filter=.*;fmt=JSON aufbauen.

Keine Ahnung ob das miteinander zusammenhängt....

Hier mein Auszug aus der index.html:

Code Auswählen
<body>
    <div class="gridster">
      <ul>
<li data-sizex="1" data-sizey="1" data-row="1" data-col="1">
<div class="cell">
         <div data-type="switch" data-icon="font1-wdr2_logo_claim" data-size="100%"  class="top-space" data-device="SRadio" data-set-on='["PLAY WDR2"]'></div>
         </div>       
</li>

Wer kann helfen,

gruss

Peer



ujaudio

#1
12 Februar 2017, 17:03:18 Letzte Bearbeitung: 12 Februar 2017, 17:17:12 von ujaudio
Deine Fehlermeldung
ZitatFirefox kann keine Verbindung zu dem Server unter ws://192.168.178.62:8083/fhem/?XHR=1&inform=type=status;filter=.*;fmt=JSON aufbauen.
hat wohl nichts damit zu tun, lies mal im Thread zu FTUI 2.6 nach.

Mit den Icons hab ich auch so meine Probleme, auch bei mir werden in der Demo von IcoMoon die Fonts angezeigt und ansonsten sind sie nicht nutzbar (mal abgesehen davon, dass ich viele SVGs gar nicht zu Fonts hinbekomme, aber das ist eine andere Geschichte).

Ich habe z.B. auch eine Fehlermeldung
Code Auswählen
downloadable font: rejected by sanitizer (font-family: "j2" style:normal weight:normal stretch:normal src index:1) source: http://192.168.178.54:8083/fhem/ftui/jar/j2/fonts/j2.tt
es wird aber alles richtig angezeigt.
Einen lieben Gruß
Jürgen

fremitus

#2
12 Februar 2017, 17:53:05
Hallo Jürgen,

danke für die Antwort, ich dachte mir schon, dass meine Servermeldungen nichts mit den Icons zu tun haben. Ich bin etwas weiter....

Meine Icons sind Multicolor Icons, das sagt icomoon und verweisst selber daraufhin, dass das dafür mehrer Codes erzeugt werden...daher wohl auch das Paththema. Ich habe mal die path Infos gelöscht und sehe nun eine von drei "Grafiken"...siehe hier:

Code Auswählen
.font1-WDR_5_logo [u].path7[/u]:before {
  content: "\e956";
  margin-left: -2.5224609375em;
  color: rgb(0, 94, 162);
}
.font1-wdr2_logo_claim:before {
  content: "\e957";
  color: rgb(225, 7, 42);
}
.font1-wdr2_logo_claim:before {
  content: "\e958";
  margin-left: -2.267578125em;
  color: rgb(255, 255, 255);
}
.font1-wdr2_logo_claim:before {
  content: "\e959";
  margin-left: -2.267578125em;
  color: rgb(23, 55, 92);

Oben bei WDR5 ist das Original zu sehen, weiter unten die Angaben ohne Path. Als Ergebnis sehe ich nun "WDR", die anderen Teile fehlen. Und by the way, ich habe oben die Infos zu den urls weiter oben doch im Original belassen:
Code Auswählen
@font-face {
  font-family: 'radio';
  src:  url('fonts/radio.eot?p2y0nd');
  src:  url('fonts/radio.eot?p2y0nd#iefix') format('embedded-opentype'),
    url('fonts/radio.ttf?p2y0nd') format('truetype'),
    url('fonts/radio.woff?p2y0nd') format('woff'),
    url('fonts/radio.svg?p2y0nd#radio') format('svg');
  font-weight: normal;
  font-style: normal;
}

Sie verweisen ja auf lokale Pfade. Ich probiere gleich mal aus, einfarbige Logos zu erzeugen, mal sehen ob das beser klappt.

Peer

fremitus

#3
12 Februar 2017, 23:30:42
Wie auch schon andere festgestellt haben, sind Multicolor SVG nicht kompatibel mit Table UI. Liegt wohl an den mehrfachen Pfaden pro Grafik bei Farbeinsatz. Vielleicht kann ja mal ein Entwickler schauen, was da zu tun ist....ich setze das erstmal mit Schwarz / Weiss um...

Spook112

#4
16 Februar 2017, 20:17:33 Letzte Bearbeitung: 16 Februar 2017, 20:21:36 von Spook112
Hi, ich muss da auch noch mal nachfragen.
Aus einem in fhem vorhandenen und angezeigten Icon habe ich per Inkscape eine abgewandelte Version erzeugt.
Keine zusätzlichen Farben - nichts. Einfach nur die Linien angepasst und als Standard SVG abgespeichert.
Dann im Verzeichnis
Zitat/opt/fhem/www/images/fhemSVG
abgelegt.
Danach, weil so erst einmal nichts angezeigt wurde "sicherheitshalber" noch mal ein
Zitatrereadcfg
gemacht.
Die Icons werden immer noch nicht angezeigt oder verwendet.

In
Zitat/opt/fhem/www/images/openautomation
hab ich sie auch noch abgelegt - ebenfalls keine Erfolg :-(

Hat jemand einen Tip was fehlt oder anders gemacht werden muss?
Raspberry PI / RaZberry ZWAVE Modul / RFXTRX433E / 13 Fibaro FGS-222-EN-A-v1.00 / 17 VISION ZD2102-5 / 10 Somfy RTS / 4 Greenwave GWRENS310-F / Gardena Sileno City / 3 Gardena Gartensteckdosen / 2 devolo Home Control Funkschalter / 8 FIBARO System FGSD002 Smoke Sensoren

Spook112

#5
17 Februar 2017, 20:28:21
Lösung für mein Problem gefunden:

Neue Icons müssen eben noch mittels des Befehls

Code Auswählen
set WEB rereadicons

bekannt gemacht werden.
Raspberry PI / RaZberry ZWAVE Modul / RFXTRX433E / 13 Fibaro FGS-222-EN-A-v1.00 / 17 VISION ZD2102-5 / 10 Somfy RTS / 4 Greenwave GWRENS310-F / Gardena Sileno City / 3 Gardena Gartensteckdosen / 2 devolo Home Control Funkschalter / 8 FIBARO System FGSD002 Smoke Sensoren

fstefan1960

#6
21 Februar 2017, 22:35:25
Selbst kreierte SVGs bekomme ich trotz all dieser Schritte nicht in TabletUI unter data-icon="..." angezeigt. Leider konnte ich dazu auch nirgends etwas dokumentiert finden.
FHEM auf PC: CUL868, CUL 443, HM_LAN, JeeLink
FHEM auf Raspi: CUL868
div. LaCrosse Temp/Hum-Sensoren, HM-Heizkörperventile, Schaltaktoren, etc.

Vize

#8
22 Februar 2017, 20:16:45
Ahoi,

wie sieht es denn aus, wenn du im oben genannten Beispiel:

@font-face {
  font-family: 'radio';
  src:  url('fonts/radio.eot4o');
  src:  url('fonts/radio.eot4o#iefix') format('embedded-opentype'),
    url('fonts/radio.ttf4o') format('truetype'),
    url('fonts/radio.woff4o') format('woff'),
    url('fonts/radio.svg4o#radio') format('svg');
  font-weight: normal;
  font-style: normal;
}

die rot markierten Sachen rausnimmst?

In einer style.css meiner ergänzten, mit IcoMoon erzeugten Icons, sieht der Teil z.B. so aus:
Code Auswählen
@font-face {
    font-family: 'brankic';
    src:    url('fonts/brankic.eot');
    src:    url('fonts/brankic.eot') format('embedded-opentype'),
        url('fonts/brankic.ttf') format('truetype'),
        url('fonts/brankic.woff') format('woff'),
        url('fonts/brankic.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

Gruß
Andreas
Drucken
Nach oben Seiten1
Benutzer-Aktionen