fitbit-gestures v1.0.2

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

DoubleTap configuration

LongPress configuration

Slide configuration

Swipe configuration