On replace_svg, databind functionality does not work

[KiwiMayonnaise]

Hello Bart,

I would like to suggest one issue for investigation. I am trying to load svg where I have data-bind attributes. If I paste my svg via UI editor of svg graphic node (Tab SVG), then everything works smoothly. If I want to load svg from file, data-bind attributes are not recognised when I send the update messages to animate or change the text values. I need them to define manually in Binding Tab.

Can you advise, if this is intended behaviour?

Thank you for your great work and contribution.

[bartbutenaers]

Hi @KiwiMayonnaise,

No at first sight I don't think that is intended behaviour, so let's call it a "bug" from here on ;-)

Can you make a "simple" test flow that I can use to reproduce this issue? A simple svg containing of a single shape will be sufficient I assume. Because I am very short of free time, so that would really help to get me started with this...

Thanks! Bart

[KiwiMayonnaise]

Hello Bart,

please see attached flow. Let me know, if it is sufficient to reproduce the issue.

[ { "id": "f6f2187d.f17ca8", "type": "tab", "label": "Databind.test", "disabled": false, "info": "" }, { "id": "97f6b7aba96c3da3", "type": "ui_svg_graphics", "z": "f6f2187d.f17ca8", "group": "906bb797a9228343", "order": 1, "width": 10, "height": 6, "svgString": "<svg height=\"140\" width=\"140\">\n <style type=\"text/css\">\n .red {\n fill: red;\n }\n\n .green {\n fill: green;\n }\n\n .show {\n visibility: visible;\n }\n\n .hide {\n visibility: hidden;\n }\n </style>\n <circle class=\"red\" data-bind-attributes=\"class\" data-bind-values=\"circ.colour\" cx=\"50\" cy=\"50\" r=\"40\"\n fill=\"yellow\" />\n <text class=\"hide\" data-bind-attributes=\"class\" data-bind-values=\"txt.visibility\" data-bind-text=\"txt.text\"\n x=\"20\" y=\"120\">XXX</text>\n</svg>", "clickableShapes": [], "javascriptHandlers": [], "smilAnimations": [], "bindings": [], "showCoordinates": false, "autoFormatAfterEdit": false, "showBrowserErrors": false, "showBrowserEvents": false, "enableJsDebugging": false, "sendMsgWhenLoaded": true, "noClickWhenDblClick": false, "outputField": "payload", "editorUrl": "//drawsvg.org/drawsvg.html", "directory": "", "panning": "disabled", "zooming": "disabled", "panOnlyWhenZoomed": false, "doubleClickZoomEnabled": false, "mouseWheelZoomEnabled": false, "dblClickZoomPercentage": 150, "cssString": "div.ui-svg svg{\n\n}\ndiv.ui-svg path {\n \n}", "name": "", "x": 1000, "y": 480, "wires": [ [] ] }, { "id": "d59f098b36367927", "type": "function", "z": "f6f2187d.f17ca8", "name": "replaceSVG", "func": "let pld = `\n<svg height=\"140\" width=\"140\">\n<style type=\"text/css\">\n .red{\n fill: red;\n }\n .green{\n fill: green;\n }\n .show {\n visibility: visible;\n }\n\n .hide {\n visibility: hidden;\n }\n\n</style>\n <circle class=\"red\" data-bind-attributes=\"class\" data-bind-values=\"circ.colour\" cx=\"50\" cy=\"50\" r=\"40\" fill=\"yellow\"/> \n <text class=\"hide\" data-bind-attributes=\"class\" data-bind-values=\"txt.visibility\" data-bind-text=\"txt.text\" x=\"20\" y=\"120\">XXX</text>\n</svg>\n`;\n\nreturn {\n \"payload\": {\n \"command\": \"replace_svg\",\n \"svg\": pld\n }\n};", "outputs": 1, "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 670, "y": 300, "wires": [ [ "9b4fd3417ad199ac" ] ] }, { "id": "762399fc1547a726", "type": "inject", "z": "f6f2187d.f17ca8", "name": "", "props": [ { "p": "payload" } ], "repeat": "", "crontab": "", "once": true, "onceDelay": 0.1, "topic": "", "payload": "true", "payloadType": "bool", "x": 390, "y": 300, "wires": [ [ "d59f098b36367927" ] ] }, { "id": "2cbd76cee2a14c9c", "type": "function", "z": "f6f2187d.f17ca8", "name": "changeValues.databind", "func": "node.send({\n \"topic\": \"databind\",\n \"payload\": {},\n \"circ\":{\n \"colour\": \"green\"\n },\n \"txt\": {\n \"text\": \"-------\",\n \"visibility\": \"show\"\n }\n});", "outputs": 1, "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 690, "y": 480, "wires": [ [ "97f6b7aba96c3da3", "9b4fd3417ad199ac" ] ] }, { "id": "4b28e0d60ded8f96", "type": "inject", "z": "f6f2187d.f17ca8", "name": "", "props": [ { "p": "payload" } ], "repeat": "", "crontab": "", "once": true, "onceDelay": "1", "topic": "", "payload": "true", "payloadType": "bool", "x": 410, "y": 480, "wires": [ [ "2cbd76cee2a14c9c" ] ] }, { "id": "9b4fd3417ad199ac", "type": "ui_svg_graphics", "z": "f6f2187d.f17ca8", "group": "906bb797a9228343", "order": 2, "width": 10, "height": 6, "svgString": "", "clickableShapes": [], "javascriptHandlers": [], "smilAnimations": [], "bindings": [], "showCoordinates": false, "autoFormatAfterEdit": false, "showBrowserErrors": false, "showBrowserEvents": false, "enableJsDebugging": false, "sendMsgWhenLoaded": true, "noClickWhenDblClick": false, "outputField": "payload", "editorUrl": "//drawsvg.org/drawsvg.html", "directory": "", "panning": "disabled", "zooming": "disabled", "panOnlyWhenZoomed": false, "doubleClickZoomEnabled": false, "mouseWheelZoomEnabled": false, "dblClickZoomPercentage": 150, "cssString": "div.ui-svg svg{\n\n}\ndiv.ui-svg path {\n\n}", "name": "", "x": 1000, "y": 300, "wires": [ [] ] }, { "id": "906bb797a9228343", "type": "ui_group", "name": "Default", "tab": "f28c245ca52bbf01", "order": 1, "disp": false, "width": 20, "collapse": false, "className": "" }, { "id": "f28c245ca52bbf01", "type": "ui_tab", "name": "Home", "icon": "dashboard", "disabled": false, "hidden": false } ]

[bartbutenaers]

Hi @KiwiMayonnaise,

Thanks for taking the time to create a simple flow to reproduce it easily. Something like that really helps!!

I have created a fix on Github. Would be nice if you could test it, before I publish it on npm. You can install it from this github repository like this:

1. Make sure you have git installed.
2. Run this command from within your .node-red folder:

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

3. Restart Node-RED and refresh your browser screen

Hopefully it now works for you. I think this is what you wanted:

[KiwiMayonnaise]

Hello Bart,

thank you kindly for so fast fix. I confirm, in test environment, behaviour seems to be fixed.

[KiwiMayonnaise]

I am closing the issue.

[bartbutenaers]

@KiwiMayonnaise, Thanks for testing so quickly! Version 2.3.3 is now available in the palette: