Variable picture card based on sensor - help

Configuration Frontend
1

Followed Vaclav’s very helpful YouTube guide to using local calendars for bin/trash collections. I have my sensors set up and working. I’m really struggling to create a conditional picture card. I tried using the one in this video https://www.youtube.com/watch?v=RpwAhy7f52I

I keep getting indentation errors etc. Fairly new to this. Is there something obvious wrong with this? I’m choosing Add Card->Manual and the following code. Thank you in advance.

type: custom:config-template
entities:
  - sensor.blue_bin_days
variables:
  DAYS: states['sensor.blue_bin_days'].attributes['days']+'d'
card:
  type: picture-entity
  entity: sensor.blue_bin_days
  name: $(DAYS)
  show_name: true
  show_state: false
  state_image:
    '0' /local/pictures/blue0.jpg
    '1' /local/pictures/blue1.jpg
    '2' /local/pictures/blue2.jpg
2

Error is:

Configuration errors detected:
bad indentation of a mapping entry (13:9)

10 | show_name: true

3

you don’t have colons for state image.

4

@petro legend! I’ve been puzzling over this for more time than i would like to admit. Thank you!

5

One more small issue. My sensor has 3 states 0, 1 or 2. The below is displaying the correct image if sensor is in the first state (in the below 0). However, when sensor is in state 1 or 2, I get a loading type symbol rather than the picture. It seems the below is only reading the first option only. If true then displays the picture. If not, it doesnt seem to be looking the the next line of code. If for example i reorder the code and put state 1 first (rather than zero) and sensor is in state 1 the picture displays.

type: custom:config-template-card
entities:
  - sensor.grey_bin_days
variables:
  DAYS: states[ 'sensor.grey_bin_days' ].attributes[ 'days' ]+'d'
card:
  type: picture-entity
  entity: sensor.grey_bin_days
  name: ${DAYS}
  show_name: true
  show_state: false
  state_image:
    '0': /local/pictures/grey0.jpg
    '1': /local/pictures/grey1.pg
    ‘2’: /local/pictures/grey2.jpg
6
  1. May be unrelated: fix these quotes:
  state_image:
    ...
    ‘2’: ...
  1. Also - this could be a bug:
/grey1.pg
  1. Check what is an exact value for this “zero” sensor, could it be like “0.0”?
    Here is a working simplified code:
    image
    image958×655 19.3 KB
type: custom:config-template-card
entities:
  - sensor.testing_hs_count
card:
  type: picture-entity
  entity: sensor.testing_hs_count
  name: xxx
  show_name: true
  show_state: false
  state_image:
    '0': /local/images/test/orange.jpg
    '1': /local/images/test/blue.jpg
    '2': /local/images/test/lightgreen.jpg
7

That sorted it. It was the quotes - every day is a school day. Thank you!

8

Btw you can use JS instead of “state_image”.
Kind of

  image: >-
    ${ '/local/pictures/grey' + states['sensor.xxxxxxx'].state + '.jpg' }

In general:

type: custom:config-template-card
variables:
  ENTITY: states['sensor.testing_hs_count']
entities:
  - ${ENTITY.entity_id}
card:
  type: picture-entity
  entity: ${ENTITY.entity_id}
  name: xxx
  show_name: true
  show_state: false
  image: >-
    ${
      var COLOR;
      var STATE = ENTITY.state;
      switch(STATE)
      {
        case '0': COLOR = 'orange'; break;
        case '1': COLOR = 'blue'; break;
        case '2': COLOR = 'lightgreen'; break;
      }
      '/local/images/test/' + COLOR + '.jpg'
    }
1 Like