I have eight relays controlled by eight buttons on a page. While this isn't truly a node-red question I'm posing it here as I really don't know where else to ask such a question. The buttons are created using a template node with a background color of green. I would like to change that color based on relay state. Originally I created the eight buttons using eight separate templates which did work. Then I found out I wanted to change button properties and I had to do it eight separate times, one for each button. Doing some research google yielded CSS variables. Looks like problem solved except any time I try to implement the dozens of examples I found on the web they just don't work. Perhaps someone could help out just a bit here. Trying to step into this I created three variables in the master, --green, --black, --white but I am unable to apply those variables to the other buttons programmatically. Maybe it's not possible but I suspect it is and my limited CSS knowledge doesn't stretch far enough to cover. For a starter I want to simply change button two's background to something different but again, it doesn't work. Here's my basic button configs.
Thanks in advance
[{"id":"98005dbb.ccf5d","type":"ui_template","z":"2cd4854b.62f9c2","group":"52a36ed2.3c48d","name":"Relay 1 & master","order":1,"width":0,"height":0,"format":"<style>\n:root{\n --green: #006400;\n --black: #000000;\n --white: #ffffff;\n}\n \n .myButtonAB {\n\tbox-shadow: ;\n\tbackground:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);\n\tbackground-color:var(--green);\n\tborder-radius:15px;\n\tborder:4px solid #006400; \n\tdisplay:inline-block;\n\tcursor:pointer;\n\tcolor:#000000;\n\tfont-family:Arial;\n\tfont-size:17px;\n\tpadding:7px 25px;\n\ttext-decoration:none;\n\ttext-shadow:0px 1px 0px #e1e2ed;\n}\n.myButtonAB:hover {\n\tbackground:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);\n\tbackground-color:#bab1ba;\n}\n.myButtonAB:active {\n\tposition:relative;\n\ttop:1px;\n}\n \n</style>\n\n<button class= \"myButtonAB\" ng-click=\"send({topic:'on', payload:1})\">{{msg.label}}</button>\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":350,"y":340,"wires":[["b4d8996b.39ef3"]]},{"id":"61e2d4b.540b72c","type":"ui_template","z":"2cd4854b.62f9c2","group":"52a36ed2.3c48d","name":"Relay 2","order":2,"width":0,"height":0,"format":"<style>\n\n \n</style>\n\n<button class= \"myButtonAB\" ng-click=\"send({topic:'on', payload:1})\">{{msg.label}}</button>\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":320,"y":400,"wires":[["4e1c9c3e.039e84"]]},{"id":"dd784616.5d7358","type":"ui_template","z":"2cd4854b.62f9c2","group":"52a36ed2.3c48d","name":"Relay 3","order":3,"width":0,"height":0,"format":"<style>\n \n \n</style>\n\n<button class= \"myButtonAB\" ng-click=\"send({topic:'on', payload:1})\">{{msg.label}}</button>\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":320,"y":460,"wires":[["e5d4a251.dc214"]]},{"id":"2c31410c.46cb66","type":"ui_template","z":"2cd4854b.62f9c2","group":"52a36ed2.3c48d","name":"Relay 4","order":4,"width":0,"height":0,"format":"<style>\n \n \n</style>\n\n<button class= \"myButtonAB\" ng-click=\"send({topic:'on', payload:1})\">{{msg.label}}</button>\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":320,"y":520,"wires":[["3768830.d76e2fe"]]},{"id":"a3e30cf0.7fc668","type":"ui_template","z":"2cd4854b.62f9c2","group":"52a36ed2.3c48d","name":"Relay 5","order":5,"width":0,"height":0,"format":"<style>\n \n \n</style>\n\n<button class= \"myButtonAB\" ng-click=\"send({topic:'on', payload:1})\">{{msg.label}}</button>\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":320,"y":580,"wires":[["faed845d.7f6d8"]]},{"id":"63244024.e74168","type":"ui_template","z":"2cd4854b.62f9c2","group":"52a36ed2.3c48d","name":"Relay 6","order":6,"width":0,"height":0,"format":"<style>\n \n \n</style>\n\n<button class= \"myButtonAB\" ng-click=\"send({topic:'on', payload:1})\">{{msg.label}}</button>\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":320,"y":640,"wires":[["d67c0042.35af78"]]},{"id":"38481127.dc7c16","type":"ui_template","z":"2cd4854b.62f9c2","group":"52a36ed2.3c48d","name":"Relay 7","order":7,"width":0,"height":0,"format":"<style>\n \n \n</style>\n\n<button class= \"myButtonAB\" ng-click=\"send({topic:'on', payload:1})\">{{msg.label}}</button>\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":320,"y":700,"wires":[["15e75dbb.546412"]]},{"id":"f64317f1.8aceb8","type":"ui_template","z":"2cd4854b.62f9c2","group":"52a36ed2.3c48d","name":"Relay 8","order":8,"width":0,"height":0,"format":"<style>\n \n \n</style>\n\n<button class= \"myButtonAB\" ng-click=\"send({topic:'on', payload:1})\">{{msg.label}}</button>\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":320,"y":760,"wires":[["8072de61.585ae8"]]},{"id":"b4d8996b.39ef3","type":"function","z":"2cd4854b.62f9c2","name":"Relay 1","func":"let whichrelay = 1;\nlet state = flow.get('relay' + whichrelay);\n\nif (state == 'Off'){\n flow.set('relay' + whichrelay,'On');\n msg = {\n label: 'Relay '+ whichrelay + ' On',\n payload: 0,\n }\n node.status({fill:\"blue\",shape:\"dot\",text:\"State is running\"});\n return msg;\n}\n\nif (state === 'On'){\n flow.set('relay' + whichrelay, 'Off');\n msg = {\n label: 'Relay ' + whichrelay + ' Off',\n payload: 1,\n }\n node.status({fill:\"blue\",shape:\"dot\",text:\"State is stopped\"});\n return msg;\n}\nflow.set('relay' + whichrelay,'Off');\nreturn msg;","outputs":1,"noerr":0,"x":540,"y":340,"wires":[["98005dbb.ccf5d","2f65c7ea.37787"]]},{"id":"4e1c9c3e.039e84","type":"function","z":"2cd4854b.62f9c2","name":"Relay 2","func":"let whichrelay = 2;\nlet state = flow.get('relay' + whichrelay);\n\nif (state == 'Off'){\n flow.set('relay' + whichrelay,'On');\n msg = {\n label: 'Relay '+ whichrelay + ' On',\n payload: 0,\n }\n node.status({fill:\"blue\",shape:\"dot\",text:\"State is running\"});\n return msg;\n}\n\nif (state === 'On'){\n flow.set('relay' + whichrelay, 'Off');\n msg = {\n label: 'Relay ' + whichrelay + ' Off',\n payload: 1,\n }\n node.status({fill:\"blue\",shape:\"dot\",text:\"State is stopped\"});\n return msg;\n}\nflow.set('relay' + whichrelay,'Off');\nreturn msg;","outputs":1,"noerr":0,"x":540,"y":400,"wires":[["61e2d4b.540b72c","6f5fd6af.84e7b"]]},{"id":"e5d4a251.dc214","type":"function","z":"2cd4854b.62f9c2","name":"Relay 3","func":"let whichrelay = 3;\nlet state = flow.get('relay' + whichrelay);\n\nif (state == 'Off'){\n flow.set('relay' + whichrelay,'On');\n msg = {\n label: 'Relay '+ whichrelay + ' On',\n payload: 0,\n }\n node.status({fill:\"blue\",shape:\"dot\",text:\"State is running\"});\n return msg;\n}\n\nif (state === 'On'){\n flow.set('relay' + whichrelay, 'Off');\n msg = {\n label: 'Relay ' + whichrelay + ' Off',\n payload: 1,\n }\n node.status({fill:\"blue\",shape:\"dot\",text:\"State is stopped\"});\n return msg;\n}\nflow.set('relay' + whichrelay,'Off');\nreturn msg;","outputs":1,"noerr":0,"x":540,"y":460,"wires":[["dd784616.5d7358","9e68b6b1.05229"]]},{"id":"3768830.d76e2fe","type":"function","z":"2cd4854b.62f9c2","name":"Relay 4","func":"let whichrelay = 4;\nlet state = flow.get('relay' + whichrelay);\n\nif (state == 'Off'){\n flow.set('relay' + whichrelay,'On');\n msg = {\n label: 'Relay '+ whichrelay + ' On',\n payload: 0,\n }\n node.status({fill:\"blue\",shape:\"dot\",text:\"State is running\"});\n return msg;\n}\n\nif (state === 'On'){\n flow.set('relay' + whichrelay, 'Off');\n msg = {\n label: 'Relay ' + whichrelay + ' Off',\n payload: 1,\n }\n node.status({fill:\"blue\",shape:\"dot\",text:\"State is stopped\"});\n return msg;\n}\nflow.set('relay' + whichrelay,'Off');\nreturn msg;","outputs":1,"noerr":0,"x":540,"y":520,"wires":[["2c31410c.46cb66","d9922a41.8cf6e"]]},{"id":"faed845d.7f6d8","type":"function","z":"2cd4854b.62f9c2","name":"Relay 5","func":"let whichrelay = 5;\nlet state = flow.get('relay' + whichrelay);\n\nif (state == 'Off'){\n flow.set('relay' + whichrelay,'On');\n msg = {\n label: 'Relay '+ whichrelay + ' On',\n payload: 0,\n }\n node.status({fill:\"blue\",shape:\"dot\",text:\"State is running\"});\n return msg;\n}\n\nif (state === 'On'){\n flow.set('relay' + whichrelay, 'Off');\n msg = {\n label: 'Relay ' + whichrelay + ' Off',\n payload: 1,\n }\n node.status({fill:\"blue\",shape:\"dot\",text:\"State is stopped\"});\n return msg;\n}\nflow.set('relay' + whichrelay,'Off');\nreturn msg;","outputs":1,"noerr":0,"x":540,"y":580,"wires":[["a3e30cf0.7fc668","79862602.87e538"]]},{"id":"d67c0042.35af78","type":"function","z":"2cd4854b.62f9c2","name":"Relay 6","func":"let whichrelay = 6;\nlet state = flow.get('relay' + whichrelay);\n\nif (state == 'Off'){\n flow.set('relay' + whichrelay,'On');\n msg = {\n label: 'Relay '+ whichrelay + ' On',\n payload: 0,\n }\n node.status({fill:\"blue\",shape:\"dot\",text:\"State is running\"});\n return msg;\n}\n\nif (state === 'On'){\n flow.set('relay' + whichrelay, 'Off');\n msg = {\n label: 'Relay ' + whichrelay + ' Off',\n payload: 1,\n }\n node.status({fill:\"blue\",shape:\"dot\",text:\"State is stopped\"});\n return msg;\n}\nflow.set('relay' + whichrelay,'Off');\nreturn msg;","outputs":1,"noerr":0,"x":540,"y":640,"wires":[["63244024.e74168","b233f2b5.51d888"]]},{"id":"15e75dbb.546412","type":"function","z":"2cd4854b.62f9c2","name":"Relay 7","func":"let whichrelay = 7;\nlet state = flow.get('relay' + whichrelay);\n\nif (state == 'Off'){\n flow.set('relay' + whichrelay,'On');\n msg = {\n label: 'Relay '+ whichrelay + ' On',\n payload: 0,\n }\n node.status({fill:\"blue\",shape:\"dot\",text:\"State is running\"});\n return msg;\n}\n\nif (state === 'On'){\n flow.set('relay' + whichrelay, 'Off');\n msg = {\n label: 'Relay ' + whichrelay + ' Off',\n payload: 1,\n }\n node.status({fill:\"blue\",shape:\"dot\",text:\"State is stopped\"});\n return msg;\n}\nflow.set('relay' + whichrelay,'Off');\nreturn msg;","outputs":1,"noerr":0,"x":540,"y":700,"wires":[["38481127.dc7c16","3aa5842b.3a2a74"]]},{"id":"8072de61.585ae8","type":"function","z":"2cd4854b.62f9c2","name":"Relay 8","func":"let whichrelay = 8;\nlet state = flow.get('relay' + whichrelay);\n\nif (state == 'Off'){\n flow.set('relay' + whichrelay,'On');\n msg = {\n label: 'Relay '+ whichrelay + ' On',\n payload: 0,\n }\n node.status({fill:\"blue\",shape:\"dot\",text:\"State is running\"});\n return msg;\n}\n\nif (state === 'On'){\n flow.set('relay' + whichrelay, 'Off');\n msg = {\n label: 'Relay ' + whichrelay + ' Off',\n payload: 1,\n }\n node.status({fill:\"blue\",shape:\"dot\",text:\"State is stopped\"});\n return msg;\n}\nflow.set('relay' + whichrelay,'Off');\nreturn msg;","outputs":1,"noerr":0,"x":540,"y":760,"wires":[["f64317f1.8aceb8","8009c551.b16728"]]},{"id":"52a36ed2.3c48d","type":"ui_group","z":"","name":"Default","tab":"8d7a3823.4507c","order":1,"disp":false,"width":"6","collapse":false},{"id":"8d7a3823.4507c","type":"ui_tab","z":"","name":"Relay","icon":"fa-bolt","disabled":false,"hidden":false}]
