Simple Lovelace presence cards for Home Assistant

Filed under:

I came up with these really minimal Lovelace cards to represent who is home, based on person entities in Home Assistant.

Screenshot 2020-08-20 at 14.48.04

It's based on this excellent button-card for Lovelace. I find the config options for button-card to be a bit overwhelming though.

Screenshot 2020-08-20 at 14.48.14

The badge indicates how much battery there is left for an entity tracking the person entity. It will change to red if it drops below 20 percent.

Config for 1 person looks like this, I then stack them with vertical-stack to make it ✨ NICE ON MOBILE ✨:

aspect_ratio: 3/1
custom_fields:
  battery: |
    [[[
      return `${
        states['sensor.thibaults_iphone_battery_level_2'].state
      }`
    ]]]
entity: person.thibault
layout: icon_name
show_entity_picture: true
show_name: true
state:
  - name: "🏡 Thibault (Home)"
    styles:
      name:
        - color: '#7DDA9F'
    value: home
  - name: "🏃‍♂️ Thibault (Away)"
    styles:
      name:
        - color: '#93ADCB'
    value: not_home
  - styles:
      name:
        - color: gray
    value: unknown
styles:
  custom_fields:
    battery:
      - position: absolute
      - left: 110px
      - border-radius: 50%
      - height: 30px
      - width: 30px
      - font-size: 14px
      - line-height: 30px
      - padding: 5px
      - color: |-
          [[[
            return states['sensor.thibaults_iphone_battery_level_2'].state > 20
            ? 'white'
            : 'black'
          ]]]
      - background-color: |-
          [[[
            return states['sensor.thibaults_iphone_battery_level_2'].state > 20
              ? '#7DDA9F'
              : 'red'
          ]]]
  icon:
    - width: 60%
type: 'custom:button-card'