Hi, I’m not advanced enough to make what I want work (if possible) so I’m asking for help
I have 2 Nest Protect in my house, I’ve setup the cards and alerts but there is one more sensor I find interesting:* color_status: gray, green, yellow, or red . Indicates device status by color in the Nest app UI. It is an aggregate condition for battery+smoke+CO states, and reflects the actual color indicators displayed in the Nest app.
My idea would be to configure automations to change the entire card with the color the sensor (card background in themes).
I’m not sure its possible without a Custom UI as mentioned in this thread . I’m running Hass.io so I’m not sure this UI is compatible or not.
I’ve tried several suggestions on the forum without success as I also have the Nest protects.
customize:
sensor.upstairs_nest_protect_smoke_status:
icon: mdi:fire
templates:
hs_color: >
if (state === Ok) return 'rgb(124, 252, 0)';
else return 'rgb(255, 0, 0)';
or
customize:
sensor.upstairs_nest_protect_smoke_status:
icon: mdi:fire
templates:
rgb_color: >
if (state === Ok) return 'rgb(124, 252, 0)';
else return 'rgb(255, 0, 0)';
Neither config appears to make any change to the Icon colour in either LoveLace UI or the old interface. Someone else maybe able to advise on a solution.
This is the best I could come up with using the Lovelace UI Picture Entity Card
- type: vertical-stack
cards:
- type: glance
title: Nest Protect
entities:
- entity: binary_sensor.upstairs_nest_protect_online
name: Online
- entity: sensor.upstairs_nest_protect_battery_health
name: Battery
- entity: sensor.upstairs_nest_protect_color_status
name: Status
- type: horizontal-stack
cards:
- type: picture-entity
entity: sensor.upstairs_nest_protect_smoke_status
name: Smoke
state_image:
"Ok": /local/nest-icons/nest-protect-green.png
"Warning": /local/nest-icons/nest-protect-yellow.png
"Emergency": /local/nest-icons/nest-protect-red.png
- type: picture-entity
entity: sensor.upstairs_nest_protect_co_status
name: CO
state_image:
"Ok": /local/nest-icons/nest-protect-green.png
"Warning": /local/nest-icons/nest-protect-yellow.png
"Emergency": /local/nest-icons/nest-protect-red.png
This card type will change the picture for both CO and Smoke depending on ‘state’
3 Likes
noodlemctwoodle:
type: picture-entity entity: sensor.upstairs_nest_protect_smoke_status name: Smoke state_image: “Ok”: /local/nest-icons/nest-protect-green.png “Warning”: /local/nest-icons/nest-protect-yellow.png “Emergency”: /local/nest-icons/nest-protect-red.png
Awesome! Thanks.
Here are the cards (if anyone interested):
- id: fe51af78f6e5485e9318cbc92e11f559 # Automatically created id
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: picture-entity
entity: sensor.1er_etage_nest_protect_color_status
name: Nest-Protect 1er
state_image:
"green": /local/nest-protect/nestprotect-green.png
"yellow": /local/nest-protect/nestprotect-yellow.png
"red": /local/nest-protect/nestprotect-red.png
"gray": /local/nest-protect/nestprotect-gray.png
- type: picture-entity
entity: sensor.basement_nest_protect_color_status
name: Nest-Protect sous-sol
state_image:
"green": /local/nest-protect/nestprotect-green.png
"yellow": /local/nest-protect/nestprotect-yellow.png
"red": /local/nest-protect/nestprotect-red.png
"gray": /local/nest-protect/nestprotect-gray.png
- type: glance
title: Nest-Protect
columns: 4
show_header_toggle: true
entities:
- binary_sensor.1er_etage_nest_protect_online
- sensor.1er_etage_nest_protect_smoke_status
- sensor.1er_etage_nest_protect_co_status
- sensor.1er_etage_nest_protect_battery_health
- binary_sensor.basement_nest_protect_online
- sensor.basement_nest_protect_smoke_status
- sensor.basement_nest_protect_co_status
- sensor.basement_nest_protect_battery_health
and my images (manually did the circles so it pops up more than the actual photo witht the ring color):
4 Likes
Perfect glad to help.
I have uploaded the changes to me GitHub Repo with all the pictures I used.
1 Like
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…
hijinx
March 29, 2019, 5:23pm
10
Thanks @noodlemctwoodle and @sfnetwork for the inputs - nice work
SP410
November 3, 2019, 4:48am
11
@noodlemctwoodle , I just found this and it helped immensely. Thanks
@SP410 Perfect, glad to have helped!
stef1411
June 9, 2022, 12:07pm
13
@sfnetwork how did you define the color status? in the default config there is no sensor called collor status.
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
