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:
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.
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.
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);
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?
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
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?
Thanks in advance!
YAASSSS!!!
I was actually able to use your solution for my problem. Itās not the cleanest solution, but it works.
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.
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?
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:
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ā¦
ā¦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ā¦
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()
}
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.
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.
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.
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.
