JSHG provides the following functions for you to integrate it with your applications:

1. JSHG.init()
Description: This function must be called before running JSHG. It initializes all necessary components, variables for JSHG and creates a secondary thread to detect hand gestures from the frames of web camera.
Parameters: It requires a javascript object as a parameter. That object contains following properties:

Name	Type	Required	Description
actionCallback	function	yes	the function JSHG will call to pass a HandGesture object detected from web camera frames. More details about the HandGesture object can be found at here.
learnCallback	function	no	the function JSHG will call when it finishes the learning process. No argument is passed to this function.
learnDivId	string	no	the id of a <div> on DOM where you want JSHG to show web camera video to learn skin color from users.
gestureDivId	string	no	the id of a <div> on DOM where you want JSHG to show the gesture images.
settings	Object	no	you can customize JSHG by passing an object to this parameter. The available options are mentioned at here.
workerConfig	Object	no	This parameter should be used by advanced users. If you create your own worker to detect hand gestures, you can pass configs to the worker by this parameter. JSHG uses JSCV library by default. Only one property is available. It is "parallelMode", accepts "true" or "false".

Example

<div id="gestureShownHere"></div>
<script>
var actionMapper = function(gesture) {
    if (gesture.isLeft) 
        console.log("Hey, your hand is on the left side");
    ...
}
JSHG.init({
    "actionCallback": actionMapper, 
    "learnDivId": "gestureShownHere",
    "gestureDivId": "gestureShownHere",
    "settings": {
        "cameraWidth": 500, 
        "cameraHeight": 400, 
        "gestureDisplayWidth": 100, 
        "gestureDisplayHeight": 80
    },
});
</script>

2. JSHG.run()
Description: this function is called to start JSHG. It starts reading the web camera frame and process the image data.
Precondition: JSHG.init() must be called before calling this function.

3. JSHG.learnSkinColor()
Description: This function is to start the learning process. After the learning process, JSHG.run() is called automatically and the learned colors are saved into localStorage.
Precondition: JSHG.init() must be called before calling this function.

4. JSHG.stop()
Description: This function is to stop JSHG. It does not release any resources. It just pauses the camera video and remain the status of KSHG
Precondition: JSHG.run() or JSHG.learnSkinColor() must be called before calling this function.

5. JSHG.delete()
Description: This function releases all resources. After calling this function, JSHG.init() must be called before JSHG can be used.

6. JSHG.isRunning()
Description: it returns true if JSHG is running; otherwise, returns false.

JSHG pass a HandGesture object to the "actionCallback" function when calling it. The attributes and methods of HandGesture class are available at below

Name	Type	Description
isLeft	boolean	It is true when the position of hand is on the left side of bounding line.
isRight	boolean	It is true when the position of hand is on the right side of bounding line.
isUp	boolean	It is true when the position of hand is above the bounding line.
isDown	boolean	It is true when the position of hand is below the bounding line.
nFingers	number	the number of fingers JSHG detected.
handPos	[number, number]	the position of hand
equals(other)	function	return true if two HandGesture objects have the same attributes.
isSameRelativePos(other)	function	return true if two HandGesture objects have the same isLeft, isRight, isUp, isDown values.
isSameAbsolutePos(other)	function	return true if two HandGesture objects have the same handPos value.
isSameNFingers(other)	function	return true if two HandGesture objects have the same nFingers value.

User can customize JSHG by passing an object to JSHG.init(). The following options are available:

Name	Type	Description
cameraWidth	number	the width of web carema frame. This number affects the performance of JSHG. If it is big, it may detect hand gesture more accurately but JSHG takes more time to process a frame. It is good to keep it at the default value if you do not have computer vision background.
cameraHeight	number	the height of web carema frame. This number affects the performance of JSHG. If it is big, it may detect hand gesture more accurately but JSHG takes more time to process a frame. It is good to keep it at the default value if you do not have computer vision background.
gestureDisplayWidth	number	the width of gesture output frame. It should be smaller than cameraWidth.
gestureDisplayHeight	number	the width of gesture output frame. It should be smaller than cameraHeight.
actionRate	number	this number tells JSHG how many times it should call actionCallback function per second. Set it -1 if you want JSHG to call actionCallback function whenever it finishs processing a frame.
learningCountDown	number	How many seconds JSHG should wait for users in the learning process.
learningPoints	2D array	List of points where do you want to get the skin colors. It is 2D array of pixel points (col, row), for example [[100,120], [130,200]].
skinColors	2D array	If you have the skin colors in HSV space, you can pass them to here. For example, [[200, 0.7, 0.5], [280, 1.1, 0.9]]
colorLearningPoints	string	the color of points which are shown on the screen to get the skin color during the learning process.
colorHandPos	string	the color of point representing the position of hand on the gesture output frame.
colorFingerPos	string	the color of points representing the position of fingers on the gesture output frame.
colorBoundingLines	string	There are four dot lines on the gesture output to show the left, right, top, down areas. The color for these lines can be set at here.
workerFilePath	string	If you want to create your own worker to track hand, this is the place your put your file path.