I’ve been trying to come up with a person card for my dashboard with this criteria:
Entity Picture
Phone battery level (either via dynamic icon or a %)
location status (ie. home or away)
Here is the code I used for the person card:
aspect_ratio: 3/1
custom_fields:
battery: |
[[[
return `${
states['sensor.iphone_battery_level'].state
}`
]]]
entity: person.eric
layout: icon_name
show_entity_picture: true
show_name: true
state:
- name: 🏡 Eric (Home)
styles:
name:
- color: '#7DDA9F'
value: home
- name: 🏃♂️ Eric (Away)
styles:
name:
- color: '#93ADCB'
value: not_home
- styles:
name:
- color: gray
value: unknown
styles:
custom_fields:
battery:
- position: absolute
- left: 140px
- border-radius: 50%
- height: 30px
- width: 30px
- font-size: 14px
- line-height: 30px
- padding: 5px
- color: |-
[[[
return states['sensor.iphone_battery_level'].state > 20
? 'white'
: 'black'
]]]
- background-color: |-
[[[
return states['sensor.iphone_battery_level'].state > 20
? '#7DDA9F'
: 'red'
]]]
icon:
- width: 60%
type: custom:button-card
No help from anyone? I was trying to take examples from multiple places, but when I copy and paste code (even insuring the entities are right), I get errors that aren’t very comprehensive.
I was following this thread: Person Cards - Show Off Yours
I tried copying the code from the OPs first post, but the problem is there have been updates and the process to do several things seems to have changed. Also, it’s apparetnely not as simple as just creating a custom card and dropping the code in there…it seems you have to use templates, decluttering cards etc. I may just be over my head.
I can’t help you as I came here looking for the same help. I’ll likely pay someone on fiverr to help me out if the price is right
faustzar
March 1, 2023, 7:33am
4
The easiest I found is to use the custom button mod from HACS - GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant Custom Card Button
This allows you to do quite a bit without having to go in the template and decluttering space, install the custom button card via hacs, refresh the browser, go to a view where you want to add the card, add a custom button card
it will pop up with something in it, like this:
next you paste this yaml in it:
type: custom:button-card
entity: person.franco
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: lightblue
- 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: 60%
- 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.m2101k6g_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.m2101k6g_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.franco'].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.franco'].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.home'].state} Kms</span></span>`
]]]
battery: |
[[[
if (states['sensor.m2101k6g_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.m2101k6g_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.m2101k6g_battery_level'].state}% battery</span></span>`;
}
]]]
wifi: |
[[[
if (states['sensor.m2101k6g_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.m2101k6g_wifi_connection'].state}</span></span>`;
}
]]]
replace all instances of person.franco with your person.xxxx details, replace all sensor.m2101k6g_battery_level with the appropriate sensors that is tied to that persons card. I am still working on the waze bit, it should not be too difficult to add, o yes you end up with something like this:
Still some tweaking to do
Gstoica
August 12, 2023, 5:52pm
5
hi
type: custom:button-card
entity: person.george_stoica
aspect_ratio: 1/1
name: George Stoica
show_entity_picture: false
show_name: true
hold_action:
action: none
state:
- value: home
styles:
custom_fields:
icon:
- border-color: '#ffff'
- 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:
- border-radius: 3%
- padding: 2%
- color: gray
- font-size: 18px
- text-shadow: 1px 1px 1px dark_grey
- text-transform: capitalize
- justify-self: end
- align-self: middle
grid:
- grid-template-areas: '"icon status" "battery proximity" "n n"'
- grid-template-columns: 2fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-size: 35px
- align-self: middle
- justify-self: start
- padding-bottom: 20px
custom_fields:
icon:
- clip-path: circle()
- width: 100%
- pointer-events: none
- display: grid
- border: 5px solid
- border-radius: 500px
- margin: 0 -8% 0 0
- justify-self: end
- opacity: 1
status:
- align-self: start
- justify-self: end
- color: gray
battery:
- padding: 0.5em 10px
- align-self: middle
- justify-self: start
- color: gray
- '--text-color-sensor': >-
[[[ if (states["sensor.huawei_p30_pro_battery_level"].state < 20)
return "#EF4F1A"; ]]]
wifi:
- padding: 0.1em 0px
- align-self: middle
- justify-self: start
- color: gray
- '--text-wifi-color-sensor': >-
[[[ if (states["sensor.huawei_p30_pro_wifi_connection"].state == '<not
connected>') return "#aaaaaa"; ]]]
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
]]]
status: |
[[[
if (states['person.george_stoica'].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.george_stoica'].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>`;
}
]]]
battery: |
[[[
if (states['sensor.huawei_p30_pro_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.huawei_p30_pro_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.huawei_p30_pro_battery_level'].state}% battery</span></span>`;
}
]]]
wifi: |
[[[
if (states['sensor.huawei_p30_pro_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.huawei_p30_pro_wifi_connection'].state}</span></span>`;
}
]]]
