Change the tab webpage (dashboard) every 6 seconds

[RAULXXX]

Hi everyone,

The issue that i am trying to solve is that i have 3 different urls with dashboards and i want to show one and switching to the others every 5 seconds.

How i can do it in a node-red ui to show a website and then with a funtion select another website every 5 seconds?

Thank you for any clue

[Colin]

When you say you have urls with dashboards are they all from the same node-red server? If so then do you mean that you just want automatically to switch between different tabs in dashboard? If so then you can use a ui_control node to do that.

[fellinga]

If they are not just on different tabs you could use the new iFrame node, otherwise I would go with @Colins solution.

This is a really quick draft for the iFrame solution, but it seems to be working:

[{"id":"dbe6315b.b053e","type":"inject","z":"d8cb3879.806298","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"5","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":180,"y":140,"wires":[["e286aca3.4c51c"]]},{"id":"e286aca3.4c51c","type":"function","z":"d8cb3879.806298","name":"","func":"if (context.get(\"counter\") === undefined) {\n    context.set(\"counter\", 0)\n}\nconst urls = [\"https://www.nodered.org\", \"https://www.nodered.org\", \"https://www.nodered.org\"];\n\nmsg.url = urls[context.get(\"counter\")];\ncontext.set(\"counter\", context.get(\"counter\")+1);\nif (context.get(\"counter\") >= urls.length) context.set(\"counter\", 0);\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":380,"y":140,"wires":[["37a06334.a74afc"]]},{"id":"37a06334.a74afc","type":"ui_iframe","z":"d8cb3879.806298","group":"119bd180.ae754f","name":"","order":0,"width":"6","height":"6","url":"","origin":"*","x":550,"y":140,"wires":[[]]},{"id":"119bd180.ae754f","type":"ui_group","name":"Default","tab":"26b38e24.03fa62","order":1,"disp":true,"width":"6","collapse":false},{"id":"26b38e24.03fa62","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

[RAULXXX]

great, that works but that webpages takes 3-4 seconds to load.

I would prefer to have in different tabs and then change the tab and we can see instantly the wepage

thank you

[fellinga]

Well you can also add 3 different iFrame nodes (with a static URL) to 3 different tabs. And then change the tabs with the ui_control node.

[RAULXXX]

please do you can send me an example node, i am not very used to that nodes

thank you

[meeki007]

Here is an example flow. I do not know your skill level so I kept it real simple. Normally id write up as much as i could in a function node, but I've tried to keep this simple stepping stone for all.

More logic needs to be added to this to keep a user from injecting if they try to switch tabs themselves etc.
again stepping stone.

[{"id":"ee44996b.a8c918","type":"ui_text","z":"b6ededdd.cfc9c","group":"ffe0435f.9ab338","order":1,"width":0,"height":0,"name":"","label":"In 5 seconds this will change tabs","format":"{{msg.payload}}","layout":"row-center","x":860,"y":540,"wires":[]},{"id":"3072d720.5f444","type":"inject","z":"b6ededdd.cfc9c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":120,"y":260,"wires":[["7dfe9e0d.0004c"]]},{"id":"7dfe9e0d.0004c","type":"change","z":"b6ededdd.cfc9c","name":"","rules":[{"t":"set","p":"seconds_left","pt":"flow","to":"5","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":320,"wires":[["cc4825be.310c68"]]},{"id":"cc4825be.310c68","type":"switch","z":"b6ededdd.cfc9c","name":"if flow.seconds_left is > 0 , else","property":"seconds_left","propertyType":"flow","rules":[{"t":"gt","v":"0","vt":"num"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":400,"y":380,"wires":[["81e536b7.0c5b18"],["66035651.eccfd"]]},{"id":"81e536b7.0c5b18","type":"change","z":"b6ededdd.cfc9c","name":"set msg.paylod to value of flow.seconds_left","rules":[{"t":"set","p":"payload","pt":"msg","to":"seconds_left","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":440,"wires":[["ee44996b.a8c918","3f536d.b4aadc94","2a1ac067.419ac","80eddbd7.402658"]]},{"id":"3f536d.b4aadc94","type":"delay","z":"b6ededdd.cfc9c","name":"","pauseType":"delay","timeout":"1","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":780,"y":460,"wires":[["bc9bf31d.e71778"]]},{"id":"bc9bf31d.e71778","type":"function","z":"b6ededdd.cfc9c","name":"subtract 1 from payload","func":"var seconds_left = msg.payload;\nseconds_left = seconds_left - 1;\nmsg.payload = seconds_left;\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":990,"y":460,"wires":[["860e4073.6f9ab"]]},{"id":"860e4073.6f9ab","type":"change","z":"b6ededdd.cfc9c","name":"","rules":[{"t":"set","p":"seconds_left","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1240,"y":460,"wires":[["cc4825be.310c68"]]},{"id":"2a1ac067.419ac","type":"ui_text","z":"b6ededdd.cfc9c","group":"783d3cd8.456194","order":0,"width":0,"height":0,"name":"","label":"In 5 seconds this will change tabs","format":"{{msg.payload}}","layout":"row-spread","x":860,"y":620,"wires":[]},{"id":"460c4ace.34ca14","type":"ui_ui_control","z":"b6ededdd.cfc9c","name":"","events":"all","x":120,"y":340,"wires":[["20d7eeda.cb307a","7dfe9e0d.0004c"]]},{"id":"20d7eeda.cb307a","type":"debug","z":"b6ededdd.cfc9c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":110,"y":380,"wires":[]},{"id":"d75c45f9.1e29f","type":"comment","z":"b6ededdd.cfc9c","name":"tab0","info":"","x":770,"y":500,"wires":[]},{"id":"bfccd3ed.1e7db8","type":"comment","z":"b6ededdd.cfc9c","name":"tab1","info":"","x":770,"y":580,"wires":[]},{"id":"66035651.eccfd","type":"switch","z":"b6ededdd.cfc9c","name":"if tab = 0,1,2","property":"tab","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"},{"t":"eq","v":"1","vt":"num"},{"t":"eq","v":"2","vt":"str"}],"checkall":"true","repair":false,"outputs":3,"x":670,"y":320,"wires":[["9ee71055.f9b6f8"],["b8264989.b6796"],["ded05e81.70dc48"]]},{"id":"26cb0a37.8a783e","type":"comment","z":"b6ededdd.cfc9c","name":"tab2","info":"","x":770,"y":660,"wires":[]},{"id":"80eddbd7.402658","type":"ui_text","z":"b6ededdd.cfc9c","group":"1518ec59.af2a4c","order":0,"width":0,"height":0,"name":"","label":"In 5 seconds this will change tabs","format":"{{msg.payload}}","layout":"row-spread","x":870,"y":700,"wires":[]},{"id":"ded05e81.70dc48","type":"change","z":"b6ededdd.cfc9c","name":"set msg.payload to thetab0","rules":[{"t":"set","p":"payload","pt":"msg","to":"0","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":940,"y":380,"wires":[["aca7a96c.5dcc9","1294c20d.d15116"]]},{"id":"b8264989.b6796","type":"change","z":"b6ededdd.cfc9c","name":"set msg.payload to thetab2","rules":[{"t":"set","p":"payload","pt":"msg","to":"2","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":940,"y":340,"wires":[["aca7a96c.5dcc9","1294c20d.d15116"]]},{"id":"9ee71055.f9b6f8","type":"change","z":"b6ededdd.cfc9c","name":"set msg.payload to thetab1","rules":[{"t":"set","p":"payload","pt":"msg","to":"1","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":940,"y":300,"wires":[["aca7a96c.5dcc9","1294c20d.d15116"]]},{"id":"aca7a96c.5dcc9","type":"ui_ui_control","z":"b6ededdd.cfc9c","name":"","events":"all","x":1200,"y":320,"wires":[[]]},{"id":"1294c20d.d15116","type":"debug","z":"b6ededdd.cfc9c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1190,"y":360,"wires":[]},{"id":"ffe0435f.9ab338","type":"ui_group","name":"thetab0","tab":"d7f62a9e.f929b8","order":1,"disp":true,"width":"6","collapse":false},{"id":"783d3cd8.456194","type":"ui_group","name":"thetab1","tab":"9424226a.dbb8a","order":1,"disp":true,"width":"6","collapse":false},{"id":"1518ec59.af2a4c","type":"ui_group","name":"thetab2","tab":"efb2779c.f4d618","order":2,"disp":true,"width":"6","collapse":false},{"id":"d7f62a9e.f929b8","type":"ui_tab","name":"tab0","icon":"dashboard","disabled":false,"hidden":false},{"id":"9424226a.dbb8a","type":"ui_tab","name":"tab1","icon":"dashboard","disabled":false,"hidden":false},{"id":"efb2779c.f4d618","type":"ui_tab","name":"tab2","icon":"dashboard","disabled":false,"hidden":false}]

[RAULXXX]

thank you for your reply

it takes the same time to load the webpage as the answer by @fellinga

Is there a way for example to hide the website and then make it visible and only change the visibility of the tabs.

I was thinking that the tabs would work as in the chrome browser that you can change the tab and see the webpage instantly

thats my solution where you can see the problem of loading time of the websites

node.json (1.6 KB)

thank you in advance

[Colin]

When you switch to a tab containing an iframe the page is loaded then, and reloaded if you switch away from that tab and back again.

[RAULXXX]

all right, thank you all