Creating a card to display two binary sensor states' status based on on/off

I have two binary sensors that help trigger on/off states for an outdoor z-wave outlet.

I’m looking to add a card to the dashboard that:

  1. Displays the two holidays with static text
  2. Shows a checkbox (mdi-checkbox-marked vs. mdi-checkbox-blank-outline?) within a stack card for the binary sensor status if each is on or off. Is there an easy way to do this?

With some help from ChatGPT I was able to get the framework coded. Then it was a matter of figuring out how to slice and dice it between vertical and horizontal stack cards with custom stack-in-cards.

image

Might be very niche, but here’s the code if anyone is interested. Still trying to figure out how to change the icons from the garish yellow so it matches the rest of the “green for on” format.

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Holiday Light Schedule
  - type: horizontal-stack
    cards:
      - type: entities
        entities:
          - type: custom:stack-in-card
            mode: horizontal
            cards:
              - type: conditional
                conditions:
                  - entity: binary_sensor.halloween_schedule
                    state: 'on'
                card:
                  type: button
                  name: Halloween Schedule
                  icon: mdi:checkbox-marked
                  icon_height: 50px
                  color_type: card
                  entity: binary_sensor.halloween_schedule
                  tap_action:
                    action: none
                  hold_action:
                    action: none
                  show_icon: true
                  show_name: true
                show_empty: false
              - type: conditional
                conditions:
                  - entity: binary_sensor.halloween_schedule
                    state: 'off'
                card:
                  type: button
                  name: Halloween Schedule
                  icon: mdi:checkbox-blank-outline
                  icon_height: 50px
                  color_type: card
                  entity: binary_sensor.halloween_schedule
                  tap_action:
                    action: none
                  hold_action:
                    action: none
                  show_icon: true
                  show_name: true
                show_empty: false
      - type: entities
        entities:
          - type: custom:stack-in-card
            mode: horizontal
            cards:
              - type: conditional
                conditions:
                  - entity: binary_sensor.christmas_schedule
                    state: 'on'
                card:
                  type: button
                  name: Christmas Schedule
                  icon: mdi:checkbox-marked
                  icon_height: 50px
                  color_type: card
                  entity: binary_sensor.christmas_schedule
                  tap_action:
                    action: none
                  hold_action:
                    action: none
                  show_icon: true
                  show_name: true
                show_empty: false
              - type: conditional
                conditions:
                  - entity: binary_sensor.christmas_schedule
                    state: 'off'
                card:
                  type: button
                  name: Christmas Schedule
                  icon: mdi:checkbox-blank-outline
                  icon_height: 50px
                  color_type: card
                  entity: binary_sensor.christmas_schedule
                  tap_action:
                    action: none
                  hold_action:
                    action: none
                  show_icon: true
                  show_name: true
                show_empty: false
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        name: Front Outlet A
        icon: mdi:string-lights
        icon_height: 50px
        state:
          - value: 'on'
            styles:
              card:
                - box-shadow: 5px 5px 30px rgb(31,122,255,100%)
        tap_action:
          action: toggle
        entity: switch.outdoor_z_wave_outlet
      - type: custom:button-card
        name: Front Outlet B
        icon: mdi:string-lights
        icon_height: 50px
        state:
          - value: 'on'
            styles:
              card:
                - box-shadow: 5px 5px 30px rgb(31,122,255,100%)
        tap_action:
          action: toggle
        entity: switch.outdoor_z_wave_outlet_2

1 Like