mind sharing code for this one? this is exactly what im looking for, basic and neat. much appreciated!
Here you go, hope it helps. One of my tricks is sticking multiple horizontal stacks inside a vertical stack.
Thank You! Got it running on my dashboard…looks perfect!
1 Like
someone has an idea how i can show “thoroughfare, locality” only when im not in a homeassistant added zone? because the street etc is only nesserery when i dont know the zone 
secondary: >-
{{ iif(states(entity) == 'not_home', 'away', states(entity)) | title }} |
{{ state_attr('sensor.pixel_8_companion_app_geocoded_location',
'thoroughfare') }} {{
state_attr('sensor.pixel_8_companion_app_geocoded_location',
'name') }}, {{
state_attr('sensor.pixel_8_companion_app_geocoded_location',
'locality') }}
Try this:
{% if is_state(entity,'not_home') %}
{% if not is_state('sensor.pixel_8_companion_app_geocoded_location','Unknown') %}
{{ state_attr('sensor.pixel_8_companion_app_geocoded_location','thoroughfare') }} {{
state_attr('sensor.pixel_8_companion_app_geocoded_location',
'name') }}, {{
state_attr('sensor.pixel_8_companion_app_geocoded_location',
'locality') }}
{% else %}
Away
{% endif %}
{% elif is_state(entity,'home') %}
Home
{% else %}
{{ states(entity) | title }}
{% endif %}
1 Like
@mrgrlscz i need you assist one again if it is posible.
your idea to check if unknow is a good one i tried to to this on the other arrtibuts too, but im no yaml exptert maybe you can assist?
{% if not is_state('sensor.iphone__companion_app_geocoded_location','Unknown') %}
{% if not is_state_attr('sensor.iphone__companion_app_geocoded_location','null') %}
{{ state_attr('sensor.iphone__companion_app_geocoded_location','Thoroughfare') }}
{% if not is_state_attr('sensor.iphone__companion_app_geocoded_location','null') %}
{{ state_attr('sensor.iphone__companion_app_geocoded_location', 'Sub Thoroughfare') }},
{% if not is_state_attr('sensor.iphone__companion_app_geocoded_location','null') %}
{{ state_attr('sensor.iphone__companion_app_geocoded_location', 'Locality') }}
Here are my person cards:
made the GIF’s from Apple’s Memoji.
type: picture-elements
elements:
- type: state-icon
title: Iphone
entity: sensor.iphone_15_jeffrey_battery_level
show_state: true
state_color: true
style:
top: 15%
left: 5%
transform: scale(1,1)
- type: state-label
entity: sensor.iphone_15_jeffrey_battery_level
style:
top: 47%
left: 19%
- type: custom:text-element
text: Iphone
style:
top: 16%
left: 18%
transform: scale(0,5,0,5)
- type: state-icon
title: Ipad
entity: sensor.ipad_van_jeffrey_battery_level
show_state: true
state_color: true
style:
top: 15%
left: 73%
transform: scale(1,1)
- type: state-label
entity: sensor.ipad_van_jeffrey_battery_level
style:
top: 47%
left: 87%
- type: custom:text-element
text: Ipad
style:
top: 16%
left: 84%
transform: scale(0,5,0,5)
- type: state-icon
title: Iphone
entity: sensor.locatie_jeffrey
show_state: true
state_color: true
style:
top: 70%
left: 5.5%
transform: scale(1,1)
- type: state-label
entity: sensor.locatie_jeffrey
style:
top: 71%
left: 18%
- type: custom:text-element
text: Papa
style:
top: 86%
left: 43%
transform: scale(1.5,1.5)
image: /local/media\Jeffrey.gif
4 Likes
Hi all,
Obviously a popular topic but we all seem to have a common problem…
a person entity only tells us 1 of 3 things:
- home
- not_home
- the friendly name (note, not the zone entity ID)
As a result, most of us only produce 3 zone icons to indicate home, away, or other.
This results in most examples provided here only providing those 3 states, but I use a work-around to always display the correct icon regardless of zone.
Firstly, ensure the naming of zone entities and their friendly names are similar and can be translated. e.g. the zone.work => “Work”, zone.the_pub => “The pub”
- Zone friendly names can be updated in: Settings - Areas, labels & zones - Zones
- Zone entity ids can be updated in: Settings - Devices & Services - Entities (filter on “zone.”)
To translate from a known friendly name to a zone id, I apply lowercase and replace " " (space) with “_” (underscore) etc. I replace a few more (see below).
My dashboard is mostly YAML 'cause I use decluttering cards a lot. The template below should be added in your dashboard’s raw configuration editor:
decl-templ-person-card:
default:
- person: name
- handy: handy
card:
type: custom:button-card
entity: person.[[person]]
show_icon: false
show_name: false
tap_action:
action: none
styles:
card:
- text-transform: capitalize
- padding: 7px
- font-size: 15px
grid:
- grid-template-areas: '"icon battery" "status status"'
- grid-template-columns: 50% auto
- grid-template-rows: 60% auto
custom_fields:
icon:
- clip-path: circle()
- width: 50%
- pointer-events: none
- display: grid
- border: 3px solid
- border-color: rgba(33, 150, 243, 0.5)
- border-radius: 50%
- justify-self: start
- padding-left: 2px
battery:
- justify-self: end
status:
- padding-top: 2px
custom_fields:
icon: |
[[[
return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}"
width="100%">`; ]]]
status: |
[[[
return `<ha-icon
icon="${states['zone.' + states[states[entity.entity_id].attributes.source].state.toLowerCase().replace('+','and').replace('&','and').replace(' ','_')].attributes.icon}"
style="width: 20px; height: 20px;">
</ha-icon><span> ${entity.state}</span>`;
]]]
battery:
card:
type: custom:button-card
entity: sensor.[[handy]]_battery_level
show_state: true
show_name: false
layout: icon_state
size: 22px
styles:
card:
- border: 0px
- font-size: 12px
- font-weight: bold
icon:
- animation: |
[[[
if (states['binary_sensor.[[handy]]_is_charging'].state == 'on') return 'blink 3s ease infinite';
return 'none';
]]]
state:
- value: 85
operator: '>='
styles:
icon:
- color: rgb(76,175,80)
- value: 50
operator: '>='
styles:
icon:
- color: rgb(0,93,140)
- value: 15
operator: '>='
styles:
icon:
- color: rgb(0,170,255)
- operator: default
styles:
icon:
- color: rgb(244,67,54)
extra_styles: |
@keyframes blink {
50% {opacity: 0;}
}
Notice the critical bit in “custom fields - status” where the icon is displayed.
My card stacks 3 people next to each other as I like it on my phone.
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: decl-templ-person-card
variables:
- person: person1
- handy: cell1
- type: custom:decluttering-card
template: decl-templ-person-card
variables:
- person: person2
- handy: cell2
- type: custom:decluttering-card
template: decl-templ-person-card
variables:
- person: person3
- handy: cell3
FYI: “handy” is German slang for cell/mobile phone 
In case you’re wondering, the phone does need to be entered too, 'cause it’s possible the current zone comes from a tracking device other than your phone e.g. your router, but I want to display the phone’s battery anyway.
Lastly, referring to my example entities, the parameters you need:
- person.person1
- device_tracker.cell1
The result:
Hope this helps.
For each if you have to “close it” with an endif.
So you’re trying to nest 3 if in another one.
Try this:
{% if not is_state('sensor.iphone__companion_app_geocoded_location','Unknown') %}
{% if not is_state_attr('sensor.iphone__companion_app_geocoded_location','null') %}
{{ state_attr('sensor.iphone__companion_app_geocoded_location','Thoroughfare') }}
{% endif %}
{% if not is_state_attr('sensor.iphone__companion_app_geocoded_location','null') %}
{{ state_attr('sensor.iphone__companion_app_geocoded_location', 'Sub Thoroughfare') }},
{% endif %}
{% if not is_state_attr('sensor.iphone__companion_app_geocoded_location','null') %}
{{ state_attr('sensor.iphone__companion_app_geocoded_location', 'Locality') }}
{% endif %}
{% endif %}
1 Like
thank you 
Hi.
I wanted to use second info line that uses template to populate the location inside our home. Thererfore, I used custom-musroom-card to achieve that.
My question is how/what should I do to simulate the “more info” action of a native person card? I’d like to get the same result of map with the person’s location popup.
Here is my code:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: עמית
secondary: |
{% if states('sensor.amits_iphone_13') == 'office' %}
ממ"ד
{% elif states('sensor.amits_iphone_13') == 'parents' %}
הורים
{% elif states('sensor.amits_iphone_13') == 'kitchen' %}
מטבח
{% elif states('sensor.amits_iphone_13') == 'living_room' %}
סלון
{% elif states('sensor.amits_iphone_13') == 'raz' %}
רז
{% elif states('sensor.amits_iphone_13') == 'noya' %}
נויה
{% elif states('sensor.amits_iphone_13') == 'guy' %}
גיא
{% elif states('sensor.amits_iphone_13') == 'bathroom' %}
אמבטיה
{% elif states('sensor.amits_iphone_13') == 'not_home' %}
{% if states('person.amit') == 'home' %}
בבית
{% elif states('person.amit') == 'not_home' %}
לא בבית
{% else %}
{{ states('person.amit') }}
{% endif %}
{% endif %}
icon: ''
layout: vertical
badge_icon: |
{% if states('person.amit') == 'בית' or states('person.amit') == 'home' %}
mdi:home
{% elif states('person.amit') == 'בי"ס אורנים' %}
mdi:account-school
{% elif states('person.amit') == 'בי"ס אורנים' %}
mdi:account-school
{% elif states('person.amit') == 'חטיבת ביניים' %}
mdi:account-school
{% elif states('person.amit') == 'תיכון מקיף יהוד' %}
mdi:account-school
{% elif states('person.amit') == 'עבודה' %}
mdi:airplane
{% elif states('person.amit') == 'צופים' %}
mdi:campfire
{% elif states('person.amit') == 'שולה' %}
mdi:account-group
{% else %}
mdi:home-export-outline
{% endif %}
picture: /api/image/serve/1ee87705d637d665490011ae11e4f91c/512x512
fill_container: false
icon_color: ''
badge_color: >
{% if states('person.amit') == 'בית' or states('person.amit') == 'home'
%}
blue
{% else %}
red
{% endif %}
tap_action:
action: [[HELP NEEDED HERE]] <-------------------
navigation_path: [[HELP NEEDED HERE]] <-------------------
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0);
box-shadow: none;
}
This is what I’d like to get when clicking on someone:
2 Likes
Hi Guys!
After weeks of tinkering and lurking here I’ve finally found a person card which fits my needs.
It’s nothing special but I still wanted to share it here so that maybe somebody else can use it as well.
Dark Mode:
Light Mode:
Explanation:
I was trying to format a card which fit my dashboard for my phone. So I needed something small with informations about location and batterylevel of a persons phone. I came up with this mushroom template card:
-Picture of the Person in the middle
-Shadow indicating the location of that person (green = home, blue = work, orange = not_home) / more locations are possible
-Badge showing roughly the battery level of that persons phone and if it is charging (3. Person doesn’t have a phone yet, so thats why theres no badge 
)
And here’s the code for anybody who want’s to try it out
type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: ''
picture: '{{state_attr(entity,"entity_picture")}}'
layout: horizontal
entity: person.YOUR_ENTITY
badge_icon: |-
{% set bl = states('sensor.YOUR_BATTERY_LEVEL_SENSOR') | int // 10 * 10 %}
{% if states('sensor.YOUR_BATTERY_STATE_SENSOR') == "charging" %}
mdi:battery-charging-{{bl}}
{% elif bl == 100 %}
mdi:battery
{% elif bl >= 10 %}
mdi:battery-{{bl}}
{% elif bl >= 0 %}
mdi:battery-outline
{% else %}
mdi:battery-unknown
{%- endif %}
badge_color: |-
{% set bl = "sensor.YOUR_BATTERY_LEVEL_SENSOR" %}
{% if states('sensor.YOUR_BATTERY_STATE_SENSOR') == "charging" %}
light-blue
{% elif states(bl) | int >= 75 %}
green
{% elif states(bl) | int >= 50 %}
light-green
{% elif states(bl) | int >= 20 %}
orange
{% else %}
red
{% endif %}
icon_color: ''
multiline_secondary: false
fill_container: false
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
align-items: center;
box-shadow:
{% if states(config.entity) == 'YOUR_EXTRA_LOCATION' %}
0px 4px 8px 0px lightblue;
{% elif states(config.entity) == 'home' %}
0px 4px 8px 0px lightgreen;
{% else %}
0px 4px 8px 0px orange;
{% endif %};
}
I would love some constructive criticism and some ideas or suggestions for improvement.
Edit: Fixed the code for the colour.
3 Likes
Did you manage to find a way? Not sure if this is the best/optimal way but i use the hacs bubble card included popup method (GitHub - Clooos/Bubble-Card: Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.)
have a hidden bubble card vertical stack then you can add whatever info you want in the popup
e.g.
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#map_person1' #rename this to whatever
bg_opacity: '0'
bg_blur: '2'
- type: custom:mushroom-person-card
entity: person.person1
secondary_info: last-updated
icon_type: entity-picture
- type: map
entities:
- entity: device_tracker.person1_iphone
theme_mode: dark
then just call it via tap_action e.g.
tap_action:
action: navigate
navigation_path: '#map_person1' #matches the hash above
edit: Unless you want to customize and have other things in the popup i guess the cleanest way is this
tap_action:
action: more-info
Wow, where did you find this one? Would love to see the code.
2 Likes
Most cards in this thread look like they’re straight from the Metaverse! Yours looks like high production value.
Well done sir and thanks for sharing your code!
1. Dynamic Border Color Based on Status
The border around the person’s picture changes color depending on their location:
- Green: The person is at home.
- Red: The person is away.
- Orange: The person has another status (e.g., traveling).
This makes it easy to visually identify someone’s location by looking at the color of the border.
2. Charging Status with Dynamic Lightning Icon
When the phone is charging, a lightning icon is displayed instead of the battery percentage. This lightning icon blinks to indicate that the device is currently charging, providing a clear visual indication.
3. Dynamic Battery Colors
The battery status is dynamically displayed with different colors depending on the battery level:
- Green: Battery level above 50%.
- Yellow: Battery level between 30% and 50%.
- Orange: Battery level between 10% and 30%.
- Red: Battery level below 10%.
This color-coded display makes it easy to quickly see the battery status.
4. Dynamic Travel Time Color Indicator
For travel time (from a Waze sensor or similar source), the travel time is dynamically color-coded:
- Green: Short travel time (under 20 minutes).
- Yellow: Moderate travel time (between 20 and 40 minutes).
- Red: Long travel time (over 40 minutes).
This provides a quick visual indication of how long the travel time is.
5. Dynamic Travel Time Display
The travel time is displayed in minutes, along with a circular chart that dynamically adjusts in size according to the travel time, relative to a maximum time (e.g., 60 minutes). This makes it easier to see how close the travel time is to the maximum.
10 Likes
can you share the code?