Help with `button` node, `text` node and formatting text in them

Dashboard
21

Thanks @dceejay.

(Just saw the edit come in. Thanks.)

That may be the solution.

I know I should know that, but there are limits to what I can remember and when.

On the last bit:
but the label just thinks it is text so aligns it as if it was just a font on the same line - so the base of the "letters" line up. - If you didn't have the fa-2x then they line up ok - but because you are adding a large"letter" it will stand out on top.

Ok. But. . . . (thinking) In the text node, the 99 is the name of the node.
The bullseye is the msg.payload. They are treated separately.
Which is why they look different when I see the two. (Hmmm.)

Slightly off topic - well not really - how would I make all the stuff bigger?
So the 99 and the bullseye are both big?

I know I can't do a fa-2x around them all. (or can I?)
What is the alternative?
Just asking.

22

Well you can add the text in with the icon

[{"id":"32cecccc.68f9a4","type":"ui_button","z":"3658255b.2041aa","name":"","group":"1e4b8483.ea6fab","order":7,"width":0,"height":0,"passthru":false,"label":"{{msg.payload}}","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":750,"y":220,"wires":[[]]},{"id":"b5e3b1d0.c5e7a","type":"inject","z":"3658255b.2041aa","name":"","topic":"","payload":"<font color=\"lime\" size=\"+2\" class=\"fa fa-bullseye fa-2x\">&nbsp;&nbsp;99</font>","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":550,"y":220,"wires":[["32cecccc.68f9a4"]]},{"id":"1e4b8483.ea6fab","type":"ui_group","z":"","name":"LED Example","tab":"28e3359c.db4eaa","order":1,"disp":true,"width":"6","collapse":false},{"id":"28e3359c.db4eaa","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Meanwhile I will improve the alignment of text and icon.

1 Like
23

The alignment part:
That's for the button node - yes?

24

yes - that is what we are talking about.

25

Sorry. I didn't want to be rude.
I just wanted to check.

And again: Thanks.

26

I've made a bit of progress.

In the button node I have this:

<font size ="4">83</font>&nbsp;&nbsp;&nbsp;{{msg.payload}}

Which gets the numbers (83) to the right size.

But now the {{msg.payload}} needs a bit of work.

This is the payload:

msg1 = {payload: '<font color = "red" i class="material-icons md-58">error</i>'};

But the md-58 (or any other size) doesn't seem to bare much on the size of the icon.

Is that because it is overwritten by the initial size in the button node?

I shall try a couple more things, but am not really getting anywhere.

I have a similar set up on another button, but it uses fa- icons.

I can set the size of the text in one part and the size of the icon in another.

Shall do more digging.

27

Seems if I use the font-awesome icon which is the same look as the one I mentioned, I can fude it to work how I did it with the other button.

This is a kind of solution.

28

Check the payload, font and i tag are not correct html.

29

From this same thread... Scroll up to see what it should be.