# Tabs, groups and help with CSS structure

**URL:** <https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178>\
**Category:** Dashboard\
**Created:** [20 April 2020 08:39 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178 "2020-04-20T08:39:11Z")\
**Posts on this page:** 20\
**Page:** 8

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [24 April 2020 13:31 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/141 "2020-04-24T13:31:23Z")

</div>

If you explore any of buttons where icon is placed

```auto
<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

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [24 April 2020 13:31 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/142 "2020-04-24T13:31:34Z")

</div>

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

This is in the `template` node: (extract)

```auto
        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;

```

> [@hotNipi](#):
>
> ```auto
> <i class="fa fa-fw fa-plus remote-icon"></i>
> 
> ```
> 
> And if you do this:
> 
> ```auto
> .remote-icon{
> font-size:1.8em;
> }
> 
> ```
> 
> The icons must change size. All of them

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

I'll wait for you to post.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [24 April 2020 13:35 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/143 "2020-04-24T13:35:04Z")

</div>

> [@hotNipi](#):
>
> If you explore any of buttons where icon is placed
> 
> ```auto
> <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

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.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [24 April 2020 13:42 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/144 "2020-04-24T13:42:32Z")

</div>

Where ever the element has

```auto
class=

```

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

So we read the element

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

```

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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [24 April 2020 13:46 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/145 "2020-04-24T13:46:04Z")

</div>

Ok.

While you were replying, I think I got that.

And I think I _fell into the trap_ the code:

```auto
    .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:

```auto
    .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?

```auto
<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:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [24 April 2020 13:50 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/146 "2020-04-24T13:50:01Z")

</div>

You have

```auto
.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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [24 April 2020 13:55 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/147 "2020-04-24T13:55:32Z")

</div>

Yes, thanks.

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

It is coming on great.

This is the latest screen picture.

 ![Screenshot from 2020-04-24 23-51-57](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/b/0bbc197ab261ba651d87189aaf95935eceea4ffd.png)

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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [24 April 2020 13:59 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/148 "2020-04-24T13:59:11Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [24 April 2020 14:00 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/149 "2020-04-24T14:00:47Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [24 April 2020 14:04 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/150 "2020-04-24T14:04:25Z")

</div>

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_.

> [@hotNipi](#):
>
> For text buttons.

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.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [24 April 2020 14:08 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/151 "2020-04-24T14:08:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [24 April 2020 14:10 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/152 "2020-04-24T14:10:51Z")

</div>

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

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

```

But it would be something like:

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

```

80% of original size?

Yes?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [24 April 2020 14:11 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/153 "2020-04-24T14:11:32Z")

</div>

Very good!  
Now add it to the buttons where needed

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [24 April 2020 14:12 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/154 "2020-04-24T14:12:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [24 April 2020 14:19 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/155 "2020-04-24T14:19:37Z")

</div>

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.

 ![Screenshot from 2020-04-25 00-15-04](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/3/83cc94f4469346f7a9d9f7f3189c94af96c38d8b.png)

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.  
😉

I just did the `home` button.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [24 April 2020 14:22 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/156 "2020-04-24T14:22:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [24 April 2020 14:26 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/157 "2020-04-24T14:26:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [24 April 2020 14:28 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/158 "2020-04-24T14:28:55Z")

</div>

(Done `guide`)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [24 April 2020 14:30 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/159 "2020-04-24T14:30:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [24 April 2020 14:31 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/160 "2020-04-24T14:31:57Z")

</div>

Here it is.

(Sorry)

And the picture of what is left to do.

![Screenshot from 2020-04-25 00-29-35](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/5/652ef4d6748b312aff3a551f2e958a5ba85a3421.png)

```auto
[{"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}]

```

[Previous page](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178.md?page=7)

[Next page](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178.md?page=9)