diff --git a/demo/public/stub_config/bedroom.png b/demo/public/stub_config/bedroom.png new file mode 100644 index 0000000000..2d1e549fa1 Binary files /dev/null and b/demo/public/stub_config/bedroom.png differ diff --git a/demo/public/stub_config/floorplan.png b/demo/public/stub_config/floorplan.png new file mode 100644 index 0000000000..859842ea44 Binary files /dev/null and b/demo/public/stub_config/floorplan.png differ diff --git a/demo/public/stub_config/kitchen.png b/demo/public/stub_config/kitchen.png new file mode 100644 index 0000000000..5be0f46e98 Binary files /dev/null and b/demo/public/stub_config/kitchen.png differ diff --git a/demo/public/stub_config/t-shirt-promo.png b/demo/public/stub_config/t-shirt-promo.png new file mode 100644 index 0000000000..84ae9d5386 Binary files /dev/null and b/demo/public/stub_config/t-shirt-promo.png differ diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts index 6d38ae561d..c9dd5f902e 100644 --- a/src/panels/lovelace/cards/hui-button-card.ts +++ b/src/panels/lovelace/cards/hui-button-card.ts @@ -56,7 +56,8 @@ export class HuiButtonCard extends LitElement implements LovelaceCard { lovelaceConfig, maxEntities, entities, - entitiesFill + entitiesFill, + ["light", "switch"] ); return { diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index 072e6eb1ba..a68b82e015 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -51,10 +51,11 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { lovelaceConfig, maxEntities, entities, - entitiesFill + entitiesFill, + ["light", "switch", "sensor"] ); - return { entities: foundEntities }; + return { title: "My Title", entities: foundEntities }; } @property() private _config?: EntitiesCardConfig; diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts index b1288f4276..ff789b1e1d 100644 --- a/src/panels/lovelace/cards/hui-glance-card.ts +++ b/src/panels/lovelace/cards/hui-glance-card.ts @@ -47,7 +47,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard { lovelaceConfig: LovelaceConfig, entities?: string[], entitiesFill?: string[] - ): object { + ): GlanceCardConfig { const includeDomains = ["sensor"]; const maxEntities = 3; const foundEntities = findEntities( @@ -59,7 +59,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard { includeDomains ); - return { entities: foundEntities }; + return { type: "glance", entities: foundEntities }; } @property() public hass?: HomeAssistant; diff --git a/src/panels/lovelace/cards/hui-picture-card.ts b/src/panels/lovelace/cards/hui-picture-card.ts index f21b24b778..aec27be4ac 100644 --- a/src/panels/lovelace/cards/hui-picture-card.ts +++ b/src/panels/lovelace/cards/hui-picture-card.ts @@ -32,8 +32,7 @@ export class HuiPictureCard extends LitElement implements LovelaceCard { } public static getStubConfig(): object { return { - image: - "https://www.home-assistant.io/images/merchandise/shirt-frontpage.png", + image: "https://demo.home-assistant.io/stub_config/t-shirt-promo.png", tap_action: { action: "none" }, hold_action: { action: "none" }, }; diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.ts b/src/panels/lovelace/cards/hui-picture-elements-card.ts index d8408bb55f..001d50ecd1 100644 --- a/src/panels/lovelace/cards/hui-picture-elements-card.ts +++ b/src/panels/lovelace/cards/hui-picture-elements-card.ts @@ -25,26 +25,30 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard { lovelaceConfig: LovelaceConfig, entities?: string[], entitiesFill?: string[] - ): object { + ): PictureElementsCardConfig { const maxEntities = 1; const foundEntities = findEntities( hass, lovelaceConfig, maxEntities, entities, - entitiesFill + entitiesFill, + ["sensor", "binary_sensor"] ); return { + type: "picture-elements", elements: [ { type: "state-badge", entity: foundEntities[0] || "", - style: "position: absolute, transform: translate(-50%, -50%)", + style: { + top: "32%", + left: "40%", + }, }, ], - image: - "https://www.home-assistant.io/images/merchandise/shirt-frontpage.png", + image: "https://demo.home-assistant.io/stub_config/floorplan.png", }; } diff --git a/src/panels/lovelace/cards/hui-picture-entity-card.ts b/src/panels/lovelace/cards/hui-picture-entity-card.ts index 047cc84e6d..4a409da1b5 100644 --- a/src/panels/lovelace/cards/hui-picture-entity-card.ts +++ b/src/panels/lovelace/cards/hui-picture-entity-card.ts @@ -52,13 +52,13 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard { lovelaceConfig, maxEntities, entities, - entitiesFill + entitiesFill, + ["light", "switch"] ); return { entity: foundEntities[0] || "", - image: - "https://www.home-assistant.io/images/merchandise/shirt-frontpage.png", + image: "https://demo.home-assistant.io/stub_config/bedroom.png", }; } diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts index a175ccec9c..7c1c1f027d 100644 --- a/src/panels/lovelace/cards/hui-picture-glance-card.ts +++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts @@ -49,19 +49,21 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { lovelaceConfig: LovelaceConfig, entities?: string[], entitiesFill?: string[] - ): object { + ): PictureGlanceCardConfig { const maxEntities = 2; const foundEntities = findEntities( hass, lovelaceConfig, maxEntities, entities, - entitiesFill + entitiesFill, + ["sensor", "binary_sensor"] ); return { - image: - "https://www.home-assistant.io/images/merchandise/shirt-frontpage.png", + type: "picture-glance", + title: "Kitchen", + image: "https://demo.home-assistant.io/stub_config/kitchen.png", entities: foundEntities, }; } diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts index a67977a80c..7bda4a1119 100644 --- a/src/panels/lovelace/cards/types.ts +++ b/src/panels/lovelace/cards/types.ts @@ -115,7 +115,7 @@ export interface GlanceCardConfig extends LovelaceCardConfig { show_icon?: boolean; title?: string; theme?: string; - entities: ConfigEntity[]; + entities: Array; columns?: number; state_color?: boolean; } @@ -177,7 +177,7 @@ export interface PictureElementsCardConfig extends LovelaceCardConfig { camera_image?: string; camera_view?: HuiImage["cameraView"]; state_image?: {}; - state_filter: string[]; + state_filter?: string[]; aspect_ratio?: string; entity?: string; elements: LovelaceElementConfig[]; @@ -202,13 +202,13 @@ export interface PictureEntityCardConfig extends LovelaceCardConfig { } export interface PictureGlanceCardConfig extends LovelaceCardConfig { - entities: PictureGlanceEntityConfig[]; + entities: Array; title?: string; image?: string; camera_image?: string; camera_view?: HuiImage["cameraView"]; state_image?: {}; - state_filter: string[]; + state_filter?: string[]; aspect_ratio?: string; entity?: string; tap_action?: ActionConfig; diff --git a/src/panels/lovelace/elements/types.ts b/src/panels/lovelace/elements/types.ts index 08ca175fa7..f12137d58f 100644 --- a/src/panels/lovelace/elements/types.ts +++ b/src/panels/lovelace/elements/types.ts @@ -2,22 +2,31 @@ import { HomeAssistant } from "../../../types"; import { Condition } from "../common/validate-condition"; import { ActionConfig } from "../../../data/lovelace"; -export interface LovelaceElementConfig { +interface LovelaceElementConfigBase { type: string; style: object; } +export type LovelaceElementConfig = + | ConditionalElementConfig + | IconElementConfig + | ImageElementConfig + | ServiceButtonElementConfig + | StateBadgeElementConfig + | StateIconElementConfig + | StateLabelElementConfig; + export interface LovelaceElement extends HTMLElement { hass?: HomeAssistant; setConfig(config: LovelaceElementConfig): void; } -export interface ConditionalElementConfig extends LovelaceElementConfig { +export interface ConditionalElementConfig extends LovelaceElementConfigBase { conditions: Condition[]; - elements: LovelaceElementConfig[]; + elements: LovelaceElementConfigBase[]; } -export interface IconElementConfig extends LovelaceElementConfig { +export interface IconElementConfig extends LovelaceElementConfigBase { entity?: string; name?: string; tap_action?: ActionConfig; @@ -26,7 +35,7 @@ export interface IconElementConfig extends LovelaceElementConfig { icon: string; } -export interface ImageElementConfig extends LovelaceElementConfig { +export interface ImageElementConfig extends LovelaceElementConfigBase { entity?: string; tap_action?: ActionConfig; hold_action?: ActionConfig; @@ -39,13 +48,13 @@ export interface ImageElementConfig extends LovelaceElementConfig { aspect_ratio?: string; } -export interface ServiceButtonElementConfig extends LovelaceElementConfig { +export interface ServiceButtonElementConfig extends LovelaceElementConfigBase { title?: string; service?: string; service_data?: object; } -export interface StateBadgeElementConfig extends LovelaceElementConfig { +export interface StateBadgeElementConfig extends LovelaceElementConfigBase { entity: string; title?: string; tap_action?: ActionConfig; @@ -53,7 +62,7 @@ export interface StateBadgeElementConfig extends LovelaceElementConfig { double_tap_action?: ActionConfig; } -export interface StateIconElementConfig extends LovelaceElementConfig { +export interface StateIconElementConfig extends LovelaceElementConfigBase { entity: string; tap_action?: ActionConfig; hold_action?: ActionConfig; @@ -62,7 +71,7 @@ export interface StateIconElementConfig extends LovelaceElementConfig { state_color?: boolean; } -export interface StateLabelElementConfig extends LovelaceElementConfig { +export interface StateLabelElementConfig extends LovelaceElementConfigBase { entity: string; attribute?: string; prefix?: string;