pliant echo
I've opened a community post https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/7339?u=mariusthvdb and would appreciate if anyone around could have a look. I've got it sorted for tiles (print cartridge), and for custom fields in the custom:button-card (the desk light_. But cant find a way to either use styles on the button-card itself, or card-mod the button-card to do this:
these are my button-card cards with lights, and I seek to get that border on the icon background
pliant echo
this would be a button-card styles template for the background, but it kills the button...
- background: >
[[[ return 'radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
conic-gradient(var(--button-card-light-color)' + entity.state +' % 0%,
var(--card-background-color) 0% 100%)'; ]]]```
rugged reef
Maybe it's
type: custom:button-card
entity: sensor.hl_2250dn_black_toner_remaining
layout: icon_state_name2nd
show_state: true
styles:
img_cell:
- width: 80px
- height: 80px
- border-radius: 50%
- background: >
[[[ return `radial-gradient(circle, rgba(33,233,233,1) 60%, transparent
60%), conic-gradient(lime 0deg, lime ${entity.state}%, grey 0%)` ]]]
icon:
- width: 50px
- height: 50px
it is something like that, yes, thank you!.
ofc I had made a silly mistake, and forgot to take the attribute (brightness) and didnt change from the entity.state (which is the percentage on the ink cartridges...). You made me see I also forgot the correct syntax for the variable there.. using the ${}.
- background: >
[[[ return `radial-gradient(var(--card-background-color) 60%, transparent
calc(60% + 1px)), conic-gradient(var(--button-card-light-color) ${entity.attributes.brightness}%, var(--card-background-color) 0% 100%)` ]]]
``` is almost there. I t just doenst correctly calculate the percentage ring all the time....
rugged reef
you can try
255/360=1.4117647
This factor (1.41) will convert any value from the 0-255 scale to 0-360 degrees.
Example Values:
0 in 255 scale = 0 * 1.4117647 = 0 degrees
127.5 in 255 scale = 127.5 * 1.4117647 = 180 degrees
255 in 255 scale = 255 * 1.4117647 = 360 degrees
pliant echo
right, I needed to do this
[[[ return `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%,
var(--card-background-color) 0% 100%);` ]]]```
indeed, calculate the correct brightness....3 things left:
I probably need to throw in some conditions for the last requirement (regular when off) like I do with the 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>
`;
}
]]]
but first I want my colored circle back..... 😉. for that I need to change the radial-gradient(var(--card-background-color) to use the light color radial-gradient(var(--button-card-light-color) but then tone it down, because it will be one blob of items (border, icon and background) in the same color now
hahaha getting there:
[[[ var rgb = entity.attributes.rgb_color;
var rgbcolor = 'rgba(' + rgb + ',0.2)';
return `radial-gradient(${rgbcolor} 60%,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%);` ]]]
``` now how to get that back to the line we had before..... aargghh
rugged reef
radial-gradient(${rgbcolor}
pliant echo
yes, I have that?
btw, this fixes the off state - background: > [[[ var rgb = (entity.state === 'on') ? entity.attributes.rgb_color : '211,211,211'; var rgbcolor = 'rgba(' + rgb + ',0.2)'; if (entity.state === 'on') return `radial-gradient(${rgbcolor} 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 `${rgbcolor}`; ]]] and sets the rgb color to the darker background. I also had to use triggers_update: - entity somehow, which is a first for me, because I always see the buttins update on the state change of the entity anyhow, and dont see why these tenmplates would behave any differentle..
almost there...
rugged reef
replace ${rgbcolor} with any color you want
and ${rgbcolor} 80% change 80% to small number
pliant echo
you got to help me here, I think I tried all you suggested, but I can not get rid of the pie chart.... - 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}`; ]]] I can replace the final var(--card-background-color) with the ${rgba} because t needs to get that background after all.
no way can I bring back this border of the circle.
ofc, it isnt a border in the sense of - border: black 1px solid and maybe that would be a way to get things going too. currently, we have a background in the rgba color, which is covered with a conic of the light color. or vice versa... so which of the settings sets the margin between the 2
pliant echo
this could work too 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}`; ]]] but of course it's plan B.....
dawn pewter
A little bit late to this conversation. There's an archived thread where we were working on something similar. Looks like everything has already been covered but there may be some useful information over there. #frontend-archived message
pliant echo
hi Thanks, nice indeed. And I have several progress borders myself, but, like in that linked thread, those are all for custom fields. My challenge now is to do this on the regular img_cell of the card icon. What I cant understand is I can overlay the conic with the card background color, like in the image from Plan B above. But I can Not override it with the rgba color, because then it shows the full conic again.
unless ofc I could manage to set in on the border of the image_cell, in whihc case the icon and its background would be so simple. Dont think I've ever seen a border though limited to show on only a % of the circle
like this, but then only partial
img_cell:
- justify-content: center
- background: >
[[[ var rgb = (entity.state === 'on')
? entity.attributes.rgb_color : '211,211,211';
return 'rgba(' + rgb + ',0.2)'; ]]]
- border: var(--button-card-light-color) 2px solid
- border-radius: 24px
pliant echo
it was rather simple to add the rgba color to the fill on the custom field I posted above: custom_fields: info: &info_light > [[[ 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};" /> <text x="50%" y="54%" fill="var(--text-color-on)" font-size="16" font-weight= "bold" text-anchor="middle" alignment-baseline="middle"> ${brightness}<tspan font-size="10">%</tspan> </text> </svg> `; } ]]]
and its rather nice too. This custom field Info has the exact design I would love to see around the other card's icon/img-cel
pliant echo
I did find a way just now. Though it is a bit too much of a trial and error type of technique for me, it seems to work nicely on the various displays.
I figured, since we're overlaying backgrounds, I might just as well add the info field of the larger button to the horizontal button. I've copied it 1-1, added the rgba var, and left out the info text which shows the percentage. I want to show the icon there. lo and behold:
