gauge card tap_action (workaround) | Home Assistant | Page 1

supple compass Mar 20, 2024, 9:04 PM

#

The short answer to your question is you can't because the gauge card does not support tap actions.
The longer answer, is that I took a totally roundabout method and came up with my own way of making a tap_action. (In your case it would be a hold_action but for this example I went with tap. I'm also just toggling an input_boolean but this is just more for proof-of-concept.)

#

#

So, what you're seeing here is two custom:button-cards. The one on the right is nothing fancy: entity of the input_boolean, icon & name hidden, state shown with a 26px font-size.

#

The left card, however, contains two custom fields. The first contains the gauge card. The second contains yet another custom:button-card with no background or border. and has the tap_action to toggle the input_boolean.

#

The custom fields have a z-index applied: 0 for the gauge card; 1 for the overlay custom:button-card.

#

type: custom:button-card
styles:
  card:
    - height: 150px
    - width: 150px
    - padding: 0px
  custom_fields:
    gauge:
      - top: 0%
      - right: 0%
      - position: absolute
      - z-index: 0
      - height: 100%
      - width: 100%
    overlay:
      - top: -10px
      - right: 0px
      - position: absolute
      - z-index: 1
      - height: 100%
      - width: 100%
custom_fields:
  gauge:
    card:
     type: gauge
     entity: sensor.s22_ultra_battery_level
     name: Battery Level
  overlay:
    card:
      type: custom:button-card
      entity: none
      styles:
        card:
          - background-color: transparent
          - border: none
          - height: 150px
          - width: 150px
          - padding: 0px
          - margins: -10px
      tap_action: 
        action: toggle
        entity: input_boolean.tester

trim jewel Mar 21, 2024, 1:05 AM

#

supple compass ```yaml type: custom:button-card styles: card: - height: 150px - width...

I love this!

#

I assumed this was where I was headed, but if someone else already thought it through. I could save some brain power

#

Thanks!

supple compass Mar 21, 2024, 1:42 AM

#

@opaque hawk This is a workaround that I put together to "enable" tap actions on a Gauge card.

#

@trim jewel This is a very hack-y way of getting this to work, but, it technically does what you want it to do. Initially, I was simply going to respond that it couldn't be done because of the lack of tap_action support. But, this turned out to be more useful/fun/effective.
I did notice a little bit of the overlay card not lining up inside the main custom:button-card. It's not that big of a deal but I did notice it during the mdc-ripple-color effect.

#

@drowsy sable Check this out. I used your project when I considered this option. Since you use custom:button-cards within a custom:button-card, that was the basic of getting this to work.

drowsy sable Mar 21, 2024, 2:03 AM

#

Very nice indeed. Using that z-index opens a lot of possibilities especially by making it transparent.

opaque hawk Mar 21, 2024, 2:21 AM

#

supple compass <@751645613782990928> This is a workaround that I put together to "enable" tap a...

Thanks

supple compass Mar 22, 2024, 9:32 PM

#

gauge card tap_action (workaround)

supple compass Aug 20, 2024, 10:44 PM

#

@trim creek check this out for how to get an overlay to work.

trim creek Aug 21, 2024, 7:18 AM

#

Thanks! Looks like I was on the right track then. This will help a lot 🙂

#gauge card tap_action (workaround)