Person Card

Description¶

example-image

The card_person shows if a person is home or not_home. If you have setup other zones, it will show these as well.

Variables¶

Variable	Default	Required	Notes
entity			The person entity
ulm_card_person_entity			The person entity
ulm_card_person_use_entity_picture			If you set this to true, the card shows the entity picture from your user, otherwise (set to false) shows the icon. Default is false.
ulm_card_person_zone1			Set another zone (beside "home") to use for the card. You can set up two zones besides "home".
ulm_card_person_zone2			Set another zone (beside "home") to use for the card. You can set up two zones besides "home".
ulm_address			Show an address as label, add an entity with a geo location

Usage¶

- type: 'custom:button-card'
  template: card_person
  entity: person.username
  variables:
    ulm_card_person_entity: person.username
    ulm_card_person_use_entity_picture: true
    ulm_card_person_zone1: zone.work
    ulm_card_person_zone2: zone.school
    ulm_address: sensor.s10_mike_gegeocodeerde_locatie

Template Code

card_person.yaml

---
### Card Person ###
card_person:
  template:
    - "icon_info_bg"
    - "ulm_translation_engine"
  variables:
    ulm_card_person_use_entity_picture: false
    ulm_card_person_zone1: ""
    ulm_card_person_zone2: ""
    ulm_address: ""
  triggers_update: "all"
  tap_action:
    action: "more-info"
    entity: "[[[ return variables.ulm_card_person_entity; ]]]"
  show_label: true
  show_name: true
  label: >
    [[[
      if (variables.ulm_address){
        return states[variables.ulm_address].state
      } else {
        let state = states[variables.ulm_card_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_person_entity].attributes.friendly_name ]]]"
  entity: "[[[ return variables.ulm_card_person_entity; ]]]"
  icon: "mdi:face-man"
  show_entity_picture: "[[[ return variables.ulm_card_person_use_entity_picture ]]]"
  entity_picture: "[[[ return variables.ulm_card_person_use_entity_picture ? states[variables.ulm_card_person_entity].attributes.entity_picture\
    \ : null ]]]"
  styles:
    icon:
      - color: "rgba(var(--color-theme),0.9)"
      - width: >
          [[[
            return !variables.ulm_card_person_use_entity_picture ? "20px" : "42px";
          ]]]
      - place-self: >
          [[[
            return !variables.ulm_card_person_use_entity_picture ? "center" : "stretch stretch";
          ]]]
    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: >
            [[[
              return (states[variables.ulm_card_person_entity].state !== 'home') ? "rgba(var(--color-green),1)" : "rgba(var(--color-blue),1)";
            ]]]
  custom_fields:
    notification: >
      [[[
        if (states[variables.ulm_card_person_entity].state !== 'home') {
          if (states[variables.ulm_card_person_entity].state === states[variables.ulm_card_person_zone1]?.attributes?.friendly_name) {
            var icon = states[variables.ulm_card_person_zone1].attributes.icon !== null ? states[variables.ulm_card_person_zone1].attributes.icon : 'mdi:help-circle'
            return '<ha-icon icon="' + icon + '" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
          } else if (states[variables.ulm_card_person_entity].state === states[variables.ulm_card_person_zone2]?.attributes?.friendly_name) {
            var icon = states[variables.ulm_card_person_zone2].attributes.icon !== null ? states[variables.ulm_card_person_zone2].attributes.icon : 'mdi:help-circle'
            return '<ha-icon icon="' + icon + '" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
          } else {
            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>';
        }
      ]]]