From 3c61d709b508c47b735497b6369cd5f89cbfdc11 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Thu, 29 Apr 2021 21:53:22 +0200 Subject: [PATCH] Fix RGBWW colors (#9039) --- src/components/entity/state-badge.ts | 11 ++---- src/data/light.ts | 4 ++- .../more-info/controls/more-info-light.ts | 36 +++++++++++-------- src/panels/lovelace/cards/hui-button-card.ts | 12 +++---- src/panels/lovelace/cards/hui-light-card.ts | 11 +++--- 5 files changed, 35 insertions(+), 39 deletions(-) diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts index 2fa735f5b6..46886fa909 100644 --- a/src/components/entity/state-badge.ts +++ b/src/components/entity/state-badge.ts @@ -15,7 +15,6 @@ import { computeActiveState } from "../../common/entity/compute_active_state"; import { computeStateDomain } from "../../common/entity/compute_state_domain"; import { stateIcon } from "../../common/entity/state_icon"; import { iconColorCSS } from "../../common/style/icon_color_css"; -import { getLightRgbColor, LightEntity } from "../../data/light"; import type { HomeAssistant } from "../../types"; import "../ha-icon"; @@ -100,14 +99,8 @@ export class StateBadge extends LitElement { hostStyle.backgroundImage = `url(${imageUrl})`; this._showIcon = false; } else if (stateObj.state === "on") { - if ( - computeStateDomain(stateObj) === "light" && - this.stateColor !== false - ) { - const rgb = getLightRgbColor(stateObj as LightEntity); - if (rgb) { - iconStyle.color = `rgb(${rgb.slice(0, 3).join(",")})`; - } + if (this.stateColor !== false && stateObj.attributes.rgb_color) { + iconStyle.color = `rgb(${stateObj.attributes.rgb_color.join(",")})`; } if (stateObj.attributes.brightness && this.stateColor !== false) { const brightness = stateObj.attributes.brightness; diff --git a/src/data/light.ts b/src/data/light.ts index 27f335709e..a0833cb081 100644 --- a/src/data/light.ts +++ b/src/data/light.ts @@ -56,7 +56,9 @@ export const lightSupportsDimming = (entity: LightEntity) => { ); }; -export const getLightRgbColor = (entity: LightEntity): number[] | undefined => +export const getLightCurrentModeRgbColor = ( + entity: LightEntity +): number[] | undefined => entity.attributes.color_mode === LightColorModes.RGBWW ? entity.attributes.rgbww_color : entity.attributes.color_mode === LightColorModes.RGBW diff --git a/src/dialogs/more-info/controls/more-info-light.ts b/src/dialogs/more-info/controls/more-info-light.ts index 7bb67a8b77..783506a762 100644 --- a/src/dialogs/more-info/controls/more-info-light.ts +++ b/src/dialogs/more-info/controls/more-info-light.ts @@ -18,7 +18,7 @@ import "../../../components/ha-icon-button"; import "../../../components/ha-labeled-slider"; import "../../../components/ha-paper-dropdown-menu"; import { - getLightRgbColor, + getLightCurrentModeRgbColor, LightColorModes, LightEntity, lightIsInColorMode, @@ -34,6 +34,7 @@ const toggleButtons = [ { label: "Color", value: "color" }, { label: "Temperature", value: LightColorModes.COLOR_TEMP }, ]; + @customElement("more-info-light") class MoreInfoLight extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -155,7 +156,7 @@ class MoreInfoLight extends LitElement { )} icon="hass:brightness-7" max="100" - .value=${this._colorBrightnessSliderValue ?? 255} + .value=${this._colorBrightnessSliderValue ?? 100} @change=${this._colorBrightnessSliderChanged} pin >` @@ -302,9 +303,10 @@ class MoreInfoLight extends LitElement { ) : undefined; - this._colorPickerColor = getLightRgbColor(stateObj)?.slice(0, 3) as - | [number, number, number] - | undefined; + this._colorPickerColor = getLightCurrentModeRgbColor(stateObj)?.slice( + 0, + 3 + ) as [number, number, number] | undefined; } else { this._brightnessSliderValue = 0; } @@ -379,9 +381,9 @@ class MoreInfoLight extends LitElement { return; } - wv = (wv * 255) / 100; + wv = Math.min(255, Math.round((wv * 255) / 100)); - const rgb = getLightRgbColor(this.stateObj!); + const rgb = getLightCurrentModeRgbColor(this.stateObj!); if (name === "wv") { const rgbw_color = rgb || [0, 0, 0, 0]; @@ -406,9 +408,15 @@ class MoreInfoLight extends LitElement { private _colorBrightnessSliderChanged(ev: CustomEvent) { const target = ev.target as any; - const value = Number(target.value); + let value = Number(target.value); - const rgb = (getLightRgbColor(this.stateObj!)?.slice(0, 3) || [ + if (isNaN(value)) { + return; + } + + value = (value * 255) / 100; + + const rgb = (getLightCurrentModeRgbColor(this.stateObj!)?.slice(0, 3) || [ 255, 255, 255, @@ -420,7 +428,7 @@ class MoreInfoLight extends LitElement { this._colorBrightnessSliderValue ? this._adjustColorBrightness( rgb, - this._colorBrightnessSliderValue, + (this._colorBrightnessSliderValue * 255) / 100, true ) : rgb, @@ -449,9 +457,9 @@ class MoreInfoLight extends LitElement { if (invert) { ratio = 1 / ratio; } - rgbColor[0] *= ratio; - rgbColor[1] *= ratio; - rgbColor[2] *= ratio; + rgbColor[0] = Math.min(255, Math.round(rgbColor[0] * ratio)); + rgbColor[1] = Math.min(255, Math.round(rgbColor[1] * ratio)); + rgbColor[2] = Math.min(255, Math.round(rgbColor[2] * ratio)); } return rgbColor; } @@ -491,7 +499,7 @@ class MoreInfoLight extends LitElement { this._colorBrightnessSliderValue ? this._adjustColorBrightness( [ev.detail.rgb.r, ev.detail.rgb.g, ev.detail.rgb.b], - this._colorBrightnessSliderValue + (this._colorBrightnessSliderValue * 255) / 100 ) : [ev.detail.rgb.r, ev.detail.rgb.g, ev.detail.rgb.b] ); diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts index 2c535a8bba..f8ed4453a7 100644 --- a/src/panels/lovelace/cards/hui-button-card.ts +++ b/src/panels/lovelace/cards/hui-button-card.ts @@ -28,7 +28,7 @@ import { stateIcon } from "../../../common/entity/state_icon"; import { isValidEntityId } from "../../../common/entity/valid_entity_id"; import { iconColorCSS } from "../../../common/style/icon_color_css"; import "../../../components/ha-card"; -import { getLightRgbColor, LightEntity } from "../../../data/light"; +import { LightEntity } from "../../../data/light"; import { ActionHandlerEvent } from "../../../data/lovelace"; import { HomeAssistant } from "../../../types"; import { actionHandler } from "../common/directives/action-handler-directive"; @@ -301,14 +301,10 @@ export class HuiButtonCard extends LitElement implements LovelaceCard { } private _computeColor(stateObj: HassEntity | LightEntity): string { - if ( - !this._config?.state_color || - computeStateDomain(stateObj) !== "light" - ) { - return ""; + if (this._config?.state_color && stateObj.attributes.rgb_color) { + return `rgb(${stateObj.attributes.rgb_color.join(",")})`; } - const rgb = getLightRgbColor(stateObj as LightEntity); - return rgb ? `rgb(${rgb.slice(0, 3).join(",")})` : ""; + return ""; } private _handleAction(ev: ActionHandlerEvent) { diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts index c92d6dbbca..9c27fa7f0a 100644 --- a/src/panels/lovelace/cards/hui-light-card.ts +++ b/src/panels/lovelace/cards/hui-light-card.ts @@ -21,11 +21,7 @@ import { stateIcon } from "../../../common/entity/state_icon"; import "../../../components/ha-card"; import "../../../components/ha-icon-button"; import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../../data/entity"; -import { - getLightRgbColor, - LightEntity, - lightSupportsDimming, -} from "../../../data/light"; +import { LightEntity, lightSupportsDimming } from "../../../data/light"; import { ActionHandlerEvent } from "../../../data/lovelace"; import { HomeAssistant } from "../../../types"; import { actionHandler } from "../common/directives/action-handler-directive"; @@ -247,8 +243,9 @@ export class HuiLightCard extends LitElement implements LovelaceCard { if (stateObj.state === "off") { return ""; } - const rgb = getLightRgbColor(stateObj); - return rgb ? `rgb(${rgb.slice(0, 3).join(",")})` : ""; + return stateObj.attributes.rgb_color + ? `rgb(${stateObj.attributes.rgb_color.join(",")})` + : ""; } private _handleAction(ev: ActionHandlerEvent) {