I’d like to have a snapshot from a webcam displayed in a card on a dashboard which updates every minute or so, but have it refresh immediately in response to a given MQTT message - can anyone suggest an approach for this? I’m not looking to refresh the entire dashboard, only a specific card on it.
Create a triggered template image:
template:
- trigger:
- platform: time_pattern # every 1 minute
seconds: "0"
- platform: mqtt
topic: "snapshot/update" # replace with your topic and payload
payload: "take-pic-now"
image:
name: My Snapshot
url: <your camera snapshot URL here>
Put that image entity in a picture-entity card.
I’d use a camera for the source, and just update the image file when the message is received. This is what I do with my security cameras and it works GREAT.
Which is what this is:
Which is what this does:
With the addition of a 1 minute update too, like they asked for.
I don’t think you understood what I said.
I was not referring to where the picture comes from, I was referring to using a camera ENTITY, rather than a picture entity. Picture entities are static content that can, and will, be cached by browsers. Camera entities will display static content without issue, but browsers will update immediately when that image is changed.
I use the the template image myself. It updates just fine. And it fits what they actually asked for.
My bad, I thought the purpose of this forum was to solve problems, not be so literal that we only answer exact questions even when we may know from experience that there are issues with the ask in certain situations.
I will endeavor not to be so inventive in my future suggestions.
Great. It’s so nice that you can learn from your mistakes and be civil about it.
Thanks, I got it working with the template and a picture-entity card. I’m not clear on the exact implementation @exx is suggesting but would be open to an example.
1 Like
The issue I was referring to is that I, and others, have had issues with some web browsers caching static content - eg, jpg files. So in order to see the new image when the webcam image updates, a browser refresh was necessary.
To get around this, instead of using the jpg file as the source for the picture-entity card, create a camera entity, and use the jpg as the source for that camera, then use the camera as the source for the display of the picture-entity card.
Add a generic camera integration, then under the “still image url”, enter the url to your jpg image.
Then for a camera named “camera.guestqrcode”, the picture entity card is configured like this:
type: picture-entity
show_state: false
show_name: false
entity: camera.guestqrcode
camera_image: camera.guestqrcode
tap_action:
action: none
hold_action:
action: none
Except a template image entity is not a static image file and does not suffer from this issue, as I told you already.
e.g. the entity image.cloud_cover is not a static image like /config/www/images/cloud_cover.jpg.
The image entity was specifically introduced to directly replace using generic cameras when the image was not a stream (but could update occasionally).
https://www.home-assistant.io/blog/2023/07/05/release-20237/#image-entities
In short the camera entity is the wrong entity type for this use case. The image entity is the correct type.
1 Like
Interesting. I’ll have to give that a try, thank you for the explanation.
I’m also mildly amused by the fact that the example given in the documentation is a use case I wrote and posted a couple years ago (and the one I happened to grab from my system in the code I posted above). I feel special. LOL
“For example, a QR code that provides the Wi-Fi credentials for your guest network,”
Is there any equivalent of this that can be used as the background image for a dashboard panel? I tried using the image template and it didn’t work.
There are many examples of changing the background image in the card-mod topic.
1 Like