Lovelace: Button card

maurizio53 · October 16, 2019, 8:48pm

Thanks again…
Your work is always pretty impressive !

NOS4A2 · October 17, 2019, 2:42am

Thanks a lot for your tips. I had to tweak it a little bit but it’s working now.

I should post the end result at the System Monitoring - How does your look? thread soon.

SteffenDE · October 17, 2019, 6:46am

Hi,

my first buttons working well - thank you.

I’m missing scrolling the text of the label. I have buttons switching many devices and this could change. So it would be nice if the string is not cutting and the string could scrolling,

Screen_20191017-084438

Any change to make this or should I make a feature request?

Regards, Steffen

crazytok · October 17, 2019, 1:11pm

Is it possible to use custom button card with other cards like custom weather card, mini media player card? I would like to be able to change the size as you can do in custom button card.

Also, is it possible to make the card background transparent in custom button card? With only icon visible?

Jimmy_Berglund · October 17, 2019, 10:17pm

Hi Everyone, Is there a way to make it so if i have a button with a device_tracker on it that if its away the button dissapears?
Cant find anyone that spoken about this before.

DavidFW1960 · October 17, 2019, 10:34pm

A conditional card will let you do that.

Jimmy_Berglund · October 18, 2019, 12:01am

Hmmm got ANy example on how that may look?

iantrich · October 18, 2019, 1:24am

Jimmy_Berglund · October 18, 2019, 1:20pm

Thx for your patiance and help so far i been playing with it but i just dont get it to work with my setup.

cards:
  - cards:
      - custom_fields:
          temp: |
            [[[
                return `<ha-icon icon='mdi:motion-sensor' style='width: 15px; height: 15px; color: var(--paper-item-icon-active-color);'></ha-icon>
                <span>${states['sensor.jimmy_status'].state}</span>`
                ]]]
        show_entity_picture: 'true'
        styles:
          card:
            - background-image: url("/local/jimmy.jpg")
            - background-size: cover
            - background-position: 50% 50%
            - text-shadow: '1px 1px #000000'
            - color: white
            - font-size: 14px
            - font-weight: bold
          grid:
            - grid-template-areas: '"icn temp" "n n" "i i"'
            - grid-template-columns: 1fr 1fr
            - grid-template-rows: 70fr 1fr 2fr
        template: button
        type: 'custom:button-card'
      - custom_fields:
          temp: |
            [[[
                return `<ha-icon icon='mdi:motion-sensor' style='width: 15px; height: 15px; color: var(--paper-item-icon-active-color);'></ha-icon>
                <span>${states['sensor.maria_status'].state}</span>`
                ]]]
        show_entity_picture: 'true'
        styles:
          card:
            - background-image: url("/local/maria.jpg")
            - background-size: cover
            - background-position: 50% 50%
            - text-shadow: '1px 1px #000000'
            - color: white
            - font-size: 14px
            - font-weight: bold
          grid:
            - grid-template-areas: '"icn temp" "n n" "i i"'
            - grid-template-columns: 1fr 1fr
            - grid-template-rows: 70fr 1fr 2fr
        template: button
        type: 'custom:button-card'
    type: horizontal-stack
type: vertical-stack

I guess its should be something like this if a take marias sensor

type: conditional
conditions:
  - entity: sensor.maria_status
    state: "Borta"

But i dont get it to work no matter how io play with it. Im not using Yaml Config.

Mariusthvdb · October 18, 2019, 1:46pm

note that conditional cards use card: and not cards: after the condition(s):

Jimmy_Berglund · October 19, 2019, 1:22am

Gaaah so frustrating. Whatever i do, i dont get it to work with my setup.

Mariusthvdb · October 19, 2019, 8:11am

Maybe paste the full code for the conditional card so we can see?

DavidFW1960 · October 19, 2019, 8:19am

Example

          - type: horizontal-stack
            cards:
              - type: conditional
                conditions:
                  - entity: sensor.alarm_triggers
                    state_not: "0"
                  - entity: sensor.alarm_triggers
                    state_not: "unavailable"
                card:
                  type: entities
                  entities:
                  - entity: sensor.alarm_triggers
              - type: conditional
                conditions:
                  - entity: sensor.alarm_triggers
                    state_not: "0"
                  - entity: sensor.alarm_triggers
                    state_not: "unavailable"
                card:
                  type: 'custom:button-card'
                  color_type: card
                  entity: sensor.alarm_triggers
                  name: Alarm Event
                  state:
                    - value: 0
                      operator: '>'
                      color: red
                      icon: mdi:alert
                      style:
                        - animation: blink 2s ease infinite
                      spin: false
                    - operator: default
                      color: green
                      icon: mdi:shield-check
                  tap_action:
                    action: call-service
                    service: shell_command.removealarm

yoni3210 · October 20, 2019, 4:39pm

Hi Need some help with placement and also Difference / 2.55.

This is the code that i have:

              - type: "custom:button-card"
                size: 30%
                aspect_ratio: 1/1
                entity: light.bedroom_lights
                label: >
                  [[[
                    var bri = states['light.bedroom_lights'].attributes.brightness;
                    return (bri ? bri : '0') + '%';
                  ]]]               
                show_label: true
                show_state: true
                styles:
                  card:
                    - padding-left: 10px
                    # - background-color: 'rgba(255,255,240,0.9)'
                    # - background-color: '#fff5bc'
                    - background-color: 'rgb(100,100,100)'
                    - border-radius: 15px
                  name:
                    - justify-self: start
                    - font-weight: bold
                    - font-size: 13px
                  label:        
                    - font-size: 11px
                    - font-family: Helvetica
                    - padding-left: 105px
                    # - justify-self: start
                  state:
                    - font-size: 11px
                    - font-family: Helvetica
                    - padding: 1px 10px
                    - justify-self: start
                    - text-transform: capitalize
                    - font-weight: bold
                  grid:
                    - grid-template-areas: '"i" "n" "s" "l"'
                    - grid-template-columns: 1fr
                    - grid-template-rows: 1fr min-content min-content
                  img_cell:
                    - justify-content: start
                    - align-items: start
                state:
                  - value: 'on'
                    styles:
                      card:
                        - box-shadow: 0px 0px 3px 2px var
                      name:
                        - color: AliceBlue
                      state:
                        - color: AliceBlue
                      label:
                        - color: AliceBlue
                    id: on-icon
                  - value: 'off'
                    styles:
                      card:
                        - opacity: 0.3
                      label:
                        - color: AliceBlue
                      icon:
                        - color: AliceBlue
                      name:
                        - color: AliceBlue
                      state:
                        - color: AliceBlue
                    id: off-icon  
                  - value: unavailable
                    styles:
                      card:
                        - opacity: 0.2
                        - color: grey
                        - '--paper-item-icon-color': grey
                      label:
                        - color: 'rgba(0, 0, 0, 0.0)'

Which output :

i need help with a few questions:

how can i place the percentage number at the top right corner?
when the light’s are 100% it’s displayed as 255%, is there a way to / 2.55 the numbers so it will show as 100% and not 255%.
last question: This is my decluttering template for the button without the percentage displayed in the picture above, how can i add it to my template below.

This is the code that i want to add to my template :

                label: >
                  [[[
                    var bri = states['light.bedroom_lights'].attributes.brightness;
                    return 'Brightness: ' + (bri ? bri : '0') + '%';
                  ]]]

template :

  Button2black:
    card: 
      type: 'custom:button-card'  
      color: auto
      size: 30%
      icon: '[[icon]]'
      label: '[[entity]]'
      entity: '[[entity]]'
      show_last_changed: true
      aspect_ratio: 1/1
      show_state: true
      name: '[[name]]'
      show_label: true
      tap_action:
        action: toggle
        haptic: light
      hold_action:
        action: more-info
        haptic: success
      styles:
        card:
          - padding-left: 10px
          # - background-color: 'rgba(255,255,240,0.9)'
          # - background-color: '#fff5bc'
          - background-color: 'rgb(100,100,100)'
          - border-radius: 15px
        name:
          - justify-self: start
          - font-weight: bold
          - font-size: 13px
        label:        
          - font-size: 11px
          - font-family: Helvetica
          - padding-left: 105px
       # - justify-self: start
        state:
          - font-size: 11px
          - font-family: Helvetica
          - padding: 1px 10px
          - justify-self: start
          - text-transform: capitalize
          - font-weight: bold
        grid:
          - grid-template-areas: '"i" "n" "s" "l"'
          - grid-template-columns: 1fr
          - grid-template-rows: 1fr min-content min-content
        img_cell:
          - justify-content: start
          - align-items: start
      state:
        - value: 'on'
          styles:
            card:
              - box-shadow: 0px 0px 3px 2px var
            name:
              - color: AliceBlue
            state:
              - color: AliceBlue
            label:
              - color: AliceBlue
          id: on-icon
        - value: 'off'
          styles:
            card:
              - opacity: 0.3
            label:
              - color: AliceBlue
            icon:
              - color: AliceBlue
            name:
              - color: AliceBlue
            state:
              - color: AliceBlue
          id: off-icon  
        - value: unavailable
          styles:
            card:
              - opacity: 0.2
              - color: grey
              - '--paper-item-icon-color': grey
            label:
              - color: 'rgba(0, 0, 0, 0.0)'

RomRider · October 21, 2019, 8:39am

Version 3.0.0

A lot of breaking changes in this one, please read carefully the release notes!!

Breaking Changes (& New Features)

Drop support for custom_updater, please upgrade to HACS

URL actions field has been renamed to url_path from url:
old:

xxx_action:
  action: url
  url: https://www.google.com

new:

xxx_action:
  action: url
  url_path: https://www.google.com

dbltap_action has been renamed to double_tap_action to match core (Fix #232)

confirmation is now an object and supports templates, and you can specify a different confirmation object for each action. You can also specify exempted users. See confirmation doc for more info (Fix #228, Fix #217):

confirmation: # If defined, this will apply to all the actions
  text: Are you sure?
  exemptions:
    - user: befc8496799848bda1824f2a8111e30a
tap_action:
  confirmation:
    # Confirmation only for tap_action.
    # If a default confirmation is defined, it will be override it.
    text: '[[[ return `Toggle ${entity.attributes.friendly_name}? ]]]'
    exemptions:
      - user: befc8496799848bda1824f2a8111e30a

lock is now an object and unlock_users is deprecated.
lock.enabled supports templating and you can set the duration of the unlocked state.
You can define the type of clicks which will unlock the button with lock.unlock. Possible values are tap, hold and double_tap. Default is tap
See lock doc for more info (Fix #192, Fix #220, Fix #230).
Old:
```
lock: true
unlock_users:
  - test
```
New:
```
lock:
  enabled: true # Or template for eg '[[[ return entity.state === 'on'; ]]]'
  unlock: hold
  duration: 10
  exemptions:
    - username: test
    - user: befc8496799848bda1824f2a8111e30a
```

New Features

The version of the card is displayed in the javascript console of your browser. Please verify if you’re running the latest version before opening a bug report. If not, update and/or clear your cache:

You can now embed any card in the custom fields

(Fix #209). Note that to remove the box-shadow for specific cards, use card-mod.

    - type: custom:button-card
      aspect_ratio: 1/1
      custom_fields:
        graph:
          card:
            type: sensor
            entity: sensor.sensor1
            graph: line
            # style is used by card-mod
            style: |
              ha-card {
                box-shadow: none;
              }
      styles:
        custom_fields:
          graph:
            - filter: opacity(50%)
            - overflow: unset
        card:
          - overflow: unset
        grid:
          - grid-template-areas: '"i" "n" "graph"'
          - grid-template-columns: 1fr
          - grid-template-rows: 1fr min-content min-content

      entity: light.test_light
      hold_action:
        action: more-info

Fixes

Fix support for Safari 10 (Fix #221)

DavidFW1960 · October 21, 2019, 8:50am

lock:
  enabled: '[[[ return entity.state === 'on'; ]]]'
  unlock: hold
  duration: 2

So if I only want to set the unlock duration to 2 seconds instead of

lock: true

I just substitute in the above?

RomRider · October 21, 2019, 8:52am

This would be the config:

lock:
  enabled: true
  duration: 2

Infineghost · October 21, 2019, 9:04am

Wow this looks wicked, can you share your complete code

wewantrice · October 21, 2019, 3:11pm

Can’t seem to download, getting a 404 on button-card.js

RomRider · October 21, 2019, 10:08pm

The file is in the release, not in the repository anymore (I dropped the support for customer_updater)