Lovelace: Add deep press (3D touch) to existing cards

roflcoopter · July 19, 2019, 2:52pm

This is not really a card, it adds deep press functionality (aka 3D touch) to already existing cards in Home Assistant Lovelace UI.

It can be used to mimic an iOS interface.

It works really well together with custom button-card to create an interface similar to Apple Home.
If the device doesnt support 3D tuch, such as a desktop, it will simply work the same as the regular hold_action in Lovelace except adding a blur effect.

See github for instructions, but in short you just add this mod to your ui-lovelace.yaml resources sections and add deep_press: true to any card you want it to apply to.

Notes: It is only really tested on button-card and entity-button
If you have any problems or further ideas, make a github issue.
Also, I am NOT a javascript developer so this can probably be done in a better way but its working really well so far.
The technique to apply changes to existing cards is based off of card-mod

iantrich · July 19, 2019, 3:34pm

You don’t have a link to your repo listed

roflcoopter · July 19, 2019, 3:36pm

I’m a genius… Edited OP with the link

iantrich · July 19, 2019, 3:43pm

Cool stuff

jimz011 · July 19, 2019, 9:13pm

I will test this immediately. Man if this works as I think it will, no longer will I have to fight with the long press action

roflcoopter · July 19, 2019, 9:16pm

If it doesn’t, let me know and i’ll try to improve it!

jimz011 · July 19, 2019, 10:32pm

It is working really great and it is actually better than I had expected. This is what I have been looking for for a while now (only thing left to look for is a vertical brightness slider to use with this so it will be more Homekit-esque).

Thanks a lot for sharing this, only thing I have found is that sometimes the blur will stay, another 3d touch press will eliminate the blur, but it is definitely there.
Anyways awesome work, I have this adapted throughout my setup right now and I love it.

Edit: it does something like this sometimes

Honestly it might be caused by the popup card, but I will try out some more.

Edit 2: nope, does is normal cards too.

roflcoopter · July 19, 2019, 11:06pm

Glad you like it! I am using a lot of your work with the homekit buttons in my own setup.

I see, can you be more specific about what you are doing to trigger that error?

jimz011 · July 19, 2019, 11:08pm

Nothing much really, I just press it a few times in a row. Doesn’t seem very prominent, but it does it sometimes after repeatedly trying to 3d touch the button (I don’t think this will happen on normal use, but it might bug out sometimes). It looks like it is hanging on the blur, only way to fix it is either a reload or another 3d touch on a button. It does go away on conditional cards when the condition changes though.

roflcoopter · July 19, 2019, 11:27pm

Hmm i can not reproduce.
I pushed a commit which should remove the blur on every touchend or mouseup event.
Can you try it and see if it works better?

jimz011 · July 19, 2019, 11:33pm

Will try it, walking the dog right now. Can I update via HACS or would I need to do it manually?

roflcoopter · July 19, 2019, 11:34pm

You can do it via HACS

jimz011 · July 19, 2019, 11:50pm

I can’t seem to reproduce it anymore now, I think the update fixed it. Will test it some more, but for now it works great.

Thank you, you made my wife extremely happy as this was the one thing she hated about HA vs Homekit (all other stuff she prefers HA over Homekit a million times, but the long press for brightness pff). So thanks a lot!

roflcoopter · July 20, 2019, 12:24am

Great to hear, my pleasure!
Do you happen to be on the iOS 13 beta btw?

jimz011 · July 20, 2019, 12:58am

Yes, dev 4.

roflcoopter · August 12, 2019, 11:21am

New release 1.1.0.b1
This beta version aims to fix issues where a deep press would activate buttons or other interactive items on a popup-card, for example a color-wheel.
Testers appreciated

jimz011 · August 12, 2019, 3:05pm

Thank you very much again!

thmry · August 13, 2019, 9:40am

Thanks a lot for sharing this! Works really nicely in combination with the Button Card and the hold-action!

I’ve ran into an issue though. I also use it in combination with Browser Mod. I actually want to open a popup window showing the Light Entity Card which works fine by itself, but in combination with deep_press: true it doesn’t work. Changing the Light Entity Card to something else (e.g. not a custom card) also results in this error.

This is the basic (relevant) configuration (I’m actually also using the Decluttering Card, but I don’t think that is relevant to the issue, so I removed it from the below configuration):

type: custom:button-card
entity: light.living_room
hold_action:
  haptic: heavy
  action: call-service
  service: browser_mod.command
  service_data:
    command: popup
    title: Living Room
    card:
      type: custom:light-entity-card
      entity: light.living_room
    deviceID:
      - this

I get the following error when I add deep_press: true to the above configuration:

Uncaught TypeError: Cannot read property 'callService' of null
    at ee (deep-press.js:1)
    at HTMLDivElement.startDeepPress (deep-press.js:1)
    at i.value (deep-press.js:1)
    at i.value (deep-press.js:1)
    at i.value (deep-press.js:1)
    at i.value (deep-press.js:1)

Just for completeness sake, I added it in here:

type: custom:button-card
entity: light.living_room
deep_press: true
hold_action:
  ...

@roflcoopter Is this an issue with your mod or should this be reported in a Browser Mod related issue? Also, if you rather want me to create a Github issue, I could do that as well.

Edit: I am running version 1.1.0.b1 through HACS btw.

roflcoopter · August 13, 2019, 10:35am

Thanks for the report!
I’m pretty sure the issue lies in this mod. I’ll have a look during the day.

If you have the time I would appreciate if you could make an issue in github, easier to track that way.

thmry · August 14, 2019, 6:41am

Just looked into this a little bit. It indeed doesn’t seem to be a Browser Mod issue.

Removing the Browser Mod functionality and simply using a simple service call (shown below) results in the same TypeError (Uncaught TypeError: Cannot read property 'callService' of null).

type: custom:button-card
entity: light.living_room
deep_press: true
hold_action:
  haptic: heavy
  action: call-service
  service: script.turn_on
  service_data:
    entity_id: script.example

The error shown seems to be triggered in the custom-cards-helper package you included. For some reason the hass object here is null. I have no clue why though.

Edit:

Actually… I do know why its null, you’ve set it to null here. @roflcoopter Is there any reason as to why you’ve done that?