I’ve had the same person card for the last few years. It works but I like to freshen up a bit. In button card, is it possible to have things like battery/distance clickable? I can with my current one, so clock distance and tells you the address a person is at
I’ve been working on mine, with modifying some that I found here and there.
Most of it works great, but when I start spotify, I have to do a page refresh before it will start the marquee and change the picture to the headphones.
Hi Ben, I really love your version of the person card. Unfortunately, my HA skills are not that deep yet and I tried it now for a week, but don’t get any further.
Maybe I can ask for your assistance here and a short explanation on how this is working and where I have to put the codes.
For now, I added the “Template” you shared into the ui_lovelace.yaml on the top as 2nd template. But when I try to add the card code, it either gives me a code error or it ends up as a blank box on the dashboard.
I have installed the decluttering card (I cannot choose or see this on the add card menu though. The installation is there if I check in Studio Code Server.
I tried to use manual card, no go.
I tried to use custom button card, no go.
Thanks a lot in advance!!
Here is where i put the template in the ui_lovelace.yaml:
(short example)
Thank you very much, I think i cannot yet start a PM conversation. I just created a account yesterday. Would you mind sending me a PM so i can reply with my code?
Finally I made my own good Person Card with all the samples and ideas from here, some extra work and some HACS integrations:
You need following integrations:
Places
Bubble Card
Waze
From Places you get the city_name, travel distance, and updated time
from waze you get the travel time, bubble card for the tap_action popUp (if needed)
This is my Card:
Showing different images on different places, you can define as many places as you want, every place is a HomeAssistent Zone, so I’ve added Garden as well
Showing a warning if not_home or at work and location data is outdated
If not home & not at work it shows the city name:
Extras:
Iphone sleep mode will show sleeping image if home or not_home
iphone activity will show small emojy for walking, car, cycling
Distance to home is shown if not home
Time to hme is shown if not home
Shows time since when the person is on this place helpful when not_home, so below city name always shown since when
Link:
Tap-Action opens a Bubble Card PopUp with more information like map, phone status etc.
Any ideas what could be added?
The code is:
Just replace the sensor names in Variables area, and the picture path
# Waze integration needed for Travel-Time
# Places integration needed for City names, Distance, etc.
# Bubble Card integration for Popus needed or exchange navigation path to entity page
# Save images to /local/images/persons/PERSONNAME/LocationName.png
# Exchange name Martin to your name
type: custom:button-card
aspect_ratio: 7/5 # Dynamic aspect ratio of 7:5 for responsive scaling on different devices
variables:
person: sensor.martin # The main entity representing the person - from places
name: martin # Name of the person, used dynamically in navigation or display
focus: binary_sensor.iphone_von_martin_focus # Binary sensor for the device focus status
activity: sensor.iphone_von_martin_activity # Sensor showing the person's activity (e.g., walking, driving)
battery_level: sensor.iphone_von_martin_battery_level # Sensor showing the battery level of the person's device
travel_time: sensor.fahrzeit_nach_hause_martin # Sensor showing travel time to the home location - from waze
entity: person.martin # Main Home Assistant entity for the person
tap_action:
action: navigate # Tap action triggers navigation to a specific dashboard
navigation_path: "[[[ return \"/dashboard-templates/popups#\"+variables.name]]]" # Dynamic navigation path using the person's name
show_entity_picture: true
entity_picture: /local/images/persons/martin/home.png # Default picture for the person
show_name: true
show_last_changed: false
triggers_update: all # Updates the card whenever any of the referenced entities change
state:
# When the person is at "home"
- value: home
name: 🏡 Zu Hause
# Show sleep image when iPhone in SleepMode
entity_picture: |
[[[
if (states[variables.focus].state == 'on')
return `/local/images/persons/martin/sleep.png`
else return `/local/images/persons/martin/home.png`
]]]
styles:
entity_picture:
- margin-top: 12px
- width: 60px
- position: relative
name:
- color: "#7DDA9F"
# When the person is at "work"
- value: Arbeit
name: 🏭 Arbeit
entity_picture: /local/images/persons/martin/work.png
styles:
name:
- color: "#7DDA9F"
entity_picture:
- width: 60px
- position: relative
- margin-top: 20px
# When the person is at "Garden"
- value: Garten
name: 👨🏻🌾 Garten
entity_picture: /local/images/persons/martin/garten.png
styles:
name:
- color: "#7DDA9F"
entity_picture:
- width: 60px
- position: relative
- margin-top: 20px
# When the person is "not_home" show City name
- value: not_home
name: |
[[[
return `🗺️ ${states[variables.person].attributes.city}`;
]]]
# Show sleep image when iPhone in SleepMode
entity_picture: |
[[[
if (states[variables.focus].state == 'on')
return `/local/images/persons/martin/sleep.png`
else return `/local/images/persons/martin/wave.png`
]]]
styles:
name:
- color: "#93ADCB"
entity_picture:
- margin-top: 12px
- opacity: 0.3
- width: 60px
- position: relative
# When the person is "unknown"
- value: unknown
name: |
[[[
return `Unbekannt`
]]]
operator: default
entity_picture: /local/images/persons/martin/wave.png
styles:
entity_picture:
- margin-top: 12px
- opacity: 0.3
- width: 60px
- position: relative
name:
- color: gray
custom_fields:
# Show last updated time from main Places entity show last updated if not home
# Show last changed if state is home
last_info: |
[[[
if (states[variables.person].state === 'not_home') {
// If not_home show `last_updated` of main places entity
const lastUpdated = new Date(states[variables.person].attributes.last_updated);
const now = new Date();
const diffMs = now - lastUpdated; // Unterschied in Millisekunden
const diffMinutes = Math.floor(diffMs / (1000 * 60)); // Minuten
const diffHours = Math.floor(diffMinutes / 60); // Stunden
if (diffMinutes < 60) {
return `Vor ${diffMinutes} Minuten aktualisiert`;
} else {
return `Vor ${diffHours} ${diffHours === 1 ? 'Stunde' : 'Stunden'} aktualisiert`;
}
} else {
// If home show `last_changed` of person entity
const lastChanged = new Date(states[variables.person].last_changed);
const now = new Date();
const diffMs = now - lastChanged; // Unterschied in Millisekunden
const diffMinutes = Math.floor(diffMs / (1000 * 60)); // Minuten
const diffHours = Math.floor(diffMinutes / 60); // Stunden
if (diffMinutes < 60) {
return `Seit ${diffMinutes} Minuten`;
} else {
return `Seit ${diffHours} ${diffHours === 1 ? 'Stunde' : 'Stunden'}`;
}
}
]]]
#Show warning if last update is 10 minutes ago
warning: |
[[[
const lastUpdated = new Date(states[variables.person].attributes.last_updated);
const now = new Date();
const diffMs = now - lastUpdated;
const diffMinutes = Math.floor(diffMs / (1000 * 60));
// Zeige eine Warnung, wenn die letzte Aktualisierung mehr als 10 Minuten her ist
if (diffMinutes >= 10) {
return `⚠️ Zuletzt aktualisiert vor mehr als 10 Minuten`;
} else {
return '';
}
]]]
#Show small Icon based on iPhone activity
activity: |
[[[
if (states[variables.activity].state == 'Walking')
return `🚶🏻♂️`
if (states[variables.activity].state == 'Running')
return `🏃🏻♂️`
if (states[variables.activity].state == 'Automotive')
return `🚙`
if (states[variables.activity].state == 'Cycling')
return `🚴🏻♂️`
else return ""
]]]
#Show battery icon and charging stat
battery: |
[[[
var i = states[variables.battery_level].attributes.icon;
var b = states[variables.battery_level].state;
return `📱${b}%<span style='vertical-align: 1px'></span><ha-icon icon='${i}' style='width: 8px; vertical-align:2px'></ha-icon>`
]]]
#Show traveltime to home
traveltime: |
[[[
if (states[variables.person].attributes.distance_from_home_km <= 0.2)
return ""
else return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 16px; height: 10px; vertical-align: 2px; padding-right: 2px">
</ha-icon><span>${
states[variables.travel_time].state} min</span>
`
]]]
#Show distance to home
distance: |
[[[
if (states[variables.person].attributes.distance_from_home_km <= 0.2)
return ""
else return `<ha-icon
icon="mdi:map"
style="width: 16px; height: 10px; vertical-align: 2px; padding-right: 1px">
</ha-icon><span>${
states[variables.person].attributes.distance_from_home_km} km</span>
`
]]]
###############Styles area##############
styles:
grid:
- grid-template-areas: |
"i i"
"n n"
"last_info last_info"
"warning warning"
"activity distance"
"battery traveltime"
- grid-template-columns: 1fr 1fr
- grid-template-rows: auto auto auto auto auto auto
custom_fields:
last_info:
- justify-self: center
- font-size: 8px
- font-weight: normal
- color: white
- text-align: center
warning:
- justify-self: center
- font-size: 8px
- font-weight: bold
- color: "#FF0000"
- text-align: center
sleep:
- position: absolute
activity:
- height: 30%
- position: absolute
- top: 50px
- right: 4px
- font-size: 18pt
distance:
- position: absolute
- right: 4px
- top: 20px
- font-size: 8px
traveltime:
- position: absolute
- right: 2px
- top: 36px
- font-size: 8px
battery:
- position: absolute
- right: 10px
- top: 4px
- font-size: 8px
- color: >-
[[[ if (states[variables.battery_level].state < 30) return "#e45649";
if (states[variables.battery_level].state < 50) return "#ffa229"; if
(states[variables.battery_level].state < 101) return "#50A14F"; else
return "#ffc640"]]]
