Hi, I want to change the colors of the button using the ui_picker. I save the new color globally in msg.colour. Can the UI node itself get the information from the scope? Is it enough if I write msg.colour in the field of the background color. Or how should it be?
Hi @Georg25,
I'm not sure whether I understand your question correctly, so please correct me...
When I try this simple flow:
[{"id":"c074ebe5.1cf448","type":"change","z":"47b91ceb.38a754","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"backgroundcolour","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":890,"y":880,"wires":[["e6b10e4c.0661f"]]},{"id":"e6b10e4c.0661f","type":"ui_button","z":"47b91ceb.38a754","name":"","group":"396e82d8.51ce4e","order":0,"width":"2","height":"2","passthru":false,"label":"BUTTON","tooltip":"","color":"ffffff","bgcolor":"#{{msg.backgroundcolour}}","icon":"","payload":"a","payloadType":"str","topic":"","x":1080,"y":880,"wires":[[]]},{"id":"a875adea.f4bea","type":"ui_colour_picker","z":"47b91ceb.38a754","name":"","label":"COLOUR PICKER","group":"396e82d8.51ce4e","format":"hex","outformat":"string","showSwatch":false,"showPicker":true,"showValue":false,"showHue":false,"showAlpha":false,"showLightness":true,"dynOutput":"false","order":7,"width":0,"height":0,"passthru":true,"topic":"","x":670,"y":880,"wires":[["c074ebe5.1cf448"]]},{"id":"396e82d8.51ce4e","type":"ui_group","z":"","name":"Group 3","tab":"ed853a43.66a808","order":3,"disp":false,"width":"6"},{"id":"ed853a43.66a808","type":"ui_tab","z":"","name":"Charts","icon":"dashboard","order":2}]
Then I can use the colour picker to change the button background color:
What do you mean by this?
Do you want to create a template node or a custom UI node (using the new widget api)?
Bart
1 Like
that's exactly what I had in mind.
When I try this simple flow:
[{"id":"c074ebe5.1cf448","type":"change","z":"47b91ceb.38a754","name":"","rules":[{"t":"mo
I have 20 buttons on different tabs. If I do that, I would have to connect every single button to the switch node. I wanted to prevent that by storing the color globally. My question is, wether the UI_widget can retrieve the information somehow, no matter if that is the ui_button or the ui_template or is that only with a self-created UI-Node feasible
This could be a job for link nodes if I'm understanding you correctly.
yes, I have also implemented it with link nodes.
Just thought to reduce the effort, if this is possible. Would be synonymous for other properties interesting, which can be set in the UI nodes
The client side of the UI nodes (button, template node, custom ui node) runs in the browser and has no access to any of the server-side data in the Node-RED flow. So if you store the colour e.g. in global memory, you won't be able to access that value in the AngularJs frontend.
On the other hand when you send a message to such a UI node, then the message data will be accessable in the AngularJs scope object. That functionality is made available in all the ui nodes by the dashboard...
So you need to pass a message from your colour picker to all of your buttons, to exchange the colour value. Seems that your link nodes are the easiest solution
1 Like
@BartButenaers thanks for the info.
@Georg25: You are welcome!
And for others struggling with the same question, perhaps a single figure says more that thousand words:
- You cannot access data from the server side memory (global/flow/...) in the AngularJS dashboard.
- You can access data from an input message in the AngularJS dashboard frontend. Indeed the msg data is (automatically) transmitted to the node's AngularJs scope object, where the client side code of the UI widget can get it (to update the content or layout of the visible widget).
3 Likes
