Help with (yet another) button

[Trying_to_learn]

Yesterday @bakman2 helped me no end with a button and getting the colours working as I wanted.

New day, new button.

This is what I have in the template node:

<button ng-mousedown="send({payload: 'Down'})" ng-mouseup="send({payload: 'Up'})"> <i class="material-icons"> <span style="color:{{msg.colour}}"> volume_up </i> </button>

Alas this gives me a button with a white background.

I would prefer it to be black. (Match the theme I am using.)
But even via the {msg} would be ok. That allows me more options.
Though I think if you post the code with a fixed colour, I can nut it out.

Just for the fun of it, here is a bit of flow which flashes the button when pressed.

This is the flow.

[{"id":"bc5aa5c4.52161","type":"ui_template","z":"1781e581.31721a","group":"8418af9a.bbc66","name":"V Up","order":1,"width":2,"height":1,"format":"<button ng-mousedown=\"send({payload: 'Down'})\" ng-mouseup=\"send({payload: 'Up'})\"> <i class=\"material-icons\"> <span style=\"color:{{msg.colour}}\"> volume_up </i> </button>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":3640,"y":680,"wires":[["6b7607e4.7d79c","15a715e3.e0c4fa","b51e2b02.46d418"]]},{"id":"6b7607e4.7d79c","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":3860,"y":720,"wires":[[],["36fcedb1.36a5e2"]]},{"id":"b51e2b02.46d418","type":"trigger","z":"1781e581.31721a","op1":"Down","op2":"0","op1type":"str","op2type":"str","duration":"-140","extend":false,"units":"ms","reset":"Up","bytopic":"all","name":"Repeat","x":3870,"y":680,"wires":[["36fcedb1.36a5e2"]]},{"id":"36fcedb1.36a5e2","type":"function","z":"1781e581.31721a","name":"toggle","func":"var x = context.get(\"counter\") || 0;\nif (msg.payload == \"Up\")\n{\n    context.set(\"counter\",0);\n    msg.colour = \"black\";\n    msg.payload = \"black\";\n    return msg;\n}\n\nif (x === 0)\n{\n    msg.colour = \"lime\";\n    msg.payload = \"lime\";\n} else\nif (x === 1)\n{\n    msg.colour = \"black\";\n    msg.payload = \"black\";\n}\n\nx = (x + 1) % 2;\n\ncontext.set(\"counter\",x);\n\nreturn msg;","outputs":1,"noerr":0,"x":4020,"y":720,"wires":[["4732f533.e29164","bc5aa5c4.52161"]]},{"id":"4732f533.e29164","type":"debug","z":"1781e581.31721a","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":4160,"y":720,"wires":[]},{"id":"8418af9a.bbc66","type":"ui_group","z":"","name":"Group 4","tab":"b128eb09.9f681","order":5,"disp":true,"width":"4","collapse":false},{"id":"b128eb09.9f681","type":"ui_tab","z":"","name":"TV_Remote_control","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

[afelix]

Looking at the code for the button, I’m reminded of an older topic where we discussed this. I think I compared HTML syntax to those Russian nesting dolls in it. That is exactly what is going on here too. Each opening tag has to be closed again too. This is part of what is known as the box model. Visualising it below, your button should look like this:

button
    i
        span
             Text
        /span
    /i
/button

Looking at your snippet above, the closing span is missing, and as described last year, the order is important too. Try inserting the </span> at the right place and see if that solves it.

[Trying_to_learn]

I am not smart enough to know how to do that in the template node on one line.

I get how to do that with another type of button, but that type of button doesn't allow a button down and button up message.

I try to split the code to multiple lines and I seem to be unable to find the right place to split it.

I'll look at what you said but won't promise anything.
Ok, I think I got that </span> bit working.
(and actually got it split to multiple lines.)

But I still don't get/see where to put the background-color part.

In other buttons it is like this:

<md-button class="vibrate filled touched bigfont rounded" style="background-color:#000000" ng-click="send({payload: 'dummy_payload'})">
       <i class="material-icons">
           <span style="color:{{msg.payload.pause}}">pause</span> / <span style="color:{{msg.payload.play}}">play_arrow</span>
           </i>
</md-button>

But that is (to me) a whole different horse.

[Trying_to_learn]

(either through sheer stupidity or stuborness - you pick.)

Progress has been made.

But let's not get too far ahead of ourselves.

This is what I have now:

That is the GUIside of things.

This is the code:

<button ng-mousedown="send({payload: 'Down'})" ng-mouseup="send({payload: 'Up'})">
    <i class="material-icons"> 
        <span style="color:{{msg.colour}}"> volume_up 
        </span>
    </i> 
</button>

Ok.

The structure is getting there.

I then change the code in the node to this:

<button ng-mousedown="send({payload: 'Down'})" ng-mouseup="send({payload: 'Up'})" style="background-color:black">
    <i class="material-icons"> 
        <span style="color:{{msg.colour}}"> volume_up 
        </span>
    </i> 
</button>

And this is what I get GUI wise:

A smaller button.

I really am not seeing how adding that bit of text changes the size of the button.
I would accept if I put in something like scale or button_size (or what ever).

But I merely put in the colour of the background.

Nah, I am really not getting this.

[hotNipi]

md-button and button are very different things.
You should use one of them to be consistent over your dashboard. Otherwise the mess is too much to handle.

[Trying_to_learn]

How I would love to @hotNipi.

How I would love to.

I just scratch through using what meets the needs at the time.

Alas I have used both.

Why?

Dunno.

I think it started with basic needs.
The button node wasn't cutting the mustard much any more and I needed one which sends a message when pressed and released.

So though that is only one, the other will have snuck (sneeked) in there some how.

So, I am re-constructing a lot of flows, I am trying to use only one kind, but again: the gremlins get in and all bets are off.

Also the buttons resizing themselves makes it fun too.
I am not getting where that is happening, or how.

I am making a display with a lot of buttons and I would like/prefer them all to be on the same team - as it were.

So I am crawling through the ones I have and (partly) know how to use trying to get things to work.

This may not be a good way, or best way to do it. Alas it is the only way I know.

I am trying. But it is just so confusing. Studying all the stuff I need to know would take months (years?) to learn.

Though I get that, I am wanting to keep myself interested and doing something of some enjoyment.

I never (ever ever) thought I would be able to do what I am doing today/now. Even if it is not good.

I'm not trying to make excuses, I'm just saying how it is.

(Thanks though)

[afelix]

“md” in md-button stands for Material Design. It’s a style designed and implemented throughout most of the dashboard by default. In practice, it’s a fully styled button, where <button> is just a plain html button without any styling unless you add to it. The css class “material-icons” too is a set of icons within the Material Design look and feel. By changing the background colour through the style attribute, you’re overriding parts of other set styles. This occasionally works good when the rest of the button matches the full styling (md) but with a regular button most of that material design preset styling is missing hence the difference in look. As Nipi says, pick one and stick with it everywhere. If you don’t, issues like these will start and they’re a mess to get rid off in styling. By far the easiest way to fix is by using one button/style type everywhere.

[hotNipi]

@Trying_to_learn

I am making a display with a lot of buttons and I would like/prefer them all to be on the same team - as it were.

That is the route you should follow. For me this is the rule with no compromises.

Where I can make compromises is if chosen component does not allow certain customizing. And there is another rule then. "Keep it simple". The more you try to go away from standards, the more you'll lose from some other areas. (readability, usability, beauty, whatever)

Overall, the thing you are dealing with is art. (mixed with programming). CSS is art and to get good result in art, it takes time. Usually a lot of time.

[Trying_to_learn]

Thanks both.

The problem is that I am not yet confident enough to know which of the buttons I want.

Granted the default button is a no-go. It doesn't have enough flexibility for me to use it in all cases.

The thing is way back when I started, a button was a button. I pressed it and all was good in the world.

It does have a nice feature when you enable it or not. That was a great discovery late in the game.

Then came another one with the template node.
I'm not sure which was used first; but probably just the simple one, but allowed a bit more customisation.
Then (maybe) came the message on press and message on release came.
Those last two are different.
And each has its own set of things it offers.
I don't know if there is a good comparison between the two types, so I can sit and compare them.

Until then, I am not sure which will be a longer term better button for me.
I don't know if the latter two offer the enable feature which the default button does offer.
So, really it is (maybe) still in the game.

Doing a retrospective conversion of old files with button x to button y is a lot of work, and I am not sure I am confident enough to do it successfully.

What could be good is having a bigger list of what all three offer and how to use them.
CSS is still foreign to me. HTML is just as foreign.
I know it is a cop out, but I think if I had a structure table, I could make good with that and get the best use of the button I need and use.