From 6b730b7c403675bc6a3035fc67a9b30723b8c270 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Thu, 29 Nov 2018 09:44:39 -0600
Subject: [PATCH] Allow for state_image and camera_image in picture-elements
 card (#2143)

* Allow for state_image and camera_image in picture-elements card

* Address review comments

* Remove unneccesary div
---
 .../cards/hui-picture-elements-card.ts        | 38 +++++++++++--------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.ts b/src/panels/lovelace/cards/hui-picture-elements-card.ts
index 16e22e1bb6..96140c94f8 100644
--- a/src/panels/lovelace/cards/hui-picture-elements-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-elements-card.ts
@@ -10,7 +10,11 @@ import { LovelaceElementConfig, LovelaceElement } from "../elements/types";
 
 interface Config extends LovelaceCardConfig {
   title?: string;
-  image: string;
+  image?: string;
+  camera_image?: string;
+  state_image?: {};
+  aspect_ratio?: string;
+  entity?: string;
   elements: LovelaceElementConfig[];
 }
 
@@ -39,7 +43,10 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
   public setConfig(config: Config): void {
     if (!config) {
       throw new Error("Invalid Configuration");
-    } else if (!config.image) {
+    } else if (
+      !(config.image || config.camera_image || config.state_image) ||
+      (config.state_image && !config.entity)
+    ) {
       throw new Error("Invalid Configuration: image required");
     } else if (!Array.isArray(config.elements)) {
       throw new Error("Invalid Configuration: elements required");
@@ -56,13 +63,19 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
     return html`
       ${this.renderStyle()}
       <ha-card .header="${this._config.title}">
-        <div id="root">
-          <img src="${this._config.image}" /> ${
-            this._config.elements.map((elementConfig: LovelaceElementConfig) =>
-              this._createHuiElement(elementConfig)
-            )
-          }
-        </div>
+        <hui-image
+          .hass="${this._hass}"
+          .image="${this._config.image}"
+          .stateImage="${this._config.state_image}"
+          .cameraImage="${this._config.camera_image}"
+          .entity="${this._config.entity}"
+          .aspectRatio="${this._config.aspect_ratio}"
+        ></hui-image>
+        ${
+          this._config.elements.map((elementConfig: LovelaceElementConfig) =>
+            this._createHuiElement(elementConfig)
+          )
+        }
       </ha-card>
     `;
   }
@@ -72,14 +85,7 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
       <style>
         ha-card {
           overflow: hidden;
-        }
-        #root {
           position: relative;
-          overflow: hidden;
-        }
-        #root img {
-          display: block;
-          width: 100%;
         }
         .element {
           position: absolute;