its an input selector
input_select:
state_home:
name: Home State
options:
- Normal
- Away
- Sleeping
- Guests
- Party
initial: Normal
icon: mdi:home
I have encountered the same problem as you, which is very headache. It took me a lot of time but I couldn’t solve it. If you have solved the problem described by you, could you share your approach? Thank you.
check out the post I made for my washer/dryer. It uses a similar timer element that should help you
Hopefully a fairly easy one for someone to guide me with please. I’m using
state-icon-active-color: "#f0b81d"
and
button-card-light-color-temp: hsl(204, 58%, 38%)
within my theme.yaml. When my lights are at full brightness, the icon colour correctly matches this desired yellow colour, however when down low at say 10%, or 20% brightness, the colour is showing as a brown colour. I’ve tried altering the hsl settings and even commented that out from my theme, however the colour remains. I’ve been searching through the theme, extra styles, and icon code that I am using, however I’m starting to go round in circles and cannot find out which value I would need to adjust, in order to achieve a different ‘transition scale’ of colour, so that at 10-20% brightness, I would see a pale yellow, rather than the current brown. The brightness attribute is correctly populating the circle with a % value, and the icon colour is changing based on brightness, I just want to alter the colour transition.
Dev tools shows:
svg {
--light-color: var(--button-card-light-color);
}
is being applied to the icon, when I look at the SVG in dev tools, and also has the brown colour box next to it, which matches the icon colour at 10%.
Extra_styles contains this:
extra_styles:
extra_styles: >
[[[
if (entity) {
if (entity.entity_id.split('.')[0] === 'light' && variables.state_on) {
// theme variable and conditions
let style = getComputedStyle(document.body),
theme_var = style.getPropertyValue('--button-card-light-color-temp'),
is_hsl = theme_var.startsWith('hsl('),
is_color_temp = entity.attributes.color_mode === 'color_temp';
if (is_hsl && is_color_temp && entity.attributes.brightness) {
// calculate lightness in hsl
let regex_pattern = /(\d+)(?!.*\d)/g,
brightness = entity.attributes.brightness / 2.54,
lightness = parseFloat(theme_var.match(regex_pattern)[0]),
min = lightness - 10,
max = lightness + 10,
calc_lightness = brightness * (max - min) / 100 + min;
var light_color = theme_var.replace(regex_pattern, calc_lightness);
}
else {
var light_color = 'var(--button-card-light-color)';
}
}
}
return `
/* * * * * * * * * * * * * * * * * *
* *
* LIGHT *
* *
* * * * * * * * * * * * * * * * * */
svg {
--light-color: ${
variables.state_on && entity.attributes.brightness
? light_color
: variables.state_on && !entity.attributes.brightness
? 'var(--state-icon-active-color);'
: 'var(--state-icon-color);' }
}
.light-color {
fill: var(--light-color);
transition: all 0.25s ease-out;
}
Can anyone help please?
Im trying to add icon of state - from my alarm on my lock button. I have only succeded to add state and not icon, anyone having an idea or can point me in right direction?
code for my button:
- type: custom:button-card
entity: lock.ytterdorr
name: Ytterdörr
hold_action:
!include popup/hall_lock.yaml
template:
- base
- loader
- icon_yale_lock
- circle_alarm
code for circle_alarm:
circle_alarm:
custom_fields:
circle: >
[[[
if (1==1) {
let radius = 20.5,
inp = states['alarm_control_panel.8124_aaa_zone_1_alarm'].state,
circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${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="8" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${inp}</text>
</svg>
`;
}
]]]
styles:
custom_fields:
circle:
- display: initial
- width: 90%
- margin: -6% -5% 0 0
- justify-self: end
- opacity: 1```
I only have mdi icons, but you can replace it with svg instead.
icon_alarm:
styles:
custom_fields:
icon:
- width: 85%
- margin-left: -5%
- color: >
[[[ return variables.state === 'disarmed' ? '#9da0a2' : '#8b3333'; ]]]
custom_fields:
icon: >
[[[
if (variables.state === 'disarmed')
return '<ha-icon icon="mdi:shield-home"></ha-icon>';
if (variables.state === 'armed_night')
return '<ha-icon icon="mdi:shield-moon"></ha-icon>';
if (variables.state === 'armed_away')
return '<svg> something </svg>';
]]]
svg or mdi doesnt matter but i could not figure it out even with this code…
Only occurred me to ask now, but is Matthias using ConBee II to turn his Synology on a Zigbee hub? Anyone else had good experience with such setup, specifically using ConBee II as a receiver instead of a Xiaomi Aqara Zigbee hub?
Hi VietNgoc,
You have a very nice setup.
Can you please share it with us?
Thanks.
I have Home Assistant OS running in an VM on Proxmox (bare-metal installation on mini-pc). For my Zigbee network I also use a ConBee II stick which I passthrough to the VM. Within Home Assistant I have set up the Zigbee2MQTT Add-On to control the Zigbee network. So far this has been running very stable for me. You can do the same on Synology.
i used the youtube_watching sensor from the github. python script runs fine in my laptop. but the commandline sensor status is unkown always. any way to debug this in home Assistant?
@VietNgoc Hi, I noticed your dashboard has a shower icon - is that an animated svg? If so, would you mind sharing the code for it please? I’m struggling trying to find or make an animated svg to represent when my shower state is on. Thanks!
I already have a new icon, but only with a simple animation. I hope you like it.
icon_shower:
styles:
custom_fields:
icon:
- filter: >
[[[ return variables.state_on
? 'drop-shadow(2px 1px 5px black)'
: 'grayscale(1) brightness(0.7)';
]]]
- margin-top: -10%
- width: 95%
custom_fields:
icon: >
[[[
let state = variables.state_on && variables.timeout < 50000 ? 'on' : null;
return `
<svg viewBox="-23.04 -23.04 174.08 174.08" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="iconify iconify--noto" transform="scale(-1 1)" stroke="#000" stroke-width=".001">
<style>
@keyframes on {
0%,
100% {
transform: rotate(0deg);
transform-origin: top;
}
10% {
transform: rotate(2deg);
}
20%,
40%,
60% {
transform: rotate(-4deg);
}
30%,
50%,
70% {
transform: rotate(4deg);
}
80% {
transform: rotate(-2deg);
}
90% {
transform: rotate(2deg);
}
}
.on {
animation: on 2s linear both infinite;
}
</style>
<rect x="-23.04" y="-23.04" width="174.08" height="174.08" rx="87.04" fill="#f0f0f0" opacity="0.05" stroke="none"/>
<g stroke-linecap="round" stroke-linejoin="round" stroke="#CCC" stroke-width=".256"/>
<path d="M100.87 15.07 87.94 27.95l10.11 10.11 13.03-13.04c3.64-3.64 7.98-6.12 12.92-7.22V4.67c-8.78.47-16.88 4.16-23.13 10.4z" fill="#bdbdbd"/>
<path d="M96.59 30.45c-14.37-14.37-37.92-14.13-52.07-.18l52.25 52.25c13.95-14.15 14.19-37.7-.18-52.07z" fill="#bdbdbd"/>
<path d="M107.74 28.62c-.21-.79-1.84-3.67-4.07-5.83s-4.75-3.72-6.94-4.17c-4.35-.9-6.82 2.28-9.57 5.03 3.41 1.7 6.6 3.96 9.43 6.8 2.45 2.45 4.47 5.18 6.08 8.08-.13-.23 4.03-4.03 4.03-4.03 1.48-1.5 1.6-3.8 1.04-5.88z" fill="#78909c"/>
<path d="M96.59 30.45c-14.37-14.37-37.92-14.13-52.07-.18l52.25 52.25c13.95-14.15 14.19-37.7-.18-52.07z" fill="#bdbdbd"/>
<path d="M83.74 41.83C67.75 27.39 53.9 23.61 53.9 23.61c-1.07.44-1.97.86-2.78 1.31 0 0 11.13 4.66 28.22 20.36s24 28.51 24 28.51c.53-1.08.99-2.28 1.45-3.7-.01 0-2.1-11.14-21.05-28.26z" fill="#9e9e9e"/>
<path d="M81.17 44.73c17.59 16.13 28.11 32.83 24.01 37.75-2.9 3.48-6.52 3.2-6.52 3.2-7.77-1.84-20.51-12.25-33.16-23.85-12.87-11.8-26.09-27.08-26.71-29.7 0 0-.79-2.69-.09-4.63.88-2.43 2.79-3.42 2.79-3.42 6.74-3.68 22.09 4.52 39.68 20.65z" fill="#bdbdbd"/>
<ellipse transform="rotate(-47.48 69.275 57.34)" cx="69.27" cy="57.34" rx="7.05" ry="41.25" fill="#757575"/>
<path d="M68.13 22.25c-.97.39-1.85 1.25-1.9 2.29-.06 1.29 1.98 2.63 4.39 2.21 3.91-.69 7.16-.55 8.21-.37.56.1 2.62.1 2.62-1.19 0-1.32-2.05-2.19-2.58-2.4-3-1.19-7.52-1.82-10.74-.54zm-19.19 4.31c-.34 1.54 2.71 2.53 3.39 2.73 1.41.43 5.26 1.84 5.9 1.32.45-.37.53-1.44-3.52-3.7-3.21-1.8-5.44-1.81-5.77-.35z" fill="#dfecf5"/>
<g id="water" class="${state}">
<radialGradient id="a" cx="79.276" cy="48.098" r="123.225" gradientTransform="matrix(-.7157 .6984 -.1115 -.1142 141.374 -1.776)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#4fc3f7"/>
<stop offset=".83" stop-color="#4fc3f7" stop-opacity="0"/>
</radialGradient>
<path d="M6.71 120.14c-2.09-2.09-1.68-7.4.66-9.49l58.66-52.79a2.71 2.71 0 0 1 3.79 0 2.701 2.701 0 0 1 .04 3.82l-54.26 57.4c-2.47 2.6-6.8 3.16-8.89 1.06z" fill="url(#a)"/>
<linearGradient id="b" gradientUnits="userSpaceOnUse" x1="69.927" y1="58.047" x2="22.517" y2="111.451">
<stop offset="0" stop-color="#4fc3f7"/>
<stop offset=".83" stop-color="#4fc3f7" stop-opacity="0"/>
</linearGradient>
<path d="M70.27 58.5c-31.63 27.37-54.62 58.91-55.28 61.14 0 0 .56-.52.59-.56l54.26-57.4c.86-.87.99-2.16.43-3.18z" fill="url(#b)"/>
<radialGradient id="c" cx="61.263" cy="35.447" r="94.412" gradientTransform="matrix(-.7902 .6129 -.0978 -.1261 118.085 7.166)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#4fc3f7"/>
<stop offset=".83" stop-color="#4fc3f7" stop-opacity="0"/>
</radialGradient>
<path d="m9.41 77.98 44.76-31.47c1.17-.9 2.84-.7 3.76.45.93 1.16.74 2.86-.42 3.8L13 87.76c-2.9 2.41-6.26 3.28-8.4-.51-2.19-3.85 2.21-7.44 4.81-9.27z" fill="url(#c)"/>
<linearGradient id="d" gradientUnits="userSpaceOnUse" x1="53.324" y1="44.822" x2="14.231" y2="87.377" gradientTransform="rotate(6.88 23.825 79.01)">
<stop offset="0" stop-color="#4fc3f7"/>
<stop offset=".83" stop-color="#4fc3f7" stop-opacity="0"/>
</linearGradient>
<path d="M58.31 47.65c-.19-.04-34.81 23.68-46.16 40.8L57.5 50.76c.96-.76 1.24-2.03.81-3.11z" fill="url(#d)"/>
<radialGradient id="e" cx="43.953" cy="24.996" r="70.073" gradientTransform="matrix(-.8551 .5185 -.0827 -.1365 93.478 13.157)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#4fc3f7"/>
<stop offset=".83" stop-color="#4fc3f7" stop-opacity="0"/>
</radialGradient>
<path d="M5.09 62.38C3.09 58 7.7 55.9 7.7 55.9l35.55-19.75c1.25-.77 2.9-.4 3.69.85a2.7 2.7 0 0 1-.82 3.73L12.1 63.39s-4.84 3.75-7.01-1.01z" fill="url(#e)"/>
<linearGradient id="f" gradientUnits="userSpaceOnUse" x1="38.337" y1="32.629" x2="9.822" y2="63.669" gradientTransform="rotate(12.933 15.624 72.315)">
<stop offset="0" stop-color="#4fc3f7"/>
<stop offset=".83" stop-color="#4fc3f7" stop-opacity="0"/>
</linearGradient>
<path d="M47.25 37.72c-.19-.06-18.51 9.7-36.37 26.41l35.23-23.4a2.71 2.71 0 0 0 1.14-3.01z" fill="url(#f)"/>
<radialGradient id="g" cx="100.706" cy="64.392" r="97.119" gradientTransform="matrix(-.6174 .7867 .1255 .0985 141.612 -26.248)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#4fc3f7"/>
<stop offset=".83" stop-color="#4fc3f7" stop-opacity="0"/>
</radialGradient>
<path d="m48.38 117.92 32.7-46.36c.9-1.17.69-2.9-.45-3.76-1.19-.9-2.86-.74-3.8.42L38.6 114.34c-2.41 2.9-3.28 6.26.51 8.4 3.85 2.18 7.44-2.22 9.27-4.82z" fill="url(#g)"/>
<linearGradient id="h" gradientUnits="userSpaceOnUse" x1="95.906" y1="76.972" x2="56.6" y2="119.758" gradientTransform="rotate(-3.078 -13.274 321.193)">
<stop offset="0" stop-color="#4fc3f7"/>
<stop offset=".83" stop-color="#4fc3f7" stop-opacity="0"/>
</linearGradient>
<path d="M81.11 68.3c-.5.51-26.25 33.02-34.47 51.84l34.38-48.5c.8-.98.84-2.51.09-3.34z" fill="url(#h)"/>
<radialGradient id="i" cx="87.278" cy="48.666" r="73.408" gradientTransform="matrix(-.5065 .8622 .1376 .0808 133.433 -8.723)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#4fc3f7"/>
<stop offset=".83" stop-color="#4fc3f7" stop-opacity="0"/>
</radialGradient>
<path d="M64.89 122.83c4.37 2 6.48-2.61 6.48-2.61L92.3 81.38c.77-1.25-.09-3-.85-3.69-.82-.75-2.93-.44-3.73.82l-23.85 37.31c.01 0-3.74 4.84 1.02 7.01z" fill="url(#i)"/>
<linearGradient id="j" gradientUnits="userSpaceOnUse" x1="84.048" y1="59.372" x2="53.924" y2="92.163" gradientTransform="rotate(-16.266 156.843 42.953)">
<stop offset="0" stop-color="#4fc3f7"/>
<stop offset=".83" stop-color="#4fc3f7" stop-opacity="0"/>
</linearGradient>
<path d="M91.71 77.92c-.19.04-13.16 19.47-20.59 42.77l20.83-38.64c1.13-1.51.57-3.31-.24-4.13z" fill="url(#j)"/>
</g>
</svg>
`
]]]
8 Likes
Thank you, that’s great 
Do you use any window or door icons that are either animated or different to the default HA icons?
Noticed that it was a comment on a tip from @mobiustorr
What do I do wrong if - despite having added overflow: hidden my swipe looks like this:
Edit: @Mattias_Persson _ I tried to copy the Media area setup to the vardagsrum area as I plan to use that for all my lights. Since I have more than four lights to control, I want to use the swipe card. However, once I remove the conditional card from the code, something happens with the custom buttons for the lights. They become larger than the once for the neighboring areas and they are cut off at the bottom? Any good ideas here?
My mini graph button is not populated. Instead it says please provide the entities a list. This is my button:
type: custom:button-card
entity: sensor.snitt_temperatur
name: Temperatur
template:
- base
- temperature
- icon_temp
Starnge thing is that for the pop-up, I Use mini-graph cards and they work flawlessly.
Any ideas?
Hey @VietNgoc would you mind publishing your Dashboard?
I would like to have a similiar layout as you! 
Thanks a lot Mate