Lovelace: Button card

Share your Projects! Dashboards & Frontend
6115

Hello,

I creatred a button-card in another button-card. I’m a complete newbie in html and css. Can anybody explain, how to remove the white boxes around the small icons?button

And here’s the code:

type: custom:button-card
entity: binary_sensor.terrassentur
show_state: true
show_name: true
show_label: true
aspect_ratio: 1/1
state:
  - value: 'off'
    icon: mdi:door
    styles:
      card:
        - background-color: gainsboro
      icon:
        - color: lightslategray
      state:
        - color: lightslategray
  - value: 'on'
    icon: hue:room-other
    styles:
      icon:
        - color: red
  - styles:
      card:
        - background-color: red
      icon:
        - color: white
    value: unavailable
styles:
  icon:
    - top: '-25%'
    - left: 5%
    - position: absolute
  card:
    - border-radius: 5px
  name:
    - font-size: 12px
    - font-weight: bold
    - top: 60%
    - left: 8.1%
    - position: absolute
  label:
    - align-self: end
    - padding: 7px
    - font-size: 11px
    - font-weight: bold
    - font-family: Helvetica
  state:
    - font-size: 12px
    - top: 77%
    - left: 8.1%
    - position: absolute
  custom_fields:
    lueften:
      - top: 5%
      - left: 63%
      - position: absolute
    batterie:
      - top: 30%
      - left: 63%
      - position: absolute
tap_action:
  action: more-info
hold_action:
  action: more-info
custom_fields:
  batterie:
    card:
      type: custom:button-card
      entity: sensor.wz_terrasentuer_battery
      icon: mdi:check
      show_icon: true
      size: 100%
      show_state: false
      show_name: false
      show_label: false
      color_type: icon
      state:
        - value: ok
          icon: mdi:battery
          styles:
            icon:
              - color: green
        - value: low
          icon: mdi:battery-10
          styles:
            icon:
              - color: red
        - styles:
            card:
              - background-color: red
            icon:
              - color: white
          value: unavailable
      styles:
        card:
          - width: 25px
          - height: 25px
          - box-shadow: 0 0 0 0
  lueften:
    card:
      type: custom:button-card
      entity: binary_sensor.lueften_wohnzimmer
      icon: mdi:check
      show_icon: true
      size: 100%
      show_state: false
      show_name: false
      show_label: false
      color_type: icon
      state:
        - value: 'off'
          icon: mdi:close
          styles:
            icon:
              - color: green
        - value: 'on'
          icon: mdi:alpha-l-box
          styles:
            icon:
              - color: green
        - styles:
            card:
              - background-color: red
            icon:
              - color: white
          value: unavailable
      styles:
        card:
          - width: 25px
          - height: 25px
          - box-shadow: 0 0 0 0
6116

Hey guys,

Is there a way to wrap these buttons to a new line within the same “card” space? instead of them being all squashed up like this?

image

Im using Sam’s code that Ive kinda bastardised

This is my code;

I’m sure I’m just missing something, but I don’t know what

Thanks!

EDIT: Just FYI, the top two lines are two different cards. They look a bit weird, id love to be able to get them to wrap to two lines within one card as well.

Also as I’m sure you can tell by my terminology, I know nothing about CSS etc. I can seem to work things out most of the time though if I’m pointed in the right direction LOL

EDIT

LOL

TYPE: Grid

image
image747×794 24 KB

Now I just need to work out the spacing

6117

Ok,

Im stumped with the spacing here?

image
image747×794 24 KB

this is one of the buttons, if anyone has any ideas, would be awesome :slight_smile:

type: grid
cards:
  - type: custom:button-card
    color: transparent
    entity: input_select.room_lights
    show_name: true
    aspect_ratio: 2/1
    color_type: label-card
    name: Bedroom
    icon: phu:rooms-bedroom
    state:
      - icon: phu:rooms-bedroom
        styles:
          icon:
            - color: white
            - width: 40px
          name:
            - color: white
            - font-size: 12px
            - padding-top: 5px
        value: Bedroom
      - icon: phu:rooms-bedroom
        styles:
          icon:
            - color: white
            - opacity: 0.5
            - width: 40px
          name:
            - color: white
            - font-size: 12px
            - padding-top: 1px
        operator: default
    styles:
      icon: null
    tap_action:
      action: call-service
      service: input_select.select_option
      service_data:
        entity_id: input_select.room_lights
        option: Bedroom

EDIT: it was render as squares

Got there in the end :slight_smile:

6119

I have a short question regarding show_last_changed. If I use this option, it should show me the last_changed attribute from the sensor. So far, so good.

Unfotunately after a restart of HA I get the time from the last restart, despite the dev-tools show the correct time from the last change.

Anyone an idea? :slight_smile:

6120

That’s how the last changed property works. Dev tools doesn’t show this, so I’m not sure how you’re getting that.

1 Like
6121

FYI read this, last_changed is not an attribute btw.

2 Likes
6122

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…

6123

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
6124

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

6125

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!

6127

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
6128

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:

6129

Instead do something like this:

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

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.

6131

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";
        ]]]
6132

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.

6133

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:

6134

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

1 Like
6135

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).

6136

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.