Can't Display a Dynamic Photo Depending on time of day

Configuration Frontend
1

Hello!

I am trying to display an image that is time of day dependant. So far I have been unsuccessful, and I am hoping someone knows of a way accomplish it.

Here is the yaml for my sensor I created, that includes a template to decipher which photo to display depending on time of day:

dynamic_image:
  friendly_name: "Dynamic Image"
  value_template: >
    {% set now_time = now().time() if now() is not none else as_datetime('00:00').time() %}
    {% set today = now().weekday() if now() is not none else 0 %}
    {% set morning_times = {
        0: ('01:40', '05:45'),
        1: ('01:40', '05:45'),
        2: ('01:40', '05:45'),
        3: ('01:40', '05:45'),
        4: ('01:40', '05:45'),
        5: ('01:40', '05:15'),
        6: ('01:45', '07:20')
    } %}
    {% set start_time, end_time = morning_times[today] %}
    {% if now_time >= as_datetime('1970-01-01 ' ~ start_time).time() and now_time <= as_datetime('1970-01-01 ' ~ end_time).time() %}
      /local/images/image1.png
    {% else %}
      /local/images/image2.png
    {% endif %}

and here is the picture-elements card yaml I have tried using, with numerous variants of the sensor:

- type: picture-elements
  image: ${states['sensor.dynamic_image'].state}
  style:
    background-color: transparent
  elements:
    - type: state-label
      entity: sensor.dynamic_image_sensor
      style:
        top: 51%
        left: 50%
        color: white
        font-size: 15px
      card_mod:
        style: |
          ha-card {
            --ha-card-background: rgba(0,0,0,0) !important;
          }
2

It is typically the browser cache causing issues.
A work around for that is to add a timestamp to the URL like image2.,jpg?v={{ now() }}

3

Thanks for the reply! Do I add that portion to both or just one of the images?

Ex:  
/local/images/image1.png?v={{ now() }}
/local/images/image2.png?v={{ now() }}
4

All images.
If it just the normal URL then the browser will see that and think the image is the same, which makes it load the image from cache.
By adding the timestamp, then the URL will always change and the browser will always load the image from the server and not from the cache.

5

So I did what you suggested but now it simply shows the full url including the date and time appended on the end, instead of the actual image. I appended the sensor with that extra bit of code you suggested. But that doesn’t seem to have fixed the problem :frowning:

6

Will work only if this card is inside config-template-card.

I see many threads with picture-elements cards including a code for config-template-card (CTC) without any mentioning of this CTC card. I wonder where all these examples are taken from? Is it some AI-generated BS? I do recall some website about HA where an author posted an article like “how to create a floorplan” with at least 2 silly errors: first, a picture-elements card contained plenty of CTC code w/o pasting a whole card inside CTC; second, the whole idea of placing a picture-elements card with many state-badges, state-labels inside CTC is an absolutely bad idea due to a constant rebuild on each change of monitored entities.

7

Also, consider using an “image” entity and a card supporting it instead of dealing with the mentioned cache and “ver” issues.

8

Also, the “style” option is not supported here.

9

Re: image: ${states['sensor.dynamic_image'].state} Will work only if this card is inside config-template-card - this is not true. It works in picture-entity cards also:

- type: picture-entity
  entity: camera.previous_artwork_1_4
  image: ${states['sensor.previous_artwork_1'].state}
  show_name: false
  show_state: false

Re: displaying dynamic image, I was able to get the dynamic image to work by creating a sensor and then using it inside a picture-elements card:

Sensor:

- platform: template
  sensors:
    dynamic_eb_streetcar_image_1:
      friendly_name: "506 Dynamic EB Streetcar Image"
      value_template: >
        {% set now_time = now().time() if now() is not none else as_datetime('00:00').time() %}
        {% set today = now().weekday() if now() is not none else 0 %}
        {% set morning_times = {
            0: ('01:40', '05:45'),
            1: ('01:40', '05:45'),
            2: ('01:40', '05:45'),
            3: ('01:40', '05:45'),
            4: ('01:40', '05:45'),
            5: ('01:40', '05:15'),
            6: ('01:45', '07:20')
        } %}
        {% set start_time, end_time = morning_times[today] %}
        {% if now_time >= as_datetime('1970-01-01 ' ~ start_time).time() and now_time <= as_datetime('1970-01-01 ' ~ end_time).time() %}
          https://redacted/local/images/ttc-streetcar-306-eb-4.png
        {% else %}
          https://redacted/local/images/ttc-streetcar-eb-9.png
        {% endif %}

Dashboard:

- type: picture-elements
  image: camera.506_dynamic_eb_streetcar_image_1
  camera_image: camera.506_dynamic_eb_streetcar_image_1
  camera_view: auto
10

Absolutely wrong. None stock card supports JS templates.
Probably your example card is placed inside config-template-card.
Or the image is provided by a camera entity.

11

My bad, you’re right, it’s being provided by the camera entity. I hadn’t noticed this previously until you just mentioned it.

Uuntitled
Uuntitled1920×628 63.7 KB