Card Tools popup? (Homekit style card )

SuperMario · June 23, 2020, 7:29am

@DBuit here is my lovelace configuration for Homekit views:

  - title: Control lights
    icon: 'mdi:home-lightbulb-outline'
    panel: true
    cards:
      - type: picture-elements
        image: /local/ui2/floorplan/blurredFloorplan.png
        style: |
          ha-card {
            background: rgba(42, 46, 48, 1)
          }
        elements:

            #################################################################
            #                                                               #
            #                     Homekit Styled Card:                      #
            #         https://github.com/DBuit/Homekit-panel-card           #
            #                                                               #
            #################################################################

          - enableColumns: true
            popup:
              brightnessHeight: 350px
              brightnessWidth: 130px
              scenesInARow: 2
              switchHeight: 300px
              switchWidth: 110px
              type: 'custom:light-popup-card'
            rows:
              - columns:
                  - column: 1
                    entities:
                      - entities:
                          - entity: light.shelly_shdm_1_db3e78
                            icon: 'mdi:spotlight-beam'
                            name: Spotice
                            popup:
                              brightnessHeight: 350px
                              brightnessWidth: 130px
                              scenesInARow: 2
                              supportedFeaturesTreshold: -1
                              switchHeight: 300px
                              switchWidth: 110px
                              entity: light.shelly_shdm_1_db3e78
                              type: 'custom:light-popup-card'
                          - entity: light.living_room_ledr
                            icon: 'mdi:led-strip-variant'
                            name: LED traka
                          - entity: light.block_lamp
                            icon: 'mdi:lamp'
                            name: Blok
                          - entity: light.flos_lamp
                            icon: 'mdi:floor-lamp-variant'
                            name: Flos
                          - entity: light.tv_led
                            icon: 'mdi:led-strip-variant'
                            name: TV LED
                        title: Dnevni
                    tileOnRow: 2
                  - column: 3
                    entities:
                      - entities:
                          - entity: light.shelly_shsw_25_98f4abf2cb95_1
                            icon: 'mdi:spotlight-beam'
                            name: Spotice
                          - entity: light.living_room_ledl
                            icon: 'mdi:led-strip-variant'
                            name: LED traka
                          - entity: light.shelly_shsw_25_98f4abf2cb95_2
                            icon: 'mdi:ceiling-light'
                            name: Enigma
                        title: Blagovaonica
                    tileOnRow: 1
                  - column: 3
                    entities:
                      - entities:
                          - entity: light.shelly_shsw_1_68bf12
                            icon: 'mdi:spotlight-beam'
                            name: Spotice
                          - entity: switch.sonoff_10004f5b71 #light.kitchen_led
                            icon: 'mdi:led-strip-variant'
                            name: LED traka
                          - entity: light.shelly_shsw_1_8caab5060e1c
                            icon: 'mdi:ceiling-light'
                            name: Bell
                        title: Kuhinja
                    tileOnRow: 1
                  - column: 4
                    entities:
                      - entities:
                          - entity: light.office_led
                            icon: 'mdi:led-strip-variant'
                            name: LED traka
                        title: Ured
                    tileOnRow: 1
                row: 1
              - columns:
                  - column: 1
                    entities:
                      - entities:
                          - entity: light.shelly_shdm_1_d48400
                            icon: 'mdi:spotlight-beam'
                            name: Spotice
                            popup:
                              brightnessHeight: 350px
                              brightnessWidth: 130px
                              scenesInARow: 2
                              supportedFeaturesTreshold: -1
                              switchHeight: 300px
                              switchWidth: 110px
                              entity: light.shelly_shdm_1_d48400
                              type: 'custom:light-popup-card'
                        title: Hodnik
                    # tileOnRow: 2
                  - column: 2
                    entities:
                      - entities:
                          - entity: light.shelly_shsw_1_e098068ce4be
                            icon: 'mdi:ceiling-light'
                            name: Mala
                          - entity: light.shelly_shsw_1_8caab5055136
                            icon: 'mdi:ceiling-light'
                            name: Velika
                        title: Kupaonice
                    tileOnRow: 1
                  - column: 3
                    entities:
                      - entities:
                          - entity: light.shelly_shsw_1_e098068ceb27
                            icon: 'mdi:ceiling-light'
                            name: Norm 69
                            popup:
                              brightnessHeight: 350px
                              brightnessWidth: 130px
                              scenesInARow: 2
                              switchHeight: 300px
                              switchWidth: 110px
                              entity: light.shelly_shsw_1_e098068ceb27
                              type: 'custom:light-popup-card'
                          - entity: light.bedroom_led
                            icon: 'mdi:led-strip-variant'
                            name: LED traka
                          # - entity: light.bedroom_light_ikea
                          #   icon: 'mdi:ceiling-light'
                          #   name: IKEA TRADFRI
                          #   popup:
                          #     brightnessHeight: 350px
                          #     brightnessWidth: 130px
                          #     scenesInARow: 2
                          #     switchHeight: 300px
                          #     switchWidth: 110px
                          #     entity: light.bedroom_light_ikea
                          #     type: 'custom:light-popup-card'
                        title: Spavaća soba
                    tileOnRow: 1
                  - column: 4
                    entities:
                      - entities:
                          - entity: light.shelly_shsw_1_8caab505bea8
                            icon: 'mdi:ceiling-light'
                            name: Nora
                          - entity: light.shelly_shsw_1_68bef0
                            icon: 'mdi:ceiling-light'
                            name: Val
                        title: Dječje sobe
                    tileOnRow: 1
                  - column: 5
                    entities:
                      - entities:
                          - entity: light.shelly_shsw_1_8caab505d8b1
                            icon: 'mdi:ceiling-light'
                            name: LED
                        title: Podrum
                    tileOnRow: 1
                row: 2
            statePositionTop: true
            style:
              height: 97%
              left: 62%
              top: 50%
              width: 78%
              # height: 97%
              # left: 52%
              # top: 50%
              # width: 78%
            type: 'custom:homekit-card'

So on my PC I can see all the cards:

and in the same time on my mobile (phone and tablet) only some cards are visible - in landscape mode more is visible but I can scroll down just a little bit to see some of the cards:

How can I resize tile size… I have tried under style but I didn’t manage to do so…

gwww · July 4, 2020, 2:05am

I’m having a problem with the light popup card on Firefox. It works fine on Chrome. Anyone else seeing the same?

Chrome:

Firefox:

djacid · July 5, 2020, 10:41am

Hello, I have some dimmable light (Shelly Dimmer), I can’t find how to enable brighness slider. I can only turn on/off the lights

DBuit · July 6, 2020, 9:34am

Hi,

you should lower the supportedFeaturesTreshold it is default 9
if you set it to -1 it works always or check what the supportedFeaturesTreshold is for your lights

DBuit · July 10, 2020, 10:09am

Hello,

Just released new update: https://github.com/DBuit/light-popup-card/releases/tag/0.4.7

Add onStates and offStates default this is on and off but you can change it or add multiple if needed.
Fix for safari the slider thumb was not displayed correctly.

martheijnen · July 12, 2020, 10:56am

Hey @DBuit is there also a possibility to add a input_selector in the media-popup similar to this? it is described here

Umbe · July 25, 2020, 9:08pm

Good evening , maybe i lost some break changes but my cards do not popup anymore…

.
Is there any change on the build 103 that broke the card ?
thanks

martheijnen · July 26, 2020, 5:22pm

The new home assistant version broke it, yes.

djacid · July 26, 2020, 5:50pm

Could you please tell me how did you build this layout? Is it with homekit-card or custom-layout card?

lubbertkramer · July 26, 2020, 8:55pm

Really nice setup, do you care sharing your code for above setup?

Umbe · July 27, 2020, 7:18am

Hi , is custom button card

Umbe · July 27, 2020, 2:56pm

Do you know if there will be a fix ? or if it has been already released ?
thanks

Just updated browser mod… all fixed…

Dyl · August 2, 2020, 2:00pm

Hi there.

I’m totally new with this and only just starting to fumble my way through customising Lovelace. I absolutely love this card together with your Homekit card - thank you - amazing work.

I cannot for the life of me figure out how to get a black background to the popup. Both of your cards are otherwise working really well, though the popup just has a transparent background.

I have both Browser_mod and Card_mod installed and have tried working with your example configuration (I should mention that I’m using the GUI card configuration rather than editing lovelace-ui.yaml directly).

Any suggestions? Apologies in advance - I’m very new to HA.

Vincenzo-8 · August 12, 2020, 10:11am

Hi guys does anyone have any idea why this written test appears? Thanks in advance for your help.

DBuit · August 12, 2020, 11:57am

I think you need to update homekit card maybe?

stefve · August 12, 2020, 1:25pm

Hi!

I’m using the Homekit-panel-card for my light switches to get a homekit style button, but the problem is I’m can’t get it to center it.

I don’t want to use the panel mode, because this will align all the buttons to the left like this with almost no space: https://i.imgur.com/9wJOP7O.png

What I prefer is that it’s like a normal card like this: https://i.imgur.com/yuUrl2J.png

When I disable the panel mode, it centers the card in the middle. With multiple buttons, it just adds them to the right and don’t center them like this: https://i.imgur.com/87CTg03.png

Can someone help me with this?

MrKuenning · August 28, 2020, 7:55am

First of all thanks.

I am running into an issue.
When I set settings: true I get a red message saying
“Set settinigsCustomCard to render a lovelace card here!”

I am able to set a settinigsCustomCard however, I really just want to toggle the old more_info screen. What am I doing wrong?

DBuit · August 28, 2020, 8:23am

Hi @MrKuenning

in v0.113 of home assistant they removed the more_info card that contains the whole more_info popup so you cant just load it in like that that are custom cards that give you the same options like this one: https://github.com/thomasloven/lovelace-more-info-card

martheijnen · September 21, 2020, 9:48am

Hey @DBuit, I’m trying the media popupcard combined with browser mod, but i get the error: you need to define entity. I can not see any entity configured in your example on github (media popup card).
However, if I add entity mediaplayerspotify (media_player.spotify_mart), i get a blanc popup screen.
What am I doing wrong?

edit I found out that it has to do with the mediaplayer spotify. What’s different that the popup won’t work for spotify media player?

           hold_action:
             action: call-service
             service: browser_mod.popup
             service_data:
               title: Popup example
               hide_header: true
               deviceID:
                 - this
               card:
                 type: custom:media_player-popup-card
                 actions:
                   - service: media_player.media_previous_track
                     service_data:
                       entity_id: this
                     name: previous
                     icon: mdi:skip-previous
                   - service: media_player.media_play_pause
                     service_data:
                       entity_id: this
                     name: play/pause
                     icon: mdi:play-pause
                   - service: media_player.media_next_track
                     service_data:
                       entity_id: this
                     name: next
                     icon: mdi:skip-next

If I delete entity, i get error screen.

           hold_action:
             action: call-service
             service: browser_mod.popup
             service_data:
               title: Popup example
               hide_header: true
               deviceID:
                 - this
               card:
                 type: custom:media_player-popup-card
                 entity: media_player.spotify_mart
                 actions:
                   - service: media_player.media_previous_track
                     service_data:
                       entity_id: this
                     name: previous
                     icon: mdi:skip-previous
                   - service: media_player.media_play_pause
                     service_data:
                       entity_id: this
                     name: play/pause
                     icon: mdi:play-pause
                   - service: media_player.media_next_track
                     service_data:
                       entity_id: this
                     name: next
                     icon: mdi:skip-next

jimz011 · September 21, 2020, 12:04pm

@DBuit I see you were already aware of the more info card changes. I did a FR on your repo in the hopes that we can call a core more-info card when pressing the settings button (more-info-card and light-entity card both no longer work).

For now I use a workaround by adding a button card or entity button to the settingsCard and have that invoke a more-info window. It works fine but is an extra button press. I hope that you will find the time to look at it (and hope that you can/will want to change it)