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

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

[{"id":"8f0e54d7.4d1668","type":"ui_svg_graphics","z":"d9a54719.b13a88","group":"8d3148e0.0eee88","order":1,"width":"14","height":"10","svgString":"<svg preserveAspectRatio=\"none\" x=\"0\" y=\"0\" viewBox=\"0 0 900 710\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\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=\"pir_living\" cx=\"310\" cy=\"45\" r=\"5\" stroke-width=\"0\" fill=\"#FF0000\" />\n  <text id=\"cam_living_room\" x=\"310\" y=\"45\" font-family=\"FontAwesome\" fill=\"green\" stroke=\"green\" font-size=\"35\" text-anchor=\"middle\" alignment-baseline=\"middle\" stroke-width=\"1\"></text>\n</svg> ","clickableShapes":[{"targetId":"#cam_living_room","action":"click","payload":"camera_living","payloadType":"str","topic":"camera_living"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","name":"","x":560,"y":500,"wires":[[]]},{"id":"588ccdd4.5ad384","type":"inject","z":"d9a54719.b13a88","name":"fill with red","topic":"","payload":"{\"command\":\"update_style\",\"selector\":\"#cam_living_room\",\"attributeName\":\"fill\",\"attributeValue\":\"red\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":320,"y":500,"wires":[["8f0e54d7.4d1668"]]},{"id":"3272d837.2122e8","type":"inject","z":"d9a54719.b13a88","name":"fill with blue","topic":"","payload":"{\"command\":\"update_style\",\"selector\":\"#cam_living_room\",\"attributeName\":\"fill\",\"attributeValue\":\"blue\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":330,"y":540,"wires":[["8f0e54d7.4d1668"]]},{"id":"8d3148e0.0eee88","type":"ui_group","z":"","name":"Floorplan test","tab":"93e19e4f.b80ed","disp":true,"width":"14","collapse":false},{"id":"93e19e4f.b80ed","type":"ui_tab","z":"","name":"SVG","icon":"dashboard","disabled":false,"hidden":false}]