[SOLVED] How can I get my dashboard to refresh automatically, instead of showing the "Refresh?" prompt?

Protoncek · March 5, 2022, 9:26am

Hi!
I found your js and it works great…in english. Can you tell where you picked up those english words? OK, “haToast.text” is text, displayed at the bottom, that part i get. But how to get local translation of “Refreshing page…”? (i run Slovenian translation).
I Also found out that it seems that this script works only in browsers, but not in HA native apps (not on ipad and also not on android phone). Is there any setting for this?

And, of course: MANY thanks for this script!

doubleDD · March 5, 2022, 11:25am

Hi,
I have this script working on my tablet in HA Companion app, and just tried and seems to be working also in app on iphone. Did you try “turning it off and back on again”, or force stopping the app and starting it back on?
Regarding running it with translation, and these are just my 2 cents, not an expert, I would try replacing the haToast.text with whatever is written at the bottom in slovenian, and removing the “console.log(“Refreshing page…”)” line (it’s inside the if loop, so my guess is that you can either substitute text with whatever you want or completely remove it).
Good luck!

Protoncek · March 5, 2022, 1:08pm

I managed to get it working on ipad by rebooting device. But still doesn’t work on android app, though, which is not that important aynway, since i’m using it only on my phone. Main thing is that it works on fully kiosk on my two android tablets on my walls (around the house)
.
Regarding translation: i did replace haToast.text, but it doesn’t work, because i can’t find correct translation for “Refreshing page” (i tried a few, but didn’t succeed).

But, at the end i concluded, that perhaps it’s better this way. Why? Well, i can use english on my tablet on the wall - it doesn’t matter, since i have hidden left menu and top line - so i get auto-refresh there. But, on my PC i’ll stick with slovenian and thus prevent from too frequent auto-refreshing when tinkering with lovelace cards. I have the habbit to keep one browser tab open as a “backup” while i change cards on the other tab. So i can copy/paste old version quickly if anything goes wrong.

It would be nice to know location of that “magic” word, though…

Protoncek · March 6, 2022, 2:11pm

Since i don’t want all my devices to auto-refresh but only selected, i kept digging and found this alternative, which is selective and it refreshes lovelace only on selected tablets/PC’s. It’s a part of “browser mod” HACS integration. You just create an automation with trigger: event and add action on desired devices (sample below).

Of course first we must make sure that device has always the same ID, which is achieved with this startup url:

http://192.168.x.x:8123?deviceID=1111111-11111111

on second device:

http://192.168.x.x:8123?deviceID=22222222-22222222

etc…

This way device will always get desired ID. Since i use browser mod for speech also, keeping same ID is essential.
Then just create an automation:

alias: Lovelace refresh when changed
description: ‘’
trigger:

platform: event
event_type: lovelace_updated
condition:
action:

service: browser_mod.window_reload
data:
deviceID: 11111111-11111111

service: browser_mod.window_reload
data:
deviceID: 22222222-22222222
mode: single

One warning, though: this auto-refresh doesn’t work immediately after HA is restarted. In fact, nothing via browser mod works after HA restart (speech, popups…). At that point you must manually refresh tablet (reload page) in order to work again (i use teamviewer to do that).
I guess that it’s browser-mod limitation, maybe right after restart device doesn’t get wanted ID…

doubleDD · May 1, 2022, 5:12pm

…and with the update to 2022.4.xx it stopped working. I feel like I’m constantly just chasing my own tail with these updates.
Now off to find some other working solution…

jasonhk · June 6, 2022, 3:21pm

It is because the new version string is updated to “Your dashboard was updated. Refresh to see changes?” . You can modify the script.

    /* check full string */
    if (haToast.text === 'Your dashboard was updated. Refresh to see changes?') {
        console.log("Refreshing page...")
        location.reload()
    }

or

    /* check the keyword to refresh */
    if (haToast.text.indexOf('Refresh to see changes') >= 0) {
        console.log("Refreshing page...")
        location.reload()
    }

doubleDD · June 9, 2022, 9:39am

Hi,
Thanks for your reply.
This was actually the first thing I tried, to change the script according to the new text (like your first example). However, it didn’t seem to work - maybe I just didn’t reboot all the necessary things. I’ll check again.
Second one seems more generic, in case they change the text again, so I might go with that option.
Thanks!

EDIT: Nope, I still cannot get it to work. Message appears on screen but nothing happens.

Protoncek · June 9, 2022, 11:54am

Did you try what i wrote above (my last post)? It works like a charm here…

doubleDD · June 9, 2022, 12:21pm

Hi,
I’m trying to keep my system “simple”, without too many “unofficial” integrations, so at the moment I don’t use browser mod.
I tried going down that route but then everything has some dependencies and update of something creates problems on some other side, so for now I’m trying to stick to barebone HA as much as possible.
But thanks for your reply, maybe I’ll try that option eventually.

RayLation · July 28, 2022, 3:08am

Hello,

If you use Fully Kiosk application (which I higly recommend for a dashboard), you can send a REST command remotely to your tablet to make it reload the StartURL. It’s basically asking your tablet to visit a URL.

https://www.fully-kiosk.com/en/#rest

Thus, you can create an event handler (via node-red or home assistant itself) to call this command upon receiving the “lovelace_updated” event.

I went the node-red route since it’s simpler for me:

If you go the home assistant route, I believe you need to create a RESTful command first, which you will simply call after in your automation.

https://www.home-assistant.io/integrations/rest_command/

VERY simple to implement and works flawlessly. You can do the same after a HASS reboot, listening for the event “homeassistant_started”. I give it a little delay before calling it to make sure everything has loaded properly.

PickOne · September 6, 2022, 8:52pm

Hi! You made it work?

doubleDD · September 7, 2022, 11:00am

Hi!
Unfortunately never made it work the way it was, never was able to find a simple way to refresh dashboard (without browsermod od fullykiosk), so I had to rework my dashboard such that it doesn’t need refresh to work properly. (Ended up using conditional cards for all those elements that needed refresh, maybe it could help you as well)
Would still be interested to see it working using the same .js script as before.

ndbroadbent · October 26, 2022, 11:28pm

Hi everyone, I just revisited this topic since I’m setting up a Amazon Fire Tablet (with the Fully Kiosk app.)

I updated the JS to handle the changed notification message and it’s working again:

function refreshOnLovelaceChange() {
    const urlSearchParams = new URLSearchParams(window.location.search)
    if (urlSearchParams.get('kiosk') !== 'true') { return }

    const ha = document.querySelector("home-assistant")
    if (!ha || !ha.shadowRoot) return
    const nm = ha.shadowRoot.querySelector('notification-manager')
    if (!nm || !nm.shadowRoot) return

    const haToast = nm.shadowRoot.querySelector('ha-toast')
    if (!haToast) return
    if (haToast.text.includes('dashboard was updated')) {
        console.log("Refreshing page...")
        location.reload()
    }
};

setInterval(refreshOnLovelaceChange, 500);

I also added a check for the ?kiosk=true query param since I only want auto-refresh to happen in kiosk mode.

@RayLation Thanks for the tip, that’s a great idea! Home Assistant has a really nice FullyKioskBrowser app integration as well, which calls the remote API:

It has a load_start_url button that you can press to reload the initial URL. So I’ve set this up with an HA automation:

alias: Reload Home Assistant on Fire Tablet when Lovelace is updated
description: ""
trigger:
  - platform: event
    event_type: lovelace_updated
condition: []
action:
  - service: button.press
    data: {}
    target:
      entity_id: button.fire_tablet_load_start_url
mode: single

This works really well and reloads the page instantly, instead of waiting for a few seconds. Thanks!

doubleDD · December 13, 2022, 4:47pm

I know I’m boring, but with your updated script I still cannot make it work properly. Have no idea what’s wrong.
(I’m not using kiosk so I removed that part from the code)

I get an error in log:

Logger: frontend.js.latest.202211080
Source: components/system_log/__init__.py:256

http://xxx.xxx.xxx.xxx:8123/local/refresh_ui.js:9:1 Uncaught SyntaxError: Invalid or unexpected token

Gave up on this long time ago but still revisit is occasionaly as it was quite useful.

ndbroadbent · December 15, 2022, 2:33am

Sorry to hear that @doubleDD, could you please post the full contents of your refresh_ui.js file here?
Also what browser and OS are you using?

ndbroadbent · December 15, 2022, 2:37am

Maybe this version will work using older JavaScript syntax (var instead of const):

function refreshOnLovelaceChange() {
  var urlSearchParams = new URLSearchParams(window.location.search);
  if (urlSearchParams.get("kiosk") !== "true") {
    return;
  }

  var ha = document.querySelector("home-assistant");
  if (!ha || !ha.shadowRoot) {
    return;
  }
  var nm = ha.shadowRoot.querySelector("notification-manager");
  if (!nm || !nm.shadowRoot) {
    return;
  }

  var haToast = nm.shadowRoot.querySelector("ha-toast");
  if (!haToast) {
    return;
  }
  if (haToast.text.includes("dashboard was updated")) {
    console.log("Refreshing page...");
    location.reload();
  }
}

setInterval(refreshOnLovelaceChange, 500);

Could you please try that?

doubleDD · December 15, 2022, 7:20am

THANK YOU!!!

I updated the code with the var, and it’s working again!!!

To be honest, it surprised me quite a bit, as in the original version that worked long ago const was used.
I would bet that I had one too many/too less of “;” or a wrong type of quotation mark somewhere that I overlooked all those times I went over it and tried to change something to make it work.
But now that it’s working again, I’m not touching it ever again

Thanks once again for your effort and help!

Edit/Update: It’s now working on all my devices except tablet, or the only one I need to work
Now I need to figure out why, and what needs to be changed/updated on the tablet itself…

Protoncek · December 24, 2022, 1:06pm

I’m testing this script (again, after a while…) and i managed to get it work, but i have one problem:

i have a couple of tablets running kiosk - here script works fine.
i also have one laptop (x360 series with touchscreen) as my main screen and since it runs windows of course it doesn’t refresh.

So, i removed “kiosk” part and get it to work on my all screens.

Now to my question: when i’m working on my HA i’d like NOT to have auto-refresh enabled each time i click “save” on my card. So i’d create an “input_boolean.refresh_enable” in HA. Is it possible to insert this boolean in above script so it would work only if this boolean is 1?

Or at least - how to temporarily disable this auto-refresh script from executing without restart HA?

michapr · December 28, 2022, 7:43pm

@ndbroadbent Great idea! Thanks! Solved my issue…

But I have modified a bit - maybe interesting for users with other languages (like German)
I hope no other important messages will be there closed

function refreshOnLovelaceChange() {
...
...
  if (haToast.text.includes("ashboard ")) {
    console.log("Refreshing page...");
    location.reload();
  }
}

setInterval(refreshOnLovelaceChange, 500);

michapr · December 29, 2022, 4:30pm

Another idea - simulate the “click link” - then not the full location will be reloaded.
In my case it looks better (faster refresh), and the kiosk mode is still available if using in browser mode.
(I’m using the WallPanel frontend (HACS) - that’s why had to disable the first lines for kiosk mode)

function refreshOnLovelaceChange() {
//  var urlSearchParams = new URLSearchParams(window.location.search);
//  if (urlSearchParams.get("kiosk") == "true") {
//    return;
//  }

  try {
    var haToast= document.querySelector("home-assistant").shadowRoot.querySelector("notification-manager").shadowRoot.querySelector("ha-toast");
    } catch (error) { }
  if (!haToast) {
    return;
  }

  if (haToast.text.includes("ashboard")) {
    if(haToast.style.display !== 'none').
      {
       console.log("Refreshing page...");
       haToast.querySelector("mwc-button").shadowRoot.querySelector("#button > span.mdc-button__label").click();
      }
  }
}

setInterval(refreshOnLovelaceChange, 500);