Tabs, groups and help with CSS structure

Well my schedule is flexible but not endlessly. The vacuum is not started yet... :smiley:

Oh. No problems.

As I said before, I don't want to get you into trouble.

It can wait.

(While you were away.....)

I decided to play with a bit of CSS stuff building on what I know.

It is not neat, but it is progress all the same - I hope.

This changes the colour of the button depending on what is sent to it:

[{"id":"41fdf357.30e6bc","type":"function","z":"1781e581.31721a","name":"toggle","func":"let c = context.get(\"counter\") || 0;\nmsg.payload = c;\nc = (c + 1) % 2;\ncontext.set(\"counter\",c);\nreturn msg;","outputs":1,"noerr":0,"x":3400,"y":2090,"wires":[["ddd09602.a5e2e"]]},{"id":"ddd09602.a5e2e","type":"switch","z":"1781e581.31721a","name":"switch","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"},{"t":"eq","v":"1","vt":"num"}],"checkall":"true","repair":false,"outputs":2,"x":3400,"y":2130,"wires":[["29a2bac0.63d056"],["20db11b8.6229b6"]]},{"id":"2dc8d9d2.d7fb2e","type":"inject","z":"1781e581.31721a","name":"Clock","topic":"","payload":"","payloadType":"date","repeat":"2","crontab":"","once":false,"onceDelay":0.1,"x":3080,"y":2090,"wires":[["a7c26127.8c51b8","41fdf357.30e6bc"]]},{"id":"29a2bac0.63d056","type":"change","z":"1781e581.31721a","name":"pause","rules":[{"t":"set","p":"pause","pt":"msg","to":"white","tot":"str"},{"t":"set","p":"play","pt":"msg","to":"grey","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":3710,"y":2100,"wires":[["a3fee2f8.b798b8","2fe5ca6f.41b9d6"]]},{"id":"20db11b8.6229b6","type":"change","z":"1781e581.31721a","name":"play","rules":[{"t":"set","p":"play","pt":"msg","to":"white","tot":"str"},{"t":"set","p":"pause","pt":"msg","to":"grey","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":3710,"y":2150,"wires":[["a3fee2f8.b798b8","b33487e9.53f568"]]},{"id":"a3fee2f8.b798b8","type":"ui_template","z":"1781e581.31721a","group":"4a387253.a6300c","name":"Pause/Play 3 x 1","order":7,"width":"3","height":"1","format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n\n       <i class=\"material-icons\">\n           <span style=\"color:{{msg.pause}}\">pause</span> / <span style=\"color:{{msg.play}}\">play_arrow</span>\n           </i>\n\n   </md-button>\n</div>\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":3990,"y":2130,"wires":[["416d3a71.61115c"]]},{"id":"2fe5ca6f.41b9d6","type":"debug","z":"1781e581.31721a","name":"pause","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":3950,"y":2060,"wires":[]},{"id":"5a622fbb.77902","type":"inject","z":"1781e581.31721a","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":3580,"y":2100,"wires":[["29a2bac0.63d056"]]},{"id":"b33487e9.53f568","type":"debug","z":"1781e581.31721a","name":"play","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":3950,"y":2200,"wires":[]},{"id":"9acf25ad.e8e178","type":"inject","z":"1781e581.31721a","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":"2","x":3580,"y":2150,"wires":[["20db11b8.6229b6"]]},{"id":"416d3a71.61115c","type":"debug","z":"1781e581.31721a","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":4200,"y":2130,"wires":[]},{"id":"4a387253.a6300c","type":"ui_group","z":"","name":"SPARE","tab":"de5134a7.f0a0d","order":3,"disp":true,"width":"6","collapse":false},{"id":"de5134a7.f0a0d","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":4}]

This is some screen grabs of some more buttons.

Screenshot from 2020-04-26 17-01-08

I have left the other buttons there because as of yet, there is still no output from the newer buttons.

And yes, some of the buttons are still a way from being completed. (All the i buttons for instance) but it is to get the layout looking right.

1 Like

To keep anyone else following up to speed this is the latest bit of code:

[{"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\">\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\">\n      <i class=\"fa fa-rotate-left\"></i> <i class=\"fa fa-indent fa-flip-horizontal\"></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\"></i> <i class=\"fa fa-indent fa-flip-horizontal\"></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":"8f960c13.389b9","type":"link in","z":"1781e581.31721a","name":"","links":["b2f939.032cc6c8"],"x":165,"y":1750,"wires":[["45e5a406.7764d4"]]},{"id":"69848a07.c10464","type":"link out","z":"1781e581.31721a","name":"","links":["5f10d2a2.d7607c","a084db85.97daf8","78b093ac.e42a84"],"x":364,"y":1750,"wires":[]},{"id":"38632cf8.1416c4","type":"link in","z":"1781e581.31721a","name":"","links":["2b8f290.2f6af58"],"x":165,"y":1800,"wires":[["701d26ed.1b858"]]},{"id":"8b474223.183d08","type":"link out","z":"1781e581.31721a","name":"","links":["46de1438.358a4c","54b5e309.129fa4","4a088035.8947b"],"x":364,"y":1800,"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":"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.black{\n        background-color: black !important;\n        color: #cccccc !important;\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":530,"y":1410,"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-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\": \"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      <span style=\"color:{{msg.colour}}\" class=\"fa fa-plus remote-icon\"> </span>\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":false,"resendOnRefresh":true,"templateScope":"local","x":250,"y":1750,"wires":[["69848a07.c10464","6279800c.41b4c8"]],"info":"<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>"},{"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      <span style=\"color:{{msg.colour}}\" class=\"fa fa-minus remote-icon\"> </span>\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":false,"resendOnRefresh":true,"templateScope":"local","x":250,"y":1800,"wires":[["8b474223.183d08"]],"info":"<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"},{"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":1450,"wires":[]},{"id":"356b11ff.7a3186","type":"samsung-tv-send","z":"1781e581.31721a","device":"f8686d01.926b4","name":"PWR","key":"KEY_POWER","x":510,"y":1500,"wires":[[]]},{"id":"364fb486.4a8e2c","type":"samsung-tv-isalive","z":"1781e581.31721a","device":"f8686d01.926b4","name":"On?","x":510,"y":1460,"wires":[["3c84cc5b.fe79fc","356b11ff.7a3186"],["2e255a5b.30a076","356b11ff.7a3186","dd67456d.3f6458"]]},{"id":"2e255a5b.30a076","type":"change","z":"1781e581.31721a","name":"On","rules":[{"t":"set","p":"colour","pt":"msg","to":"lime","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":140,"y":1480,"wires":[[]]},{"id":"3c84cc5b.fe79fc","type":"change","z":"1781e581.31721a","name":"Off","rules":[{"t":"set","p":"colour","pt":"msg","to":"red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":140,"y":1440,"wires":[[]]},{"id":"dd67456d.3f6458","type":"link out","z":"1781e581.31721a","name":"","links":["352c1eb1.100bd2","e600188a.f9b7"],"x":605,"y":1500,"wires":[]},{"id":"e1b280cf.cd601","type":"ui_template","z":"1781e581.31721a","group":"9f39f988.dac9","name":"PWR *","order":4,"width":1,"height":1,"format":"<div id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-power-off remote-icon\"></i>\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":280,"y":1460,"wires":[[]],"info":"This needs to accept colour information from the incoming message\n"},{"id":"e35ea1c9.08acc","type":"ui_template","z":"1781e581.31721a","group":"9f39f988.dac9","name":"Src","order":5,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button\">Src\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":730,"y":1500,"wires":[["72b9215b.c42ba8"]]},{"id":"72b9215b.c42ba8","type":"link out","z":"1781e581.31721a","name":"","links":["97056e47.8255d8"],"x":825,"y":1500,"wires":[]},{"id":"6279800c.41b4c8","type":"debug","z":"1781e581.31721a","name":"Volume UP button state","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":530,"y":1780,"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":"f8686d01.926b4","type":"samsung-tv","z":"","name":"","ip":"192.168.0.9","mac":"00:C3:F4:A9:CF:DE","token":"34217597"},{"id":"9f39f988.dac9","type":"ui_group","z":"","name":"POWER","tab":"b128eb09.9f681","order":2,"disp":true,"width":"2","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}]
1 Like

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