Lovelace: Button card

jimz011 · July 29, 2019, 9:10pm

No it doesn’t do it on my wifes iphone. I just tried it. It never does it, I have tried everything. So it seems like it really is ios 13 only

RomRider · July 29, 2019, 9:28pm

You shouldn’t have removed your post, it’s broken. It doesn’t work anymore with swipe-card or cch… I’ll need to revert some things.

krovachek · July 29, 2019, 9:32pm

I’m sure that it’s will be perfect again

DavidFW1960 · July 29, 2019, 10:37pm

So because of that bug, I almost ended up with my garage door closing on my car on the week end. I have a lock on the door switch but it did a double tap. I thought it was operator error. No harm done luckily. Thanks for the fix.

shauder · July 29, 2019, 11:43pm

I did more testing now. I spun up a simulated iOS device with xcode and I was completely unable to reproduce this bug while at the same time having it still on my device. I am using the beta xcode and iOS13 and the same device type.

Then to test my memory of not having this issue I renamed the js file and edited my resource path to the new file which was the old 1.11.1. I do not have the new issue on either the simulated device nor my device but the original issue has returned.

I then renamed the resource path back to the new one and the original issue is fixed but now I have the new issue again. This doesn’t really help the fact that you cannot reproduce it though.

Trying to build the old version from github and I get an error:

src\button-card.ts
Error: C:/Users/shanefaulkner/Desktop/button-card2/src/button-card.ts(547,9): semantic error TS2542 Index signature in type 'StyleInfo' only permits reading.

Any ideas why the old versions won’t compile now in babel?

jimz011 · July 30, 2019, 1:21am

Ok, so I have reverted to 1.11.1 and the conditional card glitch is gone (it would double tap quickly after turning on/off a button that would at the same time change the card behind it as it is conditional). I use a lot of conditional cards as they are more versatile than popup cards imo as they are just on a single view and thus scrollable.

Now the button glitch is back in this version, but the bug with conditional cards seem to work.

In your newest release the buttons work great but the conditional cards don’t.

Here is a video with 1.11.1, as you will see the light buttons will do a double tap, but the conditional cards work perfectly fine.

Here is 2.0.4, the buttons work fine here but the conditional cards wont. When pressing a button which changes the card it will press it again, in my case either opening the weather panel or the person panel.

shanem · July 30, 2019, 1:48am

Awesome look! I might try this

shauder · July 30, 2019, 2:16am

I was able to take this line in version 1.11.1: https://github.com/custom-cards/button-card/blob/efcaf7a7797465728edbd747391adb40651bb66c/dist/button-card.js#L880

And remove ‘, t.addEventListener(“mousedown”, e, { passive: !0 }), t.addEventListener(“click”, n)’ from the end leaving the semi-colon. This fixes both issues with the inability to use it on the desktop.

I cannot get the old version to build so I cannot add the if statements easily for discarding them only when iOS.

I also confirmed that the issue starts with 2.0.0

kirpat · July 30, 2019, 2:55am

Dear, I found a problem
Don’t know if anybody else is facing,
I have an entity as button card which on hold_action was working well.
But after upgrading button-card few days back, it was toggling on single tap.

iantrich · July 30, 2019, 3:09am

It’s not clear what your actual problem is. You refer to a hold action working well but then start talking about toggling with a tap…what’s the actual problem?

kirpat · July 30, 2019, 3:28am

Dear
Hold_action was not working on holding the button.
It was toggling even on single tap.
I had to add tap_action: none before hold_action to get it working.

RomRider · July 30, 2019, 5:48am

Toggle is by default for tap, unless you define tap_action’s action as none. That’s not new at all.

RomRider · July 30, 2019, 5:52am

Okay, thanks for all the testing, appreciate it!
This bug was probably introduced by those 2 lines which where added to fix another bug:

github.com

custom-cards/button-card/blob/2d1cab4b1d1f57724a11ae821704219d7996cbfd/src/long-press.ts#L109


      
            }
            if (e.stopPropagation) {
              e.stopPropagation();
            }
            e.cancelBubble = true;
            e.returnValue = false;
            return false;
          });
          
          const clickStart = (ev: Event) => {
            ev.stopPropagation();
            if (this.cooldownStart) {
              return;
            }
            this.held = false;
            let x;
            let y;
            if ((ev as TouchEvent).touches) {
              x = (ev as TouchEvent).touches[0].pageX;
              y = (ev as TouchEvent).touches[0].pageY;
            } else {

github.com

custom-cards/button-card/blob/2d1cab4b1d1f57724a11ae821704219d7996cbfd/src/long-press.ts#L139


      
                  element.dispatchEvent(new Event('ha-hold'));
                }, element.repeat);
              }
            }, this.holdTime);
          
            this.cooldownStart = true;
            window.setTimeout(() => (this.cooldownStart = false), 100);
          };
          
          const clickEnd = (ev: Event) => {
            ev.stopPropagation();
            if (
              this.cooldownEnd
              || (['touchend', 'touchcancel'].includes(ev.type)
                && this.timer === undefined)
            ) {
              if (element.isRepeating && this.repeatTimeout) {
                clearInterval(this.repeatTimeout);
                element.isRepeating = false;
              }
              return;

Would you mind deleting them from 2.0.4 and test the result on your device please?

shauder · July 30, 2019, 5:57am

I actually tried that already and didn’t have any luck. It is also in the button-card.ts so I just tried removing it there also and I still have it happen unfortunately.

RomRider · July 30, 2019, 6:22am

That is really strange… It’s the only thing which was changed regarding touch/mouse events…

Also for this to work, you’d have had to remove the node_module folder and run npm install

RomRider · July 30, 2019, 7:07am

Could you try that file please? https://www.pastiebin.com/5d3fec8d63daf

EDIT: I’ve managed to reproduce the “second clic on the target tab” when moving from one tab to another tab on my phone (android) and it’s fixed with the above version for me.

shauder · July 30, 2019, 12:31pm

I think this fixed it!

krovachek · July 30, 2019, 2:35pm

It looks like the button card doesn’t like the swiping. I can swipe the views on the “empty” area (button card color type: blank) only my Lovelace dashboard:

RomRider · July 30, 2019, 2:38pm

Thanks, that’s going to be fixed soon. I’ll release something tomorrow.
It’s all related to this and this

shauder · July 30, 2019, 3:02pm

I appreciate all the work with resolving this and the great card itself.