🔹 state-switch - conditional card on steroids

Share your Projects! Dashboards & Frontend
1

Ever wanted a lovelace card that’s only shown for certain users?

Ever wanted to show a certain lovelace card in one spot if the door is open, and another one otherwise?

Ever wanted to be able to swap out a part of your layout when you press a button?

Ever wanted to do that only on one device, and not on all of them at once?

Ever wanted to show different cards depending on the size of your window, or on wheter you’re viewing it on a touch enabled device or not?

1000Ă—562 2.19 MB

799Ă—258 1.56 MB

State-switch is now on HACS!

Bonus question:
Ever wanted to animate all of that?

504Ă—587 376 KB

Please use this thread as a chance to showcase the awesome stuff you make. I love that kind of thing!

25 Likes
2

This is really cool, I actually used state-switch in the past, but I can’t remember it being able to do all this (transition, based on screensize etc).

Really cool, will use it!

3

I want to make buttons of users that touched would switch map with according user showed on it.

How to make buttons as switch?

1 Like
4

As in the readme.

5

Sorry didn’t get how :frowning:

Could you bring the yaml example of readme latest “transition” card? How buttons appear and connects to entities?

6

This is just awesome. I’ve been looking for a long time to find a proper way to use mediaqueries. Thanks a lot !

7

https://github.com/thomasloven/lovelace-state-switch#hash

8

Sorry for being difficult… but i do not get this hash working. Could you suggest what way to learn?

type: horizontal-stack
cards:
  - type: map
    entities:
      - entity: person.lina
    tap_action:
      action: navigate
      navigation_path: '#p1'
  - type: map
    entities:
      - entity: person.kristupas
    tap_action:
      action: navigate
      navigation_path: '#p2'
  - type: map
    entities:
      - entity: person.arturas
    tap_action:
      action: navigate
      navigation_path: '#p3'
  - type: 'custom:state-switch'
entity: hash
default: p1
states:
  p1:
    type: markdown
    content: |
      # Lina
  p2:
    type: markdown
    content: |
      # Kristupas
  p3:
    type: markdown
    content: |
      # Arturas
9

Besides the indentation being off (which, admittedly, it is in the readme too), you should be aware that there is generally one way in which things can work, but infinite ways in which it can not work.

I can not guess which one you are experiencing with no information at all about your problem.

10

This card is only for switch or I can use it with media_player states?

11

The “switch” in the name comes from the (structured) switch statement in programming, which lets you take one of several paths depending on the state of a variable.

It works with the state of any entity, just like the conditional card, but with more options.

2 Likes
12

Thanks for this card.

I had one page with 5 thermostat cards. Now i show only one thermostat and use an input select to switch between the thermostat cards. Looks pretty nice.

I see in your example buttons named 1, 2 and 3. Are this custom buttons? Can you also create this buttons with the names of my thermostat? It looks better then a drop down input select.

13

You can create the buttons however you like with custom button card.

14

@thomasloven are there some limitation with transition in safari and iOS app?
They are working nicely with chrome but in safari cards just change without the transition and sometimes they don’t even appear.
I’ve searched this post and the readme on GitHub but I’ve not found indication of this issue.

15

Ok thanks.

And then i have to use the card option “action” and call the service: input_select.select_option ?
Or is there a better way to do this?

16

I have some problems with the card. When i chose something from the input_select the new card is not loaded correctly. I have to renew the page (press f5) to get it working again. I’m using the latest firefox browser

normal
normal1015Ă—559 26.8 KB

fault
fault1007Ă—426 15.9 KB

entity: input_select.aanzetten_cv
states:
  Woonkamer:
    cards:
      - entity: climate.woonkamer
        type: thermostat
      - entities:
          - entity: sensor.aqara_woonkamer_temp
        hours_to_show: 24
        refresh_interval: 0
        type: history-graph
    type: vertical-stack
  Badkamer:
    cards:
      - entity: climate.badkamer
        type: thermostat
      - entities:
          - entity: sensor.aqara_badkamer_temp
        hours_to_show: 24
        refresh_interval: 0
        type: history-graph
    type: vertical-stack
type: 'custom:state-switch'

[edit]
Adding a transition with a transition time will solve the problem…

17

Hi can we use !include.yaml with the state switch card? If I wanted to create a multi remote so if I pressed the TV button the TV remote would display. I want to split up my .yaml so the buttons for the TV remote would be called from a separate TV.yaml file instead of being all in the one yaml

18

Yes you can

type: custom:state-switch
      entity: your.entity
      default: default_state
      states:
          State1:
              !include state1_card.yaml
          State2:
              !include state2_card.yaml
19

@thomasloven I haven’t found it in the readme, but is it possible to show a card on condition 1 and to show nothing on condition 2?

i.e.

type: custom:state-switch
entity: mediaquery
states:
  "(min-width: 1000px)":
    type: markdown
    content: content on desktop and ipad
  "(min-width: 500px)":
   #show nothing on mobile phone
3 Likes
20

Hi! Great card, thank you!
But is it just me or doesn’t the mediaquery part work on iOS devices?

I have tried iphones, ipads, the official Home Assistant Companion app, Safari, chrome. But none of these work. I keep getting the following message.

26
26750Ă—1334 124 KB

it works great on my laptop running windows 10.

lovelace code is the same as used in de readme

1 Like