Newbie Alert…
I’m working with a yaml file that someone shared and I’m working to try to update it to match what I’m trying to do however, being a newbie to HA, JS, Jinja, ect I’m struggling. I’m able to figure out what most things do and how to change them but I’m struggling with this one. I’m trying to set the outline (stroke) of a circle color based on an attribute.
Basically if the heat pump is cooling I want it blue, if it’s heating orange, and if it’s off grey. I’m not sure if I have the if statement in the right area (nor if I have the right syntax) could anyone possibly help educate me?
This is inside the “button_card_templates” file using the custom:button-card option in the YAML file
pool_circle:
custom_fields:
circle: >
[[[
if (states['climate.pool_heatpump'].state === 'off') {
let input = states['climate.pool_heatpump'].attributes.target_temp_high,
radius = 20.5,
circumference = radius * 2 * Math.PI,
if (states['climate.pool_heatpump'].attributes.hvac_action === "heating")
let stroke_color = "orange";
else if (states['climate.pool_heatpump'].attributes.hvac_action === "cooling")
let stroke_color = "blue";
else
let stroke_color = "grey";
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="${stroke_color}" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="orange" font-size="18" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${input}<tspan font-size="18">°F</tspan></text>
</svg>
`;
}
]]]
styles:
custom_fields:
circle:
- display: initial
- width: 90%
- margin: -6% -5% 0 0
- justify-self: end
- opacity: 1
1 post - 1 participant