hi, I have circle info to display “x/y” (where x is number of people home and y is the total of people).
might be a good start for what you are trying to do
this is in 2 parts this will fill in the circle based on the % of people home
variables:
circle_input: >
[[[
return entity === undefined || Math.round(states['zone.home'].state / 3 * 100 ) ;
]]]
and this puts the value in the circle,
I can see an issue when that 10/10 might be to big and you will need to play with the font size, or just display x not x/y when all are on but that will not work if you have a group with more than 10 switches.
custom_fields:
circle: >
[[[
let input = variables.circle_input,
radius = 20.5,
circumference = radius * 2 * Math.PI;
let inner_text = states['zone.home'].state
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${inner_text}/3</text>
</svg>
`;
]]]
you could also use this template to get the inner text for the circle input
{{ expand('group.office_monitors') | selectattr('state','eq','on')|map(attribute='name') | list | count }} / {{ expand('group.office_monitors') | count }}
Full Home Card
- type: custom:button-card
entity: input_select.state_home
name: Home
variables:
circle_input: >
[[[
return entity === undefined || Math.round(states['zone.home'].state / 3 * 100 ) ;
]]]
hold_action:
action: more-info
tap_action:
action: call-service
service: input_select.select_next
service_data:
entity_id: input_select.state_home
double_tap_action:
action: call-service
service: input_select.select_previous
service_data:
entity_id: input_select.state_home
custom_fields:
circle: >
[[[
let input = variables.circle_input,
radius = 20.5,
circumference = radius * 2 * Math.PI;
let inner_text = states['zone.home'].state
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${inner_text}/3</text>
</svg>
`;
]]]
template:
- base
- icon_home
- circle
if this is for light switches it might be better to look into switch as x Switch as X - Home Assistant
