Contents
Target
Leap Motion is a gesture detector especially hands.I’ll try to use Leap Motion with Javascript.
Following source code is basically same as this web site.
Environment
- OS
- Linux version 3.2.0-64-generic (buildd@kissel) (gcc version 4.6.3 (Ubuntu/Linaro 4.6.3-1ubuntu5) ) #97-Ubuntu SMP Wed Jun 4 22:04:21 UTC 2014
- LeapMotion
- LM-010
- leap.js
- 0.3.0
Develop
After install Leap Motion Controller(Please check following step), we can get Leap Motion’s data with WebSocket(ws://localhost:6437).This web site shows how to check the data with Google Chrome.
leap.js(http://js.leapmotion.com/0.3.0/leap.js) allows us to easy to get gesture data like event driven style.
Prepare libraries
At first, you should install Leap Motion Controller.Playing sample program and adjust Leap Motion device are recommended after install it.
Source Code
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>LeapMotionSample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://js.leapmotion.com/0.3.0/leap.js"></script>
<script src="http://sample.com/javascript/main.js"></script>
<style>
#pictures img {
display: inline-block;
}
div#pictures {
white-space: nowrap;
overflow-x: scroll;
margin-top: 200px;
}
</style>
</head>
<body>
<div id="pictures">
<img src="http://sample.com/images/1.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/2.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/3.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/4.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/5.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/6.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/7.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/8.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/9.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/10.jpg" style="width:300px; height:180px" />
</div>
</body>
</html>
JS
$(document).ready(function() {
var controller = new Leap.Controller({enableGestures: true});
var position = 0;
controller.gesture('swipe').stop(function(g) {
var stopGesture = g.gestures[g.gestures.length - 1];
var startX = stopGesture.startPosition[0];
var stopX = stopGesture.position[0];
position += (startX - stopX) * 2;
$("#pictures").animate({scrollLeft: position + "px"}, "fast");
});
controller.connect();
});
Demo
In following demo, I swiping my hands on Leap Motion.
No comments yet.