Tabs, groups and help with CSS structure

If you explore any of buttons where icon is placed

<div id="regular_plus">
   <md-button class="md-button remote-button">
      <i class="fa fa-2x fa-info-circle remote-icon"></i>
   </md-button>
</div>

The icon part of it has the "remote-icon" class defined
So the change in template should change them

(I see you are typing/replying, but...)

This is in the template node: (extract)

        margin: 0;
        min-height: 36px;
        min-width: unset;
        line-height: unset;
    }
    .remote-button.num{
        font-weight:bold;
        font-size:1.5em;
    }

    .remote-icon{
        font-size:1.0em;
    }

    .remote-button.red{
        background-color: red !important;

Yes, I get that. I hope that is what I have done with what I just posted.

I'll wait for you to post.

Yes, I did see that. That has me stumped.

I can kind of see what it is doing, but the structure isn't known to me.
So (indulging me):

  • Not sure about the <div>
  • We are using the remote-button structure we defined in the template
  • We are telling it to use font-awesome icon: fa-info-circle and attribute it to remote-icon structure. (Ok, you say definition..... ) I know I am wrong. Sorry.

I kind of get it, but not really sure I understand it all.

Where ever the element has

class=

It means that that element has all the classes in this list (separated by space)

So we read the element

<md-button class="md-button remote-button">

This is element with type md-button and it has classes md-button and remote-button

<i class="fa fa-fw fa-plus remote-icon">

This is icon (the i tag means icons) and it has classes fa, fa-fw, fa-plus and remote-icon

Some of those classes are ours some are not. But all of them make your elements to look somehow different.

Ok.

While you were replying, I think I got that.

And I think I fell into the trap the code:

    .remote-icon{
        font-size:1.0em;
    }

That is 1.0em. That is basically saying "Original size." So I won't see a size change.

So, to test that theory, I changed it to:

    .remote-icon{
        font-size:2.0em;
    }

Deployed and......

No size change.

So.... Now I am confused even more.

Have I got the template code correct?

<style id="remote-buttons">
    :root {
      --dashboard-unit-width: 48px;
      --dashboard-unit-height: 48px;
    }
    .nr-dashboard-template {
        padding: 0px;
    }
    .remote-button:not([disabled]):hover{
         background-color: #232323 !important;
    }

    .remote-button{
        background-color: black !important;
        color: #cccccc !important;
        height: var(--dashboard-unit-height);
        width: 100%;
        border-radius: 10px;
        font-size:1.0em;
        font-weight:normal;
        margin: 0;
        min-height: 36px;
        min-width: unset;
        line-height: unset;
    }
    .remote-button.num{
        font-weight:bold;
        font-size:1.5em;
    }

    .remote-icon{
        font-size:2.0em;
    }

    .remote-button.red{
        background-color: red !important;
        color: #cccccc !important;
    }
    .remote-button.red:not([disabled]):hover{
         background-color: orange !important;
    }
    .remote-icon{
        font-size:1.0em;
    }
</style>

Oh, and this is in the template node for the button:

<div id="regular_plus">
   <md-button class="md-button remote-button">
      <i class="fa fa-2x fa-info-circle remote-icon"></i>
   </md-button>
</div>

<script>

(function($scope) {
    
$('#regular_plus').on('click', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"topic":"regular_plus","payload": "info"});
});
    
})(scope);
</script>

You have

.remote-icon{
        font-size:1.0em;
    }

defined twice!

This does not make any error but remember - the last one counts.
So if you find duplicates in your CSS, remove them.

Yes, thanks.

I don't know how the second one got in there.

It is coming on great.

This is the latest screen picture.

The buttons with text are still needing work / icons.
The bottom right is the same. I was just playing with it and it isn't correct in code.

There is also the volume buttons needing two colours so if they are held down, the pulse (say white and grey) and send a pulse of messages out to the rest of the flow.

Oh, ok. WWW ..... not sure. If there is a globe it may suffice.

I don't want this to sound like I am winging......

A trap in that...... The mute... Yes. volume off is nice. But not the best.
The material-design one is better.

And there are some font-awesome icons I can't seem to get working.
fa-indent for instance.
(would be better if flip-horizontal too.)

(sorry)

Step by step.
We just learned that we can adjust similar things with adding a class.
Lets do one more class then.

For text buttons.
How to call it?
What it should do?
What buttons must have this class included?

I am sorry for getting a bit excited.. That's who I am.
And I am getting cabin fever after all these weeks of not being allowed to go out.

Ok, one more class.

This is just as an example though - yes? There aren't any text buttons.
I think I may have not explained it correctly when I was mentioning the text buttons.

In the end they will have icons. Not so much text.

Well, the netflix, www, video ??
Longer text than just one number

Yes, you are right. So they would be another class like we did with the:

    .remote-button.num{
        font-weight:bold;
        font-size:1.5em;
    }

But it would be something like:

    .remote-button.small{
        font-size:0.8em;
    }

80% of original size?

Yes?

Very good!
Now add it to the buttons where needed

Shall do.

(wow! This is spinning my head.)

And that I am at 17 hours uptime for today and not much time left.
How I miss the years when I could do 36 hours without a problem.

Back soon.

Ok, that looks good. Though I had to go to 0.7em not 0.8. No worries.

Only this bit left.

I've shown the icons which I think are better for the job.

Oh and one of the is fa-indent and horizontal flip.
That's for the one below the 9.
I don't like having the same icon for different functions.
That's just confusing.
:wink:

I just did the home button.

Let's then find missing icons
But leave the MUTE last. That may take extra things to do, let's see.

Ok.

I am not saying they MUST be those.

It is just font-awesome don't have as much of a selection for some things as material-design.

That indent one.... I am not getting why it isn't working for me.
Putting the flip aside.

Menu.... That could nearly be align-justify. Just with leading dots make the other one look just that much better.

Oh and the volume one blinking when held down.

(Done guide)

When you have find all possible icons ,it is time again to share that part of your flow cos you are many steps ahead. (I am lazy enough to not do all the steps as you can imagine)

And then let's deal with one problem at the time.

Here it is.

(Sorry)

And the picture of what is left to do.

Screenshot from 2020-04-25 00-29-35

[{"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":1670,"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-fw 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":1670,"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":1670,"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":1720,"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-fw 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":1720,"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-fw 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":1720,"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-fw 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":1770,"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":1770,"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-fw 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":1770,"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-fw 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":1820,"wires":[["e4e3b572.b2fb08"]]},{"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":1820,"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-fw fa-exit 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":1820,"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":1880,"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":1920,"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":1880,"wires":[["b2f939.032cc6c8","5d923460.8e55c4"],[]]},{"id":"8f960c13.389b9","type":"link in","z":"1781e581.31721a","name":"","links":["b2f939.032cc6c8"],"x":165,"y":1570,"wires":[["45e5a406.7764d4"]]},{"id":"b2f939.032cc6c8","type":"link out","z":"1781e581.31721a","name":"","links":["8f960c13.389b9"],"x":505,"y":1860,"wires":[]},{"id":"5f10d2a2.d7607c","type":"link in","z":"1781e581.31721a","name":"","links":["69848a07.c10464"],"x":135,"y":1890,"wires":[["40429ed0.0fb288","baa7b104.5ae088"]]},{"id":"69848a07.c10464","type":"link out","z":"1781e581.31721a","name":"","links":["5f10d2a2.d7607c"],"x":364,"y":1570,"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":1960,"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":2000,"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":1960,"wires":[["2b8f290.2f6af58","91535c08.8eb8a"],[]]},{"id":"38632cf8.1416c4","type":"link in","z":"1781e581.31721a","name":"","links":["2b8f290.2f6af58"],"x":165,"y":1620,"wires":[["701d26ed.1b858"]]},{"id":"2b8f290.2f6af58","type":"link out","z":"1781e581.31721a","name":"","links":["38632cf8.1416c4","f9725a0b.bbe8a8"],"x":505,"y":1940,"wires":[]},{"id":"46de1438.358a4c","type":"link in","z":"1781e581.31721a","name":"","links":["8b474223.183d08"],"x":135,"y":1970,"wires":[["9e39294d.72df48","440a65f9.36b08c"]]},{"id":"8b474223.183d08","type":"link out","z":"1781e581.31721a","name":"","links":["46de1438.358a4c"],"x":364,"y":1620,"wires":[]},{"id":"530c8cf7.a70744","type":"link in","z":"1781e581.31721a","name":"","links":["1fd3690f.639d27"],"x":295,"y":1320,"wires":[[]]},{"id":"1fd3690f.639d27","type":"link out","z":"1781e581.31721a","name":"","links":["530c8cf7.a70744"],"x":220,"y":1320,"wires":[]},{"id":"e4e3b572.b2fb08","type":"link out","z":"1781e581.31721a","name":"","links":["f04eb47e.d2faf8"],"x":359,"y":1820,"wires":[]},{"id":"62e24409.42ea94","type":"link out","z":"1781e581.31721a","name":"","links":["b82f0da4.35205"],"x":585,"y":1820,"wires":[]},{"id":"b43ccc1f.bf4aa","type":"link out","z":"1781e581.31721a","name":"","links":["ca1fbb11.f219"],"x":825,"y":1820,"wires":[]},{"id":"d7b7d5f2.3a5e48","type":"link out","z":"1781e581.31721a","name":"","links":["45f4a2aa.8efdcc"],"x":359,"y":1770,"wires":[]},{"id":"e14e9d65.fb77e","type":"link out","z":"1781e581.31721a","name":"","links":["de1c545e.70ada8"],"x":585,"y":1770,"wires":[]},{"id":"1118a5c4.a7ae2a","type":"link out","z":"1781e581.31721a","name":"","links":["5cfe822d.9e1814"],"x":825,"y":1770,"wires":[]},{"id":"60092350.bb50d4","type":"link out","z":"1781e581.31721a","name":"","links":["2f133be1.7092bc"],"x":360,"y":1720,"wires":[]},{"id":"afbd4673.5e049","type":"link out","z":"1781e581.31721a","name":"","links":["177e6a72.ada5ae"],"x":365,"y":1670,"wires":[]},{"id":"c9b4cef1.46fa28","type":"link out","z":"1781e581.31721a","name":"","links":["8209bb9e.3e47a"],"x":585,"y":1670,"wires":[]},{"id":"4f16229f.83e86c","type":"link out","z":"1781e581.31721a","name":"","links":["161ffc66.196564"],"x":585,"y":1720,"wires":[]},{"id":"11932257.837916","type":"link out","z":"1781e581.31721a","name":"","links":["7a3f6d20.ee6adc"],"x":825,"y":1670,"wires":[]},{"id":"95ce3b1e.0f93b8","type":"link out","z":"1781e581.31721a","name":"","links":["9e84443f.413328"],"x":825,"y":1720,"wires":[]},{"id":"ea7d6c1f.e4e118","type":"link out","z":"1781e581.31721a","name":"","links":["1ec1e50a.666ddb"],"x":585,"y":1620,"wires":[]},{"id":"9451d6b2.cb6948","type":"link out","z":"1781e581.31721a","name":"","links":["b934ec01.a8adf8"],"x":825,"y":1620,"wires":[]},{"id":"db5e3233.c9fad","type":"link out","z":"1781e581.31721a","name":"","links":["21eebe73.5057da"],"x":825,"y":1570,"wires":[]},{"id":"9d7f3cad.d7b8f","type":"link out","z":"1781e581.31721a","name":"","links":["1ab9b028.28f328"],"x":585,"y":1570,"wires":[]},{"id":"da55f79c.415fe8","type":"link out","z":"1781e581.31721a","name":"","links":["fb43d543.5faef"],"x":585,"y":1520,"wires":[]},{"id":"988671af.8646b","type":"link out","z":"1781e581.31721a","name":"","links":["a9d0f3df.54ccd"],"x":825,"y":1520,"wires":[]},{"id":"6d970c11.6d158c","type":"link out","z":"1781e581.31721a","name":"","links":["260e6c63.8bb99c"],"x":364,"y":1520,"wires":[]},{"id":"1cf586b3.c22e71","type":"link out","z":"1781e581.31721a","name":"","links":["b1c885a8.159018"],"x":365,"y":1370,"wires":[]},{"id":"a97c8331.4a4d88","type":"link out","z":"1781e581.31721a","name":"","links":["12a841e3.f25696"],"x":365,"y":1420,"wires":[]},{"id":"6580d2cf.bea1a4","type":"link out","z":"1781e581.31721a","name":"","links":["1b9c3393.0843dc"],"x":365,"y":1470,"wires":[]},{"id":"65209bf1.63524c","type":"link out","z":"1781e581.31721a","name":"","links":["8173943f.2c6a"],"x":585,"y":1370,"wires":[]},{"id":"57e01527.528f84","type":"link out","z":"1781e581.31721a","name":"","links":["9baf35a8.7bdd78"],"x":585,"y":1420,"wires":[]},{"id":"caf00dda.129a28","type":"link out","z":"1781e581.31721a","name":"","links":["4b242414.764014"],"x":585,"y":1470,"wires":[]},{"id":"80b64ca.c7a903","type":"link out","z":"1781e581.31721a","name":"","links":["c6055e4.7791fa"],"x":825,"y":1370,"wires":[]},{"id":"4debbbe1.4993ec","type":"link out","z":"1781e581.31721a","name":"","links":["e9ca8a9c.7a84b8"],"x":825,"y":1420,"wires":[]},{"id":"ee449d92.abff6","type":"link out","z":"1781e581.31721a","name":"","links":["d7c8f004.b43d08"],"x":825,"y":1470,"wires":[]},{"id":"5d923460.8e55c4","type":"link out","z":"1781e581.31721a","name":"","links":["936a51e9.cde21"],"x":505,"y":1900,"wires":[]},{"id":"91535c08.8eb8a","type":"link out","z":"1781e581.31721a","name":"","links":["9ac1a592.01dc8"],"x":505,"y":1980,"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    .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    .remote-button.num{\n        font-weight:bold;\n        font-size:1.5em;\n    }\n\n    .remote-button.small{\n        font-size:0.7em;\n    }\n\n    .remote-icon{\n        font-size:2.0em;\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":1320,"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 num\">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":1370,"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 num\">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":1370,"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 num\">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":1370,"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 num\">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":1420,"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 num\">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":1420,"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 num\">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":1420,"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 num\">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":1470,"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 num\">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":1470,"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 num\">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":1470,"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 num\">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":1520,"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-2x 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":1520,"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-fw 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":1520,"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-fw 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":1570,"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 id=\"regular_plus\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-fw fa-volume-off 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\": \"mute\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":1570,"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-fw 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":1570,"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-fw 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":1620,"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-fw 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":1620,"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-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\": \"ch-down\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":1620,"wires":[["9451d6b2.cb6948"]]},{"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}]