Lovelace: Button card

petro · January 31, 2020, 1:53pm

Not the correct field, always check the docs. That field has been deprecated.
Always follow templating convention. It’s well documented in the card documents. they require [[[ and ]]].
Don’t add carriage returns willy nilly to make it look nice. Follow the line terminations properly.
You don’t need to call out the light specifically, it’s placed into the entity variable.

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

Bollux · January 31, 2020, 2:07pm

Thanks Petro! As a noob, i just copied a example from this topic. Works now!

Vlavonvidden · January 31, 2020, 3:30pm

Hi,

Thanks a lot for this awesome card ! I’m trying to clean up my config and, after reading the documentation, I’m not sure if what I’m trying to achieve can be done.

-> Can we use JS to define variable values ?

For example:

variables:
  var_name: '[[[ return entity.state ]]]'

This is just a silly example. Obviously this one do not work, but I’d be curious too check if there’s another way to achieve something close or similar.

Thanks for any help you can provide

petro · January 31, 2020, 3:36pm

try it again with a correct template. It might work:

  var_name: '[[[ return entity.state; ]]]'

Vlavonvidden · January 31, 2020, 3:39pm

Thanks for the quick reply and … silly me I guess. However that did not do the trick sadly. The variable is returned as a string:

lubbertkramer · February 5, 2020, 12:11pm

I have changed my custom button card to make use of the circle sensor card for the brightness. Now i want to have thie icon of the bulb and the circle on the same heigt next to eachother (circle sensor little smaller). Any suggestion on how to do this?

#*****************************************************************
#* AUTHOR  Lubbert Kramer terug
#* Github  https://github.com/lubbertkramer/home_assistant_config
#*****************************************************************


default:
  - size: 40%
  - lock: false
  - color: auto
  - spin: false
  - show_state: true
  - show_label: false
  - show_last_changed: false
  - tap_action: toggle
  - hold_action: more-info
  - aspect_ratio: 1/1




card:
  type: custom:button-card
  name: '[[name]]'
  deep_press: false
  icon: 'mdi:[[icon]]'
  size: '[[size]]'
  color: '[[color]]'
  lock: '[[lock]]'
  aspect_ratio: '[[aspect_ratio]]'
  entity: '[[entity]]'
  show_state: '[[show_state]]'
  show_label: '[[show_label]]'
  show_last_changed: '[[show_last_changed]]'
  tap_action:
    action: '[[tap_action]]'
    haptic: light
  hold_action:
    action: '[[hold_action]]'
    haptic: heavy
  styles:
    card:
      - border-radius: var(--theme-border-radius)
      - --ha-card-background: var(--theme-button-card-color-state-on)
    grid:
      - grid-template-areas: '"i i" "n s"'
      - grid-template-columns: 1fr lfr
      - grid-template-rows: 1fr min-content min-content min-content
    img_cell:
      - align-self: start
      - text-align: start
      - margin-right: 60px
    name:
      - font-family: Helvetica
      - font-size: 15px
      - font-weight: bold
      - text-transform: capitalize
      - justify-self: start
      - padding-left: 10px
    state:
      - font-family: Helvetica
      - font-size: 14px
      - font-weight: bold
      - text-transform: capitalize
      - padding: 0px 10px
      - justify-self: start
      - padding-left: 10px
    label:
      - font-family: Helvetica
      - font-size: 14px
      - font-weight: bold
      - padding: 0px 10px
      - justify-self: start
      - padding-right: 10px
    custom_fields:
      brightness:
        #- fill: '#FFFFFF10'
        #- gradient: true
        - max: 100
        - min: 0
        #- stroke_color: '#03a9f4'
        #- stroke_width: 15
        - height: 2.15vw
        - opacity: 0.7
        - width: 2.15vw
        - overflow: visible
        - position: absolute
        - right: 15px
        - top: 20px
        # - right: 7%
        # - top: 7%
  custom_fields:
    brightness:
      card:
        type: custom:circle-sensor-card
        entity: '[[brightness]]'
        max: 100
        min: 0
        #fill: '#007AF1'
        stroke_width: 15
        stroke_color: var(--theme-button-icon-color-state-on)
        gradient: true
        font_style:
          color: var(--theme-button-name-color-state-on)

  label: >
    [[[
      if (typeof(entity) === 'undefined') return;

      if ('brightness' in entity.attributes)
      {
        if (entity.attributes
        && (entity.attributes.brightness <= 255)) {
          var bri = Math.round(entity.attributes.brightness / 2.55);
          return (bri ? bri : '0') + '%';
        }
      }
    ]]]
  state:
    - value: "[[[ return '' + entity.state + ''; ]]]"
      spin: '[[spin]]'
      styles:
        card:
          - --ha-card-background: "[[[ return 'var(--theme-button-card-color-state-' + entity.state + ')'; ]]]"
        icon:
          - color: "[[[ return 'var(--theme-button-icon-color-state-' + entity.state + ')'; ]]]"
          - animation: "[[[ return 'var(--theme-button-icon-animation-state-' + entity.state + ')'; ]]]"
        lock:
          - color: "[[[ return 'var(--theme-button-lock-color-state-' + entity.state + ')'; ]]]"
        label:
          - color: "[[[ return 'var(--theme-button-label-color-state-' + entity.state + ')'; ]]]"
        name:
          - color: "[[[ return 'var(--theme-button-name-color-state-' + entity.state + ')'; ]]]"
        state:
          - color: "[[[ return 'var(--theme-button-state-color-state-' + entity.state + ')'; ]]]"
        custom_fields:
          brightness:
            - fill: "[[[ return 'var(--theme-button-card-color-state-' + entity.state + ')'; ]]]"

fezo76 · February 5, 2020, 1:56pm

Hello!
It is not clear where “button_card_templates” should be inserted.
I’ll create a “button_card_templates.yaml” file,
the configuration yaml I refer to it.
“button_card_templates:! include button_card_templates.yaml”
please someone describe how to do it

klogg · February 5, 2020, 5:43pm

Is it possible to use if... else in a custom_field?

I’ve been trying this for far too long and this works…
(The code is from a declutterring template but I don’t think that makes any difference?)

  card:
    type: custom:button-card
    color_type: icon
    entity: '[[entity]]'
    aspect_ratio: '[[aspect_ratio]]'
    show_state: false
    show_name: false
    show_label: true
    show_icon: true
    label: '[[label]]'
    lock:
      enabled: '[[lock_enabled]]'
    styles:
      grid:
        - grid-template-areas: '"i l check_box"'
        - grid-template-columns: 20% 60% auto
        - grid-template-rows: 1fr
      lock:
        - color: '[[lock_color]]'
      card:
        - font-size: '[[card_font_size]]'
        - border-radius: '[[card_border_radius]]'
    custom_fields:
      check_box: >
        [[[
          return '<ha-icon icon="mdi:crop-square"></ha-icon>'
        ]]]  
    state:
      - value: 'on'
        styles:
          card:
            - background-color: '[[card_background_on_color]]'
      - value: 'off'
        styles:
          card:
            - color: '[[card_off_color]]'
            - box-shadow: '[[box_shadow_off]] [[box_shadow_off_color]]'
          icon:
            - color: '[[icon_off_color]]'

But this doesn’t (it fails completely to even show the button)…

    styles:
      grid:
        - grid-template-areas: '"i l check_box"'
        - grid-template-columns: 20% 60% auto
        - grid-template-rows: 1fr
      lock:
        - color: '[[lock_color]]'
      card:
        - font-size: '[[card_font_size]]'
        - border-radius: '[[card_border_radius]]'
    custom_fields:
      check_box: >
        [[[
          if entity.state = 'on' return '<ha-icon icon="mdi:checkbox-marked"></ha-icon>';
          else return '<ha-icon icon="mdi:crop-square"></ha-icon>';
        ]]]

Can you style custom_fields using state because i couldn’t get that to work either.

Thanks.

jarrah · February 7, 2020, 7:32pm

I don’t know if this is the answer, but I’ve seen others suggest using backticks around the <ha-icon> fields:

        [[[
          if entity.state = 'on' return `<ha-icon icon="mdi:checkbox-marked"></ha-icon>`;
          else return `<ha-icon icon="mdi:crop-square"></ha-icon>`;
        ]]]

If that doesn’t work, another thing to try is removing the semi-colons at the end of each line as this example doesn’t have them:

            [[[
              let speed = states['device_tracker.life360'].attributes.speed;
              if (states['device_tracker.life360'].attributes.moving) return `Status: moving - ${speed} mph`
              else if (states['device_tracker.life360'].attributes.driving) return `Status: driving - ${speed} mph`
              else return "Status: Standstill"
            ]]]

klogg · February 8, 2020, 12:04am

Thanks but neither worked.
The back ticks did something a bit weird with my Lovelace and wouldn’t load at all.
Removing the semicolons prevented the buttons from appearing.

petro · February 9, 2020, 10:26pm

it’s JS, gotta conform to that language:

if (entity.state == 'on')
{
    return '<ha-icon icon="mdi:checkbox-marked"></ha-icon>';
}
else
{
    return '<ha-icon icon="mdi:crop-square"></ha-icon>';
}

or… for short

if (entity.state == 'on')
    return '<ha-icon icon="mdi:checkbox-marked"></ha-icon>';
else
    return '<ha-icon icon="mdi:crop-square"></ha-icon>';

or… shorter

return (entity.state == 'on')
    ? '<ha-icon icon="mdi:checkbox-marked"></ha-icon>'
    : '<ha-icon icon="mdi:crop-square"></ha-icon>';

EDIT: I would assume your problem the whole time was only using 1 equals in entity.state = 'on'

klogg · February 9, 2020, 11:33pm

Indeed it was…
Thanks. It works perfectly now.

jompa68 · February 10, 2020, 9:48am

How do i setup this template for button_motion and button_body? Where do i place the code?

Mariusthvdb · February 10, 2020, 10:00am

did you check the docs? https://github.com/custom-cards/button-card/blob/master/README.md#Configuration-Templates

jompa68 · February 10, 2020, 10:09am

Thanks for the heads up @Mariusthvdb
Working now

jompa68 · February 11, 2020, 10:31am

SOLVED
How can i change my setup to be like in picture 2?

  - type: horizontal-stack
    cards:
      - type: "custom:button-card"
        #icon: mdi:link-lock
        #size: 2%
        styles:
          card:
            - height: 75px
            - border-radius: 10%
            - padding: 10%
        show_state: true
        show_name: false
        show_label: true
        label: Batteri nivå - IDLock 150
        #color_type: card
        #color: '#f5f514'
        #color_off: '#434954'
        entity: sensor.idlock_battery

20200211_11-27-09
20200211_11-30-03

jompa68 · February 11, 2020, 7:41pm

I am trying to setup like this but i don’t get the “Basement” header to line up like this picture. How can i solve that?
Skärmavbild 2020-02-11 kl. 20.40.08

and every time i go between pages the glow effect disappear and does not appear until i refresh page(F5)

petro · February 11, 2020, 8:34pm

I don’t have time to strip it out of my config and post it, but you’re welcome to dig into it yourself.

search my github ui-lovelace.yaml file for BASEMENT LIGHTS and take a look at the code. It uses anchors so you’ll have to walk backwards and find each anchors definition. Anchors start with a <<: *anchor_name. Just search upwards the anchor_name

jompa68 · February 11, 2020, 8:49pm

Thanks @petro for the link to your .yaml file.
any tip why glow effect disappears when i go between pages?

cyberumb15 · February 13, 2020, 5:38am

I need help to get “show last changed” in “off” state. Only in On state right now.

Thanks,

  button_slider: &button_slider
    type: custom:button-card
    label: >
      [[[
        var bri = Math.round(entity.attributes.brightness / 2.55);
        return (bri ? bri : '0') + '%';
      ]]]
    color: auto-no-temperature
    size: 30%
    aspect_ratio: 1/1
    show_last_changed: true
  #  show_state: true
  #  show_label: true
    tap_action:
      action: toggle
      haptic: light
    hold_action:
      action: more-info
      haptic: success
    styles:
      state_label:
        - font-size: 11px
        - font-family: Helvetica
        - justify-self: start
        - text-transform: capitalize
        - font-weight: bold
      card:
        - border-radius: 15px      
        - background-color: 'var(--paper-card-background-color)'
        - padding-left: 5px

      name:
        - justify-self: start
        - font-weight: bold
        - font-family: Helvetica
        - font-size: 13px
        - text-overflow: unset
        - white-space: unset
        - word-break: break-word
        - text-overflow: unset
        - white-space: unset
        - word-break: break-word
        - text-align: start
      label:
        - font-size: 11px
        - font-family: Helvetica
        - justify-self: start
        - text-align: start
        - padding-right: 45px # push to the state column
      state:
        - font-size: 11px
        - font-family: Helvetica
        - justify-self: start
        - text-transform: capitalize
        - font-weight: bold
      grid:
        - grid-template-areas: '"i" "n" "stateDisplay" "l"' #'"i" "slider" "n" "stateDisplay" "l"' #'"i" "n" "stateDisplay"' # '"i" "slider" "n" "stateDisplay"' #'"i" "n" "s" "l"'

        # - grid-template-areas: '"i" "n" "stateDisplay" "l"' #'"i" "slider" "n" "stateDisplay" "l"' #'"i" "n" "stateDisplay"' # '"i" "slider" "n" "stateDisplay"' #'"i" "n" "s" "l"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
        # - grid-row-gap: 5px
      img_cell:
        - justify-content: start
        - align-items: start
      custom_fields:
        slider:
          - filter: opacity(80%)
          - color: rgb(240, 194, 9)
          - padding-left: 0px
    state:
      - value: 'on'
        custom_fields:
          stateDisplay: >
            [[[  var fakestate = `<span style="color: #F0C209;"> ${entity.state}:</span>`;
                var fakelabel = `<span style="color: #F0C209;"> ${Math.round(entity.attributes.brightness / 2.55)} %</span>`;
                return fakestate +' ' + fakelabel;]]]
        styles:
          card:
            # - color: white #'#F0C209'
            # - --paper-card-background-color: rgba(40, 40, 40)
            - box-shadow: 0px 0px 10px 3px var(--button-card-light-color)
          custom_fields:
            stateDisplay:
              - font-size: 11px
              - font-family: Helvetica
              - justify-self: start
              - text-transform: capitalize
              - font-weight: bold
        id: on-icon
      - value: 'off'
        custom_fields:
          stateDisplay: >
            [[[ return entity.state ]]]
        styles:
          label:
            - color: rgba(0, 0, 0, 0.0)
          icon:
            - color: grey
          name:
            - color: grey
          state:
            - color: grey
          custom_fields:
            stateDisplay:
              - font-size: 11px
              - font-family: Helvetica
              - justify-self: start
              - text-transform: capitalize
              - font-weight: bold
              - color: grey
        id: off-icon
      - value: 'unavailable'
        custom_fields:
          stateDisplay: >
            [[[ return entity.state ]]]
        styles:
          card:
            - opacity: 0.8
            - color: '#D3D3D3'
          icon:
            - color: '#D3D3D3'
          label:
            - color: rgba(0, 0, 0, 0.0)
          custom_fields:
            stateDisplay:
              - font-size: 11px
              - font-family: Helvetica
              - justify-self: start
              - text-transform: capitalize
              - font-weight: bold
              - color: '#D3D3D3'

light