Lovelace: Button card

[benm7 (Ben M)]

Hoping someone can help! I am trying to modify the button card using card-modder for my themostats so that it looks more like the Homekit button. From this:

To this (sort of):

Essentially the circle is the icon enlarged and moved, which changes colour based on state, and the number inside it is the temperature attribute of the climate entity. The current icon changes colour, I just need to reposition it, enlarge it and add the attribute within it.

My code for the buttons is:

      - type: custom:decluttering-card
        template: switch_button_card_flat
        variables:
          - entity: climate.air_conditioner
          - name: Main AC
          - icon: circle
          - color: DodgerBlue
          - tap_action: 
              action: more-info
              haptic: light

And the decluttering card is (thanks to jimz01 homekit theme!):

switch_button_card_flat:
default:
- size: 25%
- lock: false
- color: auto
- background_color: var(–homekit)
- variable: spin
- spin: false
- show_name: true
- show_state: true
- show_label: true
- show_icon: true
- show_last_changed: false
- tap_action:
action: toggle
haptic: light
- hold_action:
action: more-info
haptic: success
- aspect_ratio: 3/1
- margin-left: 0px
- margin-right: 60px
- label: ’ ’
- opacity: 0.4
- off_icon_color: gray
- off_name_color: gray
- off_state_color: gray

- icon_height: 120px

- icon_width: 120px

card:
type: custom:button-card
name: ‘[[name]]’
icon: ‘mdi:[[icon]]’
size: ‘[[size]]’
color: ‘[[color]]’
lock: ‘[[lock]]’
aspect_ratio: ‘[[aspect_ratio]]’
entity: ‘[[entity]]’
label: ‘[[label]]’
show_name: ‘[[show_name]]’
show_icon: ‘[[show_icon]]’
show_state: ‘[[show_state]]’
show_label: ‘[[show_label]]’
show_last_changed: ‘[[show_last_changed]]’
tap_action: ‘[[tap_action]]’
hold_action: ‘[[hold_action]]’
styles:
card:
- border-radius: 12px
- --paper-card-background-color: ‘[[background_color]]’
label:
- color: gray
- font-size: 11px

- font-family: Helvetica

    - padding: 0px 10px
    - justify-self: start
  state:
    - font-size: 11px

- font-family: Helvetica

    - padding: 0px 10px
    - justify-self: start
    - text-transform: capitalize
    - font-weight: bold
    - padding-left: 40px
    - color: gray
  grid:
    - grid-template-areas: '"i" "n" "s" "l"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  img_cell:
    - align-self: start
    - text-align: start
    - margin-left: '[[margin-left]]'
    - margin-right: '[[margin-right]]'
  name:
    - justify-self: start
    - padding-top: 6px
    - padding-left: 40px
    - font-weight: bold

- font-family: Helvetica

    - font-size: 13px
state:
  - value: "off"
    styles:
      card:
        - opacity: '[[opacity]]'
      icon:
        - color: '[[off_icon_color]]'

- height: ‘[[icon_height]]’

- width: ‘[[icon_width]]’

      name:
        - color: '[[off_name_color]]'
      state:
        - color: '[[off_state_color]]'
      lock:
        - color: black
  - value: "dry"
    styles:
      card:
         - opacity: 1.0
      icon:
        - color: '#F5AB98'
      state:
        - color: var(--secondary-text-color)
      name:
        - color: var(--primary-text-color)
  - value: "fan only"
    styles:
      card:
         - opacity: 1.0
      icon:
        - color: 'rgb(96,201,48)'
      state:
        - color: var(--secondary-text-color)
      name:
        - color: var(--primary-text-color)
  - value: "heat"
    styles:
      card:

- color: var(–homekit)

         - opacity: 1.0
      icon:
        - color: 'rgb(253,148,38)'
      state:
        - color: var(--secondary-text-color)
      name:
        - color: var(--primary-text-color)
  - value: "cool"
    styles:
      card:
         - opacity: 1.0
      icon:
        - color: 'rgb(96,201,48)'
      state:
        - color: var(--secondary-text-color)
      name:
        - color: var(--primary-text-color)
  - value: "auto"
    styles:
      card:
         - opacity: 1.0
      icon:
        - color: 'rgb(96,201,48)'
      state:
        - color: var(--secondary-text-color)
      name:
        - color: var(--primary-text-color)

[klogg]

How are you getting the temperature attribute to appear over the icon?

[Rondom (Tomas)]

Hey!
I am trying to understand that template stuff and I dont know if I am trying with some impossible stuff here.
But I have a sensor with a unix timestamp…

sensor.outdoor_temp_min_time: 1562976393.011463

And now I am trying to display it in a specific format and I tried this but the button just diaper so I guess I am doing something wrong, but what?

label_template: >
  return states['sensor.outdoor_temp_min_time'] | float | timestamp_custom['%H:%M:%S'];

I also tried with (" and also with {{ but I cant get it right… Any ideas?

[benm7 (Ben M)]

It’s a mock up, haven’t actually been able to do it

[iantrich (Ian)]

@Rondom

timestamp_custom

It is not jinja2 templating; check the examples

[Rondom (Tomas)]

@iantrich

examples

What example shall I look for? I have been looking on button-cards example page but I can seem to find out what is wrong… Can you send a link to that “example” or show me the correct code?

Or is it impossible to do it this way?

[RomRider]

It is possible, but your code is jinja2 and button-card templates use javascript not jinja2 so you have to transform your sensor state using javascript functions like Date.

[iantrich (Ian)]

                    label_template: >
                      function timeDifference(current, previous) {
                          var msPerMinute = 60 * 1000;
                          var msPerHour = msPerMinute * 60;
                          var msPerDay = msPerHour * 24;
                          var msPerMonth = msPerDay * 30;
                          var msPerYear = msPerDay * 365;

                          var elapsed = current - previous;

                          if (elapsed < msPerMinute) {
                              return Math.round(elapsed/1000) + ' seconds ago';   
                          }

                          else if (elapsed < msPerHour) {
                              return Math.round(elapsed/msPerMinute) + ' minutes ago';   
                          }

                          else if (elapsed < msPerDay ) {
                              return Math.round(elapsed/msPerHour ) + ' hours ago';   
                          }

                          else if (elapsed < msPerMonth) {
                              return Math.round(elapsed/msPerDay) + ' days ago';   
                          }

                          else if (elapsed < msPerYear) {
                              return Math.round(elapsed/msPerMonth) + ' months ago';   
                          }

                          else {
                              return Math.round(elapsed/msPerYear ) + ' years ago';   
                          }
                      }

                      return '<div>' + timeDifference(new Date(), new Date(entity.last_changed)) + '</div>';

[PlayedIn]

I want a button to toggle Alexa Guard on and off. In Home Assistant, my Guard entity is:

alarm_control_panel.alexa_guard_18020

To turn on Alexa Guard I have to use the service:

alarm_control_panel.alarm_arm_away

And to turn it off I use the service:

alarm_control_panel.alarm_disarm

So obviously the state of alarm_control_panel.alexa_guard_18020 would be used to determine which of the two services to execute. Am I correct in assuming that toggling arm and disarm for an alarm_control_panel entity cannot be done with this button card component without using a script?

[RomRider]

@PlayedIn

Am I correct in assuming that toggling arm and disarm for an alarm_control_panel entity cannot be done with this button card component without using a script?

For now, yes, you’re correct

[benm7 (Ben M)]

I am trying to use an entity picture as a replacement for an icon on a round button, but for some reason the pictures get cut off at the bottom, shown below. Any idea why this might be happening? I have set height and width to 100% in the style of the entity picture, and have made the buttons and pictures the same height and width so I don’t think it is an aspect ratio issue. Even when i increase the height of the entity picture it still cuts the top and bottom off, can’t for the life of me work out why!

[RomRider]

There’s padding in the card, so try with:

styles:
  card:
    - padding: 0px

[benm7 (Ben M)]

Worked perfectly, thanks a bunch!

[moskovskiy82]

Completely lost. Love the card. Was using it successfully and recently decided it’s time to update.
Had to rework around tap_action and more_info.

The problem is that my lovelace.yaml is split into five files. And while everything works on the front page (let’s name it 1.yaml) on other pages taps don’t work at all

[iantrich (Ian)]

You didn’t really ask a question…?

[tbrausch]

I have looked through the documentation and have not seen any information on creating a round button. Could you please share your config for the circular entity picture button? Thanks!

[iantrich (Ian)]

You should just need to specify
border-radius: 100%
For the card and entity-picture in styles

[tbrausch]

Thank you!

[iantrich (Ian)]

I started making a summary card: https://gist.github.com/iantrich/d2a485a6bc13c689564a6fe1306712d4

Idea is to provide a Google Home Hub/Homekit Inspired summary of your active elements in your house. I’m stopping here though and going to work on a dedicated summary-card that will be a cleaner to configure and therefore easier for others to use. I’ll post back here when I have a MVP to share, but for now you can play around with what I posted.

Edit: I’m now having second thoughts. I was thinking that by doing a dedicated card, I could specify tap actions for each line of text, but I’m not sure if that is worth the effort…there are things I could add, of course, but that was my initial thought. Any other thoughts on this?

[tbrausch]

Does anyone know if there is a way to make the entire card transparent, so that is does not show up with a background or border? I want to create a Tracking Card that simply shows the picture entity and text.