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

Protoncek · July 28, 2023, 3:23pm

Well…yes and no. When i make (small) modifications of my lovelaces i open a page and “leave it” as backup. So if i do anything wrong i have a previous version without making a copy of lovelace before. With auto-refresh i’d loose that. Thus said…i miss any sort of history here… or should i say CTRL+Z…
Yeah, i know… it IS available if i would edit in yaml mode. But i rather edit single card at a time, because it’s less code, more clear and easier to edit than whole yaml.

Also…auto refresh refreshes all cards and all views, while manual press on “refresh” refreshes only that page - it’s somewhat quicker.
I just made shortcuts for all my tablets so i don’t have auto refresh, but i can refresh them remotely when i’m done or when it’s needed.

Morhoo · August 2, 2023, 2:01pm

I like the idea, and i think it can be even more simple:

// Modified ideas from: https://community.home-assistant.io/t/solved-how-can-i-get-my-dashboard-to-refresh-automatically-instead-of-showing-the-refresh-prompt/357842/29
const ReloadDashboardCheckInterval = 30000; // ms

const ReloadDashboardStrings = [
  "Refresh",
  "Obnovit"
];

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 ht = nm.shadowRoot.querySelector("ha-toast")
    if (!ht || !ht.shadowRoot || ht.style.display === "none") return
    const label = ht.children[0].__label
    if (!label) return

    const result = ReloadDashboardStrings.findIndex(item => label === item)
    
    if (result >= 0)
    {
        ht.children[0].click()
    }
}

setInterval(refreshOnLovelaceChange, ReloadDashboardCheckInterval);

GregoryWest · August 14, 2023, 3:37pm

I like your idea! For all of us just starting, where does this yaml code go? is this in the confuguration.yaml?

Rudd-O · August 15, 2023, 5:59am

It would have to go as a custom JS resource.

GregoryWest · August 15, 2023, 4:58pm

OK, think I will leave this until I get much better at HA. Still learning everything. Got lots to figure out as it is.

zapthedingbat · September 18, 2023, 12:51pm

I had the same requirement for a wall-mounted tablet. I wanted to avoid the approach of string matching so I’ve patched the code that handles the change event.

I have the following javascript in a custom module that seems to do what I need. You’re welcome to copy-paste if it’s any use.

  // Patch the _lovelaceChanged handler in LovelacePanel to automatically
  // refresh, instead of showing a message
  const LovelacePanel = customElements.get("ha-panel-lovelace");
  LovelacePanel.prototype._lovelaceChanged = function(){
    // Log the reload happening
    console.log("Lovelace changed, automatically reload", this);

    // Logic copied from the origional _lovelaceChanged function
    if (this._ignoreNextUpdateEvent) {
      this._ignoreNextUpdateEvent = false;
      return;
    }
    if (!this.isConnected) {
      this._fetchConfigOnConnect = true;
      return;
    }

    // Show a message for 1 second to announce the automatic reload
    const notificationEvent = new Event("hass-notification", {
      bubbles: true,
      composed: true,
      cancelable: false
    });
    notificationEvent.detail = {
      message: "Automatically reloading config...",
      duration: 1000,
      dismissable: true
    };
    this.dispatchEvent(notificationEvent);

    // Do the reload after one second
    setTimeout(() => this._fetchConfig(false), 1000);
  };

  // log that the code has run
  console.log("✅ setup automatically reloading");

madasus1 · September 24, 2023, 11:45am

UPDATE: Nevermind - it did work!

@zapthedingbat

Hi-

I’m a bit confused how to use this. I added it a a custom JS resource under the dashboard page. What do I need to do for this to work?

Do I need to reference it inside the dashboard somewhere?

Thanks

M

cameron · September 26, 2023, 5:51pm

How did you do it?

did you create a new file under /www/custom.js and add the below code?

jeffbrown · October 7, 2023, 3:29am

This was a brilliant starting point! Since I use FullyKiosk, I amended the example to reload the start page on the kiosk.

This is YAML for an automation. You can also create the same automation manually in the UI using a Manual Event trigger for event type “lovelace_updated” and a Service Call action to press the load start url “button” entity registered by the FullyKiosk integration.

alias: Reload kiosk when lovelace is updated
description: ""
trigger:
  - platform: event
    event_type: lovelace_updated
condition: []
action:
  - service: button.press
    data: {}
    target:
      entity_id: button.dash_kiosk_load_start_url
mode: single

scottg489 · October 9, 2023, 9:26pm

Not working for me. Not sure what I’m missing. I have this snippet in a file under config/www/custom.js.

Then I have the following in my config:

frontend:
  extra_module_url:
    - /local/custom.js

Finally, to test I’m opening up my dashboard in two tabs. I make a change in one tab and save it then go back to the other tab. I see the usual “Your dashboard was updated. Refresh to see changes?” message, but it doesn’t auto refresh. What’s the deal?

Cactus_J · January 20, 2024, 8:32pm

What if I just want to refresh the dashboard every hour?

psko · February 11, 2024, 10:54pm

Try this:

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

Then open browser console (Inspector), check for errors (syntax errors may stop loading custom.js silently when loaded via extra_module_url). Add console.log('custom.js loaded'); on the beginning of custom.js file.

psko · February 11, 2024, 10:57pm

Edit JS, remove the last check whether notification is present and contains expected information and just do the reload. Change value in setInterval(refreshOnLovelaceChange, 500); accordingly (3600 * 1000).

psko · February 11, 2024, 11:14pm

My version of custom.js being a mix of some ideas from this thread, working as of 2024.02:

console.log("custom.js loaded!");

function refreshOnLovelaceChange() { 
    // uncomment for Kiosk mode ('kiosk' param must be in the url, tho)
    //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;

    // uncomment to refresh for a given user name only (name as seen in UI)
    /*var userNameToRefresh = 'user-for-dashboard';
    try {
        var userName = ha.shadowRoot.querySelector('home-assistant-main').shadowRoot.
            querySelector('ha-drawer').querySelector('ha-sidebar').shadowRoot.
            querySelector('a[class*=profile]').querySelector('paper-icon-item').
            querySelector('span[class=item-text]').textContent.trim();
           if (userName !== userNameToRefresh) {                                                                                                                              
               return;                                                                                                                                                        
           } 
    } catch (error) {                                                                                                                                                  
        //console.error(error);                                                                                                                                        
    }*/                                                                                                                                                                 

    if (haToast.opened && haToast.text.includes('dashboard was updated')) {
        console.log("Refreshing page...");
        try {
            haToast.querySelector("mwc-button").shadowRoot.querySelector("#button > span.mdc-button__label").click();
        } catch (error) {
            console.error(error);
            console.log("Going to reload whole page instead...");
            location.reload();
        }
    }
}
setInterval(refreshOnLovelaceChange, 1000);

If you update the script, then you need to clear browser cache (reload hard). It also works in the Companion app (you will need to clear its data to pick up the changes - you will need to login and configure the app tho).

Update for 2024.4.2 down there: [SOLVED] How can I get my dashboard to refresh automatically, instead of showing the "Refresh?" prompt? - #66 by psko

Rich37804 · February 14, 2024, 9:10pm

On my office computer I have a screen that has a dashboard that shows my security cameras.
I installed that page as an app in Edge and set it to auto-refresh once an hour. There is an add-on for that.
On a pc reboot, it will automatically load that dashboard for me also.
Not much good for an android tablet though…

Chykan · February 21, 2024, 10:33am

Solution to refresh Raspberry Pi 400 running chromium kiosk with 15" uPerfect touch screen Display. Via Node Red and SSH command to XDOTOOL.

CHROMIUM KIOSK Mark Watt Tech Tutorial.

uPerfect unify y Vertical Monitor

My Home Assistant Server runs on a Home Assistant Blue. My Raspberry pi400 utilises the full screen kiosk (above) to log into the server via Nabu Casa.

INSTALL XDOTOOL
INSTALL NODE RED if you do not already have it installed.
INSTALL node-red-contrib-ssh-v3 node in Node Red.

The flow is very simple, consists of an inject node that injects the SSH command via msg.payload, every 10 minutes. This is so my Ventusky weather map shows the latest data, running in iFrame.

Below is the setup for the inject node.

msg.payload is set to (string)

The full SSH command is: Insert your own username.

export XAUTHORITY=/home/INSERT USERNAME/.Xauthority; export DISPLAY=:0; xdotool key ctrl+r

The part of the above that completes the virtual key press of ctrl+r is xdotool key ctrl+r

I discovered this command works directly after my other attempts failed. See this website XDOTOOL fails. Error: Can’t open display: (null)
Failed creating new xdo instance

I set repeat interval to 10mins.

Setup for the SSH V3 node is as below.
Hostname: The IP address of your Raspberry Pi
Port: 22 (default setting)
Username: The username you use to log into your Pi
Password: The password you use to log into your Pi
Ssh: Leave this as the default grey text, the msg.payload from the inject node needs no other file path.

Works perfectly. Basically my Home Assistant Blue, running Node Red is sending a keyboard shortcut ctrl+r to my Pi 400 every 10 minutes.

psko · February 26, 2024, 11:36pm

xdotool works properly for you with Wayland/Wayfire (default on Raspberry OS Bookworm), because I had no luck with it.

Chykan · February 27, 2024, 8:34am

I am using Debian GNU/Linux 12 (bookworm). I just checked raspi.config and I am running X11 Openbox window manager with X11 backend. I am unsure if you can set that and have your Pi run correctly?

See the below links for Wayland.
https://www.reddit.com/r/linuxquestions/comments/u5mxzi/xdotool_alternative_for_wayland/

github.com/jordansissel/xdotool

Using xdotool for years on XWayland but now inhibited

opened 10:47PM - 04 Aug 21 UTC

closed 11:13PM - 03 Sep 21 UTC

bulletmark

Arch Linux updated to the new xdotool today (from version `3.20160805.1-3` to `…3.20210804.2-1`) and now xdotool terminates itself [claiming it does not run on XWayland](https://github.com/jordansissel/xdotool/issues/341). However, myself and many others have been using xdotool with XWayland and [libinput-gestures](https://github.com/bulletmark/libinput-gestures) for very many years and it has always worked fine. Please consider removing that check and allowing the program to continue running as it previously did. I fetched the latest xdotool sources, commented out that [single `return NULL`](https://github.com/jordansissel/xdotool/blob/master/xdo.c#L124), then rebuilt and it worked fine for all my key mappings. Undoubtedly I acknowledge you have probably seen issues supporting some XWayland edge cases but to completely disallow xdotool usage seems an extreme approach. Perhaps output a disclaimer/warning that XWayland is not formally supported (and state that no issues should be raised?), but please allow us to continue using this extremely useful tool.

psko · February 28, 2024, 10:18pm

Yup, probably I saw that sometime ago, for sure I had no luck with ydotool. I switched to use JS to reload dashboard.

Rudd-O · February 29, 2024, 10:04pm

Xdotool won’t work with Wayland. On Wayland, the compositor cannot be tampered with or spied on by applications connecting to it.

I have what is the beginning of a tool you can use with KWin as a compositor on Wayland, right here:

It currently only knows how to raise a window, but KWin is pretty scriptable so you can hack it to make it do your bidding. The reason it works is because KWin is the compositor, so it can do whatever the føck it pleases.