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
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!
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.
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;
}
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
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)
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
/config/www/folder/pic.jpg would translate to /local/folder/pic.jpg, no “www” needed
Dear All,
I am trying to create a short animation for my dashboard barometer, when I double tap the barometer I want the needle to flick briefly in the direction corresponding to a rising or fallin atmospheric pressure.
I followed the advice on this thread and have had a partial success, in that the three images I use to create the animation work sometimes!? My main png file is in the /config/www/ directory and I overwrite the it from an external device (my Android tablet running a Python program) dynamically. I have tried to vary the speed of the animation and the number of times is runs but after a brief time the images stop being updated. I have used several methods to trigger the local_file_update_file_path (MQTT, Folder watch) but this Action seems to stop working after a while?
In the dashboard I have:
type: picture-elements
elements:
- type: state-label
entity: sensor.apollo_air_1_cb82f8_dps310_pressure
title: " "
style:
top: 62%
left: 36%
color: brown
- type: state-label
entity: sensor.nyon_changins_pressure_qff
title: " "
style:
top: 62%
left: 64%
color: brown
camera_view: live
grid_options:
columns: 12
rows: 7
camera_image: camera.local_file
In my automation I have:
alias: New file alert
description: ""
triggers:
- event_type: folder_watcher
event_data:
event_type: modified
trigger: event
actions:
- action: local_file.update_file_path
data:
file_path: /config/www/Barometer_Face2.png
target:
entity_id: camera.local_file
My Local_File camera points to:
/config/www/Barometer_Face2.png
On my PC I have to clear the browser cache to get the animation to restart and on the companian app I just reload the app.
If anyone can point out the errors of my ways I would be most grateful.
Does Local_file have a limit to the number of updates it can handle in a certain time frame, I am trying to get 3 images displayed in about 1.5 seconds, maybe this is too fast for Home Assistant?
I’m running HAOS and HA on a Raspberry Pi 5 8GB with 500GB NVME, lastest version of all components *
Many thanks in advance for your help - I am not a Home Assistant expert, Colin.