From 6e4a6cb0db76d3909755bfbf89680db0e99471d1 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Sat, 10 Dec 2022 03:38:59 +0100 Subject: [PATCH] Improve person/alarm/lock state (#14633) * Opening device_class as alerting * Don't use blue color for default active color * Improve lock colors * Green color for disarmed alarm * Revert "Opening device_class as alerting" This reverts commit b78342678d430eb3967f82e759342955b44417ad. * Don't use active color * Revert amber color because fixed in another PR * Improve person, lock and alarm color state * Sort variables * Use alarm color in alarm card --- .../entity/color/alarm_control_panel_color.ts | 2 ++ src/common/entity/color/lock_color.ts | 2 ++ src/common/entity/color/person_color.ts | 2 ++ src/common/entity/state_active.ts | 6 +++--- src/common/entity/state_color.ts | 15 +++++++++------ .../chart/timeline-chart/timeline-color.ts | 11 ++++------- .../lovelace/cards/hui-alarm-panel-card.ts | 17 ++++++----------- .../cards/tile/badges/tile-badge-person.ts | 6 +++--- src/resources/ha-style.ts | 16 +++++++--------- 9 files changed, 38 insertions(+), 39 deletions(-) diff --git a/src/common/entity/color/alarm_control_panel_color.ts b/src/common/entity/color/alarm_control_panel_color.ts index ef72805c11..deb8846088 100644 --- a/src/common/entity/color/alarm_control_panel_color.ts +++ b/src/common/entity/color/alarm_control_panel_color.ts @@ -13,6 +13,8 @@ export const alarmControlPanelColor = (state?: string): string | undefined => { return "alarm-arming"; case "triggered": return "alarm-triggered"; + case "disarmed": + return "alarm-disarmed"; default: return undefined; } diff --git a/src/common/entity/color/lock_color.ts b/src/common/entity/color/lock_color.ts index faecef1288..6d0ec06665 100644 --- a/src/common/entity/color/lock_color.ts +++ b/src/common/entity/color/lock_color.ts @@ -1,5 +1,7 @@ export const lockColor = (state?: string): string | undefined => { switch (state) { + case "unlocked": + return "lock-unlocked"; case "locked": return "lock-locked"; case "jammed": diff --git a/src/common/entity/color/person_color.ts b/src/common/entity/color/person_color.ts index e1158ab8e1..efdabbd33d 100644 --- a/src/common/entity/color/person_color.ts +++ b/src/common/entity/color/person_color.ts @@ -2,6 +2,8 @@ export const personColor = (state: string): string | undefined => { switch (state) { case "home": return "person-home"; + case "not_home": + return "person-not-home"; default: return "person-zone"; } diff --git a/src/common/entity/state_active.ts b/src/common/entity/state_active.ts index 5bd58e9f2c..415be5f055 100644 --- a/src/common/entity/state_active.ts +++ b/src/common/entity/state_active.ts @@ -16,15 +16,15 @@ export function stateActive(stateObj: HassEntity, state?: string): boolean { // Custom cases switch (domain) { + case "alarm_control_panel": + return compareState !== "disarmed"; case "cover": return !["closed", "closing"].includes(compareState); case "device_tracker": case "person": return compareState !== "not_home"; - case "alarm_control_panel": - return compareState !== "disarmed"; case "lock": - return compareState !== "unlocked"; + return compareState !== "locked"; case "media_player": return compareState !== "standby"; case "vacuum": diff --git a/src/common/entity/state_color.ts b/src/common/entity/state_color.ts index 6da45f1ee1..aed20531e3 100644 --- a/src/common/entity/state_color.ts +++ b/src/common/entity/state_color.ts @@ -11,7 +11,7 @@ import { sensorColor } from "./color/sensor_color"; import { computeDomain } from "./compute_domain"; import { stateActive } from "./state_active"; -const STATIC_COLORED_DOMAIN = new Set([ +const STATIC_ACTIVE_COLORED_DOMAIN = new Set([ "alert", "automation", "calendar", @@ -37,16 +37,16 @@ export const stateColorCss = (stateObj: HassEntity, state?: string) => { return `var(--rgb-state-unavailable-color)`; } - if (!stateActive(stateObj, state)) { - return `var(--rgb-state-inactive-color)`; - } - const domainColor = stateColor(stateObj, state); if (domainColor) { return `var(--rgb-state-${domainColor}-color)`; } + if (!stateActive(stateObj, state)) { + return `var(--rgb-state-inactive-color)`; + } + return undefined; }; @@ -54,7 +54,10 @@ export const stateColor = (stateObj: HassEntity, state?: string) => { const compareState = state !== undefined ? state : stateObj?.state; const domain = computeDomain(stateObj.entity_id); - if (STATIC_COLORED_DOMAIN.has(domain)) { + if ( + STATIC_ACTIVE_COLORED_DOMAIN.has(domain) && + stateActive(stateObj, state) + ) { return domain.replace("_", "-"); } diff --git a/src/components/chart/timeline-chart/timeline-color.ts b/src/components/chart/timeline-chart/timeline-color.ts index 52e2283aa5..a61ad01e08 100644 --- a/src/components/chart/timeline-chart/timeline-color.ts +++ b/src/components/chart/timeline-chart/timeline-color.ts @@ -56,22 +56,19 @@ function computeTimelineStateColor( return rgb2hex(rgb); } - if (!stateActive(stateObj, state)) { + const color = stateColor(stateObj, state); + + if (!color && !stateActive(stateObj, state)) { const rgb = cssToRgb("--rgb-state-inactive-color", computedStyles); if (!rgb) return undefined; return rgb2hex(rgb); } - const color = stateColor(stateObj, state); - - if (!color) return undefined; - - const domain = computeDomain(stateObj.entity_id); - const rgb = cssToRgb(`--rgb-state-${color}-color`, computedStyles); if (!rgb) return undefined; + const domain = computeDomain(stateObj.entity_id); const shade = DOMAIN_STATE_SHADES[domain]?.[state] as number | number; if (!shade) { return rgb2hex(rgb); diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts index 84f1d3b103..b9d01da1c0 100644 --- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts +++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts @@ -269,12 +269,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { flex-direction: column; align-items: center; box-sizing: border-box; - --alarm-color-disarmed: var(--label-badge-green); - --alarm-color-pending: var(--label-badge-yellow); - --alarm-color-triggered: var(--label-badge-red); - --alarm-color-armed: var(--label-badge-red); - --alarm-color-autoarm: rgba(0, 153, 255, 0.1); - --alarm-state-color: var(--alarm-color-armed); + --alarm-state-color: rgb(var(--rgb-state-alarm-armed-color)); } ha-chip { @@ -292,25 +287,25 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { } .unavailable { - --alarm-state-color: var(--state-unavailable-color); + --alarm-state-color: rgb(var(--rgb-state-unavailable-color)); } .disarmed { - --alarm-state-color: var(--alarm-color-disarmed); + --alarm-state-color: rgb(var(--rgb-state-alarm-disarmed-color)); } .triggered { - --alarm-state-color: var(--alarm-color-triggered); + --alarm-state-color: rgb(var(--rgb-state-alarm-trigger-color)); animation: pulse 1s infinite; } .arming { - --alarm-state-color: var(--alarm-color-pending); + --alarm-state-color: rgb(var(--rgb-state-alarm-arming-color)); animation: pulse 1s infinite; } .pending { - --alarm-state-color: var(--alarm-color-pending); + --alarm-state-color: rgb(var(--rgb-state-alarm-pending-color)); animation: pulse 1s infinite; } diff --git a/src/panels/lovelace/cards/tile/badges/tile-badge-person.ts b/src/panels/lovelace/cards/tile/badges/tile-badge-person.ts index 6770366acd..d4ad3d64c0 100644 --- a/src/panels/lovelace/cards/tile/badges/tile-badge-person.ts +++ b/src/panels/lovelace/cards/tile/badges/tile-badge-person.ts @@ -22,11 +22,11 @@ function personBadgeIcon(entity: HassEntity) { function personBadgeColor(entity: HassEntity) { switch (entity.state) { case "home": - return "var(--rgb-badge-person-home-color)"; + return "var(--rgb-state-person-home-color)"; case "not_home": - return "var(--rgb-badge-person-not-home-color)"; + return "var(--rgb-state-person-not-home-color)"; default: - return "var(--rgb-badge-person-zone-color)"; + return "var(--rgb-state-person-zone-color)"; } } diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts index b8adeee7d3..b4720c1d82 100644 --- a/src/resources/ha-style.ts +++ b/src/resources/ha-style.ts @@ -136,12 +136,13 @@ documentContainer.innerHTML = ` /* rgb state color */ --rgb-state-default-color: var(--rgb-dark-primary-color, 68, 115, 158); - --rgb-state-unavailable-color: var(--rgb-disabled-color); --rgb-state-inactive-color: var(--rgb-inactive-color); + --rgb-state-unavailable-color: var(--rgb-disabled-color); - /* rgb state color */ - --rgb-state-alarm-armed-color: var(--rgb-red-color); + /* rgb state domain colors */ + --rgb-state-alarm-armed-color: var(--rgb-green-color); --rgb-state-alarm-arming-color: var(--rgb-orange-color); + --rgb-state-alarm-disarmed-color: var(--rgb-inactive-color); --rgb-state-alarm-pending-color: var(--rgb-orange-color); --rgb-state-alarm-triggered-color: var(--rgb-red-color); --rgb-state-alert-color: var(--rgb-red-color); @@ -164,10 +165,12 @@ documentContainer.innerHTML = ` --rgb-state-input-boolean-color: var(--rgb-amber-color); --rgb-state-light-color: var(--rgb-amber-color); --rgb-state-lock-jammed-color: var(--rgb-red-color); - --rgb-state-lock-locked-color: var(--rgb-red-color); + --rgb-state-lock-locked-color: var(--rgb-green-color); --rgb-state-lock-pending-color: var(--rgb-orange-color); + --rgb-state-lock-unlocked-color: var(--rgb-red-color); --rgb-state-media-player-color: var(--rgb-indigo-color); --rgb-state-person-home-color: var(--rgb-green-color); + --rgb-state-person-not-home-color: var(--rgb-inactive-color); --rgb-state-person-zone-color: var(--rgb-blue-color); --rgb-state-remote-color: var(--rgb-amber-color); --rgb-state-script-color: var(--rgb-amber-color); @@ -184,11 +187,6 @@ documentContainer.innerHTML = ` --rgb-state-update-installing-color: var(--rgb-orange-color); --rgb-state-vacuum-color: var(--rgb-teal-color); - /* rgb state badge color */ - --rgb-badge-person-home-color: var(--rgb-state-person-home-color); - --rgb-badge-person-zone-color: var(--rgb-state-person-zone-color); - --rgb-badge-person-not-home-color: var(--rgb-red-color); - /* input components */ --input-idle-line-color: rgba(0, 0, 0, 0.42); --input-hover-line-color: rgba(0, 0, 0, 0.87);