Tabs, groups and help with CSS structure

[Trying_to_learn]

@hotNipi

For .RCButtons2 will not work because you can't send messages to style declaration.
If you need dynamically change the color, put some default color here, and make it dynamic in the way you did it before, inside that template where button is.

Interesting.

This is my "base" for that working:

(I hope I get all the stuff needed)

[{"id":"576062c5.31c064","type":"debug","z":"8bb4de19.f72c88","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":960,"y":1300,"wires":[]},{"id":"88edaa29.60684","type":"ui_template","z":"8bb4de19.f72c88","group":"d3bcf885.d668a","name":"6","order":12,"width":1,"height":1,"format":"<style>\n.button {/*button styles*/}\n.B{ color: red;}\n.A{ color: lime;}\n</style>\n\n<button class=\"baseline {{msg.payload}}\" ng-mousedown=\"send({payload: 'Down'})\"  \nng-mouseup=\"send({payload: 'Up'})\">Press</button>\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":790,"y":1300,"wires":[["d08b68e5.aa949","76a653ec.ae4d34","576062c5.31c064"]]},{"id":"d08b68e5.aa949","type":"trigger","z":"8bb4de19.f72c88","op1":"Down","op2":"0","op1type":"str","op2type":"str","duration":"-350","extend":false,"units":"ms","reset":"Up","bytopic":"all","name":"Repeat","x":950,"y":1350,"wires":[["28a8ab64.3a4394"]]},{"id":"76a653ec.ae4d34","type":"switch","z":"8bb4de19.f72c88","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":940,"y":1390,"wires":[[],["28a8ab64.3a4394"]]},{"id":"28a8ab64.3a4394","type":"function","z":"8bb4de19.f72c88","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":1100,"y":1350,"wires":[["af2e86ca.3546b","88edaa29.60684","a33d9067.50ce3"],["b6647fef.aa089"]]},{"id":"af2e86ca.3546b","type":"debug","z":"8bb4de19.f72c88","name":"PULSE OUTPUT","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":1300,"y":1300,"wires":[]},{"id":"a33d9067.50ce3","type":"ui_text","z":"8bb4de19.f72c88","group":"d3bcf885.d668a","order":13,"width":2,"height":1,"name":"","label":"6 : ","format":"{{msg.payload}}","layout":"row-spread","x":1260,"y":1260,"wires":[]},{"id":"b6647fef.aa089","type":"debug","z":"8bb4de19.f72c88","name":"SINGLE OUTPUT","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":1300,"y":1350,"wires":[]},{"id":"2c4eab16.b45734","type":"ui_template","z":"8bb4de19.f72c88","group":"d3bcf885.d668a","name":"Base Line","order":17,"width":1,"height":1,"format":"<style>\n/*  Best so far to fit 1x1 area  */\n.baseline {\n  border: none;\n  border-radius: 8px;\n  text-align: center;\n  background-color: black;              /*  Backfound colour */\n  color: {{msg.colour}};                /*  \"Font\" (forground) colour */\n  padding: 15px 0px;\n  text-decoration: none;\n  display: inline-block;\n  font-size: 14px;\n  margin: 0px 0px;\n  cursor: pointer;\n}\n</style>\n\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"global","x":1040,"y":150,"wires":[[]]},{"id":"d3bcf885.d668a","type":"ui_group","z":"","name":"Group 1","tab":"de5134a7.f0a0d","order":1,"disp":true,"width":"6","collapse":false},{"id":"de5134a7.f0a0d","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":4}]

Sorry it is a bit spread out.

[Trying_to_learn]

Looking in my template node at the code, I see the colour stops halfway through.

(See attached.)

Yeah, ok.

Fixed it.

(I think it is time for bed.)

23:28 local here and I've been up since .... 07:00.

That's working now. Sorry.

Tomorrow: How to get the icons working in the buttons.

[Steve-Mcl]

This is not the ideal way.

As I said waaaaay back... (Remember the story about having colors littered in code and styles and CSS and how if you need to change something it's a massive cludge?)

You make your classes based on state you are trying to achieve (e.g. success, warning, pressed, active, whatever) set up them classes with all the colours you need THEN set the buttons class accordingly.

[Trying_to_learn]

Yes Steve, I agree.... This is the practice stage.

Though wrong, I am saying colours only to reduce the number of names I need to remember at this stage. Then if I see red, I know it is going to be red.

As I move on, I will start to give them names.

Also this part is simply to blink/flash a button when it is pressed and held down.

But I do get what you say.

I got the buttons working again and all that.

The colour in the code was what @hotNipi was saying. I am not allowed to do that line and so it spat the dummy at me.

Line fixed and colour assigned.

All working.

I think bed is calling me now.

[hotNipi]

When sun is up again, take a look of this.
There is example of different buttons in ui_template. My suggestion for you is keep all the buttons (at least those you need to represent that remote control) logically similar.

[{"id":"6c79b417.1e43ac","type":"ui_template","z":"1d0f488b.6d7047","group":"634d61cd.c6a26","name":"btn + icon momentary (info)","order":3,"width":1,"height":1,"format":"<div id=\"momentary_info\">\n   <md-button class=\"md-button remote-button\">\n      <i class=\"fa fa-fw fa-info-circle remote-icon\"></i>\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('#momentary_info').on('touchstart mousedown', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_info\",\"payload\": true});\n});\n\n$('#momentary_info').on('touchend mouseup', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"momentary_info\",\"payload\": false});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":260,"y":230,"wires":[["c8aaf013.c7c55"]]},{"id":"1878ce1f.a925a2","type":"ui_template","z":"1d0f488b.6d7047","group":"634d61cd.c6a26","name":"","order":7,"width":0,"height":0,"format":"<style>\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    .remote-button{\n        background-color: black !important;\n        color: #cccccc !important;\n        height: var(--dashboard-unit-height);\n        width: 100%;\n        font-size:1.4em;\n        font-weight:bold;\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    .remote-icon{\n        font-size:1.1em;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":260,"y":60,"wires":[[]]},{"id":"c8aaf013.c7c55","type":"debug","z":"1d0f488b.6d7047","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":500,"y":210,"wires":[]},{"id":"d86a8270.48f57","type":"ui_template","z":"1d0f488b.6d7047","group":"634d61cd.c6a26","name":"regular btn (1)","order":1,"width":1,"height":1,"format":"<div id=\"regular_1\">\n   <md-button class=\"md-button remote-button\">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":270,"y":110,"wires":[["c8aaf013.c7c55"]]},{"id":"dc3e2186.c7243","type":"ui_template","z":"1d0f488b.6d7047","group":"634d61cd.c6a26","name":"btn + icon regular (plus)","order":4,"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\": \"+\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":260,"y":190,"wires":[["c8aaf013.c7c55"]]},{"id":"36c4e354.609f9c","type":"ui_template","z":"1d0f488b.6d7047","group":"634d61cd.c6a26","name":"btn + icon momentary (arrow up)","order":5,"width":1,"height":1,"format":"<div id=\"arrow_up\">\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(function($scope) {\n    \n$('#arrow_up').on('touchstart mousedown', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"arrow_up\",\"payload\": true});\n});\n\n$('#arrow_up').on('touchend mouseup', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"arrow_up\",\"payload\": false});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":260,"y":270,"wires":[["c8aaf013.c7c55"]]},{"id":"42f32299.e35eac","type":"ui_template","z":"1d0f488b.6d7047","group":"634d61cd.c6a26","name":"btn + icon momentary (arrow down)","order":6,"width":1,"height":1,"format":"<div id=\"arrow_down\">\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<script>\n(function($scope) {\n    \n$('#arrow_down').on('touchstart mousedown', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"arrow_down\",\"payload\": true});\n});\n\n$('#arrow_down').on('touchend mouseup', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"arrow_down\",\"payload\": false});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":280,"y":310,"wires":[["c8aaf013.c7c55"]]},{"id":"238c4049.1d19f","type":"ui_template","z":"1d0f488b.6d7047","group":"634d61cd.c6a26","name":"regular btn different color (X)","order":2,"width":1,"height":1,"format":"<div id=\"regular_red\">\n   <md-button class=\"md-button remote-button red\">X\n   </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_red').on('click', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"topic\":\"regular_red\",\"payload\": \"x\"});\n});\n    \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":240,"y":150,"wires":[["c8aaf013.c7c55"]]},{"id":"634d61cd.c6a26","type":"ui_group","z":"","name":"HOME","tab":"6766858b.dee74c","order":1,"disp":true,"width":3,"collapse":false},{"id":"6766858b.dee74c","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

You can't just apply tha CSS from here to your current solution cos this is prepared to only have buttons in ui_template. Which most probably means for you to start over.... sorry about that.

[Trying_to_learn]

@hotNipi

You can't just apply tha CSS from here to your current solution cos this is prepared to only have buttons in ui_template . Which most probably means for you to start over.... sorry about that.

No problems.

I've loaded the flow and am looking at it.

Just saying:
This is where I am a bit ..... annoyed with CSS.
Granted it is an overall scheme that allows me to do lots of things.

But where I am at learning, I can't (or don't seem able) to keep the things separate.
So to use this I have to disable all my other stuff. No problem. Just saying.

So there is the possible problem that things I have put in my CSS stuff will conflict with this.
(Can't say for sure, but I am guessing you used all new names, for which I am very happy and appreciative.)

But somewhere in the scheme things went south.
The buttons were sent with a 1x1 size.
On my screen they are corrupt and have sliders at the bottom and right side.
To get them half working they need to be 2x2. Actually even with 2x2 they aren't big enough.
They need to be 3x2 (left-right x height)

Again: No big. I guess there is some tweaking that will get them working.

To digress a bit.

I was thinking of what I posted last night:
I don't need a second button definition as I posted.
I added that extra bit of code - which was mentioned - and that allows me to change the text colour anyway. So that whole second button definition is not needed.

@hotNipi

My suggestion for you is keep all the buttons (at least those you need to represent that remote control) logically similar.

I fully agree with that.

I'll read the code - well: look at it. I don't know if I can actually read it, as in: make sense of it - and see what I can get from it.

Though again:
If I want to try things, it isn't that I can simply copy the node (for a backup) and try the new node.
The codes will conflict. Yes, I can disable it.... Anyway.

I'm off to read the code.

I've played with the code and got some results. But I feel I am going nowhere fast.

Things I see:
The font-awesome icons are fixed-width. Errr, why?
The Info icons is a bit small. Despite my best efforts, I can't make it bigger.

I've got control of the button height.
They are now 48 pixels high.
But they are 102 pixels wide.

Again: Despite my best efforts I can't change that.
I can't see a Width value.
I commented out the width: 100% line. nothing changed.

Anyway, I'll keep plodding along. Alas I am a blind man without a stick walking on an unknown surface that seems to be inconsistent in its feeling. But enough analogies.

Bye for now.

[hotNipi]

What sizes do you have defined

I make my settings same so I can see same results as you.
Then let's take it step by step and be concentrated.

First task - make button sizes correct.

[Trying_to_learn]

Well, I don't think I changed anything.

This is what I see.

On one of my early machines I changed the size and got in to a whole lot of problems with dashboards, etc. So I reset it to the defaults.

But by the time I got this machine, I left them alone.

[hotNipi]

Does the template size for this button is meant to be 1x1 units? (in dashboard it makes 48px x 48px )

[Trying_to_learn]

The buttons I want to make (for this project) are 1 x 1. Using..... devtools ?? the buttons show 48 x 48

And this is what I have done to the main template code you posted.

<style>
/*    :root {
      --dashboard-unit-width: 48px;
      --dashboard-unit-height: 48px;
    }  */
    .nr-dashboard-template {
        padding: 0px 0px;
    }
    .remote-button:not([disabled]):hover{
         background-color: #232323 !important; /*  This is the colour it becomes when you hover the mouse*/
    }
    .remote-button{
        background-color: black !important;
        color: #cccccc !important;
        height: 48;
        width: 48;
        /*width: 100%;*/
        font-size:14px;  /*  was 1.4em */
        /*font-weight:bold;  */
    }
    .remote-button.red{
        background-color: red !important;
        color: #cccccc !important;
    }
    .remote-button.red:not([disabled]):hover{
         background-color: orange !important;
    }
    .remote-icon{
        font-size:14px;     /*  font-size:1.1em;  */
    }
</style>

That got the 48 (height) working better.

If it was what you posted, I had sliders around all buttons because the were too big.

This is what they look like - bigger picture.

The first one is 2 x 1. the rest are 2 x 2.

[hotNipi]

This is what it should look.
Can you please put everything back as it was and then lets keep stepping slowly...
Then,
To be sure - please close that browser tab where dashboard is, try to redeploy, and then open the browser tab with dashboard again.

That done, just show the result.

[Trying_to_learn]

(This is kind of why I don't like CSS.)

Ok, I reset (or more so set) the values to what you show.

Even did a node-red-restart command from the CLI.

I also had to get your original code and re-import it.

I disabled the tab with the code I hacked and opened a new tab in a different browser to be even more sure about caching. Chromium.

Imported, deployed and looked at the graphics/dashboard.

Oh, and from ...... devtools....

[hotNipi]

OK.
To be sure, one by one, make sure that the all the buttons are 1x1

[Trying_to_learn]

Yes, I did that when I saw the size. (Oh ^&^&! Wrong size.)

Sorry.

I flicked back and it is your code - raw. No edits.

Also - remember - I restarted node-red after changing the sizes to make extra sure.
That can't have hurt - could it?

[hotNipi]

Slightly modified but still same, please replace with this and lets then dig into browser dev tools

<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%;
        font-size:1.0em;
        font-weight:bold;
    }
    .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>

Show me how this part looks like. (must contain whole <head> tag)

[Trying_to_learn]

You may need to qualify where this new code is put. Sorry.

Knowing me I would put it in the wrong place.

[hotNipi]

Sorry for hand shake

[Trying_to_learn]

Sorright.

Ok, done.

Yet again, you may have to show me where on the screen I put my mouse to get that output.

Randomly placing it on parts of the screen is not really working.

[hotNipi]

Elements tab and scroll to top, then you see the <head> tag beginning and somewere it ends </head>

[Trying_to_learn]

This?

I think it would be better if there is/was a way to paste stuff like in Node-Red.
Anyway.

But this may not be helping....