Files
sarah/config/lovelace/button_card_templates/progress_button.yaml
T

55 lines
1.7 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: 0
- right: 0
- height: 16px
- transform: translateX(5px)
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 percent = (temp - variables.min_value)/(variables.max_value - variables.min_value) * 100;
const gradient = 100 - percent;
const degrees = variables.degrees + "deg";
return 'linear-gradient('+ degrees +', var(--paper-card-background-color) 0%, var(--paper-card-background-color)' + gradient + '%, ' + color + ' ' + gradient + '%)'
]]]