jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 11:46:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Allow for state_image and camera_image in picture-elements card (#2143)

Browse Source 
* 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
1 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/panels/lovelace/cards/hui-picture-elements-card.ts
View File

@ -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}" /> ${
<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>
</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;