Custom Button - Entity Picture

Configuration Frontend
1

Hi Team.

I am trying to create a custom button that changes the entity picture based on the value of the sensor being 100% , 50% and less than 10%

The code below is just not showing or changing the picture. Any ideas what i am doing wrong. I have been able to change other buttons picture when its a simple on or off

type: custom:button-card
entity: sensor.group_batteries_all
name: Battery
show_state: false
show_name: false
show_entity_picture: true
tap_action:
  action: navigate
  navigation_path: /dashboard-ios/batteries
entity_picture_template: |
  {% if states('sensor.group_batteries_all') | int == 100 %}
    /local/img/battery-100.png
  {% elif states('sensor.group_batteries_all') | int < = 50 %}
    /local/img/battery-50.png
  {% elif states('sensor.group_batteries_all') | int < 10 %}
    /local/img/battery-10.png
  {% else %}
    /local/img/battery-100.png
  {% endif %}
2

That’s not valid. It sshould be “<= 50”

3

Thanks mate for catching the typo there. i updated the code but its not made any difference the pictures displaying.

4

Keep in mind the picture will only change (or should) when the state of the group changes

5

The values of the entity are 100% changing and i can add and remove items from the helper group which makes the values either go up or down.

If i could get it to display a picture that would be a start

6

OK.

Took another look and cobbled this together. This works and displays the correct picture for the state

type: custom:button-card
entity: sensor.group_batteries_all
name: Battery
size: 50px
show_state: false
show_name: false
show_entity_picture: true
tap_action:
  action: navigate
  navigation_path: /dashboard-ios/batteries
state:
  - value: 100
    operator: "=="
    entity_picture: /local/img/battery-100.png
  - value: 50
    operator: <
    entity_picture: /local/img/battery-50.png
  - value: 10
    operator: <
    entity_picture: /local/img/battery-10.png
    styles:
      card:
        - animation: blink 2s ease infinite
  - value: 5
    operator: <=
    entity_picture: /local/img/battery-empty.png
7

For the record, entity_picture_template doesn’t exist.
entity_picture supports templates but javascript one.

Wherever you got the original code, don’t trust it anymore…

Bottom-line: Reading the documentation and using your brain make miracles :smiley: