@dvgs/vgesture v1.2.5

V-Gesture

//: <> (start placeholder for auto-badger)

//: <> (end placeholder for auto-badger) Typescript library which gives ability to interact with DOM elements with hand gestures via webcam.

Note: This project isn't well tested for production, and requires major browser versions to run. So I highly recommend not to use it on production.

https://github.com/dovigod/V-Gesture/assets/30416914/05e9e1f6-ccc5-47f5-9fab-afaab3bb775d

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

Documentation 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"