Person Cards - Show Off Yours

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 :slight_smile:

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 looks good, thank you very much :+1: :+1:

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:
Person_card
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:

  1. home
  2. not_home
  3. 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 :slightly_smiling_face:

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 :+1:

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;
        }

Screenshot 2024-07-14 at 12.43.24

This is what I’d like to get when clicking on someone:

1 Like