Add option to show entity picture in tile card (#14196)

Add option to show entity picture

src/components/tile/ha-tile-image.ts

@@ -0,0 +1,41 @@
+import { CSSResultGroup, html, css, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+
+@customElement("ha-tile-image")
+export class HaTileImage extends LitElement {
+  @property() public imageUrl?: string;
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="image">
+        ${this.imageUrl ? html`<img src=${this.imageUrl} />` : null}
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .image {
+        position: relative;
+        width: 40px;
+        height: 40px;
+        border-radius: 20px;
+        display: flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+      .image img {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-tile-image": HaTileImage;
+  }
+}

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

@@ -1,4 +1,5 @@
 import { mdiHelp } from "@mdi/js";
+import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
@@ -11,7 +12,9 @@ import { stateColorCss } from "../../../common/entity/state_color";
 import { stateIconPath } from "../../../common/entity/state_icon_path";
 import "../../../components/ha-card";
 import "../../../components/tile/ha-tile-icon";
+import "../../../components/tile/ha-tile-image";
 import "../../../components/tile/ha-tile-info";
+import { cameraUrlWithWidthHeight } from "../../../data/camera";
 import { ActionHandlerEvent } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
 import { actionHandler } from "../common/directives/action-handler-directive";
@@ -87,6 +90,21 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
     handleAction(this, this.hass!, config, "tap");
   }
 
+  private _getImageUrl(entity: HassEntity): string | undefined {
+    const entityPicture =
+      entity.attributes.entity_picture_local ||
+      entity.attributes.entity_picture;
+
+    if (!entityPicture) return undefined;
+
+    let imageUrl = this.hass!.hassUrl(entityPicture);
+    if (computeDomain(entity.entity_id) === "camera") {
+      imageUrl = cameraUrlWithWidthHeight(imageUrl, 80, 80);
+    }
+
+    return imageUrl;
+  }
+
   render() {
     if (!this._config || !this.hass) {
       return html``;
@@ -126,17 +144,35 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
         : stateColorCss(entity),
     };
 
+    const imageUrl = this._config.show_entity_picture
+      ? this._getImageUrl(entity)
+      : undefined;
+
     return html`
       <ha-card style=${styleMap(style)}>
         <div class="tile">
-          <ha-tile-icon
-            .icon=${icon}
-            .iconPath=${iconPath}
-            role="button"
-            tabindex="0"
-            @action=${this._handleIconAction}
-            .actionHandler=${actionHandler()}
-          ></ha-tile-icon>
+          ${imageUrl
+            ? html`
+                <ha-tile-image
+                  class="icon"
+                  .imageUrl=${imageUrl}
+                  role="button"
+                  tabindex="0"
+                  @action=${this._handleIconAction}
+                  .actionHandler=${actionHandler()}
+                ></ha-tile-image>
+              `
+            : html`
+                <ha-tile-icon
+                  class="icon"
+                  .icon=${icon}
+                  .iconPath=${iconPath}
+                  role="button"
+                  tabindex="0"
+                  @action=${this._handleIconAction}
+                  .actionHandler=${actionHandler()}
+                ></ha-tile-icon>
+              `}
           <ha-tile-info
             .primary=${name}
             .secondary=${stateDisplay}
@@ -168,7 +204,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
         flex-direction: row;
         align-items: center;
       }
-      ha-tile-icon {
+      .icon {
         padding: var(--tile-tap-padding);
         flex: none;
         margin-right: calc(12px - 2 * var(--tile-tap-padding));
@@ -181,13 +217,13 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       [role="button"] {
         cursor: pointer;
       }
-      ha-tile-icon[role="button"]:focus {
+      .icon[role="button"]:focus {
         outline: none;
       }
-      ha-tile-icon[role="button"]:focus-visible {
+      .icon[role="button"]:focus-visible {
         transform: scale(1.2);
       }
-      ha-tile-icon[role="button"]:active {
+      .icon[role="button"]:active {
         transform: scale(1.2);
       }
       ha-tile-info {

src/panels/lovelace/cards/types.ts

@@ -478,6 +478,7 @@ export interface TileCardConfig extends LovelaceCardConfig {
   name?: string;
   icon?: string;
   color?: string;
+  show_entity_picture?: string;
   tap_action?: ActionConfig;
   icon_tap_action?: ActionConfig;
 }

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

@@ -3,7 +3,7 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { assert, assign, object, optional, string } from "superstruct";
+import { assert, assign, boolean, object, optional, string } from "superstruct";
 import { THEME_COLORS } from "../../../../common/color/compute-color";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeDomain } from "../../../../common/entity/compute_domain";
@@ -25,6 +25,7 @@ const cardConfigStruct = assign(
     name: optional(string()),
     icon: optional(string()),
     color: optional(string()),
+    show_entity_picture: optional(boolean()),
     tap_action: optional(actionConfigStruct),
     icon_tap_action: optional(actionConfigStruct),
   })
@@ -90,6 +91,12 @@ export class HuiTileCardEditor
                 },
               },
             },
+            {
+              name: "show_entity_picture",
+              selector: {
+                boolean: {},
+              },
+            },
           ] as const,
         },
       ] as const
@@ -205,9 +212,11 @@ export class HuiTileCardEditor
     switch (schema.name) {
       case "color":
       case "icon_tap_action":
+      case "show_entity_picture":
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.tile.${schema.name}`
         );
+
       default:
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.generic.${schema.name}`

src/translations/en.json

@@ -4140,7 +4140,8 @@
               "icon_tap_action": "Icon tap action",
               "actions": "Actions",
               "appearance": "Appearance",
-              "default_color": "Default color (state)"
+              "default_color": "Default color (state)",
+              "show_entity_picture": "Show entity picture"
             },
             "vertical-stack": {
               "name": "Vertical Stack",