Compact climate button using a custom button card

@Plaatjesdraaier I’ve reworked the code from Keith to a card. You can find it here Lovelace: Button card - #5538 by Jens_Wymeersch.
and looks like
image

Wow, that looks great.
Can you please post a sample of the card configuration, because when I try it, I get an error
Best regards,
JJ

1 Like

Hello,

I don’t really know what you mean. I’ve used the custom-card template. Basically I combined the information I had from my temp/humidity sensor in the room, AC data (in one case I get power consumption) and a powerplug (where available). Hope it will work for you.

button_card_templates:
  AC_template:
    triggers_update:
      - sun.sun
    icon: "mdi:fan"
    variables:
      sensor_humidity: " "
      sensor_power: " "
      power_attrib: " "
    state:
      - value: "off"
        color: rgba(0,0,0,0)
      - value: "cool"
        color: deepskyblue
        spin: true
      - value: "heat"
        color: rgba(255,0,0,0.6)
        spin: true
      - value: "heat_cool"
        color: orange
        spin: true
    styles:
      card:
        - aspect_ratio: 1/1
        - margin: 3px
        - padding: 3px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
        - box-shadow: >
            [[[
              if (states['sun.sun'].state == "below_horizon")
                return '-5px -5px 15px #2c2c2c, 5px 5px 15px #191919';
              else if (states['sun.sun'].state == "above_horizon")
                return '-5px -5px 15px #ffffff, 5px 5px 15px #ebebeb';
            ]]]
      grid:
        - grid-template-areas: '"i i temp" "i i humidity" "i i power" " set set mode" "n n n"'
        - grid-template-columns: 1fr 1fr 1fr
        - grid-template-rows: 1fr 1fr 1fr 3fr 2fr
      name:
        - font-weight: bold
        - font-size: 13px
        - color: var(--primary-text-color)
        - align-self: middle
        - justify-self: left
      img_cell:
        - justify-content: start
        - align-items: start
        - margin-top: -8px
      icon:
        - width: 70%
      custom_fields:
        temp:
          - align-self: start
          - justify-self: end
          - font-size: 10px
        humidity:
          - align-self: middle
          - justify-self: end
          - font-size: 10px
        power:
          - align-self: middle
          - justify-self: end
          - font-size: 10px
        set:
          - margin-top: 15px
          - align-self: middle
          - justify-self: end
          - font-size: 30px
        mode:
          - justify-content: end
          - align-items: end
          - font-size: 30px

    custom_fields:
      temp: >
        [[[
          return `<ha-icon
            icon= "mdi:thermometer"
            style="width: 14px; height: 14px; color: green;">
            </ha-icon><span> <span>${entity.attributes.current_temperature}°C</span></span>`
        ]]]
      humidity: >
        [[[
          return `<ha-icon
            icon= "mdi:water-percent"
            style="width: 18px; height: 18px; color: deepskyblue;">
            </ha-icon><span><span>${states[variables.sensor_humidity].state}%</span></span>`
        ]]]
      power: >
        [[[
          if (variables.sensor_power ==" " && variables.power_attrib == " ")
            return `<ha-icon
              icon= "mdi:power-plug"
              style="width: 25px; height: 18px; color: red;">
              </ha-icon>`
          else if (variables.sensor_power != " ")
            return `<ha-icon
              icon= "mdi:power-plug"
              style="width: 18px; height: 18px; color: red;">
              </ha-icon><span><span>${states[variables.sensor_power].state}kWh</span></span>`
          else
            return `<ha-icon
              icon= "mdi:power-plug"
              style="width: 18px; height: 18px; color: red;">
              </ha-icon><span><span>${entity.attributes.power_consumption_energy/1000}kWh</span></span>`          
        ]]]
      set: >
        [[[
          return `
            </ha-icon><span><span>${entity.attributes.temperature}°</span></span>`
        ]]]
      mode: >
        [[[
          if (entity.state =="cool")
            return `<ha-icon
              icon= "mdi:snowflake"
              style="width: 25px; height: 18px; color: rgba(0,0,255,0.6);">
              </ha-icon>`
          else if (entity.state =="heat")
            return `<ha-icon
              icon= "mdi:fire"
              style="width: 25px; height: 18px; color: rgba(255,0,0,0.6);">
              </ha-icon>`
        ]]]

- type: "custom:button-card"
            template: AC_template
            entity: climate.ac_yourac
            variables:
              sensor_humidity: "sensor.yoursesnor_humidity"
              sensor_power: "sensor.yourplug_energy"
- type: "custom:button-card"
            template: AC_template
            entity: climate.yourac
            variables:
              sensor_humidity: "sensor.yoursensor_humidity"
              power_attrib: "yes"

Thank you for your reply.

I tried to add a card but the indentation was off.
Now it’s ok. I’m gonna play with it and keep you posted.
Thanks for the good work!

1 Like

Hi @Jens_Wymeersch,

I altered the button a little bit, because the Icon displaying the state didnt work.
Also I changed the set and the temp, because my wife likes to see the temperature of the room instead of the set temperature
The second button is our AC, the rest of the buttons are Tado thermostats
The fan color and motion is based on the state (hvac_mode), but that’s not what I want because the state is not changing the way I want it to.
I have to figure out how to change the appearance of the fan based on the attribute hvac_action
And last but not least, I want the buttons to scale so that I can use them on my mobile phone.
As you notice I have some work to do :wink:

 klimaat:
    triggers_update:
      - sun.sun
    icon: 'mdi:fan'
    variables:
      sensor_humidity: ' '
      sensor_heating: ' '
      AC_entity: ' '
    state:
      - value: 'off'
        color: '#00000000'
      - value: heat
        color: '#ff000099'
        spin: true
      - value: auto
        color: '#F9C536'
        spin: true
    styles:
      card:
        - width: 110px
        - height: 110px
        - margin: 2px
        - padding: 3px
        - border-radius: 15px
        - background-color: 'rgba(30, 30, 30, 1)'
      grid:
        - grid-template-areas: '"i i set" "i i humidity" "i i heating" "temp temp temp" "n n n"'
        - grid-template-columns: 1fr 1fr 1fr
        - grid-template-rows: 1fr 1fr 1fr 4fr 1fr
      name:
        - font-size: 10px
        - white-space: normal
        - color: '#F9C536'
        - align-self: middle
        - justify-self: middle
      img_cell:
        - justify-content: start
        - align-items: begin
        - margin-top: 15px
      icon:
        - width: 70%
      custom_fields:
        temp:
          - margin-top: 15px
          - align-self: middle
          - justify-self: middle
          - font-size: 35px
          - color: '#F9C536'
        humidity:
          - margin-top: 13px
          - align-self: middle
          - justify-self: end
          - font-size: 10px
          - color: '#F9C536'
        heating:
          - margin-top: 15px
          - align-self: middle
          - justify-self: end
          - font-size: 10px
          - color: '#F9C536'
        set:
          - align-self: start
          - justify-self: end
          - font-size: 16px
          - color: '#F9C536'
    custom_fields:
      temp: |
        [[[
          return `
            </ha-icon><span> <span>${entity.attributes.current_temperature}°</span></span>`
        ]]]
      humidity: |
        [[[
          return `<ha-icon
            icon= "mdi:water"
            style="width: 18px; height: 18px; color: deepskyblue;">
            </ha-icon><span><span>${states[variables.sensor_humidity].state}%</span></span>`
        ]]]
      heating: |
        [[[
          if (variables.sensor_heating ==" ")
            return " "
          else 
            return `<ha-icon
              icon= "mdi:fire"
              style="width: 17px; height: 17px; color: red;">
              </ha-icon><span><span>${states[variables.sensor_heating].state}%</span></span>`
        ]]]
      set: |
        [[[
          return `<ha-icon
            icon= "mdi:speedometer"
            style="width: 16px; height: 16px; color: green;">
            </ha-icon><span><span>${entity.attributes.temperature}°</span></span>`

        ]]]

Hello.
I must say it’s really amazing, great job. Before i was just using just button-card and it was really simple with configure. I’ve tried many hours to use those great cards but i have no idea how to include template for the card.

#put this in your button_card_templates section of your dashboard (raw configuration)

I understand that lovelace have to include this template, last time i had to include .js alarm panel to get it work, but now is this mean i had to switch in configuration lovelave to mode:yaml ?

I’ll be very greatfull for help to could use this peace of art !
Best regards Lukasz

Here’s how I change the icon and color in a similar button-card based situation:

      stat: |
        [[[
          var hvac_action = entity.attributes['hvac_action'];
          var icon = "hass:thermostat";
          var color = "lightGrey";
          if (entity.state == "heat") {
            icon = "hass:fire";
            if (hvac_action == 'heating')
              color = 'orange';
            else if (hvac_action == 'fan')
              color = 'yellow';
            else
              color = 'white';
          } else if (entity.state == 'cool') {
            icon = "hass:snowflake";
            if (hvac_action == 'cooling')
              color = 'lightSkyBlue';
            else if (hvac_action == 'fan')
              color = 'lightGreen';
            else
              color = 'white';
          }
          return `<ha-icon icon="${icon}"
          style="width: 14px; height: 14px; color: ${color};"></ha-icon>
          ${entity.state}/${hvac_action}`
        ]]]

(Of course, you have to change the icons, colors, and logic tests to match your particular scheme, but you can see the idea.)
As to scaling, you might try using a % value instead of a px value on size values (and positioning too, if you’re doing any positioning outside of the row and column settings).

2 Likes

I’m happy you like it and of course kudo’s to @ktownsend-personal for inspiration and starting point
For the scaling to the mobile I’m now using for the width (aspect_ratio: 1/1) and play around with the height.
I’m now up to something even more advanced… GitHub - matt8707/hass-config: A different take on designing a Lovelace UI for the rest of the UI. If you are up for it, we could work together ?

1 Like

Hi Russell,

Thanks !
That works great!

Hi Jens
That looks great.
I’m going to follow it closely, but I’m just a noob myself.
I collect some code here and there and use that for my dashboard.
I am afraid that I do not have much added value. :upside_down_face:

@Jens_Wymeersch, normally I would try to help, but I’ve got a personal situation keeping me mostly offline for a while. Hopefully you are able to find a solution, or someone else on this thread can assist in the meantime.

Keith, for the moment I’m good and was able to progress, even help some other folks. Now I’m going the advanced side with browser mod and 3D floor plans. Slowly I’m getting there…

Hello guys,
Please help because im trying to do it myself but no luck.At this moment im using Custom Button Card addon but Keith did something incredible and I’ve treid but no luck.

yaml for template

#put this in your button_card_templates section of your dashboard (raw configuration)
bigtemp:

Where i should paste the code of buttons template ?
I’ve tried to paste it into theme file but then got errors.
Please help me.
Best regards
Lukasz

If you’re using yaml configuration: (

lovelace:
  mode: yaml

in your configuration.yaml)
put the bigtemp: item directly into the ui-lovelace.yaml (in the config folder)

# other button-card templates ...
bigtemp:
    variables:
...

or you can do like I did and put the button_card templates in a separate file this way:
In your ui-lovelace.yaml file:

button_card_templates: !include lovelace-templates-button-card.yaml

In lovelace-templates-button-card.yaml:

# other button-card templates ...
bigtemp:
    variables:
...

If you’re not using yaml mode, you need to tap the … in the upper right corner of the Overview and tap edit dashboard, then tap the … again and tap edit raw configuration.
Then insert this there.

# other button-card templates ...
bigtemp:
    variables:
...

Hello Russell, thanks for reply.
I did it all before on many way’s but im stil getting

Button-card template 'bigtemp' is missing! while im adding new card with template: bigtemp

Im using home assistant internal YAML editor way.

I had copy the yaml for the template to the beginning of the yaml configuration code in editor, also tried to copy it to notepad first and then copy to YAML configuration editor but still no luck.

After when i paste the code to lovelace YAML editor then i had restart the home assistant also cleared my Mozilla Firefox Cache but still the same :frowning:

Could you show us the section of your raw configuration where you have the bigtemp template is included? (That is the section that begins with

  standard:
    color_type: card
    size: 80%
...
  standard-button:
    template: standard
    variables:
      value_on: 'on'
...
  bigtemp:
    variables:
...

)

I did just like You Said.

I’ve pasted all code from “yaml for the template” into raw editor at the beginning before views: section.
Card

I found some simmilar post

and im wondering because I have no button_card_templates: section im my configuration.

Im so confused.

Cheer up! :slightly_smiling_face:
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

1 Like

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>`
                ]]]

Try removing the semi-colon at the end of

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

like this:

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