(V0.12.0) Dynamische SVG in Seiten einbinden, die nicht vom Typ 2D sind

[Robosoc]

Ich habe mir vor einiger Zeit ein recht aufwändiges SVG gebastelt, welches auf Änderungen mehrerer KNX-Telegramme reagiert.
Bisher habe ich es nur geschafft dieses als Hintergrund einer 2d-Seite einzubinden. Als Image wird es zwar dargestellt, aber die Dynamik (also die Verarbeitung der KNX-Werte funktioniert nicht).

Chris hat mir den Tipp gegeben, dass das neue Clock-Plugin auch ein SVG ist und ich davon abgucken könnte.Das habe ich versucht und so wie ich es verstehe, wird die Dynamik im Clock-Widget über die Datei plugins/Clock.jsgesteuert. Die SVG-Datei enthält nur die optischen Elemente (in Gruppen), die man über javascirpt-file ansteuern kann.

Diese wird wohl - vermute ich - eingebunden, wenn man das Plugin Clock in der Configuration aufnimmt.
Also vermute ich, dass ich mir ein eigenes Plugin schreiben muss...ist das korrekt? Gibt es dazu schon irgendwo ein wenig Anleitung, denn sooo techi bin ich leider nicht, dass ich das aus dem Ärmel schüttel.
Oder könnte ich eine .js-Datei auch direkt irgendwie einbinden (z.B. über <web ...>) und das SVG würde ich mittels <image> einbinden und dann im .js-file refferenzieren?

[Chris M.]

Damit eine SVG über JavaScript geändert werden kann, darf diese nicht als HTML <img> eingebunden werden - was ein <image>-Widget aber macht. D.h. dieser Weg wird nicht funktionieren.

Eine als Hintergrund eingebundene SVG auf einer 2D-Seite verwendet bei einer SVG-Datei als Backdrop daher ein HTML <embed> Element.
Wie so eine Hintergrund-SVG per JS interaktiv werden kann und auch noch die Bus-Kommunikation der CV mit nutzen kann, kann am einfachsten im Demo 2d3d gesehen werden, wo auf der 2D Seite der Tank sich je nach Sliderposition füllt oder leert.
Die relevanten Dateien sind https://github.com/CometVisu/CometVi...op_red_pot.svg und https://github.com/CometVisu/CometVi...rop_red_pot.js

Das Clock-Plugin war früher mal als Demo gedacht um zu zeigen wie man selber ein interaktives SVG einbinden kann. "Leider" ist eine Uhr aber dafür viel zu nützlich gewesen, als dass die ein Demo-Plugin bleiben konnte. So hat die nun viele Komfort-Features bekommen und ist nun ein relativ komplexes Plugin geworden: https://github.com/CometVisu/CometVi...ugins/Clock.js
Hier wird für das Einbinden der SVG übrigens ein anderer Weg gegangen: die SVG-Daten werden direkt in den DOM-Tree eingehängt.

Was für Dich nun die beste Lösung ist kann ich so abstrakt nicht sagen. Am einfachsten dürfte noch die Möglichkeit als Hintergrund-Bild für eine 2D Seite sein.
Hier wäre ein großer Vorteil, dass Du die Kommunikation anzapfen kannst.

Die nächstbeste Lösung dürfte es sein ein eigenes Plugin zu schreiben. Die JS von Dir würde dann in dem Plugin aufgehen und würde dafür sorgen müssen, dass die SVG nachgeladen wird (entweder per <embed> oder eben, wie das Clock-Plugin, per direkter Einbindung in den DOM-Tree). Auch hier besteht der Vorteil, dass Du Dich in die CometVisu-Kommunikation mit dem Backend einklinken kannst.
Was ich allerdings gerade nicht sagen kann (aber hier kann peuter sicher weiterhelfen) ist, wie Du ein Plugin rein als externe Datei, also ohne das ganze Build-System, schreiben und einbinden kannst.

[peuter]

Dazu gibt es Doku: https://www.cometvisu.org/CometVisu/...n-uber-plugins
Hier geht es dann um die 2. Variante "Eigenständige Plugins". Da wir in diesem Bereich aber noch nie Rückfragen hatten, hat das entweder noch nie jemand probiert oder es funktioniert alles wie beschrieben. Damit möchte ich nur ermutigen nachzufragen, falls etwas nicht wie beschrieben funktioniert. Die Wahrscheinlichkeit ist hoch, dass Du der erste bist der dieses Feature benutzt (außer ich mal beim Implementieren / schreiben der Doku und das ist ein Weilchen her).

[Robosoc]

Vielen Dank Chris und Tobias, ich werde mich damit in Ruhe beschäftigen und auf jeden Fall gerne nachfragen!