šŸ”¹ state-switch - conditional card on steroids

I have a very simple question.

Here is a view:

title: test
path: test
panel: false
icon: 'mdi:car'
cards:

  - type: 'custom:state-switch'
    entity: input_boolean.test_boolean
    default: "off"
    transition: none
    states:
      "on":
        type: entities
        title: 1
        entities:
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun

  - type: 'custom:state-switch'
    entity: input_boolean.test_boolean_2
    default: "off"
    transition: none
    states:
      "on":
        type: entities
        title: 2
        entities:
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun

  - type: 'custom:state-switch'
    entity: input_boolean.test_boolean_3
    default: "off"
    transition: none
    states:
      "on":
        type: entities
        title: 3
        entities:
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun

  - type: entities
    entities:
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean_2
      - entity: input_boolean.test_boolean_3

It has:

  • three entities cards (inside state-switch);
  • an entities card with toggles.

And here is a picture:

Is it possible not to display blank spaces?

Update (27/10/21):
Registered an issue:

thanks for this great card! It works well and I would like to explore it even more.
However, I am struggling with two issues which you might be able to help me out with.

  1. I wanted to use two switches, one to e.g. select a floor which then gives me different options for rooms, which is then the second switch. E.g. I want to select ground floor and showing first an Overview page, then I want to select living room which shows me the entities in that room. Any idea how I could solve this?

  2. Once I put state-switch, my slide-card is not working anymore. Anyone know how I can use both?

Thanks in advance

Hi,
Thanks for another great card!
I was wondering if you might have an idea how to implement something I try to do.
I have view which shows lights buttons, but only the lights that are currently on. This one is easy. Even with regular conditional card.
However I would like that while I am on that view and I am turning off one of the lights, the button will still remain on the view, until I close the view and open again, then it will disappear, and not right when I click on it.
Or at least to stay on the view for some timeā€¦ to allow me turn it back on, in case I turned it off by mistake.

Any idea how to do that with this card?

Found a possible bug related to iOS companion app.

There is an input_select value:

input_select:
  test_value:
    options:
      - one
      - two
      - three

This card is supposed to show the similar Entities card for all 3 choices:

  - type: vertical-stack
    cards:
      - type: entities
        entities:
          - entity: input_select.test_value
            name: Choice

      - type: custom:state-switch
        entity: input_select.test_value
        default: "one"
        transition: flip
        transition_time: 500
        states:
          "one":
            type: vertical-stack
            cards:
              - type: entities
                title: one
                entities:
                  - entity: input_boolean.test_boolean
                    tap_action: none

          "two":
            type: vertical-stack
            cards:
              - type: entities
                title: two
                entities:
                  - entity: input_boolean.test_boolean
                    tap_action: none

          "three":
            type: vertical-stack
            cards:
              - type: entities
                title: three
                entities:
                  - entity: input_boolean.test_boolean
                    tap_action: none

image
It works fine - but only on PC (Win10x64, Chrome).

On iOS companion app it does not work properly.
The checkbox can be toggled only for some one choice (ā€œthreeā€ as I noticed).

The code w/o vertical stack works fine:

      - type: custom:state-switch
        entity: input_select.test_value
        default: "one"
        transition: flip
        transition_time: 500
        states:
          "one":
            type: entities
            title: one
            entities:
              - entity: input_boolean.test_boolean
                tap_action: none

          "two":
            type: entities
            title: two
            entities:
              - entity: input_boolean.test_boolean
                tap_action: none

          "three":
            type: entities
            title: three
            entities:
              - entity: input_boolean.test_boolean
                tap_action: none

Using vertical-stack is rather important for meā€¦

Registered an issue on GitHub:

Update:
I managed to bypass the issue with switching off the transition:
transition: flip - need to comment this string.
Then the card started working as expected.

Probably the same issue:

Hi there, I was wondering if anyone knows how I could combine these 2 cards together without the border around the cards? thanks.
image

Can we use the user or deviceID in a tempate
usage is to Show when alarm is on but only for the kiosk user ?

any other way in how to achieve this ?

currently i have this

- type: custom:state-switch
  entity: >
        {% if is_state('binary_sensor.kiosk_alarmstatus', 'on') %}
              alarmon
        {% else %}
              alarmoff
        {% endif %}
   states:
      alarmoff:
        ....

This custom card does just that:

1 Like

Just out of curiosity: is it in some way possible to define a ā€œ< 5ā€ state? (less than 5)
i.e. a less-than / greater-than state?
And possibly even a ā€œ! textā€ (does not contain ā€˜textā€™)

Hi, I would like to use the state-switch card with a template like thisā€¦

type: custom:state-switch
entity: "{% if is_state('switch.night_mode', 'on') and now().weekday() < 5 %} day {% else %} night {% endif %}"
states:
  day:
    type: markdown
    content: Where do you want to go today?
  night:
    type: markdown
    content: Sleep tight!

ā€¦ but based on the deviceID (browser-mod), but I dont know how to handle the deviceID in the template. I have tried several option but none workā€¦

entity: "{% if (deviceID = "xxxxxxxx") or (deviceID = "aaaaaaa")  %} day {% else %} night {% endif %}"
    or
entity: "{% if (sensor.deviceID = "xxxxxxxx") or (sensor.deviceID = "aaaaaaa")  %} day {% else %} night {% endif %}"

Is it possible, and if yes how ?
Thanks in advance.

Iā€™m using this card to switch among different multimedia remotes (four of them).

Iā€™ve had this issue for quite a while and decided today to tackle it. Notice how the shadow of the last row of buttons seem cut off.

At first, I thought there was some divider or border, but several inspections revealed nothing. I then started playing with card-mod, margins and padding, and then noticed that it is actually the other 3 remotes (sets of buttons) that are overlaid and hidden. I could see this quite clearly when assigning e.g. 100px to the bottom margin or padding. No matter which input I select, the other 3 sets always causes this same issue.

The top row of buttons in the screenshot is what sets the selector (not included in the config below).

I can kind of work around this by inserting a phantom row. The faint grey lines still show, but at least the shadows arenā€™t cut off.

I couldnā€™t find anything related to this on the forum or the cardā€™s issue tracker. I also considered it being related to the vertical stack card, but couldnā€™t find anything along those lines either. I tried various things by editing and adding styles in various places in the DOM tree.

Am I the only person to have seen this? Is there anything else I could try?

Hereā€™s my card config:

          - type: custom:state-switch
            entity: input_select.selected_remote
            states:
              TV:
                type: vertical-stack
                cards:
                  - type: horizontal-stack
                    cards:
                      - type: custom:button-card
                        entity: script.samsung_tv_power
                        size: 45%
                        styles:
                          icon:
                            - color: rgb(255, 0, 0)
                        show_name: false
                        tap_action:
                          action: call-service
                          haptic: light
                          service: script.turn_on
                          service_data:
                            entity_id: script.samsung_tv_power
                      - type: entity-button
                        entity: script.samsung_tv_hdmi
                        show_name: false
                        tap_action:
                          action: call-service
                          service: script.turn_on
                          service_data:
                            entity_id: script.samsung_tv_hdmi
                      - type: entity-button
                        entity: script.samsung_tv_picture_mode
                        show_name: false
                        tap_action:
                          action: call-service
                          service: script.turn_on
                          service_data:
                            entity_id: script.samsung_tv_picture_mode
                  - type: horizontal-stack
                    cards:
                      - type: custom:button-card
                        entity: script.samsung_tv_hdmi2
                        aspect_ratio: 3.2
                        show_name: false
                        icon: mdi:apple
                        tap_action:
                          action: call-service
                          service: script.turn_on
                          service_data:
                            entity_id: script.samsung_tv_hdmi2
                      - type: custom:button-card
                        entity: script.samsung_tv_hdmi1
                        aspect_ratio: 3.2
                        show_name: false
                        icon: mdi:set-top-box
                        tap_action:
                          action: call-service
                          service: script.turn_on
                          service_data:
                            entity_id: script.samsung_tv_hdmi1
                  # this is a hack, because the state switch card "bleeds" the next setting at the bottom
                  # trying to improve this with card-mod seemed didn't help
                  # inserting a phantom row still make it look like there is a faint divider
                  # but at least the shadows of the last button row isn't obscured
                  # this hack gets repeated for every selector
                  - type: horizontal-stack
                    cards:
                      - type: custom:button-card
                        color_type: blank-card
              Audio:
                type: vertical-stack
                cards:
                  - type: horizontal-stack
                    cards:
                      - type: custom:button-card
                        entity: script.hk_3380_power_on
                        aspect_ratio: 3.2
                        show_name: false
                        styles:
                          icon:
                            - color: rgb(255, 0, 0)
                        tap_action:
                          action: call-service
                          haptic: light
                          service: script.turn_on
                          service_data:
                            entity_id: script.hk_3380_power_on
                      - type: custom:button-card
                        entity: script.hk_3380_power_off
                        aspect_ratio: 3.2
                        show_name: false
                        tap_action:
                          action: call-service
                          haptic: light
                          service: script.turn_on
                          service_data:
                            entity_id: script.hk_3380_power_off
                  - type: horizontal-stack
                    cards:
                      - type: custom:button-card
                        entity: script.hk_3380_vid1
                        show_name: false
                        size: 45%
                        styles:
                          grid:
                            - position: relative
                          custom_fields:
                            source:
                              - position: absolute
                              - left: 80%
                              - top: 60%
                              - height: 20px
                              - width: 20px
                        custom_fields:
                          source: >
                            [[[ return `<ha-icon icon="mdi:numeric-1" style="color: var(--paper-item-icon-color);"></ha-icon>` ]]]
                        tap_action:
                          action: call-service
                          haptic: light
                          service: script.turn_on
                          service_data:
                            entity_id: script.hk_3380_vid1
                      - type: custom:button-card
                        entity: script.hk_3380_vid2
                        show_name: false
                        size: 45%
                        tap_action:
                          action: call-service
                          haptic: light
                          service: script.turn_on
                          service_data:
                            entity_id: script.hk_3380_vid2
                        styles:
                          grid:
                            - position: relative
                          custom_fields:
                            source:
                              - position: absolute
                              - left: 80%
                              - top: 60%
                              - height: 20px
                              - width: 20px
                        custom_fields:
                          source: >
                            [[[ return `<ha-icon icon="mdi:numeric-2" style="color: var(--paper-item-icon-color);"></ha-icon>` ]]]
                      - type: entity-button
                        entity: script.hk_3380_dimmer
                        show_name: false
                        size: 45%
                        tap_action:
                          action: call-service
                          service: script.turn_on
                          service_data:
                            entity_id: script.hk_3380_dimmer
                  - type: horizontal-stack
                    cards:
                      - type: custom:button-card
                        entity: script.hk_3380_vol_down
                        show_name: false
                        tap_action:
                          action: call-service
                          haptic: light
                          service: script.turn_on
                          service_data:
                            entity_id: script.hk_3380_vol_down
                        hold_action:
                          repeat: 200
                          action: call-service
                          haptic: selection
                          service: script.turn_on
                          service_data:
                            entity_id: script.hk_3380_vol_down
                        double_tap_action:
                          action: call-service
                          haptic: medium
                          service: script.turn_on
                          service_data:
                            entity_id: script.hk_3380_vol_down_minus_5
                      - type: custom:button-card
                        entity: script.hk_3380_vol_up
                        show_name: false
                        tap_action:
                          action: call-service
                          haptic: light
                          service: script.turn_on
                          service_data:
                            entity_id: script.hk_3380_vol_up
                        hold_action:
                          repeat: 200
                          action: call-service
                          haptic: selection
                          service: script.turn_on
                          service_data:
                            entity_id: script.hk_3380_vol_up
                        double_tap_action:
                          action: call-service
                          haptic: medium
                          service: script.turn_on
                          service_data:
                            entity_id: script.hk_3380_vol_up_plus_5
                      - type: custom:button-card
                        entity: script.hk_3380_mute
                        show_name: false
                        styles:
                          icon:
                            - color: rgb(255, 0, 0)
                        tap_action:
                          action: call-service
                          haptic: light
                          service: script.turn_on
                          service_data:
                            entity_id: script.hk_3380_mute
                  # this is a hack
                  - type: horizontal-stack
                    cards:
                      - type: custom:button-card
                        color_type: blank-card
              "Apple TV":
                type: vertical-stack
                cards:
                  - type: horizontal-stack
                    cards:
                      - type: custom:button-card
                        entity: script.apple_tv_menu
                        aspect_ratio: 3.2
                        show_name: false
                        tap_action:
                          action: call-service
                          haptic: light
                          service: script.turn_on
                          service_data:
                            entity_id: script.apple_tv_menu
                      - type: custom:button-card
                        entity: script.apple_tv_home
                        aspect_ratio: 3.2
                        show_name: false
                        tap_action:
                          action: call-service
                          haptic: light
                          service: script.turn_on
                          service_data:
                            entity_id: script.apple_tv_home
                        double_tap_action:
                          action: call-service
                          haptic: light
                          service: script.turn_on
                          service_data:
                            entity_id: script.apple_tv_home_double_press
                        hold_action:
                          action: call-service
                          haptic: medium
                          service: remote.send_command
                          service_data:
                            entity_id: remote.living_room
                            command: home_hold
                  - type: horizontal-stack
                    cards:
                      - type: custom:button-card
                        color_type: blank-card
                      - type: entity-button
                        entity: script.apple_tv_up
                        show_name: false
                        tap_action:
                          action: call-service
                          service: script.turn_on
                          service_data:
                            entity_id: script.apple_tv_up
                      - type: custom:button-card
                        color_type: blank-card
                  - type: horizontal-stack
                    cards:
                      - type: entity-button
                        entity: script.apple_tv_left
                        show_name: false
                        tap_action:
                          action: call-service
                          service: script.turn_on
                          service_data:
                            entity_id: script.apple_tv_left
                      - type: entity-button
                        entity: script.apple_tv_ok
                        show_name: false
                        tap_action:
                          action: call-service
                          service: script.turn_on
                          service_data:
                            entity_id: script.apple_tv_ok
                      - type: entity-button
                        entity: script.apple_tv_right
                        show_name: false
                        tap_action:
                          action: call-service
                          service: script.turn_on
                          service_data:
                            entity_id: script.apple_tv_right
                  - type: horizontal-stack
                    cards:
                      - type: custom:button-card
                        color_type: blank-card
                      - type: entity-button
                        entity: script.apple_tv_down
                        show_name: false
                        tap_action:
                          action: call-service
                          service: script.turn_on
                          service_data:
                            entity_id: script.apple_tv_down
                      - type: custom:button-card
                        color_type: blank-card
                  - type: horizontal-stack
                    cards:
                      - type: entity-button
                        entity: script.apple_tv_skip_backward
                        show_name: false
                        tap_action:
                          action: call-service
                          service: script.turn_on
                          service_data:
                            entity_id: script.apple_tv_skip_backward
                      - type: entity-button
                        entity: script.apple_tv_play_pause
                        show_name: false
                        tap_action:
                          action: call-service
                          service: script.turn_on
                          service_data:
                            entity_id: script.apple_tv_play_pause
                      - type: entity-button
                        entity: script.apple_tv_skip_forward
                        show_name: false
                        tap_action:
                          action: call-service
                          service: script.turn_on
                          service_data:
                            entity_id: script.apple_tv_skip_forward
                  # this is a hack
                  - type: horizontal-stack
                    cards:
                      - type: custom:button-card
                        color_type: blank-card

Thanks @Ildar_Gabdullin ā€“ I actually came across this issue while going through the logged issue, but had no idea it was related. Iā€™ve subscribed to the issue and will wait for a fix.

hi, no answer to my questionā€¦ is my post unclear or stupid ? thx ton any help. best.

Hey,

I have a card with some Broadlink IR control buttons and I want to show this card only if the user is home. So for example, I have two users: Tom and Chris.

If Tom is home and Chris is away: ā†’ Show card to Tom, hide card from Chris
If Tom is away and Chris is home: ā†’ Hide card from Tom, show card to Chris
Both are away: ā†’ Hide card from both
Both are home ā†’ Show card to both

So this is not only dependent on the current logged in user but also on the users state (home / away).

I donā€™t know how to do this. Can someone help me please.

Thanks!

Can this card use inside picture element? Currently Iā€™m using conditional card but it giving lot of 0.0 error from time to time. I need a replacement option.

  • type: picture-elements
    image: /local/photos/lovelace_photos/2k_3dhome/hoz_view/2k_base_bw_0.5.png
    elements:
    ##################### image elements ########################
    ##### alarm armed home
    - type: custom:state-switch
    entity: alarm_control_panel.ring_alarm
    states:
    armed_home:
    elements:
    - type: image
    image: /local/photos/lovelace_photos/2k_3dhome/hoz_view/2k_alarm_border.png
    style:

                  left: 50%
                  top: 50.25%
                  width: 100%
          armed_away:
            elements:
              - type: image
                image: /local/photos/lovelace_photos/2k_3dhome/hoz_view/2k_alarm_border.png
                style:
                  left: 50%
                  top: 50.25%
                  width: 100%
1 Like

Hey guys,
I have a custom-buton-card that shows my tabletsā€™ battery percentage. When I open the FullyKiosk on either of them or even on my computer, that button-card goes missing. When I go to another HA page and go back to the desired one, it appears and stays there. It looks that custom-state-switch can not figure out which user is active for the first time we open the HA in browser. - or Iā€™m doing somthing wrong. Please take a look at my code below and tell where Iā€™m wrong.
Actually at first I tried with deviceID and got the same behaviour. Then I created a user for each tablet and yet the same.

          - type: custom:state-switch
            entity: user
            default: firehd
            states:
              firehd:
                type: custom:button-card
                entity: sensor.firehd_battery_level
                show_icon: true
                show_name: true
                color: green
                name: |
                  [[[ return entity.state + '%'; ]]]
                state:
                  - operator: template
                    value: |
                      [[[ return entity.state < 20]]]
                    styles:
                      icon:
                        - color: yellow
              m10:
                type: custom:button-card
                entity: sensor.m10_battery_level
                show_icon: true
                show_name: true
                color: green
                name: |
                  [[[ return entity.state + '%'; ]]]
                state:
                  - operator: template
                    value: |
                      [[[ return entity.state < 20]]]
                    styles:
                      icon:
                        - color: yellow

I have an issue with hash state-switch not working when inside custom:grid-layout. I can get it to work by manually typing in the #state in the URL, but only if I first use the state that is not assigned as default. Here is my code:

type: custom:grid-layout
path: home
layout:
  #default
  grid-gap: var(--custom-layout-card-padding)
  grid-template-columns: repeat(4, 1fr) 0
  grid-template-rows: 0 repeat(2, fit-content(100%))
  grid-template-areas: |
    "sidebar  .         .         .         ."
    "sidebar  entities  entities  entities  ."
    "sidebar_buttons  footer    footer    footer    ."
  mediaquery:
    #phone
    "(max-width: 800px)":
      grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
      grid-template-columns: 0 repeat(2, 1fr) 0
      grid-template-rows: 0 repeat(4, fit-content(100%))
      grid-template-areas: |
        ".  .            .               ."
        ".  sidebar      sidebar         ."
        ".  entities     entities        ."
        ".  footer       footer          ."
        ".  sidebar_buttons sidebar_buttons ."

cards:
  - !include sidebar.yaml

  - type: custom:state-switch
    entity: hash
    default: rooms
    view_layout:
      grid-area: entities
    states:
      rooms:
          type: vertical-stack
          cards:
            - a bunch of stuff
      devices:
          type: vertical-stack
          cards:
            - more stuff
       media:
           type: vertical-stack
           cards:
             - more stuff

  - !include footer.yaml

Further explanation of the issue:
When selecting the dashboard in lovelace or entering the dashboard URL into the browser, nothing loads in the state-switch area. When adding #rooms to the URL, again nothing loads. When adding #devices to the URL, the devices state will load. From there, I can then select the button created for #rooms and #media and those entities will load. I have also tested this by changing the default: state, which confirmed that the default will not load, even when initially manually putting the # in the URL. Iā€™m not sure if itā€™s a problem with my code or a problem with the state-switch card.

Hi! Is there an easy way to make the entity-buttons highlighted depending on the currently selected state?? I couldnā€™t find the answer here. In the readme, the animation shows exactly how I would want it to be (blue background of the selected state), but in the text (for hash), there is just some kind of dummy light switch entity for each of the buttonsā€¦ that doesnā€™t work. These are then just normal buttons. Should we create a numeric input and somehow check for the value and then highlight the appropriate entity-button? Itā€™s doable, not sure if thatā€™s the prettiest solution. Thanks.

Iā€™ve created radio buttons from multiple switches following this post:

ā€¦and so pressing a button (the type has to be custom:button-card) the corresponding switch is turned on, all the rest of the buttons are turned off. The tap action should be something like this:

tap_action:
  action: navigate
  navigation_path: '#some_state'
  multi_calls: |
    [[[
      hass.callService(
        "switch",
        "turn_on",
        { entity_id: "switch.some_switch"}
      );
    ]]]

I think thatā€™s still not the best solution. Thereā€™s no way to dynamically set the default state value from eg. the current input_select option. Perhaps at least thereā€™s a way to run a script on load which would toggle the switch of the selected default state right after the buttons card is loaded.

Even then that still wonā€™t be a perfect solution. For example, if someone else uses the HA simultaneously switching between the states it causes highlighting different buttons in your view even when no button is being pressed.

Is it possible to have multiple state-switch entities nested within each other? Currently Iā€™m getting the second set of state-switch both showing the on and off state cards (so 2 cards per ui edit).