node-red-contrib-ui-svg/examples/interactive_light_bulb.json

A Node-RED widget node to show interactive SVG (vector graphics) in the dashboard

[{"id":"d933559c.703508","type":"ui_svg_graphics","z":"9f1652ec.e8236","group":"6bfff10e.f6969","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.05780346691608429 900 710.1156005859375\" width=\"100%\" height=\"100%\">\n  <defs id=\"svgEditorDefs\">\n    <symbol xmlns=\"http://www.w3.org/2000/svg\" id=\"f03d\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 576 512\">\n      <path d=\"M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z\" />\n    </symbol>\n    <polygon id=\"svgEditorIconDefs\" style=\"fill:rosybrown;\" />\n    <symbol xmlns=\"http://www.w3.org/2000/svg\" id=\"f0eb\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 352 512\">\n      <path d=\"M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z\" />\n    </symbol>\n  </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  <circle id=\"mycircle\" cx=\"182.901\" cy=\"91.4841\" style=\"fill:rosybrown;stroke:black;stroke-width:1px;\" r=\"48\" />\n  <use xlink:href=\"#f03d\" x=\"408.63543701169755\" y=\"468.86914062501455\" width=\"57.22543352601201\" height=\"50.867052023121786\" id=\"my_icon\" style=\"fill:blue;\" />\n  <use xlink:href=\"#f0eb\" x=\"323.444542001759\" y=\"62.398229632181\" width=\"54.624894157494\" height=\"79.45439150180945\" id=\"my_light_bulb\" style=\"fill:rosybrown;\" />\n</svg>","clickableShapes":[{"targetId":"#my_light_bulb","action":"click","payload":"my_output_value","payloadType":"str","topic":"my_topic"}],"smilAnimations":[],"bindings":[{"selector":"#banner","bindSource":"payload.title","bindType":"text","attribute":""},{"selector":"#camera_living","bindSource":"payload.position.x","bindType":"attr","attribute":"x"},{"selector":"#camera_living","bindSource":"payload.camera.colour","bindType":"attr","attribute":"fill"}],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"my_output_field","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","name":"","x":500,"y":160,"wires":[["43d0f52a.3a275c"]]},{"id":"63aa05f8.1f41cc","type":"inject","z":"9f1652ec.e8236","name":"Set color red","topic":"","payload":"{\"command\":\"update_style\",\"selector\":\"#my_light_bulb\",\"attributeName\":\"fill\",\"attributeValue\":\"red\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":290,"y":160,"wires":[["d933559c.703508"]]},{"id":"43d0f52a.3a275c","type":"debug","z":"9f1652ec.e8236","name":"SVG event","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":720,"y":160,"wires":[]},{"id":"6bfff10e.f6969","type":"ui_group","z":"","name":"Floorplan test","tab":"142bc95.bfbb637","disp":true,"width":"14","collapse":false},{"id":"142bc95.bfbb637","type":"ui_tab","z":"","name":"SVG","icon":"dashboard","disabled":false,"hidden":false}]