- ${imageUrl
- ? html`
-
- `
- : html`
-
- `}
+
+ ${imageUrl
+ ? html`
+
+ `
+ : html`
+
+ `}
+ ${badge
+ ? html`
+
+ `
+ : null}
+
= {
+ cooling: "var(--rgb-state-climate-cool-color)",
+ drying: "var(--rgb-state-climate-dry-color)",
+ heating: "var(--rgb-state-climate-heat-color)",
+ idle: "var(--rgb-state-climate-idle-color)",
+ off: "var(--rgb-state-climate-off-color)",
+};
+
+export const CLIMATE_HVAC_ACTION_ICONS: Record = {
+ cooling: mdiSnowflake,
+ drying: mdiWaterPercent,
+ heating: mdiFire,
+ idle: mdiClockOutline,
+ off: mdiPower,
+};
+
+export const computeClimateBadge: ComputeBadgeFunction = (stateObj) => {
+ const hvacAction = (stateObj as ClimateEntity).attributes.hvac_action;
+
+ if (!hvacAction || hvacAction === "off") {
+ return undefined;
+ }
+
+ return {
+ iconPath: CLIMATE_HVAC_ACTION_ICONS[hvacAction],
+ color: CLIMATE_HVAC_ACTION_COLORS[hvacAction],
+ };
+};
diff --git a/src/panels/lovelace/cards/tile/badges/tile-badge-person.ts b/src/panels/lovelace/cards/tile/badges/tile-badge-person.ts
new file mode 100644
index 0000000000..7eaa3ea340
--- /dev/null
+++ b/src/panels/lovelace/cards/tile/badges/tile-badge-person.ts
@@ -0,0 +1,44 @@
+import { mdiHelp, mdiHome, mdiHomeExportOutline } from "@mdi/js";
+import { HassEntity } from "home-assistant-js-websocket";
+import { UNAVAILABLE_STATES } from "../../../../../data/entity";
+import { HomeAssistant } from "../../../../../types";
+import { ComputeBadgeFunction } from "./tile-badge";
+
+function getZone(entity: HassEntity, hass: HomeAssistant) {
+ const state = entity.state;
+ if (state === "home" || state === "not_home") return undefined;
+
+ const zones = Object.values(hass.states).filter((stateObj) =>
+ stateObj.entity_id.startsWith("zone.")
+ );
+
+ return zones.find((z) => state === z.attributes.friendly_name);
+}
+
+function personBadgeIcon(entity: HassEntity) {
+ const state = entity.state;
+ if (UNAVAILABLE_STATES.includes(state)) {
+ return mdiHelp;
+ }
+ return state === "not_home" ? mdiHomeExportOutline : mdiHome;
+}
+
+function personBadgeColor(entity: HassEntity, inZone?: boolean) {
+ if (inZone) {
+ return "var(--rgb-state-person-zone-color)";
+ }
+ const state = entity.state;
+ return state === "not_home"
+ ? "var(--rgb-state-person-not-home-color)"
+ : "var(--rgb-state-person-home-color)";
+}
+
+export const computePersonBadge: ComputeBadgeFunction = (stateObj, hass) => {
+ const zone = getZone(stateObj, hass);
+
+ return {
+ iconPath: personBadgeIcon(stateObj),
+ icon: zone?.attributes.icon,
+ color: personBadgeColor(stateObj, Boolean(zone)),
+ };
+};
diff --git a/src/panels/lovelace/cards/tile/badges/tile-badge.ts b/src/panels/lovelace/cards/tile/badges/tile-badge.ts
new file mode 100644
index 0000000000..eebda6b5e4
--- /dev/null
+++ b/src/panels/lovelace/cards/tile/badges/tile-badge.ts
@@ -0,0 +1,29 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { computeDomain } from "../../../../../common/entity/compute_domain";
+import { HomeAssistant } from "../../../../../types";
+import { computeClimateBadge } from "./tile-badge-climate";
+import { computePersonBadge } from "./tile-badge-person";
+
+export type TileBadge = {
+ color: string;
+ icon?: string;
+ iconPath?: string;
+};
+
+export type ComputeBadgeFunction = (
+ stateObj: HassEntity,
+ hass: HomeAssistant
+) => TileBadge | undefined;
+
+export const computeTileBadge: ComputeBadgeFunction = (stateObj, hass) => {
+ const domain = computeDomain(stateObj.entity_id);
+ switch (domain) {
+ case "person":
+ case "device_tracker":
+ return computePersonBadge(stateObj, hass);
+ case "climate":
+ return computeClimateBadge(stateObj, hass);
+ default:
+ return undefined;
+ }
+};
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index 96c99e47b3..49e3e8a8f6 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -152,6 +152,9 @@ documentContainer.innerHTML = `
--rgb-state-lock-unlocked-color: var(--rgb-red-color);
--rgb-state-media-player-color: var(--rgb-indigo-color);
--rgb-state-person-color: var(--rgb-blue-grey-color);
+ --rgb-state-person-home-color: var(--rgb-green-color);
+ --rgb-state-person-not-home-color: var(--rgb-red-color);
+ --rgb-state-person-zone-color: var(--rgb-blue-color);
--rgb-state-sensor-battery-high-color: var(--rgb-green-color);
--rgb-state-sensor-battery-low-color: var(--rgb-red-color);
--rgb-state-sensor-battery-medium-color: var(--rgb-orange-color);
@@ -173,6 +176,7 @@ documentContainer.innerHTML = `
--rgb-state-climate-fan-only-color: var(--rgb-teal-color);
--rgb-state-climate-heat-color: var(--rgb-deep-orange-color);
--rgb-state-climate-heat-cool-color: var(--rgb-green-color);
+ --rgb-state-climate-idle-color: var(--rgb-disabled-color);
/* input components */
--input-idle-line-color: rgba(0, 0, 0, 0.42);