How To: Fast Switch Between Dashboards with Fully Kiosk Browser

I’m using the Fully Kiosk Browser Controller on my Hubitat hub to push a door-open Sharptools dashboard URL to my front and back door tablets when those tablets open.

When I set a tile on my home dashboard to link to that door-open dashboard, it opens smoothly and immediately. But when I push the dashboard URL to the tablet, it goes through the entire login procedure, showing the blue bar at the top of the screen with the account link, then loads the dashboard several seconds later.

The delay when the URL is pushed kind of ruins the functionality of having the door status dashboard pop up when the door opens. I’m wondering if there is an argument I can append to the URL or some other way to push the URL such that it behaves like tapping a tile, rather than loading the page from scratch.

You can use the following steps to perform ‘client side’ navigation between dashboards in SharpTools (using Fully Kiosk Browser’s API) which should result in the same fast navigation you are accustom to when tapping on dashboard tiles within a dashboard:

1. Note the URL Path to your Dashboard

Open your desired dashboard and make note of the path. For example, if my full dashboard URL was:

https://sharptools.io/dashboard/view/XXXXX

We just want the path at the end:

/dashboard/view/XXXXX

2. Fill in the postMessage template

Using the special postMessage API that SharpTools exposes, we can tell the browser to perform a client-side navigation to a dashboard rather than loading the URL as a new page.

The API takes the format:

postMessage({action:'navigate', route: { path: '/your/path/here'}})

And since we’re using the command within Fully Kiosk Browsers loadURL command, we must prepend javascript: to the beginning of it. So using our example above, our postMessage command would be:

javascript:postMessage({action:'navigate', route: { path: '/dashboard/view/XXXXX'}})

3. Use the result in the Fully Kiosk Browser loadURL command

Take the formatted postMessage command from the previous step and use it as the content of your loadURL command:

image

:warning: Important: this type of fast client side routing will only work when a SharpTools.io dashboard (or page) is already loaded in Fully Kiosk Browser. This is perfect for navigating between different SharpTools dashboards, but won’t work if you have a different website loaded in Fully Kiosk Browser for some reason.

4 Likes

Fantastic! Thank you. I didn’t know FKB could accept javascript commands in the loadURL field.

Can postMessage also handle commands like back() and forward()? Just for seeing, I tried javascript:back() in FKB, but it didn’t work. Maybe a syntax issue.

Edit: Answered my own question: javascript:history.back() works, for anyone who’s curious.

1 Like

This is awesome, Josh! Can’t wait to try it out! Thank you for looking into this…it should help in a project I’m working on (slowly)…

1 Like

Is the fast switching doable if not using the Fully Browser device handler? I was thinking of running the timers that does the loadURL in node red so my hub doesn’t get too bogged down with too many schedules.

How do you plan on having Node-RED call the desired command?

If you plan on calling the Fully Kiosk Browser HTTP API directly from Node-RED, that should work fine as that’s all the FKB device driver is doing. You’ll probably have to URL encode the parameter though as the driver does that for you.

I haven’t gotten to that part yet lol, but I have done http request node before. The part I’m not sure of is how to format this part:

javascript:postMessage({action:'navigate', route: { path: '/dashboard/view/XXXXX'}})

To something like below…

http://192.168.10.16:2323/?cmd=loadUrl&url=[url]&password=[pass]

If you don’t have a preferred method of URL encoding values, you can use a tool like urlencoder.org to encode the value:

So the URL Encoded result looks something like:

javascript%3ApostMessage%28%7Baction%3A%27navigate%27%2C%20route%3A%20%7B%20path%3A%20%27%2Fdashboard%2Fview%2FXXXXX%27%7D%7D%29

And then you put that value into the spot where you have [url] (and similarly, whatever password you set for the FKB admin UI):

http://192.168.10.16:2323/?cmd=loadUrl&url=javascript%3ApostMessage%28%7Baction%3A%27navigate%27%2C%20route%3A%20%7B%20path%3A%20%27%2Fdashboard%2Fview%2FXXXXX%27%7D%7D%29&password=1234
                                           ↑
                                           Your URL encoded value                              

Edit: Don’t forget that you need Remote Administration turned on in Fully Kiosk Browser for this to work. You should be able to copy-and-paste the final URL into a normal web browser from a device on your network and it should trigger the navigation within your device running FKB.

2 Likes

Ah gotcha, I wasn’t sure I can stuff all that information in there. Something I have not tried before.

2 Likes

6 posts were split to a new topic: Improve navigation time between dashboards