From b82d6fd35f7fe2ce2ac579e0ae918264a9dde8c1 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Tue, 13 Dec 2022 16:49:12 +0100 Subject: [PATCH] Fix climate hvac action color (#14747) --- gallery/src/pages/misc/entity-state.ts | 11 +++++++++++ src/common/entity/color/climate_color.ts | 10 ++++++++++ src/components/entity/state-badge.ts | 11 ++++++++++- src/panels/lovelace/cards/hui-button-card.ts | 12 +++++++++--- src/panels/lovelace/cards/hui-entity-card.ts | 13 +++++++++---- .../cards/tile/badges/tile-badge-climate.ts | 9 +-------- src/resources/ha-style.ts | 2 +- 7 files changed, 51 insertions(+), 17 deletions(-) diff --git a/gallery/src/pages/misc/entity-state.ts b/gallery/src/pages/misc/entity-state.ts index 3e04eda8f0..00218f0b4a 100644 --- a/gallery/src/pages/misc/entity-state.ts +++ b/gallery/src/pages/misc/entity-state.ts @@ -130,6 +130,17 @@ const ENTITIES: HassEntity[] = [ createEntity("climate.auto", "auto"), createEntity("climate.dry", "dry"), createEntity("climate.fan_only", "fan_only"), + createEntity("climate.auto_idle", "auto", undefined, { hvac_action: "idle" }), + createEntity("climate.auto_off", "auto", undefined, { hvac_action: "off" }), + createEntity("climate.auto_heating", "auto", undefined, { + hvac_action: "heating", + }), + createEntity("climate.auto_cooling", "auto", undefined, { + hvac_action: "cooling", + }), + createEntity("climate.auto_dry", "auto", undefined, { + hvac_action: "drying", + }), // Cover createEntity("cover.closing", "closing"), createEntity("cover.closed", "closed"), diff --git a/src/common/entity/color/climate_color.ts b/src/common/entity/color/climate_color.ts index 5da4098a9b..9d7d17ef6a 100644 --- a/src/common/entity/color/climate_color.ts +++ b/src/common/entity/color/climate_color.ts @@ -1,3 +1,13 @@ +import { HvacAction } from "../../../data/climate"; + +export const CLIMATE_HVAC_ACTION_COLORS: Record = { + 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 climateColor = (state: string): string | undefined => { switch (state) { case "auto": diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts index fdf507b0d0..abbcc52b73 100644 --- a/src/components/entity/state-badge.ts +++ b/src/components/entity/state-badge.ts @@ -11,6 +11,7 @@ import { import { property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; import { styleMap } from "lit/directives/style-map"; +import { CLIMATE_HVAC_ACTION_COLORS } from "../../common/entity/color/climate_color"; import { computeDomain } from "../../common/entity/compute_domain"; import { computeStateDomain } from "../../common/entity/compute_state_domain"; import { stateActive } from "../../common/entity/state_active"; @@ -34,7 +35,7 @@ export class StateBadge extends LitElement { @property({ type: Boolean, reflect: true, attribute: "icon" }) private _showIcon = true; - @state() private _iconStyle: { [name: string]: string } = {}; + @state() private _iconStyle: { [name: string]: string | undefined } = {}; private get _stateColor() { const domain = this.stateObj @@ -127,6 +128,14 @@ export class StateBadge extends LitElement { // lowest brightness will be around 50% (that's pretty dark) iconStyle.filter = `brightness(${(brightness + 245) / 5}%)`; } + if (stateObj.attributes.hvac_action) { + const hvacAction = stateObj.attributes.hvac_action; + if (["heating", "cooling", "drying"].includes(hvacAction)) { + iconStyle.color = `rgb(${CLIMATE_HVAC_ACTION_COLORS[hvacAction]})`; + } else { + delete iconStyle.color; + } + } } } else if (this.overrideImage) { let imageUrl = this.overrideImage; diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts index be8d189472..04eda69abe 100644 --- a/src/panels/lovelace/cards/hui-button-card.ts +++ b/src/panels/lovelace/cards/hui-button-card.ts @@ -21,6 +21,7 @@ import { ifDefined } from "lit/directives/if-defined"; import { styleMap } from "lit/directives/style-map"; import { DOMAINS_TOGGLE } from "../../../common/const"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; +import { CLIMATE_HVAC_ACTION_COLORS } from "../../../common/entity/color/climate_color"; import { computeDomain } from "../../../common/entity/compute_domain"; import { computeStateDisplay } from "../../../common/entity/compute_state_display"; import { computeStateDomain } from "../../../common/entity/compute_state_domain"; @@ -316,12 +317,17 @@ export class HuiButtonCard extends LitElement implements LovelaceCard { return ""; } - private _computeColor( - stateObj: HassEntity | LightEntity - ): string | undefined { + private _computeColor(stateObj: HassEntity): string | undefined { if (stateObj.attributes.rgb_color) { return `rgb(${stateObj.attributes.rgb_color.join(",")})`; } + if (stateObj.attributes.hvac_action) { + const hvacAction = stateObj.attributes.hvac_action; + if (["heating", "cooling", "drying"].includes(hvacAction)) { + return `rgb(${CLIMATE_HVAC_ACTION_COLORS[hvacAction]})`; + } + return undefined; + } const iconColor = stateColorCss(stateObj); if (iconColor) { return `rgb(${iconColor})`; diff --git a/src/panels/lovelace/cards/hui-entity-card.ts b/src/panels/lovelace/cards/hui-entity-card.ts index 3b73f770c9..ad00698ae6 100644 --- a/src/panels/lovelace/cards/hui-entity-card.ts +++ b/src/panels/lovelace/cards/hui-entity-card.ts @@ -12,6 +12,7 @@ import { ifDefined } from "lit/directives/if-defined"; import { styleMap } from "lit/directives/style-map"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; import { fireEvent } from "../../../common/dom/fire_event"; +import { CLIMATE_HVAC_ACTION_COLORS } from "../../../common/entity/color/climate_color"; import { computeStateDisplay } from "../../../common/entity/compute_state_display"; import { computeStateDomain } from "../../../common/entity/compute_state_domain"; import { computeStateName } from "../../../common/entity/compute_state_name"; @@ -28,7 +29,6 @@ import "../../../components/ha-card"; import "../../../components/ha-icon"; import { UNAVAILABLE_STATES } from "../../../data/entity"; import { formatAttributeValue } from "../../../data/entity_attributes"; -import { LightEntity } from "../../../data/light"; import { HomeAssistant } from "../../../types"; import { computeCardSize } from "../common/compute-card-size"; import { findEntities } from "../common/find-entities"; @@ -193,9 +193,14 @@ export class HuiEntityCard extends LitElement implements LovelaceCard { `; } - private _computeColor( - stateObj: HassEntity | LightEntity - ): string | undefined { + private _computeColor(stateObj: HassEntity): string | undefined { + if (stateObj.attributes.hvac_action) { + const hvacAction = stateObj.attributes.hvac_action; + if (["heating", "cooling", "drying"].includes(hvacAction)) { + return `rgb(${CLIMATE_HVAC_ACTION_COLORS[hvacAction]})`; + } + return undefined; + } const iconColor = stateColorCss(stateObj); if (iconColor) { return `rgb(${iconColor})`; diff --git a/src/panels/lovelace/cards/tile/badges/tile-badge-climate.ts b/src/panels/lovelace/cards/tile/badges/tile-badge-climate.ts index 547b8ef194..e06d24fae5 100644 --- a/src/panels/lovelace/cards/tile/badges/tile-badge-climate.ts +++ b/src/panels/lovelace/cards/tile/badges/tile-badge-climate.ts @@ -5,17 +5,10 @@ import { mdiSnowflake, mdiWaterPercent, } from "@mdi/js"; +import { CLIMATE_HVAC_ACTION_COLORS } from "../../../../../common/entity/color/climate_color"; import { ClimateEntity, HvacAction } from "../../../../../data/climate"; import { ComputeBadgeFunction } from "./tile-badge"; -export const CLIMATE_HVAC_ACTION_COLORS: Record = { - 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, diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts index ab7b577356..56eced1a57 100644 --- a/src/resources/ha-style.ts +++ b/src/resources/ha-style.ts @@ -156,7 +156,7 @@ documentContainer.innerHTML = ` --rgb-state-climate-fan-only-color: var(--rgb-cyan-color); --rgb-state-climate-heat-color: var(--rgb-deep-orange-color); --rgb-state-climate-heat-cool-color: var(--rgb-amber-color); - --rgb-state-climate-idle-color: var(--rgb-off-color); + --rgb-state-climate-idle-color: var(--rgb-grey-color); --rgb-state-cover-color: var(--rgb-purple-color); --rgb-state-fan-color: var(--rgb-cyan-color); --rgb-state-group-color: var(--rgb-amber-color);