Problems with custom card “Person Info Card”

[NathanFichefet]

Hello,

I would like to modify the custom_card “Person Info Card” of UI Lovelace Minimalist. (Person Info Card - UI Lovelace Minimalist)

I would like to add a watch icon with its battery percentage.

I managed to add it but it’s impossible to position it well.

I would like the icon of the phone, the watch and the bus to be on the same line.
I think it’s a problem with grid-area but I’m not sure

Here is the code of the card:

---
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_battery_watch_entity: ""
    ulm_card_person_battery_watch_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: trueareas
  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" + ".state._." + state] ? hass.resources[hass["language"]]["component.person" + ".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 watch'"
              : "'i n battery' 'i l watch'"
          ]]]
      - 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-red),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"
      watch:
        - 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:cellphone-charging" : "mdi:cellphone"
          var roundedBattery = Math.ceil(battery / 10) * 10;
          var icon = iconBase
          var foo = "mdi:cellphone"
          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 (variables.ulm_card_person_commute_entity) {
          var icon = variables.ulm_card_person_commute_icon || "mdi:car";
          var commute = variables.ulm_card_person_commute_entity;
          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>
          `;
        }
      ]]]
    watch: >
        [[[
          if (states[variables.ulm_card_person_battery_watch_entity]?.state) {
            var battery = states[variables.ulm_card_person_battery_watch_entity]?.state;
            var charging = states[variables.ulm_card_person_battery_watch_state_entity]?.state.toLowerCase() === "charging";
            var roundedBattery = Math.ceil(battery / 10) * 10;
            var icon = !charging && roundedBattery !== 100 ? "mdi:watch" : `mdi:battery-charging-${roundedBattery}`;
            var foo = "mdi:watch"
            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>
            `;
          }
        ]]]

[basbruss]

Hi,

I see that you didn't define the commute part in your grid.

  styles:
    grid:
      - grid-template-areas: >
          [[[
            return variables.ulm_multiline
              ? "'i n' 'i l' 'battery watch commute'"
              : "'i n battery' 'i l watch'"
          ]]]
      - grid-template-columns: >
          [[[
            return variables.ulm_multiline
              ? "min-content auto"
              : "min-content auto min-content"
          ]]]

I only have adjusted it for the multiline function for now.

[NathanFichefet]

Hello,
thank you for your answer. I have tried what you suggest but I still have a position problem. Here is what my card looks like:

[basbruss]

Sorry, I did not adjust the label and name rows to account for 3 columns instead of the 2 the card uses normally.

  styles:
    grid:
      - grid-template-areas: >
          [[[
            return variables.ulm_multiline
              ? "'i n n' 'i l l' 'battery watch commute'"
              : "'i n battery' 'i l watch'"
          ]]]
      - grid-template-columns: >
          [[[
            return variables.ulm_multiline
              ? "min-content auto min-content"
              : "min-content auto"
          ]]]

[NathanFichefet]

Thank you very much it works well!

[XilefTech]

I kinda feel like this should be added to the person card template so you don't have to add it manually. I think quite a lot of people are interested in viewing their wearable battery on their card