add picture card compatibility & exemple in gallery

gallery/src/pages/lovelace/picture-card.markdown

@@ -0,0 +1,3 @@
+---
+title: Picture Card
+---

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

@@ -0,0 +1,61 @@
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
+import { getEntity } from "../../../../src/fake_data/entity";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";
+
+const ENTITIES = [
+  getEntity("person", "paulus", "home", {
+    friendly_name: "Paulus",
+    entity_picture: "/images/paulus.jpg",
+  }),
+];
+
+const CONFIGS = [
+  {
+    heading: "Image URL",
+    config: `
+- type: picture
+  image: /images/living_room.png
+    `,
+  },
+  {
+    heading: "Person entity",
+    config: `
+- type: picture
+  image_entity: person.paulus
+    `,
+  },
+  {
+    heading: "Error: Image required",
+    config: `
+- type: picture
+  entity: person.paulus
+    `,
+  },
+];
+
+@customElement("demo-lovelace-picture-card")
+class DemoPicture extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
+    hass.addEntities(ENTITIES);
+    mockIcons(hass);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-lovelace-picture-card": DemoPicture;
+  }
+}

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

@@ -10,6 +10,7 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
+import { computeDomain } from "../../../common/entity/compute_domain";
 import "../../../components/ha-card";
 import { computeImageUrl, ImageEntity } from "../../../data/image";
 import { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
@@ -21,6 +22,7 @@ import { hasConfigChanged } from "../common/has-changed";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { PictureCardConfig } from "./types";
+import { PersonEntity } from "../../../data/person";
 
 @customElement("hui-picture-card")
 export class HuiPictureCard extends LitElement implements LovelaceCard {
@@ -95,17 +97,32 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
       return nothing;
     }
 
-    let stateObj: ImageEntity | undefined;
+    let stateObj: ImageEntity | PersonEntity | undefined;
 
     if (this._config.image_entity) {
-      stateObj = this.hass.states[this._config.image_entity] as ImageEntity;
+      stateObj = this.hass.states[this._config.image_entity];
       if (!stateObj) {
         return html`<hui-warning>
           ${createEntityNotFoundWarning(this.hass, this._config.image_entity)}
         </hui-warning>`;
       }
     }
 
+    const domain: string | undefined = this._config.image_entity
+      ? computeDomain(this._config.image_entity)
+      : undefined;
+    let image: string | undefined;
+    switch (domain) {
+      case "image":
+        image = computeImageUrl(stateObj);
+        break;
+      case "person":
+        image = stateObj.attributes.entity_picture;
+        break;
+      default:
+        image = this._config.image;
+    }
+
     return html`
       <ha-card
         @action=${this._handleAction}
@@ -134,9 +151,7 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
           alt=${ifDefined(
             this._config.alt_text || stateObj?.attributes.friendly_name
           )}
-          src=${this.hass.hassUrl(
-            stateObj ? computeImageUrl(stateObj) : this._config.image
-          )}
+          src=${this.hass.hassUrl(image)}
         />
       </ha-card>
     `;

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

@@ -25,7 +25,7 @@ const cardConfigStruct = assign(
 
 const SCHEMA = [
   { name: "image", selector: { image: {} } },
-  { name: "image_entity", selector: { entity: { domain: "image" } } },
+  { name: "image_entity", selector: { entity: {} } }, // domain: "image" || "person"
   { name: "alt_text", selector: { text: {} } },
   { name: "theme", selector: { theme: {} } },
   {