# Change the tab webpage (dashboard) every 6 seconds

**URL:** <https://discourse.nodered.org/t/change-the-tab-webpage-dashboard-every-6-seconds/37638>\
**Category:** Dashboard\
**Created:** [17 December 2020 10:56 UTC](https://discourse.nodered.org/t/change-the-tab-webpage-dashboard-every-6-seconds/37638 "2020-12-17T10:56:39Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![RAULXXX](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/raulxxx/32/27989_2.png) [@RAULXXX](https://discourse.nodered.org/u/RAULXXX)\
**Post date:** [17 December 2020 10:56 UTC](https://discourse.nodered.org/t/change-the-tab-webpage-dashboard-every-6-seconds/37638/1 "2020-12-17T10:56:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [17 December 2020 11:22 UTC](https://discourse.nodered.org/t/change-the-tab-webpage-dashboard-every-6-seconds/37638/2 "2020-12-17T11:22:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![fellinga](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fellinga/32/30631_2.png) [@fellinga](https://discourse.nodered.org/u/fellinga)\
**Post date:** [17 December 2020 11:24 UTC](https://discourse.nodered.org/t/change-the-tab-webpage-dashboard-every-6-seconds/37638/3 "2020-12-17T11:24:03Z")

</div>

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:

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![RAULXXX](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/raulxxx/32/27989_2.png) [@RAULXXX](https://discourse.nodered.org/u/RAULXXX)\
**Post date:** [17 December 2020 12:18 UTC](https://discourse.nodered.org/t/change-the-tab-webpage-dashboard-every-6-seconds/37638/4 "2020-12-17T12:18:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fellinga](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fellinga/32/30631_2.png) [@fellinga](https://discourse.nodered.org/u/fellinga)\
**Post date:** [17 December 2020 12:31 UTC](https://discourse.nodered.org/t/change-the-tab-webpage-dashboard-every-6-seconds/37638/5 "2020-12-17T12:31:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![RAULXXX](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/raulxxx/32/27989_2.png) [@RAULXXX](https://discourse.nodered.org/u/RAULXXX)\
**Post date:** [17 December 2020 12:39 UTC](https://discourse.nodered.org/t/change-the-tab-webpage-dashboard-every-6-seconds/37638/6 "2020-12-17T12:39:42Z")

</div>

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

thank you

---

<div class="post-metadata">

**Author:** ![meeki007](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/meeki007/32/12499_2.png) [@meeki007](https://discourse.nodered.org/u/meeki007)\
**Post date:** [17 December 2020 12:42 UTC](https://discourse.nodered.org/t/change-the-tab-webpage-dashboard-every-6-seconds/37638/7 "2020-12-17T12:42:40Z")

</div>

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.

 ![Screenshot from 2020-12-17 07-39-18](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/8/f8bc0831cbb5dde09a5c657c21b85c318d3683fa.jpeg)

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![RAULXXX](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/raulxxx/32/27989_2.png) [@RAULXXX](https://discourse.nodered.org/u/RAULXXX)\
**Post date:** [17 December 2020 14:52 UTC](https://discourse.nodered.org/t/change-the-tab-webpage-dashboard-every-6-seconds/37638/8 "2020-12-17T14:52:26Z")

</div>

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](https://discourse.nodered.org/uploads/short-url/9RJErpFm4yHczpFkFiQbPXrGta4.json) (1.6 KB)

thank you in advance

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [17 December 2020 15:15 UTC](https://discourse.nodered.org/t/change-the-tab-webpage-dashboard-every-6-seconds/37638/9 "2020-12-17T15:15:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![RAULXXX](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/raulxxx/32/27989_2.png) [@RAULXXX](https://discourse.nodered.org/u/RAULXXX)\
**Post date:** [17 December 2020 15:38 UTC](https://discourse.nodered.org/t/change-the-tab-webpage-dashboard-every-6-seconds/37638/10 "2020-12-17T15:38:28Z")

</div>

all right, thank you all

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [16 January 2021 15:38 UTC](https://discourse.nodered.org/t/change-the-tab-webpage-dashboard-every-6-seconds/37638/11 "2021-01-16T15:38:43Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.