Automatic frontend reload or trigger on Lovelace update?

Configuration Frontend
1

is it possible to…

  1. automatically refresh the gui when there is a newer version (instead of getting the notification “A new version of the frontend is available. RELOAD”
    and/or
  2. setup a sensor that indicates when a reload is necessary - then I could trigger on that and reload the screen over mqtt (using https://github.com/thanksmister/wallpanel-android)
    the use case is for my dashboards where I use semi-broken cellphones as wallpanels. it’s hard to press reload without a working touchscreen
2

This seems like such a good question. Did you end up figuring it out?

3

Unfortunately, no. I asked around on Discord as well, but no solution so far.

4

For 1. of your question see here

  1. Add a line loading custom javascript to your config.yaml:
frontend:
  themes: !include themes.yaml
  extra_module_url:
    - /local/custom.js
  1. Add a file “custom.js” to your WWW folder containing this code:
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...")
        document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#layout > app-header > app-toolbar > ha-button-menu > mwc-list-item:nth-child(2)").click()
    }
}

setInterval(refreshOnLovelaceChange, 500);

I changed it a little from the original post to emulate a refresh button press from the breadcrumb menu instead of refreshing the page.

As for 2. I’m also still looking, anyone ideas?

5

Thanks for (1).

For (2), I found an event for it so I didn’t need a sensor.
I ended up using that event as trigger for an automation that reloads my Wallpanel dashboards via MQTT.

platform: event
event_type: lovelace_updated

It has worked perfectly for a few months now.

2 Likes
6

For me it is not working, for you it is still working this?

7

i use simple automation for this:

alias: REFRESH of lovelace
description: ""
trigger:
  - platform: event
    event_type: lovelace_updated
condition: []
action:
  - delay:
      hours: 0
      minutes: 0
      seconds: 1
      milliseconds: 0
  - service: browser_mod.refresh
    target:
      device_id:
        - e0fc9dbdf239069a238f75e5fc0026b9 #this is ID of device you wish to be updated (in UI select "devices" and find it)
        - 4543a872ed8c7a3e10eb903acd4d69eb #if you want to update all devices just omit "device_id" part
        - 7d84b6dc72fa633332f43fa087d5357d
    data: {}
mode: single

Attention: this works for NEW browser mod (V2.xx). For V1.x it was slightly different.
As said above: this can work for ALL devices or just for some (defined with “target”).

4 Likes
8

Can you show how you reload the dashboard using MQTT? Will it work on a iPad? A super nice feature.

9

I use GitHub - TheTimeWalker/wallpanel-android: WallPanel is an Android application for Web Based Dashboards and Home Automation Platforms.
That will obviously won’t work on an iPad, but there may be Apple alternatives?

WallPanel supports MQTT, so I have an automation that wakes the panel up and then reload

alias: Refresh wallpanels when Lovelace is updated
description: ""
trigger:
  - platform: event
    event_type: lovelace_updated
condition: []
action:
  - service: mqtt.publish
    data:
      payload: "{\"wake\": true}"
      topic: wallpanel/opo/command
  - delay: "00:00:02"
  - service: mqtt.publish
    data:
      payload: "{\"reload\": true}"
      topic: wallpanel/opo/command
mode: single
2 Likes