🔹 state-switch - conditional card on steroids

[mpoonawala (muslim poonawala)]

Sir, thank you so much for sharing this. It worked for me.
Sir i have one requirement.
Whenever a switch or light is turned on or off, i need to inform the owner on his iphone.
I was wondering when an entity shows up/or leaves this conditional card, how can i use the state and entity name to be displayed as a notification?

[kciceman]

Thanks for another great card. Finally I was able to achieve some kind of satisfying layout. It uses other great custom cards and layouts, but without making it too complex I created an interface that emulates a windows 10 desktop. I would be nice to have an option for up-down slide (or down-up slide).

[CDRX2]

Check out Lovelace: Swiper card

[mboarman (Mark Boarman)]

Another great card from Thomas! Quick question…I have a entity state switch built out and working…but I was wondering if it was possible to direct multiple entities to the same switch? In other words, I have an entity with 5 different input_select conditions , but I only want 2 of them to display a different switch, instead of duplicating all 3 of the same, is it possible to link them together somehow? Just trying to keep my code clean…thanks again!

[phildemil]

im having some problems using this. depending on state im switching between the weather card and the “picture-glance” card, which is showing a live feed from a camera. sometimes though it is only showing a red bar.

[tpbillund]

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

[FreakLikeMe]

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

[DeltaNu1142]

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?

[richieframe (Richie)]

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

[steinis (stein)]

Great card:)

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

[Ildar_Gabdullin]

Specially for @Mariusthvdb, @DavidFW1960
Managed to switch between portrait & landscape orientation for iPhone 5S.

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

[Mariusthvdb (Marius)]

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)

[Ildar_Gabdullin]

@Mariusthvdb

the switch to landscape mode on the iPhone now is ok-ish, still cutting off the right side of the shutter image

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

[Mariusthvdb (Marius)]

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.

[Ildar_Gabdullin]

@Mariusthvdb

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)

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.

[Mariusthvdb (Marius)]

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…

[Ildar_Gabdullin]

@Mariusthvdb

an iPhone 11pro this is what I see:

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

[Mariusthvdb (Marius)]

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

[Ildar_Gabdullin]

@Ildar_Gabdullin

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.

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

[Ildar_Gabdullin]

@Mariusthvdb

here’s the issue I just filed at State-switch

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.