Tabs, groups and help with CSS structure

Dashboard
181

Yes, I was trying to build on that, but for some reason I was just not getting anywhere.

Sorry I can't post my attempts because it was a while ago today.
(I got 6 hours sleep, got up, and maybe 2 hours of stuff then got back into programming.)

I will have another go and post what I get.

Ah! I did have one I didn't delete.

This is it:

<div id="arrow_down">
   <md-button class="md-button remote-button">
      <i class="fa fa-fw fa-rotate-left fa fa-indent"></i>
   </md-button>
</div>
<script>
(function($scope) {
    
$('#arrow_down').on('touchstart mousedown', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"topic":"arrow_down","payload": true});
});

$('#arrow_down').on('touchend mouseup', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"topic":"arrow_down","payload": false});
});
    
})(scope);
</script>

All I get is one icon on the button.

182

No problem (another than luck of time for today) It will be done. You know it is possible. Cos everything is :slight_smile:

183

I shall post the block of code on which we are working so you have what I have.

[{"id":"246a2951.92dc26","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"NetFlix","order":20,"width":"1","height":"1","format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button small\">NetFlx\n   </md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":260,"y":1850,"wires":[["afbd4673.5e049"]]},{"id":"718d5dc3.56cb84","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"Home","order":21,"width":"1","height":"1","format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-home remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"ch-list\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":1850,"wires":[["c9b4cef1.46fa28"]]},{"id":"970717bb.7c1bc","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"Vid","order":22,"width":"1","height":"1","format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button small\">Video\n   </md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":1850,"wires":[["11932257.837916"]]},{"id":"54c0bac.5f5fac4","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"WWW","order":23,"width":"1","height":"1","format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button small\">WWW\n   </md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":250,"y":1900,"wires":[["60092350.bb50d4"]]},{"id":"89495b4f.be569","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"^","order":24,"width":"1","height":"1","format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-chevron-up remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"up\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":1900,"wires":[["4f16229f.83e86c"]]},{"id":"9e8e8f5d.65f848","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"Guide","order":25,"width":"1","height":"1","format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button bigger\">\n      <i class=\"fa fa-list-ul remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"ch-list\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":1900,"wires":[["95ce3b1e.0f93b8"]]},{"id":"2cf79a2f.996f2e","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"<","order":26,"width":"1","height":"1","format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-chevron-left remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"left\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":250,"y":1950,"wires":[["d7b7d5f2.3a5e48"]]},{"id":"7f0678e0.82d7","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"Sel","order":27,"width":"1","height":"1","format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button\">Sel\n   </md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":1950,"wires":[["e14e9d65.fb77e"]]},{"id":"3a190f7d.487938","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":">","order":28,"width":"1","height":"1","format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-chevron-right remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"right\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":1950,"wires":[["1118a5c4.a7ae2a"]]},{"id":"c99f1ee5.f417b","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"Rtn *","order":29,"width":"1","height":"1","format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button small\">\n      <i class=\"fa fa-rotate-left remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"rtn\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":250,"y":2000,"wires":[["e4e3b572.b2fb08"]],"info":"fa-rotate-left\nfa-indent\n"},{"id":"d332ca70.a1d1c8","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"V","order":30,"width":"1","height":"1","format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-fw fa-chevron-down remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"down\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":2000,"wires":[["62e24409.42ea94"]]},{"id":"7bf90b0f.0b4e74","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"Exit","order":31,"width":"1","height":"1","format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-sign-in remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"exit\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":2000,"wires":[["b43ccc1f.bf4aa"]]},{"id":"40429ed0.0fb288","type":"trigger","z":"1781e581.31721a","op1":"Down","op2":"0","op1type":"str","op2type":"str","duration":"-250","extend":false,"units":"ms","reset":"Up","bytopic":"all","name":"Repeat","x":260,"y":2060,"wires":[["11e3968c.d6de51"]]},{"id":"baa7b104.5ae088","type":"switch","z":"1781e581.31721a","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"Down","vt":"str"},{"t":"eq","v":"Up","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":250,"y":2100,"wires":[[],["11e3968c.d6de51"]]},{"id":"11e3968c.d6de51","type":"function","z":"1781e581.31721a","name":"toggle","func":"let msg1 = {};\nlet y = context.get(\"pressed\") || 0;\nvar x = context.get(\"counter\") || 0;\nif (msg.payload == \"Up\")\n{\n    context.set(\"counter\",0);\n    msg.payload = \"A\";\n    context.set(\"pressed\",0);       //  Wipe count.\n//    msg1.colour = \"lime\";\n\n    return [msg,null];\n}\n\nif (x === 0)\n{\n    if (y === 0)\n    {\n        //  Send pressed message.\n        y = y + 1;\n        context.set(\"pressed\",y);\n        //  msg1 = {payload:\"Goo\"};\n        msg1 = {payload:\"Pressed\"};\n        node.send([null,msg1]);\n        //node.send([null,msg1]);\n        \n    }\n    msg.payload = \"B\";\n    msg1.colour = \"red\";\n} else\nif (x === 1)\n{\n    msg.payload = \"A\";\n    msg1.colour = \"lime\";\n}\n\nx = (x + 1) % 2;\n\ncontext.set(\"counter\",x);\n\nreturn [msg,null];","outputs":2,"noerr":0,"x":410,"y":2060,"wires":[["b2f939.032cc6c8","5d923460.8e55c4"],[]]},{"id":"8f960c13.389b9","type":"link in","z":"1781e581.31721a","name":"","links":["b2f939.032cc6c8"],"x":165,"y":1750,"wires":[["45e5a406.7764d4"]]},{"id":"b2f939.032cc6c8","type":"link out","z":"1781e581.31721a","name":"","links":["8f960c13.389b9"],"x":505,"y":2040,"wires":[]},{"id":"5f10d2a2.d7607c","type":"link in","z":"1781e581.31721a","name":"","links":["69848a07.c10464"],"x":135,"y":2070,"wires":[["40429ed0.0fb288","baa7b104.5ae088"]]},{"id":"69848a07.c10464","type":"link out","z":"1781e581.31721a","name":"","links":["5f10d2a2.d7607c"],"x":364,"y":1750,"wires":[]},{"id":"9e39294d.72df48","type":"trigger","z":"1781e581.31721a","op1":"Down","op2":"0","op1type":"str","op2type":"str","duration":"-250","extend":false,"units":"ms","reset":"Up","bytopic":"all","name":"Repeat","x":260,"y":2140,"wires":[["79e65e72.c79b18"]]},{"id":"440a65f9.36b08c","type":"switch","z":"1781e581.31721a","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"Down","vt":"str"},{"t":"eq","v":"Up","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":250,"y":2180,"wires":[[],["79e65e72.c79b18"]]},{"id":"79e65e72.c79b18","type":"function","z":"1781e581.31721a","name":"toggle","func":"let msg1 = {};\nlet y = context.get(\"pressed\") || 0;\nvar x = context.get(\"counter\") || 0;\nif (msg.payload == \"Up\")\n{\n    context.set(\"counter\",0);\n    msg.payload = \"A\";\n    context.set(\"pressed\",0);       //  Wipe count.\n//    msg1.colour = \"lime\";\n\n    return [msg,null];\n}\n\nif (x === 0)\n{\n    if (y === 0)\n    {\n        //  Send pressed message.\n        y = y + 1;\n        context.set(\"pressed\",y);\n        //  msg1 = {payload:\"Goo\"};\n        msg1 = {payload:\"Pressed\"};\n        node.send([null,msg1]);\n        //node.send([null,msg1]);\n        \n    }\n    msg.payload = \"B\";\n    msg1.colour = \"red\";\n} else\nif (x === 1)\n{\n    msg.payload = \"A\";\n    msg1.colour = \"lime\";\n}\n\nx = (x + 1) % 2;\n\ncontext.set(\"counter\",x);\n\nreturn [msg,null];","outputs":2,"noerr":0,"x":410,"y":2140,"wires":[["2b8f290.2f6af58","91535c08.8eb8a"],[]]},{"id":"38632cf8.1416c4","type":"link in","z":"1781e581.31721a","name":"","links":["2b8f290.2f6af58"],"x":165,"y":1800,"wires":[["701d26ed.1b858"]]},{"id":"2b8f290.2f6af58","type":"link out","z":"1781e581.31721a","name":"","links":["38632cf8.1416c4","f9725a0b.bbe8a8"],"x":505,"y":2120,"wires":[]},{"id":"46de1438.358a4c","type":"link in","z":"1781e581.31721a","name":"","links":["8b474223.183d08"],"x":135,"y":2150,"wires":[["9e39294d.72df48","440a65f9.36b08c"]]},{"id":"8b474223.183d08","type":"link out","z":"1781e581.31721a","name":"","links":["46de1438.358a4c"],"x":364,"y":1800,"wires":[]},{"id":"530c8cf7.a70744","type":"link in","z":"1781e581.31721a","name":"","links":["1fd3690f.639d27"],"x":295,"y":1500,"wires":[[]]},{"id":"1fd3690f.639d27","type":"link out","z":"1781e581.31721a","name":"","links":["530c8cf7.a70744"],"x":220,"y":1500,"wires":[]},{"id":"e4e3b572.b2fb08","type":"link out","z":"1781e581.31721a","name":"","links":["f04eb47e.d2faf8"],"x":359,"y":2000,"wires":[]},{"id":"62e24409.42ea94","type":"link out","z":"1781e581.31721a","name":"","links":["b82f0da4.35205"],"x":585,"y":2000,"wires":[]},{"id":"b43ccc1f.bf4aa","type":"link out","z":"1781e581.31721a","name":"","links":["ca1fbb11.f219"],"x":825,"y":2000,"wires":[]},{"id":"d7b7d5f2.3a5e48","type":"link out","z":"1781e581.31721a","name":"","links":["45f4a2aa.8efdcc"],"x":359,"y":1950,"wires":[]},{"id":"e14e9d65.fb77e","type":"link out","z":"1781e581.31721a","name":"","links":["de1c545e.70ada8"],"x":585,"y":1950,"wires":[]},{"id":"1118a5c4.a7ae2a","type":"link out","z":"1781e581.31721a","name":"","links":["5cfe822d.9e1814"],"x":825,"y":1950,"wires":[]},{"id":"60092350.bb50d4","type":"link out","z":"1781e581.31721a","name":"","links":["2f133be1.7092bc"],"x":360,"y":1900,"wires":[]},{"id":"afbd4673.5e049","type":"link out","z":"1781e581.31721a","name":"","links":["177e6a72.ada5ae"],"x":365,"y":1850,"wires":[]},{"id":"c9b4cef1.46fa28","type":"link out","z":"1781e581.31721a","name":"","links":["8209bb9e.3e47a"],"x":585,"y":1850,"wires":[]},{"id":"4f16229f.83e86c","type":"link out","z":"1781e581.31721a","name":"","links":["161ffc66.196564"],"x":585,"y":1900,"wires":[]},{"id":"11932257.837916","type":"link out","z":"1781e581.31721a","name":"","links":["7a3f6d20.ee6adc"],"x":825,"y":1850,"wires":[]},{"id":"95ce3b1e.0f93b8","type":"link out","z":"1781e581.31721a","name":"","links":["9e84443f.413328"],"x":825,"y":1900,"wires":[]},{"id":"ea7d6c1f.e4e118","type":"link out","z":"1781e581.31721a","name":"","links":["1ec1e50a.666ddb"],"x":585,"y":1800,"wires":[]},{"id":"9451d6b2.cb6948","type":"link out","z":"1781e581.31721a","name":"","links":["b934ec01.a8adf8"],"x":825,"y":1800,"wires":[]},{"id":"db5e3233.c9fad","type":"link out","z":"1781e581.31721a","name":"","links":["21eebe73.5057da"],"x":825,"y":1750,"wires":[]},{"id":"9d7f3cad.d7b8f","type":"link out","z":"1781e581.31721a","name":"","links":["1ab9b028.28f328"],"x":585,"y":1750,"wires":[]},{"id":"da55f79c.415fe8","type":"link out","z":"1781e581.31721a","name":"","links":["fb43d543.5faef"],"x":585,"y":1700,"wires":[]},{"id":"988671af.8646b","type":"link out","z":"1781e581.31721a","name":"","links":["a9d0f3df.54ccd"],"x":825,"y":1700,"wires":[]},{"id":"6d970c11.6d158c","type":"link out","z":"1781e581.31721a","name":"","links":["260e6c63.8bb99c"],"x":364,"y":1700,"wires":[]},{"id":"1cf586b3.c22e71","type":"link out","z":"1781e581.31721a","name":"","links":["b1c885a8.159018"],"x":365,"y":1550,"wires":[]},{"id":"a97c8331.4a4d88","type":"link out","z":"1781e581.31721a","name":"","links":["12a841e3.f25696"],"x":365,"y":1600,"wires":[]},{"id":"6580d2cf.bea1a4","type":"link out","z":"1781e581.31721a","name":"","links":["1b9c3393.0843dc"],"x":365,"y":1650,"wires":[]},{"id":"65209bf1.63524c","type":"link out","z":"1781e581.31721a","name":"","links":["8173943f.2c6a"],"x":585,"y":1550,"wires":[]},{"id":"57e01527.528f84","type":"link out","z":"1781e581.31721a","name":"","links":["9baf35a8.7bdd78"],"x":585,"y":1600,"wires":[]},{"id":"caf00dda.129a28","type":"link out","z":"1781e581.31721a","name":"","links":["4b242414.764014"],"x":585,"y":1650,"wires":[]},{"id":"80b64ca.c7a903","type":"link out","z":"1781e581.31721a","name":"","links":["c6055e4.7791fa"],"x":825,"y":1550,"wires":[]},{"id":"4debbbe1.4993ec","type":"link out","z":"1781e581.31721a","name":"","links":["e9ca8a9c.7a84b8"],"x":825,"y":1600,"wires":[]},{"id":"ee449d92.abff6","type":"link out","z":"1781e581.31721a","name":"","links":["d7c8f004.b43d08"],"x":825,"y":1650,"wires":[]},{"id":"5d923460.8e55c4","type":"link out","z":"1781e581.31721a","name":"","links":["936a51e9.cde21"],"x":505,"y":2080,"wires":[]},{"id":"91535c08.8eb8a","type":"link out","z":"1781e581.31721a","name":"","links":["9ac1a592.01dc8"],"x":505,"y":2160,"wires":[]},{"id":"bded269f.23a12","type":"ui_template","z":"1781e581.31721a","group":"6ab22327.a2f71c","name":"THIS IS THE TEMPLATE","order":7,"width":0,"height":0,"format":"<style id=\"remote-buttons\">\n    :root {\n      --dashboard-unit-width: 48px;\n      --dashboard-unit-height: 48px;\n    }\n    .nr-dashboard-template {\n        padding: 0px;\n    }\n    .remote-button:not([disabled]):hover{\n         background-color: #232323 !important;\n    }\n\n    /*   This is the normal button definition  */\n    .remote-button{\n        background-color: black !important;\n        color: #cccccc !important;\n        height: var(--dashboard-unit-height);\n        width: 100%;\n        border-radius: 10px;\n        font-size:1.0em;\n        font-weight:normal;\n        margin: 0;\n        min-height: 36px;\n        min-width: unset;\n        line-height: unset;\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.red{\n        background-color: red !important;\n        color: #cccccc !important;\n    }\n    .remote-button.red:not([disabled]):hover{\n         background-color: orange !important;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":500,"y":1500,"wires":[[]]},{"id":"797fdca7.e44f6c","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"1","order":1,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button bigger\">1\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_1').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_regular\",\"payload\": 1});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":250,"y":1550,"wires":[["1cf586b3.c22e71"]]},{"id":"d7f1cca6.efb6","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"2","order":2,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button bigger\">2\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_1').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_regular\",\"payload\": 2});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":1550,"wires":[["65209bf1.63524c"]]},{"id":"3836583a.9f93a","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"3","order":3,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button bigger\">3\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_1').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_regular\",\"payload\": 3});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":1550,"wires":[["80b64ca.c7a903"]]},{"id":"7b369b2e.9adc94","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"4","order":4,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button bigger\">4\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_1').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_regular\",\"payload\": 4});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":250,"y":1600,"wires":[["a97c8331.4a4d88"]]},{"id":"24ea6545.5497ba","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"5","order":5,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button bigger\">5\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_1').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_regular\",\"payload\": 5});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":1600,"wires":[["57e01527.528f84"]]},{"id":"51281a60.6c5004","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"6","order":6,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button bigger\">6\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_1').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_regular\",\"payload\": 6});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":1600,"wires":[["4debbbe1.4993ec"]]},{"id":"8c87e69f.13a17","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"7","order":7,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button bigger\">7\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_1').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_regular\",\"payload\": 7});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":250,"y":1650,"wires":[["6580d2cf.bea1a4"]]},{"id":"2a484c89.499ad4","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"8","order":8,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button bigger\">8\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_1').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_regular\",\"payload\": 8});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":1650,"wires":[["caf00dda.129a28"]]},{"id":"edcc67c0.23134","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"9","order":9,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button bigger\">9\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_1').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_regular\",\"payload\": 9});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":1650,"wires":[["ee449d92.abff6"]]},{"id":"7ecd7ec4.83fed","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"0","order":11,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button bigger\">0\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_1').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_regular\",\"payload\": 0});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":1700,"wires":[["da55f79c.415fe8"]]},{"id":"b0f6668a.98a1f8","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"info","order":10,"width":1,"height":1,"format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-info-circle remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"info\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":250,"y":1700,"wires":[["6d970c11.6d158c"]]},{"id":"51f398a3.47de48","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"prev","order":12,"width":1,"height":1,"format":"<div id=\"regular_plus\">\n<md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-indent fa-flip-horizontal remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"prev\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":1700,"wires":[["988671af.8646b"]]},{"id":"5b89c42a.d300e4","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"Ch +","order":15,"width":1,"height":1,"format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-chevron-up remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"ch-up\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":1750,"wires":[["db5e3233.c9fad"]]},{"id":"bc978fd4.0ec948","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"mute","order":14,"width":1,"height":1,"format":"<div>\n   <md-button id=\"mute-button\" class=\"md-button remote-button\" \n              data-state=\"on\"  ng-click=\"toggleMute()\" >\n      <i class=\"material-icons md-48\">volume_off</i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n    var btnSelector = \"#mute-button\";//Set the selector to match the button ID above\n    var topic = \"mute\"; //edit me to suit - this is sent to your flow as msg.topic\n    var icon1 = \"volume_up\";//on icon\n    var icon2 = \"volume_off\";//muted icon\n    \n    //create a function to call in ng-click (see the md-button attributes above)\n    scope.toggleMute = function(){\n        debugger\n        var $btn = $(btnSelector);\n        var currentState = $btn.data(\"state\");\n        //if currently on, change to off state & send new payload\n        if(currentState == \"on\"){\n            mute($btn);\n            $scope.send({\"topic\":topic,\"payload\": \"off\"});\n        } else {\n            unmute($btn);\n            $scope.send({\"topic\":topic,\"payload\": \"on\"});\n        }\n    } \n    //watch for node-red msgs\n    scope.$watch('msg', function(msg) {\n        var $btn = $(btnSelector);\n        if (msg) {\n            if(msg.payload == \"on\"){\n                unmute($btn);\n            } else if(msg.payload == \"off\"){\n                mute($btn);\n            }\n          \n        }\n    }); \n    //helper function to set the correct icon & update the \"data-state\" memory\n    function mute($btn){\n        var $ico = $btn.find(\"i\");\n        $btn.data(\"state\",\"off\");//set data-state to off (remember state)\n        // $ico.removeClass(\"fa-volume_mute\")\n        // $ico.addClass(\"fa-volume_off\")\n        $ico.text(icon2);\n    }\n    //helper function to set the correct icon & update the \"data-state\" memory\n    function unmute($btn){\n        var $ico = $btn.find(\"i\");\n        $btn.data(\"state\",\"on\");//set data-state to on (remember state)\n        // ico.removeClass(\"fa-volume_off\");\n        // ico.addClass(\"fa-volume_mute\");\n        $ico.text(icon1);\n    }\n\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":1750,"wires":[["9d7f3cad.d7b8f"]],"info":"  class=\"material-icons\"> volume_off"},{"id":"45e5a406.7764d4","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"vol +","order":13,"width":1,"height":1,"format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-plus remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"vol-up\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":250,"y":1750,"wires":[["69848a07.c10464"]]},{"id":"701d26ed.1b858","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"vol -","order":16,"width":1,"height":1,"format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-minus remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"vol-down\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":250,"y":1800,"wires":[["8b474223.183d08"]]},{"id":"2d48b505.8964aa","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"ch list","order":17,"width":1,"height":1,"format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-list-alt remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"ch-list\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":1800,"wires":[["ea7d6c1f.e4e118"]]},{"id":"31d6e767.959288","type":"ui_template","z":"1781e581.31721a","group":"eabe7d43.b23f48","name":"Ch -","order":18,"width":1,"height":1,"format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-chevron-down remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#regular_plus').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_plus\",\"payload\": \"ch-down\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":1800,"wires":[["9451d6b2.cb6948"]]},{"id":"80a8f56b.e2756","type":"comment","z":"1781e581.31721a","name":"Read me *","info":"Number buttons 1 - 0:  are *remote-button bigger*\nIcon buttons are of class = `remote-icon`\n","x":740,"y":1500,"wires":[]},{"id":"eabe7d43.b23f48","type":"ui_group","z":"","name":"Full_Remote2","tab":"b128eb09.9f681","order":3,"disp":false,"width":"3","collapse":false},{"id":"6ab22327.a2f71c","type":"ui_group","z":"","name":"HOME","tab":"6d306f92.ccc54","order":1,"disp":true,"width":3,"collapse":false},{"id":"b128eb09.9f681","type":"ui_tab","z":"","name":"HDMI_TV_control","icon":"dashboard","order":7,"disabled":false,"hidden":false},{"id":"6d306f92.ccc54","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
184

Just a quick example of 2 icons in one button

<div id="regular_plus">
   <md-button class="md-button remote-button">
      <i class="fa fa-chevron-up remote-icon"></i><i class="fa fa-chevron-down remote-icon"></i>
   </md-button>
</div>
185

Thanks.

So with what you showed me I have this:

<div id="regular_plus">
   <md-button class="md-button remote-button">
      <i class="fa fa-rotate-left"></i><i class="fa fa-indent fa-flip-horizontal"></i>
   </md-button>
</div>

I am sure I had done that structure but must have missed something.

186

That should work, only you are missing the custom class for icons. (remote-icon) That of course if those icons must have same look as others.

187

I had to negate the remote-icon because the icons need to be small.
It looks nice though.

I think we did it, but text and icons..... (Icon above text)

Although I don't want to force that.

I still need to get the buttons to accept a state input to set their colour. So, ok it would be a colour input. But anyway.
(oh and the volume buttons - but they may be the same and controlled by external nodes)

188

This is what the remote looks like as of now:

Screenshot from 2020-04-25 20-00-06
Screenshot from 2020-04-25 20-00-06267Ɨ552 102 KB

189

That's fine. You can try space between icons, may look better

<i class="fa fa-rotate-left"></i> <i class="fa fa-indent fa-flip-horizontal"></i>
190

What happened with this?
image

191

Not sure.

I posted the code.

I just thought it was.... how it happened.
Yes, a bit big, but not too bad.

I think I goofed with the code and had the bigger on a line.

<div id="regular_plus">
   <md-button class="md-button remote-button **bigger**">
      <i class="fa fa-list-ul remote-icon"></i>
   </md-button>
</div>

Oh, doesn't work in code.
:frowning:

Removed and it is better.

I think that is/was an artefact of my earlier attempts with the icons and stuff.

192

(Dumb question)

Ok, we are making a lot of buttons.

The ones needing input are few and far between. But outputs..... I'm guessing this is covered in the template nodes - yes?

193

Outputs will of course will be in templates. But still a bit early (at least for me) cos CSS is not that ready yet.

The issue with some icons which have bigger sizes than others.
If you have just a couple of them, it is reasonable enough to make "personal rules" for them.

For that, lets make personal rule for that Guide icon.

.remote-icon#guide-icon{
        font-size:1.2em;
    }

See the "#" - that will be the id of that icon.

And for icon itself, the id is needed to be added

<div id="regular_plus">
   <md-button class="md-button remote-button bigger">
      <i id="guide-icon" class="fa fa-list-ul remote-icon"></i>
   </md-button>
</div>

So that icon has now the remote-icon class and also personal rule

194

The guide button had - by mistake - the bigger bit in the line.

I removed it and it looks better/correct.

Screenshot from 2020-04-25 20-30-53

195

Of course. But that info I hope wasn't for waist :slight_smile:

196

No. I think I will have to find a big piece of paper, write out the example and draw a lot of lines on it joining the associations on it to what does what in the code.

I'm just not sure they sell paper sheets that big! :wink:

197

I'm absolutely delighted to see that you have commented the code. That's the way to go :slight_smile:

198

On comments.

Normally in NR they are the # type.

If you want to add comments in the template node while writing CSS the comments must be in the /* */ format.

I've seen that programming arduinos.

But sometimes it doesn't seem to work.
I'm guessing they are line only? ie: It is better to have them on a line by themselves.
Sometimes when I put them at the end of a line, they don't work.

(But sorry, that may be getting off topic)

199

Different languages have different ways to comment.
block comment "/* */" is supported in JavaScript and in CSS but you cant use line comment "//" in CSS

200

Anyway I am trying to get my head around the rules and how they interact.

@Steve-Mcl did help a bit.

Anyway, I'm not doing anything too important just now if you don't mind helping me more now.