Is there a better way to view the logs than just using the developer tools in browser and looking at the console (which has no errors appearing)?
I’ve tried simplifying my lovelace config to just having the single tab with the single card and no other modules, and I get the same effect.
@thecrane @teqqy i changed the code for tap, double_tap and hold actions to fix problems.
I know you guys are having problem can you maybe test this for me?
I got the code on different branch: https://github.com/DBuit/Homekit-panel-card/tree/development
You can get the .js file form the dist folder and use it in your lovelace. Let me know if you can test it and if it works better for you. Thanks!!
If other people have problems or just wanna check it out let me know what your experience is.
Thanks for your hard work on this @DBuit, but it still isn’t working for me.
Given that it is for everyone else, though, it must be something in my setup. Is there a minimum version of Home Assistant that I should be running? Or some extra component I don’t have set up that I should?
The buttons look great, and they scale when I reduce the browser window (which is what I was after) - it’s just super frustrating that I can’t get them to click!
I’m getting some pretty strange behaviour on this card with iOS which I will try to explain as best as I can. If I set the light pop up card with the following code I get the expected behaviour where I can turn on the light with 1 tap and the pop up appears properly with a hold:
entities:
- entities:
- hold_action:
action: call-service
service: browser_mod.popup
service_data:
card:
entity: light.bedroom_light
type: 'custom:light-popup-card'
deviceID:
- this
style:
'--iron-icon-fill-color': '#FFF'
align-items: center
background: 'rgba(0, 0, 0, .8)'
display: block
flex-direction: column
height: 100%
justify-content: center
left: 0
margin: 0
position: fixed
top: 0
width: 100%
z-index: 999
title: Bedroom Light
entity: light.bedroom_light
name: Bedroom
title: Lights
statePositionTop: true
type: 'custom:homekit-card'
Strangely, If I change hold_action to double_tap_action then the pop-up card will appear one a single tap. If I double tap quickly it will simply open the popup card and quickly close it. If I try to define tap_action to toggle the light entity it will still just open the popup card and ignore the tap_action. I can set the hold_action to toggle the light on/off.
If I write the code as follows the hold action will bring up the custom light-popup-card, but the percentage or “off” text will have the iOS text selection as I mentioned earlier, but the double tap action will work properly and bring up the default more-info light entity popup.
entities:
- entities:
- entity: light.bedroom_light
name: Bedroom
double_tap_action:
action: more-info
entity: light.bedroom_light
popup:
type: 'custom:light-popup-card'
title: Lights
statePositionTop: true
type: 'custom:homekit-card'
If I leave the code like that, but add the following code to my main Lovelace code via the Raw config editor then suddenly the single tap action opens the popup card defined under popup_cards again. If I perform a hold action it will open the popup card with the brightness or “off” selected in text.
popup_cards:
light.bedroom_light:
card:
entity: light.bedroom_light
type: 'custom:light-popup-card'
style:
'--iron-icon-fill-color': '#FFF'
align-items: center
background: 'rgba(0, 0, 0, 0.8)'
display: block
flex-direction: column
height: 100%
justify-content: center
left: 0
margin: 0
position: fixed
top: 0
width: 100%
z-index: 999
title: Bedroom Light
Please note that this behaviour is only evident on iOS, in Safari if I double click the mouse it will bring up the custom light-popup-card and a single click will toggle the light on or off.
Note this behaviour is still evident if I change the popup_cards code to the following, but now it obviously shows the entities card on single tap instead of double tap which it should.
popup_cards:
light.bedroom_light:
card:
type: entities
entities:
- entity: light.kids_room_light
title: Bedroom Light
I have been live troubleshooting while doing this post and just now decided to try the browser-mod popup service on a button-entity card and even with this card the double_tap_action brings up the popup-card on a single tap instead of double tap, so seems like an issue with browser mod.
Hi,
Thanks for testing it all!
I Will try to check if i can get the same weird behavior.
Good to know for now is that is the current version i think you can’t overwrite the tap_action for light or switch within the card.
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!
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.
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
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?
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.
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?