Iconset aktualisieren?

[gindler]

Hallo zusammen,

wie geht man denn am besten vor, um die Icons zu aktualisieren? Ich habe mir die aktuelle Version aus https://knx-user-forum.de/knx-uf-ico...-download.html heruntergeladen und zum Test ein paar der SVG-Dateien nach /var/www/smartvisu/icons/sw kopiert und anschließend per generate_icons.sh (siehe https://knx-user-forum.de/446892-post8.html) die weißen und (vermeintlich) orangen png-Icons erstellt. Leider sind die orangen auch weiß
Was tun?

[Apollo]

Ja, ist für das nächste Release bereits erledigt.

Gruss

[gindler]

Hi,

ich glaub, ich stehe noch irgendwie auf'm Schlauch - wie soll ich das verstehen? Was genau ist erledigt?
Die Konvertierung aus SVG? Die allgemeine Verwendung von SVG, die dann eingefärbt werden? Oder dass "nur" das aktuelle Iconset mitgeliefert wird?

Ach ja: happy new year

[Apollo]

Hä?

SVGs sind doch schon dabei, und auch einfärbbar...

Gruss

[gindler]

Hi,

mir war so, als hätte ich hier irgendwo gelesen, dass es in den Widgets noch nicht klappt und das erst noch implementiert wird - ich kann mich aber auch täuschen und lasse mich gerne belehren
Muss ich nochmal suchen....

edit (habe gesucht): https://knx-user-forum.de/smartvisu/...-auf-svgs.html

[Apollo]

Ja, mit den Widgets geht das im Moment nur begrenzt.

Gruss

[whe]

Wie binde ich denn diese RAW SVGs in die SmartVISU ein ?
ich brauche doch immer zwei: SW und WS Format.
worin unterscheiden die sich denn ?
habe sie versucht manuell anzupassen; ist mir leider nicht gelungen.

[Sipple]

Moin

Also wenn es nur um die Farbe geht, manuell ändern geht so:

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="361px"
     height="361px" viewBox="0 0 361 361" style="enable-background:new 0 0 361 361;" xml:space="preserve">
<g id="audio_x5F_audio">
    <path style="fill:none;stroke:[B][COLOR=#FF0000]#FFFFFF[/COLOR][/B];stroke-width:10;stroke-miterlimit:10;" d="M97.5,235.33c0,3.508,2.844,6.351,6.351,6.351
        h53.631c3.507,0,6.351-2.843,6.351-6.351V125.951c0-3.507-2.844-6.351-6.351-6.351h-53.631c-3.507,0-6.351,2.844-6.351,6.351
        V235.33z"/>
    <path style="fill:none;stroke:[B][COLOR=#FF0000]#FFFFFF[/COLOR][/B];stroke-width:10;stroke-miterlimit:10;" d="M264.092,280.146c0,3.576-2.9,6.477-6.478,6.477
        l-67.286-37.779c-4.069-2.149-6.477-2.9-6.477-6.478V118.535c0-3.577,0.666-3.389,6.477-6.477l67.286-37.78
        c3.577,0,6.478,2.899,6.478,6.477V280.146z"/>
</g>
<g id="Ebene_1">
</g>
</svg>

Die markierten Codes bedeuten Weiß. Schwarz wäre dann entsprechend #000000.
Hier eine von zig Seiten mit Farbcodes: http://www.rapidtables.com/web/color/RGB_Color.htm
Die original smartVISU SVG's verwenden aber z.T. eine einfachere Farbcodierung, z.B. stroke="#000" für Schwarz, also nur 3 Byte für RGB. Man kann aber beide Farbcodierungen verwenden.
Siehe auch hier: http://www.websiteoptimization.com/speed/tweak/hex/

Jetzt is es natürlich eine Heidenarbeit, alle 7-800 Icons händisch auf Schwarz umzustellen. Ich habe mir da mal von einem Kumpel ein Linux Script basteln lassen, das alle SVG's im Ordner nach #FFFFFF durchsucht und daraus eine neue, gewünschte Farbe macht. Dadurch habe ich jetzt mehrere Ordner, Weiß, Schwarz, Blau, Gelb, Grün, Orange. Aber das ist Jahre her und ich finde das Script nicht mehr. Wer mit sed und/oder awk klar kommt macht das in 5min.

EDIT: Gefunden, man soll halt nix wegwerfen

nc='93E32B' ; mkdir -p ausgabe; ls *svg | while read f ; do sed s/#FFFFFF/#$nc/g < $f > ausgabe/$f ; done

"nc=" ist der neue Farbwert (die ' ' nicht vergessen), hier das Grün für das Green Hornet Farbschema der smartVISU. Schwarz wäre wie gesagt '000000'. Wenn du "ausgabe" gleich in "sw" änderst, hast gleich den richtigen Ordnernamen.

An der neuen smartVISU 2.9 wird ja gerade vieles geändert, u.a. das Farbmanagement der Icons. Da kann man dann in vielen Widgets direkt die Farbe mit angeben.
Am Ende wäre es gut, wenn es überhaupt nur noch einen Ordner mit SVG's in der Grundfarbe gäbe und die Einfärbung grundsätzlich von den Widgets erledigt werden würde.

Vielleicht wäre das aber besser im smartVISU Forumsbereich aufgehoben.

Gruß, Martin

[smai]

whe
SW steht für schwarz, WS für weiss. Beim einen sind also fill und stroke mit #000 (= schwarz) gesetzt, beim anderen #FFF (= weiss).

Damit sich die Icons in smartVISU 2.8 oder der develop-Version einfärben lassen, musst du sie durch SVGOMG lassen. Dadurch werden einerseits die Dateien deutlich verkleinert und die Farbangaben vereinfacht. Diese Datei kannst du dann im Ordner ws direkt einfügen.

Falls du ausschliesslich ein Design mit weissen Icons verwendest, kannst du dir die schwarzen Versionen sparen. Ansonsten musst du wie von Sipple beschrieben für das Icon in sw alle #FFF durch #000 ersetzen.

Am Ende wäre es gut, wenn es überhaupt nur noch einen Ordner mit SVG's in der Grundfarbe gäbe und die Einfärbung grundsätzlich von den Widgets erledigt werden würde.

Daran arbeit ich. Allerdings kann ich noch nicht versprechen, dass es für den Release 2.9 reichen wird.


mfd die bisher in der smartVISU verwendeten Icons aus deinem Iconset waren minimierte Versionen deiner raw_svg.
Leider weiss ich nicht, wie die früheren Entwickler der smartVISU dies gemacht haben. Ich habe aber mit SVGO (bzw. der Onlineversion SVGOMG) gute Erfahrungen gemacht.
Evtl. könntest du ja in deinem Repo oder per KNXUF Iconset-Generator ebenfalls gleich die minimierten SVG-Versionen mit anbieten?

[Sipple]

die bisher in der smartVISU verwendeten Icons aus deinem Iconset waren minimierte Versionen deiner raw_svg.

Vielleicht hab ich es falsch verstanden, aber die smartVISU icons sind nicht minimierte raw_svg, sondern eher MAXIMIERTE. Sprich, sie sind leicht vergrößert.

Beispiel: Links das unbearbeitete raw_svg aus dem iconset, so wie es die smartVISU momentan bei mir in der 2.7.x anzeigt. Rechts ein entsprechendes icon der bei der smartVISU mitgelieferten. Das rechte ist minimal größer. Wenn man damit grundsätzlich leben kann, kann man die alten icons der smartVISU einfach mit den raw_svg komplett ersetzen, ohne zusätzlichen Aufwand. Vielleicht noch wenn nötig das von dir verlinkte Optimierungstool drüber laufen lassen. Sollte als Batch ja schnell gehen.

Screenshot-2017-10-4 FIPS.png

Ist mir allerdings eh ein Rätsel, warum die smartVISU die beiden augenscheinlich gleichen svg icons unterschiedlich groß darstellt. Dachte eigentlich, dass das grad der Witz an svg ist, die Skalierbarkeit.

[smai]

Da habe ich mich etwas missverständlich ausgedrückt: Das minimiert bezog sich nicht auf die Anzeige, sondern auf die Dateigrösse.

Wenn du sie nur in weiss brauchst, funktionieren sie. Aber die smartVISU kann die originalen Icons nicht anders einfärben.

Das mit der Grösse kann ich dir spontan auch nicht erklären, evtl. gibt es Unterschiede in den SVG selbst. Ist das linke ein dynamisches Icon?

[Sipple]

Nein, das linke ist ein normales statisches icon aus einer _00, _10, ... _100 er Serie, gedacht für basic.shifter. Hatte ich nur zufällig "in der Hand" und hab's daher als Beispiel genommen. Dass die Größen unterschiedlich sind ist mir aufgefallen, als ich eben diese Serie für basic.shifter für den Füllstand meiner Zisterne gebraucht habe und es nur das leere Icon in der smartVISU gab. Ich habe dann die raw_svg genommen und für mich je nach Füllstand manuell entsprechend eingefärbt, weil das Farbe Ändern per widget in meiner SV Version eh noch nicht geht.

[smai]

Es liegt an den Dateien selbst, https://github.com/Martin-Gleiss/sma..._cistern_0.svg hat nicht den gleich gossen Abstand von den Rändern wie https://github.com/OpenAutomationPro..._cistern_0.svg

Es gibt diese gar nicht als dynamic icon, aber die Idee finde ich so gut, dass ich ein solches bauen werde.

[Sipple]

Nur zu, das wäre natürlich noch besser, solange dann auch wertabhängiges dynamisches Einfärben wie beim neuen basic.print geht

[smai]

Ja, auch das kommt bzw. geht in der develop-Version schon mit basic.symbol, wenn auch noch etwas mühsam.
Aber dazu müsstest du von deiner alten 2.7 weg.

Nun sind wir aber deutlich näher bei der smartVISU als dem Iconset.