I came up with these really minimal Lovelace cards to represent who is home, based on person entities in Home Assistant.
It's based on this excellent button-card for Lovelace. I find the config options for button-card to be a bit overwhelming though.
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'