Css style sheet across multiple tabs

Searching through forum trying to learn CSS sheets. Found an example from @Steve-Mcl that was excellent and I think I learned quite a bit but.....
I can get the styles to carry over across multiple tabs but I cannot get the button pushes to work across the tabs.

[{"id":"2cd4854b.62f9c2","type":"tab","label":"Relays","disabled":false,"info":""},{"id":"6f5fd6af.84e7b","type":"rpi-gpio out","z":"2cd4854b.62f9c2","name":"2","pin":"21","set":true,"level":"1","freq":"","out":"out","x":870,"y":400,"wires":[]},{"id":"9e68b6b1.05229","type":"rpi-gpio out","z":"2cd4854b.62f9c2","name":"3","pin":"23","set":true,"level":"1","freq":"","out":"out","x":870,"y":460,"wires":[]},{"id":"d9922a41.8cf6e","type":"rpi-gpio out","z":"2cd4854b.62f9c2","name":"4","pin":"29","set":true,"level":"1","freq":"","out":"out","x":870,"y":520,"wires":[]},{"id":"79862602.87e538","type":"rpi-gpio out","z":"2cd4854b.62f9c2","name":"5","pin":"31","set":true,"level":"1","freq":"","out":"out","x":870,"y":580,"wires":[]},{"id":"b233f2b5.51d888","type":"rpi-gpio out","z":"2cd4854b.62f9c2","name":"6","pin":"33","set":true,"level":"1","freq":"","out":"out","x":870,"y":640,"wires":[]},{"id":"3aa5842b.3a2a74","type":"rpi-gpio out","z":"2cd4854b.62f9c2","name":"7","pin":"35","set":true,"level":"1","freq":"","out":"out","x":870,"y":700,"wires":[]},{"id":"2f65c7ea.37787","type":"rpi-gpio out","z":"2cd4854b.62f9c2","name":"1","pin":"19","set":true,"level":"1","freq":"","out":"out","x":870,"y":340,"wires":[]},{"id":"8009c551.b16728","type":"rpi-gpio out","z":"2cd4854b.62f9c2","name":"8","pin":"37","set":true,"level":"1","freq":"","out":"out","x":870,"y":760,"wires":[]},{"id":"90ac3607.3e9478","type":"function","z":"2cd4854b.62f9c2","name":"toggle relays","func":"let z = msg.payload;\n\nswitch (z) {\n  case 1:\n    msg1 = {payload: 0};\n    msg2 = {payload: 1};\n    msg3 = {payload: 1};\n    msg4 = {payload: 1};\n    msg5 = {payload: 1};\n    msg6 = {payload: 1};\n    msg7 = {payload: 1};\n    msg8 = {payload: 1};\n    break;\n  case 2:\n    msg1 = {payload: 1};\n    msg2 = {payload: 0};\n    msg3 = {payload: 1};\n    msg4 = {payload: 1};\n    msg5 = {payload: 1};\n    msg6 = {payload: 1};\n    msg7 = {payload: 1};\n    msg8 = {payload: 1};\n    break;\n  case 3:\n    msg1 = {payload: 1};\n    msg2 = {payload: 1};\n    msg3 = {payload: 0};\n    msg4 = {payload: 1};\n    msg5 = {payload: 1};\n    msg6 = {payload: 1};\n    msg7 = {payload: 1};\n    msg8 = {payload: 1};\n    break;\n  case 4:\n    msg1 = {payload: 1};\n    msg2 = {payload: 1};\n    msg3 = {payload: 1};\n    msg4 = {payload: 0};\n    msg5 = {payload: 1};\n    msg6 = {payload: 1};\n    msg7 = {payload: 1};\n    msg8 = {payload: 1};\n    break;\n  case 5:\n    msg1 = {payload: 1};\n    msg2 = {payload: 1};\n    msg3 = {payload: 1};\n    msg4 = {payload: 1};\n    msg5 = {payload: 0};\n    msg6 = {payload: 1};\n    msg7 = {payload: 1};\n    msg8 = {payload: 1};\n    break;\n  case 6:\n    msg1 = {payload: 1};\n    msg2 = {payload: 1};\n    msg3 = {payload: 1};\n    msg4 = {payload: 1};\n    msg5 = {payload: 1};\n    msg6 = {payload: 0};\n    msg7 = {payload: 1};\n    msg8 = {payload: 1};\n    break;\n  case 7:\n    msg1 = {payload: 1};\n    msg2 = {payload: 1};\n    msg3 = {payload: 1};\n    msg4 = {payload: 1};\n    msg5 = {payload: 1};\n    msg6 = {payload: 1};\n    msg7 = {payload: 0};\n    msg8 = {payload: 1};\n    break;\n  case 8:\n    msg1 = {payload: 1};\n    msg2 = {payload: 1};\n    msg3 = {payload: 1};\n    msg4 = {payload: 1};\n    msg5 = {payload: 1};\n    msg6 = {payload: 1};\n    msg7 = {payload: 1};\n    msg8 = {payload: 0};\n}\n\nreturn [msg1,msg2,msg3,msg4,msg5,msg6,msg7,msg8];","outputs":8,"noerr":0,"x":550,"y":240,"wires":[["2f65c7ea.37787"],["6f5fd6af.84e7b"],["9e68b6b1.05229"],["d9922a41.8cf6e"],["79862602.87e538"],["b233f2b5.51d888"],["3aa5842b.3a2a74"],["8009c551.b16728"]]},{"id":"41578335.0e55bc","type":"function","z":"2cd4854b.62f9c2","name":"count up / dn","func":"var dir = context.get(\"dir\") || 0;\nvar count = context.get(\"counter\") || 0;\nif(dir === 0){\n    count = (count+1);\n    context.set(\"counter\", count);\n    if(count > 7){\n    context.set(\"dir\", 1);\n    dir = 1;\n    } \n    msg.payload = count;\n    node.status({fill:\"blue\",shape:\"dot\",text: msg.payload});\n    return msg;\n}\nif(dir === 1){\n    count = (count-1);\n    context.set(\"counter\", count);\n    if(count === 1){\n    context.set(\"dir\", 0);\n    dir = 0;\n    }     \n    msg.payload = count;\n    node.status({fill:\"blue\",shape:\"dot\",text: msg.payload});\n    return msg;\n}","outputs":1,"noerr":0,"x":350,"y":240,"wires":[[]]},{"id":"1b5d777a.1d06c9","type":"inject","z":"2cd4854b.62f9c2","name":"2 seconds","topic":"","payload":"1","payloadType":"num","repeat":"2","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":240,"wires":[["41578335.0e55bc"]]},{"id":"b4d8996b.39ef3","type":"function","z":"2cd4854b.62f9c2","name":"Relay logic","func":"\nvar i;\n\nMyMsg = new Array(8);\n\nfor (i = 1; i < 9; i++) {\n  if (msg.topic == i){\n        MyMsg[i] = {\n            payload: msg.payload, \n        }\n    } \n}\n\nreturn [MyMsg[1],MyMsg[2],MyMsg[3],MyMsg[4],MyMsg[5],MyMsg[6],MyMsg[7],MyMsg[8]];","outputs":8,"noerr":0,"x":550,"y":520,"wires":[["2f65c7ea.37787"],["6f5fd6af.84e7b"],["9e68b6b1.05229"],["d9922a41.8cf6e"],["79862602.87e538"],["b233f2b5.51d888"],["3aa5842b.3a2a74"],["8009c551.b16728"]]},{"id":"f97943e4.0012c8","type":"comment","z":"2cd4854b.62f9c2","name":"","info":"<style>\n    \n .myButtonAB {\n\tbox-shadow: ;\n\tbackground:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);\n\tbackground-color:#ededed;\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","x":260,"y":140,"wires":[]},{"id":"11e1db24.df9d4d","type":"ui_template","z":"2cd4854b.62f9c2","group":"3c514747.a2de9","name":"CSS only ","order":2,"width":0,"height":0,"format":"<style id=\"remote-buttons\">\n    :root {\n      --dashboard-unit-width: 48px;\n      --dashboard-unit-height: 40px;\n      --remote-button-background: green;\n      --remote-button-foreground: white;\n    }\n    .nr-dashboard-template {\n        padding: 0px;\n    }\n    \n    .remote-button.disabled{\n        cursor: not-allowed;\n        pointer-events: none;\n        color: #aaaaaa !important;\n    }\n    \n    .remote-button:not([disabled]):hover{\n         background-color: darkcyan !important;\n    }\n\n    /*   This is the normal button definition  */\n    .remote-button{\n        background-color: var(--remote-button-background) !important;\n        color: var(--remote-button-foreground) !important;\n        height: var(--dashboard-unit-height);\n        width: 100%;\n        border-radius: 8px;\n        font-size:8px;\n        font-weight:normal;\n        margin: 0;\n        min-height: 36px;\n        min-width: unset;\n        line-height: unset;\n        \n        box-shadow: 0px 6px 4px 0px #1c1b18;\n\t    background:#eae0c2;\n\t    /*border:6px solid #333029;*/\n\t    display:inline-block;\n\t    cursor:pointer;\n\t    font-family:Arial;\n\t    padding:4px 6px;\n\t    text-decoration:none;\n    }\n    /*  This is a sub-set which is invoked by */\n    /*  <md-button class=\"md-button remote-button bigger\"> */\n    /*  note the (space) \"bigger\" at the end.  */\n    .remote-button.bigger{\n        font-weight:bold;\n        font-size:1.5em;\n    }\n    /*  This is for buttons with a lot of text.  `font-size:0.7em` */\n    /*  makes the font 70% normal size  */\n    .remote-button.small{\n        font-size:0.7em;\n    }\n    /*  This is for buttons with just icons, to upsize the size */\n    /*  of the icon with the line: */\n    /*  <i class=\"fa fa-fw fa-plus remote-icon\"> in the other node  */\n    .remote-icon{\n        font-size:2.0em;\n    }\n    /*  This is the same as the other one, but it makes the icon smaller  */\n    .remote-iconS{\n        font-size:0.5em;\n    }\n\n    .remote-button.black{\n        background-color: var(--remote-button-background) !important;\n        color: var(--remote-button-foreground) !important;\n    }\n\n    .remote-button.red{\n        background-color: red !important;\n        color: var(--remote-button-foreground) !important;\n    }\n    .remote-button.red:not([disabled]):hover{\n         background-color: orange !important;\n    }\n\n    .remote-button.blinking{\n    \tanimation:blinkingAnim1 0.8s infinite;\n    }\n    @keyframes blinkingAnim1{\n    \t0%{\t\tbackground-color: var(--remote-button-background); color:var(--remote-button-foreground);}\n    \t50%{\tbackground-color: var(--remote-button-foreground); color:var(--remote-button-background);}\n    \t100%{\tbackground-color: var(--remote-button-background);\tcolor:var(--remote-button-foreground);}\n    }    \n     \n    .remote-button.red.blinking{\n    \tanimation:blinkingAnim2 0.8s infinite;\n    }\n    @keyframes blinkingAnim2{\n    \t0%{\t\tbackground-color: red; color:#cccccc;}\n    \t50%{\tbackground-color: #cccccc; color:red;}\n    \t100%{\tbackground-color: red;\tcolor:#cccccc;}\n    }     \n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":120,"y":340,"wires":[[]]},{"id":"137e719a.c254d6","type":"ui_template","z":"2cd4854b.62f9c2","group":"3c514747.a2de9","name":"1","order":6,"width":0,"height":0,"format":"<div>\n   <md-button class=\"md-button remote-button\" \n              data-payload=\"1\" \n              data-buttontype=\"toggle\"\n              data-topic=\"1\"\n              data-icon0=\"Relay 1 On\"\n              data-icon1=\"Relay 1 Off\"\n              aria-label=\"Relay 1\"\n              >\n      <i class=\"material-icons md-48\">Relay 1</i>\n   </md-button>\n</div>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":110,"y":380,"wires":[[]]},{"id":"a9130e77.78a168","type":"ui_template","z":"2cd4854b.62f9c2","group":"3c514747.a2de9","name":"2","order":7,"width":0,"height":0,"format":"<div>\n   <md-button class=\"md-button remote-button\" \n              data-payload=\"1\" \n              data-buttontype=\"toggle\"\n              data-topic=\"2\"\n              data-icon0=\"Relay 2 On\"\n              data-icon1=\"Relay 2 Off\"\n              aria-label=\"Relay 2\"\n              >\n      <i class=\"material-icons md-48\">Relay 2</i>\n   </md-button>\n</div>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":110,"y":420,"wires":[[]]},{"id":"892e0683.d36dc8","type":"ui_template","z":"2cd4854b.62f9c2","group":"3c514747.a2de9","name":"3","order":8,"width":0,"height":0,"format":"<div>\n   <md-button class=\"md-button remote-button\" \n              data-payload=\"1\" \n              data-buttontype=\"toggle\"\n              data-topic=\"3\"\n              data-icon0=\"Relay 3 On\"\n              data-icon1=\"Relay 3 Off\"\n              aria-label=\"Relay 3\"\n              >\n      <i class=\"material-icons md-48\">Relay 3</i>\n   </md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":110,"y":460,"wires":[[]]},{"id":"b7defb7b.d33c","type":"ui_template","z":"2cd4854b.62f9c2","group":"3c514747.a2de9","name":"4","order":9,"width":0,"height":0,"format":"<div>\n   <md-button class=\"md-button remote-button\" \n              data-payload=\"1\" \n              data-buttontype=\"toggle\"\n              data-topic=\"4\"\n              data-icon0=\"Relay 4 On\"\n              data-icon1=\"Relay 4 Off\"\n              aria-label=\"Relay 4\"\n              >\n      <i class=\"material-icons md-48\">Relay 4</i>\n   </md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":110,"y":500,"wires":[[]]},{"id":"f18c8cfd.f8eb48","type":"ui_template","z":"2cd4854b.62f9c2","group":"3c514747.a2de9","name":"5","order":10,"width":0,"height":0,"format":"<div>\n   <md-button class=\"md-button remote-button\" \n              data-payload=\"1\" \n              data-buttontype=\"toggle\"\n              data-topic=\"5\"\n              data-icon0=\"Relay 5 On\"\n              data-icon1=\"Relay 5 Off\"\n              aria-label=\"Relay 5\"\n              >\n      <i class=\"material-icons md-48\">Relay 5</i>\n   </md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":110,"y":540,"wires":[[]]},{"id":"fd28abf2.27d4e","type":"ui_template","z":"2cd4854b.62f9c2","group":"3c514747.a2de9","name":"6","order":11,"width":0,"height":0,"format":"<div>\n   <md-button class=\"md-button remote-button\" \n              data-payload=\"1\" \n              data-buttontype=\"toggle\"\n              data-topic=\"6\"\n              data-icon0=\"Relay 6 On\"\n              data-icon1=\"Relay 6 Off\"\n              aria-label=\"Relay 6\"\n              >\n      <i class=\"material-icons md-48\">Relay 6</i>\n   </md-button>\n</div>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":110,"y":580,"wires":[[]]},{"id":"88b8477e.10dd2","type":"ui_template","z":"2cd4854b.62f9c2","group":"3c514747.a2de9","name":"7","order":12,"width":0,"height":0,"format":"<div>\n   <md-button class=\"md-button remote-button\" \n              data-payload=\"1\" \n              data-buttontype=\"toggle\"\n              data-topic=\"7\"\n              data-icon0=\"Relay 7 On\"\n              data-icon1=\"Relay 7 Off\"\n              aria-label=\"Relay 7\"\n              >\n      <i class=\"material-icons md-48\">Relay 7</i>\n   </md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":110,"y":620,"wires":[[]]},{"id":"870db3b8.a774a8","type":"ui_template","z":"2cd4854b.62f9c2","group":"3c514747.a2de9","name":"8","order":13,"width":0,"height":0,"format":"<div>\n   <md-button class=\"md-button remote-button\" \n              data-payload=\"1\" \n              data-buttontype=\"toggle\"\n              data-topic=\"8\"\n              data-icon0=\"Relay 8 On\"\n              data-icon1=\"Relay 8 Off\"\n              aria-label=\"Relay 8\"\n              >\n      <i class=\"material-icons md-48\">Relay 8</i>\n   </md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":110,"y":660,"wires":[[]]},{"id":"ab2c8f92.e36a9","type":"ui_template","z":"2cd4854b.62f9c2","group":"3c514747.a2de9","name":"button script","order":1,"width":0,"height":0,"format":"<div>\n<!--diliberately emtpy - only need the script below -->\n</div>\n\n<script>\n\n(function($scope) {\n//debugger\n\n    //cause a small delay while things load \n    //ideally this would be an init event or on all parts of document loaded\n    //(may not be necessary!)\n    setTimeout(function() {\n        //debugger\n        $scope.init();\n    },100);\n    \n    var BUTTON_CLASS = \".remote-button\";\n\n    /** \n     * Initialise all buttons with class BUTTON_CLASS\n    */\n    $scope.init = function () {\n        //debugger\n        console.log(\"$scope.init called. Adding event handlers to all buttons with class '\" + BUTTON_CLASS + \"'.\");\n        var clickButtons = $(BUTTON_CLASS + \":not([data-buttontype='repeater'])\") \n        clickButtons.click(function(e){\n            //debugger\n            var btn = $(this)\n            var type = btn.data(\"buttontype\");//get the button type from attribute data-buttontype=\"xxxxx\"\n            var topic = btn.data(\"topic\");//get the topic from attribute data-topic=\"xxxxx\"\n            var payload = btn.data(\"payload\");//get the payload from attribute data-payload=\"xxxxx\"\n            \n            if(type == \"toggle\"){\n                var newPayload = payload == 1 ? 0 : 1;\n                setButtonState(btn,newPayload)\n                $scope.send({\"topic\":topic,\"payload\":newPayload, \"event\": \"click\"})\n            } else {\n                $scope.send({\"topic\":topic,\"payload\":payload})\n            }\n        }); \n        \n\n        var repeatButtons = $(BUTTON_CLASS + \"[data-buttontype='repeater']\") \n        repeatButtons.on('mousedown touchstart',function(e) {\n            e.preventDefault();\n            e.stopPropagation();\n            console.log(e.type);//remove me after debugging\n            var btn = this;\n            var $btn = $(btn);\n            if(btn._intervalId) return; //already in operation\n            btn._topic = $btn.data(\"topic\");//get the topic from attribute data-topic=\"xxxxx\"\n            btn._payload = $btn.data(\"payload\");//get the payload from attribute data-payload=\"xxxxx\"\n            btn._interval = $btn.data(\"interval\");//get the desired repeat duration\n            if(isNumeric(btn._interval) == false || btn._interval < 1) btn._interval = 300;//prevent zero & non numeric timeout value\n            var max = $btn.data(\"max\");//get the max repeat count\n            if(isNumeric(max) && max > 0) \n                btn._max = parseInt(max);\n            else\n                btn._max = undefined;\n            btn._count = 1;\n            $scope.send({\"topic\":btn._topic,\"payload\":btn.payload,\"event\":\"down\", \"count\": btn._count})\n            btn._lastevent = \"down\";\n            //remove any existing timer\n            if(btn._intervalId){\n                clearInterval(btn._intervalId);\n                btn._intervalId = null;\n            }\n            //start the timer if conditions are ok\n            if(!btn._max || (btn._max && btn._count < btn._max)){\n                btn._intervalId = setInterval(function() {\n                    if(btn._max && btn._count >= btn._max){\n                        clearInterval(btn._intervalId);\n                        btn._intervalId = null;\n                        return;\n                    }                    \n                    btn._count = btn._count + 1;\n                    $scope.send({\"topic\":btn._topic,\"payload\":btn.payload,\"event\":\"down\", \"count\": btn._count})\n                },btn._interval); \n            }\n        }).on('mouseup blur focusout mouseout touchend',function(e) {\n            e.preventDefault();\n            e.stopPropagation();\n            console.log(e.type);//remove me after debugging\n            var btn = this;\n            var $btn = $(btn);\n            \n            //next, if data-fireonup == true, then fire up event\n            var sendUpEvent = $btn.data(\"fireonup\") == true;\n            if(sendUpEvent && btn._lastevent === \"down\"){\n                btn._lastevent = \"up\"\n                $scope.send({\"topic\":btn._topic,\"payload\":btn._payload,\"event\":\"up\"})\n            }\n            \n            //finally, if the timer id is still valid, clear it (stop repeater)\n            if(btn._intervalId){\n                clearInterval(btn._intervalId);//stop timer\n                btn._intervalId = null;//clear timer id\n            }\n        });\n           \n    };\n    \n    //watch for node-red msgs\n    $scope.$watch('msg', function(msg) {\n        //debugger\n        if(!msg){ //if no msg \n            console.log(\"$scope.$watch('msg', ...) - msg is empty\");\n            return;\n        }\n        if(!msg.topic){ //if no topic set found\n            console.log(\"msg.topic is empty - cannot match this to any button\")\n            return; //stop processing!\n        }\n\n        var buttonSelector =  BUTTON_CLASS + \"[data-topic='\" + msg.topic + \"']\" \n        var $btn = $(buttonSelector);//get the button\n        \n        if(!$btn.length){ //if no button found\n            console.log(buttonSelector + \" not found - cannot set state\")\n            return; //stop processing!\n        }\n        \n        if($btn.length > 1){ //if MORE than one button found\n            console.log(buttonSelector + \" found more than 1 button - is this intended? Do you have the same data-topic set on multiple buttons?\")\n        }\n        \n        //see if this is a command - if so, process the command\n        if(typeof msg.payload === \"object\" && msg.payload.command){\n            processCommand($btn, msg.payload)\n            return;\n        }        \n        \n        if($btn.data(\"buttontype\") === \"toggle\"){\n            if(msg.payload == \"1\"){\n                setButtonState($btn, 1);\n            } else if(msg.payload == \"0\"){\n                setButtonState($btn, 0);\n            } else {\n               console.log(\"Invalid toggle value in msg.payload, cannot set \" + buttonSelector + \". Ensure msg.payload is either 0 or 1\") \n            }\n        }\n\n    }); \n    \n    /** \n    * helper function to set the correct icon & update the \"data-payload\" memory \n    */\n    function setButtonState($btn, state){\n        \n        $btn.data(\"payload\", state);//set data-payload to new state value (used as a memory)\n        \n        //determine the opposite state\n        var oppositeState;\n        if(state == \"1\" || state === 1){\n            state = 1; //normalise to a number\n            oppositeState = 0;\n        } else {\n            state = 0; //normalise to a number\n            oppositeState = 1;\n        }\n        \n        var $icon = $btn.find(\"i\"); //get the <i> element\n        if(!$icon.length){\n            $icon = $btn.find(\"span\"); //get the <span> element instead!\n        }\n        if(!$icon.length){\n            console.log(\"<i> or <span> not found inside button - cant toggle the icon!\")\n            return;//exit this function - nothing to toggle!\n        }\n        \n        //get the old icon and new icon names\n        var oldIcon = $btn.data(\"icon\" + oppositeState); //get icon1 or icon2 depending on oppositeState\n        var newIcon = $btn.data(\"icon\" + state); //get icon1 or icon2 depending on newPayload\n       \n        //if we have newIcon and an actual DOM element ($icon) - update it...\n        if(newIcon && $icon.length){\n            if(newIcon.includes(\"fa-\")){ \n                $icon.removeClass(oldIcon).addClass(newIcon);  // fontawesome\n            } else { \n                $icon.text(newIcon); // MDI\n            }\n        }\n    }\n        \n    function processCommand($btn, payload){\n        //first check payload is correct format...\n        if(!payload || !payload.command || !payload.value){\n            console.log(\"Cannot process command. Expected a payload object with .command and .value. \")\n        }\n        var cmd = payload.command.trim();\n        switch(cmd){\n            case \"addClass\":\n                $btn.addClass(payload.value); //this calls the jquery function by name (specified in .command) on the $btn and passes in .value\n                break;\n            case \"toggleClass\":\n                $btn.toggleClass(payload.value); //this calls the jquery function by name (specified in .command) on the $btn and passes in .value\n                break;\n            case \"removeClass\":\n                $btn.removeClass(payload.value); //this calls the jquery function by name (specified in .command) on the $btn and passes in .value\n                break;\n            default:\n                console.log(\"command '\" + payload.command + \"' is not supported\")\n        }\n    }        \n        \n    /** \n    * helper function to determine a value is REALLY a number \n    */\n    function isNumeric(n){\n        if(n === \"\") return false;\n        if(n === true || n === false) return false;\n        return !isNaN(parseFloat(n)) && isFinite(n);\n    }\n   \n\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":330,"y":520,"wires":[["60836cd0.7cf2e4"]]},{"id":"60836cd0.7cf2e4","type":"debug","z":"2cd4854b.62f9c2","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":440,"y":400,"wires":[]},{"id":"3c514747.a2de9","type":"ui_group","z":"","name":"Relay","tab":"a7a682c.d6ee88","order":1,"disp":false,"width":"6","collapse":false},{"id":"a7a682c.d6ee88","type":"ui_tab","z":"","name":"Relay","icon":"fa-fire","disabled":false,"hidden":false}]

next flow

[{"id":"25ef7209.834bc6","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"6612f299.67988c","type":"ui_template","z":"25ef7209.834bc6","group":"d143d188.631108","name":"","order":4,"width":0,"height":0,"format":"<div>\n   <md-button class=\"md-button remote-button\" \n              data-payload=\"1\" \n              data-buttontype=\"toggle\"\n              data-topic=\"8\"\n              data-icon0=\"Relay 8 On\"\n              data-icon1=\"Relay 8 Off\"\n              aria-label=\"Relay 8\"\n              >\n      <i class=\"material-icons md-48\">Relay 8</i>\n   </md-button>\n</div>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":220,"y":160,"wires":[["136fb2fe.b14fdd"]]},{"id":"136fb2fe.b14fdd","type":"debug","z":"25ef7209.834bc6","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":460,"y":160,"wires":[]},{"id":"d143d188.631108","type":"ui_group","z":"","name":"css test","tab":"b766fd45.6bcf7","order":1,"disp":true,"width":"6","collapse":false},{"id":"b766fd45.6bcf7","type":"ui_tab","z":"","name":"css testing","icon":"dashboard","disabled":false,"hidden":false}]

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.