Hey man,
No at this moment you van only use An icon.
Maybe in the future
Can you post that image so i can test with it and make sure it looks good
Thanks you!
@DBuit - This card looks simply amazing, so much appreciation for your work here !!! So I got the light popup kinda working and its great, but now I am playing with the themostate one and I am not sure the example in the readme is fully groking w/. me… So I noticed a lot of your repos have a popup_cards attribute mentioned but its not clear to me if this is a dependency on @thomasloven’s deprecated popupcard or just a namespace conflict between the two projects… Bottom line do you happen to have a simple and complete hello world'ish example for how to use this card in a virgin lovelace install ?
thanks again
He John,
So i made this card to work with my other card: https://github.com/DBuit/Homekit-panel-card
to get more home kit style interface.
But i use card tools by thomas loven so the card can also be used without my other card. And just as a popup in your interface.
So it works with popup-card and browser-mod by thomas and the example code in the readme is how you can use it with browser-mod:
popup_cards:
light.beganegrond:
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: light.beganegrond
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"
Here you got the section about the popup in the browser_mod readme: https://github.com/thomasloven/hass-browser_mod#popup
Hope you can get it working let me know if i can help you!
Hi @DBuit
where do we declare these popup_cards: ? Should they go in the root of the ui-lovelace.yaml, just like the decluttering_templates and button_card_templates or do we need to set them in the view they are called in like yaml anchors.
to get a better understanding: do we need to set this on each individual light, or could we create a ‘template’ and use ‘entity’ or ‘this.entity_id’ and use the card on each more-info on light in the config?
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
1 Like
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:
- Add column support . This is optional but if you wanna use this the yams looks a bit different because you have to name the rows and columns in the readme there will be an example.
- Display state info like brightness percentage for lights or last_changed for sensors not after the state (on/off) but in a circle inspired by A different take on designing a Lovelace UI
- Custom hold_action. I added the tap_action before and now you can also customize the hold_action the same way
- Custom double_tap_action. Just like hold you can also set a double_tap_action. By default if no double_tap is defined it will activate the tap action.
- Icon spin. You can set spin: true on your entity and the icon will start spinning when the state == on can be useful for ventilation for example
- Small css changes/fixes
- Rewriten the readme
With the new columns you can now make in interface like this:
1 Like
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:
5 Likes
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.
1 Like
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.
It works the same as the media_player except it has 1 extra config option ** sliderService** where you need to set if you want to control the normal position or the tilt position with the slider.
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:
3 Likes
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.
3 Likes