piotrmachowski / home-assistant-lovelace-local-conditional-card

This card can show and hide a specific card on current device while not affecting other windows. It does not require any integration to run.

Custom components

Name	Stars	Version	HACS support	Downloads	Last commit	Forum
Antistorm
Burze.dzis.net
Custom Templates
Dom 5
Froggy
GNE Photovoltaic Monitoring
Google Keep
Hydro IMGW
iMPK
Looko2
MPK Łódź
MPK Kraków
MPK Rzeszów
Rozkładzik
Saver
SmartThings Soundbar
Tauron AMIplus
Xiaomi Cloud Map Extractor
Xiaomi Vacuum Map Camera

Custom Lovelace cards

Name	Stars	Version	HACS support	Downloads	Last commit	Forum
Google Keep card
HTML card
HTML Jinja2 Template card
Local Conditional card
Nixie card
Nixie Clock card
Xiaomi Vacuum Map card

Clients

Name	Stars	Version	Downloads	Last commit	Forum
Home Assistant Taskbar Menu

Picture-elements cards

Name	Stars	Last commit
Xiaomi Vacuum Black card

Others

Name	Stars	Version	Downloads	Last commit	Forum
Xiaomi Vacuum garage
Xiaomi Cloud Token Extractor

Support

If you want to support my work with a donation you can use one of the following platforms:

Platform	Payment methods	Link	Comment
Ko-fi	PayPal Credit card		No fees Single or monthly payment
buycoffee.to	BLIK Bank transfer
PayPal	PayPal		No fees
Revolut	Revolut Credit Card		No fees

home-assistant-lovelace-local-conditional-card's Issues

How can we make this card persistent?

1. When using this card with the HA Companion app,
2. Switch to another app and the HA app still runs in the background,
3. Wait some time and then switch back to the HA app,
4. The app would show the card state from the previous time.
5. After 2-3 seconds the app reconnects to the server,
6. The view is refreshed to the default card state and the card disappears. This sometime causes the user to click something they didn't intend to click because the view is updated unexpectedly.
7. The expectation is that the card will remain with the previous state.

Is there any way we can solve this behavior? Perhaps by using cookies or localStorage?

Of course, you can let the HA app maintain a consistent connection to the server, but this drains battery just to solve one problem, so that's not ideal.

Doesn't work on "custom:button-card"

Hi, this is an awesome card you've made here! thanks for all the work!

I've noticed that when I use "custom:button-card", it doesn't work (the card is displayed but I can't hide it).
However if I wrap it with vertical-stack, it works just fine.

Example that doesn't work:

type: custom:local-conditional-card
default: show
id: light
card:
  type: custom:button-card
  name: Light

Example that works:

type: custom:local-conditional-card
default: show
id: light
card:
  type: vertical-stack
  cards:
    - type: custom:button-card
      name: Light

I don't see any errors in the console.
I've noticed that for some reason, hui-button-card-card doesn't get created (it stays as button-card)
but hui-vertical-stack-card does get created in the DOM. Perhaps that's the problem?

Some custom child cards issue

First of all, thanks for such a useful card.

I found an issue using custom:local-conditional-card when its child card is set to some custom lovelace card. The card is not displayed at all:

type: 'custom:local-conditional-card'
default: show
id: living_room_2
card:
  type: 'custom:mini-media-player'
  entity: media_player.living_room_media

Media player card itself is working properly:

type: 'custom:mini-media-player'
entity: media_player.living_room_media

It is also doesn't work with custom:simple-thermostat, but works with custom:button-card.

Toggle service with automation

I tried to toggle the service with an automation but it did not work. Is it possible to toggle the cards with an automation? If not, would it be possible to add this as a Feature?

Doesn't work with popup-card

I found compatibility issue with custom component popup-card: https://github.com/thomasloven/hass-browser_mod
When pop up is open,, tap action doesn't work for card which in the pop up.

TypeError: Cannot assign to read only property 'ids' of object '#<Object>'

Hello,

I have just started using the local conditional card on my Hassio, however I've encountered a problem when using the local_conditional_card.set method.

A reduced version of my config:

type: vertical-stack
title: Lights
cards:
  - type: grid
    cards:
      - type: button
        tap_action:
          action: call-service
          service: local_conditional_card.set
          service_data:
            ids:
              - lights_mancave: true
              - lights_living_room: false
          target: {}
        icon: 'mdi:bat'
        show_name: false
        hold_action:
          action: navigate
          navigation_path: /lovelace/man_cave
      - type: button
        tap_action:
          action: call-service
          service: local_conditional_card.set
          service_data:
            ids:
              - lights_mancave: false
              - lights_living_room: true
          target: {}
        show_name: false
        icon: 'mdi:sofa'
        hold_action:
          action: navigate
          navigation_path: /lovelace/living_room
  - type: 'custom:local-conditional-card'
    default: hide
    id: lights_mancave
    card:
      type: grid
      columns: 5
      cards:
        - type: button
  - type: 'custom:local-conditional-card'
    default: hide
    id: lights_living_room
    card:
      type: grid
      columns: 5
      cards:
        - type: button

unfortunately only the last card works, and anything I click results in this error being produced on the chrome console:

Uncaught (in promise) TypeError: Cannot assign to read only property 'ids' of object '#<Object>'
    at Object.hass.callService (local-conditional-card.js:51)
    at u (chunk.2c2eabf….js:320)
    at HTMLElement.value (chunk.04e66a2….js:966)
    at g.handleEvent (app.ebe75b7a.js:12795)
    at HTMLElement.__boundHandleEvent (app.ebe75b7a.js:12795)
    at i (app.ebe75b7a.js:12795)
    at HTMLElement.e.actionHandler.t.disabled.e.actionHandler.end (chunk.2c2eabf….js:320)
hass.callService	@	local-conditional-card.js:51
u	@	chunk.2c2eabf….js:320
value	@	chunk.04e66a2….js:966
handleEvent	@	app.ebe75b7a.js:12795
__boundHandleEvent	@	app.ebe75b7a.js:12795
i	@	app.ebe75b7a.js:12795
e.actionHandler.t.disabled.e.actionHandler.end	@	chunk.2c2eabf….js:320

The line in question is:

Home-Assistant-Lovelace-Local-Conditional-card/dist/local-conditional-card.js

Line 51 in b3de1be

serviceData.ids = new_ids;

I have corrected this problem by replacing that line with:

serviceData = { ids: new_ids };

@PiotrMachowski I'll submit a PR for your approval, hope you'll find this helpful,

Cheers,

Alex

Service not found (android)

At one point I started getting the error (below), but only in an android app and browser. It works fine in the browser on pc. Whats happen?

Card version 2.0.0.
HA vesion 2022.8.7

What information should I provide to solve the problem?

In HA 2023.12.1 card showing camera image is not working

Hello,
I have a vertical stack card with 'Live' button at the top to conditionally display custom:webrtc-camera card or picture-entity card. After upgrading to 2023.12.1 I've noticed that only custom:webrtc-camera is working now.

My card looks more or leass like that:

type: vertical-stack       
cards:
  - show_name: true
    show_icon: false
    name: Widok live
    type: button
    tap_action:
      action: fire-dom-event
      local_conditional_card:
        action: toggle
        ids:
          - front_live
          - front_static
    icon: mdi:video-switch
  - type: custom:local-conditional-card
    default: hide
    id: front_live
    card:
      type: custom:webrtc-camera
      url: front_camera_stream
      title: Front
      poster: https://home-assistant.io/images/cast/splash.png
      intersection: 0.75
      mode: webrtc,mse,mp4,mjpeg
      muted: true
  - type: custom:local-conditional-card
    default: show
    id: front_static
    card:
      camera_image: camera.front
      camera_view: auto
      image: >-
        http://XXX
      entity: camera.front
      name: Front
      show_state: false
      type: picture-entity

It was working ok in HA 2023.11.x and before. Picture-entity card taken away for conditional card is working OK

Difference to HA Conditional Card

How does this differ from the official conditional card? https://www.home-assistant.io/dashboards/conditional/

Conditional card on dashboard not loading

Hi there,
I have an issue with the below dashboard.

When reloading the View 1 page in the browser the custom:local-conditional-card will not load.

If I navigate to View 2 and then back to View 1 the card appears.

See this in action here https://i.imgur.com/gwjAjOq.gif

views:
  - title: View 1
    type: custom:vertical-layout
    badges: []
    cards:
      - show_name: true
        show_icon: false
        type: button
        tap_action:
          action: fire-dom-event
          local_conditional_card:
            action: set
            ids:
              - livingroom: show
              - bedroom: hide
        entity: zone.home
      - type: custom:local-conditional-card
        default: show
        id: livingroom
        card:
          type: vertical-stack
          cards:
            - type: entity
              entity: sensor.time
  - title: View 2
    path: fan
    subview: false
    badges: []
    cards:
      - type: vertical-stack
        cards:
          - type: entity
            entity: zone.home

I have found a couple of ways to eliminate the issue

1. Adding the below pop-up card to the View 1

type: custom:popup-card
card:
  type: vertical-stack
  cards: []

2. Removing vertical-stack from the custom:local-conditional-card

type: custom:local-conditional-card
default: show
id: livingroom
card:
  type: entity
  entity: sensor.time

know what conditional card is active in jinja templates?

I use buttons to show/hide conditional cards. Kind of like tabs. Is there a way to know, using jinja templates, what conditional card is active? So I could highlight the related button.

Expose show/hide as sensor

It's not an issue but I wanna change the icon based on the show/hide state, how to do that

FR: Section for visually Editing Card Content

Thanks for that Great Card, this brings a new Level to the Frontend-UI Interaction for Users!

I do have a Suggestion for an enhancement though, that will make the Card significantly more usable:
When editing a Conditional Card, all editing has to be done in Text. Worse, one can't 'design' a card in another Card, and then just copy it over. That slows down the Process of designing.

Wouldn't it be possible to just add a "Card" Section to the Editor? Some Custom Card do follow that Approach, E.g. the Layout Card.

Thanks again for that great Contribution, it brings Interaction to where it needs to be!

Hassio Integration does not add services

I love your Plugin and your demo looks amazing, but when I tried to add it via HACS the services did not get added to my Hassio config. Can I add them manually? And if yes how?

Can't toggle todo in Android in companion app

following code works well in PC, but in Android in companion app the button will show only sun1, not todo1 :(

      - title: Click test
        type: entities
        entities:
          - action_name: Toggle
            icon: mdi:power
            name: Sun1
            tap_action:
              action: fire-dom-event
              local_conditional_card:
                action: toggle
                ids:
                  - todo1
                  - sun1
            type: button
      - type: custom:local-conditional-card
        default: show
        id: sun1
        card:
          entities:
            - sun.sun
          title: Sun 1
          type: entities
        persist_state: true
      - type: custom:local-conditional-card
        default: show
        id: todo1
        card:
          type: todo-list
          entity: todo.shopping_list
        persist_state: false

multiple cards toggling not working

Hello,

First of all thanks for this awesome card!

I create this issue because i'am unable to toggle 2 entities at once.

my card config:

type: vertical-stack
cards:
  - type: 'custom:local-conditional-card'
    id: player1
    default: show
    card:
      entities:
        - media_player.office
      title: Office
      type: entities
  - type: 'custom:local-conditional-card'
    id: player2
    default: hide
    card:
      entities:
        - media_player.kitchen
      title: Kitchen
      type: entities
  - title: Click test
    type: entities
    entities:
      - action_name: Toggle
        name: toggle 1 and 2
        service: local_conditional_card.toggle
        service_data:
          ids:
            - player1
            - player2
        type: call-service

player Kitchen is toggling but not player Office

if i'll swap player1 and 2 like this:

    entities:
      - action_name: Toggle
        name: toggle 1 and 2
        service: local_conditional_card.toggle
        service_data:
          ids:
            - player2
            - player1
        type: call-service

Same behaviour only the second entity is toggling.

if i swap entities on card list:

cards:
  - type: 'custom:local-conditional-card'
    id: player1
    default: show
    card:
      entities:
        - media_player.kitchen
      title: Office
      type: entities
  - type: 'custom:local-conditional-card'
    id: player2
    default: hide
    card:
      entities:
        - media_player.office
      title: Kitchen
      type: entities

The player Office is now toggling but not the player Kitchen

It's like the Toggling function only use the ID of the last defined entity on cards list.

Error: expected str instance, Optional found

Hi @PiotrMachowski

After installing this extension I've been getting the following error:

Failed to call service light/turn_on. sequence item 0: expected str instance, Optional found

I didn't realise at first it could've been the local-conditional-card and posted this problem on the home assistant community forum:
https://community.home-assistant.io/t/error-expected-str-instance-optional-found/305019

Would you be able to have a look please? I'm curious to have your thoughts on this.

Cheers

Multiple cards to show/hide

Hi,

Love the idea, I was thinking about how to have local variables in the browser only lately and this seems the best way to achieve it.

It would be interesting to be be able be able to have a service call that would take a bunch of id and show/hide them based on the service data.
something like:

service: local_conditional_card.control
service_data:
  id1: true
  id2: false

true would show the card with the correspond id
false would hide a card with the corresponding id

My use case would be a menu (I'm using an input_select for now):

It would still require a way to know which id is shown and which is not in the menu header, maybe by injecting some values into the hass object so that it can be accessed outside.
It would also require the ability to define the default visibility of a card.

Let me know what you think :)