He @Mariusthvdb
Yes they go in the root so not after or inside the views:
Well if you are using browser_mod and implementing this in your own interface it looks like your need to do this for each light but i do not know that maybe.
I made my own card to create a homekit style interface and there you can also use this card and use it for a row of entities but if you can find that in the readme of that card: https://github.com/DBuit/Homekit-panel-card
thanks, will do.
about the ‘global’ template, would you please consider looking in to that? Would be really cool if this could be done, (if needed maybe in conjunction with the decluttering template) to prevent having to write the exact popup code 43 times 
Imagine something like:
popup_cards:
light.*:
title: ""
style:
position: fixed
z-index: 999
top: 0
left: 0
height: 100%
width: 100%
display: block
align-items: center
justify-content: center
background: rgba(0, 0, 0, 0.8)
flex-direction: column
margin: 0
"--iron-icon-fill-color": "#FFF"
card:
type: custom:light-popup-card
entity: entity
icon: mdi:led-strip
scenesInARow: 2
brightnessWidth: 150px
brightnessHeight: 400px
switchWidth: 150px
switchHeight: 400px
scenes:
- scene: scene.ontspannen
color: "#FDCA64"
name: ontspannen
- scene: scene.helder
color: "#FFE7C0"
name: helder
- scene: scene.concentreren
color: "#BBEEF3"
- scene: scene.energie
color: "#8BCBDD"
Hello everyone,
i made some changes and released it in a new version so also available on HACS.
What did i do now?
Homekit panel card V0.2.2 https://github.com/DBuit/Homekit-panel-card/releases/tag/0.2.2
I also made something new i called it rules maybe the name will change but you can template rules and this will be displayed on your home screen to inform you about stuff like how many lights are on, or for me when i need to put the trash outside see screenshot:
Light pop-up card: https://github.com/DBuit/light-popup-card/releases/tag/0.2.2
So i removed scenes from the card and renamed it toactions.
It can do the same but much more because it uses services now as was suggested by people, you can also add icons to use it more as a button.
Old configuration won’t work this is the new way:
actions:
- service: scene.turn_on
service_data:
entity_id: scene.energie
color: "#8BCBDD"
name: energie
- service: homeassistant.toggle
service_data:
entity_id: light.voordeurlicht
name: voordeur
icon: mdi:lightbulb
popup_cards are now also used by browser_mod, such that it’s a complete replacement for popup-card.
Can you make this work with the layout-card please? I really need to have other items on my UI at the same time as this card.
Thanks!
Dave
Hello all,
No update yet for the pop-up card but i did update the homekit panel card!
I just released an update of the homekit card: https://github.com/DBuit/Homekit-panel-card
What is added/fixed/changes:
With the new columns you can now make in interface like this:
Great additions today!!
I can’t seem to get this working, do you see any issues here?
Thanks!
enableColumns: true
breakOnMobile: true
rows:
- row: 1
columns:
- column: 1
tileOnRow: 4
entities:
- title: Kitchen
entities:
- entity: light.kitchen_lights
- entity: light.kitchen_left
- entity: light.kitchen_middle
- entity: light.kitchen_right
- column: 2
tileOnRom: 3
entities:
- title: Living Room
entities:
- entity: light.wallunit_top
- entity: light.wallunit_middle
- entity: light.wallunit_bottom
- row: 2
columns:
- column: 1
tileOnRow: 3
entities:
- title: Temp/Humidity
entities:
- entity: sensor.living_room_temperature
- entity: sensor.living_room_humidity
- row: 3
columns:
- column: 1
tileOnRow: 3
entities:
- title: AC
entities:
- entity: climate.kitchen_ac
type: thermostat
- row: 2
columns:
- column: 2
tileOnRow: 3
entities:
- entity: light.main_entry
- entity: light.chandelier
- entity: light.front_steps
- entity: light.foyer
- row: 3
columns:
- column: 2
tileOnRow: 3
entities:
- entity: light.front_steps
- entity: light.garden_path
- row: 4
columns:
- column: 2
tileOnRow: 3
entities:
- entity: light.living_room_dimmer_back
- entity: light.living_room_dimmer_middle
- entity: light.living_room_dimmer_front
popup:
brightnessHeight: 350px
brightnessWidth: 130px
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
panel: true
type: 'custom:homekit-card'
tested your configuration you where missing the following on 3 places:
entities:
- title: test
This works for me:
- title: test
panel: true
cards:
- type: "custom:homekit-card"
enableColumns: true
breakOnMobile: true
rows:
- row: 1
columns:
- column: 1
tileOnRow: 4
entities:
- title: Kitchen
entities:
- entity: light.kitchen_lights
- entity: light.kitchen_left
- entity: light.kitchen_middle
- entity: light.kitchen_right
- column: 2
tileOnRow: 3
entities:
- title: Living Room
entities:
- entity: light.wallunit_top
- entity: light.wallunit_middle
- entity: light.wallunit_bottom
- row: 2
columns:
- column: 1
tileOnRow: 3
entities:
- title: Temp/Humidity
entities:
- entity: sensor.living_room_temperature
- entity: sensor.living_room_humidity
- row: 3
columns:
- column: 1
tileOnRow: 3
entities:
- title: AC
entities:
- entity: climate.kitchen_ac
type: thermostat
- row: 2
columns:
- column: 2
tileOnRow: 3
entities:
- title: ENTITIES & TITLE MISSING HERE
entities:
- entity: light.main_entry
- entity: light.chandelier
- entity: light.front_steps
- entity: light.foyer
- row: 3
columns:
- column: 2
tileOnRow: 3
entities:
- title: ENTITIES & TITLE MISSING HERE
entities:
- entity: light.front_steps
- entity: light.garden_path
- row: 4
columns:
- column: 2
tileOnRow: 3
entities:
- title: ENTITIES & TITLE MISSING HERE
entities:
- entity: light.living_room_dimmer_back
- entity: light.living_room_dimmer_middle
- entity: light.living_room_dimmer_front
popup:
brightnessHeight: 350px
brightnessWidth: 130px
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
I created a quick new pop-up card after suggested by someone to reuse the light popup for media_player
So it is the same popup card as the lights but now the slider controls your volume of your media_player.
And you can configure extra actions to add more control like next and previous song and play/pause your media_player.
Repo with example configuration can be found here: https://github.com/DBuit/media_player-popup-card
Screenshot:
Very very nice, I actually wanted to ask you something like this. Could you also create one for covers and/or garage doors? That would be amazing.
HI, thanks for looking at this, I am still getting an error, it say I need to define entities.
I did a copy and paste to the UI Editor. I am not using the ui-lovelace.yaml as I still edit through the main page.
Hey DBuit,
Fantastic work you have done with this card !
Can you take a look at this one? I just can’t get it working:
color: auto
entity: light.hemel
name: Hemel
show_last_changed: true
show_state: true
size: 1.7em
state:
- styles:
card:
- '--paper-card-background-color': '#FFFFFF'
- filter: opacity(40%)
icon:
- filter: grayscale(40%)
value: 'off'
styles:
card:
- font-size: 11.2px
- '--paper-card-background-color': 'rgba(174, 255, 205)'
- height: 100px
- border-radius: 10px
img_cell:
- font-size: 14px
- justify-content: left
label:
- opacity: 0.8
- font-size: 11.2px
- padding: 0px 5px
- color: black
name:
- font-size: 24px
- max-height: 1.4em
- min-height: 1.4em
- opacity: 0.75
- color: black
- justify-self: start
- padding: 0px 5px
state:
- font-size: 2.4em
- font-weight: 300
- color: black
hold_action:
action: more-info
service: browser_mod.popup
service_data:
title: Popup ex
style:
position: fixed
z-index: 999
top: 0
left: 0
height: 100%
width: 100%
display: block
align-items: center
justify-content: center
background: 'rgba(0, 0, 0, 0.8)'
flex-direction: column
margin: 0
'--iron-icon-fill-color': '#FFF'
card:
type: 'custom:light-popup-card'
entity: light.hemel
scenesInARow: 2
brightnessWidth: 150px
brightnessHeight: 400px
switchWidth: 150px
switchHeight: 400px
deviceID:
- 2f9a3023_de4d04c2
type: 'custom:button-card'
Thanks for your help !
I got this working now so all good! Thanks again for this great card!
Hi everyone,
So i made a third version of the slider popup for covers.
I first thought to make 1 pop-up that could work for most entities but configuration gets much more complicated and i can make these pretty quick 
Screenshot to finish it:
Hey @DBuit,
finale made it to have this popup show on each button, and use it in the button_template (opposed to writing it on each and every light entity card).
in my previous attempt above, I forgot to use the correct JS syntax used in the button card. duh. here is the correct thing, using browser-mod:
hold_action:
haptic: heavy
action: call-service
service: browser_mod.command
service_data:
command: popup
title: >
[[[ return entity.attributes.friendly_name ]]]
style:
position: fixed
z-index: 999
top: 0
left: 0
height: 100%
width: 100%
display: block
align-items: center
justify-content: center
background: rgba(0, 0, 0, 0.8)
color: 'var(--primary-color)'
flex-direction: column
margin: 0
"--iron-icon-fill-color": "#FFF"
card:
type: custom:light-popup-card
entity: >
[[[ return entity.entity_id ]]]
# icon: >
# [[[ return entity.attributes.icon ]]]
brightnessWidth: 150px
brightnessHeight: 400px
switchWidth: 150px
switchHeight: 400px
Since I couldn’t read the name of the entity, next to the X, let me ask this:
What would be the variable to use for coloring the title? Also, could we position the name centrally in the popup, atop the icon, or at least in that small column of icon, % and slider?
I’ve now set color: 'var(--primary-color)' and that makes the card follow theming so it seems for now 
I’ve also not used the icon template, since I have all my lights customized, and that follows suit nicely.
Hey @DBuit,
Thanks again for this great card! Unfortunately the following does only work partially for me:
It does work for my Hue LED Strip, but not my other lights. I configured all the icon colors exactly the same way (greyscale, based only on brightness %) - but for the other ones it shows the standard yellow.
BTW: it shows the correct icon_color in developer settings and other cards.
vs. 
Thank you very much for any feedback!
EDIT: My bad, it was only luck that the color was matching - as the led strip was white… 
Would it somehow be possible to make it compatible with custom ui? This and the integrated light card are the only (to my knowledge) where it does not work fully.
Hello everyone,
I just updated the light pop-up (https://github.com/DBuit/light-popup-card) with a few requested changes.
First three configuration options to change color of the slider
And In new version the brightness is shown at the slider while sliding so you can directly see what percentage you are setting before releasing it
Hello everyone,
Just release new version of the light pop-up card (https://github.com/DBuit/light-popup-card)
New stuff
sliderTrackColor to configuration to change the color of the track.settings which enable an extra page on the pop-up that displays the more-info pop-up content to give more controlsettingsCard when settings is enabled you can instead render any lovelace card on the extra page (Check readme for example configuration)Fixed
Screenshot of the settings:
hi, when i use the slider in the popup card, when i set the brightness to 100% the real value is 99%,
Anyone else with this problem?
Regards
