@Andrei thanks so much for your example, especially as you took my code and made it work 
I used your example and realised I needed more functionality, which needed a rethink in system design.
This is how the remote control disc is looking now:
Because of these extra features needed I expanded on your ideas and I'll tell you what they are in case its of interest.
- I have 4 security lights each powered by a Sonoff and 4 PIRs that each supply power to a Sonoff - all Sonoffs talk mqtt to my broker. So these 8 things are all decoupled and can act independently or, with logic, cooperatively. For example one PIR can switch one or more lights on, whilst also alerting me.
- I want a dashboard item (the disc) that has the current state of all four lights (on/off) and with the ability to react to "click" events so each arc is a button toggling the power to the respective light - this I am having problems with! (I just opened a separate post on that issue: How to make an svg circle element on click, in a mustache template, output topic/payload?
This is what I have so far and it all works swimmingly apart from the onclick stuff and that I can't seem to get the lightbulb in the centre try as I might!
Flow (first time I exported a bunch of wired nodes, hopefully all the wires stay in place)...
[{"id":"ed975584.ac23e8","type":"mqtt in","z":"e12bb044.9f8c","name":"","topic":"stat/security/light/north/POWER","qos":"0","datatype":"auto","broker":"7b5262ba.b63abc","x":650,"y":700,"wires":[["36a20f33.61d7","27962cfe.50c1e4"]]},{"id":"76487476.6a573c","type":"mqtt in","z":"e12bb044.9f8c","name":"","topic":"stat/security/light/west/POWER","qos":"0","datatype":"auto","broker":"7b5262ba.b63abc","x":650,"y":820,"wires":[["c90ffd67.4b98c","27962cfe.50c1e4"]]},{"id":"88c47026.ad73d","type":"mqtt in","z":"e12bb044.9f8c","name":"","topic":"stat/security/light/south/POWER","qos":"0","datatype":"auto","broker":"7b5262ba.b63abc","x":650,"y":780,"wires":[["30028040.92d3d","27962cfe.50c1e4"]]},{"id":"60ed2b3d.61b2e4","type":"mqtt in","z":"e12bb044.9f8c","name":"","topic":"stat/security/light/east/POWER","qos":"0","datatype":"auto","broker":"7b5262ba.b63abc","x":650,"y":740,"wires":[["4d55c146.de4b5","27962cfe.50c1e4"]]},{"id":"cfbc3ca.98ddec","type":"mqtt out","z":"e12bb044.9f8c","name":"","topic":"cmnd/security/light/east/power","qos":"0","retain":"true","broker":"7b5262ba.b63abc","x":1210,"y":740,"wires":[]},{"id":"e2bba51d.783c18","type":"ui_button","z":"e12bb044.9f8c","name":"","group":"e6654390.323a7","order":3,"width":3,"height":3,"passthru":false,"label":"East","tooltip":"","color":"{{payload}}","bgcolor":"","icon":"fa-lightbulb-o fa-x4","payload":"toggle","payloadType":"str","topic":"","x":1010,"y":740,"wires":[["cfbc3ca.98ddec"]]},{"id":"4d55c146.de4b5","type":"function","z":"e12bb044.9f8c","name":"On or OFF ?","func":"if (msg.payload === \"ON\"){\n msg.payload = \"white\";\n} else {\n msg.payload = \"red\";\n } \n return msg;\n","outputs":1,"noerr":0,"x":870,"y":740,"wires":[["e2bba51d.783c18"]]},{"id":"36a20f33.61d7","type":"function","z":"e12bb044.9f8c","name":"On or OFF ?","func":"if (msg.payload === \"ON\"){\n msg.payload = \"white\";\n} else {\n msg.payload = \"red\";\n } \n return msg;\n","outputs":1,"noerr":0,"x":870,"y":700,"wires":[["1617fedc.aa02b1"]]},{"id":"1617fedc.aa02b1","type":"ui_button","z":"e12bb044.9f8c","name":"","group":"e6654390.323a7","order":2,"width":3,"height":3,"passthru":false,"label":"North","tooltip":"","color":"{{payload}}","bgcolor":"","icon":"fa-lightbulb-o fa-x4","payload":"toggle","payloadType":"str","topic":"","x":1010,"y":700,"wires":[["39f40233.49d2fe"]]},{"id":"39f40233.49d2fe","type":"mqtt out","z":"e12bb044.9f8c","name":"","topic":"cmnd/security/light/north/power","qos":"0","retain":"true","broker":"7b5262ba.b63abc","x":1210,"y":700,"wires":[]},{"id":"30028040.92d3d","type":"function","z":"e12bb044.9f8c","name":"On or OFF ?","func":"if (msg.payload === \"ON\"){\n msg.payload = \"white\";\n} else {\n msg.payload = \"red\";\n } \n return msg;\n","outputs":1,"noerr":0,"x":870,"y":780,"wires":[["6181e0d1.8d4a7"]]},{"id":"6181e0d1.8d4a7","type":"ui_button","z":"e12bb044.9f8c","name":"","group":"e6654390.323a7","order":5,"width":3,"height":3,"passthru":false,"label":"South","tooltip":"","color":"{{payload}}","bgcolor":"","icon":"fa-lightbulb-o fa-x4","payload":"toggle","payloadType":"str","topic":"","x":1010,"y":780,"wires":[["1b047495.f374cb"]]},{"id":"1b047495.f374cb","type":"mqtt out","z":"e12bb044.9f8c","name":"","topic":"cmnd/security/light/south/power","qos":"0","retain":"true","broker":"7b5262ba.b63abc","x":1210,"y":780,"wires":[]},{"id":"c90ffd67.4b98c","type":"function","z":"e12bb044.9f8c","name":"On or OFF ?","func":"if (msg.payload === \"ON\"){\n msg.payload = \"white\";\n} else {\n msg.payload = \"red\";\n } \n return msg;\n","outputs":1,"noerr":0,"x":870,"y":820,"wires":[["b10446c6.6e47b8"]]},{"id":"b10446c6.6e47b8","type":"ui_button","z":"e12bb044.9f8c","name":"","group":"e6654390.323a7","order":4,"width":3,"height":3,"passthru":false,"label":"West","tooltip":"","color":"{{payload}}","bgcolor":"","icon":"fa-lightbulb-o fa-x4","payload":"toggle","payloadType":"str","topic":"","x":1010,"y":820,"wires":[["f3a31f17.5d8e1"]]},{"id":"f3a31f17.5d8e1","type":"mqtt out","z":"e12bb044.9f8c","name":"","topic":"cmnd/security/light/west/power","qos":"0","retain":"true","broker":"7b5262ba.b63abc","x":1210,"y":820,"wires":[]},{"id":"9fcbadbf.c7383","type":"comment","z":"e12bb044.9f8c","name":"Toggle Buttons with State","info":"","x":170,"y":640,"wires":[]},{"id":"8217a47b.e51678","type":"mqtt out","z":"e12bb044.9f8c","name":"","topic":"cmnd/security/light/north/power","qos":"0","retain":"true","broker":"7b5262ba.b63abc","x":370,"y":700,"wires":[]},{"id":"66729b86.f6f604","type":"mqtt out","z":"e12bb044.9f8c","name":"","topic":"cmnd/security/light/east/power","qos":"0","retain":"true","broker":"7b5262ba.b63abc","x":370,"y":740,"wires":[]},{"id":"d6cdc865.7a3d98","type":"mqtt out","z":"e12bb044.9f8c","name":"","topic":"cmnd/security/light/south/power","qos":"0","retain":"true","broker":"7b5262ba.b63abc","x":370,"y":780,"wires":[]},{"id":"259fa12b.1bb59e","type":"mqtt out","z":"e12bb044.9f8c","name":"","topic":"cmnd/security/light/west/power","qos":"0","retain":"true","broker":"7b5262ba.b63abc","x":370,"y":820,"wires":[]},{"id":"f1a4b005.fb9d2","type":"inject","z":"e12bb044.9f8c","name":"Initialize","topic":"","payload":"\"\"","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":140,"y":760,"wires":[["8217a47b.e51678","66729b86.f6f604","d6cdc865.7a3d98","259fa12b.1bb59e"]]},{"id":"e5c9e76c.eba358","type":"debug","z":"e12bb044.9f8c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1170,"y":900,"wires":[]},{"id":"973388ad.18b348","type":"template","z":"e12bb044.9f8c","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<head>\n\n<style>\n :root {\n --colourNorth: {{global.stateLightColourNorth}};\n --colourEast: {{global.stateLightColourEast}};\n --colourSouth: {{global.stateLightColourSouth}};\n --colourWest: {{global.stateLightColourWest}};\n }\n .chart-label {\n font-family: \"FontAwesome\";\n font-size: 60px;\n }\n \n #lightNorth {\n stroke: var(--colourNorth, \"dimgray\");\n }\n #lightEast {\n stroke: var(--colourEast, \"dimgray\");\n }\n #lightSouth {\n stroke: var(--colourSouth, \"dimgray\");\n }\n #lightWest {\n stroke: var(--colourWest, \"dimgray\");\n }\n \n</style>\n\n</head>\n\n<body>\n<svg width=\"70%\" height=\"70%\" viewBox=\"0 0 120 180\" class=\"donut\">\n <circle class=\"donut-hole\" cx=\"60\" cy=\"90\" r=\"57.2957795131\" fill=\"dimgray\"></circle>\n <circle class=\"donut-centre\" cx=\"60\" cy=\"90\" r=\"53\" fill=\"dimgray\"></circle>\n <circle class=\"donut-ring\" cx=\"60\" cy=\"90\" r=\"57.2957795131\" fill=\"transparent\" stroke=\"#333333\" stroke-width=\"32\"></circle>\n<g class=\"donut-segment\" stroke-width=\"24\" stroke-dasharray=\"86 274\">\n <circle id=\"lightEast\" ng-click=\"send({topic:'east',payload:'toggle'})\" cx=\"60\" cy=\"90\" r=\"57.2957795131\" fill=\"transparent\" stroke-dashoffset=\"45\"></circle>\n <circle id=\"lightNorth\" cx=\"60\" cy=\"90\" r=\"57.2957795131\" fill=\"transparent\" stroke-dashoffset=\"135\"></circle>\n <circle id=\"lightWest\" cx=\"60\" cy=\"90\" r=\"57.2957795131\" fill=\"transparent\" stroke-dashoffset=\"225\"></circle>\n <circle id=\"lightSouth\" cx=\"60\" cy=\"90\" r=\"57.2957795131\" fill=\"transparent\" stroke-dashoffset=\"315\"></circle>\n</g>\n<text x=\"40%\" y=\"60%\" class=\"chart-label\" fill=\"white\"></text>\n <g class=\"button-text\" text-anchor=\"middle\" font-family=\"Calibri,sans-serif\" font-size=\"16\" fill=\"#333333\">\n <text id=\"lightNorthText\" x=\"50%\" y=\"22%\">N</text>\n <text id=\"lightEastText\" x=\"97%\" y=\"54%\">E</text>\n <text id=\"lightSouthText\" x=\"50%\" y=\"85%\">S</text>\n <text id=\"lightWestText\" x=\"3%\" y=\"54%\">W</text>\n </g>\n</svg>\n</body>\n</html>","output":"str","x":820,"y":900,"wires":[["b3a47ca5.17f69"]]},{"id":"b3a47ca5.17f69","type":"ui_template","z":"e12bb044.9f8c","group":"e6654390.323a7","name":"Quadrants","order":7,"width":"4","height":"4","format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":990,"y":900,"wires":[["e5c9e76c.eba358"]]},{"id":"27962cfe.50c1e4","type":"function","z":"e12bb044.9f8c","name":"update Light state","func":"// this takes an incoming mqtt stat command and \n// and uses the data to write out a global variable\n\n// capatilzation function\nfunction capitalizeFirstLetter(string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n}\n\n// regex to get quadrant from msg.topic (mqtt topic)\nvar myRe = /.*light\\/(\\w+)\\/POWER/g;\n\n// set & get quadrant data\nvar rawquadrant = myRe.exec(msg.topic);\nvar quadrant = capitalizeFirstLetter(rawquadrant[1]);\n\n// set quadrant data\nvar quadrantState = [];\nquadrantState[0] = \"stateLight\".concat(quadrant);\nquadrantState[1] = msg.payload;\n\nvar quadrantStateColour = [];\nquadrantStateColour[0] = \"stateLightColour\".concat(quadrant);\nquadrantStateColour[1] = msg.payload === \"ON\" ? \"white\" : \"dimgray\";\n\n// set global variables\nglobal.set(quadrantState[0],quadrantState[1]);\nglobal.set(quadrantStateColour[0],quadrantStateColour[1]);\n\nreturn msg;","outputs":1,"noerr":0,"x":610,"y":900,"wires":[["973388ad.18b348"]]},{"id":"7b5262ba.b63abc","type":"mqtt-broker","z":"","name":"phoscon","broker":"192.168.1.8","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"e6654390.323a7","type":"ui_group","z":"","name":"Security","tab":"78f6af5d.516ad","order":1,"disp":true,"width":"6","collapse":false},{"id":"78f6af5d.516ad","type":"ui_tab","z":"","name":"Lighting","icon":"fa-lightbulb-o","order":1,"disabled":false,"hidden":false}]
. I installed it to try it out but currently your "Clickable Dial" code renders fine but I get not on click events.