I’d like to change the transparency of a button background based on the brightness of a light. Do we have a default method for that?
The button below is toggling a boolean to set ‘glow mode’ or pulsating mode. meaning, it turns on a set of lights, runs a few scripts so they increase and decrease their brightness.
Turning off the boolean, stops the pulsating, but doesnt turn the lights off. That is on purpose.
What Id love to do is set the background transparency/opacity in the ‘off’ state of the boolean to reflect the actual brightness of the light.kerststerren.
type: custom:button-card
entity: input_boolean.pulsate_light
variables:
duration: >
[[[ return states['input_number.transition_time'].state; ]]]
tooltip: >
[[[ return entity.state === 'on'? 'Fixed lights' :'Breathing lights'; ]]]
show_name: false
size: 95%
aspect_ratio: 1/1
state:
- value: 'on'
icon: mdi:hexagram
styles:
card:
- background-color: ivory
- animation: >
[[[ return 'glow ' + variables.duration +'s ease ' + variables.duration +
's infinite normal forwards' +
',border-color ' + variables.duration +'s ease ' + variables.duration +
's infinite normal forwards'; ]]]
# - border: '2px dotted #B71515'
icon:
- color: '#B71515'
- animation: rotate_icon 2s, flash_icon 2s 1s infinite ease
- value: 'off'
styles:
card:
- background-color: saddlebrown
- border: 2px double green
- opacity: some method based on states['light.kerststerren'].attributes.brightness
icon:
- color: >
[[[ return (states['light.kerststerren'].state == 'on')
? 'rgb(' + states['light.kerststerren'].attributes.rgb_color + ')'
: 'green'; ]]]
icon: mdi:hexagram
or maybe its just a simple as dividing that by / 255.0 ?
I did test something like:
- background-color: rgba(139, 69, 19, 0.5)
which is ok-ish, but trying to get that a number from the actual state is more of a challenge:
- background-color: >
[[[ return 'rgba(139, 69, 19,' + 0.1 + ')'; ]]] /* saddlebrown */
doesnt work, let alone
- background-color: >
[[[ return 'rgba(139, 69, 19,' + states['light.kerststerren'].attributes.brightness/ 255 + ')'; ]]] /* saddlebrown */
would appreciate a helping hand very much, thx
update
this seems to work after all:
card:
- background-color: >
[[[ var bri = states['light.kerststerren'].attributes.brightness;
return bri ? 'rgba(139, 69, 19,' + states['light.kerststerren'].attributes.brightness/ 255 + ')'
: 'saddlebrown'; ]]]
Which can further be shortened to
card:
- background-color: >
[[[ var bri = states['light.kerststerren'].attributes.brightness;
return bri ? 'rgba(139, 69, 19,' + bri/255 + ')'
: 'saddlebrown'; ]]]
nice. full card finally:
type: custom:button-card
entity: input_boolean.pulsate_light
variables:
duration: >
[[[ return states['input_number.transition_time'].state; ]]]
tooltip: >
[[[ return entity.state === 'on'? 'Fixed lights' :'Breathing lights'; ]]]
hold_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.kerststerren
show_name: false
size: 95%
aspect_ratio: 1/1
state:
- value: 'on'
icon: mdi:hexagram
styles:
card:
- background-color: ivory
- animation: >
[[[ return 'glow ' + variables.duration +'s ease ' + variables.duration +
's infinite normal forwards' +
',border-color ' + variables.duration +'s ease ' + variables.duration +
's infinite normal forwards'; ]]]
# - border: '2px dotted #B71515'
icon:
- color: '#B71515'
- animation: rotate_icon 2s, flash_icon 2s 1s infinite ease
- value: 'off' # glow is 'off' but lights can still be 'on', so templating is required
styles:
card:
- background-color: >
[[[ var bri = states['light.kerststerren'].attributes.brightness;
return bri ? 'rgba(139, 69, 19,' + bri/255 + ')'
: 'saddlebrown'; ]]]
- border: >
[[[ return (states['light.kerststerren'].state == 'on')
? '2px double red' : '2px dotted green'; ]]]
icon:
- color: >
[[[ return (states['light.kerststerren'].state == 'on')
? 'rgb(' + states['light.kerststerren'].attributes.rgb_color + ')'
: 'green'; ]]]
icon: mdi:hexagram
extra_styles: |
@keyframes border-color {
0% {
border: 2px dotted green;
}
20% {
border: 1px dashed saddlebrown;
}
40% {
border: 2px dotted #B71515;
}
50% {
border: 1px dashed green;
}
60% {
border: 2px dotted saddlebrown;
}
70% {
border: 1px dashed #B71515;
}
80% {
border: 2px dotted green;
}
90% {
border: 1px dashed saddlebrown;
}
100% {
border: 2px dotted #B71515;
}
}
@keyframes glow {
0% {
box-shadow: 0px 0px 0px 0px #B71515;
}
20% {
box-shadow: 0px 0px 2px 2px green;
}
40% {
box-shadow: 0px 0px 4px 4px green;
}
50% {
box-shadow: 0px 0px 6px 6px green;
}
60% {
box-shadow: 0px 0px 8px 8px #B71515;
}
70% {
box-shadow: 0px 0px 6px 6px green;
}
80% {
box-shadow: 0px 0px 4px 4px green;
}
90% {
box-shadow: 0px 0px 2px 2px #B71515;
}
100% {
box-shadow: 0px 0px 0px 0px #B71515;
}
}
@keyframes flash_icon {
0% {
color: green;
}
24% {
color: green;
}
40% {
color: green;
}
75% {
color: #B71515;
}
100% {
color: #B71515;
}
}
@keyframes rotate_icon {
0% {
transform: rotate(0);
}
100% {
transform: rotate(3.142rad);
}
}
