Hi, can you explain which value_template to use when creating a sensor for this method?
Would it be possible to use this as just a standard thermostat card (possibly without the upper orange circle and name) and not as a “pop-up” I really love the look of it, but if I try to use it as just a standard card on my page it shows up then disappears (as well as all the other contents of my view) about a second or two later. I didn’t know if there was some portion of the code that was related to it being a popup that was somehow affecting it.
Thanks for all of your work, all these cards are awesome!
1 Like
not sure I understand what you are asking. I posted the value_templates above, but maybe you should define ‘this method’ ?
No worries, I got it now. Thanks for your reply! 
@DBuit Hi, can you perhaps create or help me format your light-popup-card (and probably the other cards as well) ? I love your cards in combination with browser-mod. The downside is however that I really need the more-info options for some devices (especially lights). So I have tried to get best of both worlds by combining browser-mod and light-popup-card with more-info-card and swipe-card.
It works! BUT the light-popup-card is out of placed with this. I think this should be fairly simple to solve since it has to do with the layout, but I don’t really know where to begin with editing your custom card.
This is a video with the proof of concept. https://youtu.be/zoFnY4lAJkk
As you can see: it works, but your cards layout gets bugged. Also tapping on screen does not close the popup anymore, I have to use the close button now. Do you think you can help me solve the layout? I think this setup would be highly beneficial for the community as well, since you then have popups ánd more-info
This is my popup code btw (set globally in Lovelace). I tried changing ‘display: flex’ to ‘block’ but didn’t make a difference (it was block originally btw).
light.woonkamer_yeelights:
card:
cards:
- actions:
- color: '#9900FF'
service: light.turn_on
service_data:
entity_id: light.woonkamer_yeelights
rgb_color:
- 63
- 0
- 255
- color: '#FFA500'
service: light.turn_on
service_data:
entity_id: light.woonkamer_yeelights
rgb_color:
- 255
- 63
- 0
- color: '#FFF1D6'
service: light.turn_on
service_data:
entity_id: light.woonkamer_yeelights
kelvin: 3600
- color: '#FF2212'
service: light.turn_on
service_data:
entity_id: light.woonkamer_yeelights
rgb_color:
- 255
- 0
- 0
actionsInARow: 4
brightnessHeight: 400px
brightnessWidth: 150px
entity: light.woonkamer_yeelights
switchHeight: 400px
switchWidth: 150px
type: 'custom:light-popup-card'
- type: 'custom:more-info-card'
entity: light.woonkamer_yeelights
title: null
type: 'custom:swipe-card'
style:
'--iron-icon-fill-color': '#FFF'
align-items: center
background: 'rgba(5, 29, 55, 0.6)'
display: flex
flex-direction: column
height: 100%
justify-content: center
left: 0
margin: 0
position: fixed
top: 0
width: 100%
z-index: 999
title: Yeelights
@jimz011 has a pretty nifty method to get the gear icon on the pop up cards to then bring up the more info card… I’m not sure how exactly he accomplished it but it’s in his HKI setup
Yeah, I asked him before if he could share it. He stated he modified the light-popup-card and would probably share his code sometime in the futute. However, I don’t feel like waiting and being dependable, especially since he’s very busy updating/fixing his UI.
That having said: I’s rather use the swipe method than the gear icon. It works and looks very clean and fluid by swiping. This also opens op future possibilities with different cards. I’ll look into his codes regardless, perhaps I can find a way to fix the layout that way. Thanks!
I agree with you on having a swipe-card on it. However, swipe-card works terribly on popup-cards to the point it would lag out, hang and then gets sped up/slowed down immensly.
However the modified code can be found on my repo already @ASNNetworks. Just get the thermostat-popup.js file from my repo so you can use it in a vertical-stack (the original doesn’t seem to work for me that is why I modified it). You could then create anything you want just like you would on a normal view or popup card (except the swipe-card that is). I already tried it, but unfortunately it hasn’t been fixed over the last year.
Please click on the links above to get you going. Sorry for the delay (you are right, I am pretty busy atm hehe)
Edit: been watching your video, seems swipe-card doesn’t hang for you? For me it would always hang, I even tried simple cards and core cards, but it would always hang somehwere in the middle. After a few seconds it would function as normal.
Using my modified card does fix the spacing issues you have, however it removes the inner popup part which is responsible for closing the popup when clicking anywhere else. This means that my modified version can’t be closed by clicking and you will need to press the X. There is however a setting in browser_mod that can do this, namely: auto-close. This however didn’t work out nice for me so I don’t use it.
Could you also elaborate on how you got swipe-card working without hiccups? I’d be really interested in that as I have tried for years to do that. And it was initially my plan to create it like that.
1 Like
Thanks alot Jim, I really appreciate your work and effort! I’ll look into your provided codes !
@ASNNetworks Please read my edit before you miss it in the previous post! 
Also, don’t just copy/paste, you will need to remove the *.gz file as well, else it would use that instead of my modified .js
1 Like
I got it working for the most part The slider just needs to go a few pixels down, so the percentage is fully visible. Also I need to change the background. When I change the background using the style option of browser-mod, there is still a black background (squared) around the popup-card itself. For now I have made the entire background black using the style option of browser-mod. I do have to say though: browser-mod doesn’t really like swipe gestures, since the backdrop stays active. When I move my finger it still moves my home page behind it. I wish that could be disabled entirely somewhere within browser-mod since it serves no real purpose imo. Also, somehow the slider now doesn’t work anymore on Chrome (macOS). However, it works perfectly fine on iPhone (Safari, iOS13). Very strange.
It needs some finetuning, like the stuff I mentioned above. However I really think this is promising and can provide great possibilities in the future when combined with different cards and entities. To answer your question: I actually didn’t do anything special to make it work. I had it installed, but never got around to actually find a good way to use it, untill now that is. Maybe it works better now than before?
1 Like
Very nice, I like what I see, will try the swipe-card in a popup once more.
If you want those cards to be transparant as well you will need to put them in an entities card instead of a vertical-stack, like so:
- type: entities
style: |
ha-card {
--ha-card-background: transparant;
background: transparant;
box-shadow: none;
margin-top: -15px;
}
entities:
- type: custom:light-popup-card
entity: {{ entity }}
brightnessWidth: 110px
brightnessHeight: 410px
- type: 'custom:button-card'
color_type: blank-card
styles:
card:
- height: 11px
- type: 'custom:rgb-light-card'
entity: {{ entity }}
Do it like this and the cards within that card will have the style from the entities card instead of their own. You might need to put them into it like this, but I’m not sure anymore:
type: entities
style: |
ha-card {
--ha-card-background: transparant;
box-shadow: none;
background: transparant;
--paper-card-background-color: transparant;
}
.card-content {
padding: 0
}
entities:
- type: custom:hui-vertical-stack-card
cards:
- your cards here etc.
On some cards transparant doesn’t work, you should then replace it with 'rgba(0,0,0,0.0)' instead.
To lower the popup, open the .js file you’ve downloaded from me and change the following line:
line: 206
Change it to a number something higher (I say higher because it is a negative, so try something like -30px;
But that is actually great to see working! I will try it this weekend.
1 Like
Thanks, I’ll look into it tomorrow! First I need some sleep 
Edit: sleep is for the weak 
Next step: fixing the browser issue, but I think I’ll have to leave that to others (or get more experienced to find out how I can fix it)
It’s working! I just upgraded to 0.104.3 and everything started working! Thanks for all your help, team - really great to be able to use these great cards!
In the dimmer popup cards it just only shows on and off. can it be changed to brightness level?
Also replaced the js file, but still the same behavior. Sorry. 
Hello everyone,
So i have been sick for a few days so did do much…
Today i have been working on my cards again and just set new version on github: https://github.com/DBuit/Homekit-panel-card/releases/tag/0.4
I’m trying something new for click, double click and hold actions that hopefully work better and also work on all devices let me know how it works for you guys.
Some new things also:
Some global configuration options:
-
rulesColordo set the text color of the rules -
tileHoldAnimationwhen set to true the tiles will grow
Tile size configuration:
-
widermakes the tile 2 tile’s width -
highermakes the tile 2 tile’s height
For now it is best used to not combine heigher tiles with normal tiles because it just looks weird.
In the new version you can now also overwrite tap_action for lights and switches!
2 Likes
I know this isn’t directly related to this card but I want to know if you are interested in developing more on your sonos card? I am now using your cards on all my devices and love it! Now i want to focus on my media player for sonos. I want to try replicate as close as I can to the Sonos app, is it possible we can add the playlist que as well? I would also like to have the ability to shorten the favorites list or a way to display it different than one long list. Let me know if you have any time to look at this in the future. Thanks again for all your hard work!
Hi @dacorn so you are using this card? https://github.com/DBuit/custom-sonos-card
I will probably update it to home kit style one day if you have idea to make it better let me know.
I don’t think you can get playlist in home assistant you can check media_player options in documentation of home assistant to see what is possbile for inspiration
Yes I have this card running in my dev environment but I would like to enhance it before moving it to my live system. Here are a couple items to help improve the card.
-
List favorites as you do now, but allow for controlling how many to list, we can have a next and back, this way the list isn’t too long.
-
get the que of songs for the playlist. This way we can see the next sone that will play.
Both of these will require the album art as well.
