# Need some help with UI-SVG **URL:** \ **Category:** Dashboard\ **Created:** [2 April 2020 22:09 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119 "2020-04-02T22:09:50Z")\ **Posts on this page:** 12\ **Page:** 2

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\ **Post date:** [3 April 2020 21:51 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/21 "2020-04-03T21:51:16Z")

> [@d0d04m3](#): > > I talking about deactivated click in dashboard OK, but my suggestion would end up pretty much the same at then end of the day - however, there was always my other suggestion... > [@Steve-Mcl](#): > > What about setting CSS [pointer-events](https://css-tricks.com/almanac/properties/p/pointer-events/)? So I did a demo to prove it... ![h1aJVNLkyA](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/9/1978cd479ce91d8067a656cb54e9c9174b48232f.gif) flow... ```auto [{"id":"3009c4d0.79685c","type":"ui_svg_graphics","z":"ee2c6405.f58c78","group":"7d4b894d.6393c8","order":1,"width":"14","height":"10","svgString":"","clickableShapes":[{"targetId":"#mouse","action":"click","payload":"mouse","payloadType":"str","topic":"mouse"},{"targetId":"#btn1","action":"click","payload":"true","payloadType":"bool","topic":"btn1"},{"targetId":"#btn2","action":"click","payload":"false","payloadType":"bool","topic":"btn2"}],"smilAnimations":[{"id":"spinner","targetId":"banner","classValue":"","attributeName":"rotate","fromValue":"0","toValue":"359","trigger":"cust","duration":"500","durationUnit":"ms","repeatCount":"1","end":"restore","delay":"1","delayUnit":"s","custom":"mouse.click; "}],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","name":"","x":580,"y":120,"wires":[["5fb5d2f2.3d61ec"]]},{"id":"90bd1314.b34ec","type":"inject","z":"ee2c6405.f58c78","name":"enable click","topic":"eneble click","payload":"true","payloadType":"bool","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":120,"wires":[["5420aad0.e53a44"]]},{"id":"8c96b058.b7d94","type":"inject","z":"ee2c6405.f58c78","name":"disable click","topic":"eneble click","payload":"false","payloadType":"bool","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":160,"wires":[["5420aad0.e53a44"]]},{"id":"5420aad0.e53a44","type":"function","z":"ee2c6405.f58c78","name":"toggle pointer-events style","func":"var newState;\nif(msg.payload){\n newState = \"auto\";\n} else {\n newState = \"none\";\n}\n\nmsg.payload = [\n {\n \"command\":\"set_style\",\n \"selector\":\"#mouse\",\n \"attributeName\":\"pointer-events\",\n \"attributeValue\":newState\n \n }\n]\nreturn msg;","outputs":1,"noerr":0,"x":370,"y":120,"wires":[["3009c4d0.79685c"]]},{"id":"5fb5d2f2.3d61ec","type":"switch","z":"ee2c6405.f58c78","name":"","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"btn1","vt":"str"},{"t":"eq","v":"btn2","vt":"str"},{"t":"eq","v":"mouse","vt":"str"}],"checkall":"true","repair":false,"outputs":3,"x":450,"y":260,"wires":[["5420aad0.e53a44"],["5420aad0.e53a44"],["5e3c9f01.2aa0e"]]},{"id":"5e3c9f01.2aa0e","type":"debug","z":"ee2c6405.f58c78","name":"mouse icon click","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":660,"y":280,"wires":[]},{"id":"7d4b894d.6393c8","type":"ui_group","z":"","name":"Group 1","tab":"2a96df74.b8604","order":1,"disp":true,"width":"25","collapse":false},{"id":"2a96df74.b8604","type":"ui_tab","z":"","name":"SVG3","icon":"dashboard","order":4,"disabled":false,"hidden":false}] ``` ---

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\ **Post date:** [3 April 2020 22:10 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/22 "2020-04-03T22:10:19Z")

> [@Steve-Mcl](#): > > ```auto > [{"id":"3009c4d0.79685c","type":"ui_svg_graphics","z":"ee2c6405.f58c78","group":"7d4b894d.6393c8","order":1,"width":"14","height":"10","svgString":"","clickableShapes":[{"targetId":"#mouse","action":"click","payload":"mouse","payloadType":"str","topic":"mouse"},{"targetId":"#btn1","action":"click","payload":"true","payloadType":"bool","topic":"btn1"},{"targetId":"#btn2","action":"click","payload":"false","payloadType":"bool","topic":"btn2"}],"smilAnimations":[{"id":"spinner","targetId":"banner","classValue":"","attributeName":"rotate","fromValue":"0","toValue":"359","trigger":"cust","duration":"500","durationUnit":"ms","repeatCount":"1","end":"restore","delay":"1","delayUnit":"s","custom":"mouse.click; "}],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","name":"","x":580,"y":120,"wires":[["5fb5d2f2.3d61ec"]]},{"id":"90bd1314.b34ec","type":"inject","z":"ee2c6405.f58c78","name":"enable click","topic":"eneble click","payload":"true","payloadType":"bool","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":120,"wires":[["5420aad0.e53a44"]]},{"id":"8c96b058.b7d94","type":"inject","z":"ee2c6405.f58c78","name":"disable click","topic":"eneble click","payload":"false","payloadType":"bool","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":160,"wires":[["5420aad0.e53a44"]]},{"id":"5420aad0.e53a44","type":"function","z":"ee2c6405.f58c78","name":"toggle pointer-events style","func":"var newState;\nif(msg.payload){\n newState = \"auto\";\n} else {\n newState = \"none\";\n}\n\nmsg.payload = [\n {\n \"command\":\"set_style\",\n \"selector\":\"#mouse\",\n \"attributeName\":\"pointer-events\",\n \"attributeValue\":newState\n \n }\n]\nreturn msg;","outputs":1,"noerr":0,"x":370,"y":120,"wires":[["3009c4d0.79685c"]]},{"id":"5fb5d2f2.3d61ec","type":"switch","z":"ee2c6405.f58c78","name":"","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"btn1","vt":"str"},{"t":"eq","v":"btn2","vt":"str"},{"t":"eq","v":"mouse","vt":"str"}],"checkall":"true","repair":false,"outputs":3,"x":450,"y":260,"wires":[["5420aad0.e53a44"],["5420aad0.e53a44"],["5e3c9f01.2aa0e"]]},{"id":"5e3c9f01.2aa0e","type":"debug","z":"ee2c6405.f58c78","name":"mouse icon click","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":660,"y":280,"wires":[]},{"id":"7d4b894d.6393c8","type":"ui_group","z":"","name":"Group 1","tab":"2a96df74.b8604","order":1,"disp":true,"width":"25","collapse":false},{"id":"2a96df74.b8604","type":"ui_tab","z":"","name":"SVG3","icon":"dashboard","order":4,"disabled":false,"hidden":false}] > > ``` thanks its work very well ---

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\ **Post date:** [4 April 2020 21:23 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/23 "2020-04-04T21:23:57Z")

@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): ```auto 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: ```auto [{ 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: ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/4/c4dfdc8285b5b50dbbab53712ffb6ae25b487d88.png) ```auto [{"id":"7775c39b.91f56c","type":"ui_svg_graphics","z":"24d4dcbf.c53534","group":"35642e22.275302","order":1,"width":"11","height":"11","svgString":"","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": ![svg_demo_corona](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/a/da9cc987f6322a2a5548452f1ef84f441750587f.gif) P.S. Icons made by [Freepik](https://www.flaticon.com/authors/freepik "Freepik") from [www.flaticon.com](https://www.flaticon.com/ "Flaticon") ---

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\ **Post date:** [4 April 2020 21:41 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/24 "2020-04-04T21:41:17Z")

Haha nice work Bart. Add a score board and decrease the time by 0.1 sec every 5 or 10 clicks to make it a challenge. 👏👏👏 Ps, that needs to be posted in the flows library and as an example in the repo. ---

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\ **Post date:** [4 April 2020 21:59 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/25 "2020-04-04T21:59:03Z")

> [@Steve-Mcl](#): > > Ps, that needs to be posted in the flows library and as an example in the repo. Will need to think about that, once our 2.0.0 is on NPM ... ---

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\ **Post date:** [4 April 2020 22:10 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/26 "2020-04-04T22:10:29Z")

nice work hahaha ---

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\ **Post date:** [4 April 2020 22:28 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/27 "2020-04-04T22:28:00Z")

If its not too massive, add it as an example in the node ---

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\ **Post date:** [4 April 2020 22:38 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/28 "2020-04-04T22:38:35Z")

From the reactions of our users, it seems that our readme page is currently a bit too complex. Should rewrite and restructure it. The node is rather easy to use, but the readme page is currently rather complex. But I need 3 things to get that done: time, time and time ... ---

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\ **Post date:** [4 April 2020 22:50 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/29 "2020-04-04T22:50:58Z")

I meant as a code example for import, not in the readme , ---

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\ **Post date:** [4 April 2020 22:53 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/30 "2020-04-04T22:53:19Z")

Dave, good tip! Consider it [done](https://github.com/bartbutenaers/node-red-contrib-ui-svg/tree/panzoom/examples)... ---

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\ **Post date:** [4 April 2020 22:54 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/31 "2020-04-04T22:54:40Z")

Oh aye, give Dave the credit 😉 Guess I should have been more explicit... > [@Steve-Mcl](#): > > that needs to be posted in the flows library and as an example in the repo. Seriously tho, good stuff Bart ---

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\ **Post date:** [18 April 2020 22:54 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/32 "2020-04-18T22:54:45Z")

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed. [Previous page](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119.md?page=1)