When I change something in the button_card_templates.yaml, is there any way not to restart homeassistant to try?
1 Like
Nice work.
I copied it but it doenst work with a Nest thermostat. The Nest always says heating also when its not heating so the card never goes “out”. Can someone help me what i have to change to get this working, i tried several things but no succes sofar. I know i have to use hvac_action but how?
hvac_modes:
- heat
- 'off'
min_temp: 7
max_temp: 35
preset_modes:
- none
- eco
current_temperature: 19.3
temperature: 20.5
current_humidity: 31
hvac_action: heating
preset_mode: none
friendly_name: thermostaat
supported_features: 17
1 Like
Thank you.
Can you manually turn it off? Because it shows that the thermostat has two modes. heat and off.
Mine look nearly the same
hvac_modes: off, heat
min_temp: 7
max_temp: 35
current_temperature: 22.1
temperature: 22.5
hvac_action: heating
friendly_name: Wohnesszimmer
supported_features: 1
hvac_modes: off, heat
min_temp: 7
max_temp: 35
preset_modes: none, Heat Eco, Full Power, Manufacturer Specific
current_temperature: 22.2
temperature: 19
preset_mode: none
node_id: 20
valve_position: 0 %
friendly_name: bad_heizung
supported_features: 17
Hi! New here. Thanks for your great work!
I’ve everything working except the sidebar with markdown.
Somehow I get every time a (white) panel background. How can I solve this?
1 Like
Did you selected the correct theme?
Ah that’s what the problem was. Pff thanks!!!
When i turn it off it is really off, so it doesnt do anything. So the mode on my Nest is heat then it works and off than its really off and i can’t set a temperature. I have to use hvac_action then i get or heating and when de set temperature is reached i get idle.
That means it works now?
Sorry no, i don’t know how i use the hvac_action in the code 
Sorry, I dont know. The hvac_action is a attribute and I dont know how to use them.
But I got a similiar thing called preset_mode. I use that for extra power when wife is complaining. That could be used to color the card red when active.
maybe @Mattias_Persson or @kuuji has a Idea how to use attributes as state for the card?
Edit: This could be the way GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant but I am struggling to get it running
ButtonCardJSTemplateError: TypeError: Cannot read property ‘attributes’ of undefined in ‘return (states[‘entity.entity_id’].attributes.preset_mode == ‘none’)’
- operator: template
value: >
[[[ return (states['entity.entity_id'].attributes.preset_mode == 'none') ]]]
styles:
card: [background-color: 'rgba(255, 0, 0, 0.8)']
Edit: just remove the quotes from entity.entity_id and it will work. So you can use the attribute as state.
- operator: template
value: >
[[[ return (states[entity.entity_id].attributes.preset_mode == 'Full Power') ]]]
styles:
card: [background-color: 'rgba(255, 0, 0, 0.8)']
This will color the card in red when the attribute “preset_mode” is set to Full Power
Thanks for helping. I will try that later on. For now i have to look why i don’t see any history in the grafics.
1 Like
I can confirm that.
They changed the way to call popup from frontend
HI,
what thermostat card you use?
Can you show me you code?
Thank You.
I made a new yaml file inside the popup folder.
action: call-service
service: browser_mod.popup
service_data:
title: Information
hide_header: true
deviceID: this
style:
.: |
:host .content {
width: calc(385px + 385px + 385px);
max-width: 90vw;
}
$: |
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
}
card:
type: custom:layout-card
column_num: 3
column_width: [385, 385, 385]
layout: vertical
cards:
- type: thermostat
title: Nest
class: add_header
show_header_toggle: false
entity: climate.family_room_thermostat
- break
- type: entities
title: Badkamer
class: add_header
show_header_toggle: false
entities:
- entity: sensor.temperature_158d0002437d14
name: temperatuur
- entity: sensor.humidity_158d0002437d14
name: luchtvochtigheid
- entity: sensor.pressure_158d0002437d14
name: luchtdruk
- entity: sensor.battery_158d0002437d14
name: batterij
- type: custom:mini-graph-card
entities:
- color: '#385581'
entity: sensor.temperature_158d0002437d14
- color: green
entity: sensor.humidity_158d0002437d14
align_state: left
group: false
points_per_hour: 1
line_width: 3
hour24: true
hours_to_show: 4
show:
{fill: fade, icon: false, name: false, state: false,
name_adaptive_color: true, labels: hover, legend: false}
tap_action:
action: none
- type: entities
title: Slpk. Ouders
class: add_header
show_header_toggle: false
entities:
- entity: sensor.temperature_158d0001a1fa6c
name: temperatuur
- entity: sensor.humidity_158d0001a1fa6c
name: luchtvochtigheid
- entity: sensor.pressure_158d0001a1fa6c
name: luchtdruk
- entity: sensor.battery_158d0001a1fa6c
name: batterij
- type: custom:mini-graph-card
entities:
- color: '#385581'
entity: sensor.temperature_158d0001a1fa6c
- color: green
entity: sensor.humidity_158d0001a1fa6c
align_state: left
group: false
points_per_hour: 1
line_width: 3
hour24: true
hours_to_show: 4
show:
{fill: fade, icon: false, name: false, state: false,
name_adaptive_color: true, labels: hover, legend: false}
tap_action:
action: none
- break
- type: entities
title: Slpk. Kyan
class: add_header
show_header_toggle: false
entities:
- entity: sensor.temperature_158d0002320b36
name: temperatuur
- entity: sensor.humidity_158d0002320b36
name: luchtvochtigheid
- entity: sensor.pressure_158d0002320b36
name: luchtdruk
- entity: sensor.battery_158d0002320b36
name: batterij
- type: custom:mini-graph-card
entities:
- color: '#385581'
entity: sensor.temperature_158d0002320b36
- color: green
entity: sensor.humidity_158d0002320b36
align_state: left
group: false
points_per_hour: 1
line_width: 3
hour24: true
hours_to_show: 4
show:
{fill: fade, icon: false, name: false, state: false,
name_adaptive_color: true, labels: hover, legend: false}
tap_action:
action: none
- type: entities
title: Studeerkamer
class: add_header
show_header_toggle: false
entities:
- entity: sensor.temperature_158d0002320b45
name: temperatuur
- entity: sensor.humidity_158d0002320b45
name: luchtvochtigheid
- entity: sensor.pressure_158d0002320b45
name: luchtdruk
- entity: sensor.battery_158d0002320b45
name: batterij
- type: custom:mini-graph-card
entities:
- color: '#385581'
entity: sensor.temperature_158d0002320b45
- color: green
entity: sensor.humidity_158d0002320b45
align_state: left
group: false
points_per_hour: 1
line_width: 3
hour24: true
hours_to_show: 4
show:
{fill: fade, icon: false, name: false, state: false,
name_adaptive_color: true, labels: hover, legend: false}
tap_action:
action: none
4 Likes
I think I am done for the moment with the climate-card. Thanks to @andrew47 for the idea with the attribute 
.
I made a button-card with three states. Off, heating and full power.
When it is off, it shows the current temperature measured by the device.
When its on the circle on the right will show the target temperature as text and the actual valve opening as a stroke. From 0-100%
The third mode is called “full power”. It us used to open the valve on the radiator completely for a few minutes. Its more a WAF thing. But when the mode is active, the card turns red and the target temperature dissapears.
And when you click the button-card you will get a nice popup made with thermostat-popup-card.
ui-lovelace.yaml
- type: custom:button-card
entity: climate.buero_heizung
name: Büro
style:
top: 20.35%
left: 55.18%
width: 10%
template: climate
button_card_templates.yaml
climate:
template: ['base']
aspect_ratio: 1/1
show_state: true
show_icon: false
show_name: true
show_current_temperature: true
show_control: true
state:
- operator: template
value: >
[[[ return (states[entity.entity_id].attributes.preset_mode == 'none') && (states[entity.entity_id].state == 'heat') ]]]
styles:
card: [background-color: 'rgba(255, 255, 255, 0.8)']
name: [color: 'rgba(0, 0, 0, 0.6)']
state: [color: 'rgba(0, 0, 0, 0.6)']
- operator: template
value: >
[[[ return (states[entity.entity_id].attributes.preset_mode == 'Full Power') ]]]
styles:
card: [background-color: 'rgba(227, 56, 18, 0.4)']
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: '[[[ return entity.attributes.friendly_name ]]]'
deviceID: this
card:
type: entities
entities:
- type: custom:thermostat-popup-card
entity: '[[[ return entity.entity_id ]]]'
icon: none
fullscreen: false
brightnessWidth: 130px
brightnessHeight: 360px
borderRadius: 1.7em
sliderColor: '#c7c7c7'
sliderTrackColor: rgba(25, 25, 25, 0.9)
actionSize: 4.5em
actionsInARow: 2
custom_fields:
circle_current: >
[[[ {
const temperature = entity.attributes.current_temperature;
const stroke_color = entity.state === 'heat' ? '#b2b2b2' : '#313638';
const fill_color = entity.state === 'heat' ? '#00ba32' : '#FFFFFF08';
const radius = 28;
return `<svg viewBox="0 0 60 60"><circle cx="30" cy="30" r="${radius}" stroke="${stroke_color}" stroke-width="1.5" fill="${fill_color}" style="
transform: rotate(-90deg); transform-origin: 50% 50%; " />
<text x="50%" y="54%" fill="#f7f8fa" font-size="18" text-anchor="middle" alignment-baseline="middle">${temperature}<tspan font-size="10">°</tspan></text></svg>`; } ]]]
circle_target: >
[[[ if (entity.state === 'heat' && entity.attributes.temperature) {
const temperature = entity.attributes.temperature;
const valve_position = entity.attributes.valve_position;
const valve_position_num = valve_position.slice(0, -1);
const stroke_color = entity.state === 'heat' ? '#b2b2b2' : '#313638';
const fill_color = entity.state === 'heat' ? 'none' : '#FFFFFF08';
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" stroke="${stroke_color}" stroke-width="1.5" fill="${fill_color}" style="
transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: ${circumference}; stroke-dashoffset: ${circumference - valve_position_num / 100 * circumference};" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${temperature}<tspan font-size="10">°</tspan></text></svg>`; } ]]]
styles:
name:
[top: 57.7%, left: 11%, line-height: 2vw, position: absolute]
state:
[top: 74%, left: 11%, line-height: 2vw, position: absolute]
card:
[font-family: Sf Display, letter-spacing: 0.05vw, font-weight: 400, color: 'rgba(255, 255, 255, 0.3)', font-size: 1.34vw, background-color: 'rgba(115, 115, 115, 0.2)', border-radius: 0.8vw, box-shadow: none, transition: none]
custom_fields:
circle_target:
[top: 6.5%, left: 54.5%, width: 3.5vw, position: absolute, letter-spacing: 0.03vw]
circle_current:
[top: 6.5%, left: 6%, width: 3.5vw, position: absolute, letter-spacing: 0.03vw]
9 Likes
Sieht gut aus
looks great
1 Like
HI,
i copied your Code now this Error:
Button-card template 'climate' is missing!
type: 'custom:button-card'
entity: climate.buero_heizung
name: Büro
style:
top: 20.35%
left: 55.18%
width: 10%
template: climate
Have you a idea?
OKi sorry i placed the tamplate on the right position. Works now
Can someone help. I can’t get the text “verwarmen” in the same color as “Woonkamer”.
Tried different things but i stuck now.
climate:
template: ['base']
aspect_ratio: 1/1
show_state: false
show_icon: false
show_name: true
show_current_temperature: true
show_control: true
state:
- operator: template
value: >
[[[ return (states[entity.entity_id].attributes.hvac_action == 'heating') ]]]
styles:
card: [background-color: 'rgba(255, 255, 255, 0.8)']
name: [color: 'rgba(0, 0, 0, 0.6)']
value: [color: 'rgba(0, 0, 0, 0.6)']
custom_fields:
circle_current: >
[[[ {
const temperature = entity.attributes.current_temperature;
const stroke_color = entity.attributes.hvac_action === 'heating' ? 'rgba(255, 255, 255, 0.8)' : 'rgba(255, 255, 255, 0.8)';
const fill_color = entity.attributes.hvac_action === 'heating' ? 'rgba(255, 255, 255, 0.8)' : 'rgba(255, 255, 255, 0.8)';
const radius = 0;
return `<svg viewBox="0 0 60 60"><circle cx="30" cy="30" r="${radius}" stroke="${stroke_color}" stroke-width="0" fill="${fill_color}" style="
transform: rotate(-90deg); transform-origin: 50% 50%; " />
<text x="50%" y="54%" fill="#8d8e90" font-size="25" text-anchor="middle" alignment-baseline="middle">${temperature}<tspan font-size="10">°</tspan></text></svg>`; } ]]]
circle_target: >
[[[ if (entity.attributes.hvac_action === 'heating' && entity.attributes.temperature) {
const temperature = entity.attributes.temperature;
const stroke_color = entity.attributes.hvac_action === 'heating' ? '#b2b2b2' : '#313638';
const fill_color = entity.attributes.hvac_action === 'heating' ? 'idle' : '#FFFFFF08';
const radius = 0;
return `<svg viewBox="0 0 50 50"><circle cx="30" cy="30" r="${radius}" stroke="${stroke_color}" stroke-width="0" fill="${fill_color}" style="
transform: rotate(-90deg); transform-origin: 50% 50%; " />
<text x="50%" y="54%" fill="#3182b7" font-size="14" text-anchor="middle" alignment-baseline="middle">${temperature}<tspan font-size="10">°</tspan></text></svg>`; } ]]]
value: >
[[[ if (entity.attributes.hvac_action === 'heating' ) { return 'verwarmen'; }
if (entity.attributes.hvac_action === 'idle') { return 'inactief';
} ]]]
styles:
name:
[top: 57.7%, left: 11%, line-height: 2vw, position: absolute]
state:
[top: 74%, left: 11%, line-height: 2vw, position: absolute]
card:
[font-family: Sf Display, letter-spacing: 0.05vw, font-weight: 400, color: 'rgba(255, 255, 255, 0.3)', font-size: 1.34vw, background-color: 'rgba(115, 115, 115, 0.2)', border-radius: 0.8vw, box-shadow: none, transition: none]
custom_fields:
circle_target:
[top: 8.5%, left: 54.5%, width: 3.5vw, position: absolute, letter-spacing: 0.03vw]
circle_current:
[top: 8.5%, left: 6%, width: 3.5vw, position: absolute, letter-spacing: 0.03vw]
value:
[top: 74%, left: 11%, line-height: 2vw, position: absolute]