V-Gesture

Typescript library which gives ability to interact with DOM elements with hand gestures via webcam.

Check out live demo now!

Installation

npm install @dvgs/vgesture

Usage

Create "gesturable element"

Most of Elements with vgestureable attribute will be assumed as "gesturable" exceptions: here

// index.html
...
<div vgesturable onclick="..."> This is gesture interactable element</div>
<div vgesturable onclick="..."> This is gesture interactable element</div>
...

Initialize VGesture

import { VGesture } from '@dvgs/vgesture

const vGesture = new VGesture()
await vGesture.initialize()

Register Gesture

import { ClickGesturePlugin } from '@dvgs/vgesture/plugins

vGesture.register(new ClickGesturePlugin())

Run

vGesture.startDetection()

Documentation

Docs created by Typedocs

Creating gesture

VGesture provides plugin and gesture interface to easily create and use gesture defined by yourself.

see an example

Requestable Operations / variables

Note) When requesting function operation, parameters should be ordered alphabetical.

const type = 'function' ? 'func' : 'variable' : 'var' : '';
let schema = `${type}::${name}`

//ex) requesting variable
"var::indexTip"

//ex) requesting function
// wrong :: "func::get2FingerDistance-indexTip-indexDip"
// correct :: "func::get2FingerDistance-indexDip-indexTip"

Name	Type	Description
get2FingerDistance	function	get distance between provided finger tip parameter
indexTip	variable	index tip coordinate [index: 9]
thumbTip	variable	thumb tip coordinate [index: 4]
pinkyTip	variable	pinky tip coordinate [index: 20]
ringTip	variable	ring tip coordinate [index: 16]
middleTip	variable	middle tip coordinate [index: 12]
thumbIp	variable	thumbIp coordinate [index: 3]
thumbMcp	variable	thumbMcp coordinate [index: 2]
thumbCmc	variable	thumbCmc coordinate [index: 1]
indexMcp	variable	indexMcp coordinate [index: 5]
indexPip	variable	indexPip coordinate [index: 6]
indexDip	variable	indexDip coordinate [index: 7]
middleMcp	variable	middleMcp coordinate [index: 9]
middlePip	variable	middlePip coordinate [index: 10]
middleDip	variable	middleDip coordinate [index: 11]
ringMcp	variable	ringMcp coordinate [index: 13]
ringPip	variable	ringPip coordinate [index: 14]
ringDip	variable	ringDip coordinate [index: 15]
pinkyMcp	variable	pinkyMcp coordinate [index: 17]
pinkyPip	variable	pinkyPip coordinate [index: 18]
pinkyDip	variable	pinkyDip coordinate [index: 19]