Lovelace: Button card

Share your Projects! Dashboards & Frontend
2015

Updated weather card: https://gist.github.com/iantrich/c735cf322eadbbe6df7ae1cfd3401d1b
image

13 Likes
2016

Any help on the below please, used to work and I’ve gone through the breaking changes to no avail… Thanks for any assistance.

entity: sensor.phone_battery_1
        icon: 'mdi:cellphone-android'
        show_entity_picture: false
        show_name: false
        show_state: true
        size: 40%
        state:
          - color: red
            icon: 'mdi:cellphone-android'
            operator: <=
            value: 30
          - color: green
            icon: 'mdi:cellphone-android'
            operator: '>='
            value: 60
          - color: yellow
            icon: 'mdi:cellphone-android'
            operator: default
        styles:
          card:
            - border: 'solid 1px rgba(100,100,100,0.3)'
            - border-radius: 10px
            - box-shadow: '4px 4px rgba(0,0,0,0.6)'
            - '--paper-card-background-color': 'rgba(0,0,0,0.3)'
              label:
                - font-size: 8px
                - color: white
              name:
                - color: white
        tap_action:
          action: more-info
        type: 'custom:button-card'
2017

What exactly doesn’t work?

2018

is there an aspect of it that doesn’t work?

Edit: @RomRider beat me :slight_smile:

2019

It just does not show at all. On version 1.11 works fine update to 2.5 and it disappears. (Should be above washing machine)
https://photos.app.goo.gl/PQHmCn14rNe7b56T8

2020

Errors in the console?

2021

None, all other buttons working fine also…

2022

All fixed thanks guys Fixed
Somehow after updating label: and name: indentation changed.
Thanks for the help

2023

Hi,

First of all: great card, thanks!

I was looking for a property that let me fire an action only if the user keeps pressing the button for more than 5 seconds (in my case this will be used for a “Panic Button” ), but didn’t find one.

Is there other way I can simulate that or do you need to add the property ?

Thanks,
Claudio.

2024

Give this a try https://github.com/roflcoopter/deep-press

2025

Tried but:

  1. Only works on mobile (in the web by holding the mouse button doesn’t work).
  2. Can’t configure the time to wait for the hold action to trigger the action.

Thanks
Claudio

2026

It’s not a feature as of now, hold time is not customizable.
Open a feature request on github if you require it please.

2027

Im running Hass.io 0.97.0b1, any known issues regarding templates?

The card without templates is working fine, when i add the templates for label and styles the card fails to load.

Have the same card in 0.96.5 no issues there.

cards:
  - cards:
      - entity: sensor.pn_count
        icon: 'mdi:bell-outline'
        label: '[[[ return ''('' + states[''sensor.pn_count''].state + '')'' ]]]'
        name: Popup Card
        show_label: true
        styles:
          icon:
            - color: >-
                [[[  if (entity.state > '0') return 'orange'; else return
                'grey'; ]]]
        tap_action:
          action: more-info
        type: 'custom:button-card'
      - entity: sensor.pn_count
        icon: 'mdi:bell-outline'
        name: Popup Card
        show_label: true
        tap_action:
          action: more-info
        type: 'custom:button-card'
    type: horizontal-stack
type: vertical-stack

image

chrome error message:

image
image1104×298 22.6 KB

2028

you are using double single quotes here:

label: '[[[ return ''('' + states[''sensor.pn_count''].state + '')'' ]]]'

try using single double quotes:

label: '[[[ return "(" + states["sensor.pn_count"].state + ")" ]]]'

or use multiline notation:

label: >
  [[[ return '(' + states['sensor.pn_count'].state + ')' ]]]
2029

I tried both but without succes.

label: '[[[ return "(" + states["sensor.pn_count"].state + ")" ]]]'

label: >
  [[[ return '(' + states['sensor.pn_count'].state + ')' ]]]

image
image1263×446 16 KB

2030

do you really want the ( and ) to be displayed in the frontend on the label?

this:

button_light:
  label: >
    [[[
    var bri = Math.round(entity.attributes.brightness / 2.55);
    return (bri ? '(' + bri + ')' : '0') + '%';
    ]]]

will give you:

18

this:

  label: >
    [[[
    var bri = Math.round(entity.attributes.brightness / 2.55);
    return (bri ? bri : '0') + '%';
    ]]]

05

what error do you get?

2031

Double quotes here:

label: '[[[ return "(" + states["sensor.pn_count"].state + ")" ]]]'

But the error is from here:
entity.state
Are you sure your sensor.pn_count exists?

2032 
label: '[[[ return "(" + states["sensor.pn_count"].state + ")" ]]]'

Thats it ! Fixed!.

Thanks @RomRider and @Mariusthvdb

2033

Hi,

would you mind help here, i tried look at code without any sucess pretty noob with coding.

i want to put 2 camera entitis that i have side by side like in your picture :

PNG

This what i have now in lovelace:

image
image919×853 106 KB

This is the code in lovelace for the current setup for both cameras:

              - type: horizontal-stack     
                cards:  
                  - type: custom:card-modder
                    style:
                      border-radius: 10px
                    card:
                      type: picture-entity
                      entity: camera.camera
                      camera_view: live
                      show_state: false
                      name: Xiaovv
                  - type: custom:card-modder
                    style:
                      border-radius: 10px
                    card:
                      type: picture-entity
                      entity: camera.camera_wyze
                      camera_view: live
                      show_state: false
                      name: Wyze

would you mind explain how can i achieve same results like in the picture that i uploaded…

i want to put it side be side , maybe tell how to write the code in lovelace.

Thank you!!

2034

Check GitHub for detailed code,

it starts from button template in button_card_templates.yaml file,
which is used by decluttering template in decluttering_templates.yaml file,
camera card code is in main.yaml line 405