Picture-elements change the image based on if statements?

Configuration Frontend
1

Is there no way to dynamically set a background image in a picture element?
I want the background image to change based on a set of criteria but I want my badges to remain in place.

everything works except the image doesnt accept if statements or even variable?

ive tried the methods (sample data) but neither work:

variables:
  current_image: >-
    /local/images/animated-power-graph/01.gif
type: picture-elements
elements:
  - type: state-badge
    entity: sensor.solar_kw_total
    style:
      top: 9%
      left: 75%
      transform: scale(0.7,0.7)
      '--ha-label-badge-title-font-size': 0em
  - type: state-badge
    entity: sensor.solar_used_for_house_kw
    style:
      top: 47%
      left: 78%
      title: Solar To House
      transform: scale(0.7,0.7)
      '--ha-label-badge-title-font-size': 0em
image: '{{ current_image }}'

and this:

type: picture-elements
elements:
  - type: state-badge
    entity: sensor.solar_kw_total
    style:
      top: 9%
      left: 75%
      transform: scale(0.7,0.7)
      '--ha-label-badge-title-font-size': 0em
  - type: state-badge
    entity: sensor.solar_used_for_house_kw
    style:
      top: 47%
      left: 78%
      title: Solar To House
      transform: scale(0.7,0.7)
      '--ha-label-badge-title-font-size': 0em
image: >
  {% if states('sensor.solar_used_for_house_kw')|float > 0 %}
    /local/images/animated-power-graph/02.gif
  {% else %}
    /local/images/animated-power-graph/01.gif
  {% endif %}
2
  1. Place the whole picture-elements card inside config-template-card and set the main image in a JS template.
  2. Set the main image by defining a css “background” property by card-mod in a jinja template.
  3. Add an “image” element, enlarge it to cover the whole card and use “state_image” option.
3

thanks for the suggestion

ill give that a try in a bit. I ended up getting mostly there with the “html card” addon. Was just hoping to do it natively without additional addons.

4

Check here

1 Like