Lovelace: Button card

That’s it now it is working
Thanks both of you.

I’ve been playing with the custom button card recently and have a question. I have a receiver controlled by a harmony hub that goes into bluetooth pairing mode when the bluetooth source button is held down for a few seconds. I’d like to be able to trigger this behavior from the button card, but am unsure what action might have this tap and hold effect. I tried to use the call service and repeat actions under the hold action unsuccessfully. Any guidance would be appreciated!

It doesn’t work like that unfortunately. Unless there’s a direct command you can send to trigger the paring mode from the harmony remote (without even involving home assistant), it won’t be possible. Nothing to do with button-card.

Wrong thread - sorry!

Hi everyone!

Do you know what I have to do to have my dark sky weather card show decimals with current temperature? I am using xiaomi sensor for that data and it does support decimals but card doesn’t.

Thank you

How is the darksky weather card related to button-card? Wrong thread?

I’ve built a new card for you crazy graphing folks out there :slight_smile:

mis3rofp

:arrow_forward: https://community.home-assistant.io/t/apexcharts-card-a-highly-customizable-graph-card/

Give it a go and let me know what you think :slight_smile:

6 Likes

Doh! Yes, sorry!

Thanks for the reply, RomRider. I was hoping it might be possible as I’m able to get pairing mode to activate remotely by pressing and holding the bluetooth button in the harmony app. Is it that button card doesn’t distinguish between button down and button release states?

I don’t think there’s a direct ‘one tap’ command that can be sent from harmony remote to trigger pairing mode, but I’ll poke around a bit and see if something surfaces.

I’m working on a new button that has multiple icons inside it. I want to show a vertical-stack containing 4 button cards, at the right side of the main button card. But for the life of me I cannot change the size of the vertical-stack inside the button-card. Is there a way to change what the dimensions are of the vertical-stack inside the main button card, so all the button-cards inside the vertical-stack are nice and small?

Any advice?

Please share your code, hard to say like that :slight_smile:

1 Like

My code is kind of a mess right now since I’m experimenting, but here it is for now:

                      - deep_press: true
                        hold_action:
                          action: more-info
                          haptic: heavy
                        icon: 'mdi:sofa'
                        name: Woonkamer
                        aspect_ratio: 1/1
                        show_icon: true
                        show_label: true
                        show_name: true
                        size: 30%
                        label: |
                          [[[
                            return states['climate.woonkamer_radiator'].attributes.local_temperature + '°C';
                          ]]]                           
                        custom_fields:
                          status:
                            card:
                              type: vertical-stack
                              cards:
                                - entity: cover.woonkamer_gordijnen
                                  show_name: false
                                  show_label: false
                                  show_icon: true
                                  state:
                                    - styles:
                                        icon:
                                          - filter: opacity(30%)
                                          - color: '#000000'
                                      icon: 'mdi:blinds'
                                      value: 'closed'         
                                    - styles:
                                        icon:
                                          - color: 'var(--switch-accent-color)'
                                      icon: 'mdi:blinds-open'    
                                      value: 'open'  
                                  styles:
                                    card:
                                      - background: none                                     
                                  tap_action: none
                                  hold_action: none
                                  type: 'custom:button-card'    
                                - entity: cover.woonkamer_gordijnen
                                  show_name: false
                                  show_label: false
                                  show_icon: true
                                  state:
                                    - styles:
                                        icon:
                                          - filter: opacity(30%)
                                          - color: '#000000'
                                      icon: 'mdi:blinds'
                                      value: 'closed'         
                                    - styles:
                                        icon:
                                          - color: 'var(--switch-accent-color)'
                                      icon: 'mdi:blinds-open'    
                                      value: 'open'  
                                  styles:
                                    card:
                                      - background: none                                     
                                  tap_action: none
                                  hold_action: none
                                  type: 'custom:button-card'
                                - entity: cover.woonkamer_gordijnen
                                  show_name: false
                                  show_label: false
                                  show_icon: true
                                  state:
                                    - styles:
                                        icon:
                                          - filter: opacity(30%)
                                          - color: '#000000'
                                      icon: 'mdi:blinds'
                                      value: 'closed'         
                                    - styles:
                                        icon:
                                          - color: 'var(--switch-accent-color)'
                                      icon: 'mdi:blinds-open'    
                                      value: 'open'  
                                  styles:
                                    card:
                                      - background: none                                     
                                  tap_action: none
                                  hold_action: none
                                  type: 'custom:button-card'
                                - entity: cover.woonkamer_gordijnen
                                  show_name: false
                                  show_label: false
                                  show_icon: true
                                  state:
                                    - styles:
                                        icon:
                                          - filter: opacity(30%)
                                          - color: '#000000'
                                      icon: 'mdi:blinds'
                                      value: 'closed'         
                                    - styles:
                                        icon:
                                          - color: 'var(--switch-accent-color)'
                                      icon: 'mdi:blinds-open'    
                                      value: 'open'  
                                  styles:
                                    card:
                                      - background: none                                     
                                  tap_action: none
                                  hold_action: none
                                  type: 'custom:button-card'                                  
                            
                        styles:
                          card:
                            - background-color: var(--card-background-off)
                            - font-size: 12px
                          custom_fields:
                            status:
                              - overflow: visible
                              - position: absolute
                              - right: 15px
                              - top: 10px
                              - justify-self: start
                              - align-self: start
                              - align-items: start
                              - align-content: start 
                              - text-align: start
                              - height: 30px
                          grid:
                            - grid-template-areas: '"i" "n" "l'
                            - grid-template-columns: 1fr
                            - grid-template-rows: 1fr min-content min-content
                          img_cell:
                            - align-self: start
                            - text-align: start
                            - position: absolute
                            - bottom: 5px
                          name:
                            - padding-bottom: 5px  
                            - font-weight: bold
                        tap_action:
                          action: navigate
                          navigation_path: /smartphone-ui/kamer-woonkamer
                          haptic: medium
                        type: 'custom:button-card' 

The thing I’m trying to create is the custom field: status part (where I used a vertical-stack with 4 button cards inside it).

Edit: The screenshot below shows the new card at the left and the old version on the right. Basically I want to re-create the right card, but using a 4 button cards inside a vertical-stack.
msedge_dVsiY8p73I

Hey I try to uses this card but the name will not disappear.

type: "custom:button-card"
entity: light.deckenlicht
icon: mdi:sofa
color: auto
action: more_info

The configuration is not correct, this is the very very very old one. Please have a look at the documentation

Crate thank you. The right doku helpes :slight_smile:

HI Rom!

must confess clicking that link brought me to the ripple-color for the first time… :blush: and immediately makes me need it !

using this on entities with an on/off state works perfectly:

  styles:
    card:
      - --mdc-ripple-color: >
         [[[ return (entity.state == 'on')
             ? 'var(--background-color-off)' : 'var(--background-color-on)'; ]]]

Seems to be the easiest way to ‘auto-contrast’ the ripple, and do so in style of the current color scheme.

however, using that on a button which is set to service a script (and doesnt have an entity) doesn’t work at all of course. Made me wonder if I could use the ‘this’ and then eg this.background-color to have it oppose that (since I have background-color active on all of my buttons, that would be easiest:

  styles:
    card:
      - --mdc-ripple-color: >
         [[[ return (this.background-color == var(--background-color-on))
             ? 'var(--background-color-off)' : 'var(--background-color-on)'; ]]]

maybe? Since you warn us not to ‘mess with that’ I thought it better to ask first :wink:

thanks!

Hi. First of all, flipping great addition to Home Assistant.

I am struggling a bit. Certainly something i changed, but for the life of me, i cant figure out want i am doing wrong.

I am struggling a bit with the --button-card-light-color-no-temperature
I have it on two different entity types, which previously acted the same way.

The light entity which get the correct color.
The switch entity which seems to get the color from paper-item-icon-active-color

Any insights?

What you are missing is the width of the styles.custom_fields.status.
By default, the vertical stack takes 100% of the width of the container and the container in your case takes the full width of the card. So adding: width: 10% or whatever else in the styles.custom_fields.status should fix your issue :slight_smile:

this is the button-card element in the DOM. It doesn’t have any background-color.
What you could try is this.shadowRoot.getElementById("card").style.background === 'var(--background-color-on)'

A switch has no color, so the behaviour is undefined :slight_smile:
What are you trying to achieve?

thanks, but:

Then maybe like this…

  styles:
    card:
      - --mdc-ripple-color: >
          [[[
            let elt = this.shadowRoot;
            elt = elt && elt.getElementById("card");
            if (elt) {
              return elt.style.background === 'var(--background-color-on)' ? 'var(--background-color-off)' : 'var(--background-color-on)';
            }
            return null;
          ]]]
1 Like

Hello all,
I was wondering if it is possible to show the current timer duration remaining, similar to when the timer is added to a standard entity card? I have found different posts around the forum giving different recommendations, but they are all from 2019 and do not seem to work for me.
Thank you,
-Curtis