Use conditional card to show different cards

Configuration Frontend
1

I want to use the conditional card to display a different card depending on the condition.

Let me explain. I use the shutter-card for my sunscreens. Which works fine.
But i want to add conditions to the card e.g. when the window is open, one must not be able to use the card. (I have more conditions, like weather etc.)
At first I asked the maker of the card if he he could add conditions to his card. But I never had any reaction.
Then I tried to use card-mod with the card, but that was also no success.
(See my question in this thread)

Then I thought would it be possible to use the conditional card and, depending on the condition true/false, display the shutter-card or an picture card with a gif from the shutter?

I tried it with an other card (weather card) in order to test the condition mechanism.
As long as I am in the card editor, this seems to work.
Here is the window closed:

image
image1750×968 104 KB

And here is the window opened:
image
image1720×970 104 KB

So it looks like the mechanism is working. But when I save the card, I see both cards in Lovelace:

image
image1057×967 43.8 KB

This is the code I use:

type: vertical-stack
cards:
  - type: conditional
    conditions:
      - entity: binary_sensor.raam_sensor_keuken_1_contact
        state: 'off'
    card:
      type: custom:shutter-card
      title: Screens voorzijde
      entities:
        - entity: cover.screen_1
          name: keuken (1)
          buttons_position: left
          title_position: top
  - type: conditional
    conditions:
      - entity: binary_sensor.raam_sensor_keuken_1_contact
        state: 'on'
    card:
      type: weather-forecast
      entity: weather.home
      show_forecast: true
      name: Culemborg (Met.no)
      forecast_type: legacy

Is there anybody who can help me with this? I don’t understand why it is working within the editor and fails in the finished dashboard.
Kind regards, Bert

2

We’re you still in edit mode (it does this I assume you don’t lose a card that’s hidden trying to edit it.). Did you get the correct behavior when you hit ‘done’ editing your dashboard?

I use a variant of this technique to selectively ‘toggle’ cards all the time. You do not see the live result on your dashboard while in edit mode.

3

Hi @NathanCu Thank you for coming back on my issue.
No, I was not longer in Edit Mode: I had hit the DONE button on top of the screen.

Would it be possible to share your variant of the use of the conditional card? Perhaps I am not using it correctly…

4

Hi @NathanCu I tried it with a different card: mushroom:cover card and that worked well.

image
image1742×974 117 KB

And in the Dashboard edit-mode DONE:
Window closed:
image
image780×353 26.6 KB

And here Window open:
image
image804×526 63.7 KB

But what is it why this does not work the same with the shutter-card?
I like the look of the shutter-card and I am already so familiar with it :wink:

5

Type: custom:stack-in-card
Will do the trick for you…
Only change first line in this
But to use this ya need to use hacks
Then frontend stack in card
Goodluck!

6

Yes! @Tadies This did the trick indeed!
Thank you for looking into my issue. This is really a suitable solution. I will make a picture from the shutter from shutter-card and use that in a picture card or something like that.

1 Like