/deep-press

A JavaScript module which allows 3D touching in Lovelace for Home Assistant

Primary LanguageJavaScriptMIT LicenseMIT

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.

deep-press

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.

Name Type Requirement Description Default
enable_unsupported boolean Optional Enable on unsupported devices false
animations boolean Optional The harder you press, the smaller the div gets true

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.