Image toggle button

Share your Projects! Dashboards & Frontend
1

Hello guys,
I’m new here and 2 weeks ago I didn’t had any ideas about HA existence. I’ve just bought a Pi4, installed HA …

I love the idea to have cards with icons but I want something more visual intuitive and dumb simple. I want an image card that on tap to toggle a relay (sonoff) and depending of the action state to select a diffrent picture. For 2 days I tinkered with custom buttons and HA’s defalut picture entity with no succes:

show_state: false
show_name: false
camera_view: auto
type: picture-entity
entity: switch.sonoff_100209d0b9_4
state_image:
  "on": https://demo.home-assistant.io/stub_config/bedroom.png
  "off": >-  https://as2.ftcdn.net/v2/jpg/05/85/17/03/1000_F_585170389_sLpWcbpuC4Lzdb3zN3j0EAW9tHFzu4O3.jpg

This could be perfect for my needs but it keeps showing an popup with the toggle that I have to tap.

The idea is to put location images For example one picture (on state) with the christmas tree lights lit and another with the same image but the tree’s lights off(for off state) and toggle between them.

There is this even possible? I start to believe so as the content for such a simple thing is scarce on the internet to find…

Thank you in advance!

2

After some documentation reading I managed to make it work:

type: custom:button-card
entity: switch.sonoff_0000000000
show_state: false
show_name: false
show_entity_picture: true
tap_action:
  action: toggle
state:
  - value: "on"
    entity_picture: https://images.pexels.com/photos/56866/garden-rose-red-pink-56866.jpeg
  - value: "off"
    entity_picture: >-
      https://c02.purpledshub.com/uploads/sites/40/2023/08/JI230816Cosmos220-6d9254f-edited-scaled.jpg