Need some help with UI-SVG

Dashboard
21

OK, but my suggestion would end up pretty much the same at then end of the day - however, there was always my other suggestion...

So I did a demo to prove it...

h1aJVNLkyA

flow...

[{"id":"3009c4d0.79685c","type":"ui_svg_graphics","z":"ee2c6405.f58c78","group":"7d4b894d.6393c8","order":1,"width":"14","height":"10","svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" preserveAspectRatio=\"none\" x=\"0\" y=\"0\" viewBox=\"0 0 900 710\" width=\"100%\" height=\"100%\">\n  <defs id=\"svgEditorDefs\">\n    <symbol xmlns=\"http://www.w3.org/2000/svg\" id=\"f358\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 512 512\">\n      <path d=\"M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM212 140v116h-70.9c-10.7 0-16.1 13-8.5 20.5l114.9 114.3c4.7 4.7 12.2 4.7 16.9 0l114.9-114.3c7.6-7.6 2.2-20.5-8.5-20.5H300V140c0-6.6-5.4-12-12-12h-64c-6.6 0-12 5.4-12 12z\"/>\n    </symbol>\n    <polygon id=\"svgEditorIconDefs\" style=\"fill:rosybrown;\"/>\n    <symbol xmlns=\"http://www.w3.org/2000/svg\" id=\"f35b\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 512 512\">\n      <path d=\"M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm292 116V256h70.9c10.7 0 16.1-13 8.5-20.5L264.5 121.2c-4.7-4.7-12.2-4.7-16.9 0l-115 114.3c-7.6 7.6-2.2 20.5 8.5 20.5H212v116c0 6.6 5.4 12 12 12h64c6.6 0 12-5.4 12-12z\"/>\n    </symbol>\n    <symbol id=\"1f5b1\" viewBox=\"0 0 64 64\" preserveAspectRatio=\"xMidYMid meet\">\n      <rect x=\"0\" y=\"0\" width=\"64\" height=\"64\" style=\"stroke:none;fill:none;\"/>\n      <g xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"m19.05 58.735h-2.417c0-3.163-2.881-8.185-5.113-11.791-3.396-5.49-9.533-13.274-9.533-23.9 0-6.257 1.96-11.2 6.843-13.224 3.853-1.596 8.092.073 10.798 2.779l-1.71 1.708c-2.01-2.01-5.215-3.476-8.164-2.255-3.949 1.636-5.35 5.745-5.35 10.991 0 9.938 5.768 17.13 9.171 22.627 2.426 3.921 5.475 9.216 5.475 13.06\" fill=\"#94989b\"/>\n        <g fill=\"#bcc2cc\">\n          <path d=\"m13.168 14.458c-.758-.759-.944-1.801-.417-2.331l2.626-2.627c.529-.527 1.572-.341 2.33.417l-4.539 4.541\"/>\n          <path d=\"m19.08 42.755c-13.07-13.07-10.777-22.83-3.342-30.27 7.435-7.435 17.193-9.729 30.27 3.343 16.454 16.454 18.387 30.44 10.951 37.875-7.435 7.435-21.42 5.502-37.874-10.952\"/>\n        </g>\n        <g fill=\"#d8dfeb\">\n          <path d=\"m28.12 24.866c-5.07 5.07-9.106 10.585-11.569 16.571.697.793 1.454 1.599 2.27 2.415 16.524 16.525 30.851 18.19 38.662 10.377 7.811-7.811 6.146-22.14-10.378-38.662-.816-.816-1.622-1.573-2.415-2.27-5.986 2.463-11.501 6.499-16.57 11.569\"/>\n          <path d=\"m43.977 12.562c-9.373-8.466-16.976-8.895-23.21-5.362l11.844 11.845c3.547-2.83 7.324-5.071 11.363-6.483\"/>\n          <path d=\"m11.123 16.846l11.844 11.844c1.297-1.627 2.705-3.209 4.235-4.738 1.529-1.528 3.111-2.938 4.739-4.235l-11.844-11.845c-1.792 1.017-3.471 2.356-5.04 3.931-1.574 1.572-2.915 3.251-3.93 5.04\"/>\n          <path d=\"m15.813 40.728c1.413-4.04 3.654-7.817 6.481-11.364l-11.844-11.845c-3.532 6.231-3.104 13.836 5.363 23.21\"/>\n        </g>\n      </g>\n    </symbol>\n    <polygon id=\"svgEditorShapeDefs\" style=\"fill:rosybrown;stroke:black;vector-effect:non-scaling-stroke;stroke-width:1px;\"/>\n    <symbol id=\"1f532\" viewBox=\"0 0 64 64\" preserveAspectRatio=\"xMidYMid meet\">\n      <rect x=\"0\" y=\"0\" width=\"64\" height=\"64\" style=\"stroke:none;fill:none;\"/>\n      <g xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M63.999,56c0,4.4-3.6,8-8,8H8c-4.4,0-8-3.6-8-8V8c0-4.4,3.6-8,8-8h47.999c4.4,0,8,3.6,8,8V56z\" fill=\"#333\"/>\n        <path d=\"m55.999 50c0 3.299-2.702 6-5.998 6h-36c-3.296 0-5.998-2.701-5.998-6v-36c0-3.298 2.702-5.999 5.998-5.999h36c3.296 0 5.998 2.701 5.998 5.999v36\" fill=\"#d0d0d0\"/>\n      </g>\n    </symbol>\n  <symbol id=\"1f604\" viewBox=\"0 0 64 64\" preserveAspectRatio=\"xMidYMid meet\"><rect x=\"0\" y=\"0\" width=\"64\" height=\"64\" style=\"stroke:none;fill:none;\"/><g xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"32\" cy=\"32\" fill=\"#ffdd67\" r=\"30\"/><path d=\"m48 37.5c0 6.461-5.314 14-16 14-10.689 0-16-7.539-16-14 0 0 5.311 0 16 0 10.686 0 16 0 16 0\" fill=\"#664e27\"/><path d=\"m16.918 37.5h30.17v5.6h-30.17z\" fill=\"#fff\"/><g fill=\"#664e27\"><path d=\"m32 52.5c-11.04 0-17-7.729-17-15v-1h34v1c0 7.271-5.957 15-17 15m-14.955-14c.523 5.99 5.727 12 14.955 12s14.434-6.01 14.957-12h-29.912\"/><path d=\"m27.59 25.647c-3.264-6.197-12.653-6.197-15.917 0-.195.378.32.921.95 1.353 4.135-3.271 9.88-3.271 14.01-.001.632-.431 1.147-.974.952-1.352\"/><path d=\"m52.33 25.647c-3.264-6.197-12.652-6.197-15.916-.001-.195.379.319.922.949 1.353 4.136-3.271 9.881-3.271 14.02-.001.631-.431 1.145-.973.951-1.351\"/></g></g></symbol></defs>\n  <rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"900\" height=\"710\" style=\"fill:none; stroke: none;\"/>\n  <image width=\"889\" height=\"703\" id=\"background\" xlink:href=\"https://www.roomsketcher.com/wp-content/uploads/2016/10/1-Bedroom-Floor-Plans.jpg\"/>\n  <text id=\"e1_living_room\" x=\"201.23126220703125\" y=\"45\" font-family=\"FontAwesome\" fill=\"green\" visibility=\"hidden\" stroke=\"green\" font-size=\"35\" text-anchor=\"middle\" alignment-baseline=\"middle\" stroke-width=\"1\">ļ€½</text>\n  <use xlink:href=\"#f35b\" x=\"334.8606262207031\" y=\"27.265259566266394\" width=\"65.81948799999998\" height=\"65.81948799999998\" id=\"e3_icon\" style=\"fill:red;\" visibility=\"hidden\"/>\n  <use xlink:href=\"#1f5b1\" x=\"159.11598205569615\" y=\"30.82633590702389\" width=\"76.57458563536576\" height=\"76.57458563536576\" id=\"mouse\"/>\n   <text id=\"banner\" x=\"313.3149719238281\" y=\"65.71989440917969\" fill=\"black\" stroke=\"black\" font-size=\"35\" text-anchor=\"left\" alignment-baseline=\"middle\" stroke-width=\"1\">some text to animate</text>\n  <path d=\"M64,0c-35.347,0,-64,28.653,-64,64s28.653,64,64,64s64,-28.65299999999999,64,-64s-28.65299999999999,-64,-64,-64ZM101.657,49.657000000000004l-45.657000000000004,45.657000000000004l-29.657,-29.656999999999996c-3.125,-3.1240000000000023,-3.125,-8.189,0,-11.314s8.189000000000004,-3.1240000000000023,11.315000000000001,0l18.342,18.342999999999996l34.342999999999996,-34.343c3.125,-3.1240000000000023,8.188999999999993,-3.1240000000000023,11.314999999999998,0c3.1239999999999952,3.1240000000000023,3.1239999999999952,8.189,-0.0010000000000047748,11.314Z\" style=\"fill:rosybrown; stroke:black; vector-effect:non-scaling-stroke;stroke-width:1px;\" id=\"btn1\" transform=\"matrix(0.318518 0 0 0.318518 279.448 180.98)\"/>\n  <path d=\"M64,128c35.34700000000001,0,64,-28.65299999999999,64,-64s-28.65299999999999,-64,-64,-64s-64,28.653,-64,64s28.653,64,64,64ZM34.343,45.657000000000004c-3.125,-3.1240000000000023,-3.125,-8.189,0,-11.314s8.189,-3.125,11.314999999999998,0l18.342,18.343000000000004l18.343000000000004,-18.343000000000004c3.125,-3.125,8.189000000000007,-3.125,11.314999999999998,0s3.1239999999999952,8.189,0,11.314l-18.34400000000001,18.342999999999996l18.343000000000004,18.343000000000004c3.1239999999999952,3.1239999999999952,3.1239999999999952,8.189000000000007,0,11.314000000000007c-1.5630000000000024,1.5619999999999976,-3.6089999999999947,2.3430000000000035,-5.6569999999999965,2.3430000000000035s-4.093999999999994,-0.7810000000000059,-5.6569999999999965,-2.3430000000000035l-18.343000000000004,-18.343000000000004l-18.342999999999996,18.343000000000004c-1.5630000000000095,1.5619999999999976,-3.609000000000009,2.3430000000000035,-5.657000000000004,2.3430000000000035s-4.094000000000001,-0.7810000000000059,-5.6569999999999965,-2.3430000000000035c-3.125,-3.1239999999999952,-3.125,-8.188999999999993,0,-11.313999999999993l18.343000000000004,-18.343000000000004l-18.343000000000004,-18.343000000000004Z\" style=\"fill:rosybrown; stroke:black; vector-effect:non-scaling-stroke;stroke-width:1px;\" id=\"btn2\" transform=\"matrix(0.320662 0 0 0.320662 333.012 182.832)\"/>\n<g style=\"fill:rosybrown; stroke:black; vector-effect:non-scaling-stroke;stroke-width:1px;\" id=\"robot\" transform=\"matrix(0.496663 0 0 0.496663 319.231 42.8277)\"/></svg>","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}]
3 Likes
22

thanks
its work very well

23

@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:

image
image825Ɨ46 5.97 KB 

[{"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":

svg_demo_corona

P.S. Icons made by Freepik from www.flaticon.com

3 Likes
24

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.

:clap::clap::clap:

Ps, that needs to be posted in the flows library and as an example in the repo.

25

Will need to think about that, once our 2.0.0 is on NPM ...

26

nice work
hahaha

27

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

28

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 ...

29

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

30

Dave, good tip! Consider it done...

31

Oh aye, give Dave the credit :wink:

Guess I should have been more explicit...

Seriously tho, good stuff Bart

4 Likes
32

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.