dougtoppin/gist:6407432

## gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LeapMotion Testing of Swipe</title>

<script src="http://js.leapmotion.com/0.2.0/leap.js"></script>

</head>
<body>

<!--
This is a simple example of using Javascript with the LeapMotion.
All that this does is to open the LeapMotion and look for a few gestures of different types.
When these are detected counters will appear and be incremented in the html
on the page.
A swipe gesture is defined as "something" moving from one side of the field
of view to the other side.  Note that individual fingers are counted so
a single finger being observed will be seen as one swipe.
A tap gesture is equivalent to poking at the screen.

The debug var can be set to 0 or non-zero and the larger the number
the increased level of debug output to the JS console if you turn on developer mode
in your browser.  I am primarily using Chrome but Safari also works for me.

This page was very helpful while working on this:
http://stackoverflow.com/questions/18018642/detecting-swipe-gesture-direction-with-leap-motion

The webpage should look something like this if you have a LeapMotion attached

Hey, you've got a LeapMotion attached, cool!
numSwipes 16, left 9, right 7, taps 2


I wanted this to be a complete and working example so if you have any suggestions on how to
improve it please let me know.

 -->

<script>
var debug=0;            // increasing level of debug output
var numSwipes=0;        // total count of swipes seen
var numSwipesLeft=0;
var numSwipesRight=0;
var numTaps=0;

var controller = new Leap.Controller({enableGestures: true});

controller.on('connect', function() {
	console.log("leapmotion:sucessful connection");
	foundLeap(); // let the user know we found it
});

controller.on('deviceConnected', function() {
	console.log("leapmotion:leap device has been connected");
});

controller.on('deviceDisconnected', function() {
	console.log("leapmotion:device disconnect");
});

// the frame callback is for every frame received from the leap
// which can be a lot of them, for USB 3 maybe 200 fps,
// do not uncomment this unless you want to get all of them,
// gesture detection and handling will continue to work without this
/*
controller.on('frame', function(frame) {
	//console.log("got frame");
	var fingerIds = {};
	var handIds = {};
	if (frame.hands == undefined) {
		var handsLength = 0
	} else {
				var handsLength = frame.hands.length;
				if ((frame.hands.length != 0) && (debug>1)) console.log("hand length " + frame.hands.length);

	}
 	if (frame.gestures.length != 0) {
		if (debug>1) console.log("gesture length " + frame.gestures.length);

		var i =0;
		frame.gestures.forEach(function(entry) {
			if (debug>1)console.log("gesture entry " + i);

			i++;
		});

	}
});
*/

// the gesture callback occurs on gesture detection by the leap controller,
// from here you decide which gestures that you want to handle
controller.on('gesture', function (gesture) {
    if (gesture.type == 'swipe') {
    	handleSwipe(gesture);
    }
    if (gesture.type == 'screenTap') {
    	handleTap(gesture);
    }

});

// this is where start using the leap (if one is detected)
controller.connect();

// this function is called when we want to handle a swipe gesture,
// we are just going to keep a few counts of what was detected
function handleSwipe(swipe) {
	if (swipe.state == 'stop') {
		if (debug>0) console.log("found a swipe, " + numSwipes);
		numSwipes++;

		// the swipe object will tell us which direction the swipe was in
		if (swipe.direction[0] > 0) {
			numSwipesRight++;
		} else {
			numSwipesLeft++;
		}
	}

	// update the webpage with out current count data
	refreshCounts();
}

// taps (poke at the screen) seem a little more difficult to detect correctly,
// i am regularly either missing the tap or getting both a swipe and a tap detection
// (but at least it is doing something)
function handleTap(tap) {
		if (debug>0) console.log("found a tap, " + numTaps);
		numTaps++;

	// update the webpage with out current count data
	refreshCounts();

}

</script>

</body>

<!-- this div is just to announce to the user that we detected a leap device -->
<div id="foundLeap">No LeapMotion detected</div>
<!-- this div will be replaced with counter data once we start receiving it -->
<div id="counters">If you have an attached LeapMotion then counters should be appearing here</div>

<script>
function foundLeap() {
	  var element=document.getElementById("foundLeap");
	    element.innerHTML="Hey, you've got a LeapMotion attached, cool! Try swiping left and right";
}


function refreshCounts() {
    var element=document.getElementById("counters");
    element.innerHTML="numSwipes " + numSwipes + ", left " + numSwipesLeft + ", right " + numSwipesRight + ", taps " + numTaps;
}
</script>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>LeapMotion Testing of Swipe</title>

	<script src="http://js.leapmotion.com/0.2.0/leap.js"></script>

	</head>
	<body>

	<!--
	This is a simple example of using Javascript with the LeapMotion.
	All that this does is to open the LeapMotion and look for a few gestures of different types.
	When these are detected counters will appear and be incremented in the html
	on the page.
	A swipe gesture is defined as "something" moving from one side of the field
	of view to the other side. Note that individual fingers are counted so
	a single finger being observed will be seen as one swipe.
	A tap gesture is equivalent to poking at the screen.

	The debug var can be set to 0 or non-zero and the larger the number
	the increased level of debug output to the JS console if you turn on developer mode
	in your browser. I am primarily using Chrome but Safari also works for me.

	This page was very helpful while working on this:
	http://stackoverflow.com/questions/18018642/detecting-swipe-gesture-direction-with-leap-motion

	The webpage should look something like this if you have a LeapMotion attached

	Hey, you've got a LeapMotion attached, cool!
	numSwipes 16, left 9, right 7, taps 2


	I wanted this to be a complete and working example so if you have any suggestions on how to
	improve it please let me know.

	-->

	<script>
	var debug=0; // increasing level of debug output
	var numSwipes=0; // total count of swipes seen
	var numSwipesLeft=0;
	var numSwipesRight=0;
	var numTaps=0;

	var controller = new Leap.Controller({enableGestures: true});

	controller.on('connect', function() {
	console.log("leapmotion:sucessful connection");
	foundLeap(); // let the user know we found it
	});

	controller.on('deviceConnected', function() {
	console.log("leapmotion:leap device has been connected");
	});

	controller.on('deviceDisconnected', function() {
	console.log("leapmotion:device disconnect");
	});

	// the frame callback is for every frame received from the leap
	// which can be a lot of them, for USB 3 maybe 200 fps,
	// do not uncomment this unless you want to get all of them,
	// gesture detection and handling will continue to work without this
	/*
	controller.on('frame', function(frame) {
	//console.log("got frame");
	var fingerIds = {};
	var handIds = {};
	if (frame.hands == undefined) {
	var handsLength = 0
	} else {
	var handsLength = frame.hands.length;
	if ((frame.hands.length != 0) && (debug>1)) console.log("hand length " + frame.hands.length);

	}
	if (frame.gestures.length != 0) {
	if (debug>1) console.log("gesture length " + frame.gestures.length);

	var i =0;
	frame.gestures.forEach(function(entry) {
	if (debug>1)console.log("gesture entry " + i);

	i++;
	});

	}
	});
	*/

	// the gesture callback occurs on gesture detection by the leap controller,
	// from here you decide which gestures that you want to handle
	controller.on('gesture', function (gesture) {
	if (gesture.type == 'swipe') {
	handleSwipe(gesture);
	}
	if (gesture.type == 'screenTap') {
	handleTap(gesture);
	}

	});

	// this is where start using the leap (if one is detected)
	controller.connect();

	// this function is called when we want to handle a swipe gesture,
	// we are just going to keep a few counts of what was detected
	function handleSwipe(swipe) {
	if (swipe.state == 'stop') {
	if (debug>0) console.log("found a swipe, " + numSwipes);
	numSwipes++;

	// the swipe object will tell us which direction the swipe was in
	if (swipe.direction[0] > 0) {
	numSwipesRight++;
	} else {
	numSwipesLeft++;
	}
	}

	// update the webpage with out current count data
	refreshCounts();
	}

	// taps (poke at the screen) seem a little more difficult to detect correctly,
	// i am regularly either missing the tap or getting both a swipe and a tap detection
	// (but at least it is doing something)
	function handleTap(tap) {
	if (debug>0) console.log("found a tap, " + numTaps);
	numTaps++;

	// update the webpage with out current count data
	refreshCounts();

	}

	</script>

	</body>

	<!-- this div is just to announce to the user that we detected a leap device -->
	<div id="foundLeap">No LeapMotion detected</div>
	<!-- this div will be replaced with counter data once we start receiving it -->
	<div id="counters">If you have an attached LeapMotion then counters should be appearing here</div>

	<script>
	function foundLeap() {
	var element=document.getElementById("foundLeap");
	element.innerHTML="Hey, you've got a LeapMotion attached, cool! Try swiping left and right";
	}



	function refreshCounts() {
	var element=document.getElementById("counters");
	element.innerHTML="numSwipes " + numSwipes + ", left " + numSwipesLeft + ", right " + numSwipesRight + ", taps " + numTaps;
	}
	</script>

	</html>