Conditionnal card in pop-up

[SylvainDx]

Hello,

I'm strugguling with a conditionnal card in a pop-up.
For the context I have lights and plugs and when some are on I have a notification
When i click on this button i call a pop up.

In this pop-up I've got 2 cards.
1 auto-entity for lights
1 bubble separator with sub buttons for plugs because i need to run special action to toggle the plugs.

I can put some conditionnal behavior on the sub-button without issue

But I try to mask the separator.

1st. with a conditionnal card : it works in the preview, but not when calling the pop-up
2nd. with the visibility option on the separator card, it doesn't work at all (maybe the vertical stack prevent to have sub visibility options)

[Mystically11]

Can you show your code?

[SylvainDx]

With pleasur ! :)

cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#pop-up-test"
    trigger_close: false
    name: Lumières allumées
    entity: sensor.lights_on
    show_state: true
  - type: custom:bubble-card
    card_type: separator
    sub_button:
      - entity: binary_sensor.nora_piano_2
        icon: mdi:piano
        tap_action:
          action: call-service
          target:
            entity_id: script.piano
          service: homeassistant.turn_on
        name: Piano
      - entity: binary_sensor.nora_pax
        name: Sapin
        icon: mdi:pine-tree-variant-outline
        tap_action:
          action: call-service
          target:
            entity_id: script.s_sapin
          service: homeassistant.turn_on
    styles: |-
      .bubble-sub-button-1 {
        display: ${ hass.states['binary_sensor.nora_piano_2'].state === 'on' ? '' : 'none'} !important;
      }
      .bubble-sub-button-2 {
        display: ${ hass.states['binary_sensor.nora_pax'].state === 'on' ? '' : 'none'} !important;
      }
    name: "Prises : "
  - type: conditional
    conditions:
      - condition: state
        entity: binary_sensor.nora_pax
        state: "on"
      - condition: or
        conditions:
          - condition: state
            entity: binary_sensor.nora_piano_2
            state: "on"
    card:
      show_name: true
      show_icon: true
      type: button
      tap_action:
        action: toggle
      name: TOTO 

here the screen in edit mode :

and the on in live action :

[SylvainDx]

the first was with conditionnal card.

And now the code with visibility option

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#pop-up-test2"
    trigger_close: false
    name: Lumières allumées
    entity: sensor.lights_on
    show_state: true
  - type: custom:bubble-card
    card_type: separator
    sub_button:
      - entity: binary_sensor.nora_piano_2
        icon: mdi:piano
        tap_action:
          action: call-service
          target:
            entity_id: script.piano
          service: homeassistant.turn_on
        name: Piano
      - entity: binary_sensor.nora_pax
        name: Sapin
        icon: mdi:pine-tree-variant-outline
        tap_action:
          action: call-service
          target:
            entity_id: script.s_sapin
          service: homeassistant.turn_on
    styles: |-
      .bubble-sub-button-1 {
        display: ${ hass.states['binary_sensor.nora_piano_2'].state === 'on' ? '' : 'none'} !important;
      }
      .bubble-sub-button-2 {
        display: ${ hass.states['binary_sensor.nora_pax'].state === 'on' ? '' : 'none'} !important;
      }
    name: "Prises : "
  - show_name: true
    show_icon: false
    type: button
    tap_action:
      action: toggle
    name: TOTO
    visibility:
      - condition: state
        entity: binary_sensor.nora_pax
        state: "on"
      - condition: or
        conditions:
          - condition: state
            entity: binary_sensor.nora_piano_2
            state: "on"

I spare you the screen shot, they are identical 😅

[Mystically11]

What I understood from your initial post was that you're trying to hide the separator card, the one which shows the name "Prises". But in your code, you're actually just hiding the "TOTO" default button card.

[Mystically11]

If i'm getting this right, you're expecting both the separator and the card below it to disappear. you can do this by creating a conditional card, setting the conditions and then for the card setting, you put a vertical stack and put the cards you want to show or hide depending on if the conditions are met or not inside it, like this:

  - type: conditional
    conditions: []
    card:
      type: vertical-stack
      cards:
        - type: custom:bubble-card
          card_type: separator
          sub_button:
            - entity: binary_sensor.nora_piano_2
              icon: mdi:piano
              tap_action:
                action: call-service
                target:
                  entity_id: script.piano
                service: homeassistant.turn_on
              name: Piano
            - entity: binary_sensor.nora_pax
              name: Sapin
              icon: mdi:pine-tree-variant-outline
              tap_action:
                action: call-service
                target:
                  entity_id: script.s_sapin
                service: homeassistant.turn_on
          styles: |-
            .bubble-sub-button-1 {
              display: ${ hass.states['binary_sensor.nora_piano_2'].state === 'on' ? '' : 'none'} !important;
            }
            .bubble-sub-button-2 {
              display: ${ hass.states['binary_sensor.nora_pax'].state === 'on' ? '' : 'none'} !important;
            }
          name: "Prises : "
        - show_name: true
          show_icon: false
          type: button
          tap_action:
            action: toggle
          name: TOTO
          visibility:
            - condition: state
              entity: binary_sensor.nora_pax
              state: "on"
            - condition: or
              conditions:
                - condition: state
                  entity: binary_sensor.nora_piano_2
                  state: "on"

[SylvainDx]

Well, Yeah at first this was my goal, but as it doesn't seems to work I try to hide/show a simple card with TOTO as a name to exclude a trouble from the bubble separator card.

So the code is the popup, with the separator with 2 sub buttons and conditional hiding working fine.
and then at first a conditionnal card to show/hide TOTO
and in the second a card TOTO with visibility options with the same conditions

[Mystically11]

If you're expecting TOTO to be hidden/shown and you still don't see the results, then i'd try checking if the sensors you set in the conditions ever get set to "on", since i've tried your code and it worked perfectly fine for me

[SylvainDx]

Thank you @Mystically11
our discussion helps me find out where was my issue !

[SylvainDx]

Oh Boy !
I am so sorry, the fact is that I don't know how conditionnal cars works....

I use :

      - condition: state
        entity: binary_sensor.nora_pax
        state: "on"
      - condition: or
        conditions:
          - condition: state
            entity: binary_sensor.nora_piano_2
            state: "on"

instead of

      - condition: or
        conditions:
          - condition: state
            entity: binary_sensor.nora_piano_2
            state: "on"
          - condition: state
            entity: binary_sensor.nora_pax
            state: "on"

i've been fooled by the HA GUI !
it works perflectly with the proper syntax