jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve light entity definition (#13744)

Browse Source
This commit is contained in:
Paul Bottein 2022-09-15 11:58:36 +02:00 committed by GitHub
parent 321914d53a
commit 8c03bbdccc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 130 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
gallery/src/pages/more-info/light.ts
View File

@ -1,12 +1,7 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, query } from "lit/decorators"; import { customElement, property, query } from "lit/decorators";
import "../../../../src/components/ha-card"; import "../../../../src/components/ha-card";
import { import { LightColorMode, LightEntityFeature } from "../../../../src/data/light";
LightColorModes,
SUPPORT_EFFECT,
SUPPORT_FLASH,
SUPPORT_TRANSITION,
} from "../../../../src/data/light";
import "../../../../src/dialogs/more-info/more-info-content"; import "../../../../src/dialogs/more-info/more-info-content";
import { getEntity } from "../../../../src/fake_data/entity"; import { getEntity } from "../../../../src/fake_data/entity";
import { import {
@ -22,8 +17,8 @@ const ENTITIES = [
getEntity("light", "kitchen_light", "on", { getEntity("light", "kitchen_light", "on", {
friendly_name: "Brightness Light", friendly_name: "Brightness Light",
brightness: 200, brightness: 200,
supported_color_modes: [LightColorModes.BRIGHTNESS], supported_color_modes: [LightColorMode.BRIGHTNESS],
color_mode: LightColorModes.BRIGHTNESS, color_mode: LightColorMode.BRIGHTNESS,
}), }),
getEntity("light", "color_temperature_light", "on", { getEntity("light", "color_temperature_light", "on", {
friendly_name: "White Color Temperature Light", friendly_name: "White Color Temperature Light",
@ -32,10 +27,10 @@ const ENTITIES = [
min_mireds: 30, min_mireds: 30,
max_mireds: 150, max_mireds: 150,
supported_color_modes: [ supported_color_modes: [
LightColorModes.BRIGHTNESS, LightColorMode.BRIGHTNESS,
LightColorModes.COLOR_TEMP, LightColorMode.COLOR_TEMP,
], ],
color_mode: LightColorModes.COLOR_TEMP, color_mode: LightColorMode.COLOR_TEMP,
}), }),
getEntity("light", "color_hs_light", "on", { getEntity("light", "color_hs_light", "on", {
friendly_name: "Color HS Light", friendly_name: "Color HS Light",
@ -44,13 +39,16 @@ const ENTITIES = [
rgb_color: [30, 100, 255], rgb_color: [30, 100, 255],
min_mireds: 30, min_mireds: 30,
max_mireds: 150, max_mireds: 150,
supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION, supported_features:
LightEntityFeature.EFFECT +
LightEntityFeature.FLASH +
LightEntityFeature.TRANSITION,
supported_color_modes: [ supported_color_modes: [
LightColorModes.BRIGHTNESS, LightColorMode.BRIGHTNESS,
LightColorModes.COLOR_TEMP, LightColorMode.COLOR_TEMP,
LightColorModes.HS, LightColorMode.HS,
], ],
color_mode: LightColorModes.HS, color_mode: LightColorMode.HS,
effect_list: ["random", "colorloop"], effect_list: ["random", "colorloop"],
}), }),
getEntity("light", "color_rgb_ct_light", "on", { getEntity("light", "color_rgb_ct_light", "on", {
@ -59,22 +57,28 @@ const ENTITIES = [
color_temp: 75, color_temp: 75,
min_mireds: 30, min_mireds: 30,
max_mireds: 150, max_mireds: 150,
supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION, supported_features:
LightEntityFeature.EFFECT +
LightEntityFeature.FLASH +
LightEntityFeature.TRANSITION,
supported_color_modes: [ supported_color_modes: [
LightColorModes.BRIGHTNESS, LightColorMode.BRIGHTNESS,
LightColorModes.COLOR_TEMP, LightColorMode.COLOR_TEMP,
LightColorModes.RGB, LightColorMode.RGB,
], ],
color_mode: LightColorModes.COLOR_TEMP, color_mode: LightColorMode.COLOR_TEMP,
effect_list: ["random", "colorloop"], effect_list: ["random", "colorloop"],
}), }),
getEntity("light", "color_RGB_light", "on", { getEntity("light", "color_RGB_light", "on", {
friendly_name: "Color Effects Light", friendly_name: "Color Effects Light",
brightness: 255, brightness: 255,
rgb_color: [30, 100, 255], rgb_color: [30, 100, 255],
supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION, supported_features:
supported_color_modes: [LightColorModes.BRIGHTNESS, LightColorModes.RGB], LightEntityFeature.EFFECT +
color_mode: LightColorModes.RGB, LightEntityFeature.FLASH +
LightEntityFeature.TRANSITION,
supported_color_modes: [LightColorMode.BRIGHTNESS, LightColorMode.RGB],
color_mode: LightColorMode.RGB,
effect_list: ["random", "colorloop"], effect_list: ["random", "colorloop"],
}), }),
getEntity("light", "color_rgbw_light", "on", { getEntity("light", "color_rgbw_light", "on", {
@ -83,13 +87,16 @@ const ENTITIES = [
rgbw_color: [30, 100, 255, 125], rgbw_color: [30, 100, 255, 125],
min_mireds: 30, min_mireds: 30,
max_mireds: 150, max_mireds: 150,
supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION, supported_features:
LightEntityFeature.EFFECT +
LightEntityFeature.FLASH +
LightEntityFeature.TRANSITION,
supported_color_modes: [ supported_color_modes: [
LightColorModes.BRIGHTNESS, LightColorMode.BRIGHTNESS,
LightColorModes.COLOR_TEMP, LightColorMode.COLOR_TEMP,
LightColorModes.RGBW, LightColorMode.RGBW,
], ],
color_mode: LightColorModes.RGBW, color_mode: LightColorMode.RGBW,
effect_list: ["random", "colorloop"], effect_list: ["random", "colorloop"],
}), }),
getEntity("light", "color_rgbww_light", "on", { getEntity("light", "color_rgbww_light", "on", {
@ -98,13 +105,16 @@ const ENTITIES = [
rgbww_color: [30, 100, 255, 125, 10], rgbww_color: [30, 100, 255, 125, 10],
min_mireds: 30, min_mireds: 30,
max_mireds: 150, max_mireds: 150,
supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION, supported_features:
LightEntityFeature.EFFECT +
LightEntityFeature.FLASH +
LightEntityFeature.TRANSITION,
supported_color_modes: [ supported_color_modes: [
LightColorModes.BRIGHTNESS, LightColorMode.BRIGHTNESS,
LightColorModes.COLOR_TEMP, LightColorMode.COLOR_TEMP,
LightColorModes.RGBWW, LightColorMode.RGBWW,
], ],
color_mode: LightColorModes.RGBWW, color_mode: LightColorMode.RGBWW,
effect_list: ["random", "colorloop"], effect_list: ["random", "colorloop"],
}), }),
getEntity("light", "color_xy_light", "on", { getEntity("light", "color_xy_light", "on", {
@ -114,13 +124,16 @@ const ENTITIES = [
rgb_color: [30, 100, 255], rgb_color: [30, 100, 255],
min_mireds: 30, min_mireds: 30,
max_mireds: 150, max_mireds: 150,
supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION, supported_features:
LightEntityFeature.EFFECT +
LightEntityFeature.FLASH +
LightEntityFeature.TRANSITION,
supported_color_modes: [ supported_color_modes: [
LightColorModes.BRIGHTNESS, LightColorMode.BRIGHTNESS,
LightColorModes.COLOR_TEMP, LightColorMode.COLOR_TEMP,
LightColorModes.XY, LightColorMode.XY,
], ],
color_mode: LightColorModes.XY, color_mode: LightColorMode.XY,
effect_list: ["random", "colorloop"], effect_list: ["random", "colorloop"],
}), }),
]; ];

77
src/data/light.ts
View File

@ -3,76 +3,83 @@ import {
HassEntityBase, HassEntityBase,
} from "home-assistant-js-websocket"; } from "home-assistant-js-websocket";
export const enum LightColorModes { export const enum LightEntityFeature {
EFFECT = 4,
FLASH = 8,
TRANSITION = 32,
}
export const enum LightColorMode {
UNKNOWN = "unknown", UNKNOWN = "unknown",
ONOFF = "onoff", ONOFF = "onoff",
BRIGHTNESS = "brightness", BRIGHTNESS = "brightness",
COLOR_TEMP = "color_temp", COLOR_TEMP = "color_temp",
WHITE = "white",
HS = "hs", HS = "hs",
XY = "xy", XY = "xy",
RGB = "rgb", RGB = "rgb",
RGBW = "rgbw", RGBW = "rgbw",
RGBWW = "rgbww", RGBWW = "rgbww",
WHITE = "white",
} }
const modesSupportingColor = [ const modesSupportingColor = [
LightColorModes.HS, LightColorMode.HS,
LightColorModes.XY, LightColorMode.XY,
LightColorModes.RGB, LightColorMode.RGB,
LightColorModes.RGBW, LightColorMode.RGBW,
LightColorModes.RGBWW, LightColorMode.RGBWW,
]; ];
const modesSupportingDimming = [ const modesSupportingBrightness = [
...modesSupportingColor, ...modesSupportingColor,
LightColorModes.COLOR_TEMP, LightColorMode.COLOR_TEMP,
LightColorModes.BRIGHTNESS, LightColorMode.BRIGHTNESS,
LightColorMode.WHITE,
]; ];
export const SUPPORT_EFFECT = 4;
export const SUPPORT_FLASH = 8;
export const SUPPORT_TRANSITION = 32;
export const lightSupportsColorMode = ( export const lightSupportsColorMode = (
entity: LightEntity, entity: LightEntity,
mode: LightColorModes mode: LightColorMode
) => entity.attributes.supported_color_modes?.includes(mode); ) => entity.attributes.supported_color_modes?.includes(mode) || false;
export const lightIsInColorMode = (entity: LightEntity) => export const lightIsInColorMode = (entity: LightEntity) =>
modesSupportingColor.includes(entity.attributes.color_mode); (entity.attributes.color_mode &&
modesSupportingColor.includes(entity.attributes.color_mode)) ||
false;
export const lightSupportsColor = (entity: LightEntity) => export const lightSupportsColor = (entity: LightEntity) =>
entity.attributes.supported_color_modes?.some((mode) => entity.attributes.supported_color_modes?.some((mode) =>
modesSupportingColor.includes(mode) modesSupportingColor.includes(mode)
); );
export const lightSupportsDimming = (entity: LightEntity) => export const lightSupportsBrightness = (entity: LightEntity) =>
entity.attributes.supported_color_modes?.some((mode) => entity.attributes.supported_color_modes?.some((mode) =>
modesSupportingDimming.includes(mode) modesSupportingBrightness.includes(mode)
); ) || false;
export const getLightCurrentModeRgbColor = (entity: LightEntity): number[] => export const getLightCurrentModeRgbColor = (
entity.attributes.color_mode === LightColorModes.RGBWW entity: LightEntity
): number[] | undefined =>
entity.attributes.color_mode === LightColorMode.RGBWW
? entity.attributes.rgbww_color ? entity.attributes.rgbww_color
: entity.attributes.color_mode === LightColorModes.RGBW : entity.attributes.color_mode === LightColorMode.RGBW
? entity.attributes.rgbw_color ? entity.attributes.rgbw_color
: entity.attributes.rgb_color; : entity.attributes.rgb_color;
interface LightEntityAttributes extends HassEntityAttributeBase { interface LightEntityAttributes extends HassEntityAttributeBase {
min_mireds: number; min_mireds?: number;
max_mireds: number; max_mireds?: number;
friendly_name: string; brightness?: number;
brightness: number; xy_color?: [number, number];
hs_color: [number, number]; hs_color?: [number, number];
rgb_color: [number, number, number]; color_temp?: number;
rgbw_color: [number, number, number, number]; rgb_color?: [number, number, number];
rgbww_color: [number, number, number, number, number]; rgbw_color?: [number, number, number, number];
color_temp: number; rgbww_color?: [number, number, number, number, number];
effect?: string; effect?: string;
effect_list: string[] | null; effect_list?: string[] | null;
supported_color_modes: LightColorModes[]; supported_color_modes?: LightColorMode[];
color_mode: LightColorModes; color_mode?: LightColorMode;
} }
export interface LightEntity extends HassEntityBase { export interface LightEntity extends HassEntityBase {

60
src/dialogs/more-info/controls/more-info-light.ts
View File

@ -20,13 +20,13 @@ import "../../../components/ha-labeled-slider";
import "../../../components/ha-select"; import "../../../components/ha-select";
import { import {
getLightCurrentModeRgbColor, getLightCurrentModeRgbColor,
LightColorModes, LightColorMode,
LightEntity, LightEntity,
LightEntityFeature,
lightIsInColorMode, lightIsInColorMode,
lightSupportsColor, lightSupportsColor,
lightSupportsColorMode, lightSupportsColorMode,
lightSupportsDimming, lightSupportsBrightness,
SUPPORT_EFFECT,
} from "../../../data/light"; } from "../../../data/light";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
@ -56,7 +56,7 @@ class MoreInfoLight extends LitElement {
@state() private _colorPickerColor?: [number, number, number]; @state() private _colorPickerColor?: [number, number, number];
@state() private _mode?: "color" | LightColorModes; @state() private _mode?: "color" | LightColorMode;
protected render(): TemplateResult { protected render(): TemplateResult {
if (!this.hass || !this.stateObj) { if (!this.hass || !this.stateObj) {
@ -65,29 +65,29 @@ class MoreInfoLight extends LitElement {
const supportsTemp = lightSupportsColorMode( const supportsTemp = lightSupportsColorMode(
this.stateObj, this.stateObj,
LightColorModes.COLOR_TEMP LightColorMode.COLOR_TEMP
); );
const supportsWhite = lightSupportsColorMode( const supportsWhite = lightSupportsColorMode(
this.stateObj, this.stateObj,
LightColorModes.WHITE LightColorMode.WHITE
); );
const supportsRgbww = lightSupportsColorMode( const supportsRgbww = lightSupportsColorMode(
this.stateObj, this.stateObj,
LightColorModes.RGBWW LightColorMode.RGBWW
); );
const supportsRgbw = const supportsRgbw =
!supportsRgbww && !supportsRgbww &&
lightSupportsColorMode(this.stateObj, LightColorModes.RGBW); lightSupportsColorMode(this.stateObj, LightColorMode.RGBW);
const supportsColor = const supportsColor =
supportsRgbww || supportsRgbw || lightSupportsColor(this.stateObj); supportsRgbww || supportsRgbw || lightSupportsColor(this.stateObj);
return html` return html`
<div class="content"> <div class="content">
${lightSupportsDimming(this.stateObj) ${lightSupportsBrightness(this.stateObj)
? html` ? html`
<ha-labeled-slider <ha-labeled-slider
caption=${this.hass.localize("ui.card.light.brightness")} caption=${this.hass.localize("ui.card.light.brightness")}
@ -113,7 +113,7 @@ class MoreInfoLight extends LitElement {
: ""} : ""}
${supportsTemp && ${supportsTemp &&
((!supportsColor && !supportsWhite) || ((!supportsColor && !supportsWhite) ||
this._mode === LightColorModes.COLOR_TEMP) this._mode === LightColorMode.COLOR_TEMP)
? html` ? html`
<ha-labeled-slider <ha-labeled-slider
class="color_temp" class="color_temp"
@ -204,7 +204,7 @@ class MoreInfoLight extends LitElement {
: ""} : ""}
` `
: ""} : ""}
${supportsFeature(this.stateObj, SUPPORT_EFFECT) && ${supportsFeature(this.stateObj, LightEntityFeature.EFFECT) &&
this.stateObj!.attributes.effect_list?.length this.stateObj!.attributes.effect_list?.length
? html` ? html`
<hr /> <hr />
@ -260,31 +260,31 @@ class MoreInfoLight extends LitElement {
let brightnessAdjust = 100; let brightnessAdjust = 100;
this._brightnessAdjusted = undefined; this._brightnessAdjusted = undefined;
if ( if (
stateObj.attributes.color_mode === LightColorModes.RGB && stateObj.attributes.color_mode === LightColorMode.RGB &&
!lightSupportsColorMode(stateObj, LightColorModes.RGBWW) && !lightSupportsColorMode(stateObj, LightColorMode.RGBWW) &&
!lightSupportsColorMode(stateObj, LightColorModes.RGBW) !lightSupportsColorMode(stateObj, LightColorMode.RGBW)
) { ) {
const maxVal = Math.max(...stateObj.attributes.rgb_color); const maxVal = Math.max(...stateObj.attributes.rgb_color!);
if (maxVal < 255) { if (maxVal < 255) {
this._brightnessAdjusted = maxVal; this._brightnessAdjusted = maxVal;
brightnessAdjust = (this._brightnessAdjusted / 255) * 100; brightnessAdjust = (this._brightnessAdjusted / 255) * 100;
} }
} }
this._brightnessSliderValue = Math.round( this._brightnessSliderValue = Math.round(
(stateObj.attributes.brightness * brightnessAdjust) / 255 ((stateObj.attributes.brightness || 0) * brightnessAdjust) / 255
); );
this._ctSliderValue = stateObj.attributes.color_temp; this._ctSliderValue = stateObj.attributes.color_temp;
this._wvSliderValue = this._wvSliderValue =
stateObj.attributes.color_mode === LightColorModes.RGBW stateObj.attributes.color_mode === LightColorMode.RGBW
? Math.round((stateObj.attributes.rgbw_color[3] * 100) / 255) ? Math.round((stateObj.attributes.rgbw_color![3] * 100) / 255)
: undefined; : undefined;
this._cwSliderValue = this._cwSliderValue =
stateObj.attributes.color_mode === LightColorModes.RGBWW stateObj.attributes.color_mode === LightColorMode.RGBWW
? Math.round((stateObj.attributes.rgbww_color[3] * 100) / 255) ? Math.round((stateObj.attributes.rgbww_color![3] * 100) / 255)
: undefined; : undefined;
this._wwSliderValue = this._wwSliderValue =
stateObj.attributes.color_mode === LightColorModes.RGBWW stateObj.attributes.color_mode === LightColorMode.RGBWW
? Math.round((stateObj.attributes.rgbww_color[4] * 100) / 255) ? Math.round((stateObj.attributes.rgbww_color![4] * 100) / 255)
: undefined; : undefined;
const currentRgbColor = getLightCurrentModeRgbColor(stateObj); const currentRgbColor = getLightCurrentModeRgbColor(stateObj);
@ -307,10 +307,10 @@ class MoreInfoLight extends LitElement {
(supportsTemp: boolean, supportsWhite: boolean) => { (supportsTemp: boolean, supportsWhite: boolean) => {
const modes = [{ label: "Color", value: "color" }]; const modes = [{ label: "Color", value: "color" }];
if (supportsTemp) { if (supportsTemp) {
modes.push({ label: "Temperature", value: LightColorModes.COLOR_TEMP }); modes.push({ label: "Temperature", value: LightColorMode.COLOR_TEMP });
} }
if (supportsWhite) { if (supportsWhite) {
modes.push({ label: "White", value: LightColorModes.WHITE }); modes.push({ label: "White", value: LightColorMode.WHITE });
} }
return modes; return modes;
} }
@ -342,7 +342,7 @@ class MoreInfoLight extends LitElement {
this._brightnessSliderValue = bri; this._brightnessSliderValue = bri;
if (this._mode === LightColorModes.WHITE) { if (this._mode === LightColorMode.WHITE) {
this.hass.callService("light", "turn_on", { this.hass.callService("light", "turn_on", {
entity_id: this.stateObj!.entity_id, entity_id: this.stateObj!.entity_id,
white: Math.min(255, Math.round((bri * 255) / 100)), white: Math.min(255, Math.round((bri * 255) / 100)),
@ -486,7 +486,7 @@ class MoreInfoLight extends LitElement {
} }
private _setRgbWColor(rgbColor: [number, number, number]) { private _setRgbWColor(rgbColor: [number, number, number]) {
if (lightSupportsColorMode(this.stateObj!, LightColorModes.RGBWW)) { if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGBWW)) {
const rgbww_color: [number, number, number, number, number] = this const rgbww_color: [number, number, number, number, number] = this
.stateObj!.attributes.rgbww_color .stateObj!.attributes.rgbww_color
? [...this.stateObj!.attributes.rgbww_color] ? [...this.stateObj!.attributes.rgbww_color]
@ -495,7 +495,7 @@ class MoreInfoLight extends LitElement {
entity_id: this.stateObj!.entity_id, entity_id: this.stateObj!.entity_id,
rgbww_color: rgbColor.concat(rgbww_color.slice(3)), rgbww_color: rgbColor.concat(rgbww_color.slice(3)),
}); });
} else if (lightSupportsColorMode(this.stateObj!, LightColorModes.RGBW)) { } else if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW)) {
const rgbw_color: [number, number, number, number] = this.stateObj! const rgbw_color: [number, number, number, number] = this.stateObj!
.attributes.rgbw_color .attributes.rgbw_color
? [...this.stateObj!.attributes.rgbw_color] ? [...this.stateObj!.attributes.rgbw_color]
@ -524,8 +524,8 @@ class MoreInfoLight extends LitElement {
]; ];
if ( if (
lightSupportsColorMode(this.stateObj!, LightColorModes.RGBWW) || lightSupportsColorMode(this.stateObj!, LightColorMode.RGBWW) ||
lightSupportsColorMode(this.stateObj!, LightColorModes.RGBW) lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW)
) { ) {
this._setRgbWColor( this._setRgbWColor(
this._colorBrightnessSliderValue this._colorBrightnessSliderValue
@ -535,7 +535,7 @@ class MoreInfoLight extends LitElement {
) )
: [ev.detail.rgb.r, ev.detail.rgb.g, ev.detail.rgb.b] : [ev.detail.rgb.r, ev.detail.rgb.g, ev.detail.rgb.b]
); );
} else if (lightSupportsColorMode(this.stateObj!, LightColorModes.RGB)) { } else if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGB)) {
const rgb_color: [number, number, number] = [ const rgb_color: [number, number, number] = [
ev.detail.rgb.r, ev.detail.rgb.r,
ev.detail.rgb.g, ev.detail.rgb.g,

11
src/panels/lovelace/cards/hui-light-card.ts
View File

@ -19,7 +19,7 @@ import "../../../components/ha-card";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-state-icon"; import "../../../components/ha-state-icon";
import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../../data/entity"; import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../../data/entity";
import { LightEntity, lightSupportsDimming } from "../../../data/light"; import { LightEntity, lightSupportsBrightness } from "../../../data/light";
import { ActionHandlerEvent } from "../../../data/lovelace"; import { ActionHandlerEvent } from "../../../data/lovelace";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { actionHandler } from "../common/directives/action-handler-directive"; import { actionHandler } from "../common/directives/action-handler-directive";
@ -93,8 +93,9 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
`; `;
} }
const brightness = const brightness = Math.round(
Math.round((stateObj.attributes.brightness / 255) * 100) || 0; ((stateObj.attributes.brightness || 0) / 255) * 100
);
const name = this._config.name ?? computeStateName(stateObj); const name = this._config.name ?? computeStateName(stateObj);
@ -121,14 +122,14 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
@value-changing=${this._dragEvent} @value-changing=${this._dragEvent}
@value-changed=${this._setBrightness} @value-changed=${this._setBrightness}
style=${styleMap({ style=${styleMap({
visibility: lightSupportsDimming(stateObj) visibility: lightSupportsBrightness(stateObj)
? "visible" ? "visible"
: "hidden", : "hidden",
})} })}
></round-slider> ></round-slider>
<ha-icon-button <ha-icon-button
class="light-button ${classMap({ class="light-button ${classMap({
"slider-center": lightSupportsDimming(stateObj), "slider-center": lightSupportsBrightness(stateObj),
"state-on": stateObj.state === "on", "state-on": stateObj.state === "on",
"state-unavailable": stateObj.state === UNAVAILABLE, "state-unavailable": stateObj.state === UNAVAILABLE,
})}" })}"