Responsive Picture Element background

Configuration Frontend
1

Hi guy’s I really am struggling here. I am wanting to have a dashboard panel with a plan of my house, that changes at sunset. I have the two identical plans (day & night) in the local/www/ folder. I have confirmed they are accessible in the directory.
I have changed my configuration. yaml

sensor:

  • platform: template
    sensors:
    kitchen_temperature:
    friendly_name: “Kitchen Temperature”
    unit_of_measurement: “°C”
    value_template: “{{ state_attr(‘climate.kitchen’, ‘current_temperature’) }}”

    large_bedroom_temperature:
    friendly_name: “Large Bedroom Temperature”
    unit_of_measurement: “°C”
    value_template: “{{ state_attr(‘climate.mackenzies_bedroom’, ‘current_temperature’) }}”

- platform: template
** sensors:**
** day_night_image:**
** value_template: >-**
** {% if is_state(‘sun.sun’, ‘above_horizon’) %}**
** ‘day_image.png’**
** {% else %}**
** ‘night_image.png’**
** {% endif %}**

I have then created a Picture Elements card with the following code
type: picture-elements
image: “{{ ‘/local/’ + states(‘sensor.day_night_image’) }}”
elements:

  • type: state-icon
    entity: sun.sun
    style:
    top: 50%
    left: 50%

This leaves me with a grey background image with a sun icon which changes to a moon when the sun sets.

Any tips would be greatly appreciated

2
  1. Post a code according to community rules. Currently your posted code cannot be analyzed.
  2. You are trying to use templates inside Picture elements card which is unsupported. Consider using other ways: either using “image_entity” (see docs for Picture elements card), or config-template-card, or card-mod.
3

Hi Ildar, thanks for replying. I am new to this stuff, not really sure what I am doing.