Hello,
I am new to node-red and was having trouble using the node called node-red-contrib-ui-svg, I have created three buttons when pressed I would like to change to green, indicating it's on and then if it's pressed again it would turn red indicating it's off. I have managed to change the state of the button once but was unable to change the state again.
Thank you for your help!
Hi @NoviceUser,
It is easier for us if you export your flow and share it with us. Of course a simplified version, only containing the relevant stuff...
I am not sure why you use onclick == true?
Your code snippet will be triggered when the button is clicked, so you know that it is clicked. Otherwise you wouldn't arrive at this code...
Here is an example that changes color (between red and green) every time you click it:
[{"id":"795769ff.1d2ab8","type":"ui_svg_graphics","z":"4a680cc36387c937","group":"8d3148e0.0eee88","order":2,"width":"24","height":"14","svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:drawsvg=\"http://www.drawsvg.org\" id=\"svgMap\" x=\"0\" y=\"0\" viewBox=\"0 0 1920 1200\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\n<circle id=\"mycircle\" cx=\"50\" cy=\"50\" r=\"40\" stroke=\"none\" fill=\"red\" />\n</svg>","clickableShapes":[],"javascriptHandlers":[{"selector":"#mycircle","action":"click","sourceCode":"if ($(this).attr(\"fill\") == \"red\") {\n $(this).attr(\"fill\", \"green\");\n}\nelse {\n $(this).attr(\"fill\", \"red\");\n}"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":true,"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}\ndiv.ui-svg path {\n fill: inherit !important;\n}","name":"","x":980,"y":860,"wires":[[]]},{"id":"8d3148e0.0eee88","type":"ui_group","name":"7Shield","tab":"9cdb817b.45e12","order":1,"disp":false,"width":"24","collapse":false,"className":""},{"id":"9cdb817b.45e12","type":"ui_tab","name":"Energy","icon":"dashboard","order":41,"disabled":false,"hidden":false}]
Bart
Hello @BartButenaers,
Thank you for your reply. I was trying to make the image of the button a boolean, so when clicked it gives a 1 then turns green and when clicked again it gives a 0 then turns red.
There are alot of restrictions on new users that prevent me from sharing my json. I have attached a google drive link to the json file. Thank you again for your help!
NoviceUser
You can you please try this updated flow:
[{"id":"3bb18076c36e50b5","type":"debug","z":"b6c46bbc8cfc81cb","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":860,"y":160,"wires":[]},{"id":"41c94798ebea186c","type":"ui_svg_graphics","z":"b6c46bbc8cfc81cb","group":"c20e25fb6de0c5b9","order":1,"width":0,"height":0,"svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:bx=\"https://boxy-svg.com\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 1000 700\" width=\"1000\" height=\"700\" preserveAspectRatio=\"xMidYMid meet\">\n <rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"500\" height=\"500\" style=\"fill:none;stroke:none;\" />\n <rect style=\"fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0);\" x=\"-79.533200\" width=\"409.529000\" height=\"242.384000\" rx=\"25\" ry=\"25\" y=\"153.757000\" bx:origin=\"0.5 0.499805\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" />\n <circle style=\"fill: rgb(216, 216, 216); stroke: rgb(0, 6, 90);\" cx=\"123.476000\" cy=\"308.898000\" r=\"30.000000\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" />\n <path d=\"M19.008435-20.089736H65.025435L65.025435-23.935736L71.703435-18.807736L65.025435-13.679736L65.025435-17.525736H19.008435V-20.089736Z\" style=\"stroke: rgb(0, 24, 97); fill: rgb(0, 24, 97);\" transform=\"matrix(1.53463 -1.64542 1.42205 1.77413 483.344 527.993)\" bx:shape=\"arrow 110.407 66.237 52.695 10.256 2.564 6.678 0 1@fa8cf3b1\" id=\"selectorSwitch\" />\n <text style=\"fill: rgb(92, 22, 22); font-family: Arial, sans-serif; font-size: 10.2px; white-space: pre;\" transform=\"matrix(1.97176 0 0 2.27961 316.859 -220.896)\">\n <tspan x=\"85.3796\" y=\"233.882\">*Selector </tspan>\n <tspan x=\"85.3796\" dy=\"1em\">​</tspan>\n <tspan> switch</tspan>\n </text>\n <circle style=\"fill: rgb(110, 114, 110); stroke: rgb(0, 0, 0);\" cx=\"-16.145800\" cy=\"332.809000\" r=\"27.759000\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" />\n <circle style=\"stroke: rgb(0, 0, 0); fill: rgb(195, 191, 195);\" cx=\"-16.185800\" cy=\"332.632000\" r=\"25.531000\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" />\n <circle style=\"stroke: rgb(0, 0, 0); fill: rgb(69, 255, 1);\" cx=\"-16.261800\" cy=\"333.180000\" r=\"24.576000\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" id=\"button2\" />\n <circle style=\"fill: rgb(110, 114, 110); stroke: rgb(0, 0, 0);\" cx=\"-16.145800\" cy=\"210.809000\" r=\"27.759000\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" />\n <circle style=\"stroke: rgb(0, 0, 0); fill: rgb(195, 191, 195);\" cx=\"-16.185800\" cy=\"210.632000\" r=\"25.531000\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" />\n <circle style=\"stroke: rgb(0, 0, 0); fill:green;\" cx=\"-16.261800\" cy=\"211.180000\" r=\"24.576000\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" id=\"button1\" />\n <circle style=\"fill: rgb(110, 114, 110); stroke: rgb(0, 0, 0);\" cx=\"266.758000\" cy=\"332.483000\" r=\"27.759000\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" />\n <circle style=\"stroke: rgb(0, 0, 0); fill: rgb(195, 191, 195);\" cx=\"266.718000\" cy=\"332.306000\" r=\"25.531000\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" />\n <circle style=\"stroke: rgb(0, 0, 0); fill: rgb(65, 159, 31);\" cx=\"266.642000\" cy=\"332.854000\" r=\"24.576000\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" id=\"button3\" />\n <path d=\"M187.579844-9.752301H233.596844L233.596844-13.598301L240.274844-8.470301L233.596844-3.342301L233.596844-7.188301H187.579844V-9.752301Z\" style=\"stroke: rgb(0, 24, 97); fill: rgb(0, 24, 97); visibility: hidden;\" transform=\"matrix(-1.61839 -1.56311 1.79867 -1.39087 887.132 743.994)\" bx:shape=\"arrow 110.407 66.237 52.695 10.256 2.564 6.678 0 1@fa8cf3b1\" />\n</svg>","clickableShapes":[],"javascriptHandlers":[{"selector":"#button1","action":"click","sourceCode":"if (this.style.fill == \"rgb(69, 255, 1)\") {\n $scope.send({payload: 1, topic: \"BUTTON_3\"});\n this.style.fill = \"rgb(255, 0, 0)\";\n}\nelse {\n $scope.send({payload: 0, topic: \"BUTTON_3\"});\n this.style.fill = \"rgb(69, 255, 1)\";\n}"},{"selector":"#button2","action":"click","sourceCode":"if (this.style.fill == \"rgb(69, 255, 1)\") {\n $scope.send({payload: 1, topic: \"BUTTON_3\"});\n this.style.fill = \"rgb(255, 0, 0)\";\n}\nelse {\n $scope.send({payload: 0, topic: \"BUTTON_3\"});\n this.style.fill = \"rgb(69, 255, 1)\";\n}"},{"selector":"#button3","action":"click","sourceCode":"if (this.style.fill == \"rgb(69, 255, 1)\") {\n $scope.send({payload: 1, topic: \"BUTTON_3\"});\n this.style.fill = \"rgb(255, 0, 0)\";\n}\nelse {\n $scope.send({payload: 0, topic: \"BUTTON_3\"});\n this.style.fill = \"rgb(69, 255, 1)\";\n}"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":true,"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}\ndiv.ui-svg path {\n fill: inherit !important;\n}","name":"","x":680,"y":160,"wires":[["3bb18076c36e50b5"]]},{"id":"c20e25fb6de0c5b9","type":"ui_group","name":"Racking Remote","tab":"a28ff08f.3a822","order":1,"disp":true,"width":"30","collapse":false,"className":""},{"id":"a28ff08f.3a822","type":"ui_tab","name":"SVG","icon":"dashboard","order":38,"disabled":false,"hidden":false}]
Note that you might have to update the rgb colors, to fit your needs.
I have also added a topic to the output messages, so you know afterwards which message belongs to which button.
Hello @BartButenaers,
I really appreciate your help, it's great! thank you!
I had a couple of questions, If I were to inject a payload containing the number 1, would the button turn green or if I injected a 0 would it turn red? Do you by chance know how to make the svg dashboard responsive?
Thank you again for your help!
You can do it as described here.
Example for button2:
[{"id":"017b802aae874bc4","type":"debug","z":"b6c46bbc8cfc81cb","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":770,"y":220,"wires":[]},{"id":"fe8deaee5c60fbad","type":"ui_svg_graphics","z":"b6c46bbc8cfc81cb","group":"c20e25fb6de0c5b9","order":1,"width":0,"height":0,"svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:bx=\"https://boxy-svg.com\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 1000 700\" width=\"1000\" height=\"700\" preserveAspectRatio=\"xMidYMid meet\">\n <rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"500\" height=\"500\" style=\"fill:none;stroke:none;\" />\n <rect style=\"fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0);\" x=\"-79.533200\" width=\"409.529000\" height=\"242.384000\" rx=\"25\" ry=\"25\" y=\"153.757000\" bx:origin=\"0.5 0.499805\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" />\n <circle style=\"fill: rgb(216, 216, 216); stroke: rgb(0, 6, 90);\" cx=\"123.476000\" cy=\"308.898000\" r=\"30.000000\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" />\n <path d=\"M19.008435-20.089736H65.025435L65.025435-23.935736L71.703435-18.807736L65.025435-13.679736L65.025435-17.525736H19.008435V-20.089736Z\" style=\"stroke: rgb(0, 24, 97); fill: rgb(0, 24, 97);\" transform=\"matrix(1.53463 -1.64542 1.42205 1.77413 483.344 527.993)\" bx:shape=\"arrow 110.407 66.237 52.695 10.256 2.564 6.678 0 1@fa8cf3b1\" id=\"selectorSwitch\" />\n <text style=\"fill: rgb(92, 22, 22); font-family: Arial, sans-serif; font-size: 10.2px; white-space: pre;\" transform=\"matrix(1.97176 0 0 2.27961 316.859 -220.896)\">\n <tspan x=\"85.3796\" y=\"233.882\">*Selector </tspan>\n <tspan x=\"85.3796\" dy=\"1em\">​</tspan>\n <tspan> switch</tspan>\n </text>\n <circle style=\"fill: rgb(110, 114, 110); stroke: rgb(0, 0, 0);\" cx=\"-16.145800\" cy=\"332.809000\" r=\"27.759000\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" />\n <circle style=\"stroke: rgb(0, 0, 0); fill: rgb(195, 191, 195);\" cx=\"-16.185800\" cy=\"332.632000\" r=\"25.531000\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" />\n <circle style=\"stroke: rgb(0, 0, 0); fill: rgb(69, 255, 1);\" cx=\"-16.261800\" cy=\"333.180000\" r=\"24.576000\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" id=\"button2\" />\n <circle style=\"fill: rgb(110, 114, 110); stroke: rgb(0, 0, 0);\" cx=\"-16.145800\" cy=\"210.809000\" r=\"27.759000\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" />\n <circle style=\"stroke: rgb(0, 0, 0); fill: rgb(195, 191, 195);\" cx=\"-16.185800\" cy=\"210.632000\" r=\"25.531000\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" />\n <circle style=\"stroke: rgb(0, 0, 0); fill:green;\" cx=\"-16.261800\" cy=\"211.180000\" r=\"24.576000\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" id=\"button1\" />\n <circle style=\"fill: rgb(110, 114, 110); stroke: rgb(0, 0, 0);\" cx=\"266.758000\" cy=\"332.483000\" r=\"27.759000\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" />\n <circle style=\"stroke: rgb(0, 0, 0); fill: rgb(195, 191, 195);\" cx=\"266.718000\" cy=\"332.306000\" r=\"25.531000\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" />\n <circle style=\"stroke: rgb(0, 0, 0); fill: rgb(65, 159, 31);\" cx=\"266.642000\" cy=\"332.854000\" r=\"24.576000\" transform=\"matrix(2.25 0 0 2.25 248.065 -273.5)\" id=\"button3\" />\n <path d=\"M187.579844-9.752301H233.596844L233.596844-13.598301L240.274844-8.470301L233.596844-3.342301L233.596844-7.188301H187.579844V-9.752301Z\" style=\"stroke: rgb(0, 24, 97); fill: rgb(0, 24, 97); visibility: hidden;\" transform=\"matrix(-1.61839 -1.56311 1.79867 -1.39087 887.132 743.994)\" bx:shape=\"arrow 110.407 66.237 52.695 10.256 2.564 6.678 0 1@fa8cf3b1\" />\n</svg>","clickableShapes":[],"javascriptHandlers":[{"selector":"#button1","action":"click","sourceCode":"if (this.style.fill == \"rgb(69, 255, 1)\") {\n $scope.send({payload: 1, topic: \"BUTTON_3\"});\n this.style.fill = \"rgb(255, 0, 0)\";\n}\nelse {\n $scope.send({payload: 0, topic: \"BUTTON_3\"});\n this.style.fill = \"rgb(69, 255, 1)\";\n}"},{"selector":"#button2","action":"click","sourceCode":"if (this.style.fill == \"rgb(69, 255, 1)\") {\n $scope.send({payload: 1, topic: \"BUTTON_3\"});\n this.style.fill = \"rgb(255, 0, 0)\";\n}\nelse {\n $scope.send({payload: 0, topic: \"BUTTON_3\"});\n this.style.fill = \"rgb(69, 255, 1)\";\n}"},{"selector":"#button3","action":"click","sourceCode":"if (this.style.fill == \"rgb(69, 255, 1)\") {\n $scope.send({payload: 1, topic: \"BUTTON_3\"});\n this.style.fill = \"rgb(255, 0, 0)\";\n}\nelse {\n $scope.send({payload: 0, topic: \"BUTTON_3\"});\n this.style.fill = \"rgb(69, 255, 1)\";\n}"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":true,"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}\ndiv.ui-svg path {\n fill: inherit !important;\n}","name":"","x":590,"y":220,"wires":[["017b802aae874bc4"]]},{"id":"d920d647bde88581","type":"inject","z":"b6c46bbc8cfc81cb","name":"Button 2 green","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"update_style\",\"selector\":\"#button2\",\"attributeName\":\"fill\",\"attributeValue\":\"rgb(69, 255, 1)\"}","payloadType":"json","x":360,"y":200,"wires":[["fe8deaee5c60fbad"]]},{"id":"ae89562cf6b6dc5c","type":"inject","z":"b6c46bbc8cfc81cb","name":"Button 2 red","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"update_style\",\"selector\":\"#button2\",\"attributeName\":\"fill\",\"attributeValue\":\"rgb(255, 0, 0)\"}","payloadType":"json","x":370,"y":240,"wires":[["fe8deaee5c60fbad"]]},{"id":"c20e25fb6de0c5b9","type":"ui_group","name":"Racking Remote","tab":"a28ff08f.3a822","order":1,"disp":true,"width":"30","collapse":false,"className":""},{"id":"a28ff08f.3a822","type":"ui_tab","name":"SVG","icon":"dashboard","order":38,"disabled":false,"hidden":false}]
@BartButenaers thank you! You have been a tremendous help!
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy