How to show 3 states on a button

My washing machine is powered via a smart plug with energy monitor. When the washing machine is running it uses over 2W.

I would like to see the washing machine’s state on my dashboard: running, standby, or off.

There doesn’t appear to be a way of testing if ( ('sensor.plug04_energy_power') > 2 ) within the YAML, so I’ve wound up creating 2 binary sensors:

  • binary_sensor.washing_machine - power > 2W
  • binary_sensor.washing_machine_standby - power between 0W and 2W

I’ve tried custom button-cards since the standard lovelace buttons appear to only work with 2 states - on or off - but I never see the standby state and the icon is always black.

My button configuration:

type: custom:button-card
tap_action:
  action: none
show_state: false
show_label: true
size: 20%
label: |
  [[[
    if (states['binary_sensor.washing_machine'].state === "on")
      return "On";
    else if (states['binary_sensor.washing_machine_standby'].state === "on")
      return "Standby";
    else if (states['binary_sensor.washing_machine'].state === "off")
      return "Off";
  ]]]
color: |
  [[[
    if (states['binary_sensor.washing_machine'].state === "on")
      return 'gold';
    else if (states['binary_sensor.washing_machine_standby'].state === "on")
      return 'red';
    else if (states['binary_sensor.washing_machine'].state === "off")
      return 'steelblue';
  ]]]
icon: |
  [[[
    if (states['binary_sensor.washing_machine_standby'].state === "on")
      return 'mdi:washing-machine-alert';
    else if (states['binary_sensor.washing_machine_standby'].state === "off")
      return 'mdi:washing-machine';
  ]]]

I was trying to do the same for my Electric Scooter, I needed three states, Charging, Fully Charged and Unplugged. I created 3 binary sensors for the 3 states and configured them to turn on depending on the readings of the energy monitor. Then, I used the Conditional Card and configured 3 different cards to show depending on the state of those three binary sensors. here’s the code I use if it helps.

- type: conditional
        conditions:
          - entity: binary_sensor.scooter_unplugged
            state: 'on'
        card:
          type: custom:mushroom-template-card
          primary: Unplugged
          secondary: ''
          icon: mdi:scooter
          layout: vertical
      - type: conditional
        conditions:
          - entity: binary_sensor.scooter_charging
            state: 'on'
        card:
          type: custom:mushroom-template-card
          primary: Charging
          secondary: ''
          icon: mdi:scooter-electric
          icon_color: red
          layout: vertical
      - type: conditional
        conditions:
          - entity: binary_sensor.scooter_fully_charged
            state: 'on'
        card:
          type: custom:mushroom-template-card
          primary: Fully Charged
          secondary: ''
          icon: mdi:scooter
          icon_color: green
          layout: vertical
1 Like

Thank you!

Conditional card was the way - I’ve kept with standard buttons for now, so I don’t seem to be able to change the colour or text, but that’s OK as I have associated the alert icon with the standby status:

image

Condition is based on the standby status - if it’s on, show a button for the standby binary sensor, otherwise show the washing machine binary sensor.

type: grid
square: true
columns: 1
cards:
  - type: conditional
    conditions:
      - entity: binary_sensor.washing_machine_standby
        state: 'off'
    card:
      show_name: false
      show_icon: true
      type: button
      tap_action:
        action: more-info
      entity: binary_sensor.washing_machine
      show_state: true
  - type: conditional
    conditions:
      - entity: binary_sensor.washing_machine_standby
        state: 'on'
    card:
      show_name: false
      show_icon: true
      type: button
      tap_action:
        action: more-info
      entity: binary_sensor.washing_machine_standby
      show_state: true

Glad to be of help.
If you use the template-card you can also change color or icon for each of your conditional cards.