Lovelace: Button card

eximo84 · December 4, 2020, 11:21pm

Thanks RomRider. Got it working, had an interesting time aligning the play state buttons but got there in the end.

This should be dynamic too, im still using my automation to put the player name into a text_input and then im creating a variable from that. Im sure the variable field can take a template but ill maybe look at that another day.

Artekus · December 6, 2020, 9:18pm

Change the value from ‘on’ to ‘off’

Makis · December 7, 2020, 11:12am

thank you, that’s it

Umbe · December 7, 2020, 2:22pm

Hi , @petro , sorry i might have lost an update somewhere , i had your card

which was working ok , each button was functioning , and now i just noticed that insted of the button, the card push button once and then open the popup

          - type: 'custom:button-card'
            entity: media_player.denon
            custom_fields:
              down:
                card:
                  type: 'custom:button-card'
                  show_name: false
                  size: 60%
                  entity: |
                    [[[ return entity.entity_id; ]]]
                  icon: 'mdi:volume-minus'
                  tap_action:
                    action: call-service
                    service: media_player.volume_down
                    service_data:
                      entity_id: |
                        [[[ return entity.entity_id; ]]]
              up:
                card:
                  type: 'custom:button-card'
                  size: 60%
                  entity: |
                    [[[ return entity.entity_id; ]]]
                  icon: 'mdi:volume-plus'
                  show_name: false
                  tap_action:
                    action: call-service
                    service: media_player.volume_up
                    service_data:
                      entity_id: |
                        [[[ return entity.entity_id; ]]]
              stop:
                card:
                  type: 'custom:button-card'
                  size: 60%
                  entity: |
                    [[[ return entity.entity_id; ]]]
                  icon: 'mdi:power'
                  show_name: false
                  tap_action:
                    action: call-service
                    service: media_player.toggle
                    service_data:
                      entity_id: |
                        [[[ return entity.entity_id; ]]]
            styles:
              grid:
                - grid-template-areas: '"i i i i i" "n n n n n" ". up stop down ."'
                - grid-template-rows: min-content 1fr 2fr
                - grid-template-columns: 5% 1fr 1fr 1fr 5%
              card:
                - max-width: 200px
                - max-height: 300px
                - padding-bottom: 0
            icon: mdi:audio-video

Any idea how to fix it ?
Thanks

petro · December 7, 2020, 2:25pm

Sorry, that’s not my card. Maybe thinking of someone else?

Umbe · December 7, 2020, 2:55pm

Might be @RomRider or @kuuji ?
Sorry for the trouble

stban1983 · December 8, 2020, 1:19pm

I’m having the same behavior with button cards who use call-service

RomRider · December 8, 2020, 3:08pm

@Umbe @stban1983, there seem to be an issue with the latest 3.4.0 release regarding embedded cards, I’ll look into this soon. In the meantime you should roll back to the previous 3.3.4 release.

Umbe · December 8, 2020, 3:13pm

Thanks , appreciated!

eximo84 · December 9, 2020, 4:06pm

Here is an odd one. Button showing Dave / Cat is two buttons configured as custom fields. See how the bottom button doesn’t have any border radius?

I’m setting border radius 0 on the two buttons but it seems to override the base button which doesn’t have any setting set for border radius.

This only seems to happen on iOS. Any ideas?

weckma · December 9, 2020, 5:07pm

When trying to use javascript to enter the url to a background image of the button card it is not working.

here is working code with local image working correctly

styles:
  card: 
    - background-image: |
       url("/local/images/tobiasbeckman.jpg")

When trying to ad javascript to get entity attribute it is no longer working. The code i am trying is this.

styles:
  card: 
     - background-image: |
        url("{{ state_attr('media_player.kok', 'entity_picture') }}")

Any ideas?

RomRider · December 9, 2020, 9:06pm

Try with this:

styles:
  card:
    - overflow: hidden

PS: safari sucks

What you wrote is not javascript, it is jinja2.
This would probably work:

styles:
  card: 
     - background-image: '[[[ return `url("${states["media_player.kok"].attributes.entity_picture}")`; ]]]'

parautenbach · December 10, 2020, 4:42am

RomRider would know best so try that suggestion first but if that doesn’t work, try to set box-shadow: none in the styles of the inner cards. I think I had this same issue when I added an inner card that’s a timer (only at the top and not the bottom though). My full code is posted somewhere on this thread but it’s like this:

            custom_fields:
              t:
                card:
                  type: custom:button-card
                  name: Timer
                  entity: timer.lhs_garage_door_timer
                  show_name: false
                  show_icon: false
                  show_state: true
                  styles:
                    card:
                      - font-size: 12px
                      - box-shadow: none

weckma · December 10, 2020, 12:48pm

Thanks RomRider. It works perfectly!

Is it possible to change the url variable to become somthing like this?

styles:
  card: 
     - background-image: '[[[ return `url("${entity.attributes.entity_picture}")`; ]]]'

eximo84 · December 12, 2020, 5:28pm

This fixed it thank you.

yoni3210 · December 14, 2020, 5:05am

Great job! Can you share your code?

eximo84 · December 14, 2020, 11:39pm

here you go: eximo84/homeassistant-config-v2: Home Assistant Configuration including Lovelace YAML (github.com)

maxym · December 21, 2020, 4:52pm

I found this card very powerful. Thank you for that.
Because I’m just starting with that, is it normal that the button card element takes more place than its content? I defined with as 150px, but button card takes 380px (shadow root inside has indeed 150px)

It makes impossible to automatically fill the space with those buttons. Is it intentionally? Have it be layouted explicitelly with stack cards? In examples I found nothing about it… all cards sits one next to each other

RomRider · December 21, 2020, 10:31pm

Don’t set the width and height, use aspect_ratio: 1/1 instead.

infiniteloop · December 22, 2020, 5:35pm

Hi @RomRider,
I’m trying to use your card in combination with Swiper card.
It works well in browser, but I have an issue on mobile (iOS):
when I swipe to change card, the tile I put the finger on get activated, as if I would tapping it.
I’ve tried with other custom “button” card (e.g. homekit style card) and I have not encountered this issue.
Do you think there’s a way to solve it?
Hope my explanation is clear enough… thanks in advance for any help, and thank for this awesome card