Gestures for Fitbit

This library allows you to detect different gestures in Fitbit devices. Tested only on Fitbit SDK 5.0

Installation

Install the library with npm i fitbit-gestures or yarn add fitbit-gestures

Available gestures

| Gesture | Description | Examples | :---: | :--- | ---
| | Regular "click" | Buttons | | Fast double "click" | Secondary actions | | Press without release | Secondary actions | | Press and move | Drag objects | | Press move and release | Navigation

Usage

You must provide an Element or the ID of an existing element.

The selected element should have "pointer-events" set to "visible". Will work only on elements which can have this attribute, like RectElements.

<svg>
  <rect id="detectorElement" pointer-events="visible" />
</svg>

Warning

Keep in mind that only one gesture listener can be attached to each element. Attaching multiple detectors to the same element will overwrite the previous ones.

Gesture Detector

All detectors are customizable. View configuration below.

import { GestureDetector, GestureEvent } from 'fitbit-gestures';

// Get the element. You can also pass the element ID
const element = document.getElementById('detectorElement'); 

const detector = new GestureDetector(element)
    .onTap((event: GestureEvent) => {
      //Do something
    })
    .onDoubleTap((event: GestureEvent) => {
      //Do something
    })
    .onLongPress((event: GestureEvent) => {
      //Do something
    })
    .onSlide((event: GestureEvent) => {
      //Do something
    })
    .onSwipe((event: GestureEvent) => {
      //Do something
    });

Events

All detectors will return a GestureEvent in the callback function

interface GestureEvent {
  type: GestureType,
  point: Point,
  from?: Point,                   //Swipe & Slide only
  dir?: GestureDirection,         //Swipe only
  ended?: boolean                 //Slide only
}

Point

interface Point {
  x: number,
  y: number
}

Types

enum GestureType {
  Tap = 'Tap',
  DoubleTap = 'DoubleTap',
  LongPress = 'LongPress',
  Slide = 'Slide',
  Swipe = 'Swipe'
}

Directions (Swipe only)

enum GestureDirection {
  Up = 'Up',
  Down = 'Down',
  Left = 'Left',
  Right = 'Right',
  UpRight = 'UpRight',
  UpLeft = 'UpLeft',
  DownRight = 'DownRight',
  DownLeft = 'DownLeft',
}

Single gesture detectors

If you only need one type of gesture on an element, it will be slightly faster to use a dedicated class.

//Optional configurations
const tapConfig: TapConfig = {
  interval: 250,
  threshold: 10
}
const doubleTapConfig: DoubleTapConfig = {
  interval: 250,
  threshold: 10
}
const longPressConfig: LongPressConfig = {
  time: 300,
  threshold: 10
}
const slideConfig: SlideConfig = {
  threshold: 10
}
const swipeConfig: SwipeConfig = {
  threshold: 100
}

const tap = new TapDetector('tapElement', onGesture.bind(this), tapConfig);
const doubleTap = new DoubleTapDetector('doubleTapElement', onGesture.bind(this), doubleTapConfig);
const longPress = new LongPressDetector('longPressElement', onGesture.bind(this));
const slide = new SlideDetector('slideElement', onGesture.bind(this), slideConfig);
const swipe = new SwipeDetector('swipeElement', onGesture.bind(this), swipeConfig);

function onGesture(event: GestureEvent) {
  if(event.type === GestureType.Swipe && event.dir === GestureDirection.Down) {
    //Do something
  } else if(event.type === GestureType.Slide) {
    //Do something
  }
}

Tap configuration

| Attribute | Description | Default | | --- | :--- | --- | | interval | Maximum time (in ms) between start touching and releasing | 250ms | threshold | Maximum allowed distance (in px) between start touching and releasing | 10px

DoubleTap configuration

| Attribute | Description | Default | | --- | :--- | --- | | interval | Maximum time (in ms) between taps | 250ms | threshold | Maximum allowed distance (in px) between taps | 10px

LongPress configuration

| Attribute | Description | Default | | --- | :--- | --- | | time | Minimum time (in ms) required to trigger the event | 300ms | threshold | Max distance (in px) allowed | 10px

Slide configuration

| Attribute | Description | Default | | --- | :--- | --- | | threshold | Minimum distance (in pixels) to start recognizing | 10px

Swipe configuration

| Attribute | Description | Default | | --- | :--- | --- | | threshold | Minimum distance (in pixels) required to trigger the event | 100px