Deep Press Mod for Lovelace

This is not really a card, it adds deep press functionality to already existing cards in Home Assistant Lovelace UI. It can be used to mimic an iOS interface.

Install

First of all, card-tools is required.

HACS

1. Add https://github.com/roflcoopter/deep-press as a custom repository.

2. Add a reference to deep-press.js inside your ui-lovelace.yaml or through the raw config editor interface.

   resources:
     - url: /community_plugin/deep-press/deep-press.js
       type: module
   

Manual install

1. Download and copy deep-press.js from the latest release into your config/www directory.

2. Add a reference to deep-press.js inside your ui-lovelace.yaml or through the raw config editor interface.

   resources:
     - url: /local/deep-press.js
       type: module
   

Usage

This is not actually a new card. It works by changing how other cards work. It looks for any card which has deep_press: true in it's config. If hold_action is in the target cards config, those options are used for the deep press(3D touch). When you start to press on a 3D touch enabled device it will start to blur out the view. Once you pressed deep enough the cards hold_action will trigger.

Example usage

The config used for the demonstration above:

- type: entity-button
  entity: light.kokslampa
  name: Entity Button
  deep_press: true
- type: custom:button-card
  entity: light.vitrinskap
  name: Custom button card
  deep_press: true
  hold_action:
    action: more-info

Configuration options

You can add global options to deep_press at the root of your lovelace config.

Example Configuration

resources:
  - url: /local/deep-press.js
    type: module

deep_press:
  enable_unsupported: true

views:
  ...

Unsupported devices

deep_press will fall back to use hold time just as a regular tap-action on devices that does not support force-touch. Note: Some devices dont work well with the fall-back method. This is a problem with the underlying library unfortunately.

Notes

This is based a lot on card-mod and it uses the same technique to alter existing cards. The library used to enable deep pressing is Pressure.js. custom-card-helpers is used to handle clicks. README is based on the layout from simple-weather-card.

License

This project is under the MIT license.