🔹 state-switch - conditional card on steroids

Is it possible to add a time, so the custom:state-switch will switch between the CARD’s every… let’s say 5 min. ?

love your dashboard. care to elaborate on how you did it? i would love to use some parts for my dashboard.

I’ve installed this through HACS, and it shows up under installed front-end repositories… but not in the Lovelace card menu. Normal, or no?

Yes, the card menu only shows the cards built into HA, not any added through HACS or custom resources

Great card:)

Is there a way to make it go back to default view in x minutes?

Specially for @Mariusthvdb, @DavidFW1960
Managed to switch between portrait & landscape orientation for iPhone 5S.
image
For "portrait" case - had to put everything inside "vertical-stack" card - otherwise the content was not shown (an iOS bug, probably).

type: custom:state-switch
entity: mediaquery
default: all
transition_time: 500
states:
  '(orientation: portrait)':
    type: vertical-stack
    cards:
      - type: custom:shutter-card
        title: portrait
        entities:
          - entity: cover.left_living_shutter
            name: Left
            buttons_position: left
            title_position: top
          - entity: cover.bedroom_shutter
            name: Right
            buttons_position: left
            title_position: top
  all:
    type: custom:stack-in-card
    mode: horizontal
    title: landscape
    cards:
      - type: custom:shutter-card
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
            }
        entities:
          - entity: cover.screen_keuken
            name: Keuken
      - type: custom:shutter-card
        entities:
          - entity: cover.raamverduistering_stookhok
            name: Stookhok

is there a ‘default’ for the deviceID operator?

I tried it with default, and ‘all’ but only the exact deviceID match will show, the others simply don’t show at all, and dont display an error either

  - type: custom:state-switch
    entity: deviceID
    default: all
    states:
      'eaSafari0a':
        <<: &desktop-view
          type: custom:stack-in-card
          mode: horizontal
          title: Screens
          <<: *header
          cards:
            - type: custom:shutter-card
              card_mod:
              style: |
                ha-card {
                  box-shadow: none;
                }
              entities:
                - entity: cover.screen_keuken
                  name: Keuken
            - type: custom:shutter-card
              entities:
                - entity: cover.raamverduistering_stookhok
                  name: Stookhok
      '3bChrome7':
        <<: *desktop-view
      all: # also tried 'default', for any of the non matching deviceID's
        type: custom:shutter-card
        title: Screens
        <<: *header
        entities:
          - entity: cover.screen_keuken
            name: Keuken
          - entity: cover.raamverduistering_stookhok
            name: Stookhok

even with the specified deviceId for my mobile app in the iPhone, I cant get it to show up… how odd. (and I am 100% certain the deviuceID is correct, because I can play media files to it successfully

wait, that what @Ildar_Gabdullin says above this one too… sorry, I overlooked that. need to file an issue here? because the singular card shows fine on iOS. but not embedded in the state-switch, either using deviceID or mediaquery.

using the media query like this:

  - type: custom:state-switch
    entity: mediaquery
    default: default
    states:
      '(orientation: landscape)':
        type: vertical-stack
        cards:
          - type: custom:shutter-card
            title: Screens
            <<: *header
            entities:
              - entity: cover.screen_keuken
                name: Keuken
              - entity: cover.raamverduistering_stookhok
                name: Stookhok
      default:
        <<: &desktop-view
          type: custom:stack-in-card
          mode: horizontal
          title: Screens
          <<: *header
          cards:
            - type: custom:shutter-card
              card_mod:
              style: |
                ha-card {
                  box-shadow: none;
                }
              entities:
                - entity: cover.screen_keuken
                  name: Keuken
            - type: custom:shutter-card
              entities:
                - entity: cover.raamverduistering_stookhok
                  name: Stookhok

works better, and yes, the switch to landscape mode on the iPhone now is ok-ish, still cutting off the right side of the shutter image. It is not messing about the shutter-card’s position and name any longer though.

secondly, this time, it doesn’t fully respect the card-mod header anchor…

So I guess we still need the deviceID option:
when using an iPhone display the regular shutter-card (vertically) and when using anything else, show the embedded shutter-card in the stack-in-card (horizontally)

Please give me a screenshot, in my iPhone 5S there is no cutting in landscape+horizontal-stack.

will do, using an iPhone 11pro this is what I see:

since this is becoming way to complicated (and fighting an apparent bug between state-switch and iOS) I am back using plain and simple:

  - type: custom:shutter-card
    title: Screens
    <<: *header
    entities:
      - entity: cover.screen_keuken
        name: Keuken
      - entity: cover.raamverduistering_stookhok
        name: Stookhok

which respects the header mod and shows the full shutter images.

BTW, in my example the “landscape” option covered PC browser & smartphone’s portrait mode - i.e. worked fine w/o cutting.
But we need TWO conditions here:

  • orientation=portrait AND device=iPhone
  • others

since for iPad in portrait mode there is no need to show the vertical version.

I guess you’re right.
which would be way easier if the deviceID would work. Only create the exception for the iPhone’s (no need to distinguish the orientation in my setup) and create a default for all others devices…

Sorry, could you give me the FULL picture? I mean with iPhone’s aspect ratio

its even happening on Desktop when resizing:

this card simply isn’t suited for horizontal displaying I fear…

still the bug should be filed, guess it’s not dependent on shutter-card, but haven’t tested that yet

@Ildar_Gabdullin here’s the issue I just filed at State-switch, please add so Thomas gets all info her needs

Here it is:

type: custom:state-switch
entity: deviceID
default: all
transition_time: 500
states:
  'b26f5ec0-efa72998':   ## for iPhone
    type: custom:state-switch
    entity: mediaquery
    default: all
    transition_time: 500
    states:
      '(orientation: portrait)':
        ...vertical view
      all:
        ...horizontal view
  all:
    ...horizontal view

Rather cumbersome but may be reduced by using a decluttering-card or yaml anchors.

The full example:

type: custom:state-switch
entity: deviceID
default: all
transition_time: 500
states:
  b26f5ec0-efa72998:
    type: custom:state-switch
    entity: mediaquery
    default: all
    transition_time: 500
    states:
      '(orientation: portrait)':
        type: vertical-stack
        cards:
          - type: custom:shutter-card
            title: portrait
            entities:
              - entity: cover.left_living_shutter
                name: Left
                buttons_position: left
                title_position: top
              - entity: cover.bedroom_shutter
                name: Right
                buttons_position: left
                title_position: top
      all:
        type: custom:stack-in-card
        mode: horizontal
        title: landscape
        cards:
          - type: custom:shutter-card
            card_mod:
              style: |
                ha-card {
                  box-shadow: none;
                }
            entities:
              - entity: cover.screen_keuken
                name: Keuken
          - type: custom:shutter-card
            entities:
              - entity: cover.raamverduistering_stookhok
                name: Stookhok
  all:
    type: custom:stack-in-card
    mode: horizontal
    title: others
    cards:
      - type: custom:shutter-card
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
            }
        entities:
          - entity: cover.screen_keuken
            name: Keuken
      - type: custom:shutter-card
        entities:
          - entity: cover.raamverduistering_stookhok
            name: Stookhok

Added a comment - iOS devices are not displaying the state-switch selected card · Issue #56 · thomasloven/lovelace-state-switch · GitHub
This is not just an iOS issue - it happens on PC too.

1 Like

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