Neues Icon wird in in FTUI nicht angezeigt

[Uef]

Hallo zusammen,

nach einigen Stunden Rumprobieren benötige doch mal Hilfe:
ich möchte für die Anzeige einiger Parameter meiner Heizung ein neues Icon im Format SVG hinzufügen.
Was ich jetzt nicht schaffe, ist, dass dieses Icon in FTUI angezeigt wird.

Zuerst dachte ich, es liegt am Icon selbst (zu groß, falsches Format etc.) oder dass es im falschen Pfad liegt.
Nach vielen Tests habe ich dann einfach mal ein vorhandenes Icon mit einem neuen Dateinamen dupliziert und hatte damit das gleiche Problem: es wird nicht angezeigt, das Orignal aber schon.

Daher meine Frage: muss ich ein neues Icon bzw. eine neue Datei irgendwo "registrieren" oder bekannt machen, davor ich das in FTUI  verwenden kann ?

Getestet habe ich das am Schluß mit dem Icon ampel_aus.svg im Pfad /opt/fhem/www/images/fhemSVG. Die Kopie heißt ampel_aus_2.svg (die Rechte auf die Datei sind analog zum Original gesetzt) und liegt natürlich im gleichen Verzeichnis.
Auf der Seite, wo ich für ein Device ein Icon bzw.  aussuchen kann, wird das neue Icon angezeigt: zweimal das gleiche Icon nebeneinander, aber mit unterschiedlichem Namen.

In FTUI tut sich dagegen nichts: wenn ich "fs-ampel_aus" verwende, erscheint das Icon, bei "fs-ampel_aus_2" nicht.

Hier der Auszug aus der index.html (der Code macht so keinen Sinn, aber da ging es mir am Ende gar nicht mehr drum ....)

Code Auswählen Erweitern

      <li data-row="3" data-col="3" data-sizex="1" data-sizey="1"> <!-- Heizungswerte - Widget -->
                <header>Heizung</header>
                <div class="sheet">
   <div class="row">
                        <div class="centered">
<div data-type="symbol"
data-device="AWB_Heizung"
data-get="Brenner"
data-states='["off","on","aus"]'
data-icons='["fs-ampel_aus_2","fs-ampel_aus_2","fs-ampel_aus_2"]'
data-colors='["Green","Crimson","Crimson"]'>
</div>
    </div>
</div>
                </div>
            </li>


Forum und Wiki habe ich (meiner Meinung nach) ausführlich durchsucht, aber speziell zu Icons gibt es auch gar nicht so viel.
Ich habe es auch mit den Tipps aus https://forum.fhem.de/index.php?topic=85472.0 probiert, aber ebenfalls ohne Erfolg.

Kann mir jemand auf die Sprünge helfen ?

Uwe

[yersinia]

Es gibt eine Übersicht über die verfügbaren Icons:

Code Auswählen Erweitern

http://[FHEM-IP]:8085/fhem/ftui/icons_table.html
dort müsstest du auch das Icon fs-ampel_aus finden - und den Hinweis auf die fhemSVG.css. Hast du die Eingebunden?

Code Auswählen Erweitern

<link rel="stylesheet" href="lib/fhemSVG.min.css" type="text/css" />
Ach, wenn man nur genauer lesen würde. 

Ja, ein SVG musst du entsprechend 'registrieren' - entweder analog zum fhemSVG.css als eine Font:

Code Auswählen Erweitern

@font-face {
font-family: 'fhemSVG';
        src:url('../fonts/fhemSVG.eot');
        src:url('../fonts/fhemSVG.eot') format('embedded-opentype'),
                url('../fonts/fhemSVG.woff') format('woff'),
                url('../fonts/fhemSVG.ttf') format('truetype'),
                url('../fonts/fhemSVG.svg') format('svg');
font-weight: normal;
font-style: normal;
}
[...]
.fs-ampel_aus:before {
  content: "\e905";
}
Oder direkt - da kann ich dir nicht helfen (kenn mich mit SVGs nicht so aus), aber vielleicht das www, zum Beginn:
https://css-tricks.com/using-svg/
https://www.sitepoint.com/real-world-use-of-css-with-svg/

Code Auswählen Erweitern

.myelement {
  background-image: url('mybackground.svg');
}

Der verlinkte Post bezieht sich mMn 'nur' auf PNGs, nicht auf SVGs.
Du könntest aber ein PNG erstellen und dieses dann wie im Post gezeigt via custom.css einbinden.

[Uef]

Hallo yersinia,

vielen Dank, das hilft mir vielleicht schon weiter (ich probiere es später mal aus).
Die weiterführenden Links muss ich mir dann in Ruhe mal anschauen.

Die fhemSVG.min.css hatte ich nicht eingebunden, das war auch in den FTUI-Beispielen nicht. Trotzdem hat es ja mit dem "fs-ampel_aus" funktioniert.
Ich würde also annehmen, dass die schon standardmässig angezogen wird.

Neben der fhemSVG.min.css gibt es ja auch die fhemSVG.css (ohne min); muss ich beide anpassen und wie hängen die zusammen ? Baut die eine auf der anderen auf ?
(meine HTML sind leider extrem rudimentär).

Eine Frage zum Schluss: ist die Vorgehensweise für SVGs und PNGs unterschiedlich ? (vielleicht habe ich es mit PNGs einfacher  )

[yersinia]

Nee, ich denke, du musst nichts in bestehenden css-Dateien anpassen. Wäre auch hinderlich, da es mit dem nächsten Update überschrieben werden würde.

Solange du kein Font-set definieren willst, reicht es vlt schon, wenn du eine custom css einbindest und eine eigene css class mit deinem SVG definierst:

Code Auswählen Erweitern

.meinSVGicon {
  background-image: url('pfad/zum/image.svg');
  background-repeat: no-repeat;
}
speicherst du unter /opt/fhem/www/tablet/css/ftui_custom.css ab.
Dort kannst du auch individueller auf Hintergrundfarben usw eingehen.

Das Icon sollte irgendwo liegen, wo FTUI zugreifen kann. Entweder direkt unter /opt/fhem/www/tablet oder irgendeinen anderen Ordner. Deinem Beispiel oben folgend müsste das im Ordner /opt/fhem/www/images/fhemSVG liegen:

Code Auswählen Erweitern

.uef-ampel_aus {
  background-image: url('images/fhemSVG/ampel_aus_2.svg');
  background-repeat: no-repeat;
}

Einbinden in FTUI in der index.html (deine Startseite) via

Code Auswählen Erweitern

<link rel="stylesheet" href="css/ftui_custom.css" type="text/css" />

Dein Widget code würde dann -besipielhaft- so aussehen:

Code Auswählen Erweitern

<div data-type="symbol"
data-device="AWB_Heizung"
data-get="Brenner"
data-states='["off","on","aus"]'
data-icons='["uef-ampel_aus","fs-ampel_aus","uef-ampel_aus"]'
data-colors='["Green","Crimson","Crimson"]'>
</div>

Eine Frage zum Schluss: ist die Vorgehensweise für SVGs und PNGs unterschiedlich ? (vielleicht habe ich es mit PNGs einfacher  )

Jaein. Während PNG eine (statische) Grafik ist, ist SVG eine Vektorgrafik, die man manipulieren kann mittels CSS zB. Für vordefinierte Icons macht es hier wahrscheinlich keinen Unterschied, imho.

[Uef]

Perfekt, vielen vielen Dank !!

Dann sehe ich ja wieder Licht am Ende des Tunnels