Mattias, this is almost working perfectly! The only issue now is the light icon color. I have updated the button template code to your latest which includes the fill=“var(–light-color)” however I am getting a blue colour instead of the actual light colour. These are Philips hue lights but some of the ones I have do not have ‘hs’ functionality, only color_temp, maybe this is the issue? I have included a picture and the code below. Thank you!
#################################################
# #
# BASE #
# #
#################################################
base:
variables:
state: >
[[[ return entity === undefined || entity.state; ]]]
timeout: >
[[[ return entity === undefined || Date.now() - Date.parse(entity.last_changed); ]]]
consider_on: >
[[[
var state = entity === undefined || entity.state;
return (
state == 'on' ||
state == 'home' ||
state == 'cool' ||
state == 'fan_only' ||
state == 'playing'
);
]]]
aspect_ratio: 1/1
show_state: true
show_icon: false
state_display: >
[[[ if (variables.state === true) return 'Okänt'; ]]]
tap_action:
ui_sound_tablet: |
[[[
const screensaver = states['switch.galaxy_tab_a_screensaver'] === undefined ||
states['switch.galaxy_tab_a_screensaver'].state;
if (variables.state === 'off' && screensaver === 'off') {
hass.callService('media_player', 'play_media', {
entity_id: 'media_player.c2080cea_6627150a',
media_content_id: '/local/sound/on.m4a',
media_content_type: 'music'
});
}
if (variables.state === 'on' && screensaver === 'off') {
hass.callService('media_player', 'play_media', {
entity_id: 'media_player.c2080cea_6627150a',
media_content_id: '/local/sound/off.m4a',
media_content_type: 'music'
});
}
]]]
animation_card: |
[[[
const animation_speed_ms = 900;
const animation = `card_bounce ${animation_speed_ms}ms cubic-bezier(0.22, 1, 0.36, 1)`;
this.shadowRoot.getElementById("card").style.animation = animation;
window.setTimeout(() => {
this.shadowRoot.getElementById("card").style.animation = "none";
}, animation_speed_ms)
]]]
action: toggle
haptic: medium
styles:
grid:
- grid-template-areas: |
"icon circle"
"n n"
"s s"
- grid-template-columns: repeat(2, 1fr)
- grid-template-rows: auto repeat(2, min-content)
- gap: 2%
- align-items: start
name:
- justify-self: start
- line-height: 115%
state:
- justify-self: start
- line-height: 115%
card:
- font-family: Sf Display
- border-radius: var(--custom-button-card-border-radius)
- -webkit-tap-highlight-color: rgba(0,0,0,0)
- transition: none
- padding: 10%
- --mdc-ripple-color: >
[[[
return variables.consider_on ?
'rgb(0, 0, 0)' :
'rgba(255, 255, 255, 0.3)';
]]]
- color: >
[[[
return variables.consider_on ?
'rgba(0, 0, 0, 0.6)' :
'rgba(255, 255, 255, 0.3)';
]]]
- background-color: >
[[[
return variables.consider_on ?
'rgba(255, 255, 255, 0.8)' :
'rgba(115, 115, 115, 0.2)';
]]]
extra_styles: |
[[[
if (entity) {
let hs = entity.attributes.hs_color == undefined;
let h = hs || entity.attributes.hs_color[0];
let s = hs || entity.attributes.hs_color[1];
let l_min = 28;
let l_max = 48;
let l_calc =
((entity.attributes.brightness / 2.54) * (l_max - l_min)) / 100 + l_min;
var light_color =
entity.attributes.color_mode === 'color_temp'
? `hsl(204, 58%, ${l_calc}%);`
: `hsl(${h}, ${s}%, ${l_calc}%);`;
}
return `
svg {
--light-color:
${ variables.state === 'on' && entity.attributes.brightness != undefined
? light_color
: variables.state === 'on' && entity.attributes.brightness == undefined
? 'var(--state-icon-active-color);'
: 'var(--state-icon-color);'
}
}
#name, #state {
font-size: 1.34vw;
letter-spacing: 0.05vw;
}
/* portrait */
@media screen and (max-width: 1200px) {
#name, #state {
font-size: 2vw;
letter-spacing: 0.05vw;
}
}
/* phone */
@media screen and (max-width: 800px) {
#name, #state {
font-size: 3.1vw;
letter-spacing: 0.12vw;
}
}
@keyframes card_bounce {
0% {
transform: scale(1);
}
15% {
transform: scale(0.9);
}
25% {
transform: scale(1);
}
30% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
`
]]]
icon_pendants_3:
styles:
custom_fields:
icon:
- width: 187%
- margin-left: '-3%'
- margin-top: 1%
custom_fields:
icon: >
[[[
if (entity.state == 'on') {
return `
<svg viewBox="0 0 50 50">
<style>
@keyframes on {
0% {transform: scale(0.85);}
20% {transform: scale(1.1);}
40% {transform: scale(0.95);}
60% {transform: scale(1.03);}
80% {transform: scale(0.97);}
100% {transform: scale(1);}}.on{animation: on 0.8s; transform-origin: center;}
</style>
<path fill="var(--light-color)" d="M12 17.8c-6.7 0-10.4-1.3-10.4-2 0-.5 2.2-1.4 6.3-1.8 1.7-.1 3.6-.1 5.5-.1 5.8.2 9 1.3 9 1.9 0 .7-3.7 2-10.4 2m0-2.6c-.2 0-2.1 0-2.1.8s1.9.8 2.1.8 2.2 0 2.2-.8-2-.8-2.2-.8z"/>
<g class="on"><path fill="#9da0a2" d="M12 8.8c-3.9 0-11.4.6-11.4 3V16c0 2 7.5 2.8 11.4 2.8s11.1-.6 11.4-2.8v-4.2c0-2.4-7.5-3-11.4-3zm0 9c-6.7 0-10.4-1.3-10.4-2 0-.5 2.2-1.4 6.3-1.8 1.7-.1 3.6-.1 5.5-.1 5.8.2 9 1.3 9 1.9 0 .7-3.7 2-10.4 2m0-2.6c-.2 0-2.1 0-2.1.8s1.9.8 2.1.8 2.2 0 2.2-.8-2-.8-2.2-.8zm-.6-8v1.6h1V7.2c1.2-.1 2.5-.4 2.5-1.3v-.4c0-1-1.6-1.3-3-1.3s-3 .3-3 1.3v.4c0 .8 1.3 1.2 2.5 1.3z"/>
</svg>
`;
}
if (entity.state == 'off') {
return `
<svg viewBox="0 0 50 50">
<path fill="#9da0a2" d="M12 8.8c-3.9 0-11.4.6-11.4 3V16c0 2 7.5 2.8 11.4 2.8s11.1-.6 11.4-2.8v-4.2c0-2.4-7.5-3-11.4-3zm0 9c-6.7 0-10.4-1.3-10.4-2 0-.5 2.2-1.4 6.3-1.8 1.7-.1 3.6-.1 5.5-.1 5.8.2 9 1.3 9 1.9 0 .7-3.7 2-10.4 2m0-2.6c-.2 0-2.1 0-2.1.8s1.9.8 2.1.8 2.2 0 2.2-.8-2-.8-2.2-.8zm-.6-8v1.6h1V7.2c1.2-.1 2.5-.4 2.5-1.3v-.4c0-1-1.6-1.3-3-1.3s-3 .3-3 1.3v.4c0 .8 1.3 1.2 2.5 1.3z"/>
</svg>
`;
}
]]]
