Lovelace: Button card

I have experienced this in the past (here) when using a button is inside a button. Using another type of card inside the button card worked for me in the past, but I like your resolution. Nice workaround!

The solution of the helper buttons with automations was something you had shared in the past, and I took the menu code from here:

https://gist.github.com/vlaraort/b74d6c3113f1a031245d27329e1f22f7

1 Like

Right now I’m facing another difficulty, perhaps simpler than the previous one, but I’m having trouble solving it…

I want to have two font sizes and have them centered in the middle of the card.

imageimage

type: custom:button-card
icon: mdi:home-thermometer
entity: sensor.temperatura_media_casa
show_entity_picture: true
show_name: false
show_state: true
tap_action:
  action: more-info
styles:
  icon:
    - width: 22px
    - color: |-
        [[[
          var state = states['sensor.temperatura_media_casa'].state;
          if (state <= 18) {
            return 'rgb(100,149,237)'; //blue
          } else if (state <= 24) {
            return 'rgb(244,208,63)'; //yellow
          } else {
            return 'rgb(231,76,60)'; //red
          }
        ]]]
  img_cell:
    - background: |-
        [[[
          var state = states['sensor.temperatura_media_casa'].state;
          if (state <= 18) {
            return 'rgba(100,149,237,0.2)'; //blue_t
          } else if (state <= 24) {
            return 'rgba(244,208,63,0.2)'; //yellow_t
          } else {
            return 'rgba(231,76,60,0.2)'; //red_t
          }
        ]]]
    - border-radius: 100%
    - width: 30px
    - height: 30px
  state:
    - font-size: 14px
    - font-weight: 500
  card:
    - border-radius: 100px
    - width: 100%
    - height: 39px
    - background: rgb(39,39,39)
    - box-shadow: none
    - padding: 0px 10px 0px 5px
  grid:
    - grid-template-columns: min-content 1fr
    - grid-template-areas: |
        "i s"
    - gap: 0px 10px;

That is a tough one. They are grouped together.

image

i have tested using label and name with template but not figure out how to center the data

You can use the custom field option. Referencing the state then splitting the UoM from that state was what I was specifically referencing.

For example this is 4 separate buttons inside a main button card.

image

You can do the same with the state.

2 Likes

Hello guys:
I am starting to create my dashboard and here you are my first problem.

I would like that the icon is BLUE when ON, and ORANGE when off…

this is my code… the color is showed good only when ON:

  - type: custom:button-card
        entity: light.colector_alex_hab_valeria
        color_type: icon
        color: rgb(70, 116, 156)
        color_off: rgb(253, 192, 47)

Thank you

Hi, try this:

  - type: custom:button-card
    entity: light.colector_alex_hab_valeria
    state:
      - value: 'on'
        color: 'rgb(70, 116, 156)'
      - value: 'off'
        color: 'rgb(253, 192, 47)'

Hello. that WORKED…
thanks a lot for your fast help

1 Like

Hi, I have a custom button card with a entity picture ( the currently playing cover). It is possible to fade in the image every time that change? Now load without any transition.

Thanks in advance

Potentially stupid question here (I am NOT experienced with CSS). I’m trying to use the custom button card to change icon colours based on entity state. I have a theme installed (Caule). Only the theme colours show - is there a way to override the theme within the custom button card?

They say there’s no stupid question, only stupid answers… :star_struck:
Back to topic: i use this system for such cases:

styles:
  icon:
    - color: |
        [[[
        if (states['sensor.whatever'].state =='on')
          return "red"
        else
          return "lime"
        ]]]
1 Like

Hi, thanks for this. And that does indeed override the theme colours. I can use this to do exactly what I wanted. Kudos to you, very grateful. Although being me I want to know why, but that is for another day.

Because button-card supports JavaScript’s - they are one of most powerful functions of button card. You can do pretty much anything with it, for example:

name: | #or label, or any custom field...
   [[[
   if(states['sensor.temperature.out'].state > '25')
      return "it's hot outside"
   else if (states['sensor.temperature.out'].state > '15')
      return "it's ok outside"
   else 
      return "it's cold outside"
   ]]]

you can also define state to show another thing and not real state of sensor, but in this case it’s like this:

show_state: true
state_display: |
   [[[
   if(states['sensor.status.ups'].state =='online')
      return "UPS works on power"
   else 
      return "UPS runs on batteries"
   ]]]

etc…
check button-card’s github page, there are many examples there.
I think that 50-70% of my cards are made with this button card. I’m dead if this card stops working…

1 Like

Thanks for these example, gives me food for thought. I have solved my original issue, which is really embarrassing. I was using an input_boolean as the entity to test as I didn’t want to keep messing with the state of my aircon. Of course the boolean can only have two states, but I was trying to set it to e.g. heat, cool, etc and this of course messed up the cards actions and defaulted to the theme colours. Once I relpaced it with a dropdown helper with multiple states it all worked as expected. Here is my working code:

type: custom:button-card
entity: input_select.dummy_a_c
name: Bedroom
show_state: true
state:
  - value: heat
    color: red
    icon: mdi:fire
  - value: cool
    color: blue
    icon: mdi:snowflake
  - value: 'off'
    color: grey
    icon: mdi:fan-off

re-styling some of my buttons, I am confronted with a challenge…

Id love to use the helpers.localize function on a distance sensor entity, which in itself it rather simple. However, I need that to be Int’ed also, because I dont want the 4 decimal precision in the button.

Currently I do this:

  custom_fields:
    afstand: >
      [[[ var afstand = parseInt(states['sensor.thuis_' + variables.id + '_distance'].state);
          if (afstand != 0) return afstand + ' km'; ]]]

because the afstand variable is the .state, I can not use that inside the helpers.localize().

[[[ return helpers.localize( states['sensor.thuis_' + variables.id + '_distance'] ); ]]]

is the correct syntax, but, as said, it shows all decimals

cant we do this somehow?

edit

yes we can:

  custom_fields:
    afstand: >
      [[[ var afstand = 'sensor.thuis_' + variables.id + '_distance';
          return helpers.localize(states[afstand],undefined,0); ]]]

As @basbrus pointed out to me, the helpers function also has an option to set the precision.

I had completely forgotten about that. what a great step forward that has been.
thanks

Hello guys:
I was trying to create this card but I am not able to do that :pensive:

As you can see in the following image ( what I want to create)
It is a card with:

  • Temp value 1 - name of the room 1 - Humidity of the room 1
  • Temp value 2 - name of the room 2 - Humidity of the room 2
  • Temp value 3 - name of the room 3 - Humidity of the room 3

deseo

Could you help me with the code to do this please::

Thanks a lot.

Hi, try this as a start:

type: custom:button-card
entity: sensor.temperature_humidity_sensor_b543_temperature
show_label: false
show_icon: true
name: Temperatura y humedad
custom_fields:
  campo1: >
    [[[  return
    states['sensor.termometro_humedad_govee_oficina_temperature'].state +' °c'
    ]]]
  campo2: |
    [[[  return 'Habitación 1' ]]]
  campo3: >
    [[[  return states['sensor.termometro_humedad_govee_salon_humidity'].state
    +'%' ]]]
  campo4: >
    [[[  return
    states['sensor.termometro_humedad_govee_oficina_temperature'].state +' °c'
    ]]]
  campo5: |
    [[[  return 'Habitación 2' ]]]
  campo6: >
    [[[  return states['sensor.termometro_humedad_govee_salon_humidity'].state
    +'%' ]]]
  campo7: >
    [[[  return
    states['sensor.termometro_humedad_govee_oficina_temperature'].state +' °c'
    ]]]
  campo8: |
    [[[  return 'Habitación 3' ]]]
  campo9: >
    [[[  return states['sensor.termometro_humedad_govee_salon_humidity'].state
    +'%'
    ]]]
styles:
  grid:
    - grid-template-areas: >-
        "n n i" "campo1 campo2 campo3" "campo4 campo5 campo6" "campo7 campo8
        campo9"
    - grid-template-columns: 1fr 1fr 1fr
    - grid-template-rows: 1fr 1fr 1fr 1fr;
  card:
    - padding: 10px
  icon:
    - width: 20px
  img_cell:
    - width: 20px
    - justify-self: end
    - align-self: end
  name:
    - justify-self: start
    - font-size: 16px
    - line-height: 40px
    - font-weight: 600
  custom_fields:
    campo1:
      - font-size: 16px
    campo2:
      - font-size: 16px
      - justify-self: center
    campo3:
      - font-size: 16px
    campo4:
      - font-size: 16px
    campo5:
      - font-size: 16px
      - justify-self: center
    campo6:
      - font-size: 16px
    campo7:
      - font-size: 16px
    campo8:
      - font-size: 16px
      - justify-self: center
    campo9:
      - font-size: 16px

Captura de pantalla 2024-05-18 163131

Only needs to replace your sensors.

Saludos :wink:

1 Like

THANK YOUUU I will try

Best regards

1 Like

Whats wrong with my code? Icon doesnt work.

type: custom:button-card
entity: sensor.pocasi_dnes_1
show_name: true
show_state: false
show_label: true
show_icon: true
triggers_update: sensor.pocasi_dnes_1
styles:
  card:
    - border-radius: 10%
    - padding: 0px
    - height: 200px
    - font-size: 20px
    - font-family: Century Gothic
    - background: rgba(100, 200, 250, 30%)
  grid:
    - grid-template-areas: '"n" "i" "tmax" "tmin" "l"'
  name:
    - font-weight: normal
    - font-size: 14px
    - color: white
    - padding-bottom: 5px
  custom_fields:
    tmax:
      - font-size: 25px
    tmin:
      - font-size: 25px
name: |
  [[[
    return states["sensor.den_v_tydnu_1"].state 
  ]]]
custom_fields:
  tmax: |
    [[[
      return `<span style="color: var(--text-color-sensor);"> ${states['sensor.teplota_dnes_1_max'].state } °C </span>`
    ]]]
  tmin: |
    [[[
      return `<span style="color: var(--text-color-sensor);"> ${states['sensor.teplota_dnes_1_min'].state } °C </span>`
    ]]]
label: |
  [[[
    return `<span style="color: var(--text-color-sensor);"> ${states['sensor.rain_dnes_1_predpoved'].state } mm </span>`
  ]]]
state:
  - operator: '=='
    value: clear-night
    icon: mdi:weather-night
  - operator: '=='
    value: cloudy
    icon: mdi:weather-cloudy
  - operator: '=='
    value: fog
    icon: mdi:weather-fog
  - operator: '=='
    value: hail
    icon: mdi:weather-hail
  - operator: '=='
    value: lightning
    icon: mdi:weather-lightning

image

but when i swap position of naem and icon, it works ok.

type: custom:button-card
entity: sensor.pocasi_dnes_1
show_name: true
show_state: false
show_label: true
show_icon: true
triggers_update: sensor.pocasi_dnes_1
styles:
  card:
    - border-radius: 10%
    - padding: 0px
    - height: 200px
    - font-size: 20px
    - font-family: Century Gothic
    - background: rgba(100, 200, 250, 30%)
  grid:
    - grid-template-areas: '"i" "n" "tmax" "tmin" "l"'

image

But I want to have icon under the daoy of the week text…