Ui-control behaviour

[Mrb32]

Hi All,

As a new node-red user and non programmer/developer, I have been playing with the ui-control node to show or hide groups and everything works as expected on the desktop I use.

I am a bit puzzled about the behaviour of the node when the dashboard is accessed from a different browser and/or client and would appreciate some input if at all possible.

I plan to have a dedicated terminal to run the app I am planning, but there might be circumstances where I might need/want to use a tablet or phone to access it. I tried a few things to test the behaviour, and found myself staring at a few groups I would have expected to be hidden ... this also happened on the same device when accessing the dashboard using a different browser. I don't really need this to work, so this is not much of an issue, but I don't like unsolved mysteries.

I have tried to illustrate the puzzle with this simple example:

[{"id":"286b915c.bf1aae","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"2d3b8f0d.ff0ae","type":"ui_button","z":"286b915c.bf1aae","name":"","group":"f5bd90f5.0568d8","order":1,"width":0,"height":0,"passthru":false,"label":"Click me","tooltip":"","color":"","bgcolor":"","icon":"","payload":"Nice click! ","payloadType":"str","topic":"","x":280,"y":360,"wires":[["4466bc8c.34369c"]]},{"id":"5abfcce5.1a2c34","type":"ui_text","z":"286b915c.bf1aae","group":"f5bd90f5.0568d8","order":0,"width":0,"height":0,"name":"","label":"","format":"{{msg.payload}}","layout":"row-spread","x":290,"y":300,"wires":[]},{"id":"2a22be5d.7b8922","type":"ui_button","z":"286b915c.bf1aae","name":"","group":"dbd56288.94ead8","order":1,"width":0,"height":0,"passthru":false,"label":"Click me","tooltip":"","color":"","bgcolor":"","icon":"","payload":"Nice click again! ","payloadType":"str","topic":"","x":480,"y":360,"wires":[["e44afbf2.4a5e","69fee7b6.d1bb78"]]},{"id":"e44afbf2.4a5e","type":"ui_text","z":"286b915c.bf1aae","group":"dbd56288.94ead8","order":0,"width":0,"height":0,"name":"","label":"","format":"{{msg.payload}}","layout":"row-spread","x":490,"y":300,"wires":[]},{"id":"c745593c.31dcc8","type":"ui_button","z":"286b915c.bf1aae","name":"","group":"d7b798bd.18f3d8","order":1,"width":0,"height":0,"passthru":false,"label":"Hide everything","tooltip":"","color":"","bgcolor":"","icon":"","payload":"And Another Nice click! ","payloadType":"str","topic":"","x":700,"y":360,"wires":[["fb037384.76771","dbbff6f2.b48f8"]]},{"id":"fb037384.76771","type":"ui_text","z":"286b915c.bf1aae","group":"d7b798bd.18f3d8","order":0,"width":0,"height":0,"name":"","label":"","format":"{{msg.payload}}","layout":"row-spread","x":690,"y":300,"wires":[]},{"id":"bc3644e0.480e98","type":"ui_ui_control","z":"286b915c.bf1aae","name":"","events":"all","x":620,"y":540,"wires":[[]]},{"id":"d899f9dc.b14","type":"change","z":"286b915c.bf1aae","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"group\":{\"hide\":[\"TESTUI_Another_Group\",\"TESTUI_And_Another_One\"]}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":460,"wires":[["bc3644e0.480e98"]]},{"id":"e10273f9.80435","type":"inject","z":"286b915c.bf1aae","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":170,"y":460,"wires":[["d899f9dc.b14"]]},{"id":"4466bc8c.34369c","type":"change","z":"286b915c.bf1aae","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"group\":{\"show\":[\"TESTUI_Another_Group\"]}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":420,"wires":[["bc3644e0.480e98"]]},{"id":"69fee7b6.d1bb78","type":"change","z":"286b915c.bf1aae","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"group\":{\"show\":[\"TESTUI_And_Another_One\"]}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":620,"y":440,"wires":[["bc3644e0.480e98"]]},{"id":"dbbff6f2.b48f8","type":"change","z":"286b915c.bf1aae","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"group\":{\"hide\":[\"TESTUI_And_Another_One\",\"TESTUI_Another_Group\",\"TESTUI_Test1\"]}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":920,"y":440,"wires":[["bc3644e0.480e98"]]},{"id":"925a325b.8dbcd","type":"ui_button","z":"286b915c.bf1aae","name":"","group":"643e8b0a.4b58f4","order":0,"width":0,"height":0,"passthru":false,"label":"Start Over","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":170,"y":540,"wires":[["7409101f.c4e708"]]},{"id":"7409101f.c4e708","type":"change","z":"286b915c.bf1aae","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"group\":{\"show\":[\"TESTUI_Test1\"]}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":540,"wires":[["bc3644e0.480e98"]]},{"id":"f5bd90f5.0568d8","type":"ui_group","z":"","name":"Test1","tab":"2e6751d5.9ceb76","order":2,"disp":true,"width":"6","collapse":false},{"id":"dbd56288.94ead8","type":"ui_group","z":"","name":"Another Group","tab":"2e6751d5.9ceb76","order":3,"disp":true,"width":"6","collapse":false},{"id":"d7b798bd.18f3d8","type":"ui_group","z":"","name":"And Another One","tab":"2e6751d5.9ceb76","order":4,"disp":true,"width":"6","collapse":false},{"id":"643e8b0a.4b58f4","type":"ui_group","z":"","name":"Start over","tab":"2e6751d5.9ceb76","order":1,"disp":true,"width":"6","collapse":false},{"id":"2e6751d5.9ceb76","type":"ui_tab","z":"","name":"TESTUI","icon":"dashboard","disabled":false,"hidden":false}]

This flow should theoretically start and show 2 groups:

Puzzle 1: If I access this flow from a fresh browser session (cache cleared) and a freshly restarted instance of node-red, all the groups show on the page. (Browsers: Edge for OSX, Safari 14, Firefox)

Puzzle 2: If I hide a given group, and move to another browser, the show/hide status will not be reflected, but the changes in text boxes will...

Puzzle 3: This forum mentions the "connect event" frequently, I have tried to setup setup with a switch node looking for any "connect" payload to send a payload to the ui-connect node to show a group, with no success so far.

The show hide feature would be nice to use in combination with online status of devices for example, a few tries with mqtt messaging gave me the same behaviour.

So, I'd be curious to find out what I am doing wrong and what behaviour should be expected.

Many thanks in advance

[Mrb32]

Puzzles solved....

For other ignorant people like me:

Puzzle 1:

I am using a single UI-Control for my "little" project, with links to different flows. The node was getting a large number (approx.100) of messages at once on startup and could not cope with the number of events, so was only partially processing the messages. Inserting a delay node with a 5ms message delay between the link-in node and the ui-control node gave it enough time to process each message. This explains the visible groups with a fresh cache.

Puzzle 2:
Client differences: hide/show changes made by ui-control only apply to the client session active at the time the changes occur by the looks of it. Using a tab refresh only worked for me in isolated cases as the conditions triggering the hide/show payloads are not always in place for the refresh to take them into account. In the context of a workflow, I doubt someone would jump to another device in the middle of data entry, so it make sense that it works this way.
I wanted to use the feature to show only button groups associated with devices that are configured/present on an mqtt broker, this data doesn't change frequently, so the only time a full set of messages is received by node-red is during startup. I changed the source of this data to another point that is refreshed every minute, and used a gate node to store the information and release it when a new client connects, triggering a new set of hide/show payloads.

Puzzle 3:
The elusive "connect" payload: the problem was sitting in front of the computer....

In a nutshell it was all about the flow...