mirror of
https://github.com/GeorgeSG/sarah.git
synced 2026-05-13 19:54:42 +00:00
65 lines
1.9 KiB
YAML
65 lines
1.9 KiB
YAML
progress:
|
|
variables:
|
|
min_value: 5
|
|
max_value: 40
|
|
normal_value: 19
|
|
high_value: 23
|
|
low_color: "var(--primary-color)"
|
|
normal_color: "var(--color-green)"
|
|
high_color: "var(--color-red)"
|
|
degrees: 180
|
|
triggers_update: all
|
|
show_state: true
|
|
show_name: true
|
|
styles:
|
|
name:
|
|
- position: absolute
|
|
- top: "[[[ return this.___config.show_state ? '65%' : 'initial' ]]]"
|
|
- display: flex
|
|
- align-items: center
|
|
- justify-content: center
|
|
- width: 100%
|
|
- height: "[[[ return this.___config.show_state ? 'initial' : '100%' ]]]"
|
|
- font-size: 1em
|
|
state:
|
|
- position: absolute
|
|
- top: "[[[ return this.___config.show_name ? '22%' : 'initial' ]]]"
|
|
- display: flex
|
|
- align-items: center
|
|
- justify-content: center
|
|
- width: 100%
|
|
- height: "[[[ return this.___config.show_name ? 'initial' : '100%' ]]]"
|
|
- font-size: 1.9em
|
|
icon:
|
|
- position: absolute
|
|
- top: 4px
|
|
- right: -4px
|
|
- height: 16px
|
|
img_cell:
|
|
- position: initial
|
|
card:
|
|
- background: >
|
|
[[[
|
|
const temp = entity.state;
|
|
|
|
const color = temp < variables.normal_value
|
|
? variables.low_color
|
|
: temp < variables.high_value
|
|
? variables.normal_color
|
|
: variables.high_color;
|
|
|
|
const min = variables.min_value;
|
|
const max = variables.max_value;
|
|
const percent = Math.round((temp - min)/(max - min) * 100);
|
|
const gradientPercent = 100 - percent;
|
|
|
|
const gradient = [
|
|
`${variables.degrees}deg`,
|
|
'var(--paper-card-background-color) 0%',
|
|
`var(--paper-card-background-color) ${gradientPercent}%`,
|
|
`${color} ${gradientPercent}%`
|
|
]
|
|
|
|
return `linear-gradient(${gradient.join(',')})`;
|
|
]]]
|