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)

24

having some trouble with this.
should the file_path be /config/www/folder/pic.jpg or should it be /local/www/folder/pic.jpg
I’ve tried both and not getting it to work. The camera entity does show up in devices and services along with other camera entities but it doesn’t have a picture thumbnail like other ones.

my best guess is that the issue is with my file_path. I’ve also seen sometimes the “www” is skipped in the local file path if i’m access via local url. Could you please check again to see how yours is on the current HA version

26

/config/www/folder/pic.jpg would translate to /local/folder/pic.jpg, no “www” needed