Need help customizing a lovelace card for Nest Protect

Configuration
1

Hi, I’m not advanced enough to make what I want work (if possible) so I’m asking for help :slight_smile:

2018-12-01%2012_30_32-Home%20Assistant
2018-12-01%2012_30_32-Home%20Assistant505×585 22.6 KB

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).
Would this be possible? And if so, could anyone help me with this?

2

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.

image

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.

3

This is the best I could come up with using the Lovelace UI Picture Entity Card

image

- 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
4

Awesome! Thanks.
Based on your idea, I created the same but using the color sensor for the images.
Better than what I wanted originally, thanks again!!!

nest%20protect
nest%20protect520×558 87.6 KB

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):

nestprotect-gray
nestprotect-gray512×512 108 KB
nestprotect-blue
nestprotect-blue512×512 276 KB
nestprotect-yellow
nestprotect-yellow512×512 276 KB
nestprotect-red
nestprotect-red512×512 276 KB
nestprotect-green
nestprotect-green512×512 276 KB

4 Likes
5

Perfect glad to help.

I have uploaded the changes to me GitHub Repo with all the pictures I used.

1 Like
6

What exactly is the gray state in the color sensor?

7

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.

8

On second thoughts ‘Grey’ could be the ‘Pathway’ feature if you have it enabled.

9

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 :wink:

2018-12-02%2008_54_14-Home%20Assistant
2018-12-02%2008_54_14-Home%20Assistant505×554 85.9 KB

10

Thanks @noodlemctwoodle and @sfnetwork for the inputs - nice work :slight_smile:
For the grey I used an image editor to desaturate one of the coloured images.

nest-protect-grey
nest-protect-grey512×512 169 KB

11

@noodlemctwoodle, I just found this and it helped immensely. Thanks :slight_smile:

12

@SP410 Perfect, glad to have helped!

13

@sfnetwork how did you define the color status? in the default config there is no sensor called collor status.

1 Like
14

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
protect

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

15

Since I had 2 protects that were having a low battery, used the yellow color to have them light up

nest_protect_low_battery

1 Like
16

How?

Pretty cool.

Thank you.

Mark

17

Nice.

Can you please share your code?

regards,

Sander

18

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
19

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…

20

Hi Richie, no need to apologize, everyone needs to learn :wink:

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