Custom Lovelace Card - Homekit style card

geoffrey · January 20, 2020, 9:32pm

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:

thecrane · January 20, 2020, 10:30pm

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.

thecrane · January 20, 2020, 10:31pm

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?

DBuit · January 21, 2020, 8:29am

@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!

DBuit · January 21, 2020, 8:30am

Hey man,

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

PostSven · January 21, 2020, 9:04am

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.

github.com/custom-cards/button-card

double_tap_action and hold_action break tap_action on iOS 13

opened 03:34AM - 20 Jan 20 UTC

closed 05:37AM - 20 Jan 20 UTC

saml-dev

bug

**Checklist** - [x] I updated the card to the latest version available - [x] I… cleared the cache of my browser **Describe the bug** If I have double_tap_action and tap_action set on a button, the double_tap_action is executed on both single and double taps. If I have hold_action and tap_action set on a button, single tap events seem to trigger twice. It will turn lights on and immediately off again on a single tap. Both of the above scenarios work fine in Chrome on MacOS. **Version of the card** Version: 3.1.1 **To Reproduce** This is the configuration I used: ```yaml cards: - cards: - color: auto entity: light.key_light hold_action: action: more-info icon: 'mdi:desk-lamp' name: Key Light type: 'custom:button-card' - color: auto entity: light.yeelight_lamp hold_action: action: more-info icon: 'mdi:floor-lamp' name: Living Room type: 'custom:button-card' type: horizontal-stack - cards: - entity: switch.sunroom_lamp icon: 'mdi:lamp' name: Sunroom type: 'custom:button-card' - color: auto entity: light.living_room_back_level hold_action: action: more-info icon: 'mdi:wall-sconce-flat' name: Living Room tap_action: action: toggle type: 'custom:button-card' type: horizontal-stack type: vertical-stack ``` **Screenshots** If applicable, add screenshots to help explain your problem. **Expected behavior** hold_action and double_tap_action should not interfere with tap_action. The issue only exists on iOS in the Home Assistant app. **Desktop (please complete the following information):** - Browser [e.g. chrome, safari] - Version [e.g. 22] **Smartphone (please complete the following information):** - Device: iPhone 11 Pro - OS: iOS 13.3 - Browser: Home Assistant app, latest version - Version 2019.1 **Additional context** Moving this thread here from https://github.com/home-assistant/home-assistant-polymer/issues/4419

ASNNetworks · January 21, 2020, 10:20am

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.

PostSven · January 21, 2020, 10:22am

for me reinstalling via HACS was ok.

ASNNetworks · January 21, 2020, 10:24am

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

JBS · January 21, 2020, 12:09pm

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 ?

DBuit · January 21, 2020, 2:33pm

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

flozsc · January 21, 2020, 8:02pm

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.

geoffrey · January 21, 2020, 9:06pm

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.

geoffrey · January 21, 2020, 9:33pm

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.

LKrisM · January 22, 2020, 7:24am

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

DBuit · January 22, 2020, 9:45am

Hi,

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

thecrane · January 22, 2020, 10:16am

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!

DBuit · January 22, 2020, 11:23am

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.

wrenchse · January 22, 2020, 12:05pm

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.

Craig_Poulton · January 22, 2020, 10:00pm

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.