- √ - door_locked.png Icon fehlt

[cdeschryver]

Hallo zusammen,

ich bin neu hier im Forum und habe nach wenigen Stunden Basteln bereits meinen Raspberry Pi mit smarthome.pi und SmartVisu am Laufen - an dieser Stelle mal allen Beteiligten herzlichen Dank für eure Implementierungen, Tests und die Doku! Damit klappt es auch mit meinen noch recht überschaubaren Python-Kenntnissen hervorragend.

Auf ein kleines Problem bin ich dann beim Zusammenbauen der Visu dann doch gestoßen: die Icons für abgeschlossene Türen liegen jeweils nur als .svg vor, die .png Versionen fehlen im /ws und /sw Ordner. Soweit ich sehe sind alle anderen da. Ich würde zwar lieber mit .svg arbeiten, leider fehlt mir noch der Durchblick wie ich das mit basic.symbol + Highlighting hinbekomme... Vielleicht habt ihr einen Tipp?

Danke schonmal, viele Grüße und schönen Abend noch
Chris

[Apollo]

Ja. Das ist bewusst so.

Die SVGs würden in EINER "transparenten" Version reichen, um sie dann mit css einzufärben, d. h. SVGs in jeder Farbe anzulegen ist genau das was man nicht will.

Gruss

[2ndsky]

Ich glaub ihm fehlen die farbigen PNGs und wie er die SVGs einfärbt weiß er nicht.

[cdeschryver]

Hallo Apollo,

danke für die Antwort. Leuchtet mir ein dass man die SVGs nur in einer Variante haben will. 2ndsky hat recht: es ist klar wie ich die SVGs einfärbe wenn ich sie in einem <img> Tag einsetze. Allerdings weiß ich nicht wie ich sie farbig bekomme wenn ich sie innerhalb von Widgets wie basic.switch oder basic.symbol verwende, da dort ja ein Pfad zur Bilddatei übergeben wird. Wie gebe ich da noch eine CSS Klasse an oder ist die vordefiniert?

Für ein kleines Beispiel wäre ich sehr dankbar, könnte man bestimmt auch in die Doku mit aufnehmen.

Viele Grüße
Chris

[integrale]

Ich hänge mich da mal dran:

Ich hätte gerne das "fts_door_locked.svg" auch in orange (also für aktiv).
Kann mir jemand erklären wie das funktioniert?

Vielen Dank im Voraus!

VG Ralf

[Sipple]

Viele viele bunte Icons

Servus

Ich kram den wieder vor, weil mir da auch einige gefehlt haben.
Ich wollte eigentlich überall nur noch svg anstatt png verwenden, aber es scheint tatsächlich so, dass svg's in zumindest einigen Widgets nicht so ohne weiteres funktionieren. Wenn doch bzw. wie man die Icons dann in einer beliebigen Farbe in den Widgets verwendet, habe ich weder in der Dokumentation noch sonstwo gefunden.
Außerdem, so wie ich das sehe, werden seit einiger Zeit beim Update neue Icons nur noch als svg's in den Icon Ordnern hinzugefügt (was in Zukunft auch Sinn macht). Dort nur in sw und ws.

Keine Kritik, nur eine Feststellung.

Ich habe mir mit Hilfe meines Kumpels schnell zwei Einzeiler gezimmert um mir svg's in jeder beliebigen Farbe und daraus dann die passenden 128*128px png's zu erzeugen. Einzeln oder als Batch.

Als Workaround für die, die es brauchen können:

Zuerst braucht man folgendes Paket:

apt-get install imagemagick

Ich gehe von den schwarzen svg's in /var/www/smartvisu/icons/sw/ aus.

Danach auf dem RPi (ungetestet) oder eben der Linux Maschine mit eurer smartVISU in dieses Verzeichnis wechseln. Dort dann folgendes ausführen:

 [COLOR=Black]nc='[/COLOR][B][COLOR=Red]93E32B[/COLOR][/B][COLOR=Black]'[/COLOR] ; mkdir -p [B][COLOR=Magenta]gn[/COLOR][/B]; ls *svg | while read f ; do sed s/#000/#$nc/g < $f > [B][COLOR=Magenta]gn[/COLOR][/B]/$f ; done

Die entscheidenden Stellen habe ich eingefärbt (rot markiert: Hex code für die neue Farbe, lila markiert: Name des neuen Verzeichnisses für die umgefärbten Icons und vergesst das zweite gn am Zeilenende nicht!)
Dabei wird als Beispiel ein Verzeichnis 'gn' erzeugt, dann alle *.svg Dateien geöffnet und darin der Farbcode #000 (das ist schwarz) ersetzt durch #93E32B (das ist das Green Hornet grün).
Wer das als Batch nicht braucht, der öffnet die gewünschte svg Datei eben direkt mit einem Texteditor, sucht nach der Ursprungsfarbe und ersetzt diese. Achtung, es gibt mindestens zwei Varianten: 'stroke' und 'fill'
Beispiel:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="20 20 321 321">
<g fill="none"  [B][COLOR=Red]stroke="#000"[/COLOR][/B] stroke-width="10">
<path d="m232.836,280.912c0,3.406-2.713,6.168-6.059,6.168h-92.89c-3.346,0-6.058-2.762-6.058-6.168v-200.096c0-3.406 2.712-6.167 6.058-6.167h92.89c3.346,0 6.059,2.761 6.059,6.167v200.096z"/>
<path d="m231.163,280c0-3.313-2.687-6-6-6h-91.333c-3.313,0-6,2.687-6,6v.667c0,3.313 2.687,6 6,6h91.333c3.313,0 6-2.687 6-6v-.667z"/>
</g>
[B][COLOR=Red]<g fill="#000">[/COLOR][/B]
<path d="m127.83,185.667c3.861,0 7.723,0 11.584,0 6.449,0 6.449-10 0-10-3.861,0-7.723,0-11.584,0-6.449,0-6.449,10 0,10z"/>
<path d="m158.837,183.579c-.141,.485-1.605,.326-.063,.326 .84,0 1.68,0 2.52,0 3.167,0 6.333,0 9.499,0 7.917,0 15.834,0 23.751,0 2.875,0 5.749,0 8.624,0 .84,0 1.68,0 2.52,0 1.737,0-.188-.016-.188-1.128 0,5.568 0,11.136 0,16.704 0,6.942 0,13.885 0,20.827 0,.599 0,1.196 0,1.795 0-.755 1.869-1.127 .459-1.127-2.203,0-4.406,0-6.609,0-13.525,0-27.05,0-40.575,0-1.76,0 .188,.84 .188,.969 0-1.072 0-2.145 0-3.217 0-4.442 0-8.886 0-13.329 0-7.584 0-15.167 0-22.751 0-4.514-7-4.514-7,0 0,12.217 0,24.435 0,36.651 0,4.63 1.24,8.677 6.813,8.677 5.86,0 11.721,0 17.582,0 7.665,0 15.329,0 22.994,0 3.784,0 11.276,1.221 12.697-3.681 1.34-4.626 .453-10.308 .453-15.054 0-7.492 0-14.984 0-22.477 0-4.525-.19-9.86-6.315-9.86-5.707,0-11.414,0-17.121,0-7.984,0-15.967,0-23.951,0-4.912,0-11.283-1.196-13.025,4.813-1.263,4.346 5.493,6.188 6.747,1.862z"/>
<path d="m156.117,217.92c9.023,0 18.046,0 27.07,0 4.514,0 4.514-7 0-7-9.023,0-18.046,0-27.07,0-4.514,0-4.514,7 0,7z"/>
<path d="m157.386,207.075c8.6,0 17.201,0 25.801,0 4.514,0 4.514-7 0-7-8.6,0-17.201,0-25.801,0-4.514,0-4.514,7 0,7z"/>
<path d="m157.386,196.23c8.6,0 17.201,0 25.801,0 4.514,0 4.514-7 0-7-8.6,0-17.201,0-25.801,0-4.514,0-4.514,7 0,7z"/>
<path d="m167.682,178.463c0-2.75 0-5.501 0-8.251 0-1.375 0-2.75 0-4.125 0-.812 .027,.449-.117,.728 .4-.775 .934-1.494 1.429-2.208 1.069-1.544 2.333-2.958 3.647-4.295 1.367-1.392-3.599,.254-.558,.254 3.245,0 6.49,0 9.735,0 3.246,0 6.491,0 9.736,0 3.074,0-2.024-1.619-.558-.254 1.367,1.273 2.548,2.791 3.646,4.295 .519,.709 .981,1.453 1.43,2.208-.155-.261-.117-1.545-.117-.728 0,1.375 0,2.75 0,4.125 0,2.75 0,5.501 0,8.251 0,6.448 10,6.448 10,0 0-3.581 0-7.163 0-10.744 0-3.993-1.492-6.647-3.911-9.811-2.267-2.966-5.234-7.344-9.42-7.344-3.603,0-7.204,0-10.807,0-3.602,0-7.204,0-10.806,0-4.185,0-7.152,4.378-9.42,7.344-2.418,3.163-3.911,5.818-3.911,9.811 0,3.581 0,7.163 0,10.744 .002,6.448 10.002,6.448 10.002,0z"/>
</g>
</svg>

Hier noch die Hexcodes für die Standardfarben der smartVISU:

SV Grün: 93E32B
SV Orange: F79A1F
SV Blau: 4176A9

Weitere Farben nach Belieben, z.B.

Rot: FF0000
Grün: 00FF00
Blau: 0000FF

usw.

Siehe auch hier: Wacker Art RGB Farben - RGB Colors

Jetzt haben wir in dem Unterordner - hier im Beispiel 'gn' - alle svg's in Green Hornet Grün.
Wer das dann als png braucht, wechselt in dieses Verzeichnis und macht folgendes:

ls *svg | while read f ; do pngname="`basename $f .svg`.png" ; convert  +antialias -background transparent $f -resize 128 -quality 100 $pngname ; done

Als Ergebnis habt ihr jetzt ein Verzeichnis mit allen svg's und png's in der gewünschten Farbe.
Für einzelne Dateien z.B:

convert  +antialias -background transparent sani_heating_manual.svg -resize 128 -quality 100 sani_heating_manual.png

Kopieren der erzeugten Dateien in die Ursprungs-Icon-Ordner dürfte dann kein Problem mehr sein, oder?

Dass ihr das auf eigene Gefahr macht und es z.B. auf einem Raspi etwas dauern kann sollte klar sein

Gruß, Martin

[cdeschryver]

Hallo Martin,

herzlichen Dank für deine ausführliche Anleitung zum Erzeugen der PNGs. Ich hatte eigentlich gehofft dass es ohne diesen Schritt funktioniert, das scheint leider z.Z. nicht zu gehen.

Bin leider gerade unterwegs, sobald ich dazu komme mache ich mal ein Skript daraus das automatisch die PNGs erzeugt und an die richtigen Stellen kopiert. Das sollte dann als Workaround gut klappen bis SVGs überall funzen.

Danke noch mal und viele Grüße
Chris

[cdeschryver]

Skript fertig

Hallo zusammen,

was lange währt usw... Hier ein kleines Skript dass die Icons in weiß und orange erzeugt und in die richtigen Ordner ablegt. Kann z.B. nach einer Neuinstallation von SmartHome.pi direkt ausgeführt werden.

Viele Grüße und frohe Festtage
Chris

[Sandman60]

Vielen Dank! Klappt einwandfrei!

Frohe Weihnachten,
Oliver

[gindler]

Ich schließe mich an - vielen Dank für das Script!