Button colours - stuck

Dashboard
1

I know it is me who put myself here and it was me who dug the whole, so there is no one but me to blame for this mess I am in. But......

Folks, I am confused. (When aren't I?)

I am using a button node. Its colour is sent by msg.background. Simple so far.

Things were working just fine then suddenly they weren't and I am not sure why it is doing what it is doing, but I need to ask.

So: I have the button and I send it a message with the background set to "blue" - to pick a colour.

On the dashboard it changes colour to blue. That's ok to here.

But the problem is if I refresh the page. What colour will the button be? Still blue, or reset to the default?

I'll leave it there for now.

2

What do you see when you try this? and what is the default color of the button?

3

"Alas" it turns back to the default colour, rather than keeping the assigned colour.

4

a simple test works foor me so it must be something with your flow

5

Thanks.

It is a big problem and I have spent the last "day" looking at it.

To be sure I wasn't going nuts, I simplified the flow to a simple button and an inject node on another machine.

Code:

[{"id":"660bd4b.840f62c","type":"ui_button","z":"15af81c5.64999e","name":"","group":"fe8c45e4.5224d8","order":0,"width":0,"height":0,"passthru":false,"label":"Colour test","tooltip":"","color":"","bgcolor":"{{msg.background}}","icon":"","payload":"","payloadType":"str","topic":"","x":870,"y":1550,"wires":[[]]},{"id":"c18cb86e.da6908","type":"function","z":"15af81c5.64999e","name":"","func":"msg.background = \"blue\";\nreturn msg;","outputs":1,"noerr":0,"x":730,"y":1550,"wires":[["660bd4b.840f62c"]]},{"id":"24c27e67.08b612","type":"inject","z":"15af81c5.64999e","name":"TimePi","topic":"","payload":"{\"DEVICE\":\"<enter something here>\", \"COMMAND\":\"Shutdown\",\"state\":1}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":600,"y":1550,"wires":[["c18cb86e.da6908"]]},{"id":"fe8c45e4.5224d8","type":"ui_group","z":"","name":"button","tab":"ce4bcacd.5cc46","order":7,"disp":true,"width":"6","collapse":false},{"id":"ce4bcacd.5cc46","type":"ui_tab","z":"","name":"VTEMP","icon":"dashboard","order":31,"disabled":false,"hidden":false}]

I deploy and press the inject node. The button turns blue.
Press the refresh button on FF, it goes back to green.

6

Use ui_control node as injector. It generates output on socket events so you always can feed proper state to button.
Button itself is dummy and can not hold the state.

1 Like
7

What browser are you using? It works fine for me in Safari, Chrome and fireFox on a mac

8

FF. I seem to find a lot of problems with FF I think.

But I think hotNipi may have it.

I'll need more info from him though.

9

As much as I would like to say I fully understand, I am not quite getting what you mean.

Even a screen shot of where the node goes? Between the inject and button?

I just tried it and now the button doesn't change colour at all. I am still missing something.

10

Here you are

[{"id":"e95a086c.e67cd8","type":"ui_ui_control","z":"68cc86cc.401aa8","name":"","x":150,"y":200,"wires":[["ef72de1b.e54b"]]},{"id":"ef72de1b.e54b","type":"change","z":"68cc86cc.401aa8","name":"","rules":[{"t":"set","p":"background","pt":"msg","to":"blue","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":190,"wires":[["7f9465e4.3b077c"]]},{"id":"7f9465e4.3b077c","type":"ui_button","z":"68cc86cc.401aa8","name":"","group":"abdfe695.3eb538","order":0,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"{{background}}","icon":"","payload":"","payloadType":"str","topic":"","x":580,"y":170,"wires":[[]]},{"id":"abdfe695.3eb538","type":"ui_group","z":"","name":"Controller","tab":"59d9e4f.42c981c","order":1,"disp":true,"width":"6","collapse":false},{"id":"59d9e4f.42c981c","type":"ui_tab","z":"","name":"Systems","icon":"dashboard","order":9,"disabled":false,"hidden":false}]

There will be no need to add more than one ui_control node for this purpose. You can connec as many things with it. Main thing is, you are catching that event and can then do whatever you need to to. Read ui_control info page to make even smarter decisions what to do and when to do.

11

@Trying_to_learn Andrew, what platform is NR running on?
what version of NR and node.js
what version of the dashboard?

12

NR 20.3
Dashboard 2.15.2

Ubuntu

NotniPi got it, but there is a "problem" with that.

13

Ahhh, there is a difference if I test it on with NR running on a pi or my mac!!

14

The problem is.......

WHERE in the "time line" that node goes.

(I know it is a mess.)
This is an extract from the other machine and what it has.

You can see the button (red arrow) and the controlling signal comes from (though this is not really the actual source) is the purple stuff.

It goes through two sub-nodes and that was a whole lot of fun too.

Screenshot%20from%202019-05-25%2019-47-28
Screenshot%20from%202019-05-25%2019-47-281360Ă—768 110 KB

15

@dceejay Dave, shouldn't a flow running in NR on a Pi give the same results as when it runs on a Mac? (different browsers act the same)
In this case once the color of the button has been set,
a refresh on the mac of the NR instance running on the mac retains the button color
a refresh on the mac of the NR instance running on the pi reverts the button color

<a class="attachment" href="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/flex016/uploads/nodered/original/2X/c/c2772a982657b2879b0d02f31fe722f136d8331a.json">button-color.json</a> (1008 Bytes)
16

I use it this way:

There is tab where I hold little flows of generating and controlling many different events.
Dashboard init is one of those events.

inject

And then the dashboard tab, there is many things connected to it (listening this event)
Of course not directly color for button but the correct state is figured out in function before sending it to the button

dash
dash.JPG621Ă—542 40.9 KB

1 Like
17

Thanks.

But I shall admit I am not yet confident enough to really understand exactly how to do that here.

In the mean time, I have studied the sub-flows and edited the code in them.

I have sort of worked around part of the problem, but that has its own "problems". (Unwanted traffic rather than the last state being remembered)

I'll keep looking at what you said and try to get it working.

Thanks for the suggestion.

18

No sorry. As there are no settings in the ui_control node, I am just not getting it.

19

What kind of settings to you expect to have?
As I described and what I understood you were missing is the event of dashboard connecting to your flow (pushing refresh of browser is same thing) That event you can catch with the ui_control node. No matter the message sent by ui_control then. You just needed the event. All that follow to this event is up to you to decide what you will need to do if this event is happened.

20

@zenofmud - they should act the same - but there is/was a regression in one version of the dashboard (one of the latest) where the behaviour was different. so check you have the same level dashboard on both.