Lovelace: Button card

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

maxym · December 23, 2020, 11:27am

Is it possible to pop-up confirmation only for specific event (ie double tap)

Sven12345 · December 24, 2020, 5:45pm

Hi, i think it’s a easy question but i can find the solution.
afbeelding

This button card is for a script i will that the icon always have the color green.
how can i fix that? thanks for helping!

type: ‘custom:button-card’
entity: script.blauw
name: Aan
color_type: icon
color: ‘rgb(14, 53, 247)’
icon: ‘mdi:lightbulb-on-outline’
tap_action:
action: toggle

sylviepipi · December 25, 2020, 8:04pm

Is it possible to use attributes with a - in the name in a template

label: >
           [[[                           
               if (entity === undefined) return "?"  ;                
               if (entity.attributes.days-until !=  undefined) return entity.attributes.days-until  ;                
                          else  return "?"
                      ]]]

Get the followingin error: ButtonCardJSTemplateError: ReferenceError: until is not defined in ‘return entity.attributes.days-until if (entity === undefined) return “?” ; …’

parautenbach · December 25, 2020, 8:46pm

It’s because it’s interpreting it as a math expression, like x - y.

Try entity.attributes["days-until"].

sylviepipi · December 26, 2020, 9:27am

Many thanks, works perfectly now

maxym · December 26, 2020, 11:47am

Is there a way to style all cards on the page at once?
Right now I have 7 cards on the page organized with use of grid card. And I’m in the progrerss of backporting styles from homekit card (because of lack of some features which are found in custom:button card)
But everytime I need to change some detail, I have to go through all seven cars to update them.

Is there a way?

Also I found using grid not perfect, because for some reason it doesn’t apply right padding/margin, so cards are sticked to right frame of mobile phone. In this case homekid card works better not trying to fill size for any cost.

Is there more efficient alternative how to keep 3 columns of cards without need of defining sizes, margins, paddings for every button? Or achive behaviour of HK cards in this regard?

Thanks in advance
with regards

RomRider · December 27, 2020, 12:27am

You need to change some settings for swiper card to work properly on mobile, this works for me:

  - type: custom:swipe-card
    parameters:
      simulateTouch: true
      followFinger: true
      preventInteractionOnTransition: true
      shortSwipes: true
      preventClicks: true
      preventClicksPropagation: true
      touchStartPreventDefault: false
      mousewheel: true

Yes, it’s possible, each action can have its own confirmation object: button-card/README.md at master · custom-cards/button-card · GitHub

You have to set the color directly on the icon:

styles:
  icon:
    - color: green

Yes, you can use configuration templates for that. Check the documentation

I don’t understand, please share your code and show us a screenshot.

Yes, sure, if the entity defined in the button-card config is the one which has the entity picture you want to use.

Pronown · December 27, 2020, 1:40am

Hello, I REALLY want to use this card, but for the life of me cannot figure out how to get past the “element does not exist” error. I have the resource in lovelace, I think I am missing a step between putting it in resources and doing the dashboard. Am I supposed to copy a file into www? I am new to AH so any help or if someone could point me towards a more detailed tutorial so I can use this card it would be very appreciated, thank you!

parautenbach · December 27, 2020, 7:38am

The docs are fine. You need to tell us what your config looks like and which steps you performed (as well as how).

infiniteloop · December 27, 2020, 11:59am

RomRider:

infiniteloop:

It works well in browser, but I have an issue on mobile (iOS):

You need to change some settings for swiper card to work properly on mobile, this works for me:
  - type: custom:swipe-card
    parameters:
      simulateTouch: true
      followFinger: true
      preventInteractionOnTransition: true
      shortSwipes: true
      preventClicks: true
      preventClicksPropagation: true
      touchStartPreventDefault: false
      mousewheel: true

Unfortunately it doesn’t works for me. Are you on iOS?
Anyway, thanks for the hint, I’ll make a try with some other parameter.

RomRider · December 27, 2020, 2:32pm

Version 3.4.1

Bug fixes

Clicks on embedded cards were triggering the action of button-card (Fix #410) (Sorry )

Other

Remove the ellipsis class from embedded cards (cc: @petro)

Pronown · December 27, 2020, 4:19pm

Thank you for responding.
Below is a copy paste of the steps taken and the coding for the lovelace card. I had asked on a new topic but no responses. I’m sure the step I missed was configuration file, I haven’t edited that.

Thank you in advance, I am super new to HA.
I have been all over the forums and google looking for a how to.
I am having trouble adding custom cards.
Specifically Paper Buttons found here: https://github.com/jcwillox/lovelace-paper-buttons-row

Installation instructions when you find a custom resource are always like this from what I have found with trying to do this, so I KNOW I am missing something.
resources:

url: /hacsfiles/lovelace-paper-buttons-row/paper-buttons-row.js
type: module

I have Advanced active.
I have added the resource into the resources tab in Lovelace, but I think I am missing a step. I am lost from there. I was expecting it to pop up as a button like the other ones, but that didn’t happen. So I went down a rabbit hole and figured out how to type what I am wanting out, but then I get the error: Custom element does not exist.
I am missing a step or two… anyone know what it is? I feel like I was supposed to place a file somewhere or am supposed to be putting the code somewhere else, like config. I created the www folder in config but have no clue what to put inside it or how to get the file to put there.

type: entities
entities:
  - type: "custom:paper-buttons-row"
    buttons:
      - light.backdoor

      - entity: light.01110061bcddc23b644c
        icon: "hass:lightbulb"

Thank you!

RomRider · December 27, 2020, 8:10pm

paper-button-row is unrelated to button-card. However, I’d suggest that you use HACS to install your custom cards. This will make things easier.

Pronown · December 27, 2020, 8:16pm

Oh snap, I think I mixed up what I was working on, that may be where I went wrong. Thank you for the link! That makes life so much easier!