diff --git a/gallery/public/images/paulus.jpg b/gallery/public/images/paulus.jpg new file mode 100644 index 000000000000..6ffa0fcdaaed Binary files /dev/null and b/gallery/public/images/paulus.jpg differ diff --git a/gallery/src/pages/lovelace/picture-elements-card.ts b/gallery/src/pages/lovelace/picture-elements-card.ts index 7f6b0c99cbb4..b524b4982bb0 100644 --- a/gallery/src/pages/lovelace/picture-elements-card.ts +++ b/gallery/src/pages/lovelace/picture-elements-card.ts @@ -25,6 +25,15 @@ const ENTITIES = [ friendly_name: "Movement Backyard", device_class: "motion", }), + getEntity("person", "paulus", "home", { + friendly_name: "Paulus", + picture: "/images/paulus.jpg", + }), + getEntity("sensor", "battery", 35, { + device_class: "battery", + friendly_name: "Battery", + unit_of_measurement: "%", + }), ]; const CONFIGS = [ @@ -123,6 +132,19 @@ const CONFIGS = [ left: 35% `, }, + { + heading: "Person entity", + config: ` +- type: picture-elements + person_entity: person.paulus + elements: + - type: state-icon + entity: sensor.battery + style: + top: 8% + left: 8% + `, + }, ]; @customElement("demo-lovelace-picture-elements-card") diff --git a/gallery/src/pages/lovelace/picture-entity-card.ts b/gallery/src/pages/lovelace/picture-entity-card.ts index 1573f0dbec91..6ba18e2a6931 100644 --- a/gallery/src/pages/lovelace/picture-entity-card.ts +++ b/gallery/src/pages/lovelace/picture-entity-card.ts @@ -12,6 +12,10 @@ const ENTITIES = [ getEntity("light", "bed_light", "off", { friendly_name: "Bed Light", }), + getEntity("person", "paulus", "home", { + friendly_name: "Paulus", + picture: "/images/paulus.jpg", + }), ]; const CONFIGS = [ @@ -50,6 +54,13 @@ const CONFIGS = [ entity: camera.demo_camera `, }, + { + heading: "Person entity", + config: ` +- type: picture-entity + entity: person.paulus + `, + }, { heading: "Hidden name", config: ` diff --git a/gallery/src/pages/lovelace/picture-glance-card.ts b/gallery/src/pages/lovelace/picture-glance-card.ts index dccc05e09b52..e991ba7054b6 100644 --- a/gallery/src/pages/lovelace/picture-glance-card.ts +++ b/gallery/src/pages/lovelace/picture-glance-card.ts @@ -20,6 +20,15 @@ const ENTITIES = [ friendly_name: "Basement Floor Wet", device_class: "moisture", }), + getEntity("person", "paulus", "home", { + friendly_name: "Paulus", + picture: "/images/paulus.jpg", + }), + getEntity("sensor", "battery", 35, { + device_class: "battery", + friendly_name: "Battery", + unit_of_measurement: "%", + }), ]; const CONFIGS = [ @@ -90,6 +99,15 @@ const CONFIGS = [ - light.ceiling_lights `, }, + { + heading: "Person entity", + config: ` +- type: picture-glance + person_entity: person.paulus + entities: + - sensor.battery + `, + }, { heading: "Custom icon", config: ` diff --git a/src/data/person.ts b/src/data/person.ts index d1a0cbdd6a45..9f2297d1ecfe 100644 --- a/src/data/person.ts +++ b/src/data/person.ts @@ -1,3 +1,4 @@ +import { HassEntityBase } from "home-assistant-js-websocket"; import { HomeAssistant } from "../types"; export interface BasePerson { @@ -18,6 +19,10 @@ export interface PersonMutableParams { picture: string | null; } +export interface PersonEntity extends HassEntityBase { + attributes: Person; +} + export const fetchPersons = (hass: HomeAssistant) => hass.callWS<{ storage: Person[]; diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.ts b/src/panels/lovelace/cards/hui-picture-elements-card.ts index 09f0455c2adb..c0c3c6860a5e 100644 --- a/src/panels/lovelace/cards/hui-picture-elements-card.ts +++ b/src/panels/lovelace/cards/hui-picture-elements-card.ts @@ -16,6 +16,7 @@ import { LovelaceElement, LovelaceElementConfig } from "../elements/types"; import { LovelaceCard } from "../types"; import { createStyledHuiElement } from "./picture-elements/create-styled-hui-element"; import { PictureElementsCardConfig } from "./types"; +import { PersonEntity } from "../../../data/person"; @customElement("hui-picture-elements-card") class HuiPictureElementsCard extends LitElement implements LovelaceCard { @@ -66,6 +67,7 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard { !( config.image || config.image_entity || + config.person_entity || config.camera_image || config.state_image ) || @@ -116,9 +118,14 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard { return nothing; } - let stateObj: ImageEntity | undefined; + let stateObj: ImageEntity | PersonEntity | undefined; + let domain: string | undefined; if (this._config.image_entity) { stateObj = this.hass.states[this._config.image_entity] as ImageEntity; + domain = "image"; + } else if (this._config.person_entity) { + stateObj = this.hass.states[this._config.person_entity] as PersonEntity; + domain = "person"; } return html` @@ -126,7 +133,11 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
; @@ -417,6 +418,8 @@ export interface PictureGlanceCardConfig extends LovelaceCardConfig { entities: Array; title?: string; image?: string; + image_entity?: string; + person_entity?: string; camera_image?: string; camera_view?: HuiImage["cameraView"]; state_image?: Record; diff --git a/src/panels/lovelace/common/generate-lovelace-config.ts b/src/panels/lovelace/common/generate-lovelace-config.ts index 819001bb5388..7ae88bc7c2bf 100644 --- a/src/panels/lovelace/common/generate-lovelace-config.ts +++ b/src/panels/lovelace/common/generate-lovelace-config.ts @@ -114,7 +114,7 @@ export const computeSection = ( type: "tile", entity, show_entity_picture: - ["person", "camera", "image"].includes(computeDomain(entity)) || + ["camera", "image", "person"].includes(computeDomain(entity)) || undefined, }) as TileCardConfig ), diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts index 1c74428d3848..59d36f52fee7 100644 --- a/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts @@ -23,6 +23,7 @@ const cardConfigStruct = assign( entity: optional(string()), image: optional(string()), image_entity: optional(string()), + person_entity: optional(string()), camera_image: optional(string()), camera_view: optional(string()), aspect_ratio: optional(string()), @@ -37,6 +38,7 @@ const SCHEMA = [ { name: "title", selector: { text: {} } }, { name: "image", selector: { image: {} } }, { name: "image_entity", selector: { entity: { domain: "image" } } }, + { name: "person_entity", selector: { entity: { domain: "person" } } }, { name: "camera_image", selector: { entity: { domain: "camera" } } }, { name: "", diff --git a/src/translations/en.json b/src/translations/en.json index ec84ebd489e4..2d3c3dcc8e11 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -5839,6 +5839,7 @@ "attribute": "Attribute", "camera_image": "Camera entity", "image_entity": "Image entity", + "person_entity": "Person entity", "camera_view": "Camera view", "double_tap_action": "Double tap action", "entities": "Entities",