Use state indicator if filter needs changing

This commit is contained in:
2020-05-01 18:00:11 +03:00
parent 9da3a09046
commit df65c41346
2 changed files with 38 additions and 10 deletions
@@ -5,7 +5,9 @@ with_state_indicator:
state_indicator_on_color: white state_indicator_on_color: white
state_indicator_off_color: transparent state_indicator_off_color: transparent
# Used when the button entity's state is 'on': state_indicator_off_size: # If set, used when the state_indicator entity is off
# state_on_indicator_s are used when the entity's state is 'on':
state_on_indicator_on_color: white state_on_indicator_on_color: white
state_on_indicator_off_color: transparent state_on_indicator_off_color: transparent
triggers_update: all # unfortunately a template doesn't seem to work here :/ triggers_update: all # unfortunately a template doesn't seem to work here :/
@@ -16,22 +18,37 @@ with_state_indicator:
entity_id: "[[[ return variables.state_indicator_id || entity.entity_id ]]]" entity_id: "[[[ return variables.state_indicator_id || entity.entity_id ]]]"
styles: styles:
name: name:
- transform: "[[[ return 'translateY(' + variables.state_indicator_size + ')' ]]]" - transform: >
[[[
const state_indicator_entity = variables.state_indicator_id || entity.entity_id;
const size = states[state_indicator_entity].state === 'on'
? variables.state_indicator_size
: variables.state_indicator_off_size || variables.state_indicator_size
return 'translateY(' + size + ')'
]]]
card: card:
- border-bottom: >- - border-bottom: >-
[[[ [[[
let color; let color;
const state_indicator = variables.state_indicator_id || entity.entity_id; const state_indicator_entity = variables.state_indicator_id || entity.entity_id;
const is_state_indicator_on = Boolean(states[state_indicator_entity].state === 'on');
if (entity.state === 'on') { if (entity.state === 'on') {
color = states[state_indicator].state === 'on' color = is_state_indicator_on
? variables.state_on_indicator_on_color ? variables.state_on_indicator_on_color
: variables.state_on_indicator_off_color; : variables.state_off_indicator_off_color;
} else { } else {
color = states[state_indicator].state === 'on' color = is_state_indicator_on
? variables.state_indicator_on_color ? variables.state_indicator_on_color
: variables.state_indicator_off_color; : variables.state_indicator_off_color;
} }
return variables.state_indicator_size + ' solid ' + color; const size = is_state_indicator_on
? variables.state_indicator_size
: variables.state_indicator_off_size || variables.state_indicator_size
return size + ' solid ' + color;
]]] ]]]
@@ -110,8 +110,17 @@
entity: switch.camera entity: switch.camera
name: Camera name: Camera
- type: custom:button-card - type: custom:button-card
template: default template:
- default
- with_state_indicator
entity: fan.philips_airpurifier entity: fan.philips_airpurifier
variables:
state_indicator_id: binary_sensor.purifier_filter_needs_change
state_indicator_size: 5px
state_indicator_off_size: 0px
state_indicator_on_color: var(--color-red)
state_on_indicator_on_color: var(--color-red)
- type: custom:button-card - type: custom:button-card
template: default template: default
entity: binary_sensor.pi_hole_enabled entity: binary_sensor.pi_hole_enabled
@@ -146,8 +155,10 @@
- font-size: 12px - font-size: 12px
variables: variables:
state_indicator_id: binary_sensor.brita_should_change_filter state_indicator_id: binary_sensor.brita_should_change_filter
state_indicator_off_color: white state_indicator_size: 5px
state_indicator_on_color: red state_indicator_off_size: 0px
state_indicator_on_color: var(--color-red)
state_on_indicator_on_color: var(--color-red)
# Column 2 # Column 2
- type: vertical-stack - type: vertical-stack