@Steve-Mcl: Thanks for the nice demo. Will add it to our wiki as soon as I have time.
@d0d04m3: I have implemented your feature request on the "panzoom" branch of our Github repository, which I hope to release in the near future as the 2.0.0 release. If somebody wants to test it, then you can install the branch directly from Github (in your Node-RED folder):
npm install bartbutenaers/node-red-contrib-ui-svg#panzoom
A short summary:
While permanently clickable shapes are being enumerated in the config screen, it is also possible to make shapes (un)clickable via input messages. Example content of the msg.payload to make 'circle_1' unclickable and 'circle_2' clickable:
[{
command : "remove_event",
event : "click",
selector : "#circle_1"
},
{
command : "add_event",
event : "click",
selector : "#circle_2",
payload : "circle 2 has been clicked",
topic : "CIRCLE_CLICKED"
}]
I have created quickly a demo game, based on this new feature:
[{"id":"7775c39b.91f56c","type":"ui_svg_graphics","z":"24d4dcbf.c53534","group":"35642e22.275302","order":1,"width":"11","height":"11","svgString":"<svg id=\"Capa_1\" enable-background=\"new 0 0 512 512\" height=\"512\" viewBox=\"0 0 512 512\" width=\"512\" xmlns=\"http://www.w3.org/2000/svg\">\n <g>\n <g>\n <g>\n <path d=\"m223.774 102.27c-3.863 0-7.306-2.718-8.089-6.645l-6.452-32.399c-.895-4.472 2.008-8.823 6.484-9.714 4.516-.867 8.815 2.016 9.71 6.488l6.452 32.399c.895 4.472-2.008 8.823-6.484 9.714-.548.105-1.089.157-1.621.157z\" fill=\"#c3ddff\" />\n </g>\n <g>\n <path d=\"m294.661 458.645c-3.863 0-7.306-2.718-8.089-6.645l-6.452-32.399c-.895-4.472 2.008-8.823 6.484-9.714 4.516-.867 8.815 2.016 9.71 6.488l6.452 32.399c.895 4.472-2.008 8.823-6.484 9.714-.548.105-1.088.157-1.621.157z\" fill=\"#c3ddff\" />\n </g>\n <g>\n <g>\n <path d=\"m417.976 232.036c-3.863 0-7.306-2.718-8.089-6.649-.895-4.472 2.016-8.819 6.484-9.71l32.403-6.444c4.508-.859 8.823 2.016 9.71 6.492.895 4.472-2.016 8.819-6.484 9.71l-32.403 6.444c-.549.105-1.089.157-1.621.157z\" fill=\"#c3ddff\" />\n </g>\n <g>\n <path d=\"m61.605 302.923c-3.863 0-7.306-2.718-8.089-6.649-.895-4.472 2.016-8.819 6.484-9.71l32.403-6.444c4.532-.859 8.823 2.016 9.71 6.492.895 4.472-2.016 8.819-6.484 9.71l-32.403 6.444c-.549.105-1.089.157-1.621.157z\" fill=\"#c3ddff\" />\n </g>\n </g>\n <g>\n <g>\n <path d=\"m347.75 126.931c-1.581 0-3.169-.452-4.581-1.391-3.79-2.536-4.815-7.665-2.274-11.456l18.355-27.464c2.532-3.794 7.669-4.798 11.452-2.278 3.79 2.536 4.815 7.665 2.274 11.456l-18.355 27.464c-1.589 2.383-4.202 3.669-6.871 3.669z\" fill=\"#c3ddff\" />\n </g>\n <g>\n <path d=\"m145.879 429.048c-1.581 0-3.169-.452-4.581-1.391-3.79-2.536-4.815-7.665-2.274-11.456l18.355-27.464c2.532-3.79 7.661-4.794 11.452-2.278 3.79 2.536 4.815 7.665 2.274 11.456l-18.355 27.464c-1.589 2.383-4.202 3.669-6.871 3.669z\" fill=\"#c3ddff\" />\n </g>\n <g>\n <g>\n <path d=\"m420.782 374.367c-1.573 0-3.169-.452-4.581-1.391l-27.468-18.351c-3.79-2.532-4.815-7.661-2.274-11.456 2.524-3.786 7.645-4.823 11.452-2.278l27.468 18.351c3.79 2.532 4.815 7.661 2.274 11.456-1.588 2.383-4.201 3.669-6.871 3.669z\" fill=\"#c3ddff\" />\n </g>\n <g>\n <path d=\"m118.669 172.5c-1.573 0-3.169-.452-4.581-1.391l-27.468-18.351c-3.79-2.532-4.815-7.661-2.274-11.456 2.524-3.79 7.645-4.819 11.452-2.278l27.468 18.351c3.79 2.532 4.815 7.661 2.274 11.456-1.588 2.383-4.201 3.669-6.871 3.669z\" fill=\"#c3ddff\" />\n </g>\n </g>\n </g>\n <g>\n <g>\n <path d=\"m164.25 126.931c-2.669 0-5.282-1.286-6.871-3.669l-18.355-27.464c-2.54-3.79-1.516-8.919 2.274-11.456 3.806-2.536 8.927-1.516 11.452 2.278l18.355 27.464c2.54 3.79 1.516 8.919-2.274 11.456-1.412.94-3.008 1.391-4.581 1.391z\" fill=\"#c3ddff\" />\n </g>\n <g>\n <path d=\"m366.121 429.048c-2.669 0-5.282-1.286-6.871-3.669l-18.355-27.464c-2.54-3.79-1.516-8.919 2.274-11.456 3.806-2.54 8.927-1.512 11.452 2.278l18.355 27.464c2.54 3.79 1.516 8.919-2.274 11.456-1.412.94-3.008 1.391-4.581 1.391z\" fill=\"#c3ddff\" />\n </g>\n <g>\n <g>\n <path d=\"m393.331 172.5c-2.669 0-5.282-1.286-6.871-3.669-2.54-3.794-1.516-8.923 2.274-11.456l27.468-18.351c3.798-2.54 8.919-1.512 11.452 2.278 2.54 3.794 1.516 8.923-2.274 11.456l-27.468 18.351c-1.412.939-3.009 1.391-4.581 1.391z\" fill=\"#c3ddff\" />\n </g>\n <g>\n <path d=\"m91.218 374.367c-2.669 0-5.282-1.286-6.871-3.669-2.54-3.794-1.516-8.923 2.274-11.456l27.468-18.351c3.798-2.544 8.919-1.508 11.452 2.278 2.54 3.794 1.516 8.923-2.274 11.456l-27.468 18.351c-1.412.939-3.009 1.391-4.581 1.391z\" fill=\"#c3ddff\" />\n </g>\n </g>\n <g>\n <g>\n <path d=\"m288.226 102.27c-.532 0-1.073-.052-1.621-.157-4.476-.891-7.379-5.242-6.484-9.714l6.452-32.399c.887-4.472 5.194-7.347 9.71-6.488 4.476.891 7.379 5.242 6.484 9.714l-6.452 32.399c-.783 3.927-4.226 6.645-8.089 6.645z\" fill=\"#c3ddff\" />\n </g>\n <g>\n <path d=\"m217.339 458.645c-.532 0-1.073-.052-1.621-.157-4.476-.891-7.379-5.242-6.484-9.714l6.452-32.399c.887-4.472 5.194-7.347 9.71-6.488 4.476.891 7.379 5.242 6.484 9.714l-6.453 32.399c-.782 3.927-4.225 6.645-8.088 6.645z\" fill=\"#c3ddff\" />\n </g>\n <g>\n <g>\n <path d=\"m450.395 302.923c-.532 0-1.073-.052-1.621-.157l-32.403-6.444c-4.468-.891-7.379-5.238-6.484-9.71.887-4.476 5.177-7.343 9.71-6.492l32.403 6.445c4.468.891 7.379 5.238 6.484 9.71-.782 3.931-4.226 6.648-8.089 6.648z\" fill=\"#c3ddff\" />\n </g>\n <g>\n <path d=\"m94.024 232.036c-.532 0-1.073-.052-1.621-.157l-32.403-6.444c-4.468-.891-7.379-5.238-6.484-9.71.887-4.476 5.169-7.343 9.71-6.492l32.403 6.444c4.468.891 7.379 5.238 6.484 9.71-.782 3.932-4.226 6.649-8.089 6.649z\" fill=\"#c3ddff\" />\n </g>\n </g>\n </g>\n </g>\n </g>\n <path d=\"m64.635 147.122h16.516v66.065h-16.516z\" fill=\"#ffd064\" transform=\"matrix(.383 -.924 .924 .383 -121.443 178.557)\" />\n <circle id=\"circle_1\" cx=\"34.746\" cy=\"164.353\" fill=\"#ffe07d\" r=\"16.516\" />\n <path d=\"m430.849 298.813h16.516v66.065h-16.516z\" fill=\"#ffd064\" transform=\"matrix(-.383 .924 -.924 -.383 913.731 53.155)\" />\n <circle id=\"circle_2\" cx=\"477.254\" cy=\"347.647\" fill=\"#ffe07d\" r=\"16.516\" />\n <path d=\"m171.897 406.075h16.516v66.065h-16.516z\" fill=\"#ffd064\" transform=\"matrix(-.924 -.383 .383 -.924 178.557 913.731)\" />\n <circle id=\"circle_3\" cx=\"164.353\" cy=\"477.254\" fill=\"#ffe07d\" r=\"16.516\" />\n <path d=\"m323.587 39.861h16.516v66.065h-16.516z\" fill=\"#ffd064\" transform=\"matrix(.924 .383 -.383 .924 53.155 -121.443)\" />\n <circle id=\"circle_4\" cx=\"347.647\" cy=\"34.746\" fill=\"#ffe07d\" r=\"16.516\" />\n <path d=\"m64.635 298.813h16.516v66.065h-16.516z\" fill=\"#ffd064\" transform=\"matrix(-.383 -.924 .924 -.383 -205.797 526.182)\" />\n <circle id=\"circle_5\" cx=\"34.746\" cy=\"347.647\" fill=\"#ffe07d\" r=\"16.516\" />\n <path d=\"m430.849 147.122h16.516v66.065h-16.516z\" fill=\"#ffd064\" transform=\"matrix(.383 .924 -.924 .383 437.509 -294.47)\" />\n <circle id=\"circle_6\" cx=\"477.254\" cy=\"164.353\" fill=\"#ffe07d\" r=\"16.516\" />\n <path d=\"m323.587 406.075h16.516v66.065h-16.516z\" fill=\"#ffd064\" transform=\"matrix(-.924 .383 -.383 -.924 806.47 717.797)\" />\n <circle id=\"circle_7\" cx=\"347.647\" cy=\"477.254\" fill=\"#ffe07d\" r=\"16.516\" />\n <path d=\"m171.897 39.861h16.516v66.065h-16.516z\" fill=\"#ffd064\" transform=\"matrix(.924 -.383 .383 .924 -14.182 74.491)\" />\n <circle id=\"circle_8\" cx=\"164.353\" cy=\"34.746\" fill=\"#ffe07d\" r=\"16.516\" />\n <path d=\"m107.598 82.824h16.516v66.065h-16.516z\" fill=\"#ffd064\" transform=\"matrix(.707 -.707 .707 .707 -47.989 115.856)\" />\n <circle id=\"circle_9\" cx=\"86.659\" cy=\"86.659\" fill=\"#ffe07d\" r=\"16.516\" />\n <path d=\"m387.886 363.112h16.516v66.065h-16.516z\" fill=\"#ffd064\" transform=\"matrix(-.707 .707 -.707 -.707 956.376 396.144)\" />\n <circle id=\"circle_10\" cx=\"425.341\" cy=\"425.341\" fill=\"#ffe07d\" r=\"16.516\" />\n <path d=\"m107.598 363.112h16.516v66.065h-16.516z\" fill=\"#ffd064\" transform=\"matrix(-.707 -.707 .707 -.707 -82.338 758.183)\" />\n <circle id=\"circle_11\" cx=\"86.659\" cy=\"425.341\" fill=\"#ffe07d\" r=\"16.516\" />\n <path d=\"m387.886 82.824h16.516v66.065h-16.516z\" fill=\"#ffd064\" transform=\"matrix(.707 .707 -.707 .707 197.951 -246.183)\" />\n <circle id=\"circle_12\" cx=\"425.341\" cy=\"86.659\" fill=\"#ffe07d\" r=\"16.516\" />\n <path d=\"m49.548 222.968h16.516v66.065h-16.516z\" fill=\"#ffd064\" transform=\"matrix(0 -1 1 0 -198.194 313.807)\" />\n <circle id=\"circle_13\" cx=\"16.516\" cy=\"256\" fill=\"#ffe07d\" r=\"16.516\" />\n <path d=\"m445.935 222.968h16.516v66.065h-16.516z\" fill=\"#ffd064\" transform=\"matrix(0 1 -1 0 710.194 -198.194)\" />\n <circle id=\"circle_14\" cx=\"495.484\" cy=\"256\" fill=\"#ffe07d\" r=\"16.516\" />\n <path d=\"m247.742 421.161h16.516v66.065h-16.516z\" fill=\"#ffd064\" transform=\"matrix(-1 0 0 -1 512 908.387)\" />\n <circle id=\"circle_15\" cx=\"256\" cy=\"495.484\" fill=\"#ffe07d\" r=\"16.516\" />\n <path d=\"m247.742 24.774h16.516v66.065h-16.516z\" fill=\"#ffd064\" />\n <circle id=\"circle_16\" cx=\"256\" cy=\"16.516\" fill=\"#ffe07d\" r=\"16.516\" />\n <path d=\"m429.419 256c0-95.777-77.642-173.419-173.419-173.419-40.528 0-77.808 13.902-107.333 37.197-40.25 31.758-60.167 80.973-60.167 136.222 0 95.777 71.723 168.667 167.5 168.667 55.266 0 104.494-21.099 136.25-61.37 23.279-29.519 37.169-66.786 37.169-107.297z\" fill=\"#ff8086\" />\n <path d=\"m284.903 400.516c-95.777 0-173.419-77.643-173.419-173.419 0-40.519 13.897-77.797 37.183-107.319-40.262 31.757-66.086 80.963-66.086 136.222 0 95.777 77.643 173.419 173.419 173.419 55.259 0 104.493-25.861 136.25-66.122-29.521 23.286-66.829 37.219-107.347 37.219z\" fill=\"#e5646e\" />\n <circle id=\"circle_17\" cx=\"256\" cy=\"206.452\" fill=\"#ffe07d\" r=\"16.516\" />\n <circle id=\"circle_18\" cx=\"256\" cy=\"305.548\" fill=\"#ffe07d\" r=\"16.516\" />\n <circle id=\"circle_19\" cx=\"305.548\" cy=\"256\" fill=\"#ffe07d\" r=\"16.516\" />\n <circle id=\"circle_20\" cx=\"206.452\" cy=\"256\" fill=\"#ffe07d\" r=\"16.516\" />\n <g>\n <path d=\"m208.597 149.835c-3.411 0-6.605-2.133-7.798-5.532-1.5-4.306.766-9.016 5.073-10.524 4.298-1.508 9.048.75 10.565 5.052 1.5 4.306-.726 9-5.032 10.508l-.081.028c-.905.314-1.824.468-2.727.468z\" fill=\"#c3ddff\" />\n </g>\n <g>\n <path d=\"m370.444 216.875c-3.274 0-6.379-1.968-7.669-5.194-1.694-4.238.371-9.04 4.605-10.738 4.21-1.681 9.073.347 10.774 4.585 1.694 4.238-.331 9.024-4.565 10.722l-.081.032c-1 .399-2.04.593-3.064.593z\" fill=\"#c3ddff\" />\n </g>\n <g>\n <path d=\"m141.573 311.681c-3.169 0-6.185-1.831-7.556-4.907-1.847-4.169.024-9.048 4.194-10.899 4.185-1.855 9.089.008 10.935 4.173 1.855 4.169.016 9.032-4.153 10.883l-.073.032c-1.089.489-2.226.718-3.347.718z\" fill=\"#c3ddff\" />\n </g>\n <g>\n <path d=\"m303.403 378.718c-3.411 0-6.605-2.133-7.798-5.532-1.5-4.306.766-9.016 5.073-10.524 4.29-1.52 9.048.746 10.565 5.052 1.5 4.306-.726 9-5.032 10.508l-.081.028c-.904.315-1.824.468-2.727.468z\" fill=\"#c3ddff\" />\n </g>\n <g>\n <path d=\"m141.573 216.895c-1.121 0-2.258-.23-3.347-.718-4.169-1.851-6.04-6.73-4.194-10.899 1.855-4.161 6.758-6.085 10.919-4.226 4.169 1.851 6.056 6.694 4.21 10.863l-.032.073c-1.371 3.077-4.387 4.907-7.556 4.907z\" fill=\"#c3ddff\" />\n </g>\n <g>\n <path d=\"m303.427 149.859c-1.073 0-2.161-.21-3.202-.649-4.21-1.77-6.177-6.613-4.411-10.819 1.774-4.198 6.637-6.214 10.831-4.444 4.21 1.77 6.194 6.573 4.427 10.778l-.032.077c-1.33 3.158-4.395 5.057-7.613 5.057z\" fill=\"#c3ddff\" />\n </g>\n <g>\n <path d=\"m208.621 378.742c-1.073 0-2.161-.21-3.202-.649-4.21-1.77-6.177-6.613-4.411-10.819 1.774-4.198 6.629-6.218 10.831-4.444 4.21 1.77 6.194 6.573 4.427 10.778l-.032.077c-1.331 3.158-4.395 5.057-7.613 5.057z\" fill=\"#c3ddff\" />\n </g>\n <g>\n <path d=\"m370.46 311.702c-1.121 0-2.258-.23-3.347-.718-4.169-1.851-6.04-6.73-4.194-10.899 1.855-4.157 6.75-6.093 10.919-4.226 4.169 1.851 6.056 6.694 4.21 10.863l-.032.073c-1.371 3.076-4.387 4.907-7.556 4.907z\" fill=\"#c3ddff\" />\n </g>\n <g fill=\"#ffe07d\">\n <circle id=\"circle_21\" cx=\"256\" cy=\"132.129\" r=\"16.516\" />\n <circle id=\"circle_22\" cx=\"256\" cy=\"379.871\" r=\"16.516\" />\n <circle id=\"circle_23\" cx=\"379.871\" cy=\"256\" r=\"16.516\" />\n <circle id=\"circle_24\" cx=\"132.129\" cy=\"256\" r=\"16.516\" />\n <circle id=\"circle_25\" cx=\"343.59\" cy=\"343.59\" r=\"16.516\" />\n <circle id=\"circle_26\" cx=\"168.41\" cy=\"168.41\" r=\"16.516\" />\n <circle id=\"circle_27\" cx=\"168.41\" cy=\"343.59\" r=\"16.516\" />\n <circle id=\"circle_28\" cx=\"343.59\" cy=\"168.41\" r=\"16.516\" />\n </g>\n <circle cx=\"206.534\" cy=\"206.452\" fill=\"#c3ddff\" r=\"8.258\" />\n <circle cx=\"206.534\" cy=\"305.548\" fill=\"#c3ddff\" r=\"8.258\" />\n <circle cx=\"305.548\" cy=\"206.452\" fill=\"#c3ddff\" r=\"8.258\" />\n <circle cx=\"305.548\" cy=\"305.548\" fill=\"#c3ddff\" r=\"8.258\" />\n </g>\n</svg>","clickableShapes":[{"targetId":"path[id^=\"ball_\"]","action":"click","payload":"circle","payloadType":{"length":0,"prevObject":{"0":{},"length":1}},"topic":"circle"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"payload","editorUrl":"https://drawsvg.org/drawsvg.html","directory":"","panEnabled":true,"zoomEnabled":true,"controlIconsEnabled":true,"dblClickZoomEnabled":true,"mouseWheelZoomEnabled":true,"name":"Show virus SVG","x":800,"y":260,"wires":[["19ea5c30.bd6de4"]]},{"id":"4a4c851.1694b7c","type":"inject","z":"24d4dcbf.c53534","name":"Update drawing","topic":"","payload":"","payloadType":"date","repeat":"2","crontab":"","once":false,"onceDelay":0.1,"x":310,"y":260,"wires":[["4cd2fff.21555"]]},{"id":"4cd2fff.21555","type":"function","z":"24d4dcbf.c53534","name":"Make random circle clickable","func":"msg.payload = [];\n\nvar previousNumber = flow.get(\"randomNumber\");\n\nif (previousNumber !== undefined) {\n // Make the previous circle unclickable\n msg.payload.push({\n command : \"remove_event\",\n event : \"click\",\n selector : \"#circle_\" + previousNumber\n })\n \n // Make the previous circle yellow again\n msg.payload.push({\n \"command\": \"set_attribute\",\n \"selector\": \"#circle_\" + previousNumber,\n \"attributeName\": \"fill\",\n \"attributeValue\": \"#ffe07d\"\n })\n}\n\n// Calculate a random number between 1 and 28\nvar randomNumber = Math.floor(Math.random() * 28) + 1;\n\n// Make the new circle unclickable\nmsg.payload.push({\n command : \"add_event\",\n event : \"click\",\n selector : \"#circle_\" + randomNumber, \n payload : \"circle_\" + randomNumber + \" has been clicked\",\n topic : \"CIRCLE_\" + randomNumber + \"_CLICKED\"\n})\n\n// Make the new circle red\nmsg.payload.push({\n \"command\": \"set_attribute\",\n \"selector\": \"#circle_\" + randomNumber,\n \"attributeName\": \"fill\",\n \"attributeValue\": \"#ff0000\"\n})\n\nflow.set(\"randomNumber\", randomNumber);\n\nreturn msg;","outputs":1,"noerr":0,"x":560,"y":260,"wires":[["7775c39b.91f56c"]]},{"id":"d593ed93.5b47d","type":"ui_audio","z":"24d4dcbf.c53534","name":"","group":"22787703.a0e968","voice":"en-US","always":true,"x":1180,"y":260,"wires":[]},{"id":"19ea5c30.bd6de4","type":"change","z":"24d4dcbf.c53534","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"Very good","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1000,"y":260,"wires":[["d593ed93.5b47d"]]},{"id":"35642e22.275302","type":"ui_group","z":"","name":"Corona quarantaine game","tab":"f41f368.f6b99c8","disp":true,"width":"11","collapse":false},{"id":"22787703.a0e968","type":"ui_group","z":"","name":"Web push notifications","tab":"80f0e178.bbf4a","disp":true,"width":"6","collapse":false},{"id":"f41f368.f6b99c8","type":"ui_tab","z":"","name":"SVG demo","icon":"dashboard","disabled":false,"hidden":false},{"id":"80f0e178.bbf4a","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
Every two seconds another circle becomes clickable. When you click the circle in time, you will hear a voice telling "Well done":
P.S. Icons made by Freepik from www.flaticon.com
