jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-14 21:06:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Support white color mode (#9386)

Browse Source
This commit is contained in:
Bram Kragten 2021-06-17 15:23:08 +02:00 committed by GitHub
parent 7e507b40c4
commit 5ad95cad90
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/data/light.ts
View File

@ -8,6 +8,7 @@ export enum LightColorModes {
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",

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

@ -9,6 +9,7 @@ import {
TemplateResult, TemplateResult,
} from "lit"; } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { supportsFeature } from "../../../common/entity/supports-feature"; import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-attributes"; import "../../../components/ha-attributes";
import "../../../components/ha-button-toggle-group"; import "../../../components/ha-button-toggle-group";
@ -28,11 +29,6 @@ import {
} from "../../../data/light"; } from "../../../data/light";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
const toggleButtons = [
{ label: "Color", value: "color" },
{ label: "Temperature", value: LightColorModes.COLOR_TEMP },
];
@customElement("more-info-light") @customElement("more-info-light")
class MoreInfoLight extends LitElement { class MoreInfoLight extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@ -59,7 +55,7 @@ class MoreInfoLight extends LitElement {
@state() private _colorPickerColor?: [number, number, number]; @state() private _colorPickerColor?: [number, number, number];
@state() private _mode?: "color" | LightColorModes.COLOR_TEMP; @state() private _mode?: "color" | LightColorModes;
protected render(): TemplateResult { protected render(): TemplateResult {
if (!this.hass || !this.stateObj) { if (!this.hass || !this.stateObj) {
@ -71,6 +67,11 @@ class MoreInfoLight extends LitElement {
LightColorModes.COLOR_TEMP LightColorModes.COLOR_TEMP
); );
const supportsWhite = lightSupportsColorMode(
this.stateObj,
LightColorModes.WHITE
);
const supportsRgbww = lightSupportsColorMode( const supportsRgbww = lightSupportsColorMode(
this.stateObj, this.stateObj,
LightColorModes.RGBWW LightColorModes.RGBWW
@ -101,16 +102,17 @@ class MoreInfoLight extends LitElement {
${this.stateObj.state === "on" ${this.stateObj.state === "on"
? html` ? html`
${supportsTemp || supportsColor ? html`<hr />` : ""} ${supportsTemp || supportsColor ? html`<hr />` : ""}
${supportsTemp && supportsColor ${supportsColor && (supportsTemp || supportsWhite)
? html`<ha-button-toggle-group ? html`<ha-button-toggle-group
fullWidth fullWidth
.buttons=${toggleButtons} .buttons=${this._toggleButtons(supportsTemp, supportsWhite)}
.active=${this._mode} .active=${this._mode}
@value-changed=${this._modeChanged} @value-changed=${this._modeChanged}
></ha-button-toggle-group>` ></ha-button-toggle-group>`
: ""} : ""}
${supportsTemp && ${supportsTemp &&
(!supportsColor || this._mode === LightColorModes.COLOR_TEMP) ((!supportsColor && !supportsWhite) ||
this._mode === LightColorModes.COLOR_TEMP)
? html` ? html`
<ha-labeled-slider <ha-labeled-slider
class="color_temp" class="color_temp"
@ -126,7 +128,8 @@ class MoreInfoLight extends LitElement {
></ha-labeled-slider> ></ha-labeled-slider>
` `
: ""} : ""}
${supportsColor && (!supportsTemp || this._mode === "color") ${supportsColor &&
((!supportsTemp && !supportsWhite) || this._mode === "color")
? html` ? html`
<div class="segmentationContainer"> <div class="segmentationContainer">
<ha-color-picker <ha-color-picker
@ -251,7 +254,7 @@ class MoreInfoLight extends LitElement {
) { ) {
this._mode = lightIsInColorMode(this.stateObj!) this._mode = lightIsInColorMode(this.stateObj!)
? "color" ? "color"
: LightColorModes.COLOR_TEMP; : this.stateObj!.attributes.color_mode;
} }
let brightnessAdjust = 100; let brightnessAdjust = 100;
@ -300,6 +303,19 @@ class MoreInfoLight extends LitElement {
} }
} }
private _toggleButtons = memoizeOne(
(supportsTemp: boolean, supportsWhite: boolean) => {
const modes = [{ label: "Color", value: "color" }];
if (supportsTemp) {
modes.push({ label: "Temperature", value: LightColorModes.COLOR_TEMP });
}
if (supportsWhite) {
modes.push({ label: "White", value: LightColorModes.WHITE });
}
return modes;
}
);
private _modeChanged(ev: CustomEvent) { private _modeChanged(ev: CustomEvent) {
this._mode = ev.detail.value; this._mode = ev.detail.value;
} }
@ -326,6 +342,14 @@ class MoreInfoLight extends LitElement {
this._brightnessSliderValue = bri; this._brightnessSliderValue = bri;
if (this._mode === LightColorModes.WHITE) {
this.hass.callService("light", "turn_on", {
entity_id: this.stateObj!.entity_id,
white: Math.min(255, Math.round((bri * 255) / 100)),
});
return;
}
if (this._brightnessAdjusted) { if (this._brightnessAdjusted) {
const rgb = const rgb =
this.stateObj!.attributes.rgb_color || this.stateObj!.attributes.rgb_color ||