Web-UI with pics does not update pictures

Configuration Frontend
1

Hi folks, I use this lovelace code

square: false
columns: 2
type: grid
cards:
  - type: picture
    tap_action:
      action: none
    hold_action:
      action: none
    image: https://snapshots.runwaycam.cloud.xxxx.de/rwy0.jpg
  - type: picture
    tap_action:
      action: none
    hold_action:
      action: none
    image: https://snapshots.runwaycam.cloud.xxxx.de/rwy1.jpg

for some runway pictures from an airport

the pictures are updated every 10 mins .

but i have to hard reload my web ui with f5 to get the current pictures, if I brows through my menus (does not matter if top or side) and come back, i still have the old. even days old, even if I have reloaded it on an other device.

same goes for my weather graph picture with this code

type: picture
tap_action:
  action: none
hold_action:
  action: none
image: https://www.yr.no/en/content/xxxxx/meteogram.svg

so what am i doing wrong here?

thanks
Manne

2

Create a generic camera for each picture source:

Display the cameras in picture-entity cards.

e.g.

show_state: false
show_name: true
camera_view: auto
entity: camera.cloud_cover_6hrs
name: Cloud Cover +6hrs
type: picture-entity
3

Hi, i converted all my picture sources to your solution, works like a charm.

How ever I have one that I have some issues with.

Its the rain radar from DWD

rain radar gif from DWD

what am I doing wrong. when setting up the generic camera, it returens that it cant fetch a valid pic from the url.

i tried with ssl off and all protocoll options, no luck

I highly apreciat all input.

4

The generic camera is no longer the recommended method. Use the template image integration. It puts a lot less load on the source. e.g.

template:
  - image:
      - name: Rain Radar
        url: https://www.dwd.de/DE/leistungen/_config/leistungsteckbriefPublication.gif?view=nasPublication&nn=16102&imageFilePath=25050104105281218390482677498405030998131911468253289525946769170476390776995429044153114157044615936003832957259413666304044665191924757348856833157852244443070908843193589374776865004335933996880981180074645821&download=true

Put the image entity in a picture entity card as above.

It may not work with that resource as gifs may not be supported,

5

But it does never update the pic.
Picture inserted as an url is refreshed after reloading the page.
Picture added via Template and then the entity in the pic-card never renews…

templates.yaml

  - image:
         name: "Vorhersage"
         url: https://nodeserver.cloud3squared.com/getMeteogram?hashkey=hashwhatever

the “Vorhersage” placed in pic entity stays static on the screen.

btw - the url should renew every hour - in browsers it will do that.

6

Yeah I realised that after using it myself. You have to use a triggered image:

template:
  - trigger:
      - platform: time_pattern
        minutes: 0 # triggers every hour on the hour
        seconds: 0
      - platform: homeassistant
        event: start
      - platform: event
        event_type: event_template_reloaded
    image:
      - name: "Vorhersage"
        url: https://nodeserver.cloud3squared.com/getMeteogram?hashkey=hashwhatever
1 Like
7

Still can’t get it to work…should be loaded every hour - nothing since hours. The pic is only renewed at restart of HA.

template.yaml

  - trigger:
      - platform: time_pattern
        hours: "/1"
        minutes: 0 
        seconds: 0
      - platform: homeassistant
        event: start
      - platform: event
        event_type: event_template_reloaded
  - image:
         name: "Vorhersage"
         unique_id: VORHERSAGE
         url: https://nodeserver.cloud3squared.com/getMeteogramX/N4IgLg9g1gpgdiAXCAzgVwEYH0

image
image1411Ă—613 109 KB

8

Try just this:

  - trigger:
      - platform: time_pattern
        minutes: 0 
      - platform: homeassistant
        event: start
      - platform: event
        event_type: event_template_reloaded
9

Here is the right code in templates.yaml which makes it work.
Update is done every 30 minutes.

  - trigger:
      - platform: time_pattern
        minutes: /30 
      - platform: homeassistant
        event: start
      - platform: event
        event_type: event_template_reloaded

    image:
        name: "Vorhersage"
        unique_id: VORHERSAGE
        url: https://nodeserver.cloud3squared.com/getMeteogram?hashkey=

the image has to belong to the trigger block :slight_smile: without the “-”…

/edit
just on more thing:
The first functional version was created with:

minutes: /10

after editing to:

minutes: /30

the trigger didn’t notice the change to 30 minutes.
even a restart of HA (system restart) did not solve the problem.

only the renaming of the image did the trick - can be a bug here…

/edit

thanks a lot!
Tom

10

Having same issue here … automation creates 3 doorbel pictures stored in local folder - snapshot1, snapshot2 and snapshot3.

Trying to display the pictures in a dashboard, now via Picture entity card … but the image is NEVER refreshed when someone else rings the bell (through new snapshots are produced).

So If I understand correctly, I need to create an helper “triggered image” …can’t find this on my HA :

image
image511Ă—738 27 KB

Where can I find this ?

Then purpose is to use that helper entoty in picture entity card, is this correct ??
Many thanks !!

11

YAML only. See: Template - Home Assistant

12

ok - but can you please confirm then what you do is a trigger based on the time, for exemple every hour:10 minutes will take the new picture as reference ?

That is not going to work for me because my snapshots are generated when someone rings the bell, and that can be 2 times a day like5 times an hour …

I also saw another option which is to add a “?v=xxxx” to the URL of the picture … but still investigated that too

13

I don’t understand what that means.

Trigger every hour, every ten minutes or every 10 minutes past the hour?

Either way use a time trigger or a time pattern trigger.

14

Let it go Tom, no issue and thanks for your help … I also do not understand the solution you are proposing.

I have 3 files with same filename but changing every time someone ring the bell :

image
image221Ă—133 2.75 KB

I want to display those 3 files on a dashboard, I understand I need to use the Picture entity card.

The issue : picture entity card is keeping cache and not displaying the LATEST produced files.

So you propose to use Template image integration, then you propose to use the “Trigger image” … and this is where I get lost. Can not find it in the UI, you say it is YAML only … ok …

but I do not get what the trigger will do … it is based on the time (ok, every 5 minutes, 10 minutes etc …) but still looking at the image URL stored locally, so I do not understand why using the trigger will allow to get rid of the cache issue.

In my case the correct image need to be displayed when someone rings the bell, meaning when the new snapshots are produced … NOT every 10 minutes or 5 minutes or an hour …

15

The trigger causes the image to update.

So why did you say this?

You are making this way more confusing than it needs to be.

If you want to change the picture doorbell-snaphot-1/2/3 every time the doorbell rings then trigger on the doorbell being pressed.

e.g.

template:
  - trigger:
      - trigger: state
        entity_id: binary_sensor.doorbell_button
        from: 'off'
        to: 'on'
    image:
      - name: Doorbell Snapshot # -> entity id = image.doorbell_snapshot
        url: >
          {% set n = 0 if n is not defined else n %}
          {% set n = n + 1 %} 
          {% set n = 1 if n == 4 else n %} 
          http://homeassistant.local:8123/local/doorbell-snaphot{{n}}.jpg
16

Ok thank you Tom, we are not in sync.
Have a nice day.