This is effort #1 for a working model.
Version 2 is coming shortly.
[{"id":"80c5b44d.414928","type":"ui_text","z":"b819c6ab.29703","group":"2eb0377b.3d7","order":3,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","x":770,"y":520,"wires":[]},{"id":"3c171ee.98dcb62","type":"ui_text","z":"b819c6ab.29703","group":"bdaf5ce1.b20ab","order":2,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","x":1070,"y":520,"wires":[]},{"id":"6023a5cc.5081fc","type":"inject","z":"b819c6ab.29703","name":"","topic":"","payload":"{}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":790,"y":430,"wires":[["b82471d8.b29b88"]]},{"id":"6831920b.1f4dac","type":"comment","z":"b819c6ab.29703","name":"Update toolbar status","info":"","x":910,"y":380,"wires":[]},{"id":"8287f3c1.d60a3","type":"ui_template","z":"b819c6ab.29703","group":"2eb0377b.3d7","name":"","order":1,"width":0,"height":0,"format":"<style>\n \n:root {\n --changeG1: {{msg.payload.g1}};\n --changeG2: {{msg.payload.g2}};\n }\n\n \n \n#T1_G1 > div > p > span > i { \n color: var(--changeG1, #0eb8c0);\n}\n\n#T1_G2 > div > p > span > i { \n color: var(--changeG2, #0eb8c0);\n}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":1240,"y":430,"wires":[[]]},{"id":"d90554d4.4f38f8","type":"template","z":"b819c6ab.29703","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<style>\n\n#T1_G1 > div > p > span > i { \n color: {{payload.g1}};\n}\n\n#T1_G2 > div > p > span > i { \n color: {{payload.g2}};\n}\n\n</style>","output":"str","x":1100,"y":430,"wires":[["8287f3c1.d60a3"]]},{"id":"b82471d8.b29b88","type":"change","z":"b819c6ab.29703","name":"Read g1, g2","rules":[{"t":"set","p":"payload.g1","pt":"msg","to":"g1","tot":"flow"},{"t":"set","p":"payload.g2","pt":"msg","to":"g2","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":930,"y":430,"wires":[["d90554d4.4f38f8"]]},{"id":"f65c67d0.5b60e","type":"ui_button","z":"b819c6ab.29703","name":"G1 ACK","group":"2eb0377b.3d7","order":2,"width":"1","height":"1","passthru":false,"label":"Ack","tooltip":"","color":"","bgcolor":"","icon":"","payload":"{\"g1\":\"lime\"}","payloadType":"json","topic":"","x":770,"y":570,"wires":[["d0012a0d.ee8a8"]]},{"id":"d0012a0d.ee8a8","type":"change","z":"b819c6ab.29703","name":"set g1","rules":[{"t":"set","p":"g1","pt":"flow","to":"payload.g1","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":920,"y":570,"wires":[["49cba629.4a51d8"]]},{"id":"c60f6e02.2cf5a8","type":"link in","z":"b819c6ab.29703","name":"","links":["7a41babc.3d28fc","49cba629.4a51d8","77b05f0d.3d7428","9f08453c.180ab8","1cffb0ed.189267"],"x":825,"y":470,"wires":[["b82471d8.b29b88"]]},{"id":"49cba629.4a51d8","type":"link out","z":"b819c6ab.29703","name":"","links":["c60f6e02.2cf5a8"],"x":1025,"y":570,"wires":[]},{"id":"93de8d31.6ec4d","type":"ui_button","z":"b819c6ab.29703","name":"Event","group":"ab7f7c2f.3ced98","order":2,"width":"3","height":"1","passthru":false,"label":"G1 event","tooltip":"","color":"","bgcolor":"","icon":"","payload":"{\"g1\":\"red\"}","payloadType":"json","topic":"","x":210,"y":450,"wires":[["66f10f2b.80a388"]]},{"id":"66f10f2b.80a388","type":"change","z":"b819c6ab.29703","name":"set g1","rules":[{"t":"set","p":"g1","pt":"flow","to":"payload.g1","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":490,"y":450,"wires":[["77b05f0d.3d7428"]]},{"id":"77b05f0d.3d7428","type":"link out","z":"b819c6ab.29703","name":"","links":["c60f6e02.2cf5a8"],"x":595,"y":450,"wires":[]},{"id":"cc80552e.10b8b8","type":"ui_button","z":"b819c6ab.29703","name":"Event","group":"ab7f7c2f.3ced98","order":2,"width":"3","height":"1","passthru":false,"label":"G2 event","tooltip":"","color":"","bgcolor":"","icon":"","payload":"{\"g2\":\"red\"}","payloadType":"json","topic":"","x":210,"y":490,"wires":[["1de8bd1.d3acbc3"]]},{"id":"1de8bd1.d3acbc3","type":"change","z":"b819c6ab.29703","name":"set g2","rules":[{"t":"set","p":"g2","pt":"flow","to":"payload.g2","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":490,"y":490,"wires":[["9f08453c.180ab8"]]},{"id":"9f08453c.180ab8","type":"link out","z":"b819c6ab.29703","name":"","links":["c60f6e02.2cf5a8"],"x":595,"y":490,"wires":[]},{"id":"13e6d9ce.4e2566","type":"ui_button","z":"b819c6ab.29703","name":"G2 ACK","group":"bdaf5ce1.b20ab","order":1,"width":"1","height":"1","passthru":false,"label":"Ack","tooltip":"","color":"","bgcolor":"","icon":"","payload":"{\"g2\":\"lime\"}","payloadType":"json","topic":"","x":770,"y":620,"wires":[["918a16d.5c1a3e8"]]},{"id":"918a16d.5c1a3e8","type":"change","z":"b819c6ab.29703","name":"set g1","rules":[{"t":"set","p":"g2","pt":"flow","to":"payload.g2","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":920,"y":620,"wires":[["1cffb0ed.189267"]]},{"id":"1cffb0ed.189267","type":"link out","z":"b819c6ab.29703","name":"","links":["c60f6e02.2cf5a8"],"x":1025,"y":620,"wires":[]},{"id":"97388207.3c1bf","type":"comment","z":"b819c6ab.29703","name":"Buttons","info":"These are here only to allow you to see what\nhappens all from the \"GUI\" side of things.\n\nReally this part of the flow would be (probably)\na `switch` node which allows only certain\nconditions to pass then it sets the `G1` (or G2)\nvariables.\n","x":200,"y":400,"wires":[]},{"id":"28611143.994e36","type":"comment","z":"b819c6ab.29703","name":"LINKS","info":"With what ever invoked the situation, a signal\nis then sent on to update the GUI side of things\n","x":650,"y":380,"wires":[]},{"id":"f4805709.710ca","type":"comment","z":"b819c6ab.29703","name":"These buttons","info":"They are *hidden* in the collapsed fields and\nshown when opened/expanded.\nPressing the button clears the notification.","x":860,"y":660,"wires":[]},{"id":"2eb0377b.3d7","type":"ui_group","z":"","name":"G1","tab":"50e22e57.59eea8","order":2,"disp":true,"width":"6","collapse":true},{"id":"bdaf5ce1.b20ab","type":"ui_group","z":"","name":"G2","tab":"50e22e57.59eea8","order":3,"disp":true,"width":"6","collapse":true},{"id":"ab7f7c2f.3ced98","type":"ui_group","z":"","name":"Invoke","tab":"50e22e57.59eea8","order":1,"disp":true,"width":"6","collapse":false},{"id":"50e22e57.59eea8","type":"ui_tab","z":"","name":"T1","icon":"dashboard","disabled":false,"hidden":false}]
This is #2:
I have simplified it only in that rather than using flow variables, it is all kept in the flow.
This may be better if you want to have a lot of collapsed areas and use of flow variable names.
[{"id":"80c5b44d.414928","type":"ui_text","z":"b819c6ab.29703","group":"2eb0377b.3d7","order":3,"width":0,"height":0,"name":"G1 text","label":"text","format":"{{msg.payload}}","layout":"row-spread","x":420,"y":540,"wires":[]},{"id":"3c171ee.98dcb62","type":"ui_text","z":"b819c6ab.29703","group":"bdaf5ce1.b20ab","order":2,"width":0,"height":0,"name":"G2 text","label":"text","format":"{{msg.payload}}","layout":"row-spread","x":420,"y":580,"wires":[]},{"id":"6831920b.1f4dac","type":"comment","z":"b819c6ab.29703","name":"Update toolbar status","info":"","x":550,"y":360,"wires":[]},{"id":"8287f3c1.d60a3","type":"ui_template","z":"b819c6ab.29703","group":"2eb0377b.3d7","name":"","order":1,"width":0,"height":0,"format":"<style>\n \n:root {\n --changeG1: {{msg.payload.g1}};\n --changeG2: {{msg.payload.g2}};\n }\n\n \n \n#T1_G1 > div > p > span > i { \n color: var(--changeG1, #0eb8c0);\n}\n\n#T1_G2 > div > p > span > i { \n color: var(--changeG2, #0eb8c0);\n}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":810,"y":470,"wires":[[]]},{"id":"d90554d4.4f38f8","type":"template","z":"b819c6ab.29703","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<style>\n\n#T1_G1 > div > p > span > i { \n color: {{payload.g1}};\n}\n\n#T1_G2 > div > p > span > i { \n color: {{payload.g2}};\n}\n\n</style>","output":"str","x":670,"y":470,"wires":[["8287f3c1.d60a3"]]},{"id":"f65c67d0.5b60e","type":"ui_button","z":"b819c6ab.29703","name":"G1 ACK","group":"2eb0377b.3d7","order":2,"width":"1","height":"1","passthru":false,"label":"Ack","tooltip":"","color":"","bgcolor":"","icon":"","payload":"{\"g1\":\"lime\"}","payloadType":"json","topic":"","x":310,"y":630,"wires":[["49cba629.4a51d8"]]},{"id":"c60f6e02.2cf5a8","type":"link in","z":"b819c6ab.29703","name":"","links":["7a41babc.3d28fc","49cba629.4a51d8","77b05f0d.3d7428","9f08453c.180ab8","1cffb0ed.189267","fdd32640.ceb718"],"x":545,"y":470,"wires":[["d90554d4.4f38f8"]]},{"id":"49cba629.4a51d8","type":"link out","z":"b819c6ab.29703","name":"","links":["c60f6e02.2cf5a8"],"x":455,"y":630,"wires":[]},{"id":"93de8d31.6ec4d","type":"ui_button","z":"b819c6ab.29703","name":"Event","group":"ab7f7c2f.3ced98","order":2,"width":"3","height":"1","passthru":false,"label":"G1 event","tooltip":"","color":"","bgcolor":"","icon":"","payload":"{\"g1\":\"red\"}","payloadType":"json","topic":"","x":210,"y":450,"wires":[["fdd32640.ceb718"]]},{"id":"cc80552e.10b8b8","type":"ui_button","z":"b819c6ab.29703","name":"Event","group":"ab7f7c2f.3ced98","order":2,"width":"3","height":"1","passthru":false,"label":"G2 event","tooltip":"","color":"","bgcolor":"","icon":"","payload":"{\"g2\":\"red\"}","payloadType":"json","topic":"","x":210,"y":490,"wires":[["fdd32640.ceb718"]]},{"id":"13e6d9ce.4e2566","type":"ui_button","z":"b819c6ab.29703","name":"G2 ACK","group":"bdaf5ce1.b20ab","order":1,"width":"1","height":"1","passthru":false,"label":"Ack","tooltip":"","color":"","bgcolor":"","icon":"","payload":"{\"g2\":\"lime\"}","payloadType":"json","topic":"","x":310,"y":680,"wires":[["1cffb0ed.189267"]]},{"id":"1cffb0ed.189267","type":"link out","z":"b819c6ab.29703","name":"","links":["c60f6e02.2cf5a8"],"x":455,"y":680,"wires":[]},{"id":"97388207.3c1bf","type":"comment","z":"b819c6ab.29703","name":"Buttons","info":"These are here only to allow you to see what\nhappens all from the \"GUI\" side of things.\n\nReally this part of the flow would be (probably)\na `switch` node which allows only certain\nconditions to pass then it sets the `G1` (or G2)\nvariables.\n","x":200,"y":400,"wires":[]},{"id":"28611143.994e36","type":"comment","z":"b819c6ab.29703","name":"LINKS","info":"With what ever invoked the situation, a signal\nis then sent on to update the GUI side of things\n","x":420,"y":440,"wires":[]},{"id":"f4805709.710ca","type":"comment","z":"b819c6ab.29703","name":"These buttons","info":"They are *hidden* in the collapsed fields and\nshown when opened/expanded.\nPressing the button clears the notification.","x":400,"y":720,"wires":[]},{"id":"fdd32640.ceb718","type":"link out","z":"b819c6ab.29703","name":"","links":["d59a89a0.dd1288","c60f6e02.2cf5a8"],"x":355,"y":470,"wires":[]},{"id":"2eb0377b.3d7","type":"ui_group","z":"","name":"G1","tab":"50e22e57.59eea8","order":2,"disp":true,"width":"6","collapse":true},{"id":"bdaf5ce1.b20ab","type":"ui_group","z":"","name":"G2","tab":"50e22e57.59eea8","order":3,"disp":true,"width":"6","collapse":true},{"id":"ab7f7c2f.3ced98","type":"ui_group","z":"","name":"Invoke","tab":"50e22e57.59eea8","order":1,"disp":true,"width":"6","collapse":false},{"id":"50e22e57.59eea8","type":"ui_tab","z":"","name":"T1","icon":"dashboard","disabled":false,"hidden":false}]
