You wanna change icon size in the popup? How did you try to change it?
No sorry I mean the actual tile.
- entity: light.office_2
styles:
card:
- width: 100px
- height: 100px
Right now there is not option to overwrite styles of the tiles
Ok no worries 
Hello guys,
im working on a next release of this card but it is hard to keep track of all bugs and feature requests.
I would like to ask people to but them on github: https://github.com/DBuit/Homekit-panel-card
So if you got a bug or you are missing a functionality please make an issue on github so it is easier for me to track it 
i also got a short list for myself what i have planned for version 0.2 that is here: https://github.com/DBuit/Homekit-panel-card/issues/2
So please check if your bug/request is already there i want to release a new version this weekend!
I also got a custom light pop-up card it is the same for that card if you see a bug or missing a functionality please make an issue on this github repo: https://github.com/DBuit/light-popup-card
Thanks guys!
2 Likes
@DBuit Thanks a lot for your work, I really like this approach! I always liked the homekit layout, but since customisation is impossible I stepped away from it some time ago, and went with the hass GUI. This seems like a best-of-both-worlds solution, which could become very big.
I’ve been trying to upgrade my hass configuration for using your card, there are a couple of suggestions and issues I came across so far (using latest version):
- As mentioned before in this thread, I think you should consider to revise the
e.attributes.supported_features>9line. I have a couple of lamps that have value of 1 or 2, which are perfectly dimmable. I think this post is accurate. - For me the dimmer slider is missing the little grey dash (used to pull the bar up/down). Perhaps it is invisible (white) or something, due to my theme. Any clue what is causing this?
- For me the text in the
<div class="card-title"></div>is black and not configurable. Perhaps due to my theme. I think white looks much better with the homekit buttons, it would be nice if the styling could be customised. - The
BreakOnMobilesetting would be nice for browser (i.e. non-mobile) devices too. I would prefer to scroll downwards than horizontally to see all my devices. - For me on iOS (Hass App or Safari) the
handleClick()function works a bit different than on the PC. On my phone a ‘hold’ is always registered as ‘tap’, in other words: I can only toggle the device, not get the popup dialog. I tried to debug this myself, but I cannot really put a finger on the issue (wish I had a console log on the phone). Any clue what could be going on?
I would like to help improving your card, hope my experience is useful input for you (above items are not meant to critize!)
Do you use the full button version or only the popup variant? The popup variant could be used with popup cards or browser-mod. Which makes this card a lot more versatile.
It is in a browser mod popup with a state switch, rgb-card and an light entity card.
I use both the homekit-card and the homekit-popup-card (so to say). I guess my feedback is a bit confusing, since roughtly half of the issues refer to the popup card. Sorry about that 
Hey man,
Tomorrow i wanna finish my next release which will have the supported_features as config.
I will check the gray dash so next release it will be back 
card-title is colored by theme i can make it config in card
So you wanna set the breakonmobile on every device so you get max 3 tiles? or just dont want horizontal scrolling?
and last i don’t now it works on my pc in chrome and safari and works on android. i can check ipad
this is the stuff im working on: https://github.com/DBuit/light-popup-card/issues/6
Thanks for the quick reply!
Good to hear your busy with a new version with improvements already
My idea behind a ‘breakOnNonMobile’ setting would not be to start a new row after 3 tiles, but calculate how many fit in the view, and based on that go to the next line.
The number ‘3’ works well for a phone in portrait mode, but I think its dangerous to hard-code this value.
If making it adaptive to the screen size is too difficult, an alternative could be to have the number of tiles user-configurable.
I saw now that holding the button sometimes works, sometimes not. But I don’t think it is a problem in your code, because I saw that other my tiles based on the Lovelace Button Card don’t work well with holding down either. To my experience the double-tap action is quite reliable, could it maybe be used for triggering the popup-card instead?
Do you use an iphone by any chance? And does it by any chance have 3d touch? If yes I highly recommend you to try deep-press mod.
Much better than hold_action and even double press. It always works and is pretty fast as well.
Edit: it should work with all core cards and most if not all custom-cards. You will have to add config for it though (though it is simply a single line).
Hi Jimz, I installed thedeep-press mod as you suggested. Are you sure it is compatible with the homekit-panel-card?
I tried both the global configuration (enable_unsupported: true in the ui-lovelace) as adding deep_press: true to all my lights, but I don’t see any effect. According to the docs it only works for cards having a hold_action specified, which is not used by this card.
Edit: I’m testing with iPhone 8, it does feature Haptic Touch/3D Touch AFAIK.
Hey guys
i just released new version of the homekit style card what did i add:
- Custom tile with custom tap action for example to navigate to other page
- New tile style for thermostat
- Update mini graph card style to fit better
- Combine entities (Show value of one entity on other entity tile to combine switch and sensor for example)
- Toggle group with entities (Groups can now be used because you can add custom tap_action to toggle a group)
- Style fixes
I also updated the light pop-up card
- Added capitalization on the On/Off names
- border radius can be configured
- Remove overflow hidden for scene names
- make fullscreen option which removes the popup-wrapper
- supported_featuress can be configured
- style fixes
And i also created a new pop-up card for climate entities in homekit style
it can be found here: https://github.com/DBuit/thermostat-popup-card
Screenshot:
5 Likes
I just released small fix V0.2.1
- Fix thermostat tile the round with temperature wasn’t styled correctly
- Add offIcon in configuration to set icon to be shown when the state if off
How are the scenes supposed to work? i implemented the card, but the scenes are not working for me, maybe i messed something up in the config but i am not sure
Also the slider is completly white, i do not see the nice grey bar in the slider, i tried switching themes but no luck there.
Hè,
Can you post your config and your scene yaml?
The grey bar should be back what version are you using of the code?
ah there we have an issue, i was under the assumption that the scenes would just change color, i never thought about the actual scene in the scene.yaml, back to the drawing board!
popup_cards:
light.hue_lightstrip_plus_1:
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.hue_lightstrip_plus_1
icon: mdi:led-strip
scenesInARow: 2
brightnessWidth: 150px
brightnessHeight: 400px
switchWidth: 150px
switchHeight: 400px
the button:
- template: light_button_card
type: 'custom:decluttering-card'
variables:
- entity: light.hue_lightstrip_plus_1
- name: TV
- icon: led-strip
the decluttering template:
light_button_card:
card:
aspect_ratio: '[[aspect_ratio]]'
color: '[[color]]'
entity: '[[entity]]'
hold_action:
action: '[[hold_action]]'
haptic: success
icon: 'mdi:[[icon]]'
lock: '[[lock]]'
name: '[[name]]'
show_label: '[[show_label]]'
show_last_changed: '[[show_last_changed]]'
show_state: '[[show_state]]'
size: '[[size]]'
state:
- spin: '[[spin]]'
styles:
lock:
- color: black
name:
- color: black
state:
- color: gray
value: 'on'
- styles:
card:
- opacity: 0.4
icon:
- color: gray
lock:
- color: black
name:
- color: gray
state:
- color: gray
value: 'off'
- styles:
card:
- opacity: 0.2
icon:
- color: gray
name:
- color: gray
state:
- color: gray
value: unavailable
styles:
card:
- border-radius: 12px
- '--paper-card-background-color': var(--homekit-white)
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: start
- text-align: start
- margin-right: 60px
label:
- color: gray
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
state:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
tap_action:
action: '[[tap_action]]'
type: 'custom:button-card'
default:
- size: 30%
- lock: false
- color: auto
- spin: false
- show_label: true
- show_last_changed: false
- show_state: false
- tap_action: toggle
- hold_action: more-info
- aspect_ratio: 2/1
Ok no problem.
Are you using last version of the card? Grey thumb was bugged before
Yes i am using the newest one available via HACS