From e1f06e46a60457b1fea8ce5c68e17f2bbf499c07 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Wed, 28 Nov 2018 21:16:12 -0600
Subject: [PATCH 1/3] Allow for state_image and camera_image in
 picture-elements card

---
 .../cards/hui-picture-elements-card.ts        | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.ts b/src/panels/lovelace/cards/hui-picture-elements-card.ts
index 16e22e1bb6e4..9ff8d10e68a7 100644
--- a/src/panels/lovelace/cards/hui-picture-elements-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-elements-card.ts
@@ -11,6 +11,10 @@ import { LovelaceElementConfig, LovelaceElement } from "../elements/types";
 interface Config extends LovelaceCardConfig {
   title?: 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");
@@ -57,7 +64,15 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
       ${this.renderStyle()}
       <ha-card .header="${this._config.title}">
         <div id="root">
-          <img src="${this._config.image}" /> ${
+          <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)
             )

From 037b3078d41122eeb4b3a931ccd20ff96e73a707 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Wed, 28 Nov 2018 22:06:05 -0600
Subject: [PATCH 2/3] Address review comments

---
 src/panels/lovelace/cards/hui-picture-elements-card.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.ts b/src/panels/lovelace/cards/hui-picture-elements-card.ts
index 9ff8d10e68a7..e874002705cd 100644
--- a/src/panels/lovelace/cards/hui-picture-elements-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-elements-card.ts
@@ -10,7 +10,7 @@ import { LovelaceElementConfig, LovelaceElement } from "../elements/types";
 
 interface Config extends LovelaceCardConfig {
   title?: string;
-  image: string;
+  image?: string;
   camera_image?: string;
   state_image?: {};
   aspect_ratio?: string;

From 500875fc95b9be92ee475ef0b9e1ec70fc25ea11 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Wed, 28 Nov 2018 23:16:42 -0600
Subject: [PATCH 3/3] Remove unneccesary div

---
 .../cards/hui-picture-elements-card.ts        | 35 +++++++------------
 1 file changed, 13 insertions(+), 22 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.ts b/src/panels/lovelace/cards/hui-picture-elements-card.ts
index e874002705cd..96140c94f8b8 100644
--- a/src/panels/lovelace/cards/hui-picture-elements-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-elements-card.ts
@@ -63,21 +63,19 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
     return html`
       ${this.renderStyle()}
       <ha-card .header="${this._config.title}">
-        <div id="root">
-          <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)
-            )
-          }
-        </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>
     `;
   }
@@ -87,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;