# Auto shift tabs

**URL:** <https://discourse.nodered.org/t/auto-shift-tabs/7139>\
**Category:** Dashboard\
**Created:** [22 January 2019 11:41 UTC](https://discourse.nodered.org/t/auto-shift-tabs/7139 "2019-01-22T11:41:46Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![olab](https://avatars.discourse-cdn.com/v4/letter/o/d07c76/32.png) [@olab](https://discourse.nodered.org/u/olab)\
**Post date:** [22 January 2019 11:41 UTC](https://discourse.nodered.org/t/auto-shift-tabs/7139/1 "2019-01-22T11:41:46Z")

</div>

Hi, folks,

I've just started using Node red and get more and more exided!

My dashboard contains of multiple tabs with different data. There also a few tabs with external content.

I wonder, would it be possible to create automatic shift between the tabs to create some kind of slideshow running on public display, without user interaction?

Kind regards

o

---

<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:** [22 January 2019 12:03 UTC](https://discourse.nodered.org/t/auto-shift-tabs/7139/2 "2019-01-22T12:03:21Z")

</div>

The ui control node can be sent messages to tell it to switch tabs. You could arrange to send it a sequence of messages to do what you want.

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [22 January 2019 13:08 UTC](https://discourse.nodered.org/t/auto-shift-tabs/7139/3 "2019-01-22T13:08:18Z")

</div>

> [@olab](#):
>
> automatic shift between the tabs to create some kind of slideshow running on public display, without user interaction?

There is a working flow doing exaclly that in this thread:

> [@Scrolling Dashboard Pages](https://discourse.nodered.org/t/scrolling-dashboard-pages/3282):
>
> I have many dashboard pages in my project. Some pages are for a specific machine, and some are for a specific department. Is there a node or solution on how to scroll through the pages on my dashboard? Example: Total number of pages: 25 Number of pages to be scrolled: 5 Page numbers to be scrolled: /ui/#/0, /ui/#/3, /ui/#/7, /ui/#/9, /ui/#/13 Thanks, Mike

---

<div class="post-metadata">

**Author:** ![olab](https://avatars.discourse-cdn.com/v4/letter/o/d07c76/32.png) [@olab](https://discourse.nodered.org/u/olab)\
**Post date:** [22 January 2019 13:33 UTC](https://discourse.nodered.org/t/auto-shift-tabs/7139/4 "2019-01-22T13:33:35Z")

</div>

This is absolutly great!

But what if different client sould run different shows like:

Client1: Tab1, tab3, tab7  
Client2: Tab1, tab4, tab5, tab6, tab7

Ola

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [22 January 2019 14:00 UTC](https://discourse.nodered.org/t/auto-shift-tabs/7139/5 "2019-01-22T14:00:56Z")

</div>

I can imagine a couple of different ways to modify the flow for that purpose as long as those users are not using a single instance of Node-RED at the same time, in which case they will visualize the same show.

---

<div class="post-metadata">

**Author:** ![olab](https://avatars.discourse-cdn.com/v4/letter/o/d07c76/32.png) [@olab](https://discourse.nodered.org/u/olab)\
**Post date:** [22 January 2019 14:03 UTC](https://discourse.nodered.org/t/auto-shift-tabs/7139/6 "2019-01-22T14:03:43Z")

</div>

All accessing the same «node-red-box» so I need to identify the client in some way..

O

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [22 January 2019 14:16 UTC](https://discourse.nodered.org/t/auto-shift-tabs/7139/7 "2019-01-22T14:16:29Z")

</div>

Could they self-identify via a text input and if the username is validated, then it launches the proper flow sequence? In any case, this would work only if clients are not accessing at the same time. You can use the ui-control node to monitor when a client "disconnects" and stop the auto tab shifting and return to the login page.

---

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [22 January 2019 15:46 UTC](https://discourse.nodered.org/t/auto-shift-tabs/7139/8 "2019-01-22T15:46:10Z")

</div>

The fact this is possible is exactly why I love Node-RED. Right now I work with a school that has a display screen in their entrance hall, and it uses some arcane server software to pull from different sources and display various data (school blog, twitter, bbc news, etc.)

Unfortunately it's riddled with bugs and barely manageable, so I'm planning on implementing this in Node-RED 🙂

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [22 January 2019 16:58 UTC](https://discourse.nodered.org/t/auto-shift-tabs/7139/9 "2019-01-22T16:58:59Z")

</div>

> [@olab](#):
>
> But what if different client sould run different shows like:
> 
> Client1: Tab1, tab3, tab7  
> Client2: Tab1, tab4, tab5, tab6, tab7

This modified flow is a step towards a better solution. It allows to configure several "show" sequences as well as to trigger them from the editor. Needs to be improved if the idea is to control the tirggering remotely.

 ![r-01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/8273fbd5c5e76537fba5e32de8d1c7a95214395e.png)

```auto
[{"id":"21693521.376e0a","type":"tab","label":"UI Control - Dynamic Dashboard Sequencer","disabled":false,"info":""},{"id":"34bd023b.a1d64e","type":"ui_ui_control","z":"21693521.376e0a","name":"","x":1460,"y":180,"wires":[[]]},{"id":"bee4c199.34293","type":"function","z":"21693521.376e0a","name":"Engine","func":"let tabIndex = context.get(\"tabIndex\") || 0;\nlet tabs = msg.tabs;\n \nfunction selectNextTab() \n{\n\n return tabs[tabIndex++] || (tabIndex=0, tabs[tabIndex++]); \n}\n\nmsg.payload = {\"tab\" : selectNextTab()};\ncontext.set(\"tabIndex\", tabIndex);\nreturn msg;\n","outputs":1,"noerr":0,"x":1320,"y":180,"wires":[["34bd023b.a1d64e"]]},{"id":"40c3b995.f3baa8","type":"ui_ui_control","z":"21693521.376e0a","name":"","x":820,"y":320,"wires":[[]]},{"id":"c9448a6e.fdd638","type":"function","z":"21693521.376e0a","name":"Cycle","func":"let tabIndex = context.tabIndex || 0;\nlet tabs = flow.get(\"tabs\"); \n\nfunction selectNextTab() \n{\n return tabs[tabIndex++] || (tabIndex=0, tabs[tabIndex++]); \n}\n\nmsg.payload = {\"tab\" : selectNextTab()};\ncontext.tabIndex = tabIndex;\nreturn msg;\n","outputs":1,"noerr":0,"x":590,"y":320,"wires":[["c333d695.a60f58","40c3b995.f3baa8"]]},{"id":"c333d695.a60f58","type":"debug","z":"21693521.376e0a","name":"","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","x":830,"y":360,"wires":[]},{"id":"bdf519b2.628e58","type":"trigger","z":"21693521.376e0a","op1":"","op2":"0","op1type":"date","op2type":"str","duration":"-5","extend":false,"units":"s","reset":"false","bytopic":"all","name":"","x":400,"y":320,"wires":[["c9448a6e.fdd638"]]},{"id":"5ca4169a.454768","type":"inject","z":"21693521.376e0a","name":"Stop Show","topic":"","payload":"false","payloadType":"bool","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":160,"y":340,"wires":[["bdf519b2.628e58"]]},{"id":"fd72ec38.49b46","type":"inject","z":"21693521.376e0a","name":"Start Show","topic":"","payload":"true","payloadType":"bool","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":160,"y":300,"wires":[["bdf519b2.628e58"]]},{"id":"d32f8ce6.1f1d9","type":"function","z":"21693521.376e0a","name":"Config","func":"tabConfig = {\n \"111\" : [1,2,3],\n \"222\" : [2,3,4],\n \"333\" : [3,4,5]\n}\n\nlet tab = tabConfig[msg.payload];\nmsg.tab = tab;\nflow.set(\"tabs\", tab);\nreturn msg;","outputs":1,"noerr":0,"x":310,"y":160,"wires":[["656b4297.06ff5c"]]},{"id":"656b4297.06ff5c","type":"debug","z":"21693521.376e0a","name":"","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"tab","targetType":"msg","x":460,"y":160,"wires":[]},{"id":"ca753cf8.98de2","type":"inject","z":"21693521.376e0a","name":"User 2","topic":"","payload":"222","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":150,"y":160,"wires":[["d32f8ce6.1f1d9"]]},{"id":"892aa64c.dff488","type":"inject","z":"21693521.376e0a","name":"User 3","topic":"","payload":"333","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":150,"y":200,"wires":[["d32f8ce6.1f1d9"]]},{"id":"9f79c7b8.ad7f38","type":"inject","z":"21693521.376e0a","name":"User 1","topic":"","payload":"111","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":150,"y":120,"wires":[["d32f8ce6.1f1d9"]]}]

```

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [22 January 2019 17:12 UTC](https://discourse.nodered.org/t/auto-shift-tabs/7139/10 "2019-01-22T17:12:02Z")

</div>

the ui\_control will report a socketid of a connecting client - commands sent back with the socketid intact will only go to that client - so you can direct things to a certain client... the trick of course is to associate the random socketid with the required screen.

(There is also socketip which shouldn't change so randomly - but it's the socketid that directs the messages.)

---

<div class="post-metadata">

**Author:** ![olab](https://avatars.discourse-cdn.com/v4/letter/o/d07c76/32.png) [@olab](https://discourse.nodered.org/u/olab)\
**Post date:** [23 January 2019 18:01 UTC](https://discourse.nodered.org/t/auto-shift-tabs/7139/11 "2019-01-23T18:01:20Z")

</div>

Hi,

I just found a way to do this. There is an extension for for Chrome called Tabulus Rotatum. This loads a set of tabs and switches from tab to tab after a configured pattern.

What's really nice is that the configuration can be loaded from web (node-red) [http://127.0.0.1:1880/Clientname](http://127.0.0.1:1880/Clientname)

By using this flow, a list can be set for each user/client.

````auto
[{"id":"61f08841.f4f7b8","type":"http in","z":"c7449229.fac738","name":"","url":"/ClientName","method":"get","upload":false,"swaggerDoc":"","x":270,"y":240,"wires":[["4eb76a2d.e1a624"]]},{"id":"4eb76a2d.e1a624","type":"template","z":"c7449229.fac738","name":"page","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"12;https://liveclock.net/\n10;https://h-a.no\n10;https://ibm.com\n10;https://aftenposten.no\n10;https://nrk.no","x":450,"y":240,"wires":[["93fbb579.e48588"]]},{"id":"93fbb579.e48588","type":"http response","z":"c7449229.fac738","name":"","x":590,"y":240,"wires":[]}]
```
````