Lovelace: Button 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!

elle2 · December 28, 2020, 11:21am

I have two different lovelace dashboards (admin and user) that use two common views (main and tree).
With a custom button-card in the main view I want to navigate in the tree view but it’s not possible since the path to the view is relative to each dashboard: in admin dashboard the path is /lovelace-admin/tree and in the user dashboard the path is /lovelace-user/tree.
How can I have an “absolute” navigation_path in the main view just to link the tree view indipendently from the lovelace dashboard?

SOLVED: Just for someone interested. The navigation_path can point to the path variable of the view
configuration without the dashboard root, for example in my case
navigation_path: tree

Steveuk · December 28, 2020, 7:36pm

Hi guys i’ve created a simple button within a vertical stack which turns the icon yellow when turned on.

type: vertical-stack
cards:
  - type: 'custom:button-card'
    entity: light.fish_tank_light
    icon: 'mdi:lightbulb'
    color: auto
    color_type: icon
    default_color: 'rgb(255, 140, 0)'
    tap_action:
      action: toggle
    hold_action:
      action: more-info

But i want to resize it and add other styles etc, so when i add some style code to it it resizes it but the icon stops turning yellow

type: vertical-stack
cards:
  - type: 'custom:button-card'
    entity: light.fish_tank_light
    icon: 'mdi:lightbulb'
    color: auto
    color_type: icon
    default_color: 'rgb(255, 140, 0)'
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    styles:
      card:
        - font-size: 13px
        - filter: opacity(50%)
        - filter: grayscale(100%)
        - border-radius: 15%
        - text-shadow: 0px 0px 5px black
        - height: 210px
        - width: 210px

I tried putting the colour options within the style but i can’t figure it out.
Thanks for any advise

RomRider · December 28, 2020, 8:31pm

grayscale on the card will render the whole card in grayscale, including the icon (since the icon is a child of the card)

Steveuk · December 28, 2020, 8:47pm

Thanks that worked great.
I thought I’d try that one but I mustn’t have done.
Thanks again

Pronown · December 28, 2020, 10:48pm

You truly are my hero, this got me on the right path. Thank you so much!

Steveuk · December 29, 2020, 1:14pm

Hi back again thanks for the help yesterday @RomRider
I’m hoping you might know where i’m going wrong with this, I’m wanting to create a small presence button with custom home and away avatars.
I have the code below working fine in a picture entity but i’m wanting it within a custom button so i can resize it etc.

type: picture-entity
entity: person.steve_2
state_image:
  not_home: /local/images/steve_away.png
  home: /local/images/steve.png

So i’ve been trying various cards to add it with but not sure where i’m going wrong as the images don’t show up but the size is what i’m wanting ,i have this in a horizontal stack at the moment.
Thanks

type: horizontal-stack
name: Steve
cards:
  - type: 'custom:button-card'
    entity: person.steve_2
    show_state: false
    state_image:
      home: /local/images/steve.png
      not_home: /local/images/steve_away.png
    tap_action:
      action: toggle
    styles:
      card:
        - font-size: 15px
        - border-radius: 15%
        - text-shadow: 0px 0px 15px black
        - height: 200px
        - width: 200px