SVG does not update after changing attributes

[lemny]

When sending an update payload to an element like { "command": "update_attribute", "selector": "#t_haustuer", "attributeName": "fill", "attributeValue": "red" }

the UI does not update.

I verified this with the official examples to be sure I didn't made an error.

I am using Node Red 3.0.1 with latest 3.1.7 dashboard.

[bartbutenaers]

Hi @lemny, And if you use update_style instead of update_attribute? Bart

[lemny]

Updated and tried your interpolated color example, but no luck. The Text doesn't update either.

msg.payload = [{
    "command": "update_text",
    "selector": "#my_text",
    "textContent": temperature + "°C"
},{
    "command": "update_attribute",
    "selector": "#my_text",
    "attributeName": "fill",
    "attributeValue": interpolatedColor
},{
    "command": "update_style",
    "selector": "#my_icon",
    "style": { "fill": interpolatedColor }
}]
return msg;

[lemny]

I also tried a minimum example by reducing it to only update the text

var temperature = msg.payload;
msg.payload = {
    "command": "update_text",
    "selector": "#my_text",
    "textContent": temperature + "°C"
}
return msg;

[bartbutenaers]

If you can give me an example flow (export in Node-RED of your svg and inject nodes), I can try to have a look.

[lemny]

I used your example for color interpolation from https://github.com/bartbutenaers/node-red-contrib-ui-svg/blob/master/docs/msg_control.md#updateset-an-attribute-value-via-msg

Result: https://imgur.com/a/yS2mdwH

[{"id":"33d2b8c4.d8b238","type":"ui_svg_graphics","z":"2203d76d.b17558","group":"95c5d2ef.84601","order":0,"width":"15","height":"15","svgString":"<svg preserveAspectRatio=\"none\" x=\"0\" y=\"0\" viewBox=\"0 0 900 710\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <text id=\"my_text\" x=\"100\" y=\"30\" fill=\"blue\" font-size=\"25\" text-anchor=\"middle\" alignment-baseline=\"middle\" font-weight=\"bold\">10°C</text>\n <text id=\"my_icon\" x=\"160\" y=\"50\" font-family=\"FontAwesome\" fill=\"blue\" font-size=\"80\" text-anchor=\"middle\" alignment-baseline=\"middle\" stroke-width=\"1\">fa-thermometer-empty</text>\n</svg>","clickableShapes":[],"smilAnimations":[],"bindings":[],"showCoordinates":true,"autoFormatAfterEdit":false,"showBrowserErrors":false,"outputField":"anotherField","editorUrl":"","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"name":"Thermometer","x":820,"y":1820,"wires":[[]]},{"id":"f5cea410.d11948","type":"function","z":"2203d76d.b17558","name":"Color interpolation","func":"const color1 = [0, 0, 255]; // blude\nconst color2 = [255, 0, 0]; // red\n\nvar temperature = msg.payload;\nvar factor = msg.payload / 100;\n\nvar red = Math.round(color1[0] + factor * (color2[0] - color1[0]));\nvar green = Math.round(color1[1] + factor * (color2[1] - color1[1]));\nvar blue = Math.round(color1[2] + factor * (color2[2] - color1[2]));\n\nvar interpolatedColor = \"rgb(\" + red + \",\" + green + \",\" + blue + \")\"; \n\nmsg.payload = [{\n \"command\": \"update_text\",\n \"selector\": \"#my_text\",\n \"textContent\": temperature + \"°C\"\n},{\n \"command\": \"update_attribute\",\n \"selector\": \"#my_text\",\n \"attributeName\": \"fill\",\n \"attributeValue\": interpolatedColor\n},{\n \"command\": \"update_attribute\",\n \"selector\": \"#my_icon\",\n \"attributeName\": \"fill\",\n \"attributeValue\": interpolatedColor\n}]\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":590,"y":1820,"wires":[["33d2b8c4.d8b238"]]},{"id":"a90255d4.4ac008","type":"ui_slider","z":"2203d76d.b17558","name":"","label":"Temperature","tooltip":"","group":"95c5d2ef.84601","order":3,"width":"6","height":"1","passthru":true,"outs":"all","topic":"","min":0,"max":"100","step":1,"x":370,"y":1820,"wires":[["f5cea410.d11948"]]},{"id":"95c5d2ef.84601","type":"ui_group","z":"","name":"Home Floor Plan","tab":"c411008f.d8abc","order":1,"disp":true,"width":"15","collapse":false},{"id":"c411008f.d8abc","type":"ui_tab","z":"","name":"Home Floor Plan","icon":"dashboard","disabled":false,"hidden":false}]

[lemny]

I am not sure if it matters, but I am running Node Red on Node.js under Windows 10 on my Server. Not a raspberry of some kind.

[bartbutenaers]

I tried to import the example, and it all works fine:

This is also executed on a Windows10 portable, and it works fine both in Chrome and Edge.

Can you share a screenshot of your CSS tabsheet? Mine contains this:

And do you see any errors in the Debug sidebar when you enable this setting:

[lemny]

There was some really strange stuff going on on my side. After I switched on debugging and looked at the CSS, that is identical btw, it worked. No errors shown. Then I reimported the example again as a copy and only one of the two thermometers (i coupled booth to the same node) was working. And after I fiddled around a bit more, now booth thermometers are working.

I am doing this on my iPad currently lying in my bed at 0:30 :-) I try again tomorrow on my PC to get a bit deeper and keep you updated if I find something odd.

PS: Thank you very much for your time and effort to solve some single user problems. I am totally blown away by your patient support.

[bartbutenaers]

Hi @lemny, You are welcome! Glad to hear that it sorted out. Browsers indeed behave strange from time to time... Please don't forget to close this issue afterwards.

[lemny]

So now on my PC I figured the style/attribute difference thanks to your debug messages. I am still not sure what the problem was with unchanged examples but now it is working as intended, even with my own floor plan. Looks like it was some kind of "error code 40" as we say for "40cm in front of the PC" 😉