🔹 state-switch - conditional card on steroids

[exc2k]

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!

[jztan79 (M∆D)]

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%

[manunited10]

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

[rayne127 (Adam)]

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.

[andrazk (Andraz)]

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.

[andrazk (Andraz)]

I’ve created radio buttons from multiple switches following this post:

Lovelace: Button card

For what it’s worth, you guys could make this easier on yourself if you use switch templates and an input_select. No automations. input_select: room_display: name: What room to display options: - living - dining - kitchen initial: kitchen Then for switches. switch: - platform: template switches: living: value_template: "{{ is_state('input_select.room_display', 'living') }}" turn_on: service: input_select.select_option …

…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.

[EagleDTW (Daniel)]

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).

[jaswalters]

When I use this inside an entities card I lose the formatting as a toggle switch. Anyway to keep that formatting?

Before:

After:

- type: custom:state-switch
  entity: switch.rachio_toggle_drip_schedule
  states:
    'on':
      type: entity
      entity: switch.rachio_toggle_drip_schedule
    'off':
      type: entity
      entity: switch.rachio_toggle_drip_schedule

[Ildar_Gabdullin]

@jaswalters

type: entity
      entity: switch.rachio_toggle_drip_schedule

Because this is a CARD.
Do you need a row?
Encapsulate it in hui-element card.

[jaswalters]

I was attempting to do that but guess I just don’t have the formatting of it correct as of yet.

[jonaseymour]

Hey guys,

Started using this card and loving it. Just wondering if there’s an easy way to show the same cards for multiple states. i.e. for a media player state, I want the same cards to show whether the state is “on”, “playing”, “paused”, but different cards for “idle” and “off” (I think).

Is there a way to have the same cards show for on, paused and playing, but not for off and idle?

My current work around is to have just “playing” and “off” as the specified state cards, and the default set as “playing”, so that if the state is actually “paused” it still shows the “playing” cards.

The alternative I guess is to make a template binary sensor based on the states and reference that instead of the media player.

Is that the best option?

[reste_narquois (Chris Warne)]

@jonaseymour

make a template binary sensor

It’s the approach I use for a similar scenario, and it works for me.

[Ildar_Gabdullin]

Try using template option

[reste_narquois (Chris Warne)]

Of course! Sorry I missed that. However, this note intrigues me:

Note: Jinja2 templating is not cheap. Avoid it for simple things that can be solved with just an entity.

Does that mean that setting up a separate entity (here a binary sensor) is ‘cheaper’ than using a Jinja2 template directly in the frontend?

[Ildar_Gabdullin]

@reste_narquois

Jinja2 template directly in the frontend?

IMHO jinjia2 operates on a server side only.

The meaning if that note was:
instead of:

entity: "{{is_state('sun.sun','below_horizon')}}"
states:
  true:
    type: markdown
    content: ...
  false:
    type: markdown
    content: ...

use this:

entity: sun.sun
states:
  'below_horizon':
    type: markdown
    content: ...
  'above_horizon':
    type: markdown
    content: ...

[jonaseymour]

Yep, totally missed that as well. I knew there was a better way. Thanks dude. Will give it a go!

[OzStone (Dan)]

This seems like a question for the browser-mod thread.

Browser_mod - turn your browser into a controllable device, and a media_player

Ok… so here’s my first ever custom component It does what my lovelace plugins lovelace-player and browser-commander used to do, but with backend support. From the readme: Make the camera feed from your front door pop up on the tablett in your kitchen when someone rings the doorbell. Have a message pop up on every screen in the house when it’s bedtime. Make the browser on your workstation switch to a specific tab when the kitchen light is on after midnight Play a TTS message on your work c…

[jumper]

I want to have multiple !include statements, but they get concatinated rather than processed in series. Thoughts about fixes or workarounds?

This works:

  - type: custom:state-switch
    entity: input_select.remote
    states:
      'DISH':
        !include remote_dish.yaml
      'FireTV':
        !include remote_firetv.yaml
      'RADIO':
        !include remote_radio.yaml
      'VCR2':
        !include remote_off.yaml

But this raises an error:
No such file or directory: '/config/lovelace/media/remote_sources.yaml !include remote_dish.yaml'
Adding a newline between the !includes raises the same error.

  - type: custom:state-switch
    entity: input_select.remote
    states:
      'DISH':
        !include remote_sources.yaml
        !include remote_dish.yaml
      'FireTV':
        !include remote_firetv.yaml
      'RADIO':
        !include remote_radio.yaml
      'VCR2':
        !include remote_off.yaml

[Ildar_Gabdullin]

@jumper

    states:
      'DISH':
        !include remote_dish.yaml

Btw, I believed that it should be this:

    states:
      'DISH': !include remote_dish.yaml

[jumper]

Thanks, but this works:

    states:
      'DISH':
        !include remote_dish.yaml

This does not:

    states:
      'DISH':
        !include remote_sources.yaml
        !include remote_dish.yaml

The parser concatenates both lines (two file names) into one line (one file name), as in a “>” markup.