Ui_control strange situation

Hi,
I'm trying to use ui_node to switch tabs.
From "tab B" to "tab A" goes well, while from "tab A" does not work as expected.
When I want to switch from "tab A" to "tab B", I have to click on the created button(double) to make switch tab.

Below is an simulation flow.
Please, can anyone look at what it's all about, I'm wrong somewhere, or does this not work as expected?

[{"id":"3f007fb5.0a17f","type":"tab","label":"Flow 3","disabled":false,"info":""},{"id":"fe2de2d8.bb22c","type":"change","z":"3f007fb5.0a17f","name":"arming","rules":[{"t":"set","p":"payload","pt":"msg","to":"Alarm Arming in 5 Seconds","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":170,"y":240,"wires":[["652c802b.90614","38d6322f.70265e"]]},{"id":"74bc26a8.a31fb8","type":"ui_text","z":"3f007fb5.0a17f","group":"e3dfdad2.15b088","order":14,"width":"4","height":"1","name":"Alarm Status is:","label":"Alarm Status is:","format":"","layout":"row-spread","x":1020,"y":340,"wires":[]},{"id":"2ab71d1e.218e52","type":"change","z":"3f007fb5.0a17f","name":"disarming","rules":[{"t":"set","p":"payload","pt":"msg","to":"Alarm Disarming","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":160,"y":420,"wires":[["67dce5c.a3f2a1c","d1e6997.356de68"]]},{"id":"a3e9d930.74f708","type":"change","z":"3f007fb5.0a17f","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"DISARMED","tot":"str"},{"t":"set","p":"color","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":380,"wires":[["891c099c.c29aa8"]]},{"id":"758d43fa.31f95c","type":"function","z":"3f007fb5.0a17f","name":"countdown_text","func":"msg.txt={\"payload\":\"ARMED\",\"color\":\"red\"}\nmsg.color={\"color\":\"red\"}\nfor (var i=5; i>0; i--) {\n    node.send({payload:\".. \"+i+\" ..\"})\n    }\n//return null;\nreturn msg.txt;\n","outputs":1,"noerr":0,"x":600,"y":260,"wires":[["5d835318.71c28c"]]},{"id":"5d835318.71c28c","type":"delay","z":"3f007fb5.0a17f","name":"","pauseType":"rate","timeout":"2","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":790,"y":260,"wires":[["762bb0bc.d53cd","891c099c.c29aa8"]]},{"id":"762bb0bc.d53cd","type":"debug","z":"3f007fb5.0a17f","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":1010,"y":260,"wires":[]},{"id":"67dce5c.a3f2a1c","type":"delay","z":"3f007fb5.0a17f","name":"Delay 0.5 Seconds","pauseType":"delay","timeout":"500","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":370,"y":380,"wires":[["a3e9d930.74f708"]]},{"id":"652c802b.90614","type":"delay","z":"3f007fb5.0a17f","name":"Delay 0.25 Seconds","pauseType":"delay","timeout":"250","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":380,"y":260,"wires":[["758d43fa.31f95c"]]},{"id":"891c099c.c29aa8","type":"ui_template","z":"3f007fb5.0a17f","group":"e3dfdad2.15b088","name":"","order":16,"width":"2","height":"1","format":"<style>\n.center {\n  margin: auto;\n  color:yellow;\n  }\n</style>\n\n<div class=\"center\">\n    <p style=\"color:{{msg.color}}\"><b>{{msg.payload}}</b></p>\n</div>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1000,"y":380,"wires":[[]]},{"id":"b76a7f99.d3e58","type":"ui_ui_control","z":"3f007fb5.0a17f","name":"go to screen","x":790,"y":440,"wires":[[]]},{"id":"1c262b11.3fffd5","type":"ui_ui_control","z":"3f007fb5.0a17f","name":"go to screen","x":790,"y":200,"wires":[[]]},{"id":"46cadbac.366154","type":"ui_button","z":"3f007fb5.0a17f","name":"","group":"723b1156.d0dde","order":2,"width":0,"height":0,"passthru":false,"label":"switch to Tab A","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":100,"y":280,"wires":[["fe2de2d8.bb22c"]]},{"id":"ce34ab74.ab3ca8","type":"inject","z":"3f007fb5.0a17f","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":100,"y":200,"wires":[["fe2de2d8.bb22c"]]},{"id":"1f10ad8b.f28722","type":"inject","z":"3f007fb5.0a17f","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":100,"y":380,"wires":[["2ab71d1e.218e52"]]},{"id":"906c887a.dec738","type":"debug","z":"3f007fb5.0a17f","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":770,"y":480,"wires":[]},{"id":"28275f91.91f01","type":"debug","z":"3f007fb5.0a17f","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":770,"y":160,"wires":[]},{"id":"4c856646.51bf58","type":"ui_button","z":"3f007fb5.0a17f","name":"","group":"4fca4d4a.2e6784","order":2,"width":0,"height":0,"passthru":false,"label":"switch to Tab B","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":120,"y":460,"wires":[["2ab71d1e.218e52"]]},{"id":"38d6322f.70265e","type":"trigger","z":"3f007fb5.0a17f","op1":"","op2":"{\"tab\":\"Tab A\"}","op1type":"nul","op2type":"json","duration":"1","extend":false,"units":"s","reset":"","bytopic":"all","name":"","x":340,"y":200,"wires":[["1c262b11.3fffd5"]]},{"id":"d1e6997.356de68","type":"trigger","z":"3f007fb5.0a17f","op1":"","op2":"{\"tab\":\"Tab B\"}","op1type":"nul","op2type":"json","duration":"1","extend":false,"units":"s","reset":"","bytopic":"all","name":"","x":340,"y":440,"wires":[["b76a7f99.d3e58"]]},{"id":"e3dfdad2.15b088","type":"ui_group","name":"Group 2","tab":"22274233.5a7a2e","order":2,"disp":true,"width":6},{"id":"723b1156.d0dde","type":"ui_group","z":"","name":"Default","tab":"8758d4d8.fb5b28","disp":true,"width":"6","collapse":false},{"id":"4fca4d4a.2e6784","type":"ui_group","z":"","name":"Default","tab":"22274233.5a7a2e","order":1,"disp":true,"width":"6","collapse":false},{"id":"22274233.5a7a2e","type":"ui_tab","z":"","name":"Tab A","icon":"dashboard","order":4,"disabled":false,"hidden":false},{"id":"8758d4d8.fb5b28","type":"ui_tab","z":"","name":"Tab B","icon":"dashboard","order":5,"disabled":false,"hidden":false}]

Thx.

1 Like

I have tested and could not see any issue.
It works well always clicking once.

1 Like

Thanks for testing.
When I press "switch to tab B", I get text disarmed and then nothing happened. If I press button again switching to other tab is ok.
Or if I press on any space on dashboard, switch is executed.
Will try tomorrow again.
Regards

It would be interesting if you could modify the flow as shown below (simplify and add a debug node) and then share here the result of clicking the button switch to Tab B. This would allow us to verify if the Ui_control node is receiving the switch message correctly (after one single click).

What is your configuration (browser, Node-RED version, Node.JS version, OS, etc) ?

r-01

Hi, Andrei
I modify flow as you say and add debug on both side.
Flow is attached, also animation.

[{"id":"e40a888.22d8178","type":"trigger","z":"c8584ea5.55b1b","op1":"","op2":"{\"tab\":\"Tab A\"}","op1type":"nul","op2type":"json","duration":"1","extend":false,"units":"s","reset":"","bytopic":"all","name":"","x":340,"y":200,"wires":[["c26ea290.99324","b1589960.617768"]]},{"id":"69f1698e.6cf938","type":"change","z":"c8584ea5.55b1b","name":"arming","rules":[{"t":"set","p":"payload","pt":"msg","to":"Alarm Arming in 5 Seconds","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":170,"y":240,"wires":[["e40a888.22d8178"]]},{"id":"1b59c6dd.82f1d9","type":"ui_text","z":"c8584ea5.55b1b","group":"d5682eba.22f7","order":14,"width":"4","height":"1","name":"Alarm Status is:","label":"Alarm Status is:","format":"","layout":"row-spread","x":1020,"y":340,"wires":[]},{"id":"26c13ea9.ac9012","type":"change","z":"c8584ea5.55b1b","name":"disarming","rules":[{"t":"set","p":"payload","pt":"msg","to":"Alarm Disarming","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":160,"y":420,"wires":[["60d53124.ca21f"]]},{"id":"3ffe07d.ca0daf8","type":"change","z":"c8584ea5.55b1b","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"DISARMED","tot":"str"},{"t":"set","p":"color","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":380,"wires":[["8034f59e.1ea2f8","17dc356d.74d39b"]]},{"id":"44830cc4.36fe04","type":"function","z":"c8584ea5.55b1b","name":"countdown_text","func":"msg.txt={\"payload\":\"ARMED\",\"color\":\"red\"}\nmsg.color={\"color\":\"red\"}\nfor (var i=5; i>0; i--) {\n    node.send({payload:\".. \"+i+\" ..\"})\n    }\n//return null;\nreturn msg.txt;\n","outputs":1,"noerr":0,"x":600,"y":260,"wires":[["3fb56cf2.539254"]]},{"id":"3fb56cf2.539254","type":"delay","z":"c8584ea5.55b1b","name":"","pauseType":"rate","timeout":"2","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":790,"y":260,"wires":[["169c7adc.3db275","8034f59e.1ea2f8","17dc356d.74d39b"]]},{"id":"169c7adc.3db275","type":"debug","z":"c8584ea5.55b1b","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":1010,"y":260,"wires":[]},{"id":"eb4ae784.dc7f88","type":"delay","z":"c8584ea5.55b1b","name":"Delay 0.5 Seconds","pauseType":"delay","timeout":"500","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":370,"y":380,"wires":[["3ffe07d.ca0daf8"]]},{"id":"a5b15eb1.29c91","type":"delay","z":"c8584ea5.55b1b","name":"Delay 0.25 Seconds","pauseType":"delay","timeout":"250","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":380,"y":260,"wires":[["44830cc4.36fe04"]]},{"id":"8034f59e.1ea2f8","type":"ui_template","z":"c8584ea5.55b1b","group":"d5682eba.22f7","name":"","order":16,"width":"2","height":"1","format":"<style>\n.center {\n  margin: auto;\n  color:yellow;\n  }\n</style>\n\n<div class=\"center\">\n    <p style=\"color:{{msg.color}}\"><b>{{msg.payload}}</b></p>\n</div>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1000,"y":380,"wires":[[]]},{"id":"a77c260.da7f5d8","type":"ui_ui_control","z":"c8584ea5.55b1b","name":"go to screen","x":790,"y":440,"wires":[[]]},{"id":"c26ea290.99324","type":"ui_ui_control","z":"c8584ea5.55b1b","name":"go to screen","x":790,"y":200,"wires":[[]]},{"id":"1cafc7aa.50d6e8","type":"ui_button","z":"c8584ea5.55b1b","name":"","group":"b5884642.a2cb38","order":2,"width":0,"height":0,"passthru":false,"label":"switch to Tab A","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":100,"y":280,"wires":[["69f1698e.6cf938"]]},{"id":"cde3b626.779538","type":"inject","z":"c8584ea5.55b1b","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":100,"y":200,"wires":[["69f1698e.6cf938"]]},{"id":"e49e966b.c08048","type":"inject","z":"c8584ea5.55b1b","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":100,"y":380,"wires":[["26c13ea9.ac9012"]]},{"id":"e5cf6799.7ed738","type":"debug","z":"c8584ea5.55b1b","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":790,"y":480,"wires":[]},{"id":"b1589960.617768","type":"debug","z":"c8584ea5.55b1b","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":790,"y":160,"wires":[]},{"id":"fc809b50.321ef8","type":"ui_button","z":"c8584ea5.55b1b","name":"","group":"a7573f8f.c7771","order":2,"width":0,"height":0,"passthru":false,"label":"switch to Tab B","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":120,"y":460,"wires":[["26c13ea9.ac9012"]]},{"id":"60d53124.ca21f","type":"trigger","z":"c8584ea5.55b1b","op1":"","op2":"{\"tab\":\"Tab B\"}","op1type":"nul","op2type":"json","duration":"1","extend":false,"units":"s","reset":"","bytopic":"all","name":"","x":340,"y":440,"wires":[["a77c260.da7f5d8","e5cf6799.7ed738"]]},{"id":"17dc356d.74d39b","type":"ui_template","z":"c8584ea5.55b1b","group":"1d207dea.69ffa2","name":"","order":2,"width":"2","height":"1","format":"<style>\n.center {\n  margin: auto;\n  color:yellow;\n  }\n</style>\n\n<div class=\"center\">\n    <p style=\"color:{{msg.color}}\"><b>{{msg.payload}}</b></p>\n</div>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1220,"y":420,"wires":[[]]},{"id":"4158b049.80bad","type":"ui_text","z":"c8584ea5.55b1b","group":"1d207dea.69ffa2","order":1,"width":"4","height":"1","name":"Alarm Status is:","label":"Alarm Status is:","format":"","layout":"row-spread","x":1240,"y":340,"wires":[]},{"id":"d5682eba.22f7","type":"ui_group","z":"","name":"Group 2","tab":"2d8735eb.de85ea","order":2,"disp":true,"width":"6","collapse":false},{"id":"b5884642.a2cb38","type":"ui_group","z":"","name":"Default","tab":"1ce7b011.7e159","disp":true,"width":"6","collapse":false},{"id":"a7573f8f.c7771","type":"ui_group","z":"","name":"Default","tab":"b3fdfb42.911998","order":1,"disp":true,"width":"6","collapse":false},{"id":"1d207dea.69ffa2","type":"ui_group","z":"","name":"Group 2","tab":"2d8735eb.de85ea","order":2,"disp":true,"width":"6","collapse":false},{"id":"2d8735eb.de85ea","type":"ui_tab","z":"","name":"Tab 5","icon":"dashboard","order":5,"disabled":true,"hidden":true},{"id":"1ce7b011.7e159","type":"ui_tab","z":"","name":"Tab B","icon":"dashboard","order":5,"disabled":false,"hidden":false},{"id":"b3fdfb42.911998","type":"ui_tab","z":"","name":"Tab A","icon":"dashboard","order":4,"disabled":false,"hidden":false}]

ui_control

Ui_control receive switch message on both side on single click, but execute only when mouse move from button(button lost focus),or on double click on button.

Can you try click(single) button and dont make any movement?

I try on Chrome and Firefox browser,result are the same.

Node-RED version: v0.20.5
Node.js version: v8.15.0
Dashboard version 2.15.4

Desktop PC Windows 10

Hi @markost , really interesting seeing the behavior in the animation. For my surprise, I could not reproduce. I say surprise as the issue is clear (as per your animation) and our setup is almost identical. I will just upgrade my dashboard to be on the same version as you and will test again. I will let you know the results.

PS: In animation I recorded I was moving the mouse out of the button not because it was not responding but because I wanted to show, somehow, that I was clicking the button. I saved the click sound but of course, can not embed sound in an animated gif.

Confirmed here - can you raise an Issue against the dashboard project please so we can track it.
Thanks

Indeed, I could reproduce in Microsoft Edge but not in Chrome (version 75.0.3770.80).

TEST-06

After a little research, here are some new information ...

Since it has already been determined that the outgoing message from ui_control is ok (debug).
By moving the mouse from the button, switching the tab occurs if the switching is not executed by pressing the button.

All this told me that the whole thing could be related to the events on the screen (refreshing data or something like that).

I simulated events on both tabs by injecting the timestamp (repeat interval = 10 seconds).

The conclusion is that when the switching tab is not executed via the button(single press fail and mouse cursor not moving from the button), switching is executed after the timestamp is injected!

Flow is attached.

[{"id":"7d5fcc7e.0fd6a4","type":"tab","label":"Flow 3","disabled":false,"info":""},{"id":"78b3d31a.7f5c3c","type":"ui_ui_control","z":"7d5fcc7e.0fd6a4","name":"go to screen","x":410,"y":300,"wires":[["69ed687c.0525e8"]]},{"id":"70dbf86b.e9f448","type":"ui_ui_control","z":"7d5fcc7e.0fd6a4","name":"go to screen","x":410,"y":260,"wires":[["3b15b950.8b7b26"]]},{"id":"674a66de.dd4898","type":"ui_button","z":"7d5fcc7e.0fd6a4","name":"","group":"723b1156.d0dde","order":2,"width":0,"height":0,"passthru":false,"label":"switch to Tab A","tooltip":"","color":"","bgcolor":"","icon":"","payload":"{\"tab\":\"Tab A\"}","payloadType":"json","topic":"","x":180,"y":260,"wires":[["70dbf86b.e9f448"]]},{"id":"d2a285d3.d97318","type":"debug","z":"7d5fcc7e.0fd6a4","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":630,"y":100,"wires":[]},{"id":"d21a727c.39ff3","type":"ui_button","z":"7d5fcc7e.0fd6a4","name":"","group":"4fca4d4a.2e6784","order":1,"width":0,"height":0,"passthru":false,"label":"switch to Tab B","tooltip":"","color":"","bgcolor":"","icon":"","payload":"{\"tab\":\"Tab B\"}","payloadType":"json","topic":"","x":180,"y":300,"wires":[["78b3d31a.7f5c3c"]]},{"id":"e68691c.6a2867","type":"inject","z":"7d5fcc7e.0fd6a4","name":"","topic":"","payload":"","payloadType":"date","repeat":"10","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":100,"wires":[["d2a285d3.d97318","f3b9cde7.d29a5"]]},{"id":"4f36b39d.3e1e8c","type":"ui_text","z":"7d5fcc7e.0fd6a4","group":"4fca4d4a.2e6784","order":2,"width":0,"height":0,"name":"","label":"text on Tab A","format":"{{msg.payload}}","layout":"row-spread","x":650,"y":60,"wires":[]},{"id":"3733ee45.be53f2","type":"inject","z":"7d5fcc7e.0fd6a4","name":"","topic":"","payload":"","payloadType":"date","repeat":"10","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":140,"wires":[["80ab252b.fcd0d8","85af845c.39fb58"]]},{"id":"616a23bf.b8d70c","type":"ui_text","z":"7d5fcc7e.0fd6a4","group":"723b1156.d0dde","order":2,"width":0,"height":0,"name":"","label":"text on Tab B","format":"{{msg.payload}}","layout":"row-spread","x":650,"y":180,"wires":[]},{"id":"80ab252b.fcd0d8","type":"debug","z":"7d5fcc7e.0fd6a4","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":630,"y":140,"wires":[]},{"id":"85af845c.39fb58","type":"moment","z":"7d5fcc7e.0fd6a4","name":"","topic":"","input":"payload","format":"HH:mm:ss","locale":"","output":"payload","fakeUTC":false,"x":440,"y":180,"wires":[["616a23bf.b8d70c"]]},{"id":"f3b9cde7.d29a5","type":"moment","z":"7d5fcc7e.0fd6a4","name":"","topic":"","input":"payload","format":"HH:mm:ss","locale":"","output":"payload","fakeUTC":false,"x":440,"y":60,"wires":[["4f36b39d.3e1e8c"]]},{"id":"3b15b950.8b7b26","type":"debug","z":"7d5fcc7e.0fd6a4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":630,"y":260,"wires":[]},{"id":"69ed687c.0525e8","type":"debug","z":"7d5fcc7e.0fd6a4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":630,"y":300,"wires":[]},{"id":"723b1156.d0dde","type":"ui_group","z":"","name":"Default","tab":"8758d4d8.fb5b28","disp":true,"width":"6","collapse":false},{"id":"4fca4d4a.2e6784","type":"ui_group","z":"","name":"Default","tab":"22274233.5a7a2e","order":1,"disp":true,"width":"6","collapse":false},{"id":"8758d4d8.fb5b28","type":"ui_tab","z":"","name":"Tab B","icon":"dashboard","order":5,"disabled":false,"hidden":false},{"id":"22274233.5a7a2e","type":"ui_tab","z":"","name":"Tab A","icon":"dashboard","order":4,"disabled":false,"hidden":false}]

It is possible that the first set of several switching will be done correctly, do a few more switching until an error occurs. Then wait, within 10 seconds or less, the switching will be done.

Do not move the mouse from the button.

I hope this information will help solve the problem.

Regards

Thanks Dave,

Issue opened: ui_control only triggers the UI tab after some element of the UI lose focus #511

eh ? this was raised as Issue 508 back when it happened - and closed shortly afterwards by https://github.com/node-red/node-red-dashboard/commit/235ad84c4e39bc64822e5a1ee3629b079b437058
Is this the same thing ? or different ?

My apologies Dave. Indeed it is working fine with the latest dashboard release. My guess is that I did not restart Node-RED after upgrading the dashboard this morning. :man_facepalming:

So OK to close then ?

Yes Dave, all right to close indeed. Thanks a lot.