compound post I previously posted in card-mod.… since I have found no card-mod solution but do all in button-card now, Ill repost the set below:
this could be posted in a tile card or custom:button-card thread too, but since I am trying to find the right card-mod, I’ll start here…
I have this tile card mod
type: tile
icon: mdi:water
name: ' '
vertical: true
tap_action:
action: more-info
card_mod:
style: |
.icon-container {
border-radius: 24px;
background: radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
conic-gradient(var(--tile-color) {{states(config.entity)}}% 0%,
var(--card-background-color) 0% 100%);
}
which draws a perfect border according to the percentage of the entity:
I’d love to do the same with my light buttons, but cant find the right mod to do so:
I have some of these on a custom field:
custom_fields:
info: &info_light
>
[[[ if (entity.state === 'on' && entity.attributes.brightness) {
var 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="var(--button-card-light-color,var(--active-color))" stroke-width="2" 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="black" font-size="16" font-weight= "bold"
text-anchor="middle" alignment-baseline="middle">
${brightness}<tspan font-size="10">%</tspan>
</text>
</svg>
`;
}
]]]
and that works fine:
. but in this case I want the border to be drawn on the img_cell of the button-card, or, checking the element in the dom, the .img-cell
so I copied that tile card mod over to
card_mod:
style: |
.img-cell {
border-radius: 24px;
background: radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
conic-gradient(var(--button-card-light-color) {{states(config.entity)}}% 0%,
var(--card-background-color) 0% 100%);
}
note I did change to the button-card-light-color, but nothing is happening…
this is the original button with a regular style section on the image_cell:
img_cell:
- justify-content: center
- background: >
[[[ var rgb = (entity.state === 'on')
? entity.attributes.rgb_color : '211,211,211';
return 'rgba(' + rgb + ',0.2)'; ]]]
- border-radius: 24px
- place-self: start
- width: 42px
- height: 42px
but when I take that out, and change to the card-mod there is nothing:
tbh, I wouldn’t yet know how to write the background in styles syntax native to the custom:button-card, thats why I tried it with card-mod
please have a look what could be done to fix this?
Follow up
well there is progress:
- background: >
[[[ var rgb = (entity.state === 'on')
? entity.attributes.rgb_color : '211,211,211';
var rgba = 'rgba(' + rgb + ',0.2)';
if (entity.state === 'on')
return `radial-gradient(${rgba} 80%,transparent calc(60% + 1px)),
conic-gradient(var(--button-card-light-color) ${Math.round(entity.attributes.brightness/2.55)}% 0%,
var(--card-background-color) 0% 100%)`;
return `${rgba}`; ]]]
and
triggers_update:
- entity
does a lot of good, thanks to @khaisilk1910 for helping me in Discord!
the final thing I need now is get rid of the actual conic, and have the background inside the img_cell only show that conic in the outer border…
just like in the print cartridge buttons…
I cant see it though
alternative since there is no apparent way to do as I hoped:
img_cell:
- justify-content: center
- background: >
[[[ var rgb = entity.state === 'on'
? entity.attributes.rgb_color : '211,211,211';
var rgba = 'rgba(' + rgb + ',0.2)';
return entity.state === 'on'
? `radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
conic-gradient(var(--button-card-light-color) ${Math.round(entity.attributes.brightness/2.55)}% 0%,
${rgba} 0% 100%)`
: `${rgba}`; ]]]
___ And finally at least 1 solution___
it has to do with the left over section of the overlay (but no, it didnt make any difference in solar I could find out)
I’ve found another solution now though:
I am using the same info custom field, and I overlay it exactly over the icon img_cell of the button-card. It feels a bit hacky, and ofc its not 100% linked to the img_cell itself (not all as a matter of fact, it’s just a custom field after all) but is is the best I could come up with for now.
CSS for the border percentage....
custom_fields:
info: >
[[[ if (entity.state === 'on' && entity.attributes.brightness) {
var brightness = Math.round(entity.attributes.brightness/2.54);
var rgb = (entity.state === 'on')
? entity.attributes.rgb_color : '211,211,211';
var rgba = 'rgba(' + rgb + ',0.2)';
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="var(--button-card-light-color,var(--active-color))" stroke-width="2" fill="${rgba}"
style="transform: rotate(-90deg);transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - brightness / 100 * circumference};" />
</svg>
`;
}
]]]
styles:
custom_fields:
info:
- position: absolute
- left: 2%
- top: 4%
- width: 48px
OMT:
I can omit the
triggers_update:
- entity
after all. It was unexpected I needed it before, but now the templates are working, the card successfully triggers automatically
