From 35cc7414dd63e0b1bddf662765fd3e151d5913e9 Mon Sep 17 00:00:00 2001 From: Vinny Furia Date: Fri, 10 Jan 2025 16:24:59 -0700 Subject: [PATCH 1/3] Implement Feature Request 1088 1. Added current humidity to state info 2. Added status badge to indicate if humidifier is idle or not --- src/cards/humidifier-card/humidifier-card.ts | 38 +++++++++++++++++--- src/ha/data/humidifier.ts | 4 +++ 2 files changed, 38 insertions(+), 4 deletions(-) diff --git a/src/cards/humidifier-card/humidifier-card.ts b/src/cards/humidifier-card/humidifier-card.ts index 3dac3656f..26c67bdc6 100644 --- a/src/cards/humidifier-card/humidifier-card.ts +++ b/src/cards/humidifier-card/humidifier-card.ts @@ -1,6 +1,7 @@ import { css, CSSResultGroup, html, nothing } from "lit"; import { customElement, state } from "lit/decorators.js"; import { classMap } from "lit/directives/class-map.js"; +import { styleMap } from "lit/directives/style-map.js"; import { actionHandler, ActionHandlerEvent, @@ -10,6 +11,7 @@ import { HomeAssistant, HumidifierEntity, isActive, + isAvailable, LovelaceCard, LovelaceCardEditor, } from "../../ha"; @@ -109,13 +111,12 @@ export class HumidifierCard const picture = computeEntityPicture(stateObj, appearance.icon_type); let stateDisplay = this.hass.formatEntityState(stateObj); - if (this.humidity) { + if (stateObj.attributes.current_humidity !== null) { const humidity = this.hass.formatEntityAttributeValue( stateObj, - "current_humidity", - this.humidity + "current_humidity" ); - stateDisplay = humidity; + stateDisplay += ` βΈ± ${humidity}`; } const rtl = computeRTL(this.hass); @@ -160,6 +161,35 @@ export class HumidifierCard `; } + protected renderBadge(entity: HumidifierEntity) { + const unavailable = !isAvailable(entity); + if (unavailable) { + return super.renderBadge(entity); + } else { + return this.renderActionBadge(entity); + } + } + + renderActionBadge(entity: HumidifierEntity) { + const action = entity.attributes.action; + if (!action || action == "off") return nothing; + + const color = action == "idle" ? "var(--rgb-disabled)" : "var(--rgb-state-humidifier)"; + const icon = "mdi:water-percent"; + + if (!icon) return nothing; + + return html` + + `; + } + static get styles(): CSSResultGroup { return [ super.styles, diff --git a/src/ha/data/humidifier.ts b/src/ha/data/humidifier.ts index 2cc661c7d..a1a4671b0 100644 --- a/src/ha/data/humidifier.ts +++ b/src/ha/data/humidifier.ts @@ -3,11 +3,15 @@ import { HassEntityBase, } from "home-assistant-js-websocket"; +export type HumidifierAction = "off" | "humidifying" | "dehumidifying" | "idle"; + export type HumidifierEntity = HassEntityBase & { attributes: HassEntityAttributeBase & { humidity?: number; + current_humidity?: number; min_humidity?: number; max_humidity?: number; + action: HumidifierAction; mode?: string; available_modes?: string[]; }; From 24d9b35f9f6fce936a006f04bc3075e202458932 Mon Sep 17 00:00:00 2001 From: Vinny Furia Date: Mon, 13 Jan 2025 22:09:17 -0700 Subject: [PATCH 2/3] Updated per PR comments Mostly removing unneeded code and improving readability. --- src/cards/humidifier-card/humidifier-card.ts | 20 ++++---------------- 1 file changed, 4 insertions(+), 16 deletions(-) diff --git a/src/cards/humidifier-card/humidifier-card.ts b/src/cards/humidifier-card/humidifier-card.ts index 26c67bdc6..59198a690 100644 --- a/src/cards/humidifier-card/humidifier-card.ts +++ b/src/cards/humidifier-card/humidifier-card.ts @@ -66,7 +66,6 @@ export class HumidifierCard }; } - @state() private humidity?: number; protected get hasControls(): boolean { return Boolean(this._config?.show_target_humidity_control); @@ -88,12 +87,6 @@ export class HumidifierCard handleAction(this, this.hass!, this._config!, ev.detail.action!); } - private onCurrentHumidityChange(e: CustomEvent<{ value?: number }>): void { - if (e.detail.value != null) { - this.humidity = e.detail.value; - } - } - protected render() { if (!this._config || !this.hass || !this._config.entity) { return nothing; @@ -151,7 +144,6 @@ export class HumidifierCard ` @@ -162,11 +154,10 @@ export class HumidifierCard } protected renderBadge(entity: HumidifierEntity) { - const unavailable = !isAvailable(entity); - if (unavailable) { - return super.renderBadge(entity); - } else { + if (isAvailable(entity)) { return this.renderActionBadge(entity); + } else { + return super.renderBadge(entity); } } @@ -175,14 +166,11 @@ export class HumidifierCard if (!action || action == "off") return nothing; const color = action == "idle" ? "var(--rgb-disabled)" : "var(--rgb-state-humidifier)"; - const icon = "mdi:water-percent"; - - if (!icon) return nothing; return html` Date: Fri, 28 Feb 2025 11:14:52 +0100 Subject: [PATCH 3/3] Use clock icon if outline --- src/cards/humidifier-card/humidifier-card.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/cards/humidifier-card/humidifier-card.ts b/src/cards/humidifier-card/humidifier-card.ts index 59198a690..02e4871d2 100644 --- a/src/cards/humidifier-card/humidifier-card.ts +++ b/src/cards/humidifier-card/humidifier-card.ts @@ -66,7 +66,6 @@ export class HumidifierCard }; } - protected get hasControls(): boolean { return Boolean(this._config?.show_target_humidity_control); } @@ -165,12 +164,14 @@ export class HumidifierCard const action = entity.attributes.action; if (!action || action == "off") return nothing; - const color = action == "idle" ? "var(--rgb-disabled)" : "var(--rgb-state-humidifier)"; + const color = + action === "idle" ? "var(--rgb-disabled)" : "var(--rgb-state-humidifier)"; + const icon = action === "idle" ? "mdi:clock-outline" : "mdi:water-percent"; return html`