Fix RGBWW colors (#9039)

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;

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

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
                           ></ha-labeled-slider>`
@@ -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]
       );

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) {

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) {