Refresh Cached images in Lovelace Picture-Elements (maybe other places too)

Configuration Frontend
21

Wanted to say thanks for this, and add a few comments. I also used a versioning trick posted elsewhere to automatically update pictures. My doorbell saves a picture when someone rings the bell. Nice to quickly see who it was.

First observation for both this and the versioning trick is that I have different results depending on if I open the lovelace dashboard on my laptop or iPhone (HA app). Both connected to local WiFi (same network as doorbell and HA).

Using the versioning trick (adding ?v=1 to local picture URL): phone and laptop show a different image. Laptop using Firefox and refreshed using ctrl-f5. Phone still shows an old picture.

Then proceeded with tips from here making new picture glance and entity cards. I also decided to add a second camera using Benish suggestion and link to a 30 second mp4 video the doorbell also saved. On my laptop that shows a grey screen with a broken icon in the middle. Saved anyway to try and fiddle some more today but to my surprise on iPhone it works - just not on laptop (where I usually configure stuff).

HA dashboard on laptop (this plays a video fine on my phone)
2023-06-10_09h52_29

22

That worked great! Here are my tweeks to work with custom: button-card. For some reason it was making the height really short by default.

type: custom:button-card
styles:
  card:
    - background: url("/local/images/street.jpg?v={{now().timestamp()|int }}")
    - background-size: cover
    - background-repeat: no-repeat
    - height: 750px

EDIT: did not seem to work as images still cached. Your card-mod code appears to work. Will report back if I have any issue.

23

if the button has nu further content it won’t make it big of course. So your choice of a fixed height might have done the job :slight_smile:

I do think the picture-elements with the ‘fake camera’ is a nice find, it works well for me, and will also refresh without having to refresh the browser (which is an issue with the CSS based solution)