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
I took the day off to rest my head after looking at a couple great tutorials. Even though I felt like I knew "what was what" and tinkered with the various attributes in Code Pen with acceptable results, in N-R nothing worked as expected. I have (a pair of) individual 40x40 SVG's I'm trying to draw in a known, controllable area. I guess it would help me "see" the viewport and viewbox if they could be colored differently so changes could actually be seen in realtime. Of course, that's not in my realm of knowledge.
I took a (phone) screen-cap, imported it into my laptop and blew it up so the tops of the two SVGs were up against the upper edge of the screen. Ends up that -08 and -10 were misaligned horizontally even though my eyes saw different.Prolly due the dropped "p". But -10 on both is perfect, so there it'll be. Apologies for the confusion, numbers don't lie!
