From d4df03aac0e6be117698b25c11eb152947c394cf Mon Sep 17 00:00:00 2001 From: karwosts Date: Tue, 10 Dec 2024 09:44:50 -0800 Subject: [PATCH 1/5] Ability to show map icons for geolocation sources --- src/components/map/ha-entity-marker.ts | 6 +++++- src/components/map/ha-map.ts | 7 +++++++ src/panels/lovelace/cards/hui-map-card.ts | 5 +++-- src/panels/lovelace/cards/types.ts | 1 + .../lovelace/editor/config-elements/hui-map-card-editor.ts | 1 + 5 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/components/map/ha-entity-marker.ts b/src/components/map/ha-entity-marker.ts index 81df58fb8149..a704d1750734 100644 --- a/src/components/map/ha-entity-marker.ts +++ b/src/components/map/ha-entity-marker.ts @@ -12,6 +12,8 @@ class HaEntityMarker extends LitElement { @property({ attribute: "entity-color" }) public entityColor?: string; + @property({ attribute: "entity-icon" }) public entityIcon?: string; + protected render() { return html`
` - : this.entityName} + : this.entityIcon + ? html`` + : this.entityName} `; } diff --git a/src/components/map/ha-map.ts b/src/components/map/ha-map.ts index 6f28738845ea..7afb5fa6de01 100644 --- a/src/components/map/ha-map.ts +++ b/src/components/map/ha-map.ts @@ -53,6 +53,7 @@ export interface HaMapEntity { entity_id: string; color: string; label_mode?: "name" | "state"; + display_mode?: "icon"; name?: string; focus?: boolean; } @@ -523,6 +524,11 @@ export class HaMap extends ReactiveElement { .join("") .substr(0, 3)); + const entityIcon = + (typeof entity !== "string" && + entity.display_mode === "icon" && + stateObj.attributes.icon) || + ""; // create marker with the icon const marker = Leaflet.marker([latitude, longitude], { icon: Leaflet.divIcon({ @@ -530,6 +536,7 @@ export class HaMap extends ReactiveElement { ({ - entity_id: entity.entity_id, - focus: entity.focus, + ...entity, color: this._getColor(entity.entity_id), })), ]; diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts index 9f741915fa80..cb9fb33c0c9c 100644 --- a/src/panels/lovelace/cards/types.ts +++ b/src/panels/lovelace/cards/types.ts @@ -304,6 +304,7 @@ export interface LogbookCardConfig extends LovelaceCardConfig { interface GeoLocationSourceConfig { source: string; + display_mode?: "icon"; focus?: boolean; } diff --git a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts index e013a4fbbf19..6807de7c142d 100644 --- a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts @@ -48,6 +48,7 @@ export const mapEntitiesConfigStruct = union([ const geoSourcesConfigStruct = union([ object({ source: string(), + display_mode: optional(string()), focus: optional(boolean()), }), string(), From eb63f4c3657856d2a80aeeeaf9c0db77aedff77a Mon Sep 17 00:00:00 2001 From: karwosts Date: Tue, 10 Dec 2024 10:14:00 -0800 Subject: [PATCH 2/5] import --- src/components/map/ha-entity-marker.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/map/ha-entity-marker.ts b/src/components/map/ha-entity-marker.ts index a704d1750734..6677983d94e8 100644 --- a/src/components/map/ha-entity-marker.ts +++ b/src/components/map/ha-entity-marker.ts @@ -2,6 +2,7 @@ import { LitElement, html, css } from "lit"; import { property } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; import { fireEvent } from "../../common/dom/fire_event"; +import "../ha-icon"; class HaEntityMarker extends LitElement { @property({ attribute: "entity-id" }) public entityId?: string; From 9230c89912293c9a4e05464ab576089627126a06 Mon Sep 17 00:00:00 2001 From: karwosts Date: Mon, 16 Dec 2024 17:27:13 -0800 Subject: [PATCH 3/5] rename to label_mode --- src/components/map/ha-map.ts | 10 ++++++---- src/panels/lovelace/cards/hui-map-card.ts | 4 ++-- src/panels/lovelace/cards/types.ts | 2 +- .../editor/config-elements/hui-map-card-editor.ts | 2 +- 4 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/map/ha-map.ts b/src/components/map/ha-map.ts index 7afb5fa6de01..feb33611e1dc 100644 --- a/src/components/map/ha-map.ts +++ b/src/components/map/ha-map.ts @@ -52,8 +52,7 @@ export interface HaMapPaths { export interface HaMapEntity { entity_id: string; color: string; - label_mode?: "name" | "state"; - display_mode?: "icon"; + label_mode?: "name" | "state" | "icon"; name?: string; focus?: boolean; } @@ -526,7 +525,7 @@ export class HaMap extends ReactiveElement { const entityIcon = (typeof entity !== "string" && - entity.display_mode === "icon" && + entity.label_mode === "icon" && stateObj.attributes.icon) || ""; // create marker with the icon @@ -538,7 +537,10 @@ export class HaMap extends ReactiveElement { entity-name="${entityName}" entity-icon="${entityIcon}" entity-picture="${ - entityPicture ? this.hass.hassUrl(entityPicture) : "" + !(typeof entity !== "string" && entity.label_mode) && + entityPicture + ? this.hass.hassUrl(entityPicture) + : "" }" ${ typeof entity !== "string" diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts index 88aa802492ed..9d051456b2f7 100644 --- a/src/panels/lovelace/cards/hui-map-card.ts +++ b/src/panels/lovelace/cards/hui-map-card.ts @@ -44,7 +44,7 @@ interface MapEntityConfig extends EntityConfig { interface GeoEntity { entity_id: string; - display_mode: "icon" | undefined; + label_mode?: "state" | "name" | "icon"; focus: boolean; } @@ -352,7 +352,7 @@ class HuiMapCard extends LitElement implements LovelaceCard { ) { geoEntities.push({ entity_id: stateObj.entity_id, - display_mode: sourceObj?.display_mode ?? allSource?.display_mode, + label_mode: sourceObj?.label_mode ?? allSource?.label_mode, focus: sourceObj ? (sourceObj.focus ?? true) : (allSource?.focus ?? true), diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts index cb9fb33c0c9c..e5d6b3f192c2 100644 --- a/src/panels/lovelace/cards/types.ts +++ b/src/panels/lovelace/cards/types.ts @@ -304,7 +304,7 @@ export interface LogbookCardConfig extends LovelaceCardConfig { interface GeoLocationSourceConfig { source: string; - display_mode?: "icon"; + label_mode?: "name" | "state" | "icon"; focus?: boolean; } diff --git a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts index 6807de7c142d..3f3498020843 100644 --- a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts @@ -48,7 +48,7 @@ export const mapEntitiesConfigStruct = union([ const geoSourcesConfigStruct = union([ object({ source: string(), - display_mode: optional(string()), + label_mode: optional(string()), focus: optional(boolean()), }), string(), From aac73a17501bfd621a35a59173578f76facd694f Mon Sep 17 00:00:00 2001 From: karwosts Date: Fri, 20 Dec 2024 16:34:54 -0800 Subject: [PATCH 4/5] use ha-state-icon --- src/components/map/ha-entity-marker.ts | 12 ++++++-- src/components/map/ha-map.ts | 38 ++++++++++---------------- 2 files changed, 24 insertions(+), 26 deletions(-) diff --git a/src/components/map/ha-entity-marker.ts b/src/components/map/ha-entity-marker.ts index 6677983d94e8..7d598e320e90 100644 --- a/src/components/map/ha-entity-marker.ts +++ b/src/components/map/ha-entity-marker.ts @@ -1,10 +1,13 @@ import { LitElement, html, css } from "lit"; import { property } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; +import type { HomeAssistant } from "../../types"; import { fireEvent } from "../../common/dom/fire_event"; import "../ha-icon"; class HaEntityMarker extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + @property({ attribute: "entity-id" }) public entityId?: string; @property({ attribute: "entity-name" }) public entityName?: string; @@ -13,7 +16,7 @@ class HaEntityMarker extends LitElement { @property({ attribute: "entity-color" }) public entityColor?: string; - @property({ attribute: "entity-icon" }) public entityIcon?: string; + @property({ attribute: "show-icon" }) public showIcon = false; protected render() { return html` @@ -29,8 +32,11 @@ class HaEntityMarker extends LitElement { "background-image": `url(${this.entityPicture})`, })} >` - : this.entityIcon - ? html`` + : this.showIcon && this.entityId + ? html`` : this.entityName} `; diff --git a/src/components/map/ha-map.ts b/src/components/map/ha-map.ts index feb33611e1dc..c4da1d7afbab 100644 --- a/src/components/map/ha-map.ts +++ b/src/components/map/ha-map.ts @@ -523,32 +523,24 @@ export class HaMap extends ReactiveElement { .join("") .substr(0, 3)); - const entityIcon = - (typeof entity !== "string" && - entity.label_mode === "icon" && - stateObj.attributes.icon) || - ""; + const entityMarker = document.createElement("ha-entity-marker"); + entityMarker.hass = this.hass; + entityMarker.showIcon = + typeof entity !== "string" && entity.label_mode === "icon"; + entityMarker.entityId = getEntityId(entity); + entityMarker.entityName = entityName; + entityMarker.entityPicture = + entityPicture && (typeof entity === "string" || !entity.label_mode) + ? this.hass.hassUrl(entityPicture) + : ""; + if (typeof entity !== "string") { + entityMarker.entityColor = entity.color; + } + // create marker with the icon const marker = Leaflet.marker([latitude, longitude], { icon: Leaflet.divIcon({ - html: ` - - `, + html: entityMarker, iconSize: [48, 48], className: "", }), From d182802d5d93092c3b194f3e466ad5c7a3e2f7cd Mon Sep 17 00:00:00 2001 From: karwosts Date: Fri, 20 Dec 2024 16:43:40 -0800 Subject: [PATCH 5/5] lint --- src/components/map/ha-entity-marker.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/map/ha-entity-marker.ts b/src/components/map/ha-entity-marker.ts index 7d598e320e90..22de16941853 100644 --- a/src/components/map/ha-entity-marker.ts +++ b/src/components/map/ha-entity-marker.ts @@ -3,7 +3,7 @@ import { property } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; import type { HomeAssistant } from "../../types"; import { fireEvent } from "../../common/dom/fire_event"; -import "../ha-icon"; +import "../ha-state-icon"; class HaEntityMarker extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -16,7 +16,7 @@ class HaEntityMarker extends LitElement { @property({ attribute: "entity-color" }) public entityColor?: string; - @property({ attribute: "show-icon" }) public showIcon = false; + @property({ attribute: "show-icon", type: Boolean }) public showIcon = false; protected render() { return html`