diff --git a/gallery/src/pages/lovelace/tile-card.ts b/gallery/src/pages/lovelace/tile-card.ts index 00e1e29376..b161b51a52 100644 --- a/gallery/src/pages/lovelace/tile-card.ts +++ b/gallery/src/pages/lovelace/tile-card.ts @@ -14,7 +14,7 @@ const ENTITIES = [ }), getEntity("light", "bed_light", "on", { friendly_name: "Bed Light", - supported_color_modes: [LightColorMode.HS], + supported_color_modes: [LightColorMode.HS, LightColorMode.COLOR_TEMP], }), getEntity("light", "unavailable", "unavailable", { friendly_name: "Unavailable entity", @@ -116,6 +116,15 @@ const CONFIGS = [ - type: "light-brightness" `, }, + { + heading: "Light color temperature feature", + config: ` +- type: tile + entity: light.bed_light + features: + - type: "color-temp" + `, + }, { heading: "Vacuum commands feature", config: ` diff --git a/src/panels/lovelace/create-element/create-tile-feature-element.ts b/src/panels/lovelace/create-element/create-tile-feature-element.ts index 5597f2cac2..1f33678be3 100644 --- a/src/panels/lovelace/create-element/create-tile-feature-element.ts +++ b/src/panels/lovelace/create-element/create-tile-feature-element.ts @@ -4,6 +4,7 @@ import "../tile-features/hui-cover-open-close-tile-feature"; import "../tile-features/hui-cover-tilt-tile-feature"; import "../tile-features/hui-fan-speed-tile-feature"; import "../tile-features/hui-light-brightness-tile-feature"; +import "../tile-features/hui-light-color-temp-tile-feature"; import "../tile-features/hui-vacuum-commands-tile-feature"; import "../tile-features/hui-water-heater-operation-modes-tile-feature"; import { LovelaceTileFeatureConfig } from "../tile-features/types"; @@ -16,6 +17,7 @@ const TYPES: Set = new Set([ "cover-open-close", "cover-tilt", "light-brightness", + "light-color-temp", "vacuum-commands", "fan-speed", "alarm-modes", diff --git a/src/panels/lovelace/editor/config-elements/hui-tile-card-features-editor.ts b/src/panels/lovelace/editor/config-elements/hui-tile-card-features-editor.ts index e2b1a350c7..18091a89b3 100644 --- a/src/panels/lovelace/editor/config-elements/hui-tile-card-features-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-tile-card-features-editor.ts @@ -31,6 +31,7 @@ import { supportsCoverOpenCloseTileFeature } from "../../tile-features/hui-cover import { supportsCoverTiltTileFeature } from "../../tile-features/hui-cover-tilt-tile-feature"; import { supportsFanSpeedTileFeature } from "../../tile-features/hui-fan-speed-tile-feature"; import { supportsLightBrightnessTileFeature } from "../../tile-features/hui-light-brightness-tile-feature"; +import { supportsLightColorTempTileFeature } from "../../tile-features/hui-light-color-temp-tile-feature"; import { supportsVacuumCommandTileFeature } from "../../tile-features/hui-vacuum-commands-tile-feature"; import { supportsWaterHeaterOperationModesTileFeature } from "../../tile-features/hui-water-heater-operation-modes-tile-feature"; import { LovelaceTileFeatureConfig } from "../../tile-features/types"; @@ -42,6 +43,7 @@ const FEATURE_TYPES: FeatureType[] = [ "cover-open-close", "cover-tilt", "light-brightness", + "light-color-temp", "vacuum-commands", "fan-speed", "alarm-modes", @@ -61,6 +63,7 @@ const SUPPORTS_FEATURE_TYPES: Record = "cover-open-close": supportsCoverOpenCloseTileFeature, "cover-tilt": supportsCoverTiltTileFeature, "light-brightness": supportsLightBrightnessTileFeature, + "light-color-temp": supportsLightColorTempTileFeature, "vacuum-commands": supportsVacuumCommandTileFeature, "fan-speed": supportsFanSpeedTileFeature, "alarm-modes": supportsAlarmModesTileFeature, diff --git a/src/panels/lovelace/tile-features/hui-light-color-temp-tile-feature.ts b/src/panels/lovelace/tile-features/hui-light-color-temp-tile-feature.ts new file mode 100644 index 0000000000..78fbab6367 --- /dev/null +++ b/src/panels/lovelace/tile-features/hui-light-color-temp-tile-feature.ts @@ -0,0 +1,111 @@ +import { HassEntity } from "home-assistant-js-websocket"; +import { css, html, LitElement, nothing } from "lit"; +import { customElement, property, state } from "lit/decorators"; +import { computeDomain } from "../../../common/entity/compute_domain"; +import { stateActive } from "../../../common/entity/state_active"; +import "../../../components/ha-control-slider"; +import { UNAVAILABLE } from "../../../data/entity"; +import { LightColorMode, lightSupportsColorMode } from "../../../data/light"; +import { HomeAssistant } from "../../../types"; +import { LovelaceTileFeature } from "../types"; +import { LightColorTempTileFeatureConfig } from "./types"; + +export const supportsLightColorTempTileFeature = (stateObj: HassEntity) => { + const domain = computeDomain(stateObj.entity_id); + return ( + domain === "light" && + lightSupportsColorMode(stateObj, LightColorMode.COLOR_TEMP) + ); +}; + +@customElement("hui-light-color-temp-tile-feature") +class HuiLightColorTempTileFeature + extends LitElement + implements LovelaceTileFeature +{ + @property({ attribute: false }) public hass?: HomeAssistant; + + @property({ attribute: false }) public stateObj?: HassEntity; + + @state() private _config?: LightColorTempTileFeatureConfig; + + static getStubConfig(): LightColorTempTileFeatureConfig { + return { + type: "light-color-temp", + }; + } + + public setConfig(config: LightColorTempTileFeatureConfig): void { + if (!config) { + throw new Error("Invalid configuration"); + } + this._config = config; + } + + protected render() { + if ( + !this._config || + !this.hass || + !this.stateObj || + !supportsLightColorTempTileFeature(this.stateObj) + ) { + return nothing; + } + + const position = + this.stateObj.attributes.color_temp_kelvin != null + ? this.stateObj.attributes.color_temp_kelvin + : undefined; + + return html` +
+ +
+ `; + } + + private _valueChanged(ev: CustomEvent) { + ev.stopPropagation(); + const value = ev.detail.value; + + this.hass!.callService("light", "turn_on", { + entity_id: this.stateObj!.entity_id, + color_temp_kelvin: value, + }); + } + + static get styles() { + return css` + ha-control-slider { + --control-slider-background: -webkit-linear-gradient( + left, + rgb(255, 160, 0) 0%, + white 50%, + rgb(166, 209, 255) 100% + ); + --control-slider-background-opacity: 1; + --control-slider-thickness: 40px; + --control-slider-border-radius: 10px; + } + .container { + padding: 0 12px 12px 12px; + width: auto; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-light-color-temp-tile-feature": HuiLightColorTempTileFeature; + } +} diff --git a/src/panels/lovelace/tile-features/types.ts b/src/panels/lovelace/tile-features/types.ts index 66313a881a..478d4e98e2 100644 --- a/src/panels/lovelace/tile-features/types.ts +++ b/src/panels/lovelace/tile-features/types.ts @@ -14,6 +14,10 @@ export interface LightBrightnessTileFeatureConfig { type: "light-brightness"; } +export interface LightColorTempTileFeatureConfig { + type: "light-color-temp"; +} + export interface FanSpeedTileFeatureConfig { type: "fan-speed"; } @@ -52,6 +56,7 @@ export type LovelaceTileFeatureConfig = | CoverOpenCloseTileFeatureConfig | CoverTiltTileFeatureConfig | LightBrightnessTileFeatureConfig + | LightColorTempTileFeatureConfig | VacuumCommandsTileFeatureConfig | FanSpeedTileFeatureConfig | AlarmModesTileFeatureConfig diff --git a/src/translations/en.json b/src/translations/en.json index 346fed4163..90727c1ad3 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -4988,6 +4988,9 @@ "light-brightness": { "label": "Light brightness" }, + "light-color-temp": { + "label": "Light color temperature" + }, "vacuum-commands": { "label": "Vacuum commands", "commands": "Commands",