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.
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 !
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
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 
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. 
@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 