thanks, the https://github.com/custom-cards/circle-sensor-card is new to me. cool.
thought I had seen it fly by in A different take on designing a Lovelace UI somewhere, but couldn’t find it anymore.
this might be a simple solution indeed.
edit
found it in the above post and linked config of Mattias Persson (mat8707)
custom_fields:
info: >
[[[ if (entity.state === 'on' && entity.attributes.brightness) {
const brightness = Math.round(entity.attributes.brightness / 2.54);
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="#b2b2b2" stroke-width="1.5" fill="none" style="
transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: ${circumference}; stroke-dashoffset: ${circumference - brightness / 100 * circumference};" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${brightness}<tspan font-size="10">%</tspan></text></svg>`; } ]]]
and styling:
styles:
custom_fields:
info: &circle_pos
[top: 8.5%, left: 56.2%, width: 3.5vw, position: absolute, letter-spacing: 0.03vw]
but this doesnt really auto-adjust the size and position…
will ask Mattias in his thread.