How to use light-popup-card?

[Pixelpaule (Andre)]

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?

[mitchellross]

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.

[leotantantan (LEOTAN)]

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

[Twinsen68 (Raphael)]

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

[mastafied]

Do you use UI model or Lovelace mode?

[Twinsen68 (Raphael)]

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