person_display.yaml

type: custom:button-card
entity: person.clifford_w_hansen
aspect_ratio: 1/1
name: Person
show_entity_picture: true
show_name: false
tap_action:
  action: navigate
  navigation_path: /lovelace/main-bedroom
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: white
    - 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 time_to_home" "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: 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
      - color: gray
    proximity:
      - padding: 0.5em 0px
      - align-self: middle
      - justify-self: start
      - color: gray
    time_to_home:
      - 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.clifford_phone_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.clifford_phone_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.clifford_w_hansen'].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.clifford_w_hansen'].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.clifford_home'].state} Kms</span></span>`
    ]]]
  time_to_home: |
    [[[
      return `<ha-icon
        icon="mdi:map-clock"
        style="width: 20px; height: 20px; color: #888888;">
        </ha-icon>  <span>\<span style="color: var(--text-color-sensor);">${states['sensor.clifford_time_to_home'].state} min(s)</span></span>`
    ]]]
  battery: |
    [[[
      if (states['sensor.clifford_phone_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.clifford_phone_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.clifford_phone_battery_level'].state}% battery</span></span>`;
      }
    ]]]
  wifi: |
    [[[
      if (states['sensor.clifford_phone_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.clifford_phone_wifi_connection'].state}</span></span>`;
      }
    ]]]