Hello,
Where/how did you defined the “work” or any other zone to be showed in this new person cards?
This is the code for one person:
- type: custom:button-card # MARTIJN
entity: person.martijn
show_entity_picture: true
entity_picture: /local/images/martijn_werk.gif
show_name: true
show_last_changed: true
triggers_update: all
state:
- value: home
name: 🏡 Thuis
entity_picture: /local/images/martijn.gif
styles:
card:
- height: 170px
entity_picture:
- margin-top: 12px
- width: 60%
- position: relative
name:
- color: "#7DDA9F"
- value: Werk
name: 🏥 Werk
entity_picture: /local/images/martijn_werk.gif
styles:
card:
- height: 170px
name:
- color: "#7DDA9F"
entity_picture:
- width: 60%
- position: relative
- margin-top: 20px
- value: not_home
name: |
[[[
return `🗺️ ${states['sensor.martijn_stad'].state}`
]]]
entity_picture: /local/images/martijn.gif
styles:
card:
- height: 170px
name:
- color: "#93ADCB"
entity_picture:
- margin-top: 12px
- opacity: 0.3
- width: 60%
- position: relative
- value: unknown
name: |
[[[
return `🗺️ ${states['sensor.martijn_stad'].state}`
]]]
operator: default
entity_picture: /local/images/martijn.gif
styles:
card:
- height: 170px
entity_picture:
- margin-top: 12px
- opacity: 0.3
- width: 60%
- position: relative
name:
- color: gray
custom_fields:
activity: |
[[[
if (states['sensor.iphone_max_activity'].state == 'Walking')
return `<img src="/local/images/martijn_walking.png" style="width:16px; height:16px"></img>`
if (states['sensor.iphone_max_activity'].state == 'Running')
return `<img src="/local/images/martijn_running.png" style="width:16px; height:16px"></img>`
if (states['sensor.iphone_max_activity'].state == 'Automotive')
return `<img src="/local/images/martijn_auto.png" style="width:16px; height:16px"></img>`
if (states['sensor.iphone_max_activity'].state == 'Cycling')
return `<img src="/local/images/martijn_bike.png" style="width:16px; height:16px"></img>`
else return ""
]]]
battery: |
[[[
var i = states['sensor.iphone_max_battery_level'].attributes.icon;
var b = states['sensor.iphone_max_battery_level'].state;
return `${b}%<span style='vertical-align: 1px'></span><ha-icon icon='${i}' style='width: 16px; vertical-align:2px'></ha-icon>`
]]]
traveltime: |
[[[
if (states['sensor.martijn_thuis'].state == 0)
return ""
else return `<ha-icon
icon="mdi:clock"
style="width: 16px; height: 16px; vertical-align: 2px; padding-right: 2px">
</ha-icon>${
states['sensor.martijn_thuis'].state
}`
]]]
distance: |
[[[
if (states['sensor.martijn_distance'].state <= 0.2)
return ""
else return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 16px; height: 16px; vertical-align: 2px; padding-right: 1px">
</ha-icon>${
states['sensor.martijn_distance'].state
}`
]]]
albert_heijn: |
[[[
if (states['person.martijn'].state == 'Albert Heijn')
return `<img src="/local/images/ah.png" style="width:25px; height:25px"></img>`
else return ""
]]]
styles:
name:
- font-size: 16px
label:
- font-size: 8px
icon:
- width: 80%
- position: absolute
- top: 1%
custom_fields:
albert_heijn:
- height: 30%
- width: 30%
- position: absolute
- top: 45%
- left: 10%
activity:
- height: 20%
- position: absolute
- top: 15%
- right: 2px
distance:
- position: absolute
- left: 2px
- top: 2px
- font-size: 12px
traveltime:
- position: absolute
- left: 2px
- top: 15%
- font-size: 12px
battery:
- align-self: right
- position: absolute
- right: 2px
- top: 2%
- font-size: 12px
- color: >-
[[[ if (states["sensor.iphone_max_battery_level"].state < 30) return
"#e45649"; if (states["sensor.iphone_max_battery_level"].state < 50)
return "#ffa229"; if (states["sensor.iphone_max_battery_level"].state <
101) return "#50A14F"; else return "#ffc640"]]]
3 Likes
Hello!
Can you help me implementing this person card? I’m a newbie @ Home Assistant, and all the help youd be appreciated
This is excellent and loving the card.
I just wanted to know if its possible to pull in the zone state for the location rather than defining them separately for each person? I’ve not a clue on how to achieve this.
Thanks
I am loving this… would be amazing to have the complete family displayed in my wall mounted touchscreen… But i am missing the first step.
I have home assistant running on my raspberry pi.
So does everyone need to have the HA app installed on there phone to connect?
And i see someone placing a geusts icon…
Could someone please explain the first basic steps roughly
The phone sensors are provided by the HA companion app. So it depends on what kind of information you want to display on your person card.
Hello, can you please help me make my code for showing two persons in this card. Everything is fine for one but i can’t make it for two 
type: custom:button-card
entity: person.name
aspect_ratio: 1/1
name: Dimitar
show_entity_picture: true
show_name: true
hold_action:
action: none
state:
- value: home
styles:
custom_fields:
icon:
- border-color: '#77c66e'
- value: Away
styles:
card:
- background-color: '#dedede'
custom_fields:
icon:
- border-color: '#EF4F1A'
- value: In Sofia
styles:
custom_fields:
icon:
- border-color: deepskyblue
styles:
card:
- width: 300px
- height: 250px
- background-color: transperant
- border-radius: 5%
- padding: 4%
- color: grey
- font-size: 15px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: start
- align-self: middle
grid:
- grid-template-areas: '"icon status" "n n" "battery proximity" "wifi ss" "sd sd"'
- grid-template-columns: 2fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- padding-left: 15px
- font-size: 20px
- align-self: middle
- justify-self: start
- padding-bottom: 7px
- color: white
- font-weight: bold
custom_fields:
icon:
- clip-path: circle()
- width: 62%
- pointer-events: none
- display: grid
- border: 6px solid
- border-color: grey
- border-radius: 500px
- margin: 0 +20% 0 0
- justify-self: end
- opacity: 1
status:
- padding-bottom: 90%
- padding-right: 35%
- color: grey
proximity:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: gray
wifi:
- padding: 0.5em 0px
- padding-right: 20%
- color: grey
- '--text-wifi-color-sensor': >-
[[[ if (states["sensor.iphone_connection_type"].state == '<not
connected>') return "#aaaaaa"; ]]]
battery:
- padding: 0.5em 0px
- padding-right: 35%
- color: green
- '--text-color-sensor': >-
[[[ if (states["sensor.iphone_battery_level"].state < 20)
return "#b30000";
if (states["sensor.iphone_battery_level"].state < 40)
return "#ea5545";
if (states["sensor.iphone_battery_level"].state < 60)
return "#ef9b20";
if (states["sensor.iphone_battery_level"].state < 80)
return "#87bc45";
if (states["sensor.iphone_battery_level"].state < 101)
return "green";]]]
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
]]]
status: |
[[[
if (states['person.name'].state =='not_home') {
return `<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: 'grey';">
</ha-icon><span> Away</span>`;
}
if (states['person.name'].state =='home') {
return `<ha-icon
icon="mdi:home"
style="width: 20px; height: 20px; color: green;">
</ha-icon><span> ${entity.state}</span>`;
} else {
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 20px; height: 20px; color: deepskyblue;">
</ha-icon><span> ${entity.state}</span>`;
}
]]]
proximity: |
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.person'].state} m</span></span>`
]]]
battery: |
[[[
var i = states['sensor.iphone_battery_level'].attributes.icon;
if (states['sensor.iphone_battery_state'].state =='Charging') {
return `<ha-icon
icon="mdi:battery-charging"
style="width: 20px; height: 20px; color: #00d8ff;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.iphone_battery_level'].state}% battery</span></span>`;
} else {
return `<ha-icon
icon='${i}'
style="width: 20px; height: 20px; color: var(--text-color-sensor);">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.iphone_battery_level'].state}% battery</span></span>`;
}
]]]
wifi: |
[[[
if (states['sensor.iphone_connection_type'].state =='<not connected>') {
return `<ha-icon
icon="mdi:wifi"
style="width: 20px; height: 20px; color: var(--text-wifi-color-sensor);">
</ha-icon> <span><span style="color: var(--text-wifi-color-sensor);">Disconnected</span></span>`;}
else if (states['sensor.iphone_connection_type'].state == 'Cellular') {
return `<ha-icon icon="mdi:signal-cellular-3" style="width: 20px; height: 20px; color: gey;"></ha-icon>
<span style="color: var(--text-color-sensor);">${states['sensor.iphone_connection_type'].state}</span>`;}
else {
return `<ha-icon
icon="mdi:wifi"
style="width: 20px; height: 20px; color: grey;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.iphone_ssid'].state}</span></span>`;
}
]]] ```Hi 
Thanks for sharing the code !
Is it possible to add others zones ? Work, school, padel and grandma haha
- name: 🏃♂️ Unterwegs
styles:
name:
- color: '#93ADCB'
value: not_home
I tried to replace value: not_home by value: zone.XXXX, how can i do please ? Thanks