Lovelace: Button card

Thanks @Petro for the link! :+1: :slight_smile: In theory I know that, but I found the dev tools show the real value for last_changed and not the HA restart. That’s why I was working with this for a while now.

In the dev-tools I did a simple

{{ states.input_boolean.puppy_big_out.last_changed }} #gives the "real" timestamp from the last change

opposing to button-card that shows the HA restart timestamp (friendly format).

I use this in custom:logbook-card (link) as well, and there it shows the real value, too. Only button-card does show the value from the restart?

Can it be, that button-card works with the last_updated state attribute? That would explain the difference, but I haven’t checked…

Last changed 100% gives you the last value, which will be the restart if you restarted, it will not give you anything before the restart timestamp. When did you restart last? Paste this into your template editor and you’ll see they all match around the restart time and build up later dates. So if you restarted yesterday, most that don’t update once a day will be yesterday while the rest will be random times between yesterday and today.

{{ states | map(attribute='last_changed') | map('string') | sort | list }}

Logbook will show you the histories last changed, not what’s on the state object.

There is no last_updated attribute. There is a last_updated property. It behaves very similar to last_changed in that it will always be past your last restart.

1 Like

Hello there, hope someone could help me.

I can’t figure out to stretch my mini-graph-card inside a button-card. There is a space between bottom of the card and the graph.
The only thing which is working is increasing the height of the row with grid-template-rows, but the aspect_ratio 1/1 isn’t kept.

Here’s my code :

  - type: custom:button-card
    aspect_ratio: 1/1
    icon: mdi:chair-rolling
    entity: sensor.ble_temperature_thermometre1
    name: Bureau
    custom_fields:
      graph:
        card:
          type: custom:mini-graph-card
          entities:
            - sensor.ble_temperature_thermometre1
          show:
            icon: false
            name: false
            state: false
          line_width: 5
      hu: |
        [[[
          return `<ha-icon
          icon="mdi:water-percent:"
          style="width:20px;color: skyblue;">
          </ha-icon><span style="color: var(--text-color-sensor);">${states['sensor.ble_humidity_thermometre1'].state}%</span>`
        ]]]
      temp: |
        [[[
          return `<ha-icon
          icon="mdi:thermometer:"
          style="width:20px;color:var(--accent-color);">
          </ha-icon><span>${entity.state}°C</span>`
        ]]]
    styles:
      custom_fields:
        graph:
          - overflow: unset
      card:
        - overflow: unset
      grid:
        - grid-template-areas: '"n i" "temp hu" "graph graph"'
        - grid-template-columns: 50% 50%
        - grid-template-rows: 1fr 1fr 1fr
        - overflow: unset

      name:
        - font-size: 16px
        - color: white
      state:
        - font-size: 10px
        - color: white

image

And with setting

    styles:
      grid:
        - grid-template-rows: 30% 30% 100%

The card is higher than others in my horizontal stack…

Many thanks for your help

Thanks @petro! :slight_smile: I did some more checks and it is like you said. The dev-tols show the same timestamp as button-card. Must have been a mixup or me not looking close enough. So far, so good, thank you! :slight_smile:

But I still didn’t get what I wanted. :frowning: You don’t happen to know where I could get the last time an input_boolean was switched (preferrably to on) even with one or many HA restarts in between? :slight_smile: In theory the value the logbook card is using. I can look it up in logbook card, but if you would know it right away… :smiley: :rofl:

Thank you!

There is no easy way to do it. The fastest to the goal option would be to create an input_datetime and set it in the automation that turns on the boolean.

1 Like

Hello all,
I was just made aware of this great card and am trying to get it to work.

I had opened a thread describing my problem here https://community.home-assistant.io/t/how-to-change-button-color-depending-on-temperature/357273

I don’t want to spam this thread so I will only repeat the vital code here :slight_smile:

Anyway, I am trying to create a button that sets the thermostat temperature and also changes it’s color based on the current temperature.

- type: button
            tap_action:
              action: call-service
              service: climate.set_temperature
              service_data:
                temperature: 18
              target:
                entity_id: climate.eq_3_master_bedroom

So whenever the temperature differs from 18, I would like the button to be grey. Whenever the value equals 18, I would like it to be red.
However, the state itself is not “18”. The temperature is a state attribute.
image

The value has to be written differently, but I do not know how.

type: custom:button-card
entity: climate.eq_3_living_room
color: rgb(192, 192, 192)
state:
  - value: 18
    color: rgb(255, 0, 0)
icon: mdi:fire-off
tap_action:
  action: call-service
  service: climate.set_temperature
  service_data:
    temperature: 18
  target:
    entity_id: climate.eq_3_master_bedroom

Could someone help me please? :slight_smile:

Instead do something like this:

state:
  - operator: template
    value: "[[[ return entity.attributes.temperature == 18; ]]]"
    color: rgb(255, 0, 0)
1 Like

Perfect, thank you @paddy0174 !

I have another small question: is it possible to make the font color conditional? I saw that there is color_type: card and color_type: label but I did not find a way to make the font change color.
I am asking because I am creating some buttons with text only and I do not want to color the card to highlight the current value.

You want to change the label font color ? Use the styles:

styles:
  label:
    - color: |
        [[[
          if (states['climate.eq_3_living_room'].attributes.temperature < 20)
          return "#000000";
          return "#131fbf";
        ]]]

But I thought one of the main features of the button-card is that the color is applied if the state condition is true and you then do not need to define a second condition.
After all, icon color and card color change without an if statement.

In Germany we have a saying, that translates to “all pathes go to Rome!” (coming from the ancient roman empire), meaning, whatever you choose, you’ll end up in Rome. :smiley:

You can define the colors you want with the way you choose, it doesn’t really matter which one. Both should work. For “your” way to work, you just need to set the same style definitions as you would with the second way.

  state:
    - operator: template
      value: "[[[ return entity.state ]]]"
      styles:
        icon:
          - color: 'rgba(var(--color-green),1)'
        label:
          - color: 'rgba(var(--color-green-text),1)'

This is just an example. :slight_smile:

Yes, it’s all “the same in green” :wink: :smiley:

1 Like

Well, I figured since the color_type: is so elegant, it could also be applied to the label rather than having to work with variables/statements.

But I tried it and it is not quite working yet.

type: custom:button-card
entity: climate.eq_3_living_room
name: 'Off'
color_type: card
show_name: true
show_icon: false
show_state: false
state:
  - operator: template
    value: '[[[ return entity.attributes.temperature == 4.5; ]]]'
    color: rgb(255, 0, 0)
    styles:
      label:
        - color: |
            [[[
              if (entity.attributes.temperature == 4.5)
              return "#ff0000";
              return "#131fbf";
            ]]]
tap_action:
  action: call-service
  service: climate.set_temperature
  service_data:
    temperature: 4.5
    entity_id: climate.eq_3_living_room

The card itself is not being colored in red but the new style is not being applied (I left the color_type in there for reference).

Quick additional question:
am I correct in understanding that it is possible to define background images for this button card? I saw the background changing example on github but strangely no example for a simple, permanent background, so not sure if this is possible with the animation css.

So I’m using this template which works great (thanks @tom_l)

  light_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: more-info
      haptic: selection
    label: >
      [[[ var bri = entity.attributes.brightness &&
      Math.round(entity.attributes.brightness / 2.55);  if
        (entity.state === 'on') return (bri ? (bri+"%") : 'On'); else return "Off"; ]]]
    layout: icon_label
    show_label: true
    show_name: true
    state:
      - styles:
          card:
            - border: solid 1px var(--button-card-light-color-no-temperature)
            - box-shadow: 0px 0px 10px 3px var(--button-card-light-color-no-temperature)
          label:
            - color: var(--paper-item-icon-active-color)
        value: 'on'
      - styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
        value: 'off'
      - icon: mdi:alert
        label: Lost
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.4
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unavailable
    styles:
      card:
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i l l" "n n n"'
        - grid-template-rows: 33% auto
        - grid-template-columns: 33% auto
      icon:
        - width: 28px
        - padding: 0px 0px 0px 0px
        - color: var(--button-card-light-color-no-temperature)
      label:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: var(--secondary-text-color)
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: var(--primary-text-color)
        - white-space: normal
    tap_action:
      action: toggle

Which gives me this

1

I’m trying to change the motion card to a RED border and flashing when active if possible ?

How or which part of the template code should I change to achieve this.
Because my coding sucks; an example would be appreciated in helping me understand, thanks :+1:

Don’t know about the flashing part but changing to red when on is easy enough, just these two last lines:

  light_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: more-info
      haptic: selection
    label: >
      [[[ var bri = entity.attributes.brightness &&
      Math.round(entity.attributes.brightness / 2.55);  if
        (entity.state === 'on') return (bri ? (bri+"%") : 'On'); else return "Off"; ]]]
    layout: icon_label
    show_label: true
    show_name: true
    state:
      - styles:
          card:
            - border: solid 1px red
            - box-shadow: 0px 0px 10px 3px red
2 Likes

Nice; you have a gift my friend. Thanks once again for taking the time to help :+1:

2

I have a problem and hope someone can help me. How do I get the buttons round at the bottom?

this is my code…

type: custom:button-card
entity: group.wohnzimmer_all
aspect_ratio: 1
name: Wohnzimmer
color_type: card
show_state: true
hold_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    title: Wohnzimmer
    large: false
    hide_header: true
    style:
      $: |
        .mdc-dialog {
          backdrop-filter: blur(17px);
          -webkit-backdrop-filter: blur(17px);
          background: rgba(0,0,0,0.25);
        }
        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
          background: none !important;
          box-shadow: none;
          border-radius: 0px;
        }

        .mdc-top-app-bar {
          background: none !important;
        }
    card:
      type: vertical-stack
      cards:
        - type: custom:simple-thermostat
          entity: climate.wohnzimmer
        - type: entities
          card_mod:
            class: content
          entities:
            - entity: sensor.wandthermostat_wohnzimmer_temperature
              name: Raumtemperatur
            - entity: sensor.wandthermostat_wohnzimmer_humidity
              name: Luftfeuchtigkeit
            - entity: binary_sensor.wandthermostat_wohnzimmer_battery
              name: Batterie
        - type: custom:mini-graph-card
          entities:
            - color: '#385581'
              entity: sensor.wandthermostat_wohnzimmer_temperature
          line_width: 6
          hour24: true
          group: true
          align_icon: left
          align_state: right
          align_header: left
          hours_to_show: 24
          show:
            fill: fade
            icon: false
            name: false
            state: false
            name_adaptive_color: false
            labels: hover
            legend: false
          tap_action:
            action: none
custom_fields:
  Brightness:
    card:
      type: custom:button-card
      state:
        - value: 'on'
          color: rgba(65,65,63,0.2)
        - value: 'off'
          color: rgba(65,65,63,0.2)
      entity: group.wohnzimmer_all
      show_name: false
      show_state: false
      show_entity_picture: false
      color_type: icon
      color: rgba(65,65,63,0.2)
      tap_action:
        action: fire-dom-event
        browser_mod:
          command: popup
          hide_header: true
          large: false
          style:
            $: |
              .mdc-dialog {
                backdrop-filter: blur(17px);
                -webkit-backdrop-filter: blur(17px);
                background: rgba(0,0,0,0.25);
              }
              .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
                background: none !important;
                box-shadow: none;
                border-radius: 0px;
              }

              .mdc-top-app-bar {
                background: none !important;
              }
          card:
            type: entities
            entities:
              - type: custom:light-popup-card
                entity: light.wohnzimmer
                icon: none
                hideIcon: true
                fullscreen: false
                brightnessWidth: 130px
                brightnessHeight: 360px
                borderRadius: 1.7em
                sliderColor: '#c7c7c7'
                sliderTrackColor: rgba(25, 25, 25, 0.9)
              - type: custom:hui-element
                card_type: horizontal-stack
                card_mod:
                  style: |
                    #root {
                      justify-content: center;
                      margin-top: 2em;
                    }
                cards:
                  - type: custom:button-card
                    styles:
                      card:
                        - background: '#d8d9e1'
                    tap_action:
                      action: call-service
                      service: light.turn_on
                      service_data:
                        entity_id: light.wohnzimmer
                        color_temp: 153
                  - type: custom:button-card
                    styles:
                      card:
                        - background: '#d5b08d'
                    tap_action:
                      action: call-service
                      service: light.turn_on
                      service_data:
                        entity_id: light.wohnzimmer
                        color_temp: 326
              - type: custom:hui-element
                card_type: horizontal-stack
                card_mod:
                  style: |
                    #root {
                      justify-content: center;
                      margin-bottom: 1em;
                    }
                cards:
                  - type: custom:button-card
                    styles:
                      card:
                        - background: '#ce944b'
                    tap_action:
                      action: call-service
                      service: light.turn_on
                      service_data:
                        entity_id: light.wohnzimmer
                        color_temp: 500
                  - type: custom:button-card
                    styles:
                      card:
                        - background: >-
                            radial-gradient(circle, rgba(255, 255, 255, 1) 0%,
                            rgba(255, 255, 255, 0) 80%), conic-gradient(rgb(120, 39,
                            230), rgb(230, 34, 231), rgb(228, 5, 136), rgb(228, 25,
                            25), rgb(229, 105, 30), rgb(232, 226, 46), rgb(125, 230,
                            41), rgb(52, 232, 40), rgb(51, 231, 92), rgb(52, 232,
                            224), rgb(32, 125, 229), rgb(18, 39, 229), rgb(120, 39,
                            230))
                    tap_action:
                      action: fire-dom-event
                      browser_mod:
                        command: popup
                        title: Wohnzimmer
                        hide_header: true
                        card:
                          type: custom:light-entity-card
                          entity: light.wohnzimmer
                          brightness: true
                          color_temp: true
                          full_width_sliders: false
                          hide_header: true
                          show_slider_percent: true
                          smooth_color_wheel: true
                          persist_features: true
                          consolidate_entities: true
      styles:
        card:
          - width: 40px
        icon:
          - width: 70%
      style: |
        ha-card {
          box-shadow: none;
          background: transparent
        }
      icon: mdi:brightness-6
show_entity_picture: true
styles:
  card:
    - width: 100px
    - height: 100px
  grid:
    - grid-template-areas: '"i" "n" "s"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  name:
    - justify-self: start
    - padding-left: 7px
    - font-weight: bold
    - font-family: Sans-serif
    - font-size: 13px
  img_cell:
    - justify-content: start
    - padding-left: 19px
    - padding-top: 7px
    - align-items: start
    - margin: none
  state:
    - justify-self: start
    - font-color: red
    - font-size: 15px
    - padding-left: 7px
    - padding-bottom: 10px
    - text-transform: capitalize
    - font-family: Sans-serif
    - font-size: 13px
  icon:
    - width: 30%
  custom_fields:
    Brightness:
      - position: absolute
      - left: 60%
      - top: 10%
      - width: 60%
state:
  - value: 'on'
    entity_picture: \local\img\icons8-armchair-96.png
    color: rgba(243, 241, 239, 1)
  - value: 'off'
    entity_picture: \local\img\icons8-armchair-96.png
    color: rgba(65,65,63,0.2)
    styles:
      card:
        - filter: opacity(50%)
      icon:
        - filter: grayscale(100%)

Thanks in advance

I add width, height and border radius to the code. now it look like this… but how do I get the buttons in the middle of the card?

                  - type: custom:button-card
                    styles:
                      card:
                        - background: '#d8d9e1'
                        - border-radius: 50%
                        - width: 50px
                        - height: 50px
                    tap_action:
                      action: call-service
                      service: light.turn_on
                      service_data:
                        entity_id: light.wohnzimmer
                        color_temp: 153

I’m not entirely sure either for the border but I make my buttons ‘wiggle’ when they turn on. You might like that instead :grin:

state:
  - value: 'on'
    styles:
      card:
        - box-shadow: 0px 0px 2px 1px {{ color | default('var(--paper-item-icon-color)') }}
        - animation: wiggle 0.16s 6
extra_styles: |
  @keyframes wiggle {
    0% { transform: rotate(0deg); }
    33% { transform: rotate(10deg); }
    66% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
  }

Actually, I just remembered that I do this for blinking but it blinks the whole button not the border. Maybe it is a clue?

state:
  - value: 'unavailable'
    styles:
      icon:
        - color: var(--accent-color)
        - animation: blink 2s ease infinite
      state:
        - color: var(--accent-color)
        - animation: blink 2s ease infinite
1 Like