Custom-card "Person"

This is a custom-card that improves the original person card (card_person) by automatically using all zones and adding a pop-up window inspired by the nice theme of @matt8707

Credits

Author: imswel - 2022 Version: 1.0.1

Changelog

1.0.1

Breaking change: removed variable for zones, instead load all zones automatically.

1.0.0

Initial release

Requirements

This card needs the following to function correctly:

Component / card	required
browser_mod	yes
lovelace-card-mod	yes

Usage

- type: "custom:button-card"
  template: custom_card_imswel_person
  variables:
    ulm_card_imswel_person_entity: person.john
    ulm_card_imswel_person_wifi_tracker: device_tracker.wifi_oneplus_6t
    ulm_card_imswel_person_gps_tracker: device_tracker.oneplus_6t
    ulm_card_imswel_person_findmy_script: script.find_my_oneplus_6t
    ulm_card_imswel_person_use_entity_picture: true

Variables

Variable	Example	Required	Explanation
ulm_card_imswel_person_entity	person.john	yes	The person entity
ulm_card_imswel_person_wifi_tracker	device_tracker.wifi_oneplus_6t	yes	A device_tracker entity of the person based on wifi
ulm_card_imswel_person_gps_tracker	device_tracker.oneplus_6t	yes	A device_tracker entity of the person based on location
ulm_card_imswel_person_findmy_script	script.find_my_oneplus_6t	yes	A script entity that make ring your phone
ulm_card_imswel_person_use_entity_picture	true or false	no	If true, shows the entity picture from your user instead of the icon. Default is false

Template Code

custom_card_imswel_person.yaml

---
find_my_phone_button:
  template:
    - "ulm_custom_card_imswel_person_language_variables"
  tap_action:
    action: "toggle"
  icon: "mdi:volume-high"
  name: "[[[ return variables.ulm_custom_card_imswel_person_findmy; ]]]"
  size: "1.4em"
  styles:
    icon:
      - color: "rgba(var(--color-blue),1)"
    name:
      - font-size: "1.06em"
      - letterspacing: "0.015em"
    grid:
      - grid-template-areas: "'i n'"
      - grid-column-gap: "0.3em"
    card:
      - color: "rgba(var(--color-blue),1)"
      - background: "rgba(var(--color-blue),0.2"
      - border-radius: "0.6em"
      - padding: "1em 1.4em"
      - width: "max-content"
      - font-size: "1.06em"
      - font-weight: "500"
      - letter-spacing: "0.015em"
      - box-shadow: "none"

custom_card_imswel_person:
  template:
    - "icon_info_bg"
    - "ulm_translation_engine"
    - "ulm_custom_card_imswel_person_language_variables"
    - "custom_popup_imswel_person"
  variables:
    ulm_card_imswel_person_use_entity_picture: false
  triggers_update: "all"
  show_entity_picture: "[[[ return variables.ulm_card_imswel_person_use_entity_picture ]]]"
  show_label: true
  show_name: true
  icon: "mdi:face-man"
  entity_picture: >
    [[[
      if (variables.ulm_card_imswel_person_use_entity_picture == true){
        return states[variables.ulm_card_imswel_person_entity].attributes.entity_picture;
      } else{
        return null;
      }
    ]]]
  label: >
    [[[
      let state = states[variables.ulm_card_imswel_person_entity].state
      let option = ["home", "not_home", "unavailable", "unknown"]
      return (option.includes(state)) ? variables.ulm_translation_state : state;
    ]]]
  name: "[[[ return states[variables.ulm_card_imswel_person_entity].attributes.friendly_name ]]]"
  entity: "[[[ return variables.ulm_card_imswel_person_entity; ]]]"
  styles:
    icon:
      - color: "rgba(var(--color-theme), 0.9)"
      - width: >
          [[[
            if (variables.ulm_card_imswel_person_use_entity_picture == true){
              return "42px";
            } else {
              return "20px";
            }
          ]]]
    custom_fields:
      notification:
        - border-radius: "50%"
        - position: "absolute"
        - left: "38px"
        - top: "8px"
        - height: "16px"
        - width: "16px"
        - border: "2px solid var(--card-background-color)"
        - font-size: "12px"
        - line-height: "14px"
        - background-color: >
            [[[
              if (states[variables.ulm_card_imswel_person_entity].state == 'home') {
                return "rgba(var(--color-blue),1)";
              } else {
                return "rgba(var(--color-green),1)";
              }
            ]]]
  custom_fields:
    notification: >
      [[[
        var zones = Object.values(states).filter((entity) =>
                        entity.entity_id.startsWith("zone.")
                    ).map((entity) => entity.entity_id);
        var person_location = states[variables.ulm_card_imswel_person_entity].state;
        if (person_location !== 'home'){
          for (const item of zones){
            if (person_location == states[item]?.attributes?.friendly_name){
              var icon = (states[item].attributes.icon !== null) ? states[item].attributes.icon : 'mdi:help-circle';
              return '<ha-icon icon="' + icon + '" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
            } else if (person_location == 'not_home'){
              return '<ha-icon icon="mdi:home-minus" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
            }
          }
        } else{
          return '<ha-icon icon="mdi:home-variant" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
        }
      ]]]

custom_popup_imswel_person:
  tap_action:
    action: "fire-dom-event"
    browser_mod:
      service: "browser_mod.popup"
      data:
        title: "[[[ return states[variables.ulm_card_imswel_person_entity].attributes.friendly_name ]]]"
        size: >
          [[[
            const mediaQuery = window.matchMedia('(max-width: 800px)')
            if (mediaQuery.matches) {
              return 'fullscreen'
            }
          ]]]
        style:
          $: >
            [[[
              if (hass.themes.theme.includes("desktop")){
                var dialog = `
                  .mdc-dialog__surface{
                    border-radius: var(--border-radius) !important;
                  }
                `;
              } else{
                var dialog = "";
              }
              return `
                *{
                  --secondary-background-color: none !important;
                }
                ${dialog}
              `;
            ]]]
          hui-vertical-stack-card:
            $: >
              button-card {
                align-self: center;
                padding: 0.2em 0 2.3em 0;
              }
              hui-entities-card{
                padding: 0.8em 1.4em;
              }
            $hui-entities-card$: >
              ha-card{
                box-shadow: none;
              }
            $hui-history-graph-card$: >
              .content {
                padding: 0 2.4em !important;
              }
              ha-card{
                box-shadow: none;
              }
            $hui-glance-card$: >
              ha-card{
                box-shadow: none;
              }
            $hui-map-card:
              $: >
                ha-icon-button {
                  color: rgba(var(--color-blue),1);
                }
              $ha-map:
                $: >
                  .leaflet-control-attribution {
                    display: none;
                  }
                  .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
                    border: 2px solid rgba(var(--color-blue),0.4) !important;
                  }
                  .leaflet-bar a {
                    background-color: rgba(var(--color-blue),0.2) !important;
                    color: rgba(var(--color-blue),1) !important;
                  }
                  .leaflet-bar a:first-child {
                    border-bottom: 2px solid rgba(var(--color-blue),0.4) !important;
                  }
                  .leaflet-pane.leaflet-tile-pane {
                    filter: contrast(95%);
                  }
        content:
          type: "vertical-stack"
          cards:
            - type: "entities"
              entities:
                - entity: "[[[ return variables.ulm_card_imswel_person_entity; ]]]"
                  secondary_info: "last-changed"
            - type: "history-graph"
              entities:
                - entity: "[[[ return variables.ulm_card_imswel_person_entity; ]]]"
            - type: "glance"
              show_state: false
              entities:
                - entity: "[[[ return variables.ulm_card_imswel_person_wifi_tracker; ]]]"
                  name: "WiFi"
                  icon: "mdi:wifi"
                  style: &state >
                    state-badge{
                      color: {{ 'rgba(var(--color-blue),1)' if is_state(config.entity, 'home') }};
                      filter: {{ 'opacity(100%)' if is_state(config.entity, 'home') else 'opacity(40%)'}};
                    }
                - entity: "[[[ return variables.ulm_card_imswel_person_gps_tracker; ]]]"
                  name: "GPS"
                  icon: "mdi:map-marker"
                  style: *state
            - type: "custom:button-card"
              template:
                - "find_my_phone_button"
              entity: "[[[ return variables.ulm_card_imswel_person_findmy_script; ]]]"
            - type: "map"
              aspect_ratio: "12x10"
              default_zoom: 16
              entities: "[[[ return [variables.ulm_card_imswel_person_gps_tracker]; ]]]"