How to inject full svg source?

[GamerWindow]

How to inject a full svg source e.g.

<svg height="150" width="480">
    <path d="m0 35.5l6.5-13 9.5 14.5 7-13 11.8 19.7 7.7-13.7 7.8 17 9.4-19.3 9.3 19.3 16-29.3 13.3 21.3 14.7-29.3 14.7 32.6 8.6-18.6 10.7 20.6 11.3-24 12 20 7.4-14.6 12 17.3 10-22 8 14 11.3-24 14 26 7.3-13.3 10.7 19.3 12-24.7 9.7 15 10.3-23.3 12 22.3 6.3-9.3 10.4 14 12-29.3 15.6 31.3 7-13.3 10 16.6 13.4-27.3 6.6 10.7 7.7-16.7 9 19.3 7.3-9.3 11.4 19.3 9.3-17.3 13.3 22 10.7-18 8 11.3 11.3-18 11.9 22 3.8-6.8v181.5h-480v-179.5z" fill="#175720"/>
</svg>

using the inject node from NodeRED.

How to specify the injected msg.payload?

I could not find anything in the docs about that.

[bartbutenaers]

Hi Patrick,
It isn't in the documentation, because it is not possible at the moment.
When an entire SVG is loaded:

• All previous eventhandlers, databindings... need to be cleaned up.
• All eventhandlers/databindings... need to be applied to the new SVG elements.

Although I can see some useful use cases, I 'think' it might result in quite some redesign. But I haven't looked at this yet in detail...
Bart

[bartbutenaers]

I have created a new branch "set-entire-svg-via-msg" that implements this feature.
You can install it directly from my Github account from within your .node-red folder:

npm install bartbutenaers/node-red-contrib-svg#set-entire-svg-via-msg

The new feature is explained on the readme page.

It would be nice if you could test this new feature (incl. event handlers, databinding, ...) before I publish it on NPM, because I'm rather short on free time to test it all by myself at the moment ...

[GamerWindow]

Thanks for immediate response. I cannot add the branch to npm:

git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Is this branch a private branch? Please make it public.

[bartbutenaers]

No it is all public. Not sure why it fails... I assume you have git installed??
Perhaps this might help?

[GamerWindow]

Yes, i have git installed. I already made a ssh key, checked it, also created a new one and replaced it in github settings but I still get an error.

npm ERR! Error while executing:
npm ERR! C:\Program Files\Git\mingw64\bin\git.EXE ls-remote -h -t ssh://git@github.com/bartbutenaers/node-red-contrib-svg.git
npm ERR!
npm ERR! ERROR: Repository not found.
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR!
npm ERR! exited with error code: 128

[bartbutenaers]

Damn, I forgot "-ui-" in the node name. Apologies!
It should be:

npm install bartbutenaers/node-red-contrib-ui-svg#set-entire-svg-via-msg

Hopefully it works now...

[GamerWindow]

Now I get the following error message:

npm ERR! code 1
npm ERR! Command failed: git checkout set-entire-svg-via-msg
npm ERR! error: pathspec 'set-entire-svg-via-msg' did not match any file(s) known to git
npm ERR!

[bartbutenaers]

Finally at my home computer, after a heavy day at work...
OMG this is so embarrassing.
The command contains not the branch name, but the id of the header id of your new section in the readme.
There is no emoji available to express my feeling at the moment ...
This one works for me:

npm install bartbutenaers/node-red-contrib-ui-svg#reload-svg

[GamerWindow]

Yes, it works now.
Thank you for the time you put into this.
I will test it as soon as possible.

[GamerWindow]

Hey Bart,
sorry for the late response, i'm in the middle of my final exams.
I had time for a bit of testing the last days and as far as i could see, everything seems to work.
I was able to change the color of th replaced SVG with the "update_style" command via input message. Animations and (click-)events from the ui-svg-node worked too.
I can't get the add_event command to work, even in the master branch, i don't know why. Maybe you could take a look at this small example i tried:

[{"id":"6e219eb.05dce6","type":"tab","label":"add event","disabled":false,"info":""},{"id":"3fa0b330.9420dc","type":"ui_svg_graphics","z":"6e219eb.05dce6","group":"588a0f72.d02bb","order":0,"width":0,"height":0,"svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"720\" width=\"1280\" viewBox=\"0 0 617.6 411.21\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 67.25 155.46\">\n<defs>\n<style>\n</style>\n</defs>\n<g id=\"1_status\" data-name=\"1_status\" style=fill:#919191>\n<circle id=\"1_status\" cx=\"33.63\" cy=\"121.84\" r=\"33.63\"/>\n</g>\n<g data-name=\"1_info\" style= fill:#09f>\n<path id=\"1_info\" d=\"M33.63,0A33.63,33.63,0,1,0,67.25,33.63,33.63,33.63,0,0,0,33.63,0ZM30.89,10.09a3.39,3.39,0,0,1,2.59-1.2A3.61,3.61,0,0,1,36.22,10a3.73,3.73,0,0,1,1.07,2.63,4.27,4.27,0,0,1-1.1,2.91,3.48,3.48,0,0,1-2.71,1.25,3.41,3.41,0,0,1-2.59-1.19,3.84,3.84,0,0,1-1.1-2.71A4,4,0,0,1,30.89,10.09ZM41,53.27H27V51.34l1.39-.12A5.72,5.72,0,0,0,29.64,51a2.18,2.18,0,0,0,1.22-.92,3.34,3.34,0,0,0,.39-1.72V30.53a3.55,3.55,0,0,0-.42-1.71,3.69,3.69,0,0,0-1.19-1.3,5.13,5.13,0,0,0-1.61-.6,11.64,11.64,0,0,0-1.93-.31V24.68L36.29,24l.41.41V48a3.27,3.27,0,0,0,.4,1.7,2.28,2.28,0,0,0,1.23,1,10.32,10.32,0,0,0,1.25.43,7.7,7.7,0,0,0,1.37.22Z\"/>\n</g>\n</svg>\n \n</svg>","clickableShapes":[],"javascriptHandlers":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"outputField":"","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"name":"SVG graphics node","x":350,"y":60,"wires":[["4d17523e.62babc"]]},{"id":"1af025f.62d4eda","type":"inject","z":"6e219eb.05dce6","name":"add click event","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"add_event\",\"event\":\"click\",\"selector\":\"#1_info\",\"payload\":\"circle has been clicked\",\"topic\":\"inform\"}","payloadType":"json","x":160,"y":60,"wires":[["3fa0b330.9420dc"]]},{"id":"4d17523e.62babc","type":"debug","z":"6e219eb.05dce6","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":510,"y":60,"wires":[]},{"id":"588a0f72.d02bb","type":"ui_group","name":"Floorplan","tab":"66b5bbaf.ebf454","order":2,"disp":true,"width":"27","collapse":false},{"id":"66b5bbaf.ebf454","type":"ui_tab","name":"Background","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

[bartbutenaers]

Hey Patrick,

No problem. Thanks for testing this feature!

About your add_event problem. When something doesn't work in the SVG node, you should always have a look in the browser's console log, or by activating this checkbox (e.g. for Android devices where it is hard to look in the browser log):

Then you will see this error, as soon as you inject your message:

And when you google about that you will find this:

Your html element ID's start with a number, which is not allowed by the html standard...
So put your numbers at the end of the id's.

Please close this issue when everything is solved, so I know whether I can publish the new version on NPM.

Good luck with your final exams!!!

Bart

[GamerWindow]

I feel a bit stupid right now. I totaly forgot about that part with the IDs and did not notice it because it worked with the "update_style" command.. Thank you very much.
I also have a problem with sizes of the replaced svg when using a floorplan, but this is probably something i am doing wrong with the with/height and the viewbox in the svg-tag. I think i have to look a bit closer into that.

One more thing i noticed today:
It seems the "add_element" command is not working. i get this error when using it:

"Unexpected error when processing input message: TypeError: Cannot read property 'createElementNS' of undefined"

When using the same "add_element" Code in the master branch, everything works and i get no errors

[bartbutenaers]

It seems the "add_element" command is not working.

Nice catch! You found a bug that has been introduced by implementing the full svg source inject feature.
It is now solved when you install it again from Github
Thanks for testing!!!

[GamerWindow]

Nice!
Thank you very much for your work on this node.