Compact climate button using a custom button card

[pedolsky]

Cheer up!
Russell has already explained the way quite wonderfully, you simply missed the hint.

The template section in the raw config editor always starts with the unique key

button_card_templates:

(no indentation)

Below that all templates follow ( with indentation):

button_card_templates:
  blablabla:   
    color_type: card
    aspect_ratio: 1/1
   
  more_blablabla:
    styles:
      card:
        - border: none

And in exactly this way you apply the template „bigtemp“:

button_card_templates:
  bigtemp:
    variables:
      hide: false
      color: 'rgba(0,0,0,0.3)'
      …
      …

Your button-card should then look like this:

type: 'custom:button-card'
template: bigtemp
entity: …
icon: …
#or whatever you want to add

[Jens_Wymeersch]

Hi Russell,

I want to change not the main icon without success. I can easy change the color but not the icon. Don’t know where I go wrong.

              Motion: >
                [[[
                  var icon= "mdi:motion-sensor-off";
                  if (states["binary_sensor.motion_sensor_master_bathroom_occupancy"].state == "on") {
                    icon="mdi:motion-sensor";
                  } 
                  return `<ha-icon icon="${icon}";                   
                    style="width: 20px; height: 20px;">
                    </ha-icon ><span> <span style="color: var(--text-color-sensor);">${states["sensor.disk_use_percent_home"].state}%</span></span>`
                ]]]

[qoheleth (Russell Smith)]

Try removing the semi-colon at the end of

                  return `<ha-icon icon="${icon}"; 

like this:

                  return `<ha-icon icon="${icon}"

[Jens_Wymeersch]

You are awesome ! This did the trick !

[Jens_Wymeersch]

Hi Rusell,

I’m trying to build a colour picker inside love lace. I’m using the following to create the card.

    cards:
      - type: entities
        entities:
          - type: "custom:slider-entity-row"
            entity: input_number.input_color
            full_row: true
            hide_state: true
            attribute: hue
        style: |
          ha-card {
            background: linear-gradient(to right, rgb(255,0,0) 0%, rgb(255,255,0) 16.6%, rgb(0,255,0) 33.2%, rgb(0,255,255) 49.8%, rgb(0,0,255) 66.4%, rgb(255,0,255) 83%, rgb(255,0,0) 100%);
          }

Result

Now I want the icon associated with the colour picker to take the same colour and the light itself to take on the colour.

the logic is something like the following

if (states["input_number.input_color"].state <= 16.6)
   return "rgb(255, states["input_number.input_color"].state/16.6*255, 0)";
else if  (states["input_number.input_color"].state <= 33.2)
   return "rgb(255- (states["input_number.input_color"].state-16.6)/16.6*255, 255, 0)";
else if  (states["input_number.input_color"].state <= 49.8)
   return "rgb(0, 255, (states["input_number.input_color"].state-33.2)/16.6*255)";
else if  (states["input_number.input_color"].state <= 66.4)
   return "rgb(0, 255- (states["input_number.input_color"].state-49.8)/16.6*255, 255)";
else if  (states["input_number.input_color"].state <= 83)
   return "rgb((states["input_number.input_color"].state-49.8)/16.6*255, 0, 255)";
else
  return "rgb(255, 0, 255- (states["input_number.input_color"].state-83)/16.6*255)";

Any ideas ?

[qoheleth (Russell Smith)]

Within the card definition in Lovelace:

    styles:
      icon:
        - color:  |
          [[[
            if (states["input_number.input_color"].state <= 16.6)
              return "rgb(255, states["input_number.input_color"].state/16.6*255, 0)";
            if (states["input_number.input_color"].state <= 33.2)
              return "rgb(255- (states["input_number.input_color"].state-16.6)/16.6*255, 255, 0)";
            if (states["input_number.input_color"].state <= 49.8)
              return "rgb(0, 255, (states["input_number.input_color"].state-33.2)/16.6*255)";
            if (states["input_number.input_color"].state <= 66.4)
              return "rgb(0, 255- (states["input_number.input_color"].state-49.8)/16.6*255, 255)";
            if (states["input_number.input_color"].state <= 83)
              return "rgb((states["input_number.input_color"].state-49.8)/16.6*255, 0, 255)";
            return "rgb(255, 0, 255- (states["input_number.input_color"].state-83)/16.6*255)";

Note that because the returns don’t execute anything following, we don’t actually need the “else ifs”.
I haven’t tested this code, but it should be about what you need. I’m also assuming that the icon is the icon associated with the entity. If that’s not the case, there’s another way to code this.

[Jens_Wymeersch]

Thank you for your help. I’m now looking to find a way to get this in a variable so I can use it multiple times. Any ideas there ?
And how can I create one card that includes multiple sliders. The purpose is to have one card for a light which you can easily change the color, brightness or switch to temperatue.

[alkissack]

I couldnt get the override working. Has something changed?

Compact climate button using a custom button card

I made a simpler version of this that shows just a temperature sensor value. During the Texas freeze crisis I wanted monitor my attic and garage temperatures on my main dashboard because my water heater is in the attic and my unheated garage has an exterior hose faucet. There was room for the decimal value, so I included that as well. I also added an animation to flash the background if the value is above or below a range that I can adjust via the config (default is 32 to 100 F). [image]

bigte…

[ktownsend-personal (Keith)]

@alkissack, it should work, but I just tested it locally and it didn’t work. I wonder if something changed in the custom button card itself since I wrote that post? If you change it directly in the template it works fine, so it’s the override feature that isn’t working as expected. Feel free to create a bug ticket on github for it and see if the author has any insight into the issue. You may use my example yaml for the ticket if you like. In the meantime, you can create a separate template with each combination of hot/cold range you need.

[alkissack]

Thanks Keith

[MrThiemann]

very beautiful slider!
but, how do you get this card assigned to a lamp?

[morph (Patrick)]

Hi,

your dashboard looks great.

can you share it?

[alinm24 (Alin Mocanu)]

Hi,
I have a custom button card that when pressed opens a climate pop up. All good up to here.
I saw that climate has “hvac_modes” with states “heat” and “off” and hvac_action with 3 states: “idle”, “heating” and “off”.
I want that button to have 3 colors: red glow around button and red name/icon that blinks if my thermostat is actively heating, white name/icon when idle and blue if OFF.
All I manage to do is to get climate state (heat and off) and set red glow and red blinking name/icon when idle and blue when off.

This is my button code and button card:

type: custom:button-card
entity: climate.heating
icon: mdi:heat-wave
name: Climate
show_name: true
show_state: false
layout: vertical
size: 20%
styles:
  card:
    - height: 55px
    - background-color: rgb(33,38,40)
    - border: 1px solid rgb(80,80,80)
    - border-radius: 10%
    - font-family: sans-serif
    - padding: 5%
    - color: white
  label:
    - color: white
    - font-size: 7px
    - justify-self: start
    - padding: 0px 2px
  name:
    - text-transform: none
    - font-size: 13px
    - justify-self: center
    - padding: 0px 5px
  icon:
    - color: white
    - width: 30px
    - height: 30px
    - padding: 0px 0px 5px 0px
  state:
    - justify-self: null
    - font-size: 11px
    - padding: 0px 0px
state:
  - value: heat
    styles:
      state:
        - color: red
      name:
        - color: red
      icon:
        - color: red
        - animation:
            - blink 2s linear infinite
      card:
        - filter: drop-shadow(0 0 1.0rem rgb(136,8,8))
        - border: 10px
  - value: idle
    styles:
      state:
        - color: white
      name:
        - color: white
      icon:
        - color: white
  - value: 'off'
    styles:
      state:
        - color: green
      name:
        - color: green
      icon:
        - color: green
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: Heating
      style:
        $: |
          .mdc-dialog 
          .mdc-dialog__container 
          .mdc-dialog__surface {
            border-radius: 25px;
          }
          .mdc-dialog 
          .mdc-dialog__content {
              padding: 40px 40px !important;
          }
      content:
        type: horizontal-stack
        cards:
          - type: custom:better-thermostat-ui-card
            entity: climate.heating
            eco_temperature: 22
double_tap_action:
  action: more-info

How do I set button collors and animations based on those 3 hvac_action instead of hvac_modes states?

[PlayedIn]

Sorry to reply to a post over 2 years old, but this dashboard is incredible. I marvel that you were able to do most of this with the custom button card. Do you have the lovelace yaml code posted on github, or can you post it here? I would love to study it to better understand the techniques you used. If not, do you mind if I ask you a few questions about it?

[ktownsend-personal (Keith)]

A great place to start is this prior post I wrote on the overall dashboard .

[Mmohab (Moustafa)]

Hi Keith, trying to show humidity to the bigtemp card, the humidity sensor for NEST is an individual sensor and doesn’t have attributes, instead it is the state.
Any advice how to show it on the card ?

[ktownsend-personal (Keith)]

@Mmohab, you should be able to change the logic in the javascript for the humidity card in custom fields.

custom_fields:
  humidity:
    card:
      state_display: |
        [[[
          if (entity.attributes.current_humidity) 
            return entity.attributes.current_humidity;
          return variables.alt_humidity_entity && states[variables.alt_humidity_entity].state;
        ]]]

[Mmohab (Moustafa)]

Thanks a lot, done

[Soulfly999]

Thank you for the nice code. So customized it for me, because i want the outdoor temperatur as a big number only. So it works good, but the card shows an undefined, when the sensor has no decimal place if it’s a whole number.

Is it possible to show a zero than? x.0

type: custom:button-card
entity: sensor.outdoor_temperature
show_state: true
show_icon: false
show_name: false
show_label: true
state_display: '[[[ return parseInt(entity.state) + "°" ]]]'
label: '[[[ return "." + entity.state.split(".")[1] ]]]'
styles:
  grid:
    - display: contents
  img_cell:
    - display: contents
  state:
    - color: var(--primary-text-color)
    - font-size: 105px
    - line-height: 125px
    - text-shadow: 0 0 2px black
    - overflow: visible
    - z-index: 1 
  label:
    - color: var(--primary-text-color)
    - position: absolute
    - bottom: 0
    - left: 200px
    - font-size: 40px
    - line-height: 105px
    - font-weight: 600
    - text-shadow: 0 0 2px black
    - overflow: visible

[ktownsend-personal (Keith)]

@Soulfly999, try this for label:

label: '[[[ return "." + (entity.state.split(".")[1] || 0) ]]]'

You can also just delete the label config if you don’t want to show the decimal.