Different background depending of time of day

Configuration
1

I am planning to add a horizonal banner (picture-element) above my floorplan in my lovelace UI. The banner shall change background depending of time of day.
See the example below, which is the start of my code. I would like to change “image:/local/timeofday/day.png” to another png-file depending on the state of a sensor which will have the states (sunrise, morning, day, sunset, evening, night), just like the “state_image”, but state_image only works for elements, not the background itself.

cards:
  - cards:
      - elements:
          - entity: sensor.example1
            style:
              '--iron-icon-height': 20px
              '--iron-icon-width': 20px
              left: 5%
              top: 5%
            type: state-icon
        image: /local/timeofday/day.png
        type: picture-elements
    type: horizontal-stack
  - cards:
      - elements:
          - entity: sensor.example2
            style:
2

I have manged to come half way with picture-glance. I shift picture depending on time of day, but of course I cannot add any elements, just entities. Anyone know of a way to mix these two?

cards:
  - cards:
      - entities:
          - entity: weather.smhi_home
            type: weather-forecast
        entity: sensor.timeofday
        state_image:
          day: /local/timeofday/day.png
          evening: /local/timeofday/evening.png
          morning: /local/timeofday/morning.png
          night: /local/timeofday/night.png
          sunrise: /local/timeofday/sunrise.png
          sunset: /local/timeofday/sunset.png
        type: picture-glance
    type: horizontal-stack
  - cards:
      - elements:
3

Ok, I think I have solved it, since someone might wanna do this, I thought it would be good to post the solution.
The soultion is to use picture-elements with a image elements state_image with the tap and hold action turned off. By turning it off the state-image becomes more or less a dead background, but can be changed with the sensor state.

cards:
  - cards:
      - elements:
          - entity: sensor.timeofday
            state_image:
              day: /local/timeofday/day.png
              evening: /local/timeofday/evening.png
              morning: /local/timeofday/morning.png
              night: /local/timeofday/night.png
              sunrise: /local/timeofday/sunrise.png
              sunset: /local/timeofday/sunset.png
            tap_action: none
            hold_action: none
            style:
              left: 50%
              top: 50%
              width: 100%
              height: 100%
            type: image
          - entity: sensor.nibe_69862_40004
            prefix: 'Outside temp: '
            style:
              '--iron-icon-height': 20px
              '--iron-icon-width': 20px
              left: 10%
              top: 7%
            type: state-label
          - entity: sensor.nibe_69862_40004
            style:
              '--iron-icon-height': 20px
              '--iron-icon-width': 20px
              left: 4%
              top: 5%
            type: state-icon
        image: /local/timeofday/background.png
        type: picture-elements
    type: horizontal-stack
3 Likes
4

Can you share the config of your sensor.timeofday?

I am looking to put together a sleep clock for my kiddos. The basic idea is that the background picture on a picture-element card changes colors based on what time of the night it is. Yellow would be the turn down time where they get ready for bed by reading / relaxing. Red would mean its time for bed and to stay in bed. Green would be time to get up or its ok to come to our bed.

It should be pretty simple to put this together but i am struggling getting a sensor that I can set the labels and associated time ranges that i can reference to change the backgrounds.

For any of you who have smallish kids getting them to stay in their beds can be a challenge.

Any help is greatly appreciated!

5

Just change times or elevation of sun of your choice.

  - platform: template
    sensors:
      timeofday:
        friendly_name: "time of day"
        value_template: >-
          {% if (states.sun.sun.attributes.elevation | float > -2) and (states.sun.sun.attributes.elevation | float < 4) and (states.sensor.time.state < "12:00")%}sunrise
          {% elif (states.sensor.time.state > "06:00") and (states.sensor.time.state < "09:00")%}morning
          {% elif (states.sensor.time.state > "09:00") and (states.sensor.time.state < "19:00")%}day
          {% elif (states.sun.sun.attributes.elevation | float > -2) and (states.sun.sun.attributes.elevation | float < 4)and (states.sensor.time.state > "12:00")%}sunset
          {% elif (states.sensor.time.state > "19:00") and (states.sensor.time.state < "23:00")%}evening
          {% else %}night
          {% endif %}
6

Thanks for sharing your code.
May I suggest a slightly optimised equivalent?

{% set time = states.sensor.time.state %}
{% set elevation = states.sun.sun.attributes.elevation %}
{% set night_from = '23:00' %}
{% if -2 < elevation < 4 %}
  {{ 'sunrise' if time < '12:00' else 'sunset' }}
{% elif time < '06:00' or time > night_from %} night
{% elif time < '09:00' %} morning
{% elif time < '19:00' %} day
{% elif time < night_from %} evening
{% else %} night
{% endif %}
1 Like
7

I’m trynna do this way:

state_image:
  'on': /local/images/3d_floorplan/livingroom_light_1.png
  'off': |
    {% if is_state('sun.sun', 'above_horizon') %}
      /local/images/3d_floorplan/base_light.png
    {% else %}
      /local/images/3d_floorplan/base_dark.png
    {% endif %}

image
image1039×768 40.1 KB

It didn’t work, could you guys gimme a hand?