プログラミング + アカデミック + 何か面白いこと

  1. Programming
  2. 141 view

[LeapMotion][Javascript]Try to use Leap Motion with Javascript

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.

20150207_leap_demo2

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.
20150207_leap_sample

Programming recent post

  1. Install sbt 1.0.0 and run sample template

  2. [Machine Learning]Created docker image includ…

  3. [Node.js]How to write batch script with Node.…

  4. [Play][Scala]Develop Request Driven Batch Usi…

  5. [OpenCV][Ruby]Auto check web page design corr…

関連記事

Comment

  1. No comments yet.

  1. No trackbacks yet.

PAGE TOP