SVG node, change one item's color from another node?

I've been all over Google looking for this, 98% of it has to do with d.3/HTML. I want to use an SVG node and would like to change the color of ONE element from another node. I've seen data-bind, looks way to complicated to try w/o any HTML. I'm leaning towards a function node with an if-else statement to do a one-time animation of the node? Or a better way from someone who knows...

So far: Can't figure how to get an inject node's msg data to relate to anything inside a function node. Can't even figure out basic cr@p like how to pass the msg THRU the function node! I know, I'm a sorry excuse for an idiot!

I'm guessing to get any farther, I'll need to make the "element to change" in my SVG code have some kind of identifier so as to be unique. How is that done?

Thanks for looking!

[{"id":"853e59c1.2ea598","type":"ui_svg_graphics","z":"8b830e5d.944ee8","group":"4eddf1f8.72684","order":5,"width":0,"height":0,"svgString":"<svg width=\"40\" height=\"40\">\n  <defs>\n    <filter id=\"blurme\">\n      <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"3\" />\n    </filter>\n  </defs>\n\n  <circle cx=\"20\" cy=\"20\" r=\"14\" stroke=\"#0000CD\" stroke-width=\"2\" fill=\"#1E90FF\" filter=\"url(#blurme)\"/>     \n  <circle cx=\"20\" cy=\"20\" r=\"18\" stroke=\"#555555\" stroke-width=\"3\" fill=\"none\"/>\n\n</svg>","clickableShapes":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"name":"","x":480,"y":180,"wires":[[]],"info":"Would like to change the fill color of circle on line #8 programmatically\n"},{"id":"4eddf1f8.72684","type":"ui_group","z":"","name":"text labels","tab":"81831aab.f2f568","order":2,"disp":false,"width":7,"collapse":false},{"id":"81831aab.f2f568","type":"ui_tab","z":"","name":"GTO-500 Gate Opener","icon":"dashboard","disabled":false,"hidden":false}]

Please check node comment section as I'm too stupid to put a comment inside the svg code w/o wrecking it...

Russ

Hi Russ,
Was it your intention to include the function-node and inject-node also in your flow? Because the flow that you have shared only contains the svg-node...
Bart

Bart, I found it! You had a great example on Github that got me working, it just took me a bit to find the right one.

[{"id":"71d5a00a.73848","type":"group","z":"c199b9b6.017a2","name":"GPIO pim 40 verification closed","style":{"stroke":"#6f2fa0","fill":"#6f2fa0","fill-opacity":"0.25","label":true,"color":"#000000"},"nodes":["2fa1b114.94cff6","afd0b118.45cb58","b1a6e150.0276e8","95376fc5.6e31c"],"x":24,"y":19,"w":562,"h":122},{"id":"2fa1b114.94cff6","type":"rpi-gpio in","z":"c199b9b6.017a2","g":"71d5a00a.73848","name":"40 Closed Verified","pin":"40","intype":"up","debounce":"25","read":true,"x":140,"y":80,"wires":[["afd0b118.45cb58"]]},{"id":"afd0b118.45cb58","type":"switch","z":"c199b9b6.017a2","g":"71d5a00a.73848","name":"If input is 1","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"1","vt":"num"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":320,"y":80,"wires":[["95376fc5.6e31c"],["b1a6e150.0276e8"]]},{"id":"b1a6e150.0276e8","type":"change","z":"c199b9b6.017a2","g":"71d5a00a.73848","name":"Change to 0","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"command\":\"update_style\",\"selector\":\"#verClosed\",\"attributeName\":\"fill\",\"attributeValue\":\"#333333\"}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":490,"y":100,"wires":[["f9f17505.564b88"]]},{"id":"95376fc5.6e31c","type":"change","z":"c199b9b6.017a2","g":"71d5a00a.73848","name":"Change to 1","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"command\":\"update_style\",\"selector\":\"#verClosed\",\"attributeName\":\"fill\",\"attributeValue\":\"#1E90FF\"}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":490,"y":60,"wires":[["f9f17505.564b88"]]},{"id":"a7402322.19d7e","type":"group","z":"c199b9b6.017a2","name":"GPIO pin 38 verification open","style":{"stroke":"#6f2fa0","fill":"#6f2fa0","fill-opacity":"0.25","label":true,"color":"#000000"},"nodes":["3f8dee4c.474622","ab956729.6141f","5189b379.44c39c","a912f64a.f60bf"],"x":24,"y":159,"w":562,"h":122},{"id":"3f8dee4c.474622","type":"switch","z":"c199b9b6.017a2","g":"a7402322.19d7e","name":"If input is 1","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"1","vt":"num"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":310,"y":220,"wires":[["5189b379.44c39c"],["ab956729.6141f"]]},{"id":"ab956729.6141f","type":"change","z":"c199b9b6.017a2","g":"a7402322.19d7e","name":"Change to 0","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"command\":\"update_style\",\"selector\":\"#verOpen\",\"attributeName\":\"fill\",\"attributeValue\":\"#333333\"}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":490,"y":240,"wires":[["235bd56a.d9af4a"]]},{"id":"5189b379.44c39c","type":"change","z":"c199b9b6.017a2","g":"a7402322.19d7e","name":"Change to 1","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"command\":\"update_style\",\"selector\":\"#verOpen\",\"attributeName\":\"fill\",\"attributeValue\":\"#1E90FF\"}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":490,"y":200,"wires":[["235bd56a.d9af4a"]]},{"id":"a912f64a.f60bf","type":"rpi-gpio in","z":"c199b9b6.017a2","g":"a7402322.19d7e","name":"38 Open Verified","pin":"38","intype":"up","debounce":"25","read":true,"x":130,"y":220,"wires":[["3f8dee4c.474622"]]},{"id":"dea38dc1.3a8ca","type":"group","z":"c199b9b6.017a2","name":"Open / Close SVG LEDs","style":{"stroke":"#6f2fa0","fill":"#6f2fa0","fill-opacity":"0.25","label":true,"color":"#000000"},"nodes":["235bd56a.d9af4a","f9f17505.564b88"],"x":614,"y":199,"w":392,"h":82},{"id":"235bd56a.d9af4a","type":"ui_svg_graphics","z":"c199b9b6.017a2","g":"dea38dc1.3a8ca","group":"7deb7f7c.de4dd","order":1,"width":3,"height":2,"svgString":"<svg x=\"0\" y=\"0\" height=\"50\" viewBox=\"0 0 50 50\" width=\"50\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"></svg>\n\n<svg width=\"40\" height=\"40\">\n  <defs>\n    <filter id=\"blurme\">\n      <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"3\" />\n    </filter>\n  </defs>\n\n  <circle id=\"verOpen\" cx=\"20\" cy=\"20\" r=\"14\" stroke=\"#000040\" stroke-width=\"2\" fill=\"#333333\" filter=\"url(#blurme)\"/>     \n  <circle cx=\"20\" cy=\"20\" r=\"18\" stroke=\"#555555\" stroke-width=\"3\" fill=\"none\"/>\n\n</svg>","clickableShapes":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"name":"verOpen","x":700,"y":240,"wires":[[]],"info":"Would like to change the fill color of circle on line #8 programmatically\n"},{"id":"f9f17505.564b88","type":"ui_svg_graphics","z":"c199b9b6.017a2","g":"dea38dc1.3a8ca","group":"7deb7f7c.de4dd","order":2,"width":3,"height":2,"svgString":"<svg x=\"0\" y=\"0\" height=\"50\" viewBox=\"0 0 50 50\" width=\"50\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"></svg>\n\n<svg width=\"40\" height=\"40\">\n  <defs>\n    <filter id=\"blurme\">\n      <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"3\" />\n    </filter>\n  </defs>\n\n  <circle id=\"verClosed\" cx=\"20\" cy=\"20\" r=\"14\" stroke=\"#000040\" stroke-width=\"2\" fill=\"#333333\" filter=\"url(#blurme)\"/>     \n  <circle cx=\"20\" cy=\"20\" r=\"18\" stroke=\"#555555\" stroke-width=\"3\" fill=\"none\"/>\n\n</svg>","clickableShapes":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"name":"verClosed","x":910,"y":240,"wires":[[]]},{"id":"7deb7f7c.de4dd","type":"ui_group","z":"","name":"widget group","tab":"81831aab.f2f568","order":2,"disp":false,"width":6,"collapse":false},{"id":"81831aab.f2f568","type":"ui_tab","z":"","name":"GTO-500 Gate Opener","icon":"dashboard","disabled":false,"hidden":false}]

Here's the finished product now working off pi pins. I didn't include the inject nodes as I'm finished troubleshooting them and using pi now. Hope it all comes thru, I tested it on a new flow page...

Thanks!

Russ

1 Like