Thanks for trying to help. Much appreciated.
Yes, I already caught that. It didn’t do the trick. I am also having problems with variables. I just figured out that variables need to be created in the tesla template (eq: light template), where I created circle_input and circle_input_unit. So now I created a charge_power variable too which is recalled in tesla_circle template. But it’s still not working.
Now my tesla (light) template is:
tesla:
template:
- base
- tesla_circle
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: >
[[[
return !entity || entity.attributes.friendly_name;
]]]
card_mod:
style:
#popup header
.:
content:
type: entities
card_mod:
style: |
#states {
padding-top: 0.5em;
}
variables:
circle_input: >
[[[
if (entity) {
let battery = entity.attributes.battery_level
? Math.round(entity.attributes.battery_level * 100)
: null;
if (battery !== null) {
return battery === 0 && entity.state !== 'off'
? 1
: battery;
}
}
]]]
charge_power: >
[[[
if (entity && entity.attributes.charge_power) {
return Math.round(entity.attributes.battery_level * 100);
} else {
return null;
}
]]]
circle_input_unit: '%'
and the tesla_circle (circle) template:
tesla_circle:
styles:
card:
- --c-stroke-color-on: '#b0b0b0'
- --c-stroke-color-off: none
- --c-fill-color-on: '68f213'
- --c-fill-color-off: rgba(255,255,255,0.04)
- --c-stroke-width: 2.3
- --c-stroke-width-dragging: 4
- --c-font-color: '#97989c'
- --c-font-size: 14px
- --c-unit-font-size: 10.5px
- --c-font-weight: 700
- --c-letter-spacing: -0.02rem
custom_fields:
circle:
- display: initial
- width: 88%
- margin: -3% 2% 0 0
- justify-self: end
- opacity: 1
custom_fields:
circle: >
[[[
let r = 22.1,
c = r * 2 * Math.PI,
tspan = '<tspan dx=".2" dy="-.4">',
charge = variable.charge_power,
input = variables.circle_input || ' ',
unit = variables.circle_input_unit || ' ';
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${c};
stroke-dashoffset: ${typeof input === 'number' && c - input / 100 * c};
stroke-width: var(--c-stroke-width);
stroke: ${charge > 0 ? 'var(--c-fill-color-on)' : 'var(--c-fill-color-off)'};
fill: ${charge > 0 ? 'var(--c-fill-color-on)' : 'var(--c-fill-color-off)'};
}
text {
font-size: var(--c-font-size);
font-weight: var(--c-font-weight);
letter-spacing: var(--c-letter-spacing);
fill: ${charge > 0 ? 'var(--c-fill-color-on)' : 'var(--c-fill-color-off)'};
}
tspan {
font-size: var(--c-unit-font-size);
}
#circle_value, tspan {
text-anchor: middle;
dominant-baseline: central;
}
</style>
<circle id="circle_stroke" cx="25" cy="25" r="${r}"/>
<text id="circle_value" x="50%" y="52%">${input}${tspan}${unit}</tspan></text>
</svg>
`;
]]]
But that still doesn’t work… Argh!!!
Edit: And I just changed this line:
charge = variables.charge_power || ' ',
It was missing an s to variable and the || ’ ',
