Person Cards - Show Off Yours

[mrgrlscz (StevenGrlscz)]

Hey, here’s my person_but_also card:

On your left: wife’s info.

• icon for car states (locked / running / windows etc…)
• colored circle for device tracker (green = home / blue = another known zone / pink = unknown)
• 2x “badge” for phone information ( battery + ring mode and phone state)
• the name zone (maison=home)

On your right: my info

• Same thing for car and second phone (work)

• fuel and exhaust fluid low level alert (badge)

• 2 lines of 4 icons for various stuff, including my main phone battery level and ring mode, desktop state, AVR state, calendar and more to come.

The card is designed for swiss-army-knife-card component. Here’s the code.

Code

type: custom:swiss-army-knife-card

entities:
  - entity: sun.sun #0
  - entity: person.olive #1
  - entity: sensor.tplt_olivecell_phone_state #2
  - entity: sensor.olivecell_battery_level #3
  - entity: device_tracker.bmw_116i #4
  - entity: sensor.tplt_device_tracker_bmw_116i #5
  - entity: sun.sun #6
  - entity: sun.sun #7
  - entity: sun.sun #8
  - entity: sun.sun #9
  - entity: sun.sun #10
  - entity: person.nova #11
  - entity: sensor.tplt_novacell_phone_state #12
  - entity: sensor.novacell_battery_level #13
  - entity: sun.sun #14
  - entity: sun.sun #15
  - entity: sun.sun #16
  - entity: sun.sun #17
  - entity: sun.sun #18
  - entity: sun.sun #19
  - entity: sun.sun #20
  - entity: person.alise #21
  - entity: sensor.tplt_alisecell_phone_state #22
  - entity: sensor.alisecell_battery_level #23
  - entity: device_tracker.alisecell #24
  - entity: sensor.tplt_device_tracker_alisecell #25
  - entity: sensor.tplt_alert_ford_focus #26
  - entity: sensor.fordpass_deepsleep #27
  - entity: sun.sun #28
  - entity: sun.sun #29
  - entity: sun.sun #30
  - entity: sensor.tplt_novadesktop_uplink #31
  - entity: switch.plug_nous_garage_avr #32
    icon: mdi:audio-video
  - entity: sun.sun #33
  - entity: calendar.google_alise_dg #34
    icon: mdi:calendar
  - entity: sun.sun #35
  - entity: sensor.tplt_weather_alisecell #36
  - entity: sensor.tplt_weather_alisecell
    attribute: alert_level #37
aspectratio: 5/1.3
layout:
  toolsets:
    # ================================================================================================================================
    # ================================================================================================================================
    # ================================================================ Olive
    # ================================================================================================================================
    # ================================================================================================================================

    # ================================================================ OliveCar Device Tracker
    # -------------------------- Circle
    - toolset: dt-circle
      position:
        cx: 30
        cy: 30
      tools:
        - entity_index: 4
          <<: &dt-circle
            type: circle
            position:
              cx: 50
              cy: 50
              radius: 45
            animations:
              - state: "unavailable"
                styles:
                  circle:
                    stroke: var(--secondary-text-color)
                    transition: stroke 3s ease
                    animation: flash 3s ease-in-out 2
              - state: "not_home"
                styles:
                  circle:
                    stroke: var(--nova-color)
                    transition: stroke 3s ease
                    animation: flash 3s ease-in-out 2
              - state: "home"
                styles:
                  circle:
                    stroke: var(--success-color)
            styles:
              circle:
                fill: none
                stroke: var(--info-color)
                stroke-width: 4em
                transition: stroke 3s ease
            user_actions:
              tap_action: none
    # -------------------------- Icon
    - toolset: dt-icon
      position:
        cx: 30
        cy: 30
      tools:
        - entity_index: 5
          <<: &dt-icon
            type: icon
            styles:
              icon:
                fill: var(--primary-text-color)
            position:
              cx: 50
              cy: 50
              align: center
              icon_size: 36
          user_actions:
            tap_action:
              haptic: selection
              actions:
                - action: fire-dom-event
                  browser_mod:
                    service: browser_mod.navigate
                    data:
                      path: /nova-dashboard/vehicle_bmw_116i
    ### -------------------------- State
    - toolset: dt-state
      position:
        cx: 80
        cy: 112
      tools:
        - entity_index: 5
          <<: &dt-state
            type: state
            position:
              cx: 50
              cy: 50
            show:
              uom: none
            styles:
              state:
                fill: var(--primary-text-color)
                text-anchor: middle
                font-size: 20em
                font-weight: 400
                opacity: 1
            user_actions:
              tap_action: ### warning, do not copy following outside SAK card
                haptic: selection
                actions:
                  - action: fire-dom-event
                    browser_mod:
                      service: browser_mod.popup
                      data:
                        content:
                          type: map
                          aspect_ratio: "1:1.85"
                          entities:
                            - person.alise
                            - person.olive
              # tap_action:
              #   haptic: selection
              #   actions:
              #     - action: fire-dom-event
              #       browser_mod:
              #         service: browser_mod.navigate
              #         data:
              #           path: /nova-dashboard/map

    # ================================================================ OliveCell Phone State
    - toolset: phone-badge
      position:
        cx: 75
        cy: 20
      tools:
        ### -------------------------- Circle
        - entity_index: 2
          <<: &phone-circle
            type: circle
            position:
              cx: 50
              cy: 50
              radius: 16
            animations:
              - state: "disponible"
                styles:
                  circle:
                    display: none # HIDE
              - state: "en ligne"
                styles:
                  circle:
                    stroke: var(--primary-text-color)
                    fill: var(--mantle)
                    transition: fill 3s ease
              - state: "sonne"
                styles:
                  circle:
                    stroke: var(--primary-text-color)
                    fill: var(--mantle)
                    transition: fill 3s ease
              - state: "silencieux"
                styles:
                  circle:
                    stroke: var(--primary-text-color)
                    fill: var(--mantle)
                    transition: fill 3s ease
              - state: "vibreur"
                styles:
                  circle:
                    stroke: var(--primary-text-color)
                    fill: var(--mantle)
                    transition: fill 3s ease
              - state: "hors ligne"
                styles:
                  circle:
                    stroke: var(--primary-text-color)
                    fill: var(--mantle)
                    transition: fill 3s ease
            styles:
              circle:
                stroke-width: 3px
            user_actions:
              tap_action: none

        ### -------------------------- Icon
        - entity_index: 2
          <<: &phone-icon
            type: icon
            position:
              cx: 50
              cy: 50
              align: center
              icon_size: 22
            animations:
              - state: "disponible"
                styles:
                  icon:
                    display: none # HIDE
              - state: "en ligne"
                styles:
                  icon:
                    fill: var(--success-color)
                    transition: fill 3s ease
              - state: "sonne"
                styles:
                  icon:
                    fill: var(--success-color)
                    transition: fill 3s ease
              - state: "silencieux"
                styles:
                  icon:
                    fill: var(--info-color)
                    transition: fill 3s ease
              - state: "vibreur"
                styles:
                  icon:
                    fill: var(--info-color)
                    transition: fill 3s ease
              - state: "hors ligne"
                styles:
                  icon:
                    fill: var(--warning-color)
                    transition: fill 3s ease
            user_actions:
              tap_action: none

    # ================================================================ OliveCell Battery Level
    - toolset: battery-badge
      position:
        cx: 65
        cy: 65
      tools:
        # -------------------------- Circle
        - entity_index: 3
          <<: &battery-circle
            type: circle
            position:
              cx: 50
              cy: 50
              radius: 16
            animations:
              - state: "95"
                operator: ">="
                styles:
                  circle:
                    stroke: var(--primary-text-color)
                    fill: var(--mantle)
                    transition: fill 3s ease
              - state: "30"
                operator: ">="
                styles:
                  circle:
                    display: none # HIDE
              - state: "30"
                operator: "<"
                styles:
                  circle:
                    stroke: var(--primary-text-color)
                    fill: var(--mantle)
                    transition: fill 3s ease
            styles:
              circle:
                stroke-width: 4px
            user_actions:
              tap_action: none

        # -------------------------- Icon
        - entity_index: 3
          <<: &battery-icon
            type: icon
            position:
              cx: 50
              cy: 50
              align: center
              icon_size: 22
            animations:
              - state: "95"
                operator: ">="
                styles:
                  icon:
                    fill: var(--success-color)
                    transition: fill 3s ease
              - state: "30"
                operator: ">="
                styles:
                  icon:
                    display: none # HIDE
              - state: "10"
                operator: ">"
                styles:
                  icon:
                    fill: var(--warning-color)
                    transition: fill 3s ease
              - state: "10"
                operator: "<="
                styles:
                  icon:
                    fill: var(--error-color)
                    transition: fill 3s ease
            user_actions:
              tap_action: none

    # # ================================================================ third Badge
    # - toolset: #3-badge
    #   position:
    #     cx: 20
    #     cy: 75
    #   tools:

    # ================================================================================================================================
    # ================================================================================================================================
    # ================================================================ Nova
    # ================================================================================================================================
    # ================================================================================================================================

    # ================================================================ Nova States
    # ================================================= Line A Stuff 1
    - toolset: A1-desktop
      position:
        cx: 195
        cy: 24
      tools:
        ### -------------------------- Icon
        - <<: &stuff-icon
            type: icon
            position:
              cx: 50
              cy: 50
              align: center
              icon_size: 32
          entity_index: 31
          animations:
            - state: "attention"
              styles:
                icon:
                  fill: var(--warning-color)
                  transition: fill 3s ease
            - state: "allumé"
              styles:
                icon:
                  fill: var(--info-color)
                  transition: fill 3s ease
            - state: "distance"
              styles:
                icon:
                  fill: var(--nova-color)
                  transition: fill 3s ease
            - state: "eteint"
              styles:
                icon:
                  fill: var(--primary-text-color)
                  transition: fill 3s ease
          user_actions:
            tap_action:
              haptic: selection
              actions:
                - action: navigate
                  navigation_path: "#office"

    # ================================================= Line A Stuff 2
    - toolset: A2-garage-avr
      position:
        cx: 255
        cy: 24
      tools:
        ### -------------------------- Icon
        - <<: *stuff-icon
          entity_index: 32
          animations:
            - state: "on"
              styles:
                icon:
                  fill: var(--nova-color)
                  transition: fill 3s ease
            - state: "off"
              styles:
                icon:
                  fill: var(--primary-text-color)
                  transition: fill 3s ease
          # user_actions:
          #   tap_action:
          #     haptic: success
          #     actions:
          #       - action: call-service
          #         # confirmation: # DO NOT WORK 12/2023
          #         #   text: Basculer l'ampli du garage? 
          #         service: switch.toggle
          #         target:
          #           entity_id: switch.plug_nous_garage_avr

    # # ================================================= Line A Stuff 3
    # - toolset: A3
    #   position:
    #     cx: 315
    #     cy: 24
    #   tools:
    #     ### -------------------------- Icon
    #     - <<: *stuff-icon

    # # ================================================= Line A Stuff 4
    - toolset: A4-calendar
      position:
        cx: 375
        cy: 24
      tools:
        ### -------------------------- Icon
        - <<: *stuff-icon
          entity_index: 34
          user_actions:
            tap_action:
              haptic: selection
              actions:
                - action: fire-dom-event
                  browser_mod:
                    service: browser_mod.navigate
                    data:
                      path: /calendar

    # ================================================================ Nova Badges
    # ================================================= Line B Stuff 1
    - toolset: B1-battery
      position:
        cx: 195
        cy: 73
      tools:
        ### -------------------------- Icon
        - <<: *stuff-icon
          entity_index: 13
          animations:
            - state: "95"
              operator: ">="
              styles:
                icon:
                  fill: var(--success-color)
                  transition: fill 3s ease
            - state: "30"
              operator: ">"
              styles:
                icon:
                  fill: var(--primary-text-color)
                  transition: fill 3s ease
            - state: "10"
              operator: ">"
              styles:
                icon:
                  fill: var(--warning-color)
                  transition: fill 3s ease
            - state: "10"
              operator: "<="
              styles:
                icon:
                  fill: var(--error-color)
                  transition: fill 3s ease
          user_actions:
            tap_action: none
        # -------------------------- State
        - entity_index: 13
          type: state
          position:
            cx: 50
            cy: 80
          styles:
            state:
              font-size: 16em
              opacity: 0.8
            uom:
              opacity: 0.4
          user_actions:
            tap_action: none

    # # ================================================= Line B Stuff 2
    - toolset: B2-phone
      position:
        cx: 255
        cy: 73
      tools:
        ### -------------------------- Icon
        - <<: *stuff-icon
          entity_index: 12
          animations:
            - state: "disponible"
              styles:
                icon:
                  fill: var(--primary-text-color)
                  transition: fill 3s ease
                  # display: none # HIDE
            - state: "en ligne"
              styles:
                icon:
                  fill: var(--success-color)
                  transition: fill 3s ease
            - state: "sonne"
              styles:
                icon:
                  fill: var(--success-color)
                  transition: fill 3s ease
            - state: "silencieux"
              styles:
                icon:
                  fill: var(--info-color)
                  transition: fill 3s ease
            - state: "vibreur"
              styles:
                icon:
                  fill: var(--info-color)
                  transition: fill 3s ease
            - state: "hors ligne"
              styles:
                icon:
                  fill: var(--warning-color)
                  transition: fill 3s ease
          user_actions:
            tap_action: none

    # # ================================================= Line B Stuff 3
    # - toolset: B3
    #   position:
    #     cx: 315
    #     cy: 73
    #   tools:
    #     ### -------------------------- Icon
    #     - <<: *stuff-icon

    # ================================================= Line B Stuff 4
    - toolset: B4-meteo-alise
      position:
        cx: 375
        cy: 73
      tools:
        # ### -------------------------- Circle (weather alise alert)
        # - type: circle
        #   position:
        #     cx: 50
        #     cy: 50
        #     radius: 20
        #   entity_index: 36
        #   animations:
        #     - state: "66"
        #       styles:
        #         circle:
        #           fill: var(--green)
        #           <<: &weather_alise
        #             opacity: 0.5
        #             transition: fill 10s ease
        #     - state: "84"
        #       styles:
        #         circle:
        #           fill: var(--red)
        #           <<: *weather_alise
        #   styles:
        #     circle:
        #       fill: none
        #       stroke-width: 0em
        #       transition: fill 3s ease
        #   user_actions:
        #       actions:
        #         - action: navigate
        #           navigation_path: "#meteo_alise"
        ### -------------------------- Icon (weather alise)
        - type: icon
          entity_indexes:
            - entity_index: 36
            - entity_index: 37
          position:
            cx: 50
            cy: 50
            align: center
            icon_size: 32
          styles:
            icon:
              stroke: 0em
              transition: fill 1s ease
              animation: none
          animations:
            - state: "84"
              operator: '!='
              entity_index: 36
              styles:
                icon:
                  fill: var(--primary-text-color)
                  transition: fill 1s ease
                  animation: flash 1s ease-in-out infinite
            - state: "Vert"
              entity_index: 37
              styles:
                icon:
                  transition: fill 7s ease
                  animation: flash 4s ease-in-out 2
            - state: "Jaune"
              entity_index: 37
              styles:
                icon:
                  fill: var(--yellow)
                  transition: fill 5s ease
                  animation: flash 3s ease-in-out infinite
            - state: "Orange"
              entity_index: 37
              styles:
                icon:
                  fill: var(--fire)
                  transition: fill 3s ease
                  animation: flash 2s ease-in-out infinite
            - state: "Rouge"
              entity_index: 37
              styles:
                icon:
                  fill: var(--red)
                  transition: fill 1s ease
                  animation: flash 1s ease-in-out infinite
            - state: "84"
              operator: ==
              entity_index: 36
              styles:
                icon:
                  fill: none
          user_actions:
            tap_action:
              actions:
                - action: navigate
                  navigation_path: "#meteo_alise"

    # ================================================================================================================================
    # ================================================================================================================================
    # ================================================================ Alise
    # ================================================================================================================================
    # ================================================================================================================================

    # ================================================================ AliseCell Device Tracker
    ### -------------------------- Circle
    - toolset: dt_circle
      position:
        cx: 470
        cy: 30
      tools:
        - entity_index: 24 # spé 25
          <<: *dt-circle
          # animations:
          #   - state: 'indisponible'
          #     styles:
          #       circle:
          #         stroke: var(--secondary-text-color)
          #         transition: stroke 3s ease
          #         animation: flash 3s ease-in-out 2
    ### -------------------------- Icon
    - toolset: dt-icon
      position:
        cx: 470
        cy: 30
      tools:
        - entity_index: 25
          <<: *dt-icon
          animations:
            - state: '[[[ return (state); ]]]'
              styles:
                icon:
                  fill: >-
                    [[[
                      if (states["sensor.fordpass_deepsleep"].state == 'ACTIVE') return 'var(--subtext0)';
                      return 'var(--primary-text-color)';
                    ]]]
          user_actions:
            tap_action:
              haptic: selection
              actions:
                - action: fire-dom-event
                  browser_mod:
                    service: browser_mod.navigate
                    data:
                      path: /nova-dashboard/vehicle_ford_focus
    ### -------------------------- State
    - toolset: dt-state
      position:
        cx: 355
        cy: 112
      tools:
        - entity_index: 25
          <<: *dt-state

    # ================================================================ AliseCell Phone State
    - toolset: phone-badge
      position:
        cx: 425
        cy: 20
      tools:
        # -------------------------- Circle
        - entity_index: 22
          <<: *phone-circle

        # -------------------------- Icon
        - entity_index: 22
          <<: *phone-icon

    # ================================================================ AliseCell Battery Level
    - toolset: battery-badge
      position:
        cx: 435
        cy: 65
      tools:
        # -------------------------- Circle
        - entity_index: 23
          <<: *battery-circle

        # -------------------------- Icon
        - entity_index: 23
          <<: *battery-icon

    # ================================================================ Ford Focus Alert
    - toolset: car-badge
      position:
        cx: 480
        cy: 75
      tools:
        ### -------------------------- Circle
        - entity_index: 26
          <<: &car-circle
            type: circle
            position:
              cx: 50
              cy: 50
              radius: 16
            animations:
              - state: "OK"
                styles:
                  circle:
                    display: none # HIDE
              - state: "Critique"
                styles:
                  circle:
                    stroke: var(--primary-text-color)
                    fill: var(--mantle)
                    transition: fill 3s ease
              - state: "Faible"
                styles:
                  circle:
                    stroke: var(--primary-text-color)
                    fill: var(--mantle)
                    transition: fill 3s ease
            styles:
              circle:
                stroke-width: 3px
            user_actions:
              tap_action: none

        ### -------------------------- Icon
        - entity_index: 26
          <<: &car-icon
            type: icon
            position:
              cx: 50
              cy: 50
              align: center
              icon_size: 22
            animations:
              - state: "OK"
                styles:
                  icon:
                    display: none # HIDE
              - state: "Critique"
                styles:
                  icon:
                    fill: var(--error-color)
                    animation: flash 2s ease infinite
                    transition: fill 3s ease
              - state: "Faible"
                styles:
                  icon:
                    fill: var(--warning-color)
                    animation: flash 4s ease infinite
                    transition: fill 3s ease
            user_actions:
              tap_action: none

    # ================================================================================================================================
    # ================================================================================================================================
    # ================================================================ Lines
    # ================================================================================================================================
    # ================================================================================================================================
    ### -------------------------- Line
    - toolset: line1
      position:
        cx: 160
        cy: 65
      tools: &line
        - type: line
          position:
            cx: 50
            cy: 50
            orientation: vertical
            length: 90
          styles:
            line:
              fill: var(--primary-text-color)
              opacity: 0.8
    # ### -------------------------- Line
    # - toolset: line2
    #   position:
    #     cx: 340
    #     cy: 75
    #   tools: *line

[versile2 (Versile Johnson II)]

Thanks to @VaReTaS for the inspiration I’ve finished my Person card. Card is below, I’ll probably add Name and fix anything that doesn’t work properly over the next few days but I’m pretty sure it’s solid. I moved ALL of the phone/entity code to the top variables section so if you want to use it you only have to edit the first 20 lines or so (a comment tells you to stop). Doesn’t matter if you use Iphone or Android my code will change the differences to one or the other version. The part that says “At Home” changes to minutes from home when a person leaves the house. In order for that to work go to integrations, add waze (or your choice) and add an integration for each person (don’t forget to rename the entity so you know which is which). Also any integration that reports a person location will update the latitude/longitude by a priority tree. Speed is tied to the phone tracker, but if you go with other integrations (like Life360) you can get more real time information. just keep in mind our phones reports meters per second and I’m changing it to miles per hour. No idea what these other integrations report, just modify the variable code and all will be right.

type: custom:button-card
variables:
  personObj: person.versile_johnson
  personIcon: '[[[ return states[''person.versile_johnson''].attributes.icon; ]]]'
  connType: |
    [[[ 
      var conn = states['sensor.pixel_versile_network_type'].state.toString().toLowerCase();      
      // turn iphone wi-fi to android wifi
      return conn == 'wi-fi' ? 'wifi' : conn;
    ]]]
  connIcon: '[[[ return states[''sensor.pixel_versile_network_type''].attributes.icon; ]]]'
  wifiName: |
    [[[ 
      var name = states['sensor.pixel_versile_wifi_connection'].state.toString().toLowerCase();
      // turn iphone Not Connected to android <not connected>
      return (name == "not connected") ? '&lt;not connected&gt;' : name; 
    ]]]
  battLevel: '[[[ return states[''sensor.pixel_versile_battery_level''].state; ]]]'
  battState: |
    [[[
      var state = states['sensor.pixel_versile_battery_state'].state.toString().toLowerCase();
      // turn android states to iphone
      if (state == "not_charging" || state == "discharging") { "not charging"; }
      return state;
    ]]]
  latitude: '[[[ return states[''person.amy_johnson''].attributes.latitude; ]]]'
  longitude: '[[[ return states[''person.amy_johnson''].attributes.longitude; ]]]'
  travelTime: |
    [[[
      return states['sensor.amy_waze_travel_time'].state + " minutes to Home";
    ]]]
  speedTracker: |
    [[[ 
        return states['device_tracker.iphone'].attributes.speed; 
    ]]]
  altSpeed: |
    [[[ 
         var status = states['sensor.iphone_activity'].state.toString().toLowerCase();
         // turn android into iphone states
         if (status == 'unknown' || status == 'still' || status == 'tilting') { status = 'Stationary'; }
         else if (status == 'in-vehicle') { status = 'automotive'; } 
         else if (status == 'on-bicycle') { status = 'cycling'; }
         else if (status == 'on_foot') { status = 'walking'; }
         return status;
    ]]]
  zaltIcon: |
    [[[ 
      var iconStr = states['sensor.iphone_activity'].attributes.icon.toString().toLowerCase();
      if (iconStr == 'mdi:help-circle') { iconStr = variables.personIcon; }
      return iconStr;
    ]]]
  homeLat: xxxx
  homeLong: xxxx
  workLat: xxxx
  workLong: xxxx
  midDistance: 30
  maxDistance: 65
  midBattery: 30
  maxBattery: 75
  midSpeed: 45
  maxSpeed: 70
  colorBad: red
  colorMid: blue
  colorGood: green
  threshold: 0.1
# end of editing region
  whereAreYou: '[[[ return states[variables.personObj].state; ]]]'
  speedInt: |
    [[[ 
      var spd_int = parseInt(variables.speedTracker);
      // turn value from meters to miles /hour
      return (spd_int > 8) ? spd_int * 2.2369 : -1; 
    ]]]
  getDistanceStr: |
    [[[      
      return `

        var R = 6371; \
        var dLat = (lat2 - lat1) * (Math.PI / 180); \
        var dLon = (lon2 - lon1) * (Math.PI / 180); \
        var a = \
          Math.sin(dLat / 2) * Math.sin(dLat / 2) + \
          Math.cos(lat1 * (Math.PI / 180)) * \
            Math.cos(lat2 * (Math.PI / 180)) * \
            Math.sin(dLon / 2) * \
            Math.sin(dLon / 2); \
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); \
        var distance = R * c; \
        distance = distance * 0.621371; \
        return distance;   \
        `;
    ]]]
  zDistanceToHome: |
    [[[
      const getDistance = new Function("lat1", "lon1", "lat2", "lon2", variables.getDistanceStr);
      const distance = getDistance(variables.homeLat, variables.homeLong,
                                   variables.latitude, variables.longitude);
      return distance;
    ]]]
  zDistanceToWork: |
    [[[
      const getDistance = new Function("lat1", "lon1", "lat2", "lon2", variables.getDistanceStr);
      const distance = getDistance(variables.workLat, variables.workLong,
                                   variables.latitude, variables.longitude);
      return distance;
    ]]]    
  zbattIcon: |
    [[[ 
      var battLvl = variables.battLevel;
      var isCharging = variables.battState == 'charging';
      var icon = 'mdi:battery';
      
      if (isCharging) { icon += '-charging'; }
      
      if (battLvl == 100) { icon = 'mdi:battery'; }
      else if (battLvl > 89) { icon += '-90'; }
      else if (battLvl > 79) { icon += '-80'; }
      else if (battLvl > 69) { icon += '-70'; }
      else if (battLvl > 59) { icon += '-60'; }
      else if (battLvl > 49) { icon += '-50'; }
      else if (battLvl > 39) { icon += '-40'; }
      else if (battLvl > 29) { icon += '-30'; }
      else if (battLvl > 19) { icon += '-20'; }
      else { icon += '-10'; }
      return icon;
    ]]]    
  safetyColor: null
  mantisColor: null
entity: '[[[ return variables.personObj ]]]'
triggers_update: all
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: '[[[ return variables.colorGood; ]]]'
  - value: away
    styles:
      custom_fields:
        icon:
          - border-color: '[[[ return variables.colorBad; ]]]'
  - value: work
    styles:
      custom_fields:
        icon:
          - border-color: '[[[ return variables.colorMid; ]]]'
styles:
  card:
    - 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 icon status" "bar bar battery" "wifi speed proximity" "n n n"'
    - grid-template-columns: auto
    - grid-template-rows: 4fr 1fr 1fr
  name:
    - font-size: 15px
    - align-self: middle
    - justify-self: start
    - padding-bottom: 10px
  custom_fields:
    icon:
      - clip-path: circle()
      - width: 80%
      - 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
    proximity:
      - padding: 0.5em 0px
      - align-self: middle
      - justify-self: start
    wifi:
      - padding: 0.5em 0px
      - align-self: middle
      - justify-self: start
    battery:
      - padding: 0.5em 0px
      - align-self: middle
      - justify-self: middle
      - color: white
    speed:
      - padding: 0.5em 0px
      - align-self: left
      - justify-self: left
      - color: white
custom_fields:
  icon: >
    [[[ return entity === undefined ? null : `<img
    src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
    ]]]
  status: |
    [[[
      var whereAreYou = variables.whereAreYou;

      // Calculate the distance between the person's location and work
      var workDistance = variables.zDistanceToWork;

      // Define a threshold distance for considering the person at home or work (e.g., 0.1 miles)
      var threshold = variables.threshold;

      var area, text, color;

      // Check if the person is at home from phone state
      if (whereAreYou === 'home') {
        area = 'mdi:home';
        text = 'Home';
        color = variables.colorGood;
        entity.state = 'home';
      } else if (workDistance <= threshold) {
        // Check if the person is at work
        area = 'mdi:briefcase';
        text = 'Work';
        color = variables.colorMid;
        entity.state = 'work';
      } else {
        // The person is neither at home nor at work
        area = 'mdi:map-marker-radius';
        text = 'Away';
        color = variables.colorBad;
        entity.state = 'away';
      }

      return `
        <ha-icon
          icon="${area}"
          style="width: 20px; height: 20px; color: ${color};">
        </ha-icon>
        <span style="color: ${color};">${text}</span>`;
    ]]]
  proximity: |
    [[[
      var distance = variables.zDistanceToHome;

      var color;
      if (distance > variables.maxDistance) {
        color = variables.colorBad;
      } else if (distance > variables.midDistance) {
        color = variables.colorMid;
      } else {
        color = variables.colorGood;
      }

      return `
        <ha-icon
          icon="mdi:map-marker-distance"
          style="width: 20px; height: 20px; color: ${color};">
        </ha-icon>
        <span>
          <span style="color: ${color};">${distance.toFixed(1)} miles</span>
        </span>`;
    ]]]
  battery: |
    [[[
      var batteryLevel = variables.battLevel;
      var batteryState = variables.battState;
      var batteryColor;
      
      if (batteryLevel >= variables.maxBattery) {
        batteryColor = variables.colorGood;
      } else if (batteryLevel >= variables.midBattery) {
        batteryColor = variables.colorMid;
      } else {
        batteryColor = variables.colorBad;
      }
      
        return `
          <ha-icon
            icon="${variables.zbattIcon}"
            style="width: 20px; height: 20px; color: ${batteryColor};">
          </ha-icon>
          <span>
            <span style="color: ${batteryColor};">${batteryLevel}%</span>
          </span>`;
    ]]]
  wifi: |
    [[[
      var connType = variables.connType;
      var wifiName = variables.wifiName;
      var wifiColor;
      var wifiText;

      if (connType == 'cellular') {
        wifiColor = variables.colorMid;
        wifiText = 'Cellular';
      } else if (connType == 'wifi') {
        wifiColor = variables.colorGood; 
        wifiText = wifiName;
      }

      if (wifiText == null || wifiText == '') {
        wifiText = 'No Bueno';  
        wifiColor = variables.colorBad;
      }

      return `
        <ha-icon 
          icon="${variables.connIcon}"
          style="width: 20px; height: 20px; color: ${wifiColor};">
        </ha-icon>
        <span style="color: ${wifiColor};">${wifiText}</span>`; 
    ]]]
  speed: |
    [[[
      var speed = variables.speedInt;
      var altStatus = variables.altSpeed;
      var aColor = variables.colorMid;

      if (altStatus == 'cycling' || 
          altStatus == 'running' ) {
            aColor = variables.colorBad;
      } else if (altStatus == 'stationary') {
            aColor = variables.colorMid;
      } else {
          aColor = variables.colorGood;
      }

      if (speed !== -1) {      
        if (speed_int > variables.maxSpeed) {
          return `<ha-icon icon="mdi:speedometer" style="width: 20px; height: 20px; color: ${variables.colorBad};"></ha-icon>
                  <span style="color: ${variables.colorBad};"> ${speed.toFixed(0)} mph</span>`;
        } else if (speed_int > variables.midSpeed) {
          return `<ha-icon icon="mdi:speedometer-medium" style="width: 20px; height: 20px; color: ${variables.colorMid};"></ha-icon>
                  <span style="color: ${variables.colorMid};"> ${speed.toFixed(0)} mph</span>`;         
        } else {
          return `<ha-icon icon="mdi:speedometer-slow" style="width: 20px; height: 20px; color: ${variables.colorGood};"></ha-icon>
                  <span style="color: ${variables.colorGood};"> ${speed.toFixed(0)} mph</span>`;         
        }
      }
      else {
        return `
          <ha-icon 
            icon="${variables.zaltIcon}" style="width: 20px; height: 20px; color: ${aColor};">
          </ha-icon>
          <span style="color: ${aColor};">${altStatus}</span>`; 
      }
    ]]]
  bar: |
    [[[
    var travelTime = variables.travelTime;
    if (variables.whereAreYou == 'home') { travelTime = 'At Home'; }
    return `
      <div style="background-color: #ddd; display: block; direction: ltr;">
        ${travelTime}
      </div>
          `;
    ]]]

[versile2 (Versile Johnson II)]

Without having your code to actually verify what the problem is I can’t say, but you can simplify by making a line up top to grab your states in a variable then return just the variable first then add sections to it until you find the error. Also I modified that card to put entities up top to make it easier if that’s easier for you.

V

[Osher]

@Fr3di @versile2
I’m apologize, you are right guys. I’m new here and new to HA.
I have edited my comment and replaced the screenshot with the code.

I did replace all the ‘person.xxx’ with mine for example just to see if it works. Still doesn’t.

[Fr3di]

Do you see any errors?
This cards shows multiple informations and require to use multiple sensors. There is few more sensors you would have to replace with yours corresponding names:

• sensor.mobile_wifi_connection
• sensor.mobile_battery_level
• sensor.ad_s9_aim_battery_level
• proximity.ad_home

[jlnbln (Julian)]

I took a room card from @hellboy-wien from the rounded thread and made two person cards of it. In case anyone wants to use them here is the code.

Big Version:

type: custom:button-card
name: Person
show_name: false
show_state: false
show_icon: true
show_entity_picture: true
entity: person.person
tap_action:
  action: more-info
styles:
  card:
    - background-color: var(--contrast2)
    - padding: 10px 0px 10px 10px
  grid:
    - grid-template-areas: '"name name btn" "state btn1 btn" "icon btn1 btn"'
    - grid-template-columns: 3fr min-content min-content
    - grid-template-rows: 1em 1em 1fr
  img_cell:
    - justify-content: start
    - position: absolute
    - width: 90px
    - height: 90px
    - left: 0
    - bottom: 0
    - margin: 0 0 -10px -10px
    - border-radius: 500px
  entity_picture:
    - justify-content: start
    - position: absolute
    - width: 90px
    - height: 90px
    - left: 0
    - bottom: 0
    - margin: 0 0 0 0
    - border-radius: 500px
  icon:
    - width: 45px
    - color: var(--contrast1)
  custom_fields:
    name:
      - align-self: start
      - justify-self: start
      - background: none
      - padding: 5px
    state:
      - align-self: start
      - justify-self: start
      - background: none
      - padding: 5px
      - margin-top: 5px
    btn1:
      - align-self: end
      - justify-self: end
      - padding-right: 8px
    btn:
      - align-self: end
      - justify-self: end
      - padding-right: 5px
    icon:
      - align-self: start
      - justify-self: start
custom_fields:
  name:
    card:
      type: custom:button-card
      name: Person
      styles:
        card:
          - color: var(--contrast20)
          - font-size: 18px
          - font-weight: 500
          - background: none
  state:
    card:
      type: custom:button-card
      entity: person.person
      show_icon: false
      name: |
        [[[ 
          return states['person.person'].state;
        ]]]
      state:
        - value: home
          name: Home
        - value: not_home
          name: Away
      styles:
        card:
          - color: var(--contrast20)
          - font-size: 13px
          - background: none
          - opacity: '0.7'
  btn:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: entity
          tap_action:
            action: more-info
          entity: sensor.person_battery_level
          content_info: none
          card_mod:
            style: |
              ha-card {
                --chip-background: {{ 'var(--contrast4)' if states('sensor.person_battery_level') | float > 10  else 'var(--red)' }};
                --color: {{ 'var(--contrast20)' if states('sensor.person_battery_level') | float > 10  else 'var(--black)' }};
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
        - type: entity
          tap_action:
            action: more-info
          entity: sensor.person_iphone_steps
          content_info: none
          card_mod:
            style: |
              ha-card {
                --chip-background: {{ 'var(--green)' if states('sensor.person_iphone_steps') | float > states('sensor.person2_iphone_steps') | float  else 'var(--red)' }};
                --color: var(--black);
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
        - type: entity
          tap_action:
            action: more-info
          entity: sensor.home_person_direction_of_travel
          content_info: none
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--contrast4);
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);

              }

Small Version:

type: custom:button-card
name: Person
show_name: false
show_state: false
show_icon: true
show_entity_picture: true
entity: person.Person
tap_action:
  action: more-info
styles:
  card:
    - background-color: var(--contrast2)
    - padding: 10px 10px 10px 0px
  grid:
    - grid-template-areas: '"icon name btn" "icon state btn"'
    - grid-template-columns: 60px 1fr min-content
    - grid-template-rows: min-content
  img_cell:
    - justify-content: start
    - position: absolute
    - width: 40px
    - height: 40px
    - left: 0
    - bottom: 0
    - margin: 0 0 8px 10px
    - border-radius: 500px
  entity_picture:
    - justify-content: start
    - position: absolute
    - width: 40px
    - height: 40px
    - left: 0
    - bottom: 0
    - margin: 0 0 0 0
    - border-radius: 500px
  icon:
    - width: 50px
    - color: var(--contrast1)
  custom_fields:
    name:
      - align-self: start
      - justify-self: start
      - background: none
      - padding: 0
    state:
      - align-self: start
      - justify-self: start
      - background: none
      - padding: 0
      - margin-top: '-5px'
    btn:
      - align-self: end
      - justify-self: end
    icon:
      - align-self: start
      - justify-self: start
custom_fields:
  name:
    card:
      type: custom:button-card
      name: Person
      styles:
        card:
          - color: var(--contrast20)
          - font-size: 14px
          - font-weight: 600
          - background: none
  state:
    card:
      type: custom:button-card
      entity: person.Person
      show_icon: false
      name: |
        [[[ 
          return states['person.Person'].state;
        ]]]
      state:
        - value: home
          name: Home
        - value: not_home
          name: Away
      styles:
        card:
          - color: var(--contrast20)
          - font-size: 12px
          - background: none
          - opacity: '0.7'
  btn:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: entity
          tap_action:
            action: more-info
          entity: sensor.Persons_battery_level
          content_info: none
          card_mod:
            style: |
              ha-card {
                --color: {{ 'var(--contrast20)' if states('sensor.Persons_battery_level') | float > 10  else 'var(--black)' }};
                --chip-background: {{ 'var(--contrast4)' if states('sensor.Persons_battery_level') | float > 10  else 'var(--red)' }};
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);

[Rikvz (Rik van Zoest)]

Do you have the code for this? Looks great.

[Frosty]

it’s not the best layout wise there’s alot of margins to position entity’s. would have been better to use button card.
I’ve changed it since that post but feel free to add and remove sensors to your needs

type: vertical-stack
cards:
  - type: custom:mushroom-template-card
    primary: 'p e o p l e '
    icon: mdi:account
    secondary: 'o n e '
    icon_color: blue
    card_mod:
      style: |

        ha-card {

            --card-primary-font-size: 1.5rem;
            --primary-text-color: white;
            --secondary-text-color: green;
            border: 1px;

            box-shadow: none;

            background: rgba(0,0,0,0);

            margin-top: 1.5rem;

         }
  - square: false
    type: grid
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-person-card
            entity: person.simon_benson
            card_mod:
              style: |
                ha-card {
                  height: 200px !important;
                  width: 210px !important;
                  padding: 12px 20px 12px 20px !important;
                  --icon-size: 130px !important;
                  border-radius: 5px;
                  border-right: 2px dash #008000; 
                  background-color: none !important;
                }
            use_entity_picture: true
            name: Simon Benson
            secondary_info: none
            layout: vertical
          - type: vertical-stack
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: entity
                    entity: proximity.home
                    icon: mdi:home-map-marker
                    icon_color: primary
                alignment: start
                card_mod:
                  style: |
                    ha-card {
                      --chip-background: none;
                      --chip-border: none !important;
                      --chip-box-shadow: none !important;
                      margin-left: -100px;
                    }
              - type: custom:mushroom-chips-card
                chips:
                  - type: entity
                    entity: sensor.time_to_home
                    icon: mdi:home-clock
                    icon_color: primary
                alignment: start
                card_mod:
                  style: |
                    ha-card {
                      --chip-background: none;
                      --chip-border: none !important;
                      --chip-box-shadow: none !important;
                      margin-left: -100px;
                      margin-top: -25px;
                    }
      - type: custom:stack-in-card
        card_mod:
          style: |
            ha-card {
              border-left: 2px solid grey; 
              border-radius: 0px;
            } 
        cards:
          - type: vertical-stack
            cards:
              - type: custom:mushroom-template-card
                primary: >-
                  {{ states('sensor.simonsphone_battery_level') }}% {{
                  states('sensor.simonsphone_battery_state') }}
                secondary: ''
                icon: >-
                  {{ 'mdi:battery-40' if 'discharging' in
                  states('sensor.simonsphone_battery_state')

                  else 'mdi:battery-charging-40' }} 
                icon_color: >-
                  {% set battery = states('sensor.simonsphone_battery_level') |
                  int %}

                  {% if battery < 35 %}
                    red
                  {% elif battery < 50 %}
                    orange
                  {% elif battery < 70 %}
                    yellow
                  {% else %}
                    green
                  {% endif %}
                multiline_secondary: true
                badge_icon: >-
                  {{ '' if 'discharging' in
                  states('sensor.simonsphone_battery_state')

                  else 'mdi:lightning-bolt-circle' }} 
                badge_color: green
                card_mod:
                  style: |
                    ha-card {
                      height: 40px !important;
                      padding: 12px 10px 12px 20px !important;
                      --icon-size: 30px !important;
                    }
          - type: custom:mushroom-template-card
            primary: >-
              {% if 'not connected' in
              states('sensor.simonsphone_wifi_connection') %}
                  No Wifi
              {% else %}
                  {{ states('sensor.simonsphone_wifi_connection') }}
              {% endif %}
            secondary: ''
            icon: >-
              {{ 'mdi:wifi-alert' if 'off' in
              states('binary_sensor.simonsphone_wifi_state')

              else 'mdi:wifi' }} 
            icon_color: >-
              {{ 'red' if 'off' in
              states('binary_sensor.simonsphone_wifi_state')

              else 'green' }}
            multiline_secondary: false
            badge_icon: ''
            badge_color: ''
            card_mod:
              style: |
                ha-card {
                  height: 40px !important;
                  padding: 12px 10px 12px 20px !important;
                  --icon-size: 30px !important;
                }
          - type: custom:mushroom-template-card
            primary: |-
              {% if '0' in states('sensor.simonsphone_bluetooth_connection') %}
                  No Bluetooth
              {% else %}
                  
              {% endif %}
            secondary: >-
              {{
              state_attr('sensor.simonsphone_bluetooth_connection','connected_paired_devices')
              }}
            icon: >-
              {{ 'mdi:bluetooth-off' if '0' in
              states('sensor.simonsphone_bluetooth_connection')

              else 'mdi:bluetooth' }}  
            icon_color: >-
              {% set connection =
              states('sensor.simonsphone_bluetooth_connection') | int %}

              {% if connection <= 0 %}
                red
              {% else %}
                green
              {% endif %}
            multiline_secondary: true
            badge_icon: ''
            badge_color: ''
            card_mod:
              style: |
                ha-card {
                  height: 40px !important;
                  padding: 12px 10px 12px 20px !important;
                  --icon-size: 30px !important;
                }
          - type: custom:mushroom-entity-card
            icon_color: green
            name: Bluetooth
            layout: horizontal
            primary_info: state
            secondary_info: none
            entity: sensor.simonsphone_sim_1
            icon: mdi:signal
            card_mod:
              style: |
                ha-card {
                  height: 40px !important;
                  padding: 12px 10px 12px 20px !important;
                  --icon-size: 30px !important;
                } 
          - type: custom:mushroom-entity-card
            icon_color: green
            layout: horizontal
            primary_info: state
            secondary_info: none
            icon: ''
            entity: sensor.simon_s_phone_ringer_mode
            name: Audio
            card_mod:
              style: |
                ha-card {
                  height: 40px !important;
                  padding: 12px 10px 12px 20px !important;
                  --icon-size: 30px !important;
                } 
      - type: custom:mushroom-template-card
        primary: ''
        secondary: '{{ states(''sensor.simon'') }}'
        icon: mdi:map-search-outline
        multiline_secondary: true
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              height: 50px !important;
              width: 400px !important;
              padding: 12px 10px 12px 20px !important;
              --icon-size: 30px !important;
              margin-top: -10px;
            } 
    columns: 2

should give you something like this

only thing I wanted to change was to remove the mac address but never worked it out I would guess it would be regex_replace or similar.

[reaper86]

Thank you for sharing your code, even if I am just beginning with HA I was able to adapt it for our Dashboard. Very much regard for your great work!

[hillshome]

Has anyone added swipe card to the person card? More info on different pages?

[Osher]

What did you change in the code to get it work? I’m also a begginer and doesn’t work for me

[Prankish8407]

After many many many hours of reading trough this post, stealing info from left and right, adjusting it to my needs i finally have my first version mobile version.
(still need to add and adjust some stuff in the coming days)

When the final thing is done and people want it ill put the code down when its done.

Edit:
Left side icons are for Roomba
Middle top are for Mobile
Right side are for medicine (dont have correct icons yet).

Slider is for all main lights and the buttons below turn them on 1 by 1, and by holding it you can adjust the light color / brightness individual.

Still have to add:

• Bluetooth speaker
• fans
• icons
• some clean-up / alignments.

[jimpower]

Here is mine WIP more of a person page as I build out a dashboard for wall mounted panels to go into the new house build.

[reaper86]

I just modified the variables in the beginning to the sensors from my phone. But don’t do the proximity sensor, that need to be your home state.

variables:
  phone_battery_level_sensor: '[[[ return states["sensor.phone_battery_level"].state]]]'
  phone_battery_state_sensor: '[[[ return states["sensor.phone_battery_state"].state]]]'
  phone_wifi_sensor: '[[[ return states["sensor.phone_wifi_connection"].state]]]'
  proximity_sensor: '[[[ return states["sensor.home_proximity"].state]]]'

[deifel]

Hello everyone,

I got the following map to work (I’m a noob and new to this). Thank you!
The only problem I have is that the distance now shows kilometers, but the number is meters. Can someone tell me how I can adjust this? Do I have to adjust this in the map’s config file or in the distance integration?

Here is the code for my card:
Thanks in advance

type: custom:button-card
entity: person.admin
variables:
  phone_battery_level_sensor: '[[[ return states["sensor.handy_frank_battery_level"].state]]]'
  phone_battery_state_sensor: '[[[ return states["sensor.handy_frank_battery_state"].state]]]'
  phone_wifi_sensor: '[[[ return states["sensor.handy_frank_wifi_connection"].state]]]'
  proximity_sensor: '[[[ return states["sensor.home_frank_entfernung"].state]]]'
aspect_ratio: 2/1
name: Person
show_entity_picture: true
show_name: false
hold_action:
  action: none
state:
  - value: home
    styles:
      card:
        - background-color: '#202124'
      custom_fields:
        icon:
          - border-color: '#77c66e'
  - value: not_home
    styles:
      card:
        - background-color: '#202124'
      custom_fields:
        icon:
          - border-color: deepskyblue
  - value: Pizzeria
    styles:
      card:
        - background-color: '#202124'
      custom_fields:
        icon:
          - border-color: '#B83838'
styles:
  card:
    - background-color: '#202124'
    - border-radius: 5%
    - padding: 2% 5% 5% 5%
    - color: gray
    - font-size: 10px
    - text-shadow: 0px 0px 0px black
    - text-transform: capitalize
    - justify-self: center
    - align-content: center
  grid:
    - grid-template-areas: '"icon status" "icon battery" "icon wifi" "icon proximity"'
    - grid-template-columns: 1.5fr 1fr
    - grid-template-rows: 1fr 1fr 1fr 1fr
    - align-content: center
  name:
    - font-size: 15px
    - align-self: middle
    - justify-self: start
  custom_fields:
    icon:
      - clip-path: circle()
      - width: 60%
      - pointer-events: none
      - display: grid
      - border: 5px solid
      - border-color: '#808080'
      - border-radius: 500px
      - margin: 0 0 0 0
      - opacity: 1
      - align-self: center
      - justify-self: center
    status:
      - justify-self: start
      - color: gray
    proximity:
      - align-self: middle
      - justify-self: start
      - color: gray
    wifi:
      - justify-self: start
      - color: gray
      - '--text-wifi-color-sensor': >-
          [[[ if (variables.phone_wifi_sensor == '<not connected>') return
          "#aaaaaa"; ]]]
    battery:
      - align-self: middle
      - justify-self: start
      - color: gray
      - '--text-color-sensor': >-
          [[[ if (variables.phone_battery_level_sensor < 35) return "#EF4F1A";
          ]]]
custom_fields:
  icon: >
    [[[ return entity === undefined ? null : `<img
    src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
    ]]]
  status: |
    [[[
      if (entity.state =='not_home') { 
      return `<ha-icon icon="mdi:home-export-outline"
        style="width: 20px; height: 20px; color: '#888888';">
        </ha-icon><span> On the way</span>`;
      } 
      if (entity.state =='home') { 
      return `<ha-icon 
        icon="mdi:home"
        style="width: 20px; height: 20px; color: 888888;">
        </ha-icon><span> ${entity.state}</span>`;
      } else { 
        if (entity.state =='[YOUR OTHER LOCATION]') { 
        return `<ha-icon icon="mdi:pizza"
          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 (variables.phone_battery_state_sensor =='charging') { 
        return `<ha-icon
        icon="mdi:battery-charging-medium"
        style="width: 20px; height: 20px; color: #888888;">
        </ha-icon> <span><span style="color: var(--text-color-sensor);">${variables.phone_battery_level_sensor}% Battery</span></span>`;
      } else {
        return `<ha-icon
        icon="mdi:battery-medium"
        style="width: 20px; height: 20px; color: #888888;">
        </ha-icon> <span><span style="color: var(--text-color-sensor);">${variables.phone_battery_level_sensor}% Battery</span></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);">${variables.proximity_sensor} Km</span></span>`
    ]]]
  wifi: |
    [[[
      if (variables.phone_wifi_sensor.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);">${variables.phone_wifi_sensor}</span></span>`;
      }
    ]]]

[Braakie (Raymond)]

@deifel

proximity

Has nothing to do with the person card. Go to your proximity integration and click on the sensors with distance in the name. Click on the gear and there you will see the field with the unit of measurement, where you can adjust it yourself.

[hillshome]

how did you get the arrived at?

[Fr3di]

I have created a trigger-based template sensor which looks like this:

- trigger:
    - platform: state
      entity_id: person.NAME
      to: 'home'
  sensor:
  - unique_id: time_arrived_home_NAME
    name: Time Arrived Home NAME
    icon: "mdi-home-clock"
    state: >
      {% set last_changed = states.person.NAME.last_changed | as_local %}
      {% if last_changed < today_at() - timedelta(days=1) %}
        {{ last_changed.strftime('%A at %-H:%M') }}
      {% elif last_changed < today_at() %}
        {{ last_changed.strftime('yesterday %-H:%M') }}
      {% else %}
        {{ last_changed.strftime('at %-H:%M') }}
      {% endif %}

[jmcwheeler (Joey)]

Love the small version of this! I’d like to incorporate the icon of the location of the user similar to the mushroom person card. Any idea how to add? I’ve played around and haven’t been able to get it. Sample below of the mushroom person card.

[versile2 (Versile Johnson II)]

The example your pulling from is a custom:button-card which is an awesome and very flexible very complicated card. The picture you are showing is identical to the mushroom person card. Here would be configuration, which is barebones default would show what you want.

type: custom:mushroom-person-card
entity: person.vsauce
icon_type: entity-picture

Custom Mushroom Entity Card