I am still not getting thse `buttons` and their settings

Dashboard
1

(Believe me I don't like this any more than you)

This is really driving me batty.

This is the button:
It works. I see the icon.

[{"id":"5ef1b432.4ab89c","type":"ui_button","z":"26262ba1.62dcbc","name":"","group":"1430591a.926dbf","order":0,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"fa-toggle-on fa-rotate-90","payload":"","payloadType":"str","topic":"","x":610,"y":560,"wires":[[]]},{"id":"1430591a.926dbf","type":"ui_group","name":"Group 2","tab":"aa487daa.33c1c","order":2,"disp":true,"width":6},{"id":"aa487daa.33c1c","type":"ui_tab","z":"","name":"Tasmota stuff","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

So, I replace the icon field with {{msg.icon}} and have this flow:

[{"id":"41f64a6c.76638c","type":"change","z":"26262ba1.62dcbc","name":"Icon","rules":[{"t":"set","p":"icon","pt":"msg","to":"fa-toggle-on fa-rotate-90","tot":"str"},{"t":"set","p":"background","pt":"msg","to":"lime","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":460,"y":560,"wires":[["5ef1b432.4ab89c","fd9c7398.8dfbb"]]},{"id":"38c571db.9db896","type":"inject","z":"26262ba1.62dcbc","name":"","topic":"","payload":"X","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":310,"y":560,"wires":[["41f64a6c.76638c"]]},{"id":"5ef1b432.4ab89c","type":"ui_button","z":"26262ba1.62dcbc","name":"","group":"1430591a.926dbf","order":0,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"{{msg.icon}}","payload":"","payloadType":"str","topic":"","x":610,"y":560,"wires":[[]]},{"id":"fd9c7398.8dfbb","type":"debug","z":"26262ba1.62dcbc","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":610,"y":520,"wires":[]},{"id":"1430591a.926dbf","type":"ui_group","name":"Group 2","tab":"aa487daa.33c1c","order":2,"disp":true,"width":6},{"id":"aa487daa.33c1c","type":"ui_tab","z":"","name":"Tasmota stuff","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

I see this in the debug node:

{"_msgid":"1fdf1d24.0023e3","topic":"","payload":"X","icon":"fa-toggle-on fa-rotate-90","background":"lime"}

There is a msg.icon and it is the same as it is/was when it was in the button node.

I deploy the flow and press the inject button.

All I see is a button with a ? and the word button written after it.
Editing the button node and putting the fa-toggle-on fa-rotate-90 back in the icon field and deploying: It works and I see the fa-toggle-on fa-rotate-90 icon clear as.

I am really paying penance for my mistakes.

I don't know the magic to make this all in a template node.
Even if I did, I use different kinds of buttons there too and don't know if they allow enabled conditions.

So the problem is:
Why is it when I enter the icon name directly in the button node (even with rotation) it works.
If I inject it as msg.icon it doesn't?

2

Here is one a bit more advanced way to control icons on dashboard button.

[{"id":"513c200a.1cc12","type":"ui_button","z":"eab6da64.c00bf8","name":"","group":"c2bad0c2.83c31","order":0,"width":"1","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-play bigIcon","payload":"","payloadType":"str","topic":"","x":580,"y":510,"wires":[[]]},{"id":"2425789.9a1dd88","type":"ui_template","z":"eab6da64.c00bf8","group":"c2bad0c2.83c31","name":"icon style","order":1,"width":0,"height":0,"format":"<style>\n    .bigIcon{\n        font-size:2em;\n        transition: 1s;\n    }\n    .bigIcon.red{\n        color:red;\n    }\n    .bigIcon.blue{\n        color:blue;\n    }\n    \n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":580,"y":440,"wires":[[]]},{"id":"a11095e5.3c8718","type":"inject","z":"eab6da64.c00bf8","name":"inject","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":480,"wires":[["579fc56b.1ca04c"]]},{"id":"43b501c2.8b6f5","type":"inject","z":"eab6da64.c00bf8","name":"inject","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":520,"wires":[["60956eea.1eab1"]]},{"id":"579fc56b.1ca04c","type":"change","z":"eab6da64.c00bf8","name":"","rules":[{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-pause bigIcon","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":480,"wires":[["513c200a.1cc12"]]},{"id":"60956eea.1eab1","type":"change","z":"eab6da64.c00bf8","name":"","rules":[{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-play bigIcon red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":520,"wires":[["513c200a.1cc12"]]},{"id":"ab1b058.e5a4af8","type":"inject","z":"eab6da64.c00bf8","name":"inject","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":560,"wires":[["2acee86f.adc8e8"]]},{"id":"2acee86f.adc8e8","type":"change","z":"eab6da64.c00bf8","name":"","rules":[{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-stop bigIcon blue","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":560,"wires":[["513c200a.1cc12"]]},{"id":"c2bad0c2.83c31","type":"ui_group","z":"","name":"Default","tab":"9730248a.782dc8","disp":true,"width":"6","collapse":false},{"id":"9730248a.782dc8","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
1 Like
3

(Sorry for slow reply.)

I am not really understanding it, but I think you are "name swapping" (or cheating) with how the payload is handled.

I am working on rebuilding a lot of remote controls I had stored on the PC.

I do appreciate your time.
Believe me I will look at it.

But I think I am on a bit of a roll just now and want to keep the energy going while it is as it is.

4

Spit balling...
What happens if you try {{icon}} in the icon field? Or try triple curly brackets?

5

Yeah, I'm stupid.

It seems to work, though now in the function node I have this:
msg= {icon: '<font color = "lime"><i class="fa fa-toggle-on fa-rotate-90 fa-3x"></i></font>'};

In the button node I change it to {{icon}} and I see the icon, but to the left there is a (white) circle with a question mark in it. Then the icon.

I'll look at it and see if I can nut it out.

6

Possibly the icon field is only expecting an icon class? (I'm guessing)

What do you see if you inspect that in Dev tools?

7

Above my skill set.

I shall have to enqueue all this to look at later on.

1 Like
8

That's why I did my example. Icon treatment goes a bit differently than other button properties.
Take a look this example then. I put other properties into it, to have full control over button appearance.

[{"id":"513c200a.1cc12","type":"ui_button","z":"eab6da64.c00bf8","name":"","group":"c2bad0c2.83c31","order":0,"width":"2","height":"1","passthru":false,"label":"{{msg.payload}}","tooltip":"","color":"","bgcolor":"{{msg.background}}","icon":"fa-play bigIcon","payload":"","payloadType":"str","topic":"","x":580,"y":510,"wires":[[]]},{"id":"2425789.9a1dd88","type":"ui_template","z":"eab6da64.c00bf8","group":"c2bad0c2.83c31","name":"icon style","order":1,"width":0,"height":0,"format":"<style>\n    .bigIcon{\n        font-size:2em;\n        text-shadow: 1px 1px 5px #00000099;\n    }\n    .bigIcon.red{\n        color:red;\n        \n    }\n    .bigIcon.blue{\n       color:blue;\n    }\n    \n    \n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":590,"y":470,"wires":[[]]},{"id":"a11095e5.3c8718","type":"inject","z":"eab6da64.c00bf8","name":"inject","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":480,"wires":[["579fc56b.1ca04c"]]},{"id":"43b501c2.8b6f5","type":"inject","z":"eab6da64.c00bf8","name":"inject","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":520,"wires":[["60956eea.1eab1"]]},{"id":"579fc56b.1ca04c","type":"change","z":"eab6da64.c00bf8","name":"","rules":[{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-pause bigIcon","tot":"str"},{"t":"set","p":"background","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":480,"wires":[["513c200a.1cc12"]]},{"id":"60956eea.1eab1","type":"change","z":"eab6da64.c00bf8","name":"","rules":[{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-play bigIcon red","tot":"str"},{"t":"set","p":"background","pt":"msg","to":"blue","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":520,"wires":[["513c200a.1cc12"]]},{"id":"ab1b058.e5a4af8","type":"inject","z":"eab6da64.c00bf8","name":"inject","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":560,"wires":[["2acee86f.adc8e8"]]},{"id":"2acee86f.adc8e8","type":"change","z":"eab6da64.c00bf8","name":"","rules":[{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-stop bigIcon blue","tot":"str"},{"t":"set","p":"background","pt":"msg","to":"orange","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":560,"wires":[["513c200a.1cc12"]]},{"id":"f5ae9eaf.20e84","type":"ui_button","z":"eab6da64.c00bf8","name":"","group":"c2bad0c2.83c31","order":3,"width":0,"height":0,"passthru":false,"label":"A","tooltip":"","color":"","bgcolor":"","icon":"","payload":"A","payloadType":"str","topic":"","x":180,"y":630,"wires":[["579fc56b.1ca04c"]]},{"id":"a0b194b6.d22ee8","type":"ui_button","z":"eab6da64.c00bf8","name":"","group":"c2bad0c2.83c31","order":3,"width":0,"height":0,"passthru":false,"label":"B","tooltip":"","color":"","bgcolor":"","icon":"","payload":"B","payloadType":"str","topic":"","x":180,"y":670,"wires":[["60956eea.1eab1"]]},{"id":"c5eddbbd.c07748","type":"ui_button","z":"eab6da64.c00bf8","name":"","group":"c2bad0c2.83c31","order":3,"width":0,"height":0,"passthru":false,"label":"C","tooltip":"","color":"","bgcolor":"","icon":"","payload":"C","payloadType":"str","topic":"","x":180,"y":710,"wires":[["2acee86f.adc8e8"]]},{"id":"c2bad0c2.83c31","type":"ui_group","z":"","name":"Default","tab":"9730248a.782dc8","disp":true,"width":"6","collapse":false},{"id":"9730248a.782dc8","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
1 Like
9

Again: Thanks, I am looking at it.

10

Sorry, but......

I kind of get the structure. And I am so not getting it in others.

First off the template node.
:confused:

Ok, the code:

<style>
    .bigIcon{
        font-size:2em;
        text-shadow: 1px 1px 5px #00000099;
    }
    .bigIcon.red{
        color:red;
        
    }
    .bigIcon.blue{
       color:blue;
    }
    .bingIcon.green{
        color:lime;
    }
</style>

I added the green part to try something.
I used lime only that I don't really like the green as it is, so I call it green and use lime for the colour.
That shouldn't really matter in the scheme of things on if they work or not.

I'll get back to it shortly.

But I am not quite understanding what it does. Suffice to say it does something about creating something like .bigIcon{ }. But it has subclasses of (from the original) of .red and .blue.

So it does what ever it does. Trying to understand I step back and look at the bigger picture.
(Sort of)

A looks like this:

[{"id":"4b67cfaf.3954c8","type":"change","z":"b25fd092.bcc758","name":"A","rules":[{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-pause bigIcon","tot":"str"},{"t":"set","p":"background","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":360,"wires":[["8700b1ed.b7b5c"]]}]

Ok, it sets msg.ui_control.icon to fa-pause bigIcon, with msg.background set to green.
So it creates bigIcon from fa-pause. The background colour is green.

With you to there.
The colours match.
Background colour is green. The white icon is because no colour was declared.

So, "Let's put it to the test".

Looking at the B option now:
fa-play bigIcon red
Now the red is added.

I'm guessing the red is from that thing in the template node?
I've tried it changing C option from blue to red and it worked.

So, the green bit I put in...... Can I use it?

No, seems not to work. I make that work.

I set the change node line to fa-stop bigIcon green
Deployed it and when I press the C button, the stop button is/was white.

So I am missing something there. Yes, I am spit balling (as called by @Steve-Mcl) but when I don't understand anything, all I can do is try.

So as much as it looks interesting, I am missing some serious stuff on how to define colours of the icons.

11

Check your spelling :smirk:

1 Like
12

(Yes, I'm really not the sharpest tool in the shed.)

Ok. So how does the structure work?

In the template node, the bigIcon is created.
You set/define the font size and drop shadow is defined. Not sure what the numbers mean, but I can live with that for now.

You then create 2 (I made it 3) sub-sections/sets of that with the part:

    .bigIcon.red{
        color:red;
        
    }

Which defines the colour of the icon. Ok.

In the change nodes, you create the msg.ui_control.icon from text which has a structure:
fa-icon bigIcon (the icon created in the template node) colour.

Then in the next line, you define the background colour also.

In the button node, the icon field has fa-play bigIcon in it.
I'm guessing that is the default icon. Yes?
But if so, I can't get how the new icon overwrites that.

I could negate the label field if I don't want the text showing.

I see you have replied. So I won't keep posting on this thread.

13

1em = default size.

Yes. If left empty there will be no icon at startup.

msg.ui_control.icon

As you see, to change the icon and any properties of icon, the msg.ui_control is used.
That is the different treatment from button background for example where properties can be sent directly via msg.something.

Now the value of msg.ui_control.icon

fa-play - the shape of icon.
bigIcon - name of class added to that icon.
red - subclass of that class.

You can have many of custom CSS classes added to icon which makes full new playground how to style the icon.

14

I meant the text-shadow: 1px 1px 5px #00000099;
I'm guessing that is the size of the drop shadow and colour.

Guessing: left, bottom, right. #00000099 - the colour? RGB

Wow! Yes, I am kind of picking up on that.

I need to learn how to use them. (My problem)

But what about size and two messages for pressing (one on down and one on up)?

Sorry. Don't fret on that because I think it is beyond the scope of the node, and may be why I may need to use that other way.

But anyway: I have learnt a lot from this.

But in the mean time I am busting my butt trying to get back all the flows I lost.
(the machine had about 30 tabs in Node-Red with flows, etc)
That's a lot of code.

Some I can do without and some I would like to get working again.

15

Actually x, y, blur, RGBA (A - alpha or transparency)

16

Yeah, ok.

As I said: Not really important for having it work.

On the size of the button.

The button node makes the buttons at a given size.
When I use the template node it makes the buttons smaller.
Further tweaking it with colour settings, the button gets even smaller.

Would that fall under this thread?
(sorry, it may be good to learn if you could help and I can get my head around it.)

(Shooting myself in the foot now)

I have .... 7 - 8 RasPies with NR installed and running stuff.
I don't know if it would be worth retrospectivly updating them all.

But yes it would be a good idea to establish a better way of building a button that could then be used for any time I need a button.

17

There is trick to have ui_template with full size
image

18

Again: Thanks.

I shall have to play with that and see what happens. Or: What a mess I can make. :wink:

I think it is time I shut the computer down (again) my shoulders are killing me because I don't have an ergonomic set up.

All the best.
Again: Your help is appreciated.

19

I think you might benefit from spending a couple of hours working through this css tutorial. I mean working through it, doing the exercises and so on, so you actually understand the basics of what css is all about.
https://www.w3schools.com/Css/

2 Likes
20

Thanks Colin.

I shall look into that soon.

It isn't as though I have much else happening just now.