Button-card template 'card_person_info' is missing!

[deanfourie1]

Describe the bug Card will not load when attempting to use the Person Info Card here.

https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_person_info/#variables

To Reproduce Steps to reproduce the behavior:

1. Copy the text from the previous link for custom_card_person_info.yaml to ui_lovelace_minimalst/custom_cards/custom_card_person_info.yaml
2. Add the text from the lovelace card to my lovelace dashboard
3. Card does not show but shows "Button-card template 'card_person_info' is missing!"

Expected behavior A clean person card to display

Screenshots If applicable, add screenshots to help explain your problem.

Additional context Add any other context about the problem here.

Related Logs (can be found in the browser-console (F12)) Add related logs for the problem

Related Card Config Add the card config from ui-lovelace.yaml with the related problem

card_person_info:
  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: ""
    ulm_address_locality: ""
    ulm_card_person_driving_entity: ""
    ulm_card_person_battery_entity: ""
    ulm_card_person_battery_state_entity: ""
    ulm_card_person_commute_entity: ""
    ulm_card_person_cummute_icon: "mdi:car"
    ulm_multiline: true
  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 if (variables.ulm_address_locality){
        return states[variables.ulm_address_locality].attributes.Locality;
      }
      else if (states[variables.ulm_card_person_driving_entity]?.state === "on") {
        let state = states[variables.ulm_card_person_entity].state;
        return `Driving - ${variables.ulm_translation_state}`;
      } else {
        let state = states[variables.ulm_card_person_entity].state;
        return hass.resources[hass["language"]]["component.person.entity_component._.state." + state] ? hass.resources[hass["language"]]["component.person.entity_component._.state." + 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 != false ? states[variables.ulm_card_person_entity].attributes.entity_picture\
    \ : null ]]]"
  styles:
    grid:
      - grid-template-areas: >
          [[[
            return variables.ulm_multiline
              ? "'i n' 'i l' 'battery commute'"
              : "'i n battery' 'i l commute'"
          ]]]
      - grid-template-columns: >
          [[[
            return variables.ulm_multiline
              ? "min-content auto"
              : "min-content auto min-content"
          ]]]
      - grid-template-rows: "min-content min-content"
    icon:
      - color: "rgba(var(--color-theme),0.9)"
      - width: >
          [[[
            if (variables.ulm_card_person_use_entity_picture !== true){
              return "20px";
            } else {
              return "42px";
            }
          ]]]
      - place-self: >
          [[[
            if (variables.ulm_card_person_use_entity_picture !== true){
              return "center";
            } else {
              return "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: >
            [[[
              if (states[variables.ulm_card_person_driving_entity]?.state === "on") {
                return "rgba(var(--color-red),1)";
              } else if (states[variables.ulm_card_person_entity].state !== 'home') {
                return "rgba(var(--color-green),1)";
              } else {
                return "rgba(var(--color-blue),1)";
              }
            ]]]
      battery:
        - align-self: "middle"
        - justify-self: "start"
        - display: "flex"
        - align-items: "center"
        - margin-top: >
            [[[
              return variables.ulm_multiline ? "6px" : "0";
            ]]]
        - font-size: "12px"
      commute:
        - align-self: "middle"
        - justify-self: "end"
        - display: "flex"
        - align-items: "center"
        - margin-top: "6px"
        - font-size: "12px"

  custom_fields:
    notification: >
      [[[
        if (states[variables.ulm_card_person_driving_entity]?.state === "on") {
          var icon = 'mdi:car'
          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 !== '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>';
        }
      ]]]
    battery: >
      [[[
        if (states[variables.ulm_card_person_battery_entity]?.state) {
          var battery = states[variables.ulm_card_person_battery_entity]?.state;
          var charging = states[variables.ulm_card_person_battery_state_entity]?.state.toLowerCase() === "charging";
          var iconBase = charging ? "mdi:battery-charging" : "mdi:battery"
          var roundedBattery = Math.ceil(battery / 10) * 10;
          var icon = roundedBattery === 100 ? iconBase : `${iconBase}-${roundedBattery}`;
          var foo = "mdi:battery"
          var color = "rgba(var(--color-green),1)";
          if (battery <= 50) {
            color = "rgba(var(--color-yellow),1)"
          } else if (battery <= 25) {
            color = "rgba(var(--color-red),1)"
          }
          return `
            <ha-icon icon="${icon}" style="width: 16px; height: 16px; font-size: 14px; color: ${color}; margin: 0 2px 0 0"></ha-icon>
            <span style="padding-top: 6px;">${battery}%</span>
          `;
        }
      ]]]
    commute: >
      [[[
        if (states[variables.ulm_card_person_commute_entity]?.state) {
          var icon = variables.ulm_card_person_commute_icon || "mdi:car";
          var commute = states[variables.ulm_card_person_commute_entity]?.state;
          var color = "rgba(var(--color-green),1)";
          if (commute >= 30) {
            color = "rgba(var(--color-yellow),1)"
          }
          if (commute >= 60) {
            color = "rgba(var(--color-red),1)"
          }
          return `
            <ha-icon icon="${icon}" style="width: 16px; height: 16px; font-size: 14px; color: ${color}; margin: 0 2px 0 0"></ha-icon>
            <span style="padding-top: 6px;">${commute} min</span>
          `;
        }
      ]]]

type: custom:button-card
template: card_person_info
variables:
  ulm_card_person_entity: person.lee
  ulm_card_person_use_entity_picture: true
  ulm_card_person_zone1: zone.uw
  ulm_card_person_zone2: zone.store
  ulm_multiline: true
  ulm_card_person_driving_entity: binary_sensor.lee_in_car
  ulm_card_person_commute_entity: sensor.uw_commute
  ulm_card_person_commute_icon: mdi:bus
  ulm_card_person_battery_entity: sensor.lees_phone_battery_level
  ulm_card_person_battery_state_entity: sensor.lees_phone_battery_state

[Titou84240]

Hi , i have the same issue here , did you managed to find anything ?

[AndreasMouskos]

Same issue for me

[Titou84240]

Hi Just to tell you , i manage to make it work :

1. Here is the code i use for me for e.g :

- type: "custom:button-card" template: card_person_info variables: ulm_card_person_entity: person.admin ulm_card_person_use_entity_picture: true ulm_card_person_zone1: zone.home ulm_card_person_zone2: zone.travail ulm_multiline: true ulm_address: sensor.iphone_de_christophe_geocoded_location ulm_card_person_battery_entity: sensor.iphone_de_christophe_battery_level ulm_card_person_battery_state_entity: sensor.iphone_de_christophe_battery_state

I found out also that redownloading "button-card" in HACS was usefull , hope it helps.

[yannik2480]

+1