Hi,
Thank you so much for such a rapid reply. I have managed to get the basic layout working but the images do not pull through.
I enclose an image of what the card looks like in my setup here:
I have used your code but removing bits that relate to your non-Nest smoke alarms. I do not want to burden you but would it be possible to take a look and see where I am going wrong?
I enclose the code I have used below.
type: vertical-stack
cards:
- type: custom:button-card
show_name: false
show_icon: false
aspect_ratio: 1/1
extra_styles: |
@keyframes bgswap_red {
0% {
background-image: url("/local/images/protect/nestprotect-grey.png");
}
50% {
background-image: url("/local/images/protect/nestprotect-red.png");
}
100% {
background-image: url("/local/images/protect/nestprotect-grey.png");
}
}
@keyframes bgswap_green {
0% {
background-image: url("/local/images/protect/nestprotect-grey.png");
}
50% {
background-image: url("/local/images/protect/nestprotect-green.png");
}
100% {
background-image: url("/local/images/protect/nestprotect-grey.png");
}
}
@keyframes bgswap_yellow {
0% {
background-image: url("/local/images/protect/nestprotect-grey.png");
}
50% {
background-image: url("/local/images/protect/nestprotect-yellow.png");
}
100% {
background-image: url("/local/images/protect/nestprotect-grey.png");
}
}
@keyframes bgswap_grey {
0% {
background-image: url("/local/images/protect/nestprotect-grey.png");
}
100% {
background-image: url("/local/images/protect/nestprotect-grey.png");
}
}
styles:
card:
- animation: >
[[[ if (states[entity.entity_id.replace('smoke','heat')].state ==
'off' && states[entity.entity_id.replace('smoke','co')].state ==
'off')
{
if (states[entity.entity_id.replace('_smoke_status','_battery_health')].state ==
'on')
return 'bgswap_yellow 2s linear infinite';
else
return 'bgswap_grey 2s linear infinite';
}
else return
'bgswap_red 2s linear infinite';]]]
- background-size: cover
entity: this.entity_id
- show_name: true
show_icon: false
type: custom:button-card
tap_action:
action: toggle
entity: this.entity_id
styles:
name:
- font-size: 12px
It is such a cool build, I would really love to replicate it. However, please do not worry if it is a burden to look through…but any help would be much appreciated.
BW
Richie
