(ERLEDIGT) Strommast Symbol gesucht...

misux · 31 Januar 2022, 08:00:16

Hallo!

Ich habe denke ich so ziemlich alle Symbole aus der icons_table.html durchgesehen... Leider habe ich kein Symbol für einen Strommasten gefunden...

Ich könnte so einen gut gebrauche für meine FTUI Seite. Im Moment nutze ich eine Alternative.

Hat einer solch ein schickes Symbol welches zu den anderen passt? Siehe Bild...

Achso, bräuchte es für meine PV Anlage....

yersinia · 31 Januar 2022, 08:22:07

Schau mal bei Material Design Icons, da gibt es einen transmission tower - Christoph Morrison hat beschrieben, wie man es in FHEM integrieren könnte.

misux · 01 Februar 2022, 08:07:20

Hmm

Ich habe mir dort das transmission-tower.svg runtergeladen per FTP in einen neuen Ordner "aMeine" kopiert. Dann den iconPath im WEB mit aMeine: ergäntzt und set rereadIcons gesetzt.

Leider bekomme ich kein Icon zu sehen in meinem FTUI wenn ich das Symbol nehme...

Hat einer eine Idee was ich falsch mache?

Bin nach der Anleitung gegangen: Bis auf den erstellen des icons denn das habe ich runtergeladen...

https://waschto.eu/2017/09/03/eigene-icons-fuer-fhem-erstellen/

yersinia · 01 Februar 2022, 08:11:44

Zitat von: misux am 01 Februar 2022, 08:07:20Ich habe mir dort das transmission-tower.svg runtergeladen per FTP in einen neuen Ordner "aMeine" kopiert. Dann den iconPath im WEB mit aMeine: ergäntzt und set rereadIcons gesetzt.

Klingt nach FHEMWEB und hat mit der Anzeige in FTUI nichts zu tun.

Zitat von: misux am 01 Februar 2022, 08:07:20Leider bekomme ich kein Icon zu sehen in meinem FTUI wenn ich das Symbol nehme...

Welche FTUI Version nutzt du - 2.x oder 3?
Zeig mal, wie du das icon in FTUI einbindest.

misux · 01 Februar 2022, 08:24:27

Ouh, dachte das das bei beiden geht.. Es ist FTUI2

Code Auswählen

<div class="vbox">
<div class="transmission-tower tall bold" style="color:#00FF00"></div>
<div data-type="label" data-device="Plenticore" data-get="NetzBezug" class="top-space bold big black"></div>
</div>

So hat es bis jetzt immer mit den standard icons funktioniert... Ist mein erstes manuell eingefügtes...

yersinia · 01 Februar 2022, 08:43:22

Code Auswählen

<div class="transmission-tower tall bold" style="color:#00FF00"></div>
Das funktioniert hier so nicht. Um dies so nutzen zu können benötigst du noch die fonts definition um aus dem Zeichensatz den richtigen SVG-Teil auszuwählen.

Dies wäre aber zu komplex. Ich würde es eher mal über FTUI Widget Image versuchen.
Oder über style und dann das background-image direkt laden.

Wzut · 01 Februar 2022, 09:57:47

Ich brauchte vor einger Zeit auch einen Mast als svg für das 76_SolarForcast Modul, vllt hilft der ja weiter :

Code Auswählen


<?xml version="1.0" ?>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g fill="#000000">
<path d="M15.3,2H8.7L2,6.46V10H4V8H8v2.79l-4,9V22H6V20.59l6-3.27,6,3.27V22h2V19.79l-4-9V8h4v2h2V6.46ZM14,4V6H10V4ZM6.3,6,8,4.87V6Zm8,6L15,13.42,12,15,9,13.42,9.65,12ZM7.11,17.71,8.2,15.25l1.71.93Zm8.68-2.46,1.09,2.46-2.8-1.53ZM14,10H10V8h4Zm2-5.13L17.7,6H16Z"/>
</g>
</svg>

misux · 01 Februar 2022, 13:47:27

Zitat von: Wzut am 01 Februar 2022, 09:57:47
Ich brauchte vor einger Zeit auch einen Mast als svg für das 76_SolarForcast Modul, vllt hilft der ja weiter :
Code Auswählen Erweitern
<?xml version="1.0" ?> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <g fill="#000000"> <path d="M15.3,2H8.7L2,6.46V10H4V8H8v2.79l-4,9V22H6V20.59l6-3.27,6,3.27V22h2V19.79l-4-9V8h4v2h2V6.46ZM14,4V6H10V4ZM6.3,6,8,4.87V6Zm8,6L15,13.42,12,15,9,13.42,9.65,12ZM7.11,17.71,8.2,15.25l1.71.93Zm8.68-2.46,1.09,2.46-2.8-1.53ZM14,10H10V8h4Zm2-5.13L17.7,6H16Z"/> </g> </svg>

Habe das mal eben getestet... funktioniert soweit...
Frage mich nur wie ich die Höhe und breite so anpasse das es auf dem Handy und PC gleichgroß ist... Auf dem PC habe ich mit 15% höhe und breite es passend, auf dem handy ist es dann aber viiiel kleiner...
Und eine Frage: warum hast du das svg mit angehangen? Habe es jetzt erstmal nicht verwendet weil ich auch ehrlich gesagt nicht weiß wohin damit...

Zitat von: yersinia am 01 Februar 2022, 08:43:22
Code Auswählen Erweitern
<div class="transmission-tower tall bold" style="color:#00FF00"></div>
Das funktioniert hier so nicht. Um dies so nutzen zu können benötigst du noch die fonts definition um aus dem Zeichensatz den richtigen SVG-Teil auszuwählen.

Dies wäre aber zu komplex. Ich würde es eher mal über FTUI Widget Image versuchen.
Oder über style und dann das background-image direkt laden.

werde dann nocoh das FTUI Widget Image austesten..

Wzut · 01 Februar 2022, 19:36:23

Zitat von: misux am 01 Februar 2022, 13:47:27
weil ich auch ehrlich gesagt nicht weiß wohin damit...

Code Auswählen

cp mast.svg /opt/fhem/www/images/fhemSVG
chown fhem.dialout /opt/fhem/www/images/fhemSVG/mast.svg

misux · 02 Februar 2022, 12:09:24

Zitat von: yersinia am 31 Januar 2022, 08:22:07
Schau mal bei Material Design Icons, da gibt es einen transmission tower - Christoph Morrison hat beschrieben, wie man es in FHEM integrieren könnte.

Habe auch zwischendurch die eigentlich einfachste variante getestet... Mein Problem ist allerdings das ich es nicht aus dem Internet holen will sondern aus fhem..
Mein Plan ging nicht auf... weiß jemand wo mein Fehler liegt? Oder geht das so nicht?

Habe mir das transmission-tower.png auch in diesem Pfad gespeichert...

Code Auswählen

<div data-type="image"
     data-url="/opt/fhem/www/images/AMeine/transmission-tower.png"
     data-size="10px"
     class="nocache"></div>

yersinia · 02 Februar 2022, 12:24:26

Du lieferst noch zu wenig Infos.
Ist das überhaupt ein .png?
Ist der Ordnername "AMeine" richtig? Oben schreibst du "aMeine".
Ist der Pfad korrekt?

Ansonsten müsste das funktionieren:

Code Auswählen

<div data-type="image"
     data-url="../images/AMeine/transmission-tower.png"
     data-size="10px"
     class="nocache"></div>

Die Pfad-Angabe ist relativ vom FTUI-Wurzelverzeichnis, welches /opt/fhem/www/tablet (o.ä.) sein müsste, aus zu sehen.

Alternativ kannst du dies versuchen

Code Auswählen

<div style="background-image: url('../images/AMeine/transmission-tower.png');  background-repeat: no-repeat; background-position: center; background-size: cover; height: 10px; width: 10px;"></div>

Die style-Angabe könntest du auch in eine eigene css-class gießen, wenn du eine ftui-custom.css datei hast

misux · 02 Februar 2022, 14:20:27

Zitat von: yersinia am 02 Februar 2022, 12:24:26
Du lieferst noch zu wenig Infos.
Ist das überhaupt ein .png?
Ist der Ordnername "AMeine" richtig? Oben schreibst du "aMeine".
Ist der Pfad korrekt?

Ansonsten müsste das funktionieren:
Code Auswählen Erweitern
<div data-type="image" data-url="../images/AMeine/transmission-tower.png" data-size="10px" class="nocache"></div>
Die Pfad-Angabe ist relativ vom FTUI-Wurzelverzeichnis, welches /opt/fhem/www/tablet (o.ä.) sein müsste, aus zu sehen.

Das ist es!

Vielen vielen Dank! War ja eigentlich nicht so schwer! Naja, ist immer so wenn man weiß was man tut...

.png War das Bild was ich mir dort: https://materialdesignicons.com/icon/transmission-tower geladen habe...