Web-UI with pics does not update pictures

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

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

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.

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,

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.

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

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

Try just this:

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

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