This is great, but I have an issue I can’t seem to resolve
The pop works fine in IOS app but in Chrome on my desktop the pop-up does not appear?
Has anyone had this issue and resolved it?
This worked great until 115 when more-info-card stopped working. Do you know of any work-around to display the more-info or even just a color picker?
Edit: I may have fixed my issue with light-entity-card GitHub - ljmerza/light-entity-card: Control any light or switch entity
However, he states he is dropping work on this now that 115 came out and changed how it loads.
Just wondering, is this project still in development or abandoned?
Version 0.4.8.4
released 19 hours ago
Add switchValue
Add switch color options
Fix slider thumb color on android
I would love to see documentation on what these changes involve.
On my phone everything woks fine, but on my desktop I get this:
1 Like
I have the same problem … what to do?
You can share all the code please 
Sry, I dont have a solution. For now I go with a script for dimming using double tab and hold action.
Maybe the solution is simple by setting up some css things.
@panhans cant see if you use it but checkout the github: https://github.com/DBuit/light-popup-card
In the example there is a part with style that should make it look good. are you already using that?
You also need to have card_mod installed also mentioned on the github
I don’t know what I did or what I feel bad about because I have the latest versions of addons.
But my pop-car only looks good on smartphones.
On my tablet and my PC the image appears cropped
- title: All Devices
icon: 'mdi:home'
panel: true
cards:
- type: picture-elements
image: /local/back.png
style: |
ha-card {
background: rgba(42, 46, 48, 1)
}
elements:
#################################################################
# #
# Homekit Styled Card: #
# https://github.com/DBuit/Homekit-panel-card #
# #
#################################################################
- enableColumns: true
popup-cards:
brightnessHeight: 100%
brightnessWidth: 100%
scenesInARow: 2
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
rows:
- columns:
- column: 1
entities:
- entities:
- entity: switch.channel_1
icon: 'mdi:tree'
name: Jardim
popup:
type: custom:light-popup-card
entity: switch.channel_1
scenesInARow: 2
brightnessWidth: 150px
brightnessHeight: 400px
switchWidth: 120px
switchHeight: 350px
Can you help me
Hmm… Even with the style provided on the github page I am not able to get a satisfying result.
I played around with css in firefox using F12 and set some values for mdc-dialog__container and mdc-dialog__surface without any great success. But when pull the splitter (located between view port and edit window) up so the view port is smaller half the size of the browser window it gets rendered correctly.
Hi I was wondering if someone cause please help me I am very new to ha and have been trying to sort something for weeks now and its really bugging me.
On the light pop up how can I set the card up so when I click settings it shows the more info card? Also is there anyway to show a colour picker for hue bulbs?
Finally I cant setup the actions or scenes at the bottom please can someone help me with that?
Is there a way you can group devices together so they are in line on the ui? Say like bedroom and then bathroom etc.
My code is below. I am using the home kit style cards.
entities:
- entities:
- entity: light.tv_hue_right
popup:
brightnessHeight: 350px
brightnessWidth: 130px
closeButton: true
enablecolumns: true
scenesInARow: 2
slider: true
settings: true
actions: true
actionsInARow: 3
sliderColoredByLight: true
switchHeight: 300px
switchWidth: 110px
tileHoldAnimation: true
TileOnRow: 2
tile_width: 10px
title: Bedroom Lights
type: ‘custom:light-popup-card’
useBrightness: true
color: ‘#FDCA64’
Card:
Settings:
settingsCard:
cardOptions:
entities: - entity: light.tv_hue_right
cardStyle: |
background-color:#FFF;
type: ‘custom:homekit-card’
Thank you so much for all help
Hello @panhans and @Pedro_Teixeira
You both have card_mod installed?
And one of you using chrome browser? if not can you try if it works in there maybe it’s a browser thing…
Hi @sforrest2020,
In the popup part add this for example:
settingsCard:
type: entities
cardOptions:
entities:
- light.beganegrond
- light.zithoek
- light.eettafel
- light.kookeiland
cardStyle: |
background-color:#FFF;
Thanks for your help @DBuit.
I am getting closer as I now have a blank screen on settings however nothing is coming up. Please see a picture of my coding attached I would appreciate it if you could let me know where I am going wrong.
entities:
- title: Main Bar
popup:
type: ‘custom:light-popup-card’
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
settings: true
switchHeight: 300px
settingsCard:
type: entities
cardOptions:
entities:
- light.main_light
cardStyle: |
background-color:#FFFFFF;
entities:- entity: light.main_light
popupExtend:
actions:
- service: scene.turn_on
service_data:
entity_id: scene.ontspannen
color: ‘#FDCA64’
type: ‘custom:homekit-card’
- entity: light.main_light
Thanks,
Sam
Hi,
can you share your config in the right format as in yaml makes it easier to find errors.
place your code between triple: ```
Hi,
yes I tried Firefox and Chrome and I have card_mod installed. I tried the example you posted without any success. No matter where I put the style in, directly to the popup card or “global” in the yaml file. Maybe I find more time in near future to solve that problem maybe during the holidays.
Hello,
First of all thank you your great work DBuit. Is it possible to give the action-button in the light-popup-card a gradient color like the one below?
I hope someone is able to help. Thanks in advance.
Thanks for you response please see below.
entities:
- entities:
- entity: light.main_light
popupExtend:
actions:
- color: '#FDCA64'
service: scene.turn_on
service_data:
entity_id: scene.ontspannen
popup:
brightnessHeight: 350px
brightnessWidth: 130px
scenesInARow: 2
settings: true
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
settingsCard:
cardOptions:
entities:
- light.main_light
cardStyle: |
background-color:#FFFFFF;
type: entities
title: Main Bar
type: 'custom:homekit-card'