Lovelace custom:button-card - change image on state change

Configuration Frontend
1

Hello all. New to HA but really like it and I have the Custom:button-card working. It is very nice and exactly what I want to use.

I am creating custom images to use as icons. My question is how would I change the image when I click the button. Light bulb on when lights are on and Light bulb off when lights are off.

hueLigtOffSmall
hueLigtOffSmall600×659 126 KB

hueLigtOnSmall
hueLigtOnSmall600×659 138 KB

Thank you for any input or help. This is really nice work from the developers.

Dennis

2

here is a simple example on how I do it, note that you have to set show_entity_picture to true

        entity: binary_sensor.dome_dining_room_window_1_sensor
        name: Comedor
        show_entity_picture: true
        tap_action:
          action: more-info
        state:
          - entity_picture: /local/pics/window-closed.svg
            value: 'off'
            styles:
              card:
                - width: 190px
                - border-radius: 13px
          - entity_picture: /local/pics/window-open.svg
            value: 'on'
            styles:
              card:
                - width: 190px
                - border-radius: 13px
3

Thank you so much. This worked out great and I now have the text change color as well. It all makes sense now.

I really appreciate your help,

Dennis

4

Here is the code I finally came up with.

cards:
      - type: 'custom:button-card'
        entity: light.office
        name: Office Lights
        show_entity_picture: true
        show_state: true
        tap_action:
          action: toggle
        state:
          - entity_picture: /local/icons/hueLigtOffSmall.png
            value: 'off'
            styles:
              card:
                - width: 160px
                - border-radius: 14px
                - padding-top: 10px
                - padding-bottom: 10px
                - margin-bottom: 20px
              name:
                - font-size: 18px
                - color: gray
                - align-self: middle
                - padding-bottom: 10px
                - padding-top: 20px
          - entity_picture: /local/icons/hueLigtOnSmall.png
            value: 'on'
            styles:
              card:
                - width: 160px
                - border-radius: 14px
                - padding-top: 10px
                - padding-bottom: 10px
                - margin-bottom: 20px
              name:
                - font-size: 18px
                - color: yellow
                - align-self: middle
                - padding-top: 20px
                - padding-bottom: 10px
6 Likes