Custom Lovelace Card - Homekit style card

The popup is working when I create it without the homekit-card:

- entity: light.kitchen_right_cabinet_light
    type: custom:light-popup-card

But when I use it in combination with the homekit-card, the popup shows no button:

02

Really appreciate your responses, thanks!

Re: console errors, no - nothing in either Chrome or even on the Home Assistant box command line. In the javascript console it just says:


custom-header.js:145   CUSTOM-HEADER    Version 1.2.1  
button-card.js:1431   BUTTON-CARD   Version 3.1.1 
card-tools.js:1 CARD-TOOLS 2 IS INSTALLED  DeviceID: xxxxxxx-xxxxxxx
simple-thermostat.js:1 simple-thermostat: 0.33.0

Any other ideas? I’ve even tried on a brand new machine and a different user, but to no avail.

Oh and none of the buttons work - not the input_booleans or the lights.

I don’t know if this helps (and it is taxing my out-of-date javascript skills), but when I use the Chrome dev tools to inspect one of the buttons, the following Event Listeners are listed:

  • action : homekit-button.button (parts.js; e.this.handleEvent(e))
  • click: html (gestures.js), body (template-stamp.js), app-drawer-layout (template-stamp.js), homekit-button.button (long-press-directive.ts)

What I can’t see is any reference to handleClick which I think is your function for handling things?

Or am I overthinking it? :slight_smile:

@thecrane @teqqy i got some problems on my ipad right now altough nothing changed in the tap / hold actions i am working on update with a better way to trigger this i hope!

Hey man,

Can you share your configuration and check developer console there i probably some error there and with that i can help you!

I have the same issue (on IOS) but i am not using your card, perhaps it has to do with custom-button-card…

If you hold it a little bit longer it works, i have not uet figured it out

It looks like switch buttons are ok, but light buttons are not…

Update: it was fixed in an update from the custom-buttom-card.

Yes, I wrote that post and got the solution very fast. The dev updated button card and fixed it twice, but somehow HACS wasn’t presenting that. So I manually updated the .js file (and removed the .gz file). That did the trick.

for me reinstalling via HACS was ok.

Yeah, that bug was fixed later as well fortunately. But though mentioning it in case someone still encounters the problem :slight_smile:

1 Like

Great project! Is it possible to change the font color of the text in the rules part of this example https://github.com/DBuit/Homekit-panel-card#example-full-configuration-with-columns ?

Hi @JBS that is not possible atm but will add that!

1 Like

I ran into the same issue and found the documentation to have a typo. It says:

            popup:
              type: custom:custom-light-popup-card

However, the card’s name is:

            popup:
              type: custom:light-popup-card

This might be your issue too.

1 Like

I saw that as well, but have the correct configuration.

Another attempt I tried already was excluding all custom cards from Lovelace and just have two entities in the homekit-card, but the issue remains.

I’ll dig a bit deeper and try to provide the info Daan requested.

Lovelace is set in YAML mode and the file that contains the view is included in ui-lovelace.yaml as follows:

views:
  - !include lovelace/views/lab.yaml
  ...

The file lab.yaml contans the following homekit-card configuration:

id: lab
title: Lab
icon: mdi:test-tube
panel: true
cards:
  - type: custom:homekit-card
    entities:
      - title: Gelijkvloers
        entities:
          - entity: light.kitchen_right_cabinet_light
            popup:
              type: custom:light-popup-card
          - entity: light.living_room_sofa_lighting
            popup:
              type: custom:light-popup-card
          - entity: climate.living_room_climate
            popup:
              type: custom:thermostat-popup-card

To have a look if the issue also happens with a climate entity, I tried the thermostat-popup-card as well.

In the developer console I see the following error when I long press on the buttons in a browser on my laptop:

hold
thermostat-popup-card.js:160 Uncaught (in promise) TypeError: Cannot read property 'states' of undefined
    at HTMLElement.render (thermostat-popup-card.js:160)
    at HTMLElement.update (thermostat-popup-card.js:146)
    at HTMLElement.performUpdate (thermostat-popup-card.js:121)
    at HTMLElement._enqueueUpdate (thermostat-popup-card.js:121)

It is almost exactly the same as with light entities:

hold
light-popup-card.js:159 Uncaught (in promise) TypeError: Cannot read property 'states' of undefined
    at HTMLElement.render (light-popup-card.js:159)
    at HTMLElement.update (light-popup-card.js:159)
    at HTMLElement.performUpdate (light-popup-card.js:134)
    at HTMLElement._enqueueUpdate (light-popup-card.js:134)

I hope this helps you in debugging what my cause this issue. Let me know if I can be of any further help.

1 Like

Hi @DBuit,

thanks for the great work.

I just playing around with your cards and figured out a small problem on iPhone/iPad. I created a view with 3 rows and as you can see, the 3rd tile on the first row is displayed a bit higher then the other. In Chrome and Firefox on my Windows PC it looks fine.

title: "Homekit"
icon: mdi:home-automation
path: "homekit"
panel: true
cards:
  - type: "custom:homekit-card"
    home: false
    titleColor: "#FFFFFF"
    statePositionTop: false
    entities:
      - title: "Klima"
        entities:
          - card: custom:mini-graph-card
            noPadding: true
            cardOptions:
              entities:
                - entity: sensor.xxx_current_humidity
                  name: "Luftfeuchtigkeit"
              hold_action:
                action: none
              tap_action:
                action: none
          - card: custom:mini-graph-card
            noPadding: true
            cardOptions:
              entities:
                - entity: sensor.xxx_current_temperature
                  name: "Temperatur"
              hold_action:
                action: none
              tap_action:
                action: none
          - entity: climate.xxx
            name: "Thermostat"
            popup:
              type: custom:thermostat-popup-card

Any advice how to fix this?

Best regards
Kris

Hi,

Thanks for mentioning it! I have the same on my iPad havent found the problem het but Will fix it soon i hope :slight_smile:

Really strange. I still can’t get this working.

I’ve even removed all the other cards and modules and just have the single page with homekit-cards on it. Clicking or tapping does nothing. Different browsers, different devices. Reinstalled the module. I’m really stuck!

Hi @thecrane,

That is really strange could you share your full lovelace configuration?

Just for everyone who is having problems with clicking on the tiles i’m building new version where i rewritten this stuff for tap, double tap and longpress which should work better on all devices.

I am seeing the same behaviour and have the same errors in the logs, so it’s not just on your system.
Besides that, @DBuit I can stress enough how fantastic this card is.

1 Like

Does anyone have any good suggestions for showing the value of a sensor? Ideally I’d like the value (in this case temperature) to show as large text in the card instead of the default small text on the bottom.