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
This commit is contained in:
Ian Richardson 2018-11-29 09:44:39 -06:00 committed by Fabian Affolter
parent 90cea56a1e
commit 6b730b7c40

View File

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