Hi All,
I am using UI-LED to indicate a fault in a certain area of a plant. is it porrible to change the background of a group to a different colour with a ui template node but leave the other groups grey? I will be recieving a bit from a AB ML1400 PLC and would use teh group background as the LED indication
is there an option of having these grouped and alighned vertically below each other?
Yes you can.
There is many ways to do it, as I see you already use some overrides for dashboard so it depends slightly what you have changed.
Anyway it takes to have at least one ui_template node on that dashboard tab if you want to control all groups from one place. If you have one ui_template per card, you can make that logic per card also.
It also takes to make all widget backgrounds to be transparent so the background of card can be seen.
As i don't know anything about your intentions, I made simple example for per card based controller.
[{"id":"84ff4343.7bb7d","type":"ui_gauge","z":"407e1abc.6d1cb4","name":"","group":"fc08b77d.62707","order":2,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":510,"y":740,"wires":[]},{"id":"cf5f01b5.cafe7","type":"ui_template","z":"407e1abc.6d1cb4","group":"fc08b77d.62707","name":"Group Name","order":1,"width":0,"height":0,"format":"<div id=\"{{'my_'+$id}}\" >TEST GROUP</div>\n\n<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n var c = msg.payload > 5 ? \"orange\" : \"green\"\n $(\"#my_\"+scope.$id).closest(\".nr-dashboard-cardcontainer\").css(\"background-color\",c);\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":530,"y":700,"wires":[[]]},{"id":"6b5c0d7e.fc68e4","type":"random","z":"407e1abc.6d1cb4","name":"","low":1,"high":10,"inte":"true","property":"payload","x":340,"y":720,"wires":[["cf5f01b5.cafe7","84ff4343.7bb7d"]]},{"id":"bfb78cec.be004","type":"inject","z":"407e1abc.6d1cb4","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":170,"y":720,"wires":[["6b5c0d7e.fc68e4"]]},{"id":"387e78cb.baf658","type":"ui_template","z":"407e1abc.6d1cb4","group":"fc08b77d.62707","name":"CSS","order":2,"width":0,"height":0,"format":"<style id=\"dash-styles\">\nbody.nr-dashboard-theme md-content md-card {\n background-color: #33333300;\n}\n.nr-dashboard-theme .nr-dashboard-template {\n background-color: #33333300;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":520,"y":660,"wires":[[]]},{"id":"fc08b77d.62707","type":"ui_group","name":"TEST","tab":"826dc63e.367f48","order":1,"disp":false,"width":"6","collapse":false},{"id":"826dc63e.367f48","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
No. Layout looks for available screen width so it arrangers cards based on how many it can fit side by side. They appear in one column if you see the dashboard with phone.
[{"id":"a945bb2b.c285e8","type":"tab","label":"Alarm Area 1","disabled":false,"info":""},{"id":"d98403e3.50a96","type":"ui_button","z":"a945bb2b.c285e8","name":"Acknowledge","group":"f939857c.dafb1","order":3,"width":3,"height":1,"passthru":true,"label":"Acknowledge","tooltip":"Caution :Clicking Will Acknowlwedge Alarms","color":"","bgcolor":"","icon":"","payload":"true","payloadType":"bool","topic":"","x":220,"y":80,"wires":[["ff144e27.94dd98"]]},{"id":"ff144e27.94dd98","type":"trigger","z":"a945bb2b.c285e8","name":"","op1":"1","op2":"0","op1type":"num","op2type":"num","duration":"1","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":480,"y":80,"wires":[["9434025.ae8ac"],["33b6bf82.227548"]]},{"id":"33b6bf82.227548","type":"trigger","z":"a945bb2b.c285e8","name":"","op1":"0","op2":"","op1type":"num","op2type":"nul","duration":"2","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":660,"y":140,"wires":[["c643bb7f.bebcd8"]]},{"id":"e4ede60.31c0d18","type":"ui_button","z":"a945bb2b.c285e8","name":"Reset","group":"f939857c.dafb1","order":4,"width":3,"height":1,"passthru":true,"label":"Reset","tooltip":"Caution :Clicking Will Attempt To Reset All Alarms","color":"","bgcolor":"","icon":"","payload":"true","payloadType":"bool","topic":"","x":110,"y":260,"wires":[["38961cfb.f806ac"]],"info":"<style>\nmd-button {\n background-image: linear-gradient(to right, rgba(255,0,0,1),rgba(255,0,0,0),\n}\n</style>"},{"id":"38961cfb.f806ac","type":"trigger","z":"a945bb2b.c285e8","name":"","op1":"1","op2":"0","op1type":"num","op2type":"num","duration":"2","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":340,"y":260,"wires":[["16897b7e.09fad5"],["d794e355.5080f"]]},{"id":"d794e355.5080f","type":"trigger","z":"a945bb2b.c285e8","name":"","op1":"0","op2":"","op1type":"num","op2type":"nul","duration":"3","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":620,"y":280,"wires":[["5432c057.6df59"]]},{"id":"da105059.55fab8","type":"function","z":"a945bb2b.c285e8","name":"","func":"//var modbusCode = msg.payload[0];\n//var lastCode = flow.get('lastModbusCode') || 0;\n//\n//if (lastCode == modbusCode) {\n// return null;\n//}\n\n//flow.set('lastModbusCode', modbusCode);\n\n//if (modbusCode === 0) {\n // return null;\n//}\n\n//const mapCodeDescription = {\n// 1: \"Plantroom 1 Fault\",\n//};\nif (msg.payload==1){\nmsg.topic = \"Plantroom 1 New Alarm \"\nmsg.payload = \"<p>Dear Portal User,</p>\" +\n\"<p>Please note that you have a fault at: Boyd Wilson Electrical Renwick Plant - Plantroom 1.</p>\" +\n\"<p>Visit <a href=\\\"https://bwel-portal.co.nz/login\\\">bwel-portal.co.nz/</a> to clear the fault if possible.</p>\" +\n\"<p></p>\" +\n\"<p></p>\" +\n\"<p><p/>\" +\n\"Portal Admin</p>\" +\n\"<p>Boyd Wilson Electrical Ltd<br />\" +\n\"PO Box 110, Renwick 7243<br />\" +\n\"11a Uxbridge Street, Renwick 7204<br />\" +\n\"Marlborough</p>\" +\n\"<p></p>\" +\n\"+P: 03 572 7448</p>\" +\n\"<p></p>\" +\n\"<img src=\\\"https://fakeimg.pl/300x70/?text=Boyd%20Wilson&font=lobster\\\">\";\n\nreturn msg;\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","x":660,"y":440,"wires":[["2dd2623c.db4786"]]},{"id":"2dd2623c.db4786","type":"debug","z":"a945bb2b.c285e8","name":"","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":900,"y":380,"wires":[]},{"id":"e6992b02.6b7828","type":"trigger","z":"a945bb2b.c285e8","name":"","op1":"1","op2":"","op1type":"str","op2type":"nul","duration":"500","extend":false,"units":"ms","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":500,"y":440,"wires":[["da105059.55fab8"]]},{"id":"8a9d3537.bd2a68","type":"function","z":"a945bb2b.c285e8","name":"","func":"if (msg.payload ==false ){\nreturn null;\n}\nif (msg.payload ==true ){\nreturn {payload : \"1\"};\n}\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":320,"y":440,"wires":[["e6992b02.6b7828"]]},{"id":"67340e27.bd1b68","type":"pccc in","z":"a945bb2b.c285e8","endpoint":"ba0b9c2b.a3c1","mode":"single","variable":"Alarm Status","diff":true,"name":"","x":150,"y":340,"wires":[["5dc38291.a6aa64","38f753c4.dcf3cc"]]},{"id":"d3aa7eac.f4ab48","type":"pccc in","z":"a945bb2b.c285e8","endpoint":"ba0b9c2b.a3c1","mode":"single","variable":"New Alarm","diff":true,"name":"","x":140,"y":440,"wires":[["8a9d3537.bd2a68"]]},{"id":"9434025.ae8ac","type":"pccc out","z":"a945bb2b.c285e8","endpoint":"ba0b9c2b.a3c1","variable":"","name":"","x":730,"y":40,"wires":[]},{"id":"c643bb7f.bebcd8","type":"pccc out","z":"a945bb2b.c285e8","endpoint":"ba0b9c2b.a3c1","variable":"","name":"","x":890,"y":140,"wires":[]},{"id":"16897b7e.09fad5","type":"pccc out","z":"a945bb2b.c285e8","endpoint":"ba0b9c2b.a3c1","variable":"","name":"","x":650,"y":220,"wires":[]},{"id":"5432c057.6df59","type":"pccc out","z":"a945bb2b.c285e8","endpoint":"ba0b9c2b.a3c1","variable":"","name":"","x":870,"y":280,"wires":[]},{"id":"5dc38291.a6aa64","type":"ui_led","z":"a945bb2b.c285e8","order":1,"group":"f939857c.dafb1","width":1,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#f5f5f5","value":"0","valueType":"num"},{"color":"#ff8000","value":"1","valueType":"num"},{"color":"#ff0000","value":"2","valueType":"num"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":false,"name":"","x":370,"y":340,"wires":[]},{"id":"38f753c4.dcf3cc","type":"function","z":"a945bb2b.c285e8","name":"","func":"if (msg.payload ==0 ){\n {color: \"white\"};\nreturn {payload : \"No Fault\"}; \n\n}\nif (msg.payload ==1 ){\nreturn {payload : \"Fault Acknowledged\"};\n}\nif (msg.payload ==2 ){\nreturn {payload : \"Fault Active\"};\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":380,"y":380,"wires":[["c7d4a2e2.7894"]]},{"id":"c7d4a2e2.7894","type":"ui_text","z":"a945bb2b.c285e8","group":"f939857c.dafb1","order":2,"width":5,"height":1,"name":"","label":"","format":"{{msg.payload}}","layout":"row-left","x":530,"y":380,"wires":[]},{"id":"1f5bf84a.1a2278","type":"ui_template","z":"a945bb2b.c285e8","group":"4c346a10.bf931c","name":"","order":5,"width":0,"height":0,"format":"<head>\n<Style>\n\n:root{\n --base-color:#d3d3d3;\n --shadow-dark:0, 0, 0;\n --shadow-light:255, 255, 255;\n --widgetColor:#cccccc;\n --widgetColorAccent:#b6b6b6;\n --accentColor:#6a87a3;\n \n \n --h1:10px;\n --v1:10px;\n --h2:-8px;\n --v2:-8px;\n --blur1:16px;\n --blur2:12px;\n\n --shadowColor: var(--h1) var(--v1) var(--blur1) 0 rgba(var(--shadow-dark), 0.3),\n var(--h2) var(--v2) var(--blur2) 0 rgba(var(--shadow-light), 0.25);\n\n --text-color:#000000;\n --nr-dashboard-widgetTextColor:#000000;\n}\n\nbody.md-default-theme, body, html.md-default-theme, html {\n color: var(--text-color);\n border:3px solid #a6a6a6;\n font-size: 18px;\n\n}\n.masonry-container {\n position: relative;\n width: 100%;\n margin: 0 auto;\n min-height:unset !important;\n}\nbody.nr-dashboard-theme {\n background:var(--base-color)\n}\nbody.nr-dashboard-theme md-toolbar {\n background:var(--base-color);\n color: var(--text-color);\n}\nbody.nr-dashboard-theme md-sidenav {\n color: var(--text-color);\n background:var(--base-color)\n}\nbody.nr-dashboard-theme md-sidenav div.md-list-item-inner {\n color: var(--text-color);\n background-color: transparent;\n}\n.nr-dashboard-theme ui-card-panel {\n background:linear-gradient(-45deg, rgba(var(--shadow-dark),0.2), rgba(var(--shadow-light),0.3));\n border-radius: 1em;\n box-shadow: var(--shadowColor);\n border:none;\n\n}\nbody.nr-dashboard-theme md-content md-card {\n background:transparent;\n color: var(--text-color);\n}\n.nr-dashboard-theme .nr-dashboard-template {\n background:transparent;\n}\n.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n color:var(--text-color);\n \n}\n\n.md-button{\n border-radius:0.6em;\n color: var(--text-color);\n \n}\n.nr-dashboard-theme .nr-dashboard-button .md-button {\n background-color: var(--widgetColor);\n box-shadow: var(--shadowColor);\n color: #000000;\n border: 1.5px solid #b3b3b3;\n \n \n}\n.md-button.md-raised:not([disabled]) {\n box-shadow: 2px 4px 7px 0 rgb(0 0 0 / 26%);\n}\n.md-button:not([disabled]).md-fab:active, .md-button:not([disabled]).md-raised:active {\n box-shadow: 1px 1px 2px 0 rgb(0 0 0 / 30%);\n}\n.nr-dashboard-theme .nr-dashboard-button .md-button:hover {\n background-color: var(--widgetColor);\n}\n.nr-dashboard-theme .nr-dashboard-button .md-button:focus {\n background-color: var(--widgetColor);\n}\nmd-list-item.md-no-proxy.md-button, md-list-item .md-no-style.md-button {\n box-shadow: 2px 4px 7px 0 rgb(0 0 0 / 26%);\n}\n.nr-dashboard-theme .nr-dashboard-numeric .value {\n background:unset;\n color:var(--text-color);\n}\n.nr-dashboard-theme .nr-dashboard-form {\n color:var(--text-color);\n}\n.nr-dashboard-theme .nr-dashboard-form-button {\n background-color: var(--widgetColor);\n color:var(--text-color);\n}\n\n.nr-dashboard-theme .nr-dashboard-form-button:hover {\n background-color: var(--widgetColor) !important;\n}\n.nr-dashboard-theme .nr-dashboard-form-button:focus {\n background-color: var(--widgetColor) !important;\n}\n.nr-dashboard-theme md-input-container.md-default-theme .md-input, md-input-container .md-input {\n color:var(--text-color);\n border-color: var(--widgetColor) !important;\n}\n.nr-dashboard-theme .nr-dashboard-switch md-switch .md-thumb {\n background-color: var(--widgetColor);\n\n}\n.nr-dashboard-theme .nr-dashboard-switch md-switch .md-bar {\n background-color: rgb(var(--widgetColor));\n box-shadow: inset var(--shadowColor);\n}\n.nr-dashboard-theme .nr-dashboard-switch md-switch.md-checked .md-bar {\n background-color: var(--widgetColorAccent);\n box-shadow: 0 0 10px 0px var(--widgetColor);\n}\n.nr-dashboard-theme .nr-dashboard-switch md-switch.md-checked .md-thumb {\n background-color: var(--accentColor);\n box-shadow: 0 0 10px 0px rgba(var(--shadow-dark),25%);\n}\n.nr-dashboard-theme .nr-dashboard-slider .md-track {\n background-color: var(--accentColor);\n}\nmd-slider .md-thumb {\n box-shadow: var(--shadowColor)\n}\n\n.nr-dashboard-theme .nr-dashboard-slider .md-thumb:after {\n background-color: var(--accentColor);\n border-color: var(--accentColor);\n}\n\n.nr-dashboard-theme md-select-menu, .nr-dashboard-theme md-select-menu md-option {\n background-color: rgb(255 255 255 / 20%);\n color:var(--text-color);\n border-radius:0.8em;\n}\n\n.nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value, .nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value.md-select-placeholder {\n margin-top: -3px;\n border-color: #eeeeee7a;\n \n}\n.nr-dashboard-theme .md-select-menu-container {\n max-height: 85%;\n overflow-y: auto;\n border: none;\n border-radius: 0.8em;\n}\n\n.nr-dashboard-theme md-select-menu md-option {\n background-color: var(--widgetColor);\n \n height: 29px;\n border-radius: 0.6em;\n margin-left: 10px;\n margin-right: 10px;\n margin-top: 2px;\n box-shadow: 0 0 6px 6px #24202133;\n transition: 0.3s;\n}\n.nr-dashboard-theme md-select-menu md-option[selected] {\n color: var(--base-color) !important;\n background-color: var(--accentColor) !important;\n}\n.nr-dashboard-theme md-select-menu md-option:nth-child(even) {\n background-color: var(--widgetColorAccent);\n}\n.nr-dashboard-theme md-select-menu md-option:last-child {\n margin-bottom: 8px;\n}\n.nr-dashboard-theme md-select-menu md-option:hover {\n background-color: var(--widgetColorAccent) !important;\n padding-left: 26px;\n}\n.nr-dashboard-theme md-select-menu md-option > .md-ripple-container{\n border-radius: 14px;\n}\n.nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value, .nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value.md-select-placeholder {\n color: var(--text-color);\n border-color: var(--text-color);\n border-bottom-width: 1px;\n padding: 0px 2px;\n}\n\n\n \n</style>\n </head>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1200,"y":240,"wires":[[]]},{"id":"704118ab.a99698","type":"tab","label":"Alarm Area 2","disabled":false,"info":""},{"id":"99fd9886.e85c68","type":"ui_button","z":"704118ab.a99698","name":"Acknowledge Alarm","group":"6fd69085.28bef8","order":3,"width":3,"height":1,"passthru":true,"label":"Acknowledge","tooltip":"Caution :Clicking Will Acknowlwedge Alarms","color":"","bgcolor":"","icon":"","payload":"true","payloadType":"bool","topic":"","x":220,"y":140,"wires":[["aad1fafd.4120e8"]]},{"id":"aad1fafd.4120e8","type":"trigger","z":"704118ab.a99698","name":"","op1":"1","op2":"0","op1type":"num","op2type":"num","duration":"1","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":460,"y":140,"wires":[["cb124bd2.55d3e8"],["c58f18cb.84ca38"]]},{"id":"c58f18cb.84ca38","type":"trigger","z":"704118ab.a99698","name":"","op1":"0","op2":"","op1type":"num","op2type":"nul","duration":"2","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":640,"y":200,"wires":[["54fb1726.96cda"]]},{"id":"97f30b22.41f4a","type":"ui_button","z":"704118ab.a99698","name":"Reset","group":"6fd69085.28bef8","order":4,"width":3,"height":1,"passthru":true,"label":"Reset","tooltip":"Caution :Clicking Will Attempt To Reset All Alarms","color":"","bgcolor":"","icon":"","payload":"true","payloadType":"bool","topic":"","x":90,"y":320,"wires":[["593508c7.a4613"]],"info":"<style>\nmd-button {\n background-image: linear-gradient(to right, rgba(255,0,0,1),rgba(255,0,0,0),\n}\n</style>"},{"id":"593508c7.a4613","type":"trigger","z":"704118ab.a99698","name":"","op1":"1","op2":"0","op1type":"num","op2type":"num","duration":"2","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":320,"y":320,"wires":[["a697bf82.b0acf"],["d7588702.c15ac8"]]},{"id":"d7588702.c15ac8","type":"trigger","z":"704118ab.a99698","name":"","op1":"0","op2":"","op1type":"num","op2type":"nul","duration":"3","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":600,"y":340,"wires":[["868dd652.d83a58"]]},{"id":"c84f9c6a.2c2eb","type":"function","z":"704118ab.a99698","name":"","func":"//var modbusCode = msg.payload[0];\n//var lastCode = flow.get('lastModbusCode') || 0;\n//\n//if (lastCode == modbusCode) {\n// return null;\n//}\n\n//flow.set('lastModbusCode', modbusCode);\n\n//if (modbusCode === 0) {\n // return null;\n//}\n\n//const mapCodeDescription = {\n// 1: \"Plantroom 1 Fault\",\n//};\nif (msg.payload==1){\nmsg.topic = \"Plantroom 1 New Alarm \"\nmsg.payload = \"<p>Dear Portal User,</p>\" +\n\"<p>Please note that you have a fault at: Boyd Wilson Electrical Renwick Plant - Plantroom 1.</p>\" +\n\"<p>Visit <a href=\\\"https://bwel-portal.co.nz/login\\\">bwel-portal.co.nz/</a> to clear the fault if possible.</p>\" +\n\"<p></p>\" +\n\"<p></p>\" +\n\"<p><p/>\" +\n\"Portal Admin</p>\" +\n\"<p>Boyd Wilson Electrical Ltd<br />\" +\n\"PO Box 110, Renwick 7243<br />\" +\n\"11a Uxbridge Street, Renwick 7204<br />\" +\n\"Marlborough</p>\" +\n\"<p></p>\" +\n\"+P: 03 572 7448</p>\" +\n\"<p></p>\" +\n\"<img src=\\\"https://fakeimg.pl/300x70/?text=Boyd%20Wilson&font=lobster\\\">\";\n\nreturn msg;\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","x":660,"y":500,"wires":[["72117d4d.0547f4","56d03800.83975"]]},{"id":"72117d4d.0547f4","type":"e-mail","z":"704118ab.a99698","server":"mail.1stdomainz.co.nz","port":"25","secure":false,"tls":false,"name":"","dname":"","x":840,"y":500,"wires":[]},{"id":"56d03800.83975","type":"debug","z":"704118ab.a99698","name":"","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":860,"y":460,"wires":[]},{"id":"87c59b59.6d9158","type":"trigger","z":"704118ab.a99698","name":"","op1":"1","op2":"","op1type":"str","op2type":"nul","duration":"500","extend":false,"units":"ms","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":480,"y":500,"wires":[["c84f9c6a.2c2eb"]]},{"id":"34a66bd3.dab4cc","type":"function","z":"704118ab.a99698","name":"","func":"if (msg.payload ==false ){\nreturn null;\n}\nif (msg.payload ==true ){\nreturn {payload : \"1\"};\n}\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":300,"y":500,"wires":[["87c59b59.6d9158"]]},{"id":"c9447fc4.4c3ab","type":"pccc in","z":"704118ab.a99698","endpoint":"ba0b9c2b.a3c1","mode":"single","variable":"Alarm Status","diff":true,"name":"","x":130,"y":400,"wires":[["1eac6792.0fdcd8","88025018.1b0488"]]},{"id":"b0efc1f3.681918","type":"pccc in","z":"704118ab.a99698","endpoint":"ba0b9c2b.a3c1","mode":"single","variable":"New Alarm","diff":true,"name":"","x":120,"y":500,"wires":[["34a66bd3.dab4cc"]]},{"id":"cb124bd2.55d3e8","type":"pccc out","z":"704118ab.a99698","endpoint":"ba0b9c2b.a3c1","variable":"Acknowledge Alarm","name":"","x":710,"y":100,"wires":[]},{"id":"54fb1726.96cda","type":"pccc out","z":"704118ab.a99698","endpoint":"ba0b9c2b.a3c1","variable":"Acknowledge Alarm","name":"","x":870,"y":200,"wires":[]},{"id":"a697bf82.b0acf","type":"pccc out","z":"704118ab.a99698","endpoint":"ba0b9c2b.a3c1","variable":"Reset","name":"","x":580,"y":280,"wires":[]},{"id":"868dd652.d83a58","type":"pccc out","z":"704118ab.a99698","endpoint":"ba0b9c2b.a3c1","variable":"Reset","name":"","x":800,"y":340,"wires":[]},{"id":"1eac6792.0fdcd8","type":"ui_led","z":"704118ab.a99698","order":1,"group":"6fd69085.28bef8","width":1,"height":1,"label":"","labelPlacement":"left","labelAlignment":"center","colorForValue":[{"color":"#f5f5f5","value":"0","valueType":"num"},{"color":"#ff0000","value":"1","valueType":"num"},{"color":"#ff8000","value":"2","valueType":"num"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":false,"name":"","x":390,"y":380,"wires":[]},{"id":"e71576ec.c3dc18","type":"ui_text","z":"704118ab.a99698","group":"6fd69085.28bef8","order":2,"width":5,"height":1,"name":"","label":"","format":"{{msg.payload}}","layout":"row-left","x":550,"y":440,"wires":[]},{"id":"88025018.1b0488","type":"function","z":"704118ab.a99698","name":"","func":"if (msg.payload ==0 ){\nreturn {payload : \"No Fault\"};\n}\nif (msg.payload ==1 ){\nreturn {payload : \"Fault Present\"};\n}\nif (msg.payload ==2 ){\nreturn {payload : \"Fault Active\"};\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":380,"y":440,"wires":[["e71576ec.c3dc18"]]},{"id":"874d52bc.49c108","type":"tab","label":"Alarm Area 3","disabled":false,"info":""},{"id":"d9bf3f85.88548","type":"ui_button","z":"874d52bc.49c108","name":"Acknowledge Alarm","group":"20ffb11.b36b64e","order":3,"width":3,"height":1,"passthru":true,"label":"Acknowledge","tooltip":"Caution :Clicking Will Acknowlwedge Alarms","color":"","bgcolor":"","icon":"","payload":"true","payloadType":"bool","topic":"","x":220,"y":120,"wires":[["483a0743.7dafb8"]]},{"id":"483a0743.7dafb8","type":"trigger","z":"874d52bc.49c108","name":"","op1":"1","op2":"0","op1type":"num","op2type":"num","duration":"1","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":460,"y":120,"wires":[["53f52100.038c58"],["f9481a6f.10d848"]]},{"id":"f9481a6f.10d848","type":"trigger","z":"874d52bc.49c108","name":"","op1":"0","op2":"","op1type":"num","op2type":"nul","duration":"2","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":640,"y":180,"wires":[["35036958.d2e636"]]},{"id":"104dcdd1.32ecca","type":"ui_button","z":"874d52bc.49c108","name":"Reset","group":"20ffb11.b36b64e","order":4,"width":3,"height":1,"passthru":true,"label":"Reset","tooltip":"Caution :Clicking Will Attempt To Reset All Alarms","color":"","bgcolor":"","icon":"","payload":"true","payloadType":"bool","topic":"","x":90,"y":300,"wires":[["3e201bb5.096a5c"]],"info":"<style>\nmd-button {\n background-image: linear-gradient(to right, rgba(255,0,0,1),rgba(255,0,0,0),\n}\n</style>"},{"id":"3e201bb5.096a5c","type":"trigger","z":"874d52bc.49c108","name":"","op1":"1","op2":"0","op1type":"num","op2type":"num","duration":"2","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":320,"y":300,"wires":[["5ec754b3.a1bdc4"],["c3a6dca9.a9f428"]]},{"id":"c3a6dca9.a9f428","type":"trigger","z":"874d52bc.49c108","name":"","op1":"0","op2":"","op1type":"num","op2type":"nul","duration":"3","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":600,"y":320,"wires":[["b4d8eee7.dca578"]]},{"id":"225d2cf2.f58834","type":"function","z":"874d52bc.49c108","name":"","func":"//var modbusCode = msg.payload[0];\n//var lastCode = flow.get('lastModbusCode') || 0;\n//\n//if (lastCode == modbusCode) {\n// return null;\n//}\n\n//flow.set('lastModbusCode', modbusCode);\n\n//if (modbusCode === 0) {\n // return null;\n//}\n\n//const mapCodeDescription = {\n// 1: \"Plantroom 1 Fault\",\n//};\nif (msg.payload==1){\nmsg.topic = \"Plantroom 1 New Alarm \"\nmsg.payload = \"<p>Dear Portal User,</p>\" +\n\"<p>Please note that you have a fault at: Boyd Wilson Electrical Renwick Plant - Plantroom 1.</p>\" +\n\"<p>Visit <a href=\\\"https://bwel-portal.co.nz/login\\\">bwel-portal.co.nz/</a> to clear the fault if possible.</p>\" +\n\"<p></p>\" +\n\"<p></p>\" +\n\"<p><p/>\" +\n\"Portal Admin</p>\" +\n\"<p>Boyd Wilson Electrical Ltd<br />\" +\n\"PO Box 110, Renwick 7243<br />\" +\n\"11a Uxbridge Street, Renwick 7204<br />\" +\n\"Marlborough</p>\" +\n\"<p></p>\" +\n\"+P: 03 572 7448</p>\" +\n\"<p></p>\" +\n\"<img src=\\\"https://fakeimg.pl/300x70/?text=Boyd%20Wilson&font=lobster\\\">\";\n\nreturn msg;\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","x":660,"y":480,"wires":[["c79c5fad.ff7798","1d910fad.fad558"]]},{"id":"c79c5fad.ff7798","type":"e-mail","z":"874d52bc.49c108","server":"mail.1stdomainz.co.nz","port":"25","secure":false,"tls":false,"name":"","dname":"","x":840,"y":480,"wires":[]},{"id":"1d910fad.fad558","type":"debug","z":"874d52bc.49c108","name":"","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":860,"y":440,"wires":[]},{"id":"40a25010.017c18","type":"trigger","z":"874d52bc.49c108","name":"","op1":"1","op2":"","op1type":"str","op2type":"nul","duration":"500","extend":false,"units":"ms","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":480,"y":480,"wires":[["225d2cf2.f58834"]]},{"id":"4933b479.c7cbf4","type":"function","z":"874d52bc.49c108","name":"","func":"if (msg.payload ==false ){\nreturn null;\n}\nif (msg.payload ==true ){\nreturn {payload : \"1\"};\n}\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":300,"y":480,"wires":[["40a25010.017c18"]]},{"id":"89d21995.5bfb58","type":"pccc in","z":"874d52bc.49c108","endpoint":"ba0b9c2b.a3c1","mode":"single","variable":"Alarm Status","diff":true,"name":"","x":130,"y":380,"wires":[["7308e799.9bcb68","6b7e5dd4.dd516c"]]},{"id":"97bd60f6.fb0f3","type":"pccc in","z":"874d52bc.49c108","endpoint":"ba0b9c2b.a3c1","mode":"single","variable":"New Alarm","diff":true,"name":"","x":120,"y":480,"wires":[["4933b479.c7cbf4"]]},{"id":"53f52100.038c58","type":"pccc out","z":"874d52bc.49c108","endpoint":"ba0b9c2b.a3c1","variable":"Acknowledge Alarm","name":"","x":710,"y":80,"wires":[]},{"id":"35036958.d2e636","type":"pccc out","z":"874d52bc.49c108","endpoint":"ba0b9c2b.a3c1","variable":"Acknowledge Alarm","name":"","x":870,"y":180,"wires":[]},{"id":"5ec754b3.a1bdc4","type":"pccc out","z":"874d52bc.49c108","endpoint":"ba0b9c2b.a3c1","variable":"Reset","name":"","x":580,"y":260,"wires":[]},{"id":"b4d8eee7.dca578","type":"pccc out","z":"874d52bc.49c108","endpoint":"ba0b9c2b.a3c1","variable":"Reset","name":"","x":800,"y":320,"wires":[]},{"id":"7308e799.9bcb68","type":"ui_led","z":"874d52bc.49c108","order":1,"group":"20ffb11.b36b64e","width":1,"height":1,"label":"","labelPlacement":"left","labelAlignment":"center","colorForValue":[{"color":"#f5f5f5","value":"0","valueType":"num"},{"color":"#ff0000","value":"1","valueType":"num"},{"color":"#ff8000","value":"2","valueType":"num"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":false,"name":"","x":390,"y":360,"wires":[]},{"id":"324e9cb0.64b9ec","type":"ui_text","z":"874d52bc.49c108","group":"20ffb11.b36b64e","order":2,"width":5,"height":1,"name":"","label":"","format":"{{msg.payload}}","layout":"row-left","x":550,"y":420,"wires":[]},{"id":"6b7e5dd4.dd516c","type":"function","z":"874d52bc.49c108","name":"","func":"if (msg.payload ==0 ){\nreturn {payload : \"No Fault\"};\n}\nif (msg.payload ==1 ){\nreturn {payload : \"Fault Present\"};\n}\nif (msg.payload ==2 ){\nreturn {payload : \"Fault Active\"};\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":380,"y":420,"wires":[["324e9cb0.64b9ec"]]},{"id":"f939857c.dafb1","type":"ui_group","z":"","name":"Alarm Area 1","tab":"862fc89c.1e2e58","order":1,"disp":true,"width":6,"collapse":false},{"id":"ba0b9c2b.a3c1","type":"pccc endpoint","z":"","address":"192.168.1.151","port":"44818","userouting":false,"routing":"0x01,0x00,0x01,0x00","cycletime":"500","timeout":"1500","name":"","vartable":[{"addr":"N99:0/0","name":"New Alarm"},{"addr":"N99:0/1","name":"Alarm Active"},{"addr":"N99:1/0","name":"Sewer Exit Sump Pump1 FTR"},{"addr":"N99:1/1","name":"Sewer Exit Sump Pump2 FTR"},{"addr":"N99:1/2","name":"Sewer Tanks Pump1 FTR"},{"addr":"N99:1/3","name":"Sewer Tanks Pump2 FTR"},{"addr":"N99:1/4","name":"Wastewater Sump Pump1 FTR"},{"addr":"N99:1/5","name":"Wastewater Sump Pump2 FTR"},{"addr":"N99:1/6","name":"Wastewater Sump Mixer FTR"},{"addr":"N99:19/0","name":"Crevis Comms Fault"},{"addr":"N99:19/1","name":"Sewer Exit Sump Levels Fault"},{"addr":"N99:19/2","name":"Sewer Tanks Levels Fault"},{"addr":"N99:19/3","name":"Sewer Exit Sump Low Level"},{"addr":"N99:19/4","name":"Sewer Exit Sump High Level"},{"addr":"N99:19/5","name":"Sewer Tanks Low Level"},{"addr":"N99:19/6","name":"Sewer Tanks High Level"},{"addr":"N9:41","name":"Alarm Status"},{"addr":"N10:0/0","name":"Reset"},{"addr":"N199:46/0","name":"Acknowledge Alarm"}]},{"id":"4c346a10.bf931c","type":"ui_group","z":"","name":"Alarm Area 6","tab":"862fc89c.1e2e58","order":6,"disp":true,"width":"6","collapse":false},{"id":"6fd69085.28bef8","type":"ui_group","z":"","name":"Alarm Area 2","tab":"862fc89c.1e2e58","order":2,"disp":true,"width":"6","collapse":false},{"id":"20ffb11.b36b64e","type":"ui_group","z":"","name":"Alarm Area 3","tab":"862fc89c.1e2e58","order":3,"disp":true,"width":"6","collapse":false},{"id":"862fc89c.1e2e58","type":"ui_tab","z":"","name":"Kono Seafoods Site Alarm Overview","icon":"dashboard","disabled":false,"hidden":false}]
Hi @hotNipi
Thank you this is exactly what I was thinking. I have the six areas but have shared 3 areas as the six had too many characters to share. Each area group should change background colour depending on the value that is currently triggering the LED. I would like to keep the theme and just change the base colour depending on the Variable. I dont know how to address the groups individually so that I can override the styles individually as my CSS is currently a main override.
Please look at my flow if you have time.
Thank you
You shared too much 
I don't have most of the nodes you use for data communication so your flow does't do much for me.
But I see one mistake you have made - you have CSS in many template nodes rather than having one and targeted to the site head.
I think you should examine my previous example, learn it by asking questions like why it is working and then try to apply same strategy to your setup.
You have to locate and use the ID of that group/card (I still don't know what is called what 
) in question... I used (in windows) F12 then found the card I wanted and located the ID
But after looking at it, I see you can just use <group tab>_<group name>_cards) = #Tests_CSS_Colour_cards (NOTE the preceding #)
Now... In my test case I then used a switch inside the card to change the card background.
Note the half transparency (80) to make it blend a bit better.
Then I created a template (set for Widget in Group) with the proper ID, using the msg.payload from the switch to determine the colour choices
</style>
#Tests_CSS_Colour_cards {
background-color: {{msg.payload}} !important;
}
</style>
Now this is all a real hack as I am still learning about CSS, and I tend to mix my experiments together (this card alone has button hover, custom switch and background colour changing tests, along with a binary display graph (not active) and even some TTS going on), so try not to develop my bad habits 
Hi @Gunner
Thanks fo rthat it will help a lot but will I be able to change the background in the ui template for just that card? This is how it will work I think I would set a ui-template containing the CSS theme depending on the input I recieve. Is this possible I am a CSS and GTML noob.
[{"id":"6a4f5ab2.e584ac","type":"debug","z":"a945bb2b.c285e8","name":"0","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":530,"y":680,"wires":[]},{"id":"89b2e055.10295","type":"debug","z":"a945bb2b.c285e8","name":"1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":530,"y":720,"wires":[]},{"id":"d98b4beb.616ed8","type":"debug","z":"a945bb2b.c285e8","name":"2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":530,"y":760,"wires":[]},{"id":"7ad4ff57.8c41","type":"inject","z":"a945bb2b.c285e8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":110,"y":680,"wires":[["663b62c6.991e2c"]]},{"id":"9b8115d2.9dd508","type":"inject","z":"a945bb2b.c285e8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":110,"y":720,"wires":[["663b62c6.991e2c"]]},{"id":"4c682394.7ee1a4","type":"inject","z":"a945bb2b.c285e8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"2","payloadType":"num","x":110,"y":760,"wires":[["663b62c6.991e2c"]]},{"id":"663b62c6.991e2c","type":"function","z":"a945bb2b.c285e8","name":"","func":"var p = parseInt(msg.payload);\nif (p === 0) {\n return [msg, null, null, null];\n} else if (p === 1) {\n return [null, msg, null, null];\n} else if (p === 2){\n return [null, null, msg, null];\n}\n\n","outputs":3,"noerr":0,"initialize":"","finalize":"","x":300,"y":720,"wires":[["6a4f5ab2.e584ac"],["89b2e055.10295"],["d98b4beb.616ed8"]]}]
Yes, each one would have it's own ID, and would need it's own template (set for Widget in Group)
The colour of button itself? As in my example images above, there is no separate background that I am aware of.
What does your end result look like?
As for identifying the ID, it is listed on the side bar,
But changing a button colour should be as simple as sending a msg to the button. You might have to search the forum for that as I don't have the process handy... all I have done dynamically is the change when hovering.
EDIT Yes, the button itself is referred to as background and just a simple change node with msg.background will do the trick. You can also use the HEX coding for the colour if desired.
A bit more clear example of card background changing in case every card contains at least one ui_template node.
Just make another copy of group, add new dashboard group and adjust all nodes in that new group to be child of that new dashboard group.
[{"id":"c93ec0f3.64b248","type":"tab","label":"Dashboard","disabled":false,"info":""},{"id":"1018a3bd.140bcc","type":"group","z":"c93ec0f3.64b248","name":"Alarm 1","style":{"label":true},"nodes":["3c759dea.4b6ce2","d8548a1e.ee6828","30c329f4.8ec826","8b9dc510.e5e808","16ac1c81.0a76e3","243fffed.36a1","861a501e.9332f","c5de07a.b64baf8"],"x":54,"y":119,"w":532,"h":222},{"id":"76f83664.100318","type":"group","z":"c93ec0f3.64b248","name":"Alarm 3","style":{"label":true},"nodes":["a74d9b11.090188","93a3a345.1f371","288dd43e.42a7bc","dc6cdece.a97b7","ba07289e.12a928","4f115e53.a624d","5d14f150.a8e51","eef95bfa.0b0278"],"x":54,"y":359,"w":532,"h":222},{"id":"d3804d10.dfa69","type":"group","z":"c93ec0f3.64b248","name":"Alarm 2","style":{"label":true},"nodes":["d6a1f699.aab708","8926b318.84edb","a2c82ac.4da50d8","5123cfa5.025b5","dd78e90d.119a38","fa82708.d6e739","1621b58a.cc041a","20b92e73.40a742"],"x":674,"y":119,"w":532,"h":222},{"id":"3c759dea.4b6ce2","type":"ui_button","z":"c93ec0f3.64b248","g":"1018a3bd.140bcc","name":"","group":"621f3245.59d80c","order":3,"width":"3","height":"1","passthru":false,"label":"one","tooltip":"","color":"","bgcolor":"","icon":"","payload":"one","payloadType":"str","topic":"topic","topicType":"msg","x":450,"y":260,"wires":[[]]},{"id":"d8548a1e.ee6828","type":"ui_button","z":"c93ec0f3.64b248","g":"1018a3bd.140bcc","name":"","group":"621f3245.59d80c","order":4,"width":"3","height":"1","passthru":false,"label":"two","tooltip":"","color":"","bgcolor":"","icon":"","payload":"one","payloadType":"str","topic":"topic","topicType":"msg","x":450,"y":300,"wires":[[]]},{"id":"30c329f4.8ec826","type":"ui_text","z":"c93ec0f3.64b248","g":"1018a3bd.140bcc","group":"621f3245.59d80c","order":2,"width":"5","height":"1","name":"","label":"","format":"{{msg.payload.stateDescription}}","layout":"row-left","x":450,"y":220,"wires":[]},{"id":"8b9dc510.e5e808","type":"ui_template","z":"c93ec0f3.64b248","g":"1018a3bd.140bcc","group":"621f3245.59d80c","name":"Led & card bgr","order":1,"width":"1","height":"1","format":"<div id=\"{{'my_'+$id}}\" style=\"color:{{msg.payload.stateColor}}; margin:auto;\"><i class=\"fa fa-circle\"></i></div>\n\n<script>\n\n(function(scope) {\n let colors = [\"#00800030\",\"#ffa50030\",\"#ff000030\"]\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n var c = colors[msg.payload.code]\n $(\"#my_\"+scope.$id).closest(\".nr-dashboard-cardpanel\").css(\"background-color\",c);\n }\n });\n})(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":480,"y":180,"wires":[[]]},{"id":"916c0d69.02556","type":"ui_template","z":"c93ec0f3.64b248","group":"","name":"DASHBOARD CSS","order":5,"width":0,"height":0,"format":"<Style id=\"dashboard-customm-styles\">\n\n:root{\n --base-color:#d3d3d3;\n --shadow-dark:0, 0, 0;\n --shadow-light:255, 255, 255;\n --widgetColor:#cccccc;\n --widgetColorAccent:#b6b6b6;\n --accentColor:#6a87a3;\n \n \n --h1:10px;\n --v1:10px;\n --h2:-8px;\n --v2:-8px;\n --blur1:16px;\n --blur2:12px;\n\n --shadowColor: var(--h1) var(--v1) var(--blur1) 0 rgba(var(--shadow-dark), 0.3),\n var(--h2) var(--v2) var(--blur2) 0 rgba(var(--shadow-light), 0.25);\n\n --text-color:#000000;\n --nr-dashboard-widgetTextColor:#000000;\n}\n\nbody.md-default-theme, body, html.md-default-theme, html {\n color: var(--text-color);\n border:3px solid #a6a6a6;\n font-size: 18px;\n\n}\n.masonry-container {\n position: relative;\n width: 100%;\n margin: 0 auto;\n min-height:unset !important;\n}\nbody.nr-dashboard-theme {\n background:var(--base-color)\n}\nbody.nr-dashboard-theme md-toolbar {\n background:var(--base-color);\n color: var(--text-color);\n}\nbody.nr-dashboard-theme md-sidenav {\n color: var(--text-color);\n background:var(--base-color)\n}\nbody.nr-dashboard-theme md-sidenav div.md-list-item-inner {\n color: var(--text-color);\n background-color: transparent;\n}\n.nr-dashboard-theme ui-card-panel {\n background:linear-gradient(-45deg, rgba(var(--shadow-dark),0.2), rgba(var(--shadow-light),0.3));\n border-radius: 1em;\n box-shadow: var(--shadowColor);\n border:none;\n\n}\n.nr-dashboard-cardpanel {\n box-sizing: border-box;\n border-radius: 1em;\n}\nbody.nr-dashboard-theme md-content md-card {\n background:transparent;\n color: var(--text-color);\n}\n.nr-dashboard-theme .nr-dashboard-template {\n background:transparent;\n}\n.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n color:var(--text-color);\n \n}\n\n.md-button{\n border-radius:0.6em;\n color: var(--text-color);\n \n}\n.nr-dashboard-theme .nr-dashboard-button .md-button {\n background-color: var(--widgetColor);\n box-shadow: var(--shadowColor);\n color: #000000;\n border: 1.5px solid #b3b3b3;\n \n \n}\n.md-button.md-raised:not([disabled]) {\n box-shadow: 2px 4px 7px 0 rgb(0 0 0 / 26%);\n}\n.md-button:not([disabled]).md-fab:active, .md-button:not([disabled]).md-raised:active {\n box-shadow: 1px 1px 2px 0 rgb(0 0 0 / 30%);\n}\n.nr-dashboard-theme .nr-dashboard-button .md-button:hover {\n background-color: var(--widgetColor);\n}\n.nr-dashboard-theme .nr-dashboard-button .md-button:focus {\n background-color: var(--widgetColor);\n}\nmd-list-item.md-no-proxy.md-button, md-list-item .md-no-style.md-button {\n box-shadow: 2px 4px 7px 0 rgb(0 0 0 / 26%);\n}\n.nr-dashboard-theme .nr-dashboard-numeric .value {\n background:unset;\n color:var(--text-color);\n}\n.nr-dashboard-theme .nr-dashboard-form {\n color:var(--text-color);\n}\n.nr-dashboard-theme .nr-dashboard-form-button {\n background-color: var(--widgetColor);\n color:var(--text-color);\n}\n\n.nr-dashboard-theme .nr-dashboard-form-button:hover {\n background-color: var(--widgetColor) !important;\n}\n.nr-dashboard-theme .nr-dashboard-form-button:focus {\n background-color: var(--widgetColor) !important;\n}\n.nr-dashboard-theme md-input-container.md-default-theme .md-input, md-input-container .md-input {\n color:var(--text-color);\n border-color: var(--widgetColor) !important;\n}\n.nr-dashboard-theme .nr-dashboard-switch md-switch .md-thumb {\n background-color: var(--widgetColor);\n\n}\n.nr-dashboard-theme .nr-dashboard-switch md-switch .md-bar {\n background-color: rgb(var(--widgetColor));\n box-shadow: inset var(--shadowColor);\n}\n.nr-dashboard-theme .nr-dashboard-switch md-switch.md-checked .md-bar {\n background-color: var(--widgetColorAccent);\n box-shadow: 0 0 10px 0px var(--widgetColor);\n}\n.nr-dashboard-theme .nr-dashboard-switch md-switch.md-checked .md-thumb {\n background-color: var(--accentColor);\n box-shadow: 0 0 10px 0px rgba(var(--shadow-dark),25%);\n}\n.nr-dashboard-theme .nr-dashboard-slider .md-track {\n background-color: var(--accentColor);\n}\nmd-slider .md-thumb {\n box-shadow: var(--shadowColor)\n}\n\n.nr-dashboard-theme .nr-dashboard-slider .md-thumb:after {\n background-color: var(--accentColor);\n border-color: var(--accentColor);\n}\n\n.nr-dashboard-theme md-select-menu, .nr-dashboard-theme md-select-menu md-option {\n background-color: rgb(255 255 255 / 20%);\n color:var(--text-color);\n border-radius:0.8em;\n}\n\n.nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value, .nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value.md-select-placeholder {\n margin-top: -3px;\n border-color: #eeeeee7a;\n \n}\n.nr-dashboard-theme .md-select-menu-container {\n max-height: 85%;\n overflow-y: auto;\n border: none;\n border-radius: 0.8em;\n}\n\n.nr-dashboard-theme md-select-menu md-option {\n background-color: var(--widgetColor);\n \n height: 29px;\n border-radius: 0.6em;\n margin-left: 10px;\n margin-right: 10px;\n margin-top: 2px;\n box-shadow: 0 0 6px 6px #24202133;\n transition: 0.3s;\n}\n.nr-dashboard-theme md-select-menu md-option[selected] {\n color: var(--base-color) !important;\n background-color: var(--accentColor) !important;\n}\n.nr-dashboard-theme md-select-menu md-option:nth-child(even) {\n background-color: var(--widgetColorAccent);\n}\n.nr-dashboard-theme md-select-menu md-option:last-child {\n margin-bottom: 8px;\n}\n.nr-dashboard-theme md-select-menu md-option:hover {\n background-color: var(--widgetColorAccent) !important;\n padding-left: 26px;\n}\n.nr-dashboard-theme md-select-menu md-option > .md-ripple-container{\n border-radius: 14px;\n}\n.nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value, .nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value.md-select-placeholder {\n color: var(--text-color);\n border-color: var(--text-color);\n border-bottom-width: 1px;\n padding: 0px 2px;\n}\n\n\n \n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":150,"y":80,"wires":[[]]},{"id":"16ac1c81.0a76e3","type":"function","z":"c93ec0f3.64b248","g":"1018a3bd.140bcc","name":"State","func":"var state = {\n code:0,\n stateColor: \"green\",\n stateDescription:\"All fine\"\n}\nif(msg.payload == 1){\n state.code = 1\n state.stateColor = \"orange\"\n state.stateDescription = \"Mainteanance needed!\"\n}\nif(msg.payload == 2){\n state.code = 2\n state.stateColor = \"red\"\n state.stateDescription = \"Something is broken\"\n}\nmsg.payload = state\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":310,"y":200,"wires":[["8b9dc510.e5e808","30c329f4.8ec826"]]},{"id":"243fffed.36a1","type":"inject","z":"c93ec0f3.64b248","g":"1018a3bd.140bcc","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":150,"y":160,"wires":[["16ac1c81.0a76e3"]]},{"id":"861a501e.9332f","type":"inject","z":"c93ec0f3.64b248","g":"1018a3bd.140bcc","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":150,"y":200,"wires":[["16ac1c81.0a76e3"]]},{"id":"c5de07a.b64baf8","type":"inject","z":"c93ec0f3.64b248","g":"1018a3bd.140bcc","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"2","payloadType":"num","x":150,"y":240,"wires":[["16ac1c81.0a76e3"]]},{"id":"d6a1f699.aab708","type":"ui_button","z":"c93ec0f3.64b248","g":"d3804d10.dfa69","name":"","group":"59d39777.641208","order":3,"width":"3","height":"1","passthru":false,"label":"one","tooltip":"","color":"","bgcolor":"","icon":"","payload":"one","payloadType":"str","topic":"topic","topicType":"msg","x":1070,"y":260,"wires":[[]]},{"id":"8926b318.84edb","type":"ui_button","z":"c93ec0f3.64b248","g":"d3804d10.dfa69","name":"","group":"59d39777.641208","order":4,"width":"3","height":"1","passthru":false,"label":"two","tooltip":"","color":"","bgcolor":"","icon":"","payload":"one","payloadType":"str","topic":"topic","topicType":"msg","x":1070,"y":300,"wires":[[]]},{"id":"a2c82ac.4da50d8","type":"ui_text","z":"c93ec0f3.64b248","g":"d3804d10.dfa69","group":"59d39777.641208","order":2,"width":"5","height":"1","name":"","label":"","format":"{{msg.payload.stateDescription}}","layout":"row-left","x":1070,"y":220,"wires":[]},{"id":"5123cfa5.025b5","type":"ui_template","z":"c93ec0f3.64b248","g":"d3804d10.dfa69","group":"59d39777.641208","name":"Led & card bgr","order":1,"width":"1","height":"1","format":"<div id=\"{{'my_'+$id}}\" style=\"color:{{msg.payload.stateColor}}; margin:auto;\"><i class=\"fa fa-circle\"></i></div>\n\n<script>\n\n(function(scope) {\n let colors = [\"#00800030\",\"#ffa50030\",\"#ff000030\"]\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n var c = colors[msg.payload.code]\n $(\"#my_\"+scope.$id).closest(\".nr-dashboard-cardpanel\").css(\"background-color\",c);\n }\n });\n})(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1100,"y":180,"wires":[[]]},{"id":"dd78e90d.119a38","type":"function","z":"c93ec0f3.64b248","g":"d3804d10.dfa69","name":"State","func":"var state = {\n code:0,\n stateColor: \"green\",\n stateDescription:\"All fine\"\n}\nif(msg.payload == 1){\n state.code = 1\n state.stateColor = \"orange\"\n state.stateDescription = \"Mainteanance needed!\"\n}\nif(msg.payload == 2){\n state.code = 2\n state.stateColor = \"red\"\n state.stateDescription = \"Something is broken\"\n}\nmsg.payload = state\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":930,"y":200,"wires":[["5123cfa5.025b5","a2c82ac.4da50d8"]]},{"id":"fa82708.d6e739","type":"inject","z":"c93ec0f3.64b248","g":"d3804d10.dfa69","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":770,"y":160,"wires":[["dd78e90d.119a38"]]},{"id":"1621b58a.cc041a","type":"inject","z":"c93ec0f3.64b248","g":"d3804d10.dfa69","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":770,"y":200,"wires":[["dd78e90d.119a38"]]},{"id":"20b92e73.40a742","type":"inject","z":"c93ec0f3.64b248","g":"d3804d10.dfa69","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"2","payloadType":"num","x":770,"y":240,"wires":[["dd78e90d.119a38"]]},{"id":"a74d9b11.090188","type":"ui_button","z":"c93ec0f3.64b248","g":"76f83664.100318","name":"","group":"39b61d6e.99b392","order":3,"width":"3","height":"1","passthru":false,"label":"one","tooltip":"","color":"","bgcolor":"","icon":"","payload":"one","payloadType":"str","topic":"topic","topicType":"msg","x":450,"y":500,"wires":[[]]},{"id":"93a3a345.1f371","type":"ui_button","z":"c93ec0f3.64b248","g":"76f83664.100318","name":"","group":"39b61d6e.99b392","order":4,"width":"3","height":"1","passthru":false,"label":"two","tooltip":"","color":"","bgcolor":"","icon":"","payload":"one","payloadType":"str","topic":"topic","topicType":"msg","x":450,"y":540,"wires":[[]]},{"id":"288dd43e.42a7bc","type":"ui_text","z":"c93ec0f3.64b248","g":"76f83664.100318","group":"39b61d6e.99b392","order":2,"width":"5","height":"1","name":"","label":"","format":"{{msg.payload.stateDescription}}","layout":"row-left","x":450,"y":460,"wires":[]},{"id":"dc6cdece.a97b7","type":"ui_template","z":"c93ec0f3.64b248","g":"76f83664.100318","group":"39b61d6e.99b392","name":"Led & card bgr","order":1,"width":"1","height":"1","format":"<div id=\"{{'my_'+$id}}\" style=\"color:{{msg.payload.stateColor}}; margin:auto;\"><i class=\"fa fa-circle\"></i></div>\n\n<script>\n\n(function(scope) {\n let colors = [\"#00800030\",\"#ffa50030\",\"#ff000030\"]\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n var c = colors[msg.payload.code]\n $(\"#my_\"+scope.$id).closest(\".nr-dashboard-cardpanel\").css(\"background-color\",c);\n }\n });\n})(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":480,"y":420,"wires":[[]]},{"id":"ba07289e.12a928","type":"function","z":"c93ec0f3.64b248","g":"76f83664.100318","name":"State","func":"var state = {\n code:0,\n stateColor: \"green\",\n stateDescription:\"All fine\"\n}\nif(msg.payload == 1){\n state.code = 1\n state.stateColor = \"orange\"\n state.stateDescription = \"Mainteanance needed!\"\n}\nif(msg.payload == 2){\n state.code = 2\n state.stateColor = \"red\"\n state.stateDescription = \"Something is broken\"\n}\nmsg.payload = state\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":310,"y":440,"wires":[["dc6cdece.a97b7","288dd43e.42a7bc"]]},{"id":"4f115e53.a624d","type":"inject","z":"c93ec0f3.64b248","g":"76f83664.100318","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":150,"y":400,"wires":[["ba07289e.12a928"]]},{"id":"5d14f150.a8e51","type":"inject","z":"c93ec0f3.64b248","g":"76f83664.100318","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":150,"y":440,"wires":[["ba07289e.12a928"]]},{"id":"eef95bfa.0b0278","type":"inject","z":"c93ec0f3.64b248","g":"76f83664.100318","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"2","payloadType":"num","x":150,"y":480,"wires":[["ba07289e.12a928"]]},{"id":"621f3245.59d80c","type":"ui_group","name":"State 1","tab":"39f46c04.da4d54","order":1,"disp":true,"width":"6","collapse":false},{"id":"59d39777.641208","type":"ui_group","name":"State 2","tab":"39f46c04.da4d54","order":2,"disp":true,"width":"6","collapse":false},{"id":"39b61d6e.99b392","type":"ui_group","name":"State 3","tab":"39f46c04.da4d54","order":3,"disp":true,"width":"6","collapse":false},{"id":"39f46c04.da4d54","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
Hi @hotNipi
Yes I have it working the same as this but I want the button's background to change colour too. I have split it the same as you have but button one and two should change when the var is 1 or 2. I am uncertain how to get the buttons to change background colour. when var is 1 it should be a deeper amber colour and when Var is 2 it should be a deeper red than the ui card. I have thought of having an additional if statement that changes the button colour seperately but dont know how to address the button colour?
I already showed you, just send the button a msg.background (however you want to do that) with the colour as the value.
In hotNipi's example I added this line into the function node and strung lines to the buttons, and added {{msg.background}} into the button settings for background colour
And of no bearing on the subject, I added in a randomizer for the buttons and turned it into a fidget game... CHECK may or may not fix or make worse, but FIX always fixes
I Wouldnt have managed without you two see my solution in the end.
[{"id":"a945bb2b.c285e8","type":"tab","label":"Alarm Area 1","disabled":false,"info":""},{"id":"d98403e3.50a96","type":"ui_button","z":"a945bb2b.c285e8","name":"Acknowledge","group":"f939857c.dafb1","order":4,"width":3,"height":1,"passthru":false,"label":"Acknowledge","tooltip":"Caution :Clicking Will Acknowlwedge Alarms","color":"{{msg.text}}","bgcolor":"{{msg.background}}","icon":"","payload":"true","payloadType":"bool","topic":"","x":620,"y":220,"wires":[["ff144e27.94dd98"]]},{"id":"ff144e27.94dd98","type":"trigger","z":"a945bb2b.c285e8","name":"","op1":"1","op2":"0","op1type":"num","op2type":"num","duration":"1","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":820,"y":220,"wires":[["9434025.ae8ac"],["33b6bf82.227548"]]},{"id":"33b6bf82.227548","type":"trigger","z":"a945bb2b.c285e8","name":"","op1":"0","op2":"","op1type":"num","op2type":"nul","duration":"2","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":1080,"y":240,"wires":[["c643bb7f.bebcd8"]]},{"id":"e4ede60.31c0d18","type":"ui_button","z":"a945bb2b.c285e8","name":"Reset","group":"f939857c.dafb1","order":5,"width":3,"height":1,"passthru":false,"label":"Reset","tooltip":"Caution :Clicking Will Attempt To Reset All Alarms","color":"{{msg.text}}","bgcolor":"{{msg.background}}","icon":"","payload":"true","payloadType":"bool","topic":"","x":590,"y":140,"wires":[["38961cfb.f806ac"]],"info":"<style>\nmd-button {\n background-image: linear-gradient(to right, rgba(255,0,0,1),rgba(255,0,0,0),\n}\n</style>"},{"id":"38961cfb.f806ac","type":"trigger","z":"a945bb2b.c285e8","name":"","op1":"1","op2":"0","op1type":"num","op2type":"num","duration":"2","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":820,"y":140,"wires":[["16897b7e.09fad5"],["d794e355.5080f"]]},{"id":"d794e355.5080f","type":"trigger","z":"a945bb2b.c285e8","name":"","op1":"0","op2":"","op1type":"num","op2type":"nul","duration":"3","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":1080,"y":160,"wires":[["5432c057.6df59"]]},{"id":"da105059.55fab8","type":"function","z":"a945bb2b.c285e8","name":"","func":"//var modbusCode = msg.payload[0];\n//var lastCode = flow.get('lastModbusCode') || 0;\n//\n//if (lastCode == modbusCode) {\n// return null;\n//}\n\n//flow.set('lastModbusCode', modbusCode);\n\n//if (modbusCode === 0) {\n // return null;\n//}\n\n//const mapCodeDescription = {\n// 1: \"Plantroom 1 Fault\",\n//};\nif (msg.payload==1){\nmsg.topic = \"Plantroom 1 New Alarm \"\nmsg.payload = \"<p>Dear Portal User,</p>\" +\n\"<p>Please note that you have a fault at: Boyd Wilson Electrical Renwick Plant - Plantroom 1.</p>\" +\n\"<p>Visit <a href=\\\"https://bwel-portal.co.nz/login\\\">bwel-portal.co.nz/</a> to clear the fault if possible.</p>\" +\n\"<p></p>\" +\n\"<p></p>\" +\n\"<p><p/>\" +\n\"Portal Admin</p>\" +\n\"<p>Boyd Wilson Electrical Ltd<br />\" +\n\"PO Box 110, Renwick 7243<br />\" +\n\"11a Uxbridge Street, Renwick 7204<br />\" +\n\"Marlborough</p>\" +\n\"<p></p>\" +\n\"+P: 03 572 7448</p>\" +\n\"<p></p>\" +\n\"<img src=\\\"https://fakeimg.pl/300x70/?text=Boyd%20Wilson&font=lobster\\\">\";\n\nreturn msg;\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","x":660,"y":500,"wires":[["2dd2623c.db4786"]]},{"id":"2dd2623c.db4786","type":"debug","z":"a945bb2b.c285e8","name":"","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":840,"y":500,"wires":[]},{"id":"e6992b02.6b7828","type":"trigger","z":"a945bb2b.c285e8","name":"","op1":"1","op2":"","op1type":"str","op2type":"nul","duration":"500","extend":false,"units":"ms","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":500,"y":500,"wires":[["da105059.55fab8"]]},{"id":"8a9d3537.bd2a68","type":"function","z":"a945bb2b.c285e8","name":"","func":"if (msg.payload ==false ){\nreturn null;\n}\nif (msg.payload ==true ){\nreturn {payload : \"1\"};\n}\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":320,"y":500,"wires":[["e6992b02.6b7828"]]},{"id":"67340e27.bd1b68","type":"pccc in","z":"a945bb2b.c285e8","endpoint":"ba0b9c2b.a3c1","mode":"single","variable":"Alarm Status","diff":true,"name":"","x":130,"y":420,"wires":[["38f753c4.dcf3cc"]]},{"id":"d3aa7eac.f4ab48","type":"pccc in","z":"a945bb2b.c285e8","endpoint":"ba0b9c2b.a3c1","mode":"single","variable":"New Alarm","diff":true,"name":"","x":140,"y":500,"wires":[["8a9d3537.bd2a68"]]},{"id":"9434025.ae8ac","type":"pccc out","z":"a945bb2b.c285e8","endpoint":"ba0b9c2b.a3c1","variable":"","name":"","x":1120,"y":200,"wires":[]},{"id":"c643bb7f.bebcd8","type":"pccc out","z":"a945bb2b.c285e8","endpoint":"ba0b9c2b.a3c1","variable":"","name":"","x":1320,"y":240,"wires":[]},{"id":"16897b7e.09fad5","type":"pccc out","z":"a945bb2b.c285e8","endpoint":"ba0b9c2b.a3c1","variable":"","name":"","x":1120,"y":120,"wires":[]},{"id":"5432c057.6df59","type":"pccc out","z":"a945bb2b.c285e8","endpoint":"ba0b9c2b.a3c1","variable":"","name":"","x":1300,"y":160,"wires":[]},{"id":"38f753c4.dcf3cc","type":"function","z":"a945bb2b.c285e8","name":"","func":"if (msg.payload ==0 ){\nreturn {payload : \"No Fault\"}; \n}\nif (msg.payload ==1 ){\nreturn {payload : \"Fault Acknowledged\"};\n}\nif (msg.payload ==2 ){\nreturn {payload : \"Fault Active\"};\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":300,"y":180,"wires":[["c7d4a2e2.7894"]]},{"id":"c7d4a2e2.7894","type":"ui_text","z":"a945bb2b.c285e8","group":"f939857c.dafb1","order":1,"width":4,"height":1,"name":"","label":"","format":"{{msg.payload}}","layout":"row-left","x":490,"y":420,"wires":[]},{"id":"1f5bf84a.1a2278","type":"ui_template","z":"a945bb2b.c285e8","group":"f939857c.dafb1","name":"","order":2,"width":1,"height":1,"format":"<head>\n<Style>\n\n:root{\n --base-color:#d3d3d3;\n --shadow-dark:0, 0, 0;\n --shadow-light:255, 255, 255;\n --widgetColor:#cccccc;\n --widgetColorAccent:#b6b6b6;\n --accentColor:#6a87a3;\n \n \n --h1:10px;\n --v1:10px;\n --h2:-8px;\n --v2:-8px;\n --blur1:16px;\n --blur2:12px;\n\n --shadowColor: var(--h1) var(--v1) var(--blur1) 0 rgba(var(--shadow-dark), 0.3),\n var(--h2) var(--v2) var(--blur2) 0 rgba(var(--shadow-light), 0.25);\n\n --text-color:#000000;\n --nr-dashboard-widgetTextColor:#000000;\n}\n\nbody.md-default-theme, body, html.md-default-theme, html {\n color: var(--text-color);\n border:3px solid #a6a6a6;\n font-size: 18px;\n\n}\n.masonry-container {\n position: relative;\n width: 100%;\n margin: 0 auto;\n min-height:unset !important;\n}\nbody.nr-dashboard-theme {\n background:var(--base-color)\n}\nbody.nr-dashboard-theme md-toolbar {\n background:var(--base-color);\n color: var(--text-color);\n}\nbody.nr-dashboard-theme md-sidenav {\n color: var(--text-color);\n background:var(--base-color)\n}\nbody.nr-dashboard-theme md-sidenav div.md-list-item-inner {\n color: var(--text-color);\n background-color: transparent;\n}\n.nr-dashboard-theme ui-card-panel {\n background:linear-gradient(-45deg, rgba(var(--shadow-dark),0.2), rgba(var(--shadow-light),0.3));\n border-radius: 1em;\n box-shadow: var(--shadowColor);\n border:none;\n\n}\nbody.nr-dashboard-theme md-content md-card {\n background:transparent;\n color: var(--text-color);\n}\n.nr-dashboard-theme .nr-dashboard-template {\n background:transparent;\n}\n.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n color:var(--text-color);\n \n}\n\n.md-button{\n border-radius:0.6em;\n color: var(--text-color);\n \n}\n.nr-dashboard-theme .nr-dashboard-button .md-button {\n background-color: var(--widgetColor);\n box-shadow: var(--shadowColor);\n color: #000000;\n border: 1.5px solid #b3b3b3;\n \n \n}\n.md-button.md-raised:not([disabled]) {\n box-shadow: 2px 4px 7px 0 rgb(0 0 0 / 26%);\n}\n.md-button:not([disabled]).md-fab:active, .md-button:not([disabled]).md-raised:active {\n box-shadow: 1px 1px 2px 0 rgb(0 0 0 / 30%);\n}\n.nr-dashboard-theme .nr-dashboard-button .md-button:hover {\n background-color: var(--widgetColor);\n}\n.nr-dashboard-theme .nr-dashboard-button .md-button:focus {\n background-color: var(--widgetColor);\n}\nmd-list-item.md-no-proxy.md-button, md-list-item .md-no-style.md-button {\n box-shadow: 2px 4px 7px 0 rgb(0 0 0 / 26%);\n}\n.nr-dashboard-theme .nr-dashboard-numeric .value {\n background:unset;\n color:var(--text-color);\n}\n.nr-dashboard-theme .nr-dashboard-form {\n color:var(--text-color);\n}\n.nr-dashboard-theme .nr-dashboard-form-button {\n background-color: var(--widgetColor);\n color:var(--text-color);\n}\n\n.nr-dashboard-theme .nr-dashboard-form-button:hover {\n background-color: var(--widgetColor) !important;\n}\n.nr-dashboard-theme .nr-dashboard-form-button:focus {\n background-color: var(--widgetColor) !important;\n}\n.nr-dashboard-theme md-input-container.md-default-theme .md-input, md-input-container .md-input {\n color:var(--text-color);\n border-color: var(--widgetColor) !important;\n}\n.nr-dashboard-theme .nr-dashboard-switch md-switch .md-thumb {\n background-color: var(--widgetColor);\n\n}\n.nr-dashboard-theme .nr-dashboard-switch md-switch .md-bar {\n background-color: rgb(var(--widgetColor));\n box-shadow: inset var(--shadowColor);\n}\n.nr-dashboard-theme .nr-dashboard-switch md-switch.md-checked .md-bar {\n background-color: var(--widgetColorAccent);\n box-shadow: 0 0 10px 0px var(--widgetColor);\n}\n.nr-dashboard-theme .nr-dashboard-switch md-switch.md-checked .md-thumb {\n background-color: var(--accentColor);\n box-shadow: 0 0 10px 0px rgba(var(--shadow-dark),25%);\n}\n.nr-dashboard-theme .nr-dashboard-slider .md-track {\n background-color: var(--accentColor);\n}\nmd-slider .md-thumb {\n box-shadow: var(--shadowColor)\n}\n\n.nr-dashboard-theme .nr-dashboard-slider .md-thumb:after {\n background-color: var(--accentColor);\n border-color: var(--accentColor);\n}\n\n.nr-dashboard-theme md-select-menu, .nr-dashboard-theme md-select-menu md-option {\n background-color: rgb(255 255 255 / 20%);\n color:var(--text-color);\n border-radius:0.8em;\n}\n\n.nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value, .nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value.md-select-placeholder {\n margin-top: -3px;\n border-color: #eeeeee7a;\n \n}\n.nr-dashboard-theme .md-select-menu-container {\n max-height: 85%;\n overflow-y: auto;\n border: none;\n border-radius: 0.8em;\n}\n\n.nr-dashboard-theme md-select-menu md-option {\n background-color: var(--widgetColor);\n \n height: 29px;\n border-radius: 0.6em;\n margin-left: 10px;\n margin-right: 10px;\n margin-top: 2px;\n box-shadow: 0 0 6px 6px #24202133;\n transition: 0.3s;\n}\n.nr-dashboard-theme md-select-menu md-option[selected] {\n color: var(--base-color) !important;\n background-color: var(--accentColor) !important;\n}\n.nr-dashboard-theme md-select-menu md-option:nth-child(even) {\n background-color: var(--widgetColorAccent);\n}\n.nr-dashboard-theme md-select-menu md-option:last-child {\n margin-bottom: 8px;\n}\n.nr-dashboard-theme md-select-menu md-option:hover {\n background-color: var(--widgetColorAccent) !important;\n padding-left: 26px;\n}\n.nr-dashboard-theme md-select-menu md-option > .md-ripple-container{\n border-radius: 14px;\n}\n.nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value, .nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value.md-select-placeholder {\n color: var(--text-color);\n border-color: var(--text-color);\n border-bottom-width: 1px;\n padding: 0px 2px;\n}\n\n\n \n</style>\n </head>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":260,"y":580,"wires":[[]]},{"id":"7ad4ff57.8c41","type":"inject","z":"a945bb2b.c285e8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":110,"y":60,"wires":[["663b62c6.991e2c","c24fd0ac.a24e48","38f753c4.dcf3cc"]]},{"id":"9b8115d2.9dd508","type":"inject","z":"a945bb2b.c285e8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":110,"y":100,"wires":[["663b62c6.991e2c","c24fd0ac.a24e48","38f753c4.dcf3cc"]]},{"id":"4c682394.7ee1a4","type":"inject","z":"a945bb2b.c285e8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"2","payloadType":"num","x":110,"y":140,"wires":[["663b62c6.991e2c","c24fd0ac.a24e48","38f753c4.dcf3cc"]]},{"id":"663b62c6.991e2c","type":"function","z":"a945bb2b.c285e8","name":"","func":"if (msg.payload ==0 ){\nreturn {payload : \"#d3d3d3d3\"}\n {background : \"#cccccc\"};\n}\nif (msg.payload ==1 ){\nreturn {payload : \"#ff7f00\"}\n {background : \"#ff9933\"};\n}\nif (msg.payload ==2 ){\nreturn {payload : \"#ff0000\"};\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":300,"y":100,"wires":[["41a0fc12.36bce4"]]},{"id":"41a0fc12.36bce4","type":"ui_template","z":"a945bb2b.c285e8","group":"f939857c.dafb1","name":"","order":3,"width":1,"height":1,"format":"<style>\n#Kono_Seafoods_Site_Alarm_Overview_Alarm_Area_1 {\nbackground-color: {{msg.payload}} !important;\n}\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":480,"y":80,"wires":[[]]},{"id":"c24fd0ac.a24e48","type":"function","z":"a945bb2b.c285e8","name":"","func":"var state = {\n code:0,\n stateColor: \"#cccccc\",\n textColor:\"#000000\"\n}\nif(msg.payload == 1){\n state.code = 1\n state.stateColor = \"#ff9933\"\n state.textColor = \"#000000\"\n}\nif(msg.payload == 2){\n state.code = 2\n state.stateColor = \"#ff3333\"\n state.textColor = \"#ffffff\"\n}\nmsg.payload = state\nmsg.background = state.stateColor\nmsg.text = state.textColor\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":300,"y":140,"wires":[["e4ede60.31c0d18","d98403e3.50a96"]]},{"id":"704118ab.a99698","type":"tab","label":"Alarm Area 2","disabled":false,"info":""},{"id":"99fd9886.e85c68","type":"ui_button","z":"704118ab.a99698","name":"Acknowledge Alarm","group":"6fd69085.28bef8","order":3,"width":3,"height":1,"passthru":false,"label":"Acknowledge","tooltip":"Caution :Clicking Will Acknowlwedge Alarms","color":"{{msg.text}}","bgcolor":"{{msg.background}}","icon":"","payload":"true","payloadType":"bool","topic":"","x":770,"y":80,"wires":[["aad1fafd.4120e8"]]},{"id":"aad1fafd.4120e8","type":"trigger","z":"704118ab.a99698","name":"","op1":"1","op2":"0","op1type":"num","op2type":"num","duration":"1","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":960,"y":80,"wires":[["cb124bd2.55d3e8"],["c58f18cb.84ca38"]]},{"id":"c58f18cb.84ca38","type":"trigger","z":"704118ab.a99698","name":"","op1":"0","op2":"","op1type":"num","op2type":"nul","duration":"2","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":980,"y":160,"wires":[["54fb1726.96cda"]]},{"id":"97f30b22.41f4a","type":"ui_button","z":"704118ab.a99698","name":"Reset","group":"6fd69085.28bef8","order":4,"width":3,"height":1,"passthru":false,"label":"Reset","tooltip":"Caution :Clicking Will Attempt To Reset All Alarms","color":"{{msg.text}}","bgcolor":"{{msg.background}}","icon":"","payload":"true","payloadType":"bool","topic":"","x":750,"y":220,"wires":[["593508c7.a4613"]],"info":"<style>\nmd-button {\n background-image: linear-gradient(to right, rgba(255,0,0,1),rgba(255,0,0,0),\n}\n</style>"},{"id":"593508c7.a4613","type":"trigger","z":"704118ab.a99698","name":"","op1":"1","op2":"0","op1type":"num","op2type":"num","duration":"2","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":960,"y":220,"wires":[["a697bf82.b0acf"],["d7588702.c15ac8"]]},{"id":"d7588702.c15ac8","type":"trigger","z":"704118ab.a99698","name":"","op1":"0","op2":"","op1type":"num","op2type":"nul","duration":"3","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":980,"y":280,"wires":[["868dd652.d83a58"]]},{"id":"c84f9c6a.2c2eb","type":"function","z":"704118ab.a99698","name":"","func":"//var modbusCode = msg.payload[0];\n//var lastCode = flow.get('lastModbusCode') || 0;\n//\n//if (lastCode == modbusCode) {\n// return null;\n//}\n\n//flow.set('lastModbusCode', modbusCode);\n\n//if (modbusCode === 0) {\n // return null;\n//}\n\n//const mapCodeDescription = {\n// 1: \"Plantroom 1 Fault\",\n//};\nif (msg.payload==1){\nmsg.topic = \"Plantroom 1 New Alarm \"\nmsg.payload = \"<p>Dear Portal User,</p>\" +\n\"<p>Please note that you have a fault at: Boyd Wilson Electrical Renwick Plant - Plantroom 1.</p>\" +\n\"<p>Visit <a href=\\\"https://bwel-portal.co.nz/login\\\">bwel-portal.co.nz/</a> to clear the fault if possible.</p>\" +\n\"<p></p>\" +\n\"<p></p>\" +\n\"<p><p/>\" +\n\"Portal Admin</p>\" +\n\"<p>Boyd Wilson Electrical Ltd<br />\" +\n\"PO Box 110, Renwick 7243<br />\" +\n\"11a Uxbridge Street, Renwick 7204<br />\" +\n\"Marlborough</p>\" +\n\"<p></p>\" +\n\"+P: 03 572 7448</p>\" +\n\"<p></p>\" +\n\"<img src=\\\"https://fakeimg.pl/300x70/?text=Boyd%20Wilson&font=lobster\\\">\";\n\nreturn msg;\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","x":660,"y":500,"wires":[["72117d4d.0547f4","56d03800.83975"]]},{"id":"72117d4d.0547f4","type":"e-mail","z":"704118ab.a99698","server":"mail.1stdomainz.co.nz","port":"25","secure":false,"tls":false,"name":"","dname":"","x":840,"y":500,"wires":[]},{"id":"56d03800.83975","type":"debug","z":"704118ab.a99698","name":"","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":860,"y":460,"wires":[]},{"id":"87c59b59.6d9158","type":"trigger","z":"704118ab.a99698","name":"","op1":"1","op2":"","op1type":"str","op2type":"nul","duration":"500","extend":false,"units":"ms","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":480,"y":500,"wires":[["c84f9c6a.2c2eb"]]},{"id":"34a66bd3.dab4cc","type":"function","z":"704118ab.a99698","name":"","func":"if (msg.payload ==false ){\nreturn null;\n}\nif (msg.payload ==true ){\nreturn {payload : \"1\"};\n}\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":300,"y":500,"wires":[["87c59b59.6d9158"]]},{"id":"c9447fc4.4c3ab","type":"pccc in","z":"704118ab.a99698","endpoint":"ba0b9c2b.a3c1","mode":"single","variable":"Alarm Status","diff":true,"name":"","x":130,"y":400,"wires":[["88025018.1b0488"]]},{"id":"b0efc1f3.681918","type":"pccc in","z":"704118ab.a99698","endpoint":"ba0b9c2b.a3c1","mode":"single","variable":"New Alarm","diff":true,"name":"","x":120,"y":500,"wires":[["34a66bd3.dab4cc"]]},{"id":"cb124bd2.55d3e8","type":"pccc out","z":"704118ab.a99698","endpoint":"ba0b9c2b.a3c1","variable":"Acknowledge Alarm","name":"","x":1170,"y":80,"wires":[]},{"id":"54fb1726.96cda","type":"pccc out","z":"704118ab.a99698","endpoint":"ba0b9c2b.a3c1","variable":"Acknowledge Alarm","name":"","x":1170,"y":160,"wires":[]},{"id":"a697bf82.b0acf","type":"pccc out","z":"704118ab.a99698","endpoint":"ba0b9c2b.a3c1","variable":"Reset","name":"","x":1130,"y":220,"wires":[]},{"id":"868dd652.d83a58","type":"pccc out","z":"704118ab.a99698","endpoint":"ba0b9c2b.a3c1","variable":"Reset","name":"","x":1130,"y":280,"wires":[]},{"id":"e71576ec.c3dc18","type":"ui_text","z":"704118ab.a99698","group":"6fd69085.28bef8","order":1,"width":5,"height":1,"name":"","label":"","format":"{{msg.payload}}","layout":"row-left","x":550,"y":440,"wires":[]},{"id":"88025018.1b0488","type":"function","z":"704118ab.a99698","name":"","func":"if (msg.payload ==0 ){\nreturn {payload : \"No Fault\"};\n}\nif (msg.payload ==1 ){\nreturn {payload : \"Fault Acknowledged\"};\n}\nif (msg.payload ==2 ){\nreturn {payload : \"Fault Active\"};\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":380,"y":440,"wires":[["e71576ec.c3dc18"]]},{"id":"ad07701a.bda34","type":"inject","z":"704118ab.a99698","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":150,"y":100,"wires":[["59e220fb.60fc","7ed37842.92a4d8","88025018.1b0488"]]},{"id":"b082f62a.8f034","type":"inject","z":"704118ab.a99698","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":150,"y":140,"wires":[["59e220fb.60fc","7ed37842.92a4d8","88025018.1b0488"]]},{"id":"1380b53e.303653","type":"inject","z":"704118ab.a99698","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"2","payloadType":"num","x":150,"y":180,"wires":[["59e220fb.60fc","7ed37842.92a4d8","88025018.1b0488"]]},{"id":"59e220fb.60fc","type":"function","z":"704118ab.a99698","name":"","func":"if (msg.payload ==0 ){\nreturn {payload : \"#d3d3d3d3\"}\n {background : \"#cccccc\"};\n}\nif (msg.payload ==1 ){\nreturn {payload : \"#ff7f00\"}\n {background : \"#ff9933\"};\n}\nif (msg.payload ==2 ){\nreturn {payload : \"#ff0000\"};\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":340,"y":140,"wires":[["64a1ac24.081c1c"]]},{"id":"64a1ac24.081c1c","type":"ui_template","z":"704118ab.a99698","group":"6fd69085.28bef8","name":"","order":2,"width":1,"height":1,"format":"<style>\n#Kono_Seafoods_Site_Alarm_Overview_Alarm_Area_2 {\nbackground-color: {{msg.payload}} !important;\n}\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":500,"y":60,"wires":[[]]},{"id":"7ed37842.92a4d8","type":"function","z":"704118ab.a99698","name":"","func":"var state = {\n code:0,\n stateColor: \"#cccccc\",\n textColor:\"#000000\"\n}\nif(msg.payload == 1){\n state.code = 1\n state.stateColor = \"#ff9933\"\n state.textColor = \"#000000\"\n}\nif(msg.payload == 2){\n state.code = 2\n state.stateColor = \"#ff3333\"\n state.textColor = \"#ffffff\"\n}\nmsg.payload = state\nmsg.background = state.stateColor\nmsg.text = state.textColor\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":340,"y":180,"wires":[["97f30b22.41f4a","99fd9886.e85c68"]]},{"id":"f939857c.dafb1","type":"ui_group","z":"","name":"Alarm Area 1","tab":"862fc89c.1e2e58","order":1,"disp":true,"width":6,"collapse":false},{"id":"ba0b9c2b.a3c1","type":"pccc endpoint","z":"","address":"192.168.1.151","port":"44818","userouting":false,"routing":"0x01,0x00,0x01,0x00","cycletime":"500","timeout":"1500","name":"","vartable":[{"addr":"N99:0/0","name":"New Alarm"},{"addr":"N99:0/1","name":"Alarm Active"},{"addr":"N99:1/0","name":"Sewer Exit Sump Pump1 FTR"},{"addr":"N99:1/1","name":"Sewer Exit Sump Pump2 FTR"},{"addr":"N99:1/2","name":"Sewer Tanks Pump1 FTR"},{"addr":"N99:1/3","name":"Sewer Tanks Pump2 FTR"},{"addr":"N99:1/4","name":"Wastewater Sump Pump1 FTR"},{"addr":"N99:1/5","name":"Wastewater Sump Pump2 FTR"},{"addr":"N99:1/6","name":"Wastewater Sump Mixer FTR"},{"addr":"N99:19/0","name":"Crevis Comms Fault"},{"addr":"N99:19/1","name":"Sewer Exit Sump Levels Fault"},{"addr":"N99:19/2","name":"Sewer Tanks Levels Fault"},{"addr":"N99:19/3","name":"Sewer Exit Sump Low Level"},{"addr":"N99:19/4","name":"Sewer Exit Sump High Level"},{"addr":"N99:19/5","name":"Sewer Tanks Low Level"},{"addr":"N99:19/6","name":"Sewer Tanks High Level"},{"addr":"N9:41","name":"Alarm Status"},{"addr":"N10:0/0","name":"Reset"},{"addr":"N199:46/0","name":"Acknowledge Alarm"}]},{"id":"6fd69085.28bef8","type":"ui_group","z":"","name":"Alarm Area 2","tab":"862fc89c.1e2e58","order":2,"disp":true,"width":6,"collapse":false},{"id":"862fc89c.1e2e58","type":"ui_tab","z":"","name":"Kono Seafoods Site Alarm Overview","icon":"dashboard","disabled":false,"hidden":false}]
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy