Compact climate button using a custom button card

@Jens_Wymeersch, that’s the right spot. The logic in - display: is showing (block) or hiding (none) the icon based on whether the thermostat is reporting that the blower is on. For my thermostat, that’s a fan_state attribute. It might be a different attribute on your thermostat, or it might use a different value to indicate on/off, or your thermostat might not have an attribute for the blower. You can modify that to use a different attribute or state value.

Keith, thanks for your quick reply. I understand what you say, but I don’t understand the coding logic. Can you please explain me in plain English what this code block means and what I should change ?

@ktownsend-personal I’m already on the way to simplifying the design a little. I’ll send the code shortly. I want all my buttons to be of a similar size and look&feel.

@Jens_Wymeersch,

The syntax I had used in the template is a ternary, which returns either what’s after the ? or the : depending on whether the first part is true or false. Here is a page about it: Conditional (ternary) operator - JavaScript | MDN

Here is the same logic, but formatted as a standard if/else, and explicitly comparing the first part to undefined instead of the shorthand that treats an undefined value as false:

if (entity.attributes.fan_state != undefined && entity.attributes.fan_state == 1)
    return "block";
else
    return "none";

Thank you so much for the clarification !

Hi @ktownsend-personal,

Please have a look at what I’ve done. I’m stuck with the changing of the mode. Can you please advise?

@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

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