How To: Fast Switch Between Dashboards with Fully Kiosk Browser

Joel_Kelley · June 11, 2020, 11:14pm

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.

josh · June 12, 2020, 12:28am

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:

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.

Joel_Kelley · June 12, 2020, 1:26am

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.

Ricky_Turner · June 12, 2020, 4:50am

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)…

eibyer · August 27, 2020, 9:40pm

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.

josh · August 27, 2020, 9:45pm

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.

eibyer · August 27, 2020, 9:52pm

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]

josh · August 27, 2020, 9:57pm

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.

eibyer · August 27, 2020, 9:59pm

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

josh · October 18, 2020, 1:14pm

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

Michelle_Patterson · November 12, 2020, 1:00am

I am trying to set up this fast switching but cannot get the new dashboard. /dashboard/view/xxxx to change on the tablet.

My Rule: javascript:postMessage({action:‘navigate’, route: { path: ‘dashboard/view/xxxxx’}}) (x=the new dashboard to display)

Currently, I am entering the “JavaScript post message Josh referenced in a sharptools rule using a virtual device and the custom FKB DTH with the loadURL command to change my home dashboard to another sharptools dashboard quickly, but no go. I can send other commands such as loadstarturl via sharptools rule but for the life of me, I can’t find where the error is. I can send a rule for the full sharptools url but slow, hence the fast switching.

On the tablet, I have the remote access active.

Any ideas why the new dashboard doesn’t load?

josh · November 12, 2020, 1:34am

Can you share a screenshot of your rule so we can better understand how it’s configured?

Your example seems to be missing the leading slash on the path. And it might just be the community software formatting the message, but the quotes probably need to be straight quotes rather than curved.

Straight: '
Curved: ’

Michelle_Patterson · November 12, 2020, 1:41am

I had to removed the image.

josh · November 12, 2020, 1:45am

Try fixing the leading slash on the path and see if that helps:

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

…should be…

javascript:postMessage({action:'navigate', route: { path: '/dashboard/view/xxxxx'}})
                                                           ^
                                      Note the leading slash

Michelle_Patterson · November 12, 2020, 2:24am

That was a no go unfortunately, though the screen sort of dims briefly as if the page is trying to load but it does not change.

Here’s my earlier screenshot.

James · November 12, 2020, 3:30am

Have you encoded the argument as @josh mentioned earlier in this thread? The url argument is sent to Fully’s API on your tablet as URL query parameter, so it needs to be encoded.

Michelle_Patterson · November 12, 2020, 4:29am

I did not encode the URL. I encoded and the compiled text URL takes me to the FKB web admin page not the sharptools dashboard.

My code truncated: 192.168.0.22:2323/?cmd=loadUrl&url=%20javascript%3ApostMessage%28%7Baction%3A%27navigate%27%2C%20route%3A%20%7Bpath%3A%20%27%2Fdashboard%2Fview%XXXXXXXXXXXXXXXXXX%27%7D%7D%29%20javascript%3ApostMessage%28%7Baction%3A%27navigate%27%2C%20route%3A%20%7Bpath%3A%20%27%2Fdashboard%2Fview%2Fs1vtXJkBW1OwPfHm9qNP%27%7D%7D%29&password=XXXX

James · November 12, 2020, 1:56pm

@Michelle_Patterson, sorry if I confused you. You only need the following part to be encoded and filled in the argument field.

From this:

javascript:postMessage({action:‘navigate’, route: { path: ‘/dashboard/view/xHF4pBuWWBQFYu8h3nOc’}})

To this:

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

You don’t need the FKB’s ip and cmd like below, The loadURL command from the device handler will do this for you, and attach the filled argument as url query parameter in the request to FKB.

Michelle_Patterson · November 12, 2020, 2:52pm

Thank you so much, that resolved my issue.

Michelle_Patterson · November 13, 2020, 2:54am

I tried using this encoding in webcore but it didn’t work as listed above. Anyone know the correct formatting to send this URL via the custom FKB device handler?