How to use light-popup-card?

Hello all,

I’ve been trying to install the “light popup card” (GitHub - DBuit/light-popup-card: Lovelace card to use as custom pop-up for light in homekit style) for a few days, unfortunately without success so far. I have also read through the documentation, but I just can not figure it out? I just don’t understand where to put the code in my dashboardName.yaml file? Is this card only in conjunction with “browser_mod”, “custom pop-up card”, “homekit style card” or does this also work with a normal entity card?

Can someone help me maybe?

They have to be the worst instructions in the world. Likewise I’m trying to figure it out. But it’s hard when the write-up is this bad.

I got the same. Tried for weeks, not success.

You need to instal also via HACS, browser_mod.
On you dashboard you could use tap to action to print light-popup-card via browser-mod.
Exemple: i use a horizontal stack for 2 mushroom entities cards. Capture d’écran 2022-08-27 à 16.55.45
On the first one you could use tap_action: to call the popup

    tap_action:
      action: fire-dom-event
      browser_mod:
        command: popup
        deviceID: this
        title: Test Popup
        card:
          type: custom:light-popup-card

entire code is :

type: horizontal-stack
cards:
  - type: custom:mushroom-light-card
    entity: light.couloir
    use_light_color: true
    show_brightness_control: true
    show_color_control: true
    show_color_temp_control: true
    collapsible_controls: true
    tap_action:
      action: fire-dom-event
      browser_mod:
        command: popup
        deviceID: this
        title: Test Popup
        card:
          type: custom:light-popup-card
          entity: light.couloir
          icon: mdi:lightbulb
          settings:
            openButton: Option
            closeButton: Fermer
          settingsCard:
            type: custom:light-entity-card
            cardOptions:
              entity: light.couloir
              hide_header: true
              brightness: true
              smooth_color_wheel: true
          actionsInARow: 2
          brightnessWidth: 150px
          brightnessHeight: 400px
          switchWidth: 150px
          switchHeight: 400px
          borderRadius: 12px
          actions:
            - service: scene.turn_on
              color: '#ffaa00'
              service_data:
                entity_id: scene.couloir_attenue
            - service: scene.turn_on
              color: '#0191fc'
              service_data:
                entity_id: scene.couloir_lumineux
            - service: scene.turn_on
              color: '#f0e479'
              service_data:
                entity_id: scene.salon_lecture
        style:
          $: |
            .mdc-dialog .mdc-dialog__container {
              width: 100%;
            }
            .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
              width:100%;
              box-shadow:none;
            }
          .: |
            :host {
              --mdc-theme-surface: rgba(0,0,0,0);
              --secondary-background-color: rgba(0,0,0,0);
              --ha-card-background: rgba(0,0,0,0);
              --mdc-dialog-scrim-color: rgba(0,0,0,0.8);
              --mdc-dialog-min-height: 100%;
              --mdc-dialog-min-width: 100%;
              --mdc-dialog-max-width: 100%;
            }
            mwc-icon-button {
              color: #FFF;
            }
  - type: custom:mushroom-light-card
    entity: light.escalier
    show_brightness_control: true
    use_light_color: true
    show_color_temp_control: true
    show_color_control: true
    collapsible_controls: true

this give :

To have color controls below the switch you also need to install hui-element via HACS
The problem for me is that only print the switch and not the brightness slider. Anyone know how to fix it ?

Do you use UI model or Lovelace mode?

Lovelace mode I think. In the card i use “show code edition”. I don’t know the right english translation.