Custom Button Card Two Sources One Icon?

Configuration Frontend
1

Good afternoon,

I’m wondering, with custom button card, I can do the following with the following:
Devices:
lock.back_door_lock
binary_sensor.back_door

Display:
Back Door locked AND shut? Green Door
Back Door unlocked and shut? Yellow door
Back Door Open? Red door

…with a tap action of opening up lock.back_door_lock so I could lock/unlock it.

Currently, I have the following, simple code:

type: custom:button-card
entity: binary_sensor.front_door
name: Front
show_icon: true
icon: hass:door
state:
  - value: 'off'
    color: green
    icon: hass:door
  - value: 'on'
    icon: hass:door
    styles:
      card:
        - animation: blink 2s ease infinite
    color: red

What do I need to change to accomplish the above, if it’s even possible?

Thank you!

2

You can create a helper binary sensor, that is switched to true, when both conditions are met via an automation and false for any condition not met. Then use the helper to determine the color. You can create the helper in settings. It’s a specific tab next to integrations, devices and entities.

Edit: Just reread your question and did see you need three options. So use a text input helper with states red, green and yellow and use the automation to set the states.

Personally, I really do prefer node red for tasks like that, cause i think its much more straightforward -but thats just me.

3

This card accepts templates.

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_boolean.test_boolean
      - input_boolean.test_boolean_2
  - type: custom:button-card
    triggers_update:
      - input_boolean.test_boolean
      - input_boolean.test_boolean_2
    entity: sun.sun
    styles:
      icon:
        - color: >-
            [[[
              if (
                  states['input_boolean.test_boolean'].state == 'on' &&
                  states['input_boolean.test_boolean_2'].state == 'on'
                 )
                return 'red';
              else
              if (
                  states['input_boolean.test_boolean'].state == 'on' &&
                  states['input_boolean.test_boolean_2'].state == 'off'
                 )
                return 'cyan';
              else
              if (
                  states['input_boolean.test_boolean'].state == 'off' &&
                  states['input_boolean.test_boolean_2'].state == 'on'
                 )
                return 'green';
              else
                return 'yellow';
            ]]]

изображение

1 Like