Skip to content

Commit 492bbe2

Browse files
committed
refactor state color computation
1 parent 4d5a51f commit 492bbe2

File tree

4 files changed

+41
-62
lines changed

4 files changed

+41
-62
lines changed

src/components/shared/range/vsc-range-item.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { css, CSSResultGroup, html, nothing, PropertyValues, TemplateResult } fr
22
import { customElement } from 'lit/decorators.js';
33
import { styleMap } from 'lit/directives/style-map.js';
44

5-
import { _computeStateColor } from '../../../ha/common/entity/state_active';
5+
import { computeStateColor } from '../../../ha/common/color/compute-state-color';
66
import { ActionsSharedConfig, hasItemAction, RangeItemConfig } from '../../../types/config';
77
import { VscBaseRange } from '../../../utils/base-range';
88
import { generateColorBlocks, generateGradient, getColorForLevel, getNormalizedValue } from '../../../utils/colors';
@@ -240,7 +240,7 @@ export class VscRangeItem extends VscBaseRange {
240240
return nothing;
241241
}
242242
const levelStateObj = this.hass.states[entity!];
243-
const iconColor = icon_state_color ? _computeStateColor(levelStateObj) : undefined;
243+
const iconColor = icon_state_color ? computeStateColor(levelStateObj) : undefined;
244244
return html`
245245
<div class="item" id="${type}-item">
246246
${!hide_icon
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { HassEntity } from 'home-assistant-js-websocket/dist/types';
2+
import memoizeOne from 'memoize-one';
3+
4+
import { computeDomain } from '../..';
5+
import { hsv2rgb, rgb2hex, rgb2hsv } from '../../../utils';
6+
import { stateActive } from '../entity/state_active';
7+
import { stateColorCss } from '../entity/state_color';
8+
import { computeCssColor } from './compute-color';
9+
10+
export const computeStateColor = memoizeOne((stateObj: HassEntity, color?: string) => {
11+
if (!stateObj) {
12+
return undefined;
13+
}
14+
// Use custom color if active
15+
if (color) {
16+
return stateActive(stateObj) ? computeCssColor(color) : undefined;
17+
}
18+
19+
// Use light color if the light support rgb
20+
if (computeDomain(stateObj.entity_id) === 'light' && stateObj.attributes.rgb_color) {
21+
const hsvColor = rgb2hsv(stateObj.attributes.rgb_color);
22+
23+
// Modify the real rgb color for better contrast
24+
if (hsvColor[1] < 0.4) {
25+
// Special case for very light color (e.g: white)
26+
if (hsvColor[1] < 0.1) {
27+
hsvColor[2] = 225;
28+
} else {
29+
hsvColor[1] = 0.4;
30+
}
31+
}
32+
return rgb2hex(hsv2rgb(hsvColor));
33+
}
34+
35+
// Fallback to state color
36+
return stateColorCss(stateObj);
37+
});

src/ha/common/entity/state_active.ts

Lines changed: 0 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
import type { HassEntity } from 'home-assistant-js-websocket';
22

3-
import memoizeOne from 'memoize-one';
4-
5-
import { hsv2rgb, rgb2hex, rgb2hsv } from '../../../utils';
63
import { isUnavailableState, OFF, UNAVAILABLE } from '../../data/entity';
7-
import { computeCssColor } from '../color/compute-color';
84
import { computeDomain } from './compute_domain';
9-
import { stateColorCss } from './state_color';
105

116
export function stateActive(stateObj: HassEntity, state?: string): boolean {
127
const domain = computeDomain(stateObj.entity_id);
@@ -62,32 +57,3 @@ export function stateActive(stateObj: HassEntity, state?: string): boolean {
6257

6358
return true;
6459
}
65-
66-
export const _computeStateColor = memoizeOne((stateObj: HassEntity, color?: string) => {
67-
if (!stateObj) {
68-
return undefined;
69-
}
70-
// Use custom color if active
71-
if (color) {
72-
return stateActive(stateObj) ? computeCssColor(color) : undefined;
73-
}
74-
75-
// Use light color if the light support rgb
76-
if (computeDomain(stateObj.entity_id) === 'light' && stateObj.attributes.rgb_color) {
77-
const hsvColor = rgb2hsv(stateObj.attributes.rgb_color);
78-
79-
// Modify the real rgb color for better contrast
80-
if (hsvColor[1] < 0.4) {
81-
// Special case for very light color (e.g: white)
82-
if (hsvColor[1] < 0.1) {
83-
hsvColor[2] = 225;
84-
} else {
85-
hsvColor[1] = 0.4;
86-
}
87-
}
88-
return rgb2hex(hsv2rgb(hsvColor));
89-
}
90-
91-
// Fallback to state color
92-
return stateColorCss(stateObj);
93-
});

src/utils/base-indicator.ts

Lines changed: 2 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {
2626
import { toCommon, isEntity } from '../types/config/card/row-indicators';
2727
import { rgb2hex, rgb2hsv, hsv2rgb } from '../utils/colors';
2828
import { BaseElement } from './base-element';
29+
import { computeStateColor } from '../ha/common/color/compute-state-color';
2930

3031
const cameraUrlWithWidthHeight = (base_url: string, width: number, height: number) =>
3132
`${base_url}&width=${width}&height=${height}`;
@@ -212,32 +213,7 @@ export class VscIndicatorItemBase<T extends IndicatorRowItem> extends BaseElemen
212213
}
213214

214215
protected _computeStateColor = memoizeOne((stateObj: HassEntity, color?: string) => {
215-
if (!stateObj) {
216-
return undefined;
217-
}
218-
// Use custom color if active
219-
if (color) {
220-
return stateActive(stateObj) ? computeCssColor(color) : undefined;
221-
}
222-
223-
// Use light color if the light support rgb
224-
if (computeDomain(stateObj.entity_id) === 'light' && stateObj.attributes.rgb_color) {
225-
const hsvColor = rgb2hsv(stateObj.attributes.rgb_color);
226-
227-
// Modify the real rgb color for better contrast
228-
if (hsvColor[1] < 0.4) {
229-
// Special case for very light color (e.g: white)
230-
if (hsvColor[1] < 0.1) {
231-
hsvColor[2] = 225;
232-
} else {
233-
hsvColor[1] = 0.4;
234-
}
235-
}
236-
return rgb2hex(hsv2rgb(hsvColor));
237-
}
238-
239-
// Fallback to state color
240-
return stateColorCss(stateObj);
216+
return computeStateColor(stateObj, color);
241217
});
242218

243219
protected _renderIcon(stateObj: HassEntity): TemplateResult {

0 commit comments

Comments
 (0)