Custom Lovelace Card - Homekit style card

Share your Projects! Dashboards & Frontend
,
82

I installed using HACS, ok I will go have a look now and come back to you. Thanks again!

I have more questions for moving my AC control into this so it will pop up the controls. Hope I can do that.

83

Ah changing this might be harder than I thought, even though I changed it and restarted it is picking up 9 still. Cleared cache etcā€¦ Something special I need to do?

84

Maybe in your lovelace-ui.yaml you got this:

resources:
  url: /community_plugin/light-popup-card/light-popup-card.js
  type: module

add a version behind the js to make sure cache is not the problem

resources:
  url: /community_plugin/light-popup-card/light-popup-card.js?v=0.1
  type: module
85

Iā€™m working on a custom pop-up card for climate so this will be available soon :slight_smile:

it looks like this now

35
351018Ɨ1388 92.2 KB

4 Likes
86

If I need to check something for you let me know. I believe I chose 9 for a reason. Canā€™t remember why exactly though. Probably better to make it configurable (btw I would probably make border-radius configurable as well)

87

Ok i will make it configurable in next release i also got the border radius on my list haha

88

Yeah I was thinking of border-radius as I made changes to that (and I can understand that maybe might prefer more rounded corners).
I was actually a bit surprised that you added my personal changes to the card :rofl:.

I would also consider capitalizing the state name in this card so ā€œOnā€ instead of ā€œonā€, but that might be a personal preference.

As always good work @DBuit I can continue testing your other card tonight.

89

Yes the thermostat looks great! I will watch for the release.

Regarding the icon size can I change the size? I tried to apply a style but it didnā€™t seem so change it.

90

You wanna change icon size in the popup? How did you try to change it?

91

No sorry I mean the actual tile.
- entity: light.office_2
styles:
card:
- width: 100px
- height: 100px

92

Right now there is not option to overwrite styles of the tiles

93

Ok no worries :slight_smile:

94

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 :+1:

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
95

@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>9 line. 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 BreakOnMobile setting 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!)
96

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.

image
image1125Ɨ2436 84.4 KB
image
image1125Ɨ2436 135 KB
image
image1125Ɨ2436 69.7 KB

It is in a browser mod popup with a state switch, rgb-card and an light entity card.

97

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 :wink:

98

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 :wink:
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

99

Thanks for the quick reply!
Good to hear your busy with a new version with improvements already :slight_smile:

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?

100

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).

101

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.