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

I have a dashboard running on a screen in my kitchen. I use the kiosk-mode add-on to hide the header and sidebar: GitHub - maykar/kiosk-mode: šŸ™ˆ Hides the Home Assistant header and/or sidebar

I want to be able to make changes on my computer, and then have these changes automatically updated on the kitchen dashboard. At the moment, I need to VNC into the Raspberry Pi and then press Ctrl+R to reload the page.

It shows this message:

The Lovelace UI configuration for this dashboard was updated. Refresh to see changes?

Is there any way I can get it to automatically click the ā€œREFRESHā€ button? Or even skip this popup and just reload the window? Is that a setting in Home Assistant? I think I would like that as the default anyway.

Otherwise it might be nice to have this as an option in the view settings, or as a query parameter.

I briefly tried to include my own JavaScript code in the page so that I could detect the presence of this message and refresh the page, but I couldnā€™t figure out an easy way to do this either. I found this lovelace-html-card add-on, but it crashes with an error:

Iā€™m surprised that it seems so hard to get some custom JS and HTML on the page, since it seems like a lot of Home Assistant users are programmers.

I just got the Home-Assistant-Lovelace-HTML-Jinja2-Template-card add-on working:

But Iā€™m just really confused why none of my JavaScript is running inside <script> tags:

Canā€™t get any alerts to fire and console.log or document.write arenā€™t working. Iā€™m a bit new to the Shadow DOM and shadow roots, so I donā€™t really understand how that works.

2 Likes

It took me ages to figure this out, but I finally figured out how to load some custom JS.

Docs: Frontend => Loading extra JavaScript

You only need to use extra_module_url for any modern browser, can probably ignore extra_js_url_es5.

Added to configuration.yaml:

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /local/custom.js

Then the tricky was figuring out what /local means in this context. I thought it was a file path, but itā€™s actually a URL path. It means home assistant will import this custom.js file from: http://homeassistant.local:8123/local/custom.js

And this /local URL path is actually served from the /config/www directory. So you need to open up the Studio Code Server extension and go into the www directory, then create a new custom.js file.

Now Iā€™ve got some custom JS running!

Will post again once I figure out how to code the auto-refresh.

2 Likes

Got it to work! This is the code in /config/www/custom.js:

function refreshOnLovelaceChange() {
    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 === 'The Lovelace UI configuration for this dashboard was updated. Refresh to see changes?') {
        console.log("Refreshing page...")
        location.reload()
    }
}
setInterval(refreshOnLovelaceChange, 500);
13 Likes

Great ! I am more bugged by the reload due to the upgrade of a frontend customisation or HA core upgrade.

Thanks for sharing, could probably be a HACS FrontEnd component to cope with I18N over time, other reasons to reload and to bring it to the masses. Possibly even a service to ask for a reload ā€¦ .

Iā€™ve built nightstand android tablets with an alarm clock Loveleace. When I make HA updates or reload and donā€™t refresh the tablets, the alarm sound may fail in the morning. Could I use this javascript to auto-refresh those tablets?

Hi @curtis-r, yes this should work fine for refreshing the lovelace dashboards on your tablets. Hope you can get it working!

Made an account just to like this! Will make my life so much easier when editing the lovelace yaml from VSCode and not having to switch to the browser window, hit refresh and close the dialog each time :partying_face:

Hello @ndbroadbent and @exynym,
Is there any other option/way to run location.reload() other than from .js?
Iā€™m completely unfamiliar with JavaScript, but have this problem Theme change on Companion app (on tablet with Android 8) and was thinking that it could possibly be a solution, instead of relentlessly restarting HA 2x daily.
I know that I cannot possibly write .js script by myself, but was also sad to found that no event is fired when you press Refresh on tablet screen. So is there some other way for us dummies to achieve similar results? :smiley:
Thanks in advance!

YAASSSS!!!
I was actually able to use your solution for my problem. Itā€™s not the cleanest solution, but it works. :smiley:
As I said, Refresh button does not produce any event, however there is an event when Lovelace is updated. So I implemented your code (that triggers on Lovelace update), and I just force the same event when I need Lovelace refresh. :grinning_face_with_smiling_eyes:
And it refreshes my tablet and resolves initial problem!

As I said, not the cleanest solution, but Iā€™ll take it. Unless/untill I learn JavaScript or find someone willing to modify your original script.
Thanks guys!

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!

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!

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ā€¦

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ā€¦

1 Like

ā€¦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. :tired_face:
Now off to find some other working solutionā€¦

2 Likes

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()
    }
2 Likes

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. :frowning:

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

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.

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.

4 Likes

Hi! You made it work?