Hi,
can someone help me out with this code.
I have a google nest protect that i want to make as a button card in mattias config, i need help with the code.
im thinking something like this:
But i needs to be blinking red for exempel when its a fire/smoke detected and so on…
And i dont want 4 row like in the link, only one card button row to fit mattias config. Can be design by somene here.
Link to the code
type: custom:auto-entities
card:
square: false
columns: 4
type: grid
card_param: cards
filter:
include:
- entity_id: '*nest_protect*'
attributes:
device_class: heat
options:
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_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('heat','smoke')].state ==
'off' && states[entity.entity_id.replace('heat','co')].state
== 'off') 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
sort:
method: name
numeric: false
reverse: false
