Hello, need help with node 'node-red-contrib-ui-svg'.
I'm want to update class but it's only updating once and doesn't update the second time i.e. when blink_red is pushed the rect in svg blinks red but when blink_blue is pushed it doesn't work. Am I missing something?
Is this related to node or browser? Is there any solution to this?
sharing code below;
[
{
"id": "c12e1ff2fbf4887b",
"type": "ui_svg_graphics",
"z": "76372f87eed91325",
"group": "9c199e9883de9cd2",
"order": 0,
"width": "10",
"height": "9",
"svgString": "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<!-- Created with Inkscape (http://www.inkscape.org/) -->\n\n<svg width=\"97.206085mm\" height=\"97.206085mm\" viewBox=\"0 0 97.206085 97.206082\" version=\"1.1\" id=\"svg1\"\n inkscape:version=\"1.4 (86a8ad7, 2024-10-11)\" sodipodi:docname=\"test.svg\"\n xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"\n xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:svg=\"http://www.w3.org/2000/svg\">\n <sodipodi:namedview id=\"namedview1\" pagecolor=\"#ffffff\" bordercolor=\"#666666\" borderopacity=\"1.0\"\n inkscape:showpageshadow=\"2\" inkscape:pageopacity=\"0.0\" inkscape:pagecheckerboard=\"0\" inkscape:deskcolor=\"#d1d1d1\"\n inkscape:document-units=\"mm\" inkscape:zoom=\"0.25612023\" inkscape:cx=\"683.27285\" inkscape:cy=\"322.11434\"\n inkscape:window-width=\"1366\" inkscape:window-height=\"705\" inkscape:window-x=\"-8\" inkscape:window-y=\"-8\"\n inkscape:window-maximized=\"1\" inkscape:current-layer=\"g1\" />\n <defs id=\"defs1\" />\n <g inkscape:label=\"Layer 1\" inkscape:groupmode=\"layer\" id=\"layer1\" transform=\"translate(-33.007392,-36.623042)\">\n <g id=\"g1\">\n <rect style=\"fill:#1a1a1a;stroke:#1a1a1a;stroke-width:0.1;stroke-linecap:round;paint-order:fill markers stroke\"\n id=\"rect3\" width=\"36.156521\" height=\"32.540871\" x=\"63.532173\" y=\"68.95565\" class=\"rect3\" />\n </g>\n </g>\n</svg>",
"clickableShapes": [],
"javascriptHandlers": [],
"smilAnimations": [],
"bindings": [],
"showCoordinates": false,
"autoFormatAfterEdit": false,
"showBrowserErrors": false,
"showBrowserEvents": false,
"enableJsDebugging": false,
"sendMsgWhenLoaded": false,
"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 color: var(--nr-dashboard-widgetColor);\n fill: currentColor !important;\n}\n\ndiv.ui-svg path {fill: inherit;}\n\n\n/*------------------------------------------------*/\n@keyframes blink_red {\n\n 100%,\n 0% {fill: #550000;}\n 60% {fill: #ff0000;}\n}\n\n.blink_red {animation: blink_red 0.8s infinite;}\n\n@keyframes blink_blue {\n 100%,\n 0% {fill: #003c55;}\n 60% {fill: #00adf7;}\n}\n\n.blink_blue {animation: blink_blue 0.8s infinite;}",
"name": "",
"x": 520,
"y": 440,
"wires": [
[]
]
},
{
"id": "ae14cc1edc5d20d3",
"type": "function",
"z": "76372f87eed91325",
"name": "blink_red",
"func": "msg.payload = [\n { \"command\": \"update_attribute\", \"selector\": \".rect3\", \"attributeName\": \"class\", \"attributeValue\": 'blink_red' },\n];\n\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 320,
"y": 420,
"wires": [
[
"c12e1ff2fbf4887b"
]
]
},
{
"id": "cf356c7110905e1c",
"type": "inject",
"z": "76372f87eed91325",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 195,
"y": 420,
"wires": [
[
"ae14cc1edc5d20d3"
]
],
"l": false
},
{
"id": "31682fc1da5a39df",
"type": "function",
"z": "76372f87eed91325",
"name": "blink_blue",
"func": "msg.payload = [\n { \"command\": \"update_attribute\", \"selector\": \".rect3\", \"attributeName\": \"class\", \"attributeValue\": 'blink_blue' },\n];\n\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 320,
"y": 460,
"wires": [
[
"c12e1ff2fbf4887b"
]
]
},
{
"id": "24b7ce2d93d6421b",
"type": "inject",
"z": "76372f87eed91325",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 195,
"y": 460,
"wires": [
[
"31682fc1da5a39df"
]
],
"l": false
},
{
"id": "9c199e9883de9cd2",
"type": "ui_group",
"name": "Group 1",
"tab": "71c6ecad02ee5d1a",
"order": 1,
"disp": false,
"width": "10",
"collapse": false,
"className": ""
},
{
"id": "71c6ecad02ee5d1a",
"type": "ui_tab",
"name": "Tab 1",
"icon": "dashboard",
"order": 2,
"disabled": false,
"hidden": false
}
]
got the solution - instead of class "selector": ".class" now using "selector": "