Person Cards - Show Off Yours

Really impressive. You use a HA Phone companion for tracker, and I use the same for me and my wife, but my daughter doesn’t want to install HA app to her iPhone, this is why I asked about Life360(otherwise HA companion app is more than enough). for forecast in my dashboard. Thank you for sharing yours.

1 Like

@Zenia Ventusky is brilliant in iframe. I use the shortcut P to put it into presentation mode. The map types changes with the weather condition, just copy a fresh URL for the conditions you want and use conditional cards to change the display. Ventusky - Wind, Rain and Temperature Maps.

I am a bit more sneaky with my daughter. I just install the HA Companion App on her phone, saying she needs it to control the home. Then adjust the settings so her phone is tracked. It also makes a good easy to use tracker if someone looses their phone.


Well, my daughter is almost 21 and she knows what to do with her phone :grinning: and how to remove and install some apps

1 Like

Yep I know your pain. My daughters phone is what turns her heat pump on when she arrives home and also turns her lights off when she leaves. So the tracking has advantages for her and she won’t freeze, we don’t use it to keep an eye on where she is.

1 Like

I install HA App on her phone, create a separate dashboard for her to control lights, fan, towel warmer and HVAC in her room and bathroom, but after a week she decided it’s taking too much memory on her phone and removed :rofl:.

1 Like

You can’t win, make it so none of it works unless her HA app is detected at home. lol

1 Like

Check the hacs page there is a version 5(something)

Seems to work for some people but not others

nice indeed, thx for a new resource to add :wink: a bit like the Windy maps.
I did test that in my weather cameras config, but find the cards are horribly sensitive to mouse gestures, and zoom in/out accidentally all the time

  - type: custom:fold-entity-row
      type: section
      label: Ventusky
      card_mod: *label
    padding: 0
      - type: custom:hui-element
        <<: *style
        card_type: iframe
        aspect_ratio: 100%
        url: ';5.68;5&l=satellite'

the style mod simply removes the border and adjusts the image to the full space under the fold.

too bad there is no ‘re-center’ button in that map. You are not aware of some other code we can use than simply adding the web page in an iframe?

exactly, thats what we ended up doing. If they dont keep the app on their phone, no use in trying to keep HA up to the task of displaying them, or worse, templating stuff based on their mobile_app entities.

Have all family members in a grid, and for the ones with active app, I do this:

      - type: conditional
          - entity: person.no_app
            state: home
          type: custom:button-card
          template: button_picture_family
          entity: person.no_app

Making them show only when at home baed on their local network trackers… nice, clean and simple


Hi All!,

Been using HA for a while know, but never dared to go into customizing my dashboard in high detail. After seeing some amazing dashboards I thing the time is there to start organizing things and make the Dashboard ready for other people in our house. I wanted to start of small with a custom Person card showing an avatar with some icons showing home/away state.

First thing I’m figuring out is how to make a image / avatar appear as background image, so I might manipulate it at a later point in time. Card pops up, but no image is showing with the background image that I have set.

Code below should be very basic and i might be over seeing something small, but cant figure it out atm… any pointers?!

type: custom:button-card
entity: person.<name>
aspect_ratio: 4/4
show_name: false
show_icon: false
    - padding: 4%
    - background-image: url("/local/images/<name here>_normal.png")
    - background-size: 90%
    - background-repeat: no-repeat
    - background-position: left middle
    - . .keep-background: 'true'

OK! found my error after some more googling… just created the www folder and dropped images in them… after creating the www folder, you should first reboot HA before it has any affect and can be addressed as /local/!

1 Like

I am the “lucky” one, it’s not working for me :upside_down_face:

Check this video:
Building the ULTIMATE PERSON CARD for Home Assistant! (
This guy is awesome, he creates a really nice dashboard also

1 Like

I followed this thread for a while and tested out several card designs, but didnt liked them very much. They didnt fitted my Dashboard.
I used the mushroom person card for a while and like it.
But i wanted the traveltime and current battery level in the card. So i ended up building the mushroom template card, copying the personcard and adjusting it so it fits my needs.

type: custom:mushroom-template-card
primary: ''
secondary: >
  {% set person = entity %} {% set bl = "sensor.iphone_von_xxxx_battery_level"
  %} {% set bs = "sensor.iphone_von_xxxx_battery_state" %} {% set rz =
  "sensor.reisezeit_xxxx_home" %}

  {% if states(bs) == "Charging" -%}⚡{%- else -%}🔋{%- endif %}{{states(bl)}}

  {% if (int(states(rz)) > 4) -%}

  {{states(rz)}} min

  {%- endif %}
icon: ''
layout: vertical
picture: '{{state_attr(entity,"entity_picture")}}'
entity: person.xxxx
badge_icon: |-
  {% if is_state(entity, "not_home") %}
  {% else %} 
    {{state_attr("zone." + states(entity),"icon")}}
  {%- endif %}
badge_color: |-
  {% if is_state(entity, ["home","home2"]) -%}
  {% elif is_state(entity, "not_home") %}
  {% elif state_attr("zone." + states(entity),"icon") | contains('office') %}
  {%- endif %}
  action: more-info
icon_color: ''
multiline_secondary: true
fill_container: true

just replace all xxxx with the right entity names

edit: i made the configuration a bit easier, so you dont have to set the variable everywhere where its already available from the tempalte card by setting the global entity by this

entity: person.xxxx

still replace the xxxx with the person name

the “sensor.reisezeit_xxxx_home” is my traveltime from the waze integration, pretty easy to setup

1 Like

@Mariusthvdb If you click this button at the top right

You can share a link, I deselect the date and time.
Whatever map settings and layers you choose will import with the link.
Also use the setting menu to adjust prior to copying link.

I also have my home assistant press the ‘P’ key on my Raspberry Pi to put Ventusky into Presentation Mode.

Ventusky will show differently on mobile vs full screen device.

The embed feature says it is not ready yet.

1 Like

@TheRed-E Yep I had been using it for about 2 years, finally prepared the dashboards for a family friendly user experience. It is now rolled out to all devices.

I really like yours so much. Thanks for sharing!!! Like you, I also have been using mushroom person card. And I found most of the samples do not fit into my dashboard. And yours is exactly what I want. I have 1 problem.

  1. Default Mushroom Person Card would show the zone location as primary info right under the picture. How can I use your yaml code to display the “Zone”?

yes, I had that, the link is identical to what I pasted before.

might be nice to see what they bring with the live image embed.

believe I’ve got enough weather cameras now :wink:
My only hope is they dont update when not displayed in the closed folds… not sure about that really, will open inspector to see about that network traffic

Usually the person Cards displays the person name as primary Info and the zone name as secondary.
But if you want the Zone name in primary thats the code for the primary info field
{{ state_attr("zone."+states(entity),"friendly_name") }}

in entity is already the state “home” for example, but if you want the friendly _name you request the attribute friendly_name from the specific zone

Thanks for your help. This works…except…for being 'not_home". It returns a “null” value. I would like to display “Away” instead of ‘null’ or ‘none’. Can you please help how I can tweak the statement? Thanks in advance.

yeah thats right
its the same logic as under the badge_icon

  {% if is_state(entity, "not_home") %}
  {% else %} 
    {{ state_attr("zone."+states(entity),"friendly_name") }}
  {%- endif %}