Card Tools popup? (Homekit style card )

Hi everyone!! I’ve just started with home-assistant recently.
After a week of trying i can’t get the light popup card to work. So i reverted to my setup without fancy popup cards… :wink: I would like to have some pointers in the right direction!! My code upon till now.

Help would be much appreciated!

background: center / cover no-repeat fixed  url('/local/images/bg_long.png?v=1')
title: Home
kiosk_mode:
  mobile_settings:
    hide_header: true
views:
  - title: Home
    panel: true
    badges: []
    cards:
      - type: vertical-stack
        cards:
          - type: markdown
            content: >
              <table> <tr><td width="200px"><h3>{{
              states('sensor.dashboard_greeting') }}, {{ user }}
              </h3><strong>Buitentemperatuur:</strong>
              {{state_attr('weather.home','temperature')}}&deg;C</br>

              {% if is_state("sun.sun","above_horizon") -%}
              <strong>Zonsondergang:</strong>
              {{as_timestamp(strptime(state_attr("sun.sun", "next_setting"),
              '')) | timestamp_custom("%-H:%M")}} {%- else -%}
              <strong>Zonsopkomst:</strong>
              {{as_timestamp(strptime(state_attr("sun.sun", "next_rising"), ''))
              | timestamp_custom("%-H:%M")}}{%- endif
              %}</br></br>


              {% set count = states('sensor.aantal_lampen_aan')|int %} {% if
              count < 1 %} <strong>Alle lampen staan uit.</strong> {% elif count
              == 1%} <strong>Er staat </strong>1<strong> lamp aan.</strong>  {%
              else %}<strong>Er staan </strong>{{ count }}<strong> lampen
              aan.</strong> {% endif %}</br>
              {{states('sensor.dashboard_occupancy')}} </td><td></br><img
              src="https://darksky.net/{{states('sensor.dashboard_weather')}}"
              width="190px" /></td></tr> <tr><td
              colspan="2"></td></tr></table></br>
            style: |
              ha-card {
              background: transparent;
              margin-top: -15px;
              margin-bottom: -7px;
                }
          - type: 'custom:homekit-card'
            home: false
            title: Home
            useBrightness: true
            useTemperature: true
            titleColor: '#FFF'
            statePositionTop: true
            style: |
              :host {
                --tile-background: rgba(255, 255, 255, 0.10);
                --tile-border-radius: 12px;
                --tile-width: 100px;
                --tile-height: 100px;
                --tile-on-background: rgba(255, 255, 255, 0.7);
                --tile-name-text-color: rgba(255, 255, 255, 0.8);
                --tile-on-name-text-color: rgba(0, 0, 0, 1);
                --tile-state-text-color: rgba(255, 255, 255, 0.8);
                --tile-on-state-text-color: rgba(0, 0, 0, 1);
                --tile-state-changed-text-color: rgb(134, 134, 134);
                --tile-unavailable-state-text-color: rgba(255, 255, 255, 1);
                --tile-value-text-color: rgba(255, 0, 0, 1);
                --tile-icon-color: rgba(255, 255, 255, 0.8);
                --tile-on-icon-color: rgba(247,148,29,0.9) !important;
                /* #f7d959; rgba(255,204,110,1.0) */
                font-family: Arial;
              }
              .top-fav {
                background-color: rgba(255, 255, 230,0.5) !important;
              }
              .off-bg {
                background-color: rgba(255, 255, 255, 0.10) ;
              }
              .fan .icon {
                color: rgba(0, 0, 0, 0.5) !important;
              }
              .hideState .state {
                visibility:hidden !important;
              }
              homekit-button .icon.climate {
                 background-color: rgba(247,148,29,1.0) !important;
              }
            entities:
              - title: Verlichting
                entities:
                  - entity: light.dressoir
                    name: Dressoir
                    icon: 'mdi:dresser'
                    double_tap_action:
                      action: popup
                  - entity: group.keuken
                    name: Eettafel
                    icon: 'mdi:food'
                    double_tap_action:
                      action: popup
                  - entity: light.hue_iris
                    name: Hue Iris
                    icon: 'mdi:wall-sconce-round-variant'
                    double_tap_action:
                      action: popup
                  - entity: light.leeslamp
                    name: Leeslamp
                    icon: 'mdi:desk-lamp'
                    double_tap_action:
                      action: popup
                  - entity: light.vloerlamp
                    name: Vloerlamp
                    icon: 'mdi:floor-lamp'
                    double_tap_action:
                      action: popup
              - title: Scenes
                entities:
                  - entity: scene.goedemorgen
                    icon: 'mdi:weather-sunset'
                    tap_action:
                      action: call-service
                      service: script.goedemorgen
                  - entity: scene.tv_kijken
                    icon: 'mdi:television-classic'
                    tap_action:
                      action: call-service
                      service: script.tv_kijken
                  - entity: scene.welterusten
                    icon: 'mdi:weather-night'
                    tap_action:
                      action: call-service
                      service: script.welterusten

Does the Thermostat card still work? I can’t get the pop-up to show up, although browser_mod popup service call works on other places.

Can someone tell me how I can get the “more-info” style popup as an action?

Trying to make one of the actions the ability to choose a color for the light. But having trouble trying to achieve that.

@panhans did you ever get this figured out? having the same issue on my desktop

@Stinocon did you ever get this solved? having the same issue…

guysssssss…anyone figured out how to get these to scale properly to a desktop? works great on mobile device…havent tried a tablet yet.

Yes, I managed to get it working without too many problems.
After installing the necessary components (browser mod and the various cards), I created the following code, which should be inserted into the view for which you want to replace the more-info action.

    popup_cards:
      light.entity:
        title: ' '
        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;
            }
        card:
          type: 'custom:light-popup-card'
          entity: light.entity
          icon: 'mdi:lightbulb'
          fullscreen: true
          settings:
            openButton: Advanced
            closeButton: Close
          settingsCard:
            type: 'custom:light-entity-card'
            cardOptions:
              entity: light.entity
              hide_header: true
              brightness: false
              white_value: true
          actionsInARow: 4
          brightnessWidth: 150px
          brightnessHeight: 400px
          switchWidth: 150px
          switchHeight: 400px
          borderRadius: 12px
          actions:
            - service: scene.turn_on
              color: '#f3f972'
              service_data:
                entity_id: scene.light.entity_turnon
            - service: scene.turn_on
              color: '#ffae00'
              service_data:
                entity_id: scene.light.entity_test

So you will have to open home assistant, move to the tab you are interested in, in my case it was the first tab. Then you will need to click on the 3 dots in the top right hand corner and enter edit mode and then again to enter the text configuration editor.

Now locate the view you are interested in. Take your cue from the following image.

immagine

So insert the pop-up part under the title of the card. Modify the code as needed.

Hi everyone! I’m new on HA and I decided to create my dashboard with Homekit panel card.
Everything is ok except for light popup. I’ve installed light popup card through HACS adding the custom repository, but long pressing on a entity card doesn’t work. Are there other integration to be installed or codes to be included in lovelace yaml?

Configuring as below makes more-info doesn’t appear anymore, but the light popup is not shown.
Thanks!
Matteo

    cards:
      - type: custom:homekit-card
        statePositionTop: true
        enableColumns: true
        rows:
          - row: 1
            columns:
              - column: 1
                tileOnRow: 3
                entities:
                  - title: Zona giorno
                    popup:
                      type: custom:light-popup-card
                    entities:
                      - entity: light.led_mobile_tv
                        name: Mobile TV
                      - entity: light.skygarden
                      - entity: light.led_ingresso
                        name: Ingresso
                      - entity: light.faretti_bagno_giorno
                        name: Antibagno
                      - entity: light.led_bagno_giorno
                        name: Bagno giorno
                      - entity: light.beam_stick

Since Homeassistant 2021.6 my light popup cards all changed from brightness sliders to switches? Anybody got an idea what could have caused this?

Edit: solved it by manually adding

displayType: slider

to the popup cards

1 Like

Light Popup Card is amazing. Thanks for the great work.

There is only one problem I‘m not able to solve:
The „ugly“ shadow around the slider in switch mode.

Would be very helpfull if someone could tell how to get rid of that.

Hi,

Having a bit of trouble getting popups to work. I have homekit-panel-card, browser-mod, and light-popup-card integrations installed. I’ve set up a basic panel card with 3 entities like so:

type: custom:homekit-card
entities:
  - title: Test
    popup:
      type: custom:light-popup-card
    entities:
      - entity: switch.fan_lights
      - entity: light.desk_lamp
      - entity: switch.ceiling_fan

Tapping toggles the switches/lights as expected, but long pressing does nothing. Am I missing something here? Been at this for a few hours and still can’t figure this out.

Hey all, hoping somebody may be able to stop me from pulling all of my hair out while trying to get this working.

After a lot of trial and error I have the light popup card working as expected on my desktop browser (Brave). When I perform a ‘hold action’, I have the light popup card display where I can control my lights.

I come into an issue when I use the Home Assistant app on Android (both Samsung phone and Samsung tablet)… I perform the ‘hold action’ to bring up the light popup card, but instead, I get the standard more-info options.

I’m on Home Assistant 2021.8.8 - Home Assistant OS 6.2. I’m using the latest version of the Android app.

Any help would be appreciated!

title: Home
views:
  - title: "Home"
    icon: mdi:home-outline
    path: "home"
    cards:
      - type: button
        entity: light.tv
        icon_height: 40px

popup_cards:
  light.tv:
    title: " "
    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;
        }
    card:
      type: "custom:light-popup-card"
      entity: light.tv
      icon: "mdi:lightbulb"
      fullscreen: true
      settings:
        openButton: Advanced
        closeButton: Close
      settingsCard:
        type: "custom:light-entity-card"
        cardOptions:
          entity: light.tv
          hide_header: true
          brightness: false
          white_value: true
      actionsInARow: 4
      brightnessWidth: 150px
      brightnessHeight: 400px
      switchWidth: 150px
      switchHeight: 400px
      borderRadius: 12px

is it possible to change the state color of the thermostat popup card from green to another?

Hi guys,

I would like to understand, i have a couple of Yeelights(GU10s) that are in a lighting group. I have manage to use a pop-up card to add scenes into this group of lights. But my interface shows an On/Off button instead of the slider button to control the brightness.

Yeelight is somehow bugged with this card. Happened some HA updates ago. I guess this card needs to update something (because default HA slider does work with Yeelight). Force the slider instead of switch by using the following option: displayType: slider.

Has this feature been made available?

Thanks @ASNNetworks, setting to slider resolved the issue.

Hi @weaverprojects

you can’t change it for 1 tile or you must add a conditionalClass.
But if you want it for 1 or for all you can do it with some css in the style part of the configuration.

I know I must be doing something wrong, but I just can’t figure it out. I have setup everything per the guide but somehow I don’t get any popups…

I have browser_mod, card_mod, homekit-panel-card and light-popup-card installed. I created a new dashboard and edited the raw configuration as below. All my cards work, single press works. Long press works on the rows without popup. The row with popup just does nothing. Tested in both Chrome, native Android app and WallPanel app.

What am I missing structure wise to get popups working?

views:
  - title: Home
    icon: mdi:home-outline
    path: home
    type: panel
    popup_cards:
      light.werkkamer_licht_achter:
        card:
          type: custom:light-popup-card
          entity: light.werkkamer_licht_achter
    cards:
      - type: custom:homekit-card
        title: Test Nieuw Dashboard
        enableColumns: false
        statePositionTop: true
        entities:
          - title: Lampen
            popup:
              type: custom:light-popup-card
              brightnessHeight: 350px
              brightnessWidth: 130px
              switchHeight: 300px
              switchWidth: 110px
            entities:
              - entity: light.werkkamer_licht_achter
              - entity: light.werkkamer_licht_bureau
              - entity: switch.overloop_zolder_aangezet
          - title: Weer
            entities:
              - card: picture-entity
                wider: true
                widerSize: 3
                higher: true
                higherSize: 3
                cardOptions:
                  camera_image: camera.buienradar
                  entity: camera.buienradar
                  show_state: false
                  show_name: false
                  camera_view: live
              - entity: weather.huis
          - title: Other test
            entities:
              - entity: cover.gordijn_voor
              - entity: cover.screen
              - entity: media_player.lg_webos_tv_woonkamer
              - card: custom:mini-graph-card
                wider: true
                cardOptions:
                  entities:
                    - sensor.server_vermogen

The issue was not having browser_mod (although installed via HACS) in my dashboard resources.

However I do not need to define the popup_cards to have the popup working. I can just add the popup code to my view cards and it works. Is this because I am testing them in custom:homekit-card??

        entities:
          - title: Lampen
            popup:
              type: custom:light-popup-card
              icon: hass:flash
              hideIcon: false
              hideState: false
              displayType: slider
              settings:
                openButton: Instellingen
                closeButton: Sluiten
            entities:
              - entity: light.werkkamer_licht_achter_2
              - entity: light.werkkamer_licht_bureau_2

And final question, when I added the settings I get this error “Set settingsCustomCard to render a lovelace card here!”. How can I get the default more-info back in here? I thought it defaulted to that except when an settingsCard is defined?