Gauge card tap action "solution" sharing

Configuration Frontend
1

I’m sharing my “solution” to add tap action to gauge card, it’s not the cleanest solution, but it works.

type: custom:button-card
custom_fields:
  gauge:
    card:
      type: gauge
      entity: sensor.total_power
      needle: true
      min: -6000
      max: 8000
      severity:
        green: 0
        yellow: 6600
        red: 7500
      card_mod:
        style: |
          ha-card {
            box-shadow: none;
            border: none;
          }
styles:
  custom_fields:
    gauge:
      - overflow: unset
      - z-index: -1
  card:
    - overflow: unset
    - filter: opacity(100%)
    - padding: 0px
  grid:
    - grid-template-areas: '"gauge"'
    - grid-template-columns: 100%
    - grid-template-rows: 100%
tap_action:
  action: navigate
  navigation_path: /dashboard-default/energy
4 Likes
2

Thanks very much for this! It’s been driving me mad trying work out a solution, then I found your post. Hero.

3

@Pico81 Hi again, I had this working perfectly thanks to your code but I’ve found out that when the page is refreshed I get ‘Custom element doesn’t exist: gauge’
Any ideas what could be wrong? Thanks

4

Hi, have you solved it? I think it’s due to the custom-button-card JS being loaded into the browser cache

5

Thanks for sharing your solution!
While looking around I stumbled on a different approach on Reddit. It’s also using a button card. But it feels more clean: https://www.reddit.com/r/homeassistant/s/aG7UkMBnTQ
This solution uses the custom:layout-card to put a transparant button on top of one or more other cards (I.e gauges).

1 Like
6

Tap action will be natively supported for gauge card coming in 2024.6

1 Like
7

Thanks, nice work

8

Thanks, that is good news :tada:

9

Thanks!!! It works great