Oh cool. Thanks for that. Works a treat.
Yes - but also Safari on my phone. Letsoulfly has the solution below
Doesn’t solve my problem unfortunately.
Same problem here.
My setup is a lovelace picture glance card with an image to my /local/ dir.
When my front door opens, an automation is making a picture of the frontdoor and places that in the /local/ folder, like: camera.frontdoor.jpg
I know I can set up a fake querystring here using the ?.. but this is fixed also.
I want somthing like: ?{{timeticker}}
So everytime you load the page, the file gets newly loaded.
Can this be done?
Regards
Erik
1 Like
Heyho,
take a look at the config template card
Since you can use any entity(attribute) to change a value in lovelace config, this might be worth a try.
Can anybody elaborate a bit more on this? I too am having an issue with the front end not loading a more recent image.
For my setup, I have a driveway sensor that detects when cars enter my driveway which triggers a snapshot automation, saving the snapshot, sending a notification and shows the image in a picture elements card in Lovelace. Being able to force a refresh of that file is ideal but I’m unsure on how to do it.
So I have found a work around and it actually works pretty slick so I thought I would share it. My automation takes a snapshot and saves it to the www (/local/) directory like so…
- id: '1588381984940'
trigger: []
condition: []
action:
- data:
filename: /config/www/snap.jpg
entity_id: camera.security_cam
service: camera.snapshot
Next, I added a new camera element to my configuration.yaml file like so…
camera:
- platform: local_file
file_path: /config/www/snap.jpg
This camera file_path should match the location of where the automation saved the picture to. What this camera setup does is continually check this file and will update it live as if it was a camera feed. So in the next step when we add it to a picture card in lovelace, as the automation creates the new picture, the camera local_file will automatically update the card with the new pic! So here’s the card setup…
elements: []
camera_image: camera.local_file
type: picture-elements
The important thing here is to ensure you use the camera_image: tag and not the image: one.
Hope this helps someone!
27 Likes
Thankyou. I applaud your devious solution. Works like a treat and solves an issue I have had getting an updated snapshot of mail deliveries.
In case any other newbies are looking to do this but want it to work with multiple cameras, this is what I did to support that:
For the camera element in configuration.yaml add a name: variable, e.g.:
camera:
- platform: local_file
name: camSnap1frontdoor
file_path: /config/www/cam_captures/frontdoor.jpg
Then in your dashboard YAML use the value of that name: variable for your camera_image: entry. So in the above example the name is camSnap1frontdoor and that makes the corresponding entity camera.camsnap1frontdoor. So my dashboard card YAML ended up as:
elements: []
type: picture-elements
camera_image: camera.camsnap1frontdoor
title: Most recent still image capture
All that is probably obvious to everyone on this thread, but I’m new to this so it took me some head scratching and searching – maybe that’ll help another beginner some day.
3 Likes
Hello.
Just to say many thanks for the tip. I have an outdoor Blink cam and I made a dashboard card where the picture is uploaded. But I found an issue. The picture showed is not the last one, but the last but one.
I checked the file in save folder, and it is not the last taken picture whereas on the blink app, the last picture is OK
This works perfect for traffic cameras and webcam images I pull from our local ski resorts.
dimagoltsman/refreshable-picture-card: a refreshable picture card for HACS (github.com)
yeah I know this is old. But I got directed here by a google search and wanted to share a slightly different solution - different use case mind you - but it might work otherwise.
In my case I use card_mod to set a background image from a url with a unix timestamp that refreshes on its own. image automatically updates itself in the background. the beauty of this is you don’t need a camera entity, and you can apply this to virtually any other card.
card_mod:
style: |
ha-card {
background: url("/local/homepics/refresh/cam2_image.jpg?v={{now().timestamp()|int }}");
background-size: cover;
background-repeat: no-repeat;
}
4 Likes
How exactly would this work because the picture is always above the background or am I missing something here?
- type: picture
image: /local/cam/brievenbus.jpg
tap_action:
action: url
url_path: http://'*************/l/local/cam/brievenbus.jpg
hold_action:
action: url
url_path: app://
card_mod:
style: |
ha-card {
background: url('*************/local/cam/brievenbus.jpg?v={{now().timestamp()|int }}');
background-size: cover;
background-repeat: no-repeat;
}
You can use a transparent png so that your background picture becomes visible
1 Like
Works like a charm! Thnks
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)
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.
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 
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)