Help with Person Card for Newb

Configuration Frontend
#1

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)
    -distance or time to home (or both)…I already have the waze travel time integration installed.
    So far this is what I’ve come up with (on two cards)
    dashboard

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
#2

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.

#3

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

#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

image
image952×1186 85.1 KB

it will pop up with something in it, like this:

image_2023-03-01_092837891
image_2023-03-01_0928378911001×280 24.2 KB

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:
image_2023-03-01_093404911

Still some tweaking to do