picture cards: add person image support

gallery/src/pages/lovelace/picture-elements-card.ts

@@ -25,6 +25,15 @@ const ENTITIES = [
     friendly_name: "Movement Backyard",
     device_class: "motion",
   }),
+  getEntity("person", "paulus", "home", {
+    friendly_name: "Paulus",
+    picture: "/images/paulus.jpg",
+  }),
+  getEntity("sensor", "battery", 35, {
+    device_class: "battery",
+    friendly_name: "Battery",
+    unit_of_measurement: "%",
+  }),
 ];
 
 const CONFIGS = [
@@ -123,6 +132,19 @@ const CONFIGS = [
         left: 35%
     `,
   },
+  {
+    heading: "Person entity",
+    config: `
+- type: picture-elements
+  person_entity: person.paulus
+  elements:
+  - type: state-icon
+    entity: sensor.battery
+    style:
+      top: 8%
+      left: 8%
+    `,
+  },
 ];
 
 @customElement("demo-lovelace-picture-elements-card")

gallery/src/pages/lovelace/picture-entity-card.ts

@@ -12,6 +12,10 @@ const ENTITIES = [
   getEntity("light", "bed_light", "off", {
     friendly_name: "Bed Light",
   }),
+  getEntity("person", "paulus", "home", {
+    friendly_name: "Paulus",
+    picture: "/images/paulus.jpg",
+  }),
 ];
 
 const CONFIGS = [
@@ -50,6 +54,13 @@ const CONFIGS = [
   entity: camera.demo_camera
     `,
   },
+  {
+    heading: "Person entity",
+    config: `
+- type: picture-entity
+  entity: person.paulus
+    `,
+  },
   {
     heading: "Hidden name",
     config: `

gallery/src/pages/lovelace/picture-glance-card.ts

@@ -20,6 +20,15 @@ const ENTITIES = [
     friendly_name: "Basement Floor Wet",
     device_class: "moisture",
   }),
+  getEntity("person", "paulus", "home", {
+    friendly_name: "Paulus",
+    picture: "/images/paulus.jpg",
+  }),
+  getEntity("sensor", "battery", 35, {
+    device_class: "battery",
+    friendly_name: "Battery",
+    unit_of_measurement: "%",
+  }),
 ];
 
 const CONFIGS = [
@@ -90,6 +99,15 @@ const CONFIGS = [
     - light.ceiling_lights
     `,
   },
+  {
+    heading: "Person entity",
+    config: `
+- type: picture-glance
+  person_entity: person.paulus
+  entities:
+    - sensor.battery
+    `,
+  },
   {
     heading: "Custom icon",
     config: `

src/data/person.ts

@@ -1,3 +1,4 @@
+import { HassEntityBase } from "home-assistant-js-websocket";
 import { HomeAssistant } from "../types";
 
 export interface BasePerson {
@@ -18,6 +19,10 @@ export interface PersonMutableParams {
   picture: string | null;
 }
 
+export interface PersonEntity extends HassEntityBase {
+  attributes: Person;
+}
+
 export const fetchPersons = (hass: HomeAssistant) =>
   hass.callWS<{
     storage: Person[];

src/panels/lovelace/cards/hui-picture-elements-card.ts

@@ -16,6 +16,7 @@ import { LovelaceElement, LovelaceElementConfig } from "../elements/types";
 import { LovelaceCard } from "../types";
 import { createStyledHuiElement } from "./picture-elements/create-styled-hui-element";
 import { PictureElementsCardConfig } from "./types";
+import { PersonEntity } from "../../../data/person";
 
 @customElement("hui-picture-elements-card")
 class HuiPictureElementsCard extends LitElement implements LovelaceCard {
@@ -66,6 +67,7 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
       !(
         config.image ||
         config.image_entity ||
+        config.person_entity ||
         config.camera_image ||
         config.state_image
       ) ||
@@ -116,17 +118,26 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
       return nothing;
     }
 
-    let stateObj: ImageEntity | undefined;
+    let stateObj: ImageEntity | PersonEntity | undefined;
+    let domain: string | undefined;
     if (this._config.image_entity) {
       stateObj = this.hass.states[this._config.image_entity] as ImageEntity;
+      domain = "image";
+    } else if (this._config.person_entity) {
+      stateObj = this.hass.states[this._config.person_entity] as PersonEntity;
+      domain = "person";
     }
 
     return html`
       <ha-card .header=${this._config.title}>
         <div id="root">
           <hui-image
             .hass=${this.hass}
-            .image=${stateObj ? computeImageUrl(stateObj) : this._config.image}
+            .image=${domain === "image"
+              ? computeImageUrl(stateObj as ImageEntity)
+              : domain === "person"
+                ? (stateObj as PersonEntity).attributes.picture
+                : this._config.image}
             .stateImage=${this._config.state_image}
             .stateFilter=${this._config.state_filter}
             .cameraImage=${this._config.camera_image}

src/panels/lovelace/cards/hui-picture-entity-card.ts

@@ -25,6 +25,8 @@ import "../components/hui-image";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { PictureEntityCardConfig } from "./types";
+import { CameraEntity } from "../../../data/camera";
+import { PersonEntity } from "../../../data/person";
 
 @customElement("hui-picture-entity-card")
 class HuiPictureEntityCard extends LitElement implements LovelaceCard {
@@ -68,7 +70,7 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
     }
 
     if (
-      !["camera", "image"].includes(computeDomain(config.entity)) &&
+      !["camera", "image", "person"].includes(computeDomain(config.entity)) &&
       !config.image &&
       !config.state_image &&
       !config.camera_image
@@ -108,7 +110,10 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
       return nothing;
     }
 
-    const stateObj = this.hass.states[this._config.entity];
+    const stateObj = this.hass.states[this._config.entity] as
+      | CameraEntity
+      | ImageEntity
+      | PersonEntity;
 
     if (!stateObj) {
       return html`
@@ -143,7 +148,9 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
           .hass=${this.hass}
           .image=${domain === "image"
             ? computeImageUrl(stateObj as ImageEntity)
-            : this._config.image}
+            : domain === "person"
+              ? (stateObj as PersonEntity).attributes.picture
+              : this._config.image}
           .stateImage=${this._config.state_image}
           .stateFilter=${this._config.state_filter}
           .cameraImage=${domain === "camera"

src/panels/lovelace/cards/hui-picture-glance-card.ts

@@ -31,6 +31,7 @@ import { createEntityNotFoundWarning } from "../components/hui-warning";
 import "../components/hui-warning-element";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { PictureGlanceCardConfig, PictureGlanceEntityConfig } from "./types";
+import { PersonEntity } from "../../../data/person";
 
 const STATES_OFF = new Set(["closed", "locked", "not_home", "off"]);
 
@@ -83,6 +84,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
       !(
         config.image ||
         config.image_entity ||
+        config.person_entity ||
         config.camera_image ||
         config.state_image
       ) ||
@@ -183,9 +185,14 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
       return nothing;
     }
 
-    let stateObj: ImageEntity | undefined;
+    let stateObj: ImageEntity | PersonEntity | undefined;
+    let domain: string | undefined;
     if (this._config.image_entity) {
       stateObj = this.hass.states[this._config.image_entity] as ImageEntity;
+      domain = "image";
+    } else if (this._config.person_entity) {
+      stateObj = this.hass.states[this._config.person_entity] as PersonEntity;
+      domain = "person";
     }
 
     return html`
@@ -209,7 +216,11 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
           )}
           .config=${this._config}
           .hass=${this.hass}
-          .image=${stateObj ? computeImageUrl(stateObj) : this._config.image}
+          .image=${domain === "image"
+            ? computeImageUrl(stateObj as ImageEntity)
+            : domain === "person"
+              ? (stateObj as PersonEntity).attributes.picture
+              : this._config.image}
           .stateImage=${this._config.state_image}
           .stateFilter=${this._config.state_filter}
           .cameraImage=${this._config.camera_image}

src/panels/lovelace/cards/types.ts

@@ -384,6 +384,7 @@ export interface PictureElementsCardConfig extends LovelaceCardConfig {
   title?: string;
   image?: string;
   image_entity?: string;
+  person_entity?: string;
   camera_image?: string;
   camera_view?: HuiImage["cameraView"];
   state_image?: Record<string, unknown>;
@@ -417,6 +418,8 @@ export interface PictureGlanceCardConfig extends LovelaceCardConfig {
   entities: Array<string | PictureGlanceEntityConfig>;
   title?: string;
   image?: string;
+  image_entity?: string;
+  person_entity?: string;
   camera_image?: string;
   camera_view?: HuiImage["cameraView"];
   state_image?: Record<string, unknown>;

src/panels/lovelace/common/generate-lovelace-config.ts

@@ -114,7 +114,7 @@ export const computeSection = (
         type: "tile",
         entity,
         show_entity_picture:
-          ["person", "camera", "image"].includes(computeDomain(entity)) ||
+          ["camera", "image", "person"].includes(computeDomain(entity)) ||
           undefined,
       }) as TileCardConfig
   ),

src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts

@@ -23,6 +23,7 @@ const cardConfigStruct = assign(
     entity: optional(string()),
     image: optional(string()),
     image_entity: optional(string()),
+    person_entity: optional(string()),
     camera_image: optional(string()),
     camera_view: optional(string()),
     aspect_ratio: optional(string()),
@@ -37,6 +38,7 @@ const SCHEMA = [
   { name: "title", selector: { text: {} } },
   { name: "image", selector: { image: {} } },
   { name: "image_entity", selector: { entity: { domain: "image" } } },
+  { name: "person_entity", selector: { entity: { domain: "person" } } },
   { name: "camera_image", selector: { entity: { domain: "camera" } } },
   {
     name: "",

src/translations/en.json

@@ -5839,6 +5839,7 @@
               "attribute": "Attribute",
               "camera_image": "Camera entity",
               "image_entity": "Image entity",
+              "person_entity": "Person entity",
               "camera_view": "Camera view",
               "double_tap_action": "Double tap action",
               "entities": "Entities",