Einfärben der KNX-UF-Iconset SVGs

[MicHau]

Hallo,

ich habe mal in einer ruhigen Minute experimentiert mit den von mfd bereitgestellt SVG-Varianten des KNX-UF-Iconsets, weil ich es nicht kapiert habe, wieso das Einfärben von Icons so schwierig ist. Das Resultat habe ich angehängt.

Aktuell werden die Icons auf eine 128x128-PNG-Version verkleinert und in der Visu in ein <canvas>-Element gemalt und bei Bedarf umgefärbt.
Das führt zumindest bei meinen Browsern (Firefox, Chrome auf Android) dazu, dass die Icons eine absolut bescheidene Qualität haben. Das war für mich Stein des Anstoßes und ich habe mich deshalb mit der SVG-Version beschäftigt.

In den angefügten Testdateien wir das SVG-Icon selbst verwendet und dynamisch bei Klick auf "Weiß" oder "Grün" umgefärbt mit simplen CSS-Mitteln. Der Trick dabei ist, dass man das SVG nach dem Laden der Seite per Inline direkt ins HTML schreibt. Anschließend kann man darauf genauso zugreifen, wie auf alle anderen HTML-Elemente und per CSS Änderungen herbeiführen. Alle anderen Versuch ohne Inlinen des SVG haben nicht gefruchtet.

Also, grundsätzlich funktioniert es nun relativ leicht. Die Frage ist, ob man versuchen sollte, diesen Mechanismus in die Visu einzubauen. Dazu würde ich gerne eure Meinungen in Erfahrung bringen.

[swiss]

Sehr interessanter Ansatz Das hätte den Vorteil, dass man direkt das Icon Verzeichniss des knxuf-iconset als externe quelle in die SVN Version einbinden und damit automatisch immer die aktuelle Verison hätte. Allerdings müsste mann dann noch die Icontabelle im iconhandler.js automatisieren. Ansonnsten wäre immer noch Handarbeit gefragt was natürlich schade wäre...

Andererseits ist CSS bekannter massen so eine Sache. Als Standard eingeführt und doch von jedem Browserhersteller anders umgesetzt Die Frage ist, was man also bei der CSS Umfärbungen alles für Krücken einbauen müsste, dass es mit allen Browsern funktioniert.

[Chris M.]

Das ich dynamische SVG Icons möchte hab ich schon lange formuliert, war daher auch an den entsprechenden Diskussionen beim Iconset beteiligt.

Umgesetzt habe ich es aber (noch) nicht, da Android 2.3 (immer noch die wichtigste Version; außerdem auf meinem Handy ) damit nicht umgehen kann.
Daher habe ich erst mal den Zwischenweg über Canvas gewählt...

Den Code habe ich mir noch nicht angesehen, aber langfristig möchte ich natürlich so etwas haben.
Als Default ist es aber noch 1-2 Jahre zu früh. Aber weitere Möglichkeit gerne. Auch jetzt schon

[MicHau]

Ich sehe zwei Optionen.

1) Automatische Erkennung ob SVGs unterstützt werden
2) Parametrisieren, welche Variante verwendet werden soll

Welche davon würdet ihr bevorzugen?

[ZeitlerW]

Hallo Michael,

erstmal vielen Dank, daß Du dich dieser Aufgabe annimmst! Durch die Einfärbung per Canvas hat bei mir die VISU doch einige Ressourcen verbraucht (>400 MByte im Firefox)

Zunächst würde ich die Nutzung parametrierbar machen z.b. als URL - Parameter ?useSVG=true o.ä. Damit bräuchte man sich über die Erkennung keinen Kopf machen und man hätte eine schnelle Rückfallebene.

... ein Kommentar aus Nutzersicht. Ich fürchte zur Entwicklung kann ich wenig beitragen

vG
Wolfgang

[XueSheng]

Umgesetzt habe ich es aber (noch) nicht, da Android 2.3 (immer noch die wichtigste Version; außerdem auf meinem Handy ) damit nicht umgehen kann.

Beziehst Du Dich hierbei auf den Standard Android Browser oder Chrome?
Neben dem ursprünglichen Android Browser scheint sich doch der Chrome Browser weiter durchzusetzen. Macht es denn einen Unterschied, ob man Chrome unter Android 2.3 oder 4.3 einsetzt?

[Apollo]

In den angefügten Testdateien wir das SVG-Icon selbst verwendet und dynamisch bei Klick auf "Weiß" oder "Grün" umgefärbt mit simplen CSS-Mitteln. Der Trick dabei ist, dass man das SVG nach dem Laden der Seite per Inline direkt ins HTML schreibt. Anschließend kann man darauf genauso zugreifen, wie auf alle anderen HTML-Elemente und per CSS Änderungen herbeiführen.

Ja, noch besser ist es, wenn du die SVGs mit dem img-Tag definierst, dann werden die schonmal "weiß" angezeigt, noch bevor dein script läuft. Wenn du nun deinem Script noch beibringst die Farbinformation gänzlich zu entfernen, dann kannst du mit einem umschließenden Tag die Farbe steuerern. Was dan wiederum bedeutet das du z. B. auch einen Link (a-Tag) verwenden kannst. Wenn du dort dann ein a:hover mit den "fill" und "stroke" farben definierst, brauchst du kein Script mehr und css erledigt das komplett für dich.

Weiterhin können die SVGs um mehr als die Hälfte verkleinert werden (siehe dazu auch https://knx-user-forum.de/knx-uf-ico...symbole-3.html). Hab das schomal durchgeführt und um alle "unnötigen" Tags bereinigt.

Alle anderen Versuch ohne Inlinen des SVG haben nicht gefruchtet.

Es gibt leider auch keinen anderen.

Gruss

[MicHau]

Umgesetzt habe ich es aber (noch) nicht, da Android 2.3 (immer noch die wichtigste Version; außerdem auf meinem Handy ) damit nicht umgehen kann.

Ich habe das mal ausprobiert. Da öffnet sich nicht mal die Demo-Visu im Standard-Browser. Ich glaube, da liegt noch mehr als fehlender SVG-Support im Argen.

[MicHau]

Hi Martin,

danke für deinen Input. Ich werde mir das zu Gemüte führen.
Ohne nachgeschaut zu haben, nehme ich an, dass du dann in deiner SmartVisu auch die SVGs verwendest, richtig? Nimmst du damit explizit in Kauf, ältere Android-Versionen nicht zu unterstützen?

Es gibt leider auch keinen anderen.

Ich habe dazu sehr viel im Netz gefunden. Und fast immer ging es darum, mit der getSVGDocument-Methode zu arbeiten. Die hat aber irgendwie nirgends funktioniert. Allem Anschein nach geht das nur im Internet Explorer, den ich mir nicht mehr zu Gemüte geführt habe.

[Apollo]

Ja, wir verwenden die auch (in der optimierten Version), und eigene "voll" dynamische, die auch einen bestimmten Wert darstellen können.

Man muss unterscheiden: In Andriod 2.3 kann der mitgelieferte Browser keine SVGs, das stimmt, und 2.3 ist (noch) weit verbreitet (ca. 30% nach aktuellen Statistiken • Android - Anteile der Versionen August/September 2013 | Statistik )

Installiert man jedoch den Firefox auf 2.3 gehn auch SVGs (und der Firefox wird bei uns auch wegen des Websockets benötigt).

Ja, ich hab auch viel recherchiert: Entweder "statisch" einbinden wie ein Bild - dann ohne Manipulationsmöglichkeiten, oder "inline" dann mit Manipulation über DOM (wir verwenden das img-Tag das ähnlich deinem Script zum SVG gewandelt wird, wenns nötig ist. Damit ist das was im Hintergrund getan wird für den Benutzer quasi unsichtbar).

Gruss

[Chris M.]

Beziehst Du Dich hierbei auf den Standard Android Browser oder Chrome?
Neben dem ursprünglichen Android Browser scheint sich doch der Chrome Browser weiter durchzusetzen. Macht es denn einen Unterschied, ob man Chrome unter Android 2.3 oder 4.3 einsetzt?

Standard. Chrome wird AFAIK erst ab Android 3.0 oder gar 4.0 unterstützt...

Ich habe das mal ausprobiert. Da öffnet sich nicht mal die Demo-Visu im Standard-Browser. Ich glaube, da liegt noch mehr als fehlender SVG-Support im Argen.

Ui, Du hast recht
Dann haben wir uns da vor kurzem eine Regression eingefangen - SVN sollte noch absolut zu Android 2.3 (oder gar älter, kann ich aber nicht testen) kompatibel sein...

Ansonsten noch zum Thema SVG:
Wie man das dynamisch einbindet kann man in der CV bereits sehen, z.B. bei den 2D hintergründen mit dem Pipe-O-Matic und Flow-O-Matic (vgl. z.B. CometVisu-Client)

[Chris M.]

Dann haben wir uns da vor kurzem eine Regression eingefangen - SVN sollte noch absolut zu Android 2.3 (oder gar älter, kann ich aber nicht testen) kompatibel sein...

Ist in revision 1907 gefixt. Android 2.3 geht wieder.

[perf]

Ist etwas aus dieser Diskussion gekommen?

Ich suche die Möglichkeit, bei eigenen Icons das Einfärben auszuschalten. Geht das schon?

(Meine Icons sind nicht monochrom.)

/Per

[Chris M.]

Ui, das geht momentan gar nicht

Ich schau mal wie wir das am besten umgesetzt bekommen.