From bb9a526e517de4ec97e84821307148b465baddb6 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Mon, 7 Oct 2019 22:04:24 -0500 Subject: [PATCH 1/3] icon_color option for entity-button --- src/panels/lovelace/cards/hui-entity-button-card.ts | 8 ++++++-- src/panels/lovelace/cards/types.ts | 1 + 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/panels/lovelace/cards/hui-entity-button-card.ts b/src/panels/lovelace/cards/hui-entity-button-card.ts index 1bcc93b11f59..ae206e04fa0f 100644 --- a/src/panels/lovelace/cards/hui-entity-button-card.ts +++ b/src/panels/lovelace/cards/hui-entity-button-card.ts @@ -202,13 +202,17 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard { } private _computeColor(stateObj: HassEntity | LightEntity): string { - if (!stateObj.attributes.hs_color) { + if (!this._config!.icon_color && !stateObj.attributes.hs_color) { + console.log("no color"); return ""; } - const [hue, sat] = stateObj.attributes.hs_color; + const [hue, sat] = this._config!.icon_color || stateObj.attributes.hs_color; if (sat <= 10) { + console.log("no sat"); return ""; } + console.log("Hue: " + hue); + console.log("Sat: " + sat); return `hsl(${hue}, 100%, ${100 - sat / 2}%)`; } diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts index fd02a0710ef8..946ea4ca3627 100644 --- a/src/panels/lovelace/cards/types.ts +++ b/src/panels/lovelace/cards/types.ts @@ -42,6 +42,7 @@ export interface EntityButtonCardConfig extends LovelaceCardConfig { name?: string; show_name?: boolean; icon?: string; + icon_color?: string; show_icon?: boolean; theme?: string; tap_action?: ActionConfig; From da6ae33ef1dd559ece0773bb73d4bb7a81833961 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Mon, 7 Oct 2019 22:06:33 -0500 Subject: [PATCH 2/3] remove logs --- src/panels/lovelace/cards/hui-entity-button-card.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/panels/lovelace/cards/hui-entity-button-card.ts b/src/panels/lovelace/cards/hui-entity-button-card.ts index ae206e04fa0f..4621d78ca787 100644 --- a/src/panels/lovelace/cards/hui-entity-button-card.ts +++ b/src/panels/lovelace/cards/hui-entity-button-card.ts @@ -203,16 +203,12 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard { private _computeColor(stateObj: HassEntity | LightEntity): string { if (!this._config!.icon_color && !stateObj.attributes.hs_color) { - console.log("no color"); return ""; } const [hue, sat] = this._config!.icon_color || stateObj.attributes.hs_color; if (sat <= 10) { - console.log("no sat"); return ""; } - console.log("Hue: " + hue); - console.log("Sat: " + sat); return `hsl(${hue}, 100%, ${100 - sat / 2}%)`; } From c66b2c9670eb772b3418ad35c921352dae25be44 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Tue, 8 Oct 2019 21:58:34 -0500 Subject: [PATCH 3/3] address review comments and expand to other icons --- src/common/entity/compute_color.ts | 19 +++++++++++++++++++ src/components/entity/state-badge.ts | 5 ++++- .../lovelace/cards/hui-entity-button-card.ts | 14 ++------------ src/panels/lovelace/cards/hui-glance-card.ts | 1 + .../lovelace/cards/hui-picture-glance-card.ts | 5 +++++ .../components/hui-generic-entity-row.ts | 1 + .../lovelace/elements/hui-icon-element.ts | 5 +++++ .../elements/hui-state-icon-element.ts | 1 + src/panels/lovelace/elements/types.ts | 2 ++ src/panels/lovelace/entity-rows/types.ts | 1 + 10 files changed, 41 insertions(+), 13 deletions(-) create mode 100644 src/common/entity/compute_color.ts diff --git a/src/common/entity/compute_color.ts b/src/common/entity/compute_color.ts new file mode 100644 index 000000000000..2a3dd32bbb11 --- /dev/null +++ b/src/common/entity/compute_color.ts @@ -0,0 +1,19 @@ +import { HassEntity } from "home-assistant-js-websocket"; + +export const computeColor = ( + stateObj?: HassEntity, + iconColor?: string +): string => { + if (iconColor) { + return iconColor; + } + + if (!stateObj || !stateObj.attributes.hs_color) { + return ""; + } + const [hue, sat] = stateObj.attributes.hs_color; + if (sat <= 10) { + return ""; + } + return `hsl(${hue}, 100%, ${100 - sat / 2}%)`; +}; diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts index f1ca755c4f05..3b01707e6bef 100644 --- a/src/components/entity/state-badge.ts +++ b/src/components/entity/state-badge.ts @@ -21,6 +21,7 @@ class StateBadge extends LitElement { public hass?: HomeAssistant; @property() public stateObj?: HassEntity; @property() public overrideIcon?: string; + @property() public overrideIconColor?: string; @property() public overrideImage?: string; @query("ha-icon") private _icon!: HaIcon; @@ -67,7 +68,9 @@ class StateBadge extends LitElement { hostStyle.backgroundImage = `url(${imageUrl})`; iconStyle.display = "none"; } else { - if (stateObj.attributes.hs_color) { + if (this.overrideIconColor) { + iconStyle.color = this.overrideIconColor; + } else if (stateObj.attributes.hs_color) { const hue = stateObj.attributes.hs_color[0]; const sat = stateObj.attributes.hs_color[1]; if (sat > 10) { diff --git a/src/panels/lovelace/cards/hui-entity-button-card.ts b/src/panels/lovelace/cards/hui-entity-button-card.ts index 4621d78ca787..cf515bdaab45 100644 --- a/src/panels/lovelace/cards/hui-entity-button-card.ts +++ b/src/panels/lovelace/cards/hui-entity-button-card.ts @@ -28,6 +28,7 @@ import { longPress } from "../common/directives/long-press-directive"; import { handleClick } from "../common/handle-click"; import { DOMAINS_TOGGLE } from "../../../common/const"; import { EntityButtonCardConfig } from "./types"; +import { computeColor } from "../../../common/entity/compute_color"; @customElement("hui-entity-button-card") class HuiEntityButtonCard extends LitElement implements LovelaceCard { @@ -130,7 +131,7 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard { .icon="${this._config.icon || stateIcon(stateObj)}" style="${styleMap({ filter: this._computeBrightness(stateObj), - color: this._computeColor(stateObj), + color: computeColor(stateObj, this._config.icon_color), height: this._config.icon_height ? this._config.icon_height : "auto", @@ -201,17 +202,6 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard { return `brightness(${(brightness + 245) / 5}%)`; } - private _computeColor(stateObj: HassEntity | LightEntity): string { - if (!this._config!.icon_color && !stateObj.attributes.hs_color) { - return ""; - } - const [hue, sat] = this._config!.icon_color || stateObj.attributes.hs_color; - if (sat <= 10) { - return ""; - } - return `hsl(${hue}, 100%, ${100 - sat / 2}%)`; - } - private _handleTap() { handleClick(this, this.hass!, this._config!, false); } diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts index 067aa6df8696..ca8d89a3f2cd 100644 --- a/src/panels/lovelace/cards/hui-glance-card.ts +++ b/src/panels/lovelace/cards/hui-glance-card.ts @@ -203,6 +203,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard { .stateObj=${stateObj} .overrideIcon=${entityConf.icon} .overrideImage=${entityConf.image} + .overrideIconColor=${entityConf.icon_color} > ` : ""} diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts index 58992f7afa5f..33a943a0873f 100644 --- a/src/panels/lovelace/cards/hui-picture-glance-card.ts +++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts @@ -27,6 +27,8 @@ import { longPress } from "../common/directives/long-press-directive"; import { processConfigEntities } from "../common/process-config-entities"; import { handleClick } from "../common/handle-click"; import { PictureGlanceCardConfig, ConfigEntity } from "./types"; +import { styleMap } from "lit-html/directives/style-map"; +import { computeColor } from "../../../common/entity/compute_color"; const STATES_OFF = new Set(["closed", "locked", "not_home", "off"]); @@ -207,6 +209,9 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { this.hass!.language )} `}" + style=${styleMap({ + color: computeColor(stateObj, entityConf.icon_color), + })} > `; } diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts index 9ec024dc0f07..a05db82014bc 100644 --- a/src/panels/lovelace/components/hui-generic-entity-row.ts +++ b/src/panels/lovelace/components/hui-generic-entity-row.ts @@ -52,6 +52,7 @@ class HuiGenericEntityRow extends LitElement { .stateObj=${stateObj} .overrideIcon=${this.config.icon} .overrideImage=${this.config.image} + .overrideIconColor=${this.config.icon_color} >
diff --git a/src/panels/lovelace/elements/hui-icon-element.ts b/src/panels/lovelace/elements/hui-icon-element.ts index f0da18717d73..e51c1426227d 100644 --- a/src/panels/lovelace/elements/hui-icon-element.ts +++ b/src/panels/lovelace/elements/hui-icon-element.ts @@ -15,6 +15,8 @@ import { handleClick } from "../common/handle-click"; import { longPress } from "../common/directives/long-press-directive"; import { LovelaceElement, IconElementConfig } from "./types"; import { HomeAssistant } from "../../../types"; +import { styleMap } from "lit-html/directives/style-map"; +import { computeColor } from "../../../common/entity/compute_color"; @customElement("hui-icon-element") export class HuiIconElement extends LitElement implements LovelaceElement { @@ -41,6 +43,9 @@ export class HuiIconElement extends LitElement implements LovelaceElement { @ha-click="${this._handleTap}" @ha-hold="${this._handleHold}" .longPress="${longPress()}" + style=${styleMap({ + color: computeColor(undefined, this._config.icon_color), + })} > `; } diff --git a/src/panels/lovelace/elements/hui-state-icon-element.ts b/src/panels/lovelace/elements/hui-state-icon-element.ts index 7f2c39057ae2..682026b23a50 100644 --- a/src/panels/lovelace/elements/hui-state-icon-element.ts +++ b/src/panels/lovelace/elements/hui-state-icon-element.ts @@ -63,6 +63,7 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement { @ha-hold="${this._handleHold}" .longPress="${longPress()}" .overrideIcon=${this._config.icon} + .overrideIconColor=${this._config.icon_color} > `; } diff --git a/src/panels/lovelace/elements/types.ts b/src/panels/lovelace/elements/types.ts index b5457e2a0451..e5e0e518f6cf 100644 --- a/src/panels/lovelace/elements/types.ts +++ b/src/panels/lovelace/elements/types.ts @@ -23,6 +23,7 @@ export interface IconElementConfig extends LovelaceElementConfig { tap_action?: ActionConfig; hold_action?: ActionConfig; icon: string; + icon_color?: string; } export interface ImageElementConfig extends LovelaceElementConfig { @@ -53,6 +54,7 @@ export interface StateIconElementConfig extends LovelaceElementConfig { tap_action?: ActionConfig; hold_action?: ActionConfig; icon?: string; + icon_color?: string; } export interface StateLabelElementConfig extends LovelaceElementConfig { diff --git a/src/panels/lovelace/entity-rows/types.ts b/src/panels/lovelace/entity-rows/types.ts index b4819692665f..94d07b77ab02 100644 --- a/src/panels/lovelace/entity-rows/types.ts +++ b/src/panels/lovelace/entity-rows/types.ts @@ -5,6 +5,7 @@ export interface EntityConfig { type?: string; name?: string; icon?: string; + icon_color?: string; image?: string; } export interface EntityFilterEntityConfig extends EntityConfig {