Lovelace: Button card

[yaruslavm]

Hey
making sure i understand you correctly
if i use custom fields i can put the code inside the button config without creating a custom sensor in the configuration.yaml ? and it will update properly ?

[Marcoletto (Marco)]

Thanks for your time @yaruslavm and @Mariusthvdb

I’ve already install “button-card” repository.
I try to read the sample code and all the readme of repo but I don’ t understant how it works.

I’d love to see the yaml code for create a button that activate input.boolean.scaldabagno_temporizzato and, in the same button, a circle with the timer timer.scaldabagno

With the code I can understand what each line of code does.
I’m not able with codes.

For example, Yaruslavm, in your circle code (from 324 line) I don’t understand why there isn’t an entity.
What does the circle show?

Please, could you show me the code for create this kind of button?
Would be the best example to start with

Thank you, bye!

[Mariusthvdb (Marius)]

@Marcoletto @yaruslavm some confusion going on because I think I answered to the wrong person, sorry for that. Anyways. seems you both have an issue (understanding the workings of button-card). Why dont you post the button-card config you now have, along with a screenshot, so we can go from there.

no use simply pasting a working button for me, because it wouldn’t help you guys understand your own use case…

as for updating a button card, it should automatically update on the used entities. However, in several cases it needs to be explicitly pointed to entities beyond the config. Maybe with the timer, you need to set the triggers_update: config option on that timer?

[yaruslavm]

hey @Mariusthvdb
The ask :
i wanted my card to have last changed status shown on the card in a following format “1m” “2h” “1d”.

Method 1: failed

  - type: custom:button-card
    entity: binary_sensor.contact_sensor
    icon: mdi:door
    name: logic in label
    show_state: true
    show_label: true
    label: |
      [[[
        var l = entity.last_changed;
        var t,s=(new Date()-new Date(l))/1e3;
        return (
        (t=Math.floor(s/86400))?t+(t>1?"d":" day"):
        (t=Math.floor(s/3600))?t+(t>1?"h":" h"):
        (t=Math.floor(s/60))?t+(t>1?"m":" m"):
        (t=Math.floor(s))!==1?t+"s":" sec")
      ]]]

Managed to see the text exactly as i wanted but it is not getting updated unless i refresh the browser ( or other entities related to the card)

Method 2:partial success
Removed the label and used the “show_last_changed: true” i can see the status and it is updated without refreshing the browser. but i want to change the display from “10 minutes ago” to “10m”

Method 3: full success but have questions

button:

  - type: custom:button-card
    entity: binary_sensor.contact_sensor
    icon: mdi:door
    name: template +label
    show_state: true
    show_label: true
    label: |
      [[[ 
      var d = states['sensor.front_door'].state;
      return d;
      ]]]

template sensor:

sensor:
  - platform: template
    sensors:
      #----- Front door
      front_door:
        value_template: >
          {%- set time = (as_timestamp(now()) - as_timestamp(states.binary_sensor.contact_sensor.last_changed)) | int  %}
          {%- set minutes = ((time % 3600) // 60) %}
          {%- set hours = ((time % 86400) // 3600) %}
          {%- set days = (time // 86400) %}
            {% if time < 60 %}
            '<1m'
            {%- else -%}
              {%- if time > 86400 -%}
                {{days}}d
                  {%- else -%}
                  {%- if time > 3600 -%}
                    {{hours}}h
                      {%- else -%}
                      {%- if time > 60 -%}
                        {{minutes}}m
                      {%- endif -%}
                  {%- endif -%}
              {%- endif -%}
            {% endif %}

so the questions i have :

1. can i have multiple entities in the template sensor so i don’t need to clutter config file.
2. if i use method #2 can i somhow change the display from “10 minutes ago” to “10m”

[Marcoletto (Marco)]

@Mariusthvdb you are right, the code done by others is never a way to improve the knowledge.
Unfortunately I don’t have a config of my button card because I’m not able to write down.

I only wrote this:

type: custom:button-card
entity: input_boolean.scaldabagno_temporizzato
name: Scaldabagno temporizzato
icon: mdi:thermometer-plus
color: auto
size: 12%
aspect_ratio: 4/1

and the result is this:

I would like to trasform the button above in the botton below:

A result like this one:

Thank you!

[Mariusthvdb (Marius)]

first off: I think if you have such specific demands for the output, a template sensor indeed is best, because you have 100% control.

can you use multiple entities in the template sensor: not sure what you want? I suppose anything possible please describe what you want so we can answer more helpful…

method 2 and change to 10m: I dont think so. It uses a predefined format that the current frontend makes of these timestamp sensors.

[Mariusthvdb (Marius)]

yes, that is the use for the custom_field notification, as I mentioned before. You add the template for that, and ofc the definition for the notification itself.

You got to see it like this:

the button needs a config for the various fields in the button and styling of those places, and it needs the content for those fields.

Many are predefined, and can be used out of the box. If those int suffice, you have 100% freedom to do as you like with custom_fields. for which you then again need to provide a config and styling on the one hand, and content on the other.

here is my template for the custom_field:My Button card templates · GitHub

type: custom:button-card
template: styles_cf_notification
entity: input_boolean.scaldabagno_temporizzato
name: Scaldabagno temporizzato
icon: mdi:thermometer-plus
color: auto
#size: 12% # not sure why you have 12% there, take it out, and see if the default is ok now
aspect_ratio: 1/1 # <-- since you needed a square button, use 1/1 ;-)

then you need tp provide the custom_field itself to the button

custom_fields:
  notification: >
    [[[ return entity.state; ]]]

[Mariusthvdb (Marius)]

the new behavior of binary_sensors having a ternary (…) state ‘unknown’ poses some serious issues… my button cards for motion_sensors always showed ‘Clear’ or ‘Detected’. the new unknown state of the button is really ugly and shows when the switch turning the motion sensor on/off is off.

I tried to mitigate that using a state_display:

button_motion:
  variables:
    id: >
      [[[ return 'switch.' + entity.entity_id.split('.')[1]; ]]]

  state_display: >
    [[[ return states[variables.id].state == 'off' ? 'Turned off' : entity.state; ]]]

which I thought works ok. However, I now notice that changes Clear/Detected to Off/On … entity.state alright.

Is there no way to add the state_display only for the states[variables.id].state == 'off' ? Ofc I tried it under a state: operator: template, but had no luck, anti isnt listed GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant

@romrider, would you accept a FR for adding state_display to state: ?

without state_display:

with state_display:

edit

I had brainwave:

  state_display: >
    [[[ if (states[variables.id].state == 'off') return 'Turned off'; ]]]

to only pull out the specific state, and not touch behavior otherwise.

makes it happen… though because I have learned early on not to use unguarded templates, it tried

  state_display: >
    [[[ return states[variables.id].state == 'off' ? 'Turned off' : null ; ]]]

and that too seems to behave properly

[Marcoletto (Marco)]

Thank you @Mariusthvdb,
here you are the code; I’ m not able to understand; ah… I am a noob

What’s my errors?

[flyize]

I have a pet tracker (via SureHA) and I want to track the last change. I can’t use show_last_changed because that resets when the server restarts. This is the template code that works in Lovelace I came up with, but I can’t seem to get it to work in the button.

{{ relative_time(strptime(state_attr('binary_sensor.katniss', 'since'), '%Y-%m-%dT%H:%M:%S%z')) }}

Any ideas?

[RomRider]

You can do that instead and it will revert to the default way of showing the state:

state_display: >
    [[[ return states[variables.id].state == 'off' ? 'Turned off' : undefined; ]]]

Edit: I’ve seen you’ve answered yourself also with that solution

[Mariusthvdb (Marius)]

Yeah . Though : undefined would be better?

[Mariusthvdb (Marius)]

You didn’t copy the template… do you have button_card_template configured at all?
Check the documentation for that

[RomRider]

Same result as null or not returning anything

[Marcoletto (Marco)]

I don’t have the template configured.
Where I must to configured it?

In the configuration.yaml or in a new yaml file? (maybe button_card_template.yaml ?)
I didn’t find where is the explanation about template in documentation… is a labyrinth of informations

Sorry for my incompetence

[Mariusthvdb (Marius)]

well, there might be a learning curve indeed here’s the docs on GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant

for each dashboard do something like:

title: Your Dashboard title

button_card_templates: !include_dir_merge_named /config/lovelace/button_card_templates
decluttering_templates: !include_dir_named /config/lovelace/decluttering_templates
kiosk_mode: !include /config/lovelace/kiosk-mode/kiosk-mode.yaml

in that folder /config/lovelace/button_card_templates you can have files like:

and eg button_card_templates.yaml in my config is like:

##########################################################################################
# 'module' templates used in Button templates
##########################################################################################

action_default:
  tap_action:
    action: toggle
    haptic: light
  hold_action:
    action: more-info
    haptic: success

action_more:
  tap_action:
    action: more-info
    haptic: light
  hold_action:
    action: more-info
    haptic: success

styles_cf_notification:
  styles:
    custom_fields:
      notification:
        - border: 1px solid var(--text-color-on)
        - border-radius: 12px #50%
        - font-size: 11px
        - font-weight: bold
        - height: 18px
        - line-height: 18px
        - min-width: 12px
        - padding: 0px 3px
        - position: absolute
        - right: 5%
        - top: 10%
 
# way more templates....

If that is configured correctly, you can ‘call’ the template in your button-card config like you do right now.
Its nothing more than taking out often used bits of yaml, into ‘templates’ so you can re-use those as ‘modules’.

you can also simply add the full

  styles:
    custom_fields:
      notification:
        - border: 1px solid var(--text-color-on)
        - border-radius: 12px #50%
        - font-size: 11px
        - font-weight: bold
        - height: 18px
        - line-height: 18px
        - min-width: 12px
        - padding: 0px 3px
        - position: absolute
        - right: 5%
        - top: 10%

to 1 button directly and not use a template.

[shieldmaiden95 (Meredith Daniels)]

I’m trying to make buttons that look similar to the homekit ones but I can’t get the icons to align to the top left. I even copied and pasted the Homekit button example directly from the github and it wasn’t aligned right either. It always stays centered no matter what I try.

Any ideas? Here’s my config:

type: custom:button-card
entity: light.lifx_bedroom
name: Bedroom right
tap_action:
  action: toggle
hold_action:
  action: more-info
show_state: true
styles:
  card:
    - width: 145px
    - height: 145px
    - font-size: 12px
  grid:
    - grid-template-areas: '"i" "n" "s"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  name:
    - justify-self: start
    - text-transform: uppercase
    - padding-bottom: 10px
    - padding-left: 10px
  img_cell:
    - align-self: start
    - text-align: start
    - justify-self: start
    - padding-bottom: 10px
    - padding-left: null
  state:
    - justify-self: start
    - padding-left: 10px
    - padding-bottom: 10px
state:
  - value: unavailable
    color: rgb(22, 22, 23)
  - value: 'off'
    color: rgb(22, 22, 23)
  - value: 'on'
    color: auto
    styles:
      card:
        - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
        - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
        - transition: all 2s ease

[pedolsky]

Replace

  img_cell:
    - align-self: start
    - text-align: start
    - justify-self: start
    - padding-bottom: 10px
    - padding-left: null

with

  img_cell:
    - justify-content: start
    - align-items: start
    - padding-left: 10px

returns:

[Marcoletto (Marco)]

Hello Marius,
about the template I would like to learn in the future; for now I would like to understand how work the code for create a button with another INFO in the right top corner.

So, I’ve wrote this code where I understand some things (see the comments in green)

It’s correct?

The things I don’t understand are:

1. where I tell to the button-card that in the circle i would like the timer.scaldabagno value?
2. why I have compilated the button-card code but I don’t see the circle on the right top corner?

Here you are the code of entire dashboard:

views:
  - title: Home
    visible:
      - user: 335a57c
      - user: cfe3098
      - user: fbf1c95
      - user: 1eac95
    badges: []
    cards:
      - type: custom:button-card
        entity: input_boolean.scaldabagno_temporizzato
        name: Scaldabagno temporizzato
        icon: mdi:thermometer-plus
        styles:
          custom_fields:
            notification:
              - border: 1px solid var(--text-color-on)
              - border-radius: 12px
              - font-size: 11px
              - font-weight: bold
              - height: 18px
              - line-height: 18px
              - min-width: 12px
              - padding: 0px 3px
              - position: absolute
              - right: 5%
              - top: 10%

Thank you!

[mateuszdrab]

I’m trying to make the button card behave the same as the standard button card but I can’t figure out the right CSS.
On the left is the default HASS button card, on the right is the custom button card
I already fixed the font color and size but I need the name, state and labels to move up closer to the icon. Currently, the icon seems to have a big margin around it and setting margin to 0 on it doesn’t make any difference.
Also, the name is missing the padding on the sides, does anyone how the defaults?

Current config:

type: custom:button-card
color_type: icon
entity: switch.bedroom_fanheater
label: |
  [[[
    var powerEntity = states['sensor.bedroom_fan_heater_energy_today'];
    return powerEntity.state + ' ' + powerEntity.attributes.unit_of_measurement;
  ]]]
show_label: true
show_state: true
hold_action:
  action: more-info
  haptic: success
size: 24px
styles:
  card:
    - height: 100%
    - padding-top: 0px
  state:
    - color: var(--secondary-text-color)
    - font-size: 0.9rem
  label:
    - color: var(--secondary-text-color)
    - font-size: 0.9rem