Use this template for state_display. I already deleted the unneccessary lines from the additional “value”.
climate:
template: ['base']
aspect_ratio: 1/1
show_state: false
show_icon: false
show_name: true
show_current_temperature: true
show_control: true
state_display: >
[[[ if (entity.attributes.hvac_action === 'heating' ) { return 'verwarmen'; }
if (entity.attributes.hvac_action === 'idle') { return 'inactief';
} ]]]
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>`; } ]]]
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]
Does your climate.entity does not have a state like heat or idle? If so, you can also replace
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)']
with
state:
- value: 'heating'
Just change ‘heating’ to whatever your entity has.
I used the template only to change color to red in depence of boost is activated or not.
obviously never understood the whole thing.