@dvgs/vgesture
Version:
Typescript library which gives ability to interact with DOM elements with hand gestures via webcam.
109 lines (78 loc) • 4.4 kB
Markdown
# V-Gesture
[//]: <> (start placeholder for auto-badger)
[](https://npmjs.org/@dvgs/vgesture)
[//]: <> (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](https://github.com/dovigod/V-Gesture/blob/main/src/utils/dom/traverse.ts)
```
// 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](https://dovigod.github.io/V-Gesture/) created by _[Typedocs](https://typedoc.org/)_
## Creating gesture
VGesture provides [plugin](https://github.com/dovigod/V-Gesture/blob/main/src/Plugins/Plugin.ts) and [gesture](https://github.com/dovigod/V-Gesture/blob/main/src/Gestures/Gesture.ts) interface to easily create and use gesture defined by yourself.
see an [example](https://github.com/dovigod/V-Gesture/blob/main/examples/createGesture)
## 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] |