Hi,
I have been struggling for sometime to get a “person card” in a way that was looking nice and that would provide the information that I was expecting to see in a glance.
After many interactions and backs-and-forths, with Button-Card, I believe that I got it right for what I had in mind.
Anyhow, would love to see how your current approach looks and maybe get some more ideas.
Mine now looks like this:
Home
Away
Work
Others
Some features that I got working:
- Zone dependent color border on the image
- Zone dependent icon and zone name
- Wifi Connection details
- Phone battery status (icon changing when charging) (red status when below 50%)
- Proximity to home sensor
I am adding the code to this post, for ease of reference:
type: custom:button-card
entity: person.xxx
aspect_ratio: 1/1
name: Person
show_entity_picture: true
show_name: false
hold_action:
action: none
state:
- value: home
styles:
custom_fields:
icon:
- border-color: '#77c66e'
- value: not_home
styles:
card:
- background-color: '#dedede'
custom_fields:
icon:
- border-color: '#EF4F1A'
- value: Work
styles:
custom_fields:
icon:
- border-color: deepskyblue
styles:
card:
- background-color: white
- border-radius: 5%
- padding: 5%
- color: gray
- font-size: 10px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: end
- 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:
- font-size: 15px
- align-self: middle
- justify-self: start
- padding-bottom: 10px
custom_fields:
icon:
- clip-path: circle()
- width: 80%
- pointer-events: none
- display: grid
- border: 5px solid
- border-color: gray
- border-radius: 500px
- margin: 0 +10% 0 0
- justify-self: end
- opacity: 1
status:
- align-self: start
- justify-self: end
- color: gray
proximity:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: gray
wifi:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: gray
- '--text-wifi-color-sensor': >-
[[[ if (states["sensor.mobile_wifi_connection"].state == '<not
connected>') return "#aaaaaa"; ]]]
battery:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: gray
- '--text-color-sensor': >-
[[[ if (states["sensor.mobile_battery_level"].state < 50) return
"#EF4F1A"; ]]]
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
]]]
status: |
[[[
if (states['person.xxx'].state =='not_home') {
return `<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: '#888888';">
</ha-icon><span> Away</span>`;
}
if (states['person.xxx'].state =='home') {
return `<ha-icon
icon="mdi:home"
style="width: 20px; height: 20px; color: 888888;">
</ha-icon><span> ${entity.state}</span>`;
} else {
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 20px; height: 20px; color: 888888;">
</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['proximity.ad_home'].state} Kms</span></span>`
]]]
battery: |
[[[
if (states['sensor.mobile_battery_state'].state =='charging') {
return `<ha-icon
icon="mdi:battery-charging"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.ad_s9_aim_battery_level'].state}% battery</span></span>`;
} else {
return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.mobile_battery_level'].state}% battery</span></span>`;
}
]]]
wifi: |
[[[
if (states['sensor.mobile_wifi_connection'].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 {
return `<ha-icon
icon="mdi:wifi"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.mobile_wifi_connection'].state}</span></span>`;
}
]]]
On the Raw Editor I also have this CSS for button-card-templates, although it doesn’t matter much.
button_card_templates:
header:
styles:
card:
- background-color: '#FFFFFF'
- box-shadow: none
- border-radius: 0%
- padding: 0%
- color: white
- font-size: 10px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
icon:
- width: 15%
- margin-top: 0%
- margin-left: 0%
- color: white
name:
- font-size: 16px
- color: '#253B56'
- text-transform: capitalize
- justify-self: start
- margin-left: 1%
standard_button:
styles:
card:
- font-size: 10px
icon:
- width: 30%
name:
- font-size: 12px
- color: '#E0E0E0'
state:
- justify-self: start
- font-size: 10px
- padding: 0px 5px
- color: '#E0E0E0'
Hoping to see (loads of) your “person” cards 
