CSS School, buttons and things not making sense

Yes, I get the cascading. For now I don't want them to cascade. Or I think I don't.

I messed around for a long time to get the volume one and I am happy.
Problem: I can't set a payload to be sent when I click it. Work in progress.

The oXo is a template node which is the right size/shape.
Again: I can't/don't get a payload when pressed.
I added the extra (group 3) but when I do that, the button's size and shape change.

So I am getting very frustrated that Group2 size/shape is as wanted.
(Save nothing happens when I click)
So I add the extra line (but refer it to the copy and it is in Group3, but it all gets messed up.

I am seriously at a loss to what is happening.

Does that help with what I am doing and why?

AARRGGHH!!!!

Ok..... Got ya!

I'll dig a bit more.

I got the pre-fixes and appendages mixed up.

SILLY ME!

But I still am not getting anything when I click on the button.

Quick addition that I hope might help for styling.
Defining a style for

button {
    //sample
    background-color: “black”;
}

will apply the style to all <button>s on the page.

.button {
    //sample
    background-color: “yellow”;
}

Will instead set the style only for elements with the button class, but since that name is just a choice for yourself it doesn’t have to apply to just buttons. Instead that styling is placed on all elements thar you give the class="button" to.

#thisSpecificButton {
    //sample
    background-color: “red”;
}

This style will only apply to elements with the ID set to “thisSpecificButton”. You’re only supposed to use an ID once on a page. It won’t give an error if you don't (sadly) but it might give you a whole pile of other crap to deal with.

In summary, styling a tag (button) will apply the style to all elements with that tag on a page, styling a class (.button) will apply the style to all elements with that class, styling an if (#thisSpecificButton) will apply the style to all elements with that id (which should be one at most).

———
As for sending the payload, that’s an angular attribute you’ve to add/set, done through the ng-click="send({foo: 'bar'})" structure. If you don’t add that, nothing will be send back to the output of the node.

This thread makes interesting CSS reading...
Don't know if you have seen it Andrew.

1 Like

Ummmmm.

{foo:'bar'} as in {payload: 'something'}?

This is what I now have in the template node:

<style>
/*  Best so far to fit 1x1 area  */
.buttonX {
  border: none;
  border-radius: 8px;
  text-align: center;
/*  background-color: #097479;  */  /* Green */
  background-color: black;
  color: white;                 /*  "Font" colour */
  padding: 15px 0px;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 0px 0px;              /* Was 0 20 */
  cursor: pointer;
}
</style>
<button class="buttonX" click="send({topic:'clicked', payload:'button was clicked'})">x-x</button>

(Putting aside the click part just now)
This is what I see:

Screenshot from 2020-04-19 07-52-51

Wow! It works.

Now to the real hard stuff.

Using fa-icons.

They introduce more problems - as I seem to remember.

Thanks Paul.

Yeah, a whole new world in which I can play - or make a big mess.

1 Like

Ok, this is what I have now that sends two messages. (Down and Up)

<style>
/*  Best so far to fit 1x1 area  */
.buttonY {
  border: none;
  border-radius: 8px;
  text-align: center;
/*  background-color: #097479;  */  /* Green */
  background-color: black;
  color: white;                 /*  "Font" colour */
  padding: 15px 0px;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 0px 0px;              /* Was 0 20 */
  cursor: pointer;
}
</style>
<button class="buttonY" ng-mousedown="send({payload: 'Down'})"  ng-mouseup="send({payload: 'Up'})">y-y</button>

I now have the two templates working.
The only problem is that the buttons look like text boxes rather than buttons when I put the mouse over them. (Needs a bit of work)

It may be good to de-activate the others to avoid confusion at this time and ultimately delete them.

I'm keeping them for now so I can see what to NOT do. :wink:

And trying to get the font-awesome icons working too.

I'm trying to understand your code and the colors of the buttons. If you would help me out and post your working code here it would sure help me out.
Thanks

Ok, but first an overview of what I am wanting:

I want a universal button which I can use to:
a - send a message when pressed.
b - be able to send a pulse of messages (alternating is ok) while pressed and stop when button released.
c - support icons rather than only text.
d - be disabled, like the normal button node.
e - External setting of text, messages sent, colours and frequency of pulses.

This is a really good piece of code I have but it is still work in progress as I am still not getting everything.

But for now, it is pretty good, considering what I know.

[{"id":"1af2f09d.78ede7","type":"trigger","z":"b25fd092.bcc758","op1":"Down","op2":"0","op1type":"str","op2type":"str","duration":"-350","extend":false,"units":"ms","reset":"Up","bytopic":"all","name":"Repeat","x":350,"y":2220,"wires":[["a623b9cd.ea0d1"]]},{"id":"dae7b752.80137","type":"ui_template","z":"b25fd092.bcc758","group":"d9a63921.b84ff","name":"Best so far xYx","order":8,"width":"1","height":"1","format":"<style>\n/*  Best so far to fit 1x1 area  */\n.buttonZ {\n  border: none;\n  border-radius: 8px;\n  text-align: center;\n/*  background-color: #097479;  */  /* Green */\n  background-color: black;\n  color: {{msg.colour}};                 /*  \"Font\" colour */\n  padding: 15px 0px;\n  text-decoration: none;\n  display: inline-block;\n  font-size: 14px;\n  margin: 0px 0px;              /* Was 0 20 */\n  cursor: pointer;\n}\n</style>\n<button class=\"buttonZ\" ng-mousedown=\"send({payload: 'Down'})\"  ng-mouseup=\"send({payload: 'Up'})\">Press</button>\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":180,"y":2220,"wires":[["fefe68c5.d7552","1af2f09d.78ede7","f2874f3.7e158b"]]},{"id":"a623b9cd.ea0d1","type":"function","z":"b25fd092.bcc758","name":"toggle","func":"let msg1 = {};\nlet msg2 = {};\n\nvar x = context.get(\"counter\") || 0;\nvar y = context.get(\"triggered\") || 0;\nif (msg.payload == \"Up\")\n{\n    context.set(\"counter\",0);\n    msg.payload = \"A\";\n    msg1.payload = \"RELEASED\";\n    context.set(\"triggered\",0);\n    msg2.colour = \"lime\";\n    return [msg,msg1,msg2];\n}\n\nif (x === 0)\n{\n    msg.payload = \"B\";\n    y = y + 1;\n    if (y === 1)\n    {\n        msg1.payload = \"PRESSED\";\n        context.se(\"triggered\",y);\n    }\n    msg2.colour = \"red\";\n} else\nif (x === 1)\n{\n    msg.payload = \"A\";\n    msg2.colour = \"lime\";\n}\n\nx = (x + 1) % 2;\n\ncontext.set(\"counter\",x);\n\n\n\nreturn [msg,null,msg2];","outputs":3,"noerr":0,"x":510,"y":2220,"wires":[["ceef713f.f81548"],["5a077180.9f9b3"],["dae7b752.80137"]]},{"id":"fefe68c5.d7552","type":"debug","z":"b25fd092.bcc758","name":"Internal","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":350,"y":2180,"wires":[]},{"id":"f2874f3.7e158b","type":"switch","z":"b25fd092.bcc758","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":340,"y":2260,"wires":[[],["a623b9cd.ea0d1"]]},{"id":"a3f2c8e1.068f48","type":"change","z":"b25fd092.bcc758","name":"Set","rules":[{"t":"move","p":"payload","pt":"msg","to":"colour","tot":"msg"},{"t":"set","p":"text","pt":"msg","to":"This","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":150,"y":2180,"wires":[["dae7b752.80137"]]},{"id":"ceef713f.f81548","type":"debug","z":"b25fd092.bcc758","name":"OUTPUT1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":530,"y":2180,"wires":[]},{"id":"5a077180.9f9b3","type":"debug","z":"b25fd092.bcc758","name":"OUTPUT2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":530,"y":2260,"wires":[]},{"id":"7204f82c.81f198","type":"inject","z":"b25fd092.bcc758","name":"Setup","topic":"","payload":"lime","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":150,"y":2140,"wires":[["a3f2c8e1.068f48"]]},{"id":"d9a63921.b84ff","type":"ui_group","z":"","name":"Group 3","tab":"273de47d.2d2bac","order":3,"disp":true,"width":"7","collapse":false},{"id":"273de47d.2d2bac","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","disabled":false,"hidden":false}]

Load the code, deploy and press the setup button.
Then go to the graphics side and press the button.
See what happens. (It blinks.)
But now I am stuck with getting the font-awesome icon to work, the disabled part, the single message part....

A fair way to yet go.

I got one button to sorta work so in the interest of playing nice here is the flow

[{"id":"2e26aefc.06bed2","type":"ui_template","z":"62fea0ca.1bbe38","group":"90597d23.2423b8","name":"creme rounded mybutton01","order":33,"width":3,"height":"2","format":"\n<style>\n/*  Best so far to fit 1x1 area  */\n.myButton11 {\n\tbox-shadow: 0px 1px 0px 0px #1c1b18;\n\tbackground:#eae0c2;\n\tbackground-color:#eae0c2;\n\tborder-radius:15px;\n\tborder:2px solid #333029;\n\tdisplay:inline-block;\n\tcursor:pointer;\n\tcolor:#505739;\n\tfont-family:Arial;\n\tfont-size:14px;\n\tfont-weight:bold;\n\tpadding:12px 16px;\n\ttext-decoration:none;\n\ttext-shadow:0px 1px 0px #ffffff;\n}\n.myButton11:hover {\n\tbackground:linear-gradient(to bottom, #ccc2a6 5%, #eae0c2 100%);\n\tbackground-color:#ccc2a6;\n}\n.myButton11:active {\n\tposition:relative;\n\ttop:1px;\n}\n</style>\n<button class= \"myButton11\" ng-click=\"send({topic:'test old', payload:'button 11'})\" ng-mousedown=\"send({payload: 'Down'})\"  ng-mouseup=\"send({payload: 'Up'})\">Pirate</button>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":700,"y":240,"wires":[["a9ed7e0c.03f8d8"]]},{"id":"90597d23.2423b8","type":"ui_group","z":"","name":"Therm CSS","tab":"51ac6908.5837f8","order":1,"disp":false,"width":"6","collapse":false},{"id":"51ac6908.5837f8","type":"ui_tab","z":"","name":"Therm Test","icon":"fa-thermometer","order":1,"disabled":false,"hidden":false}]

This is the next step I have done:

(Little change, but better explained with nodes.)

[{"id":"38cd517d.0fb536","type":"ui_template","z":"b25fd092.bcc758","group":"d9a63921.b84ff","name":"Best so far xYx","order":8,"width":"1","height":"1","format":"<style>\n/*  Best so far to fit 1x1 area  */\n.buttonZ {\n  border: none;\n  border-radius: 8px;\n  text-align: center;\n/*  background-color: #097479;  */  /* Green */\n  background-color: black;\n  color: {{msg.colour}};                 /*  \"Font\" colour */\n  padding: 15px 0px;\n  text-decoration: none;\n  display: inline-block;\n  font-size: 14px;\n  margin: 0px 0px;              /* Was 0 20 */\n  cursor: pointer;\n}\n</style>\n<button class=\"buttonZ\" ng-mousedown=\"send({payload: 'Down'})\"  ng-mouseup=\"send({payload: 'Up'})\">Press</button>\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":190,"y":2250,"wires":[["e96092a8.e8144","e13c2e4a.46e068","8c2a542f.45926"]]},{"id":"e96092a8.e8144","type":"debug","z":"b25fd092.bcc758","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":370,"y":2210,"wires":[]},{"id":"eec9803d.fe293","type":"inject","z":"b25fd092.bcc758","name":"Setup","topic":"","payload":"lime","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":160,"y":2170,"wires":[["ce623893.6bdb08"]]},{"id":"ce623893.6bdb08","type":"change","z":"b25fd092.bcc758","name":"Set","rules":[{"t":"move","p":"payload","pt":"msg","to":"colour","tot":"msg"},{"t":"set","p":"text","pt":"msg","to":"This","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":160,"y":2210,"wires":[["38cd517d.0fb536"]]},{"id":"e13c2e4a.46e068","type":"trigger","z":"b25fd092.bcc758","op1":"Down","op2":"0","op1type":"str","op2type":"str","duration":"-350","extend":false,"units":"ms","reset":"Up","bytopic":"all","name":"Repeat","x":360,"y":2250,"wires":[["59a76ffd.36cbe8"]]},{"id":"59a76ffd.36cbe8","type":"function","z":"b25fd092.bcc758","name":"toggle","func":"let msg1 = {};\n\nvar x = context.get(\"counter\") || 0;\nif (msg.payload == \"Up\")\n{\n    context.set(\"counter\",0);\n    msg1.colour = \"lime\";\n    msg.payload = \"A\";\n    return [msg,msg1];\n}\n\nif (x === 0)\n{\n    msg1.colour = \"red\";\n    msg.payload = \"B\";\n} else\nif (x === 1)\n{\n    msg1.colour = \"lime\";\n    msg.payload = \"A\";\n}\n\nx = (x + 1) % 2;\n\ncontext.set(\"counter\",x);\n\nreturn [msg,msg1];","outputs":2,"noerr":0,"x":540,"y":2250,"wires":[["e83c2a45.e115f8"],["38cd517d.0fb536"]]},{"id":"8c2a542f.45926","type":"switch","z":"b25fd092.bcc758","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":350,"y":2290,"wires":[["d40d3833.9b044"],["59a76ffd.36cbe8","963bdf65.68597"]]},{"id":"2aff6364.caae34","type":"comment","z":"b25fd092.bcc758","name":"Blinky button.","info":"","x":360,"y":2170,"wires":[]},{"id":"e83c2a45.e115f8","type":"function","z":"b25fd092.bcc758","name":"TOGGLE OUTPUT","func":"\nreturn msg;","outputs":1,"noerr":0,"x":700,"y":2230,"wires":[[]]},{"id":"d40d3833.9b044","type":"function","z":"b25fd092.bcc758","name":"BUTTON PRESSED","func":"\nreturn msg;","outputs":1,"noerr":0,"x":710,"y":2270,"wires":[[]]},{"id":"963bdf65.68597","type":"function","z":"b25fd092.bcc758","name":"BUTTON RELEASED","func":"\nreturn msg;","outputs":1,"noerr":0,"x":710,"y":2310,"wires":[[]]},{"id":"d9a63921.b84ff","type":"ui_group","z":"","name":"Group 3","tab":"273de47d.2d2bac","order":3,"disp":true,"width":"7","collapse":false},{"id":"273de47d.2d2bac","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","disabled":false,"hidden":false}]

Next paragraph:

Inline CSS - stuck.

(w3school account still locked - sorry)

Ok, I get that the code needs to be inside the <style> part of the line.

eg:
<h1 style="color:blue"> This paragraph will be blue </p> </body>
(Or I hope that is correct.

But now I am getting stuck when the lines become l l l l l o o o o o o o n n n n n n n g g g g g g g e e e e e e r r r r r r r r and longer.

I know there is a horizontal scroll, but it is difficult for me to parse at this stage.

I guess there isn't a way to split the line into multiple lines?

I've tried to get the next level of the CASCADING part working, but am (again) stuck

Code:
(This is for the whole page - as it were.)

[{"id":"2c4eab16.b45734","type":"ui_template","z":"8bb4de19.f72c88","group":"d3bcf885.d668a","name":"Base Line","order":8,"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":"local","x":640,"y":150,"wires":[[]]},{"id":"474463e0.9fa954","type":"inject","z":"8bb4de19.f72c88","name":"Setup","topic":"","payload":"lime","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":150,"wires":[["c2f01962.ad363"]]},{"id":"c2f01962.ad363","type":"change","z":"8bb4de19.f72c88","name":"Set","rules":[{"t":"move","p":"payload","pt":"msg","to":"colour","tot":"msg"},{"t":"set","p":"text","pt":"msg","to":"This","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":450,"y":150,"wires":[["2c4eab16.b45734"]]},{"id":"d3bcf885.d668a","type":"ui_group","name":"Group 1","tab":"de5134a7.f0a0d","order":1,"disp":true,"width":6},{"id":"de5134a7.f0a0d","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":6}]

So it sets green text and back background.

This is the code for the button.

[{"id":"e4b5eb8.2799498","type":"debug","z":"8bb4de19.f72c88","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":560,"y":380,"wires":[]},{"id":"193c7b50.6968d5","type":"ui_template","z":"8bb4de19.f72c88","group":"d3bcf885.d668a","name":"","order":1,"width":"1","height":"1","format":"<button class=\"baseline\" ng-mousedown=\"send({payload: 'Down'})\"  ng-mouseup=\"send({payload: 'Up'})\">Press</button>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":400,"y":380,"wires":[["ffa80d13.3b74e","96e75956.1e94a","e4b5eb8.2799498"]]},{"id":"ffa80d13.3b74e","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":550,"y":420,"wires":[["e1481326.12a3a8"]]},{"id":"96e75956.1e94a","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":540,"y":460,"wires":[[],["e1481326.12a3a8"]]},{"id":"e1481326.12a3a8","type":"function","z":"8bb4de19.f72c88","name":"toggle","func":"let msg1 = {};\n\nvar x = context.get(\"counter\") || 0;\nif (msg.payload == \"Up\")\n{\n    context.set(\"counter\",0);\n    msg1.colour = \"lime\";\n    msg.payload = \"A\";\n    return [msg,msg1];\n}\n\nif (x === 0)\n{\n    msg1.colour = \"red\";\n    msg.payload = \"B\";\n} else\nif (x === 1)\n{\n    msg1.colour = \"lime\";\n    msg.payload = \"A\";\n}\n\nx = (x + 1) % 2;\n\ncontext.set(\"counter\",x);\n\nreturn [msg,msg1];","outputs":2,"noerr":0,"x":730,"y":420,"wires":[[],["193c7b50.6968d5"]]},{"id":"d3bcf885.d668a","type":"ui_group","name":"Group 1","tab":"de5134a7.f0a0d","order":1,"disp":true,"width":6},{"id":"de5134a7.f0a0d","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":6}]

They are not connected.
So: obviously it doesn't work because the feedback needs to go to the first part of the code.
That isn't practical as I don't want all buttons flashing (blinking) when I press (and hold) one.

So I it is wired up correctly for the needs, but getting the second part to accept the input is where I am (now) stuck.

I'm guessing I need to use the inline coding to do that. But.... How?

As I said: inline needs to be contained in the style part.
There is no style part in the second part.
So, (semi-rhetorical) do I just wrap that line in a <style> bracket?

Inside the <style></style> tags must only be CSS (e.g. .myClass{}

Html and CSS do not need to be on one line. Anything inside quotes (like the click="send(...)" ) Should be on one line

EDIT...
I miss read - you are referring to a style attribute inside a html element (even though you wrote "<style>" which is not inline)

So, why can't you make a CSS class instead? Why do you have soo many style properties that cause you to have such long lines?

When you get back into your CSS class, perhaps you read about multiple classes. Then you'll figure out you can do things like this...

<button class="rounded red large">click me I'm big red and rounded<button>

<button class="rounded blue small">click me I'm a small blue button<button>

Just to declare what I am doing and why:
baseline is the name for the page layout/style?
and in subsequent (lower down) nodes, the buttons will be made from it's definitions.
baseline is a working title until I get a better handle on how things are working.

(Forgiving the spelling mistake)

Yeah. Ok.

I have edited the code in the lower (second) template node like this:

<style>

<button class="baseline" ng-mousedown="send({payload: 'Down'})"  
ng-mouseup="send({payload: 'Up'})">Press</button>

</style>

and so I need to use {msg.colour} to become what was defined higher up by color: in the other template node.

There is is clearly (well: maybe still not that clear to me) in the line:
color: {{msg.colour}}; /* "Font" (forground) colour */

I'm stuck.

Oh, but what I did see/notice:
If I leave the (template) node as shown and deploy, I don't see a thing.
Yeah, because I haven't declared any <style>.
But as it is inline and not defined, shouldn't it default to the higher order's values?

That's where the cascading part comes in - yes?

Yeah, I need taking out the back and shooting for not getting this. But this is really a whole new world for me.

UPDATE:

Ok, modified the code in the template node to:

<style>
.baseline{ color: {{msg.colour}};}

</style>

<button class="baseline" ng-mousedown="send({payload: 'Down'})"  
ng-mouseup="send({payload: 'Up'})">Press</button>

Which is probably better.

I see the button. But still no colour change when button pressed.

That's not really how you should be doing it.

<style>
.button {/*button styles*/}
.inactive{ color: grey;}
.active{ color: blue;}
</style>

<button class="button {{msg.state}}" ng-mousedown="send({payload: 'Down'})"  
ng-mouseup="send({payload: 'Up'})">Press</button>

... then send what state you want the button via msg.state ("active" or "inactive" in this example).

I'm not saying it'll work straight away (I don't know how the ui_template reacts to messages) BUT the idea is you setup all your CSS styles and apply classes to you elements (either statically or dynamically) - no messing about with parts of the CSS or styles. Just set the classes.

Then you can move away from worrying about changing colours in your code - you just edit the CSS & EVERYTHING CONTINUES TO WORK

Didn't someone give you a sample of controlling the classes a couple of days back? The thread that started you off down this rabbit hole)

I do appreciate the reply.

But I get derailed because:
you open the <style> and have an .inactive and .active line. Ok. I'll let that ride for now.

But then you have: "button {{msg.state}}"

Where is the association between {{msg.state}} and .active/.inactve?

I'm stuck (for now) on the colours. (foreground)

I'm looking at the w3school stuff again, and though I can get it, I am (for reasons unknown to me) there is no continuity.

So I tried that - slight modifications - and it doesn't work.

<style>
.button{}
.red{color:red;
.lime{color:lime};
</style>

<button class="button {{msg.colour}}" ng-mousedown="send({payload: 'Down'})"  
ng-mouseup="send({payload: 'Up'})">Press</button>

And the GUI side of things gets messed up from (green) to (red)

Screenshot from 2020-04-19 11-23-22

Ignore the text. That is a visual indication to me the output is cycling.

The new button does blink/flash. But not the colours I want.
It only flashes red and grey colours.

Sorry Paul. Steve.

I'm not trying to be difficult.

I just somehow am not seeing things as others.
See?

It seems I can only have 1 part of the many parts working at once.

Ah!

Ok.

Kinda get it.

So, in your example the message received by the template node is either:
msg.state = active or msg.state = inactive.

With you.

So I changed all that to msg.colour and was sending:
msg.colour = red or msg.colour = lime
with the two lines above being changed as I showed.

<style>
.button{}
.red{color:red;
.lime{color:lime};
</style>

Ok. Got it.

But the button flashed red and (I think) grey. Definitely NOT lime.

I changed the lime to green. Same.

So something else is going on. But then there is the GUI side which basically derails the whole thing there too.

You're missing a whole bigger picture.

Imagine this scenario (it happens)

You setup 2000hrs of html, littered with style attributes, getting all nice and pretty.

Then you (or the boss) needs all buttons and links that are bright blue to be light grey.

So you change 422 style attributes.

Them you realise some of this stuff is done in code. So you search you dynamic code for "blue" and for "#0000ff" then a while later you find it was actually "#0000EE".

So 47 hours later you are done.

Then the boss says, I need every button height adjusted to be finger friendly - oh and add some nice shadows.

This is not productive stuff, it's error prone, it's all over the place (i.e. your have colour coming through from code in msg.color, you have some things styled by attributes, etc etc)

Here's the flip side...

You setup 2000hrs of html, getting all nice and pretty. No inline styles, everything done in CSS

Then you (or the boss) needs all buttons and links that are bright blue to be light grey.

you spend 5 minutes changing the classes


I know it's hard to believe or see why sometimes people suggest a way of doing something - because people cannot convey in a short forum reply all the reasons they tell you to do something a certain way.

2 Likes

Try not to name classes like the actual thing you want. One day you may decide you don't like lime or you want your errors to be dark orange.

A better way of doing classes is the state you are trying to achieve.

E.g., name your classes like success, error, warning

That way, in the future, you don't need to search and replace all the limes, just update the success class.

3 Likes

I think we are both reading the same book, but just on different pages.

I am at page 1. (probably not even done reading it.)

Maybe not even past opening the book.

I get the idea of the Cascading Style Sheets. It is good. I get the hierarchy.

You define the book layout.
Then you can define page layouts.
Then you can define paragraph layouts.

So, this is my take on that at this stage:

[{"id":"2c4eab16.b45734","type":"ui_template","z":"8bb4de19.f72c88","group":"d3bcf885.d668a","name":"Base Line","order":8,"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":"local","x":640,"y":150,"wires":[[]]},{"id":"d3bcf885.d668a","type":"ui_group","name":"Group 1","tab":"de5134a7.f0a0d","order":1,"disp":true,"width":6},{"id":"de5134a7.f0a0d","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":6}]

All by buttons are black (backgrounds) and their text is lime.

I then create a button from said template:

[{"id":"2c4eab16.b45734","type":"ui_template","z":"8bb4de19.f72c88","group":"d3bcf885.d668a","name":"Base Line","order":8,"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":"local","x":640,"y":150,"wires":[[]]},{"id":"d3bcf885.d668a","type":"ui_group","name":"Group 1","tab":"de5134a7.f0a0d","order":1,"disp":true,"width":6},{"id":"de5134a7.f0a0d","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":6}]

But it is a button.
It's text colour needs to be changed from an outside part.

I got it working but the problem with how I did it is:
ALL buttons would change their colour as I pressed that one button.

So I need to go from External (or maybe Internal) CSS to Inline for the buttons.

That way - if I get it right:
The button colours are set by the higher node at start up.

As I press a button it gets a signal from else where and changes its colour.

For now, that is what I would like to do.

Recap:
I have several buttons on a page all defined by ONE template node.
(in my example: baseline.)

As a button is pressed, its colour changes. None of the other buttons change.

I can post what I have as the overall general flow which has the problem of changing all button colours if you want and you can show me what to edit to get each button to work locally.

I see you have posted something else, so to not trip you on with mistimed posts, I'll stop now.

Yes, I see that, but at this stage/level, I seem to be having trouble with even that.

Alas (again digressing to the w3school site) their examples are so contrived..... I can do them and was going through them quite easily. Even to my surprise.

I think the reason I was doing that was because they were SO contrived they have little practical use.

I don't think what I am wanting to do is outside (or even near the edge) of what CSS is supposed to do.

Yet, I can't translate any of their examples to what I need.