I have an input_select with three states: on, off, and auto.
Those three states control the behavior of a pump using a Node-RED flow. The flow works great, with the input_select determining pump state: On turns the pump on; off turns the pump off; and auto turns the pump on and off according to a schedule.
I created a horizontal stack of custom button cards with colors based on the value of the input_select. Here’s what I wanted to happen:
- when the input_select = off, the Off button is red and all others are blank
- when the input_select = on, the On button is green and all others are blank
- when the input_select = auto, the Auto button is either green or red (depending on pump state) and all others are blank
I quickly realized I couldn’t rely only on value-based color for auto, because I wanted the color of that button to change when the state of the pump changes. So I added two Auto buttons and used a Conditional card to toggle between them based on the state of the pump, i.e., to show a green Auto button if the state of the pump is on, and a red Auto button if the state of the pump is off. Here’s my card:
type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: card
state:
- value: 'off'
color: red
- value: auto
color: blank
- value: 'on'
color: blank
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: 'off'
entity_id: input_select.pool_pump_mode
entity: input_select.pool_pump_mode
name: 'Off'
icon: 'mdi:power-off'
- type: 'custom:button-card'
color_type: card
state:
- value: 'off'
color: blank
- value: auto
color: blank
- value: 'on'
color: green
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: 'on'
entity_id: input_select.pool_pump_mode
entity: input_select.pool_pump_mode
name: 'On'
icon: 'mdi:power'
- type: conditional
conditions:
- entity: switch.pool_pump
state: 'on'
card:
type: 'custom:button-card'
color_type: card
state:
- value: 'off'
color: blank
- value: 'on'
color: blank
- value: auto
color: green
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: auto
entity_id: input_select.pool_pump_mode
entity: input_select.pool_pump_mode
name: Auto
icon: 'mdi:alpha-a-circle-outline'
- type: conditional
conditions:
- entity: switch.pool_pump
state: 'off'
card:
type: 'custom:button-card'
color_type: card
state:
- value: 'off'
color: blank
- value: 'on'
color: blank
- value: auto
color: red
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: auto
entity_id: input_select.pool_pump_mode
entity: input_select.pool_pump_mode
name: Auto
icon: 'mdi:alpha-a-circle-outline'
This only sort of works. The buttons set the value of the input_select as they should, but the value-based colors don’t update as I expect them to. For example if the input_select is Off, the pump is off (as determined by my NR flow):
If I then click Auto, the Off button remains red and the Auto button also turns red:
I’d expect the Off button to switch to blank.
So because that didn’t work, I then went crazy with conditional cards and created two buttons each for Off and On, then four buttons for Auto (two each for color and for pump state), and the colors update appropriately… but because I’m depending on conditional cards, there’s a moment when the Auto button disappears and reappears (video link) that drives me nuts. Here’s that card:
type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: input_select.pool_pump_mode
state: 'off'
card:
type: 'custom:button-card'
color_type: card
state:
- value: 'off'
color: red
- value: auto
color: blank
- value: 'on'
color: blank
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: 'off'
entity_id: input_select.pool_pump_mode
entity: input_select.pool_pump_mode
name: 'Off'
icon: 'mdi:power-off'
- type: conditional
conditions:
- entity: input_select.pool_pump_mode
state_not: 'off'
card:
type: 'custom:button-card'
color_type: card
state:
- value: 'off'
color: red
- value: auto
color: blank
- value: 'on'
color: blank
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: 'off'
entity_id: input_select.pool_pump_mode
entity: input_select.pool_pump_mode
name: 'Off'
icon: 'mdi:power-off'
- type: conditional
conditions:
- entity: input_select.pool_pump_mode
state: 'on'
card:
type: 'custom:button-card'
color_type: card
state:
- value: 'off'
color: blank
- value: auto
color: blank
- value: 'on'
color: green
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: 'on'
entity_id: input_select.pool_pump_mode
entity: input_select.pool_pump_mode
name: 'On'
icon: 'mdi:power'
- type: conditional
conditions:
- entity: input_select.pool_pump_mode
state_not: 'on'
card:
type: 'custom:button-card'
color_type: card
state:
- value: 'off'
color: blank
- value: auto
color: blank
- value: 'on'
color: green
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: 'on'
entity_id: input_select.pool_pump_mode
entity: input_select.pool_pump_mode
name: 'On'
icon: 'mdi:power'
- type: conditional
conditions:
- entity: input_select.pool_pump_mode
state: auto
- entity: switch.pool_pump
state: 'on'
card:
type: 'custom:button-card'
color_type: card
color: green
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: auto
entity_id: input_select.pool_pump_mode
entity: input_select.pool_pump_mode
name: Auto
icon: 'mdi:camera-timer'
- type: conditional
conditions:
- entity: switch.pool_pump
state: 'on'
- entity: input_select.pool_pump_mode
state: 'on'
card:
type: 'custom:button-card'
color_type: card
color: blank
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: auto
entity_id: input_select.pool_pump_mode
entity: input_select.pool_pump_mode
name: Auto
icon: 'mdi:camera-timer'
- type: conditional
conditions:
- entity: input_select.pool_pump_mode
state: auto
- entity: switch.pool_pump
state: 'off'
card:
type: 'custom:button-card'
color_type: card
color: red
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: auto
entity_id: input_select.pool_pump_mode
entity: input_select.pool_pump_mode
name: Auto
icon: 'mdi:camera-timer'
- type: conditional
conditions:
- entity: switch.pool_pump
state: 'off'
- entity: input_select.pool_pump_mode
state: 'off'
card:
type: 'custom:button-card'
color_type: card
color: blank
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: auto
entity_id: input_select.pool_pump_mode
entity: input_select.pool_pump_mode
name: Auto
icon: 'mdi:camera-timer'
I’m wondering if there’s something I’m missing, or something I can do to improve this. The custom button card seemed like the way to go until it didn’t behave as I expected it to. Thanks.
EDIT: Could it be that the Custom Button Card isn’t doing what I expected because I’m trying to get it to work with an input_select… which probably isn’t a “toggleable entity”?
