Hello,
I am currently using the node-red-contrib-ui-svg to make SVG images. I was wondering if it could be possible to make the images responsive so that users could be able to view them properly on their phones.
[{"id":"d11ebb3602cde1ef","type":"tab","label":"Flow 13","disabled":false,"info":""},{"id":"d9b7919a24dc7f04","type":"debug","z":"d11ebb3602cde1ef","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":590,"y":200,"wires":[]},{"id":"5536469882ad1324","type":"inject","z":"d11ebb3602cde1ef","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":180,"y":180,"wires":[["f45eddd3917269f8"]]},{"id":"f540690c78fb2766","type":"inject","z":"d11ebb3602cde1ef","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":190,"y":220,"wires":[["f45eddd3917269f8"]]},{"id":"f45eddd3917269f8","type":"ui_svg_graphics","z":"d11ebb3602cde1ef","group":"2cf10f156241ce22","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 500 500\" width=\"100%\" height=\"auto\" 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=\"-134.095000\" width=\"409.529000\" height=\"242.384000\" rx=\"25\" ry=\"25\" y=\"161.130000\" bx:origin=\"0.5 0.499805\" transform=\"matrix(1.52046 0 0 1.52046 269.576 -180.842)\" />\n <circle style=\"fill: rgb(216, 216, 216); stroke: rgb(0, 6, 90);\" cx=\"68.913800\" cy=\"316.271000\" r=\"30.000000\" transform=\"matrix(1.52046 0 0 1.52046 269.576 -180.842)\" />\n <path d=\"M-28.673966-54.962097H17.343034L17.343034-58.808097L24.021034-53.680097L17.343034-48.552097L17.343034-52.398097H-28.673966V-54.962097Z\" style=\"stroke: rgb(0, 24, 97); fill: rgb(0, 24, 97);\" transform=\"matrix(1.03704 -1.11191 0.960964 1.19888 428.572 360.775)\" bx:shape=\"arrow 110.407 66.237 52.695 10.256 2.564 6.678 0 1@fa8cf3b1\" id=\"selectorSwitch\" />\n <circle style=\"fill: rgb(110, 114, 110); stroke: rgb(0, 0, 0);\" cx=\"-70.708000\" cy=\"340.182000\" r=\"27.759000\" transform=\"matrix(1.52046 0 0 1.52046 269.576 -180.842)\" />\n <circle style=\"stroke: rgb(0, 0, 0); fill: rgb(195, 191, 195);\" cx=\"-70.748000\" cy=\"340.005000\" r=\"25.531000\" transform=\"matrix(1.52046 0 0 1.52046 269.576 -180.842)\" />\n <circle style=\"stroke: rgb(0, 0, 0); fill: rgb(69, 255, 1);\" cx=\"-70.824000\" cy=\"340.553000\" r=\"24.576000\" transform=\"matrix(1.52046 0 0 1.52046 269.576 -180.842)\" id=\"button2\" />\n <circle style=\"fill: rgb(110, 114, 110); stroke: rgb(0, 0, 0);\" cx=\"-70.708000\" cy=\"218.182000\" r=\"27.759000\" transform=\"matrix(1.52046 0 0 1.52046 269.576 -180.842)\" />\n <circle style=\"stroke: rgb(0, 0, 0); fill: rgb(195, 191, 195);\" cx=\"-70.748000\" cy=\"218.005000\" r=\"25.531000\" transform=\"matrix(1.52046 0 0 1.52046 269.576 -180.842)\" />\n <circle style=\"stroke: rgb(0, 0, 0); fill:green;\" cx=\"-70.824000\" cy=\"218.553000\" r=\"24.576000\" transform=\"matrix(1.52046 0 0 1.52046 269.576 -180.842)\" id=\"button1\" />\n <circle style=\"fill: rgb(110, 114, 110); stroke: rgb(0, 0, 0);\" cx=\"212.196000\" cy=\"339.856000\" r=\"27.759000\" transform=\"matrix(1.52046 0 0 1.52046 269.576 -180.842)\" />\n <circle style=\"stroke: rgb(0, 0, 0); fill: rgb(195, 191, 195);\" cx=\"212.156000\" cy=\"339.679000\" r=\"25.531000\" transform=\"matrix(1.52046 0 0 1.52046 269.576 -180.842)\" />\n <circle style=\"stroke: rgb(0, 0, 0); fill: rgb(65, 159, 31);\" cx=\"212.080000\" cy=\"340.227000\" r=\"24.576000\" transform=\"matrix(1.52046 0 0 1.52046 269.576 -180.842)\" id=\"button3\" />\n <path d=\"M215.414146-52.960816H261.431146L261.431146-56.806816L268.109146-51.678816L261.431146-46.550816L261.431146-50.396816H215.414146V-52.960816Z\" style=\"stroke: rgb(0, 24, 97); fill: rgb(0, 24, 97); visibility: hidden;\" transform=\"matrix(-1.09365 -1.05629 1.21547 -0.939904 701.438 506.74)\" bx:shape=\"arrow 110.407 66.237 52.695 10.256 2.564 6.678 0 1@fa8cf3b1\" />\n <path d=\"M-2.686177-3.619665l-2,2v4l2,2h4l2-2v-4l-2-2Z\" style=\"fill:rosybrown; stroke:black; vector-effect:non-scaling-stroke;stroke-width:1px;\" id=\"mainButton\" transform=\"matrix(12.338 0 0 12.338 599.189 159.483)\" />\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 ({command: \"update_style\", selector: \"#button2On\",attributeName: fill,\"attributeValue\": \"rgb(255, 0, 0)\"});\n}\nelse {\n $scope.send({payload: 0, topic: \"BUTTON_3\"});\n ({command: \"update_style\", selector: \"#button2Off\",attributeName: fill,\"attributeValue\": \"rgb(69, 255, 1)\"});\n}"},{"selector":"#mainButton","action":"click","sourceCode":"if (this.style.fill == \"rgb(69, 255, 1)\") {\n $scope.send({payload: 1, topic: \"BUTTON_3\"});\n ({command: \"update_style\", selector: \"#button2On\",attributeName: fill,\"attributeValue\": \"rgb(255, 0, 0)\"});\n}\nelse {\n $scope.send({payload: 0, topic: \"BUTTON_3\"});\n ({command: \"update_style\", selector: \"#button2Off\",attributeName: fill,\"attributeValue\": \"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}\n\ndiv.ui-svg path {\n fill: inherit !important;\n}\n","name":"","x":410,"y":200,"wires":[["d9b7919a24dc7f04"]]},{"id":"2cf10f156241ce22","type":"ui_group","name":"Default","tab":"b88a4a3fd4954823","order":1,"disp":true,"width":"30","collapse":false,"className":""},{"id":"b88a4a3fd4954823","type":"ui_tab","name":"Dashboard","icon":"dashboard","disabled":false,"hidden":false}]
Thank you,
NoviceUser
