What exactly is the gray state in the color sensor?
I’ve personally never seen the Nest Protect light up grey.
I thought basing the picture entity off of the ‘Ok’, ‘Warning’ or ‘Emergency’ state and also having the colour state in the glance card gives me double protection any of the possible states.
On second thoughts ‘Grey’ could be the ‘Pathway’ feature if you have it enabled.
would make sense maybe… I need to find a way to trigger it to confirm…
I prefer yours on second thought…
Just need a gray one like this 
Thanks @noodlemctwoodle and @sfnetwork for the inputs - nice work 
For the grey I used an image editor to desaturate one of the coloured images.
@sfnetwork how did you define the color status? in the default config there is no sensor called collor status.
1 Like
Hi, for the latest custom component for Nest Protect (GitHub - iMicknl/ha-nest-protect: Nest Protect integration for Home Assistant. This will allow you to integrate your smoke, heat, co and occupancy status real-time in HA.) I have written a lovelace view based on the icons shared in this topic.
I have set an animation to have them blink in case of heat, smoke or co detection. Code below
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
Enjoy
Since I had 2 protects that were having a low battery, used the yellow color to have them light up
1 Like
How?
Pretty cool.
Thank you.
Mark
Nice.
Can you please share your code?
regards,
Sander
Sure, here your go
type: custom:auto-entities
card:
square: false
columns: 5
type: grid
card_param: cards
filter:
include:
- entity_id: /binary_sensor.rookmelder_.*smoke|binary_sensor.smoke_sensor_.*/
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/honeywell-grey.png");
}
50% {
background-image: url("/local/images/protect/honeywell-red.png");
}
100% {
background-image: url("/local/images/protect/honeywell-grey.png");
}
}
@keyframes bgswap_yellow {
0% {
background-image: url("/local/images/protect/honeywell-grey.png");
}
50% {
background-image: url("/local/images/protect/honeywell-yellow.png");
}
100% {
background-image: url("/local/images/protect/honeywell-grey.png");
}
}
@keyframes bgswap_grey {
0% {
background-image: url("/local/images/protect/honeywell-grey.png");
}
100% {
background-image: url("/local/images/protect/honeywell-grey.png");
}
}
styles:
card:
- animation: >
[[[ if (entity.state == 'on') return 'bgswap_red 2s linear
infinite'; else if
(states[entity.entity_id.replace('binary_sensor.smoke_sensor_','sensor.battery_')].state
< 15) return 'bgswap_yellow 2s linear infinite'; else
return 'bgswap_grey 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
- entity_id: '*nest_protect*'
attributes:
device_class: smoke
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_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
sort:
method: name
numeric: false
reverse: false
Hi,
Your build is seriously cool. Thank you for sharing!
Being a bit of a noob, would you be able to explain how you have clustered the sensors? Is this using group helper and binary sensor approach? Would you possibly have time to explain the steps you took to create:
"/binary_sensor.rookmelder_.smoke|binary_sensor.smoke_sensor_./
and
‘‘nest_protect’’.
Humble apologies if I am being really dumb…
Hi Richie, no need to apologize, everyone needs to learn 
in fact, it is a regular expression which search for the pattern that I specified.
As I have binary sensors that have an entity_id = binary_sensor.rookmelder_… and smoke_sensor_… which are Xiaomi ones
And the ones from nest_protect (which need another UI image).
So it is not a group helper, it is just filtering on the entity_id’s.
Hope this clarifies some things? This is the card I’m using with the explanation: GitHub - thomasloven/lovelace-auto-entities: 🔹Automatically populate the entities-list of lovelace cards
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
are the images accessible?
/local/images/protect/nestprotect-grey.png
which means that the nestprotect-grey.png etc images need to be store in /config/www/images/protect/
Hi
Again, thank you for replying so quickly and pointing out what an idiot I am!
I changed the folder structure and didn’t update the code (teaches me to do things when I am really tired).
It is working brilliantly now:
I still need to do some work on the dashboard but it is getting there.
I would love to be able to single click on each alarm and be able to bring up a “more info” of battery life, sensor checks etc. I really do not know much about the auto entities card and not sure if this is possible.
I am also presuming from what is exposed by the nest protect integration that you cannot silence the alarm from within HA? Do you happen to know if that is the case?
Thank you again for all your help, I really appreciate it!
There are different options, you could either create a specific page with the battery information, or create a group with the battery information in and then use the “more-info” on this group.
I have for example in each room the details of the protect
@geertmeersman thank you so much for this and apologies for my slow reply. I am not that used to the community yet. I have managed to get something very similar to work in a browser_mod popup with the lower row coming in conditionally based on pressing the smoke alarm icon. Its no longer autoentities as I couldnt get the combination of browser_mod popup, autoentities and conditional cards to work.
Thanks again for your help!