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

[Trying_to_learn]

On my dashboard now has a text node which shows this:

The 99 is the name of the node and the graphic is sent in the message.
It is a text node.

With my recent messing around, I have become adventurous with the dashboard.
I am wanting to add a button node in the equation.

I know this is not the best example, because in the text node, I can make it more like this:
(repost of image)

Note now it is spaced differently.

That is kind of better.

So I replace the text node with a button node.

This is what I get:

Alas the name and the icon are now adjacent. (Not wanted)

And I think it is a different size also/anyway. (am I seeing things?)

This is the button node code:

[{"id":"6a470aeb.6cca7c","type":"ui_button","z":"c191bc17.3b5c5","name":"","group":"40967838.08e488","order":0,"width":"2","height":"1","passthru":false,"label":"99   {{msg.payload}}","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":650,"y":190,"wires":[[]]},{"id":"40967838.08e488","type":"ui_group","z":"","name":"Health alarm","tab":"ce4bcacd.5cc46","order":9,"disp":true,"width":"6","collapse":false},{"id":"ce4bcacd.5cc46","type":"ui_tab","z":"","name":"VTEMP","icon":"dashboard","order":21,"disabled":false,"hidden":false}]

This is the text node code:

[{"id":"e21636d1.2ff9b8","type":"ui_text","z":"c636aa5a.cc34","group":"1f5fe937.c354c7","order":9,"width":"2","height":"1","name":"99","label":"99","format":"{{msg.payload}}","layout":"row-spread","x":1540,"y":3327,"wires":[]},{"id":"1f5fe937.c354c7","type":"ui_group","z":"","name":"Cat-5","tab":"1c792414.600e94","order":3,"disp":true,"width":"10","collapse":false},{"id":"1c792414.600e94","type":"ui_tab","z":"","name":"Telemetry","icon":"track_changes","order":2,"disabled":false,"hidden":false}]

I know I should know what I am wanting, but I am stuck what can be done.

I'm looking for anything I can do to get the same output on the button node as I get with the text node.

Ok, yes the two examples are from different machines.
The working two (the first two) are on one machine. The example one (the button one) is on another.

That is because deploys take a long time to do and it is my main machine.
The other one - with the button is my test machine.
(NUC)

[Colin]

@Trying_to_learn

That is because deploys take a long time to do

A deploy should not take a long time, particularly if you deploy only modified nodes.

[Trying_to_learn]

Well, say 40 second compared to 2.

You tell me.

That is nominal.

Hang on about to re-deploy it only by moving the position of a couple of tabs.

Ok. 49 seconds only because I re-ordered the tabs. (Measured on stop watch from deploy button being pressed to the flow becoming once again usable.)

Compared to less than 10 on the NUC.

[Colin]

You weren't talking about moving tabs (which affects many nodes) but adding a button node and removing a text node.

[Trying_to_learn]

Adding ONE inject tab on the flow which is seen when I open the browser:

56 seconds.

(Why aren't you answering the QUESTION rather getting me to waste time deploying for no good reason?)

[Colin]

@Trying_to_learn

Why aren't you answering the QUESTION rather getting me to waste time deploying for no good reason

For the best reason, because I have absolutely no idea what the answer is.
Given that, I was trying to help in determining why it takes so long to deploy. You say you have added a single inject tab, do you mean you have added a single inject node? It seems very odd that should take 56 seconds to deploy. Whether you want to investigate why I leave entirely up to you.

[Trying_to_learn]

@Colin

For the best reason, because I have absolutely no idea what the answer is.

So on that statement, all the things I don't know anything about: I should reply to people's questions and ask them questions about things which are only slightly related to their original question.

Maybe it takes 56 seconds to deploy because:
RasPi model 2B
(2 USB ports - early version)

This is what is in the node-red directory.
(Check the sizes)

pi@TimePi:~/.node-red $ ll
total 1928
drwxr-xr-x   4 pi pi    4096 Nov 11  2018 lib/
drwxr-xr-x 316 pi pi   12288 Aug 22 08:39 node_modules/
drwxr-xr-x   8 pi pi    4096 Jun 27 13:50 public/
-rw-r--r--   1 pi pi      72 May 18 18:55 flows_TimePi_cred.json
-rw-r--r--   1 pi pi 1793366 Sep 19 06:57 flows_TimePi.json
-rw-r--r--   1 pi pi   25196 Feb  2  2019 npm_modules.txt
-rw-r--r--   1 pi pi    2084 Aug 22 08:40 package.json
-rw-r--r--   1 pi pi  108690 Aug 22 08:40 package-lock.json
-rw-r--r--   1 pi pi    9196 May 18 18:55 settings.js
pi@TimePi:~/.node-red $ 

I don't know what the "normal" size of a flow is.
But 1793366 seems a bit large.
There are 25 tabs.

Maybe that has something to do with it.

But that isn't my question:

I am wanting help with how to format text in a button node to get it like the text node.

I am unable to see the connection between that and your suggestions.
And believe me I know a lot about abstract thinking. I have a lot of fun thinking outside the box.

[craigcurtin]

I believe Colin was trying to HELP with the issue on long deployment times - if you are only deploying changes rather than the whole flow each time then it does seem excessive - however based on some of the "intricate" flows you have posted recently then it is maybe not out of the realm of possibility. If it is taking that amount of time to deploy i would suggest that you are not using the right platform for the application.

Having said that i have nothing to add to the Node formatting and will leave it to someone with more UI skills than you or I to answer.

Craig

[dceejay]

What happens if you set the icon of the button using the icon field rather that the text field ?

[Trying_to_learn]

Thanks.

But indulge me my stupid question for today:

This is what a text node looks like when I open it to edit it:

This is what a button node looks like:

Though there is an icon field in the first one, that is for text to be entered.
The icon in the text node doesn't have a name. It shows the icon.

As there isn't one in the button node, how would I get what you suggested done?

After digging a bit, I think I found the name for the text button icon.
ui_text.png.

Put that in the field. Not good/working.

[bakman2]

The icon "appears" to come from msg.payload, can you post that part as well ?

[Trying_to_learn]

Is/was this what was meant.

[dceejay]

No... the text in the label and the icon in the icon.
( and what is the contents of msg.payload ? }

[Trying_to_learn]

Ok, there seems to be some confusion.

I'll explain again the problem:
If I send my message to a text node, it looks like:

(Ok, I deleted the file.)

It was nice.
I get the IP number to the left of the node. The font_awesome icon to the right.

Because I am trying something, I want to make that node a button.

I do that and the formatting is lost.

It was suggested I use the icon . . . . . . Oh. Ooops.

Ok.

Well short answer: It doesn't seem to work. I just posted a reply and I see it has been replied to now so I will stop wasting time and read it.

[Trying_to_learn]

Sorry. I misread what you meant.

This is the contents (in this instance)

payload: '<font color = "lime" i class="fa fa-bullseye fa-2x"></i>'

But it is a kind of given that as it is the payload it is variable.

So it is not always that.

It can change depending on events.

[bakman2]

Look at this code:

'<font color = "lime" i class="fa fa-bullseye fa-2x"></i>'

This is incorrect html.

The notation is:
<font><i></i></font>

eg:

'<font color="lime"><i class="fa fa-bullseye fa-2x"></i></font>'

[ukmoose]

pretty sure that’s come up before

[Trying_to_learn]

Yeah, ok. I goofed.

I spent a lot of time going over fixing the codes, but what I failed to do what edit any sub flows.

Hey, ok. I admit it.

Ok, so code fixed.

Putting it as told (in the icon field) I still get a question mark as previously posted.

Moving it to the label field: It works in that I see the 99 and the bullseye icon.
Just they are too close together.

[bakman2]

99 {{msg.payload}}
Because there are 3 spaces between the 2 ?

[dceejay]

Ok - so...
The icon field isn't dynamic - so won't accept {{msg.payload}}.
So you are doing the right thing sending it in as the label - 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.

You could add     to force 3 spaces if you like...