mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-28 11:46:42 +00:00
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:
parent
90cea56a1e
commit
6b730b7c40
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user