Перемещение DIV с Leapmotion

Я пытаюсь использовать API-интерфейс leapmotion для перемещения div на веб-сайте.Перемещение DIV с Leapmotion

Я нашел tutorial и немного изменил его, потому что он, похоже, не работал.

Это то, что я придумал до сих пор, но translation.x подходит к undefined в журнале консоли. Кто-нибудь еще испортил скачок JS API?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf8"> 
    <title></title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
    <script src="leap.js"></script> 
    </head> 
    <body> 
<script> 
var controller = new Leap.Controller({enableGestures: true}); 
var firstValidFrame = null; 

     controller.loop(function(frame) { 
     if (!firstValidFrame) firstValidFrame = frame; 
     var translation = frame.translation(firstValidFrame); 
     console.log("X:" + translation.x); 
     $('#box').css({marginLeft: translation.x}); 
     }); 
</script> 

    <div id="box" style="width: 200px; border: 1px solid #666666; padding: 10px 10px 70px 10px; display: inline-block"></div> 
    </body> 
</html>

источник

2013-07-25 Jako

Две вещи: 1. Leap.js библиотека вернулась вектор класс, который был реализован в одной точке. Таким образом, векторы являются (снова) массивами вместо объектов. Это делает его translation[0] вместо translation.x. 2. Вы должны проверить срок действия фрейма. Объекты API-интерфейса Leap Motion могут быть недействительными, что означает, что они полностью сформированные объекты, но имеют 0/идентичные свойства. Это помогает избежать множества неопределенных объектов, но имеет несколько ошибок. Перед хранением кадра попробуйте проверить !firstValidFrame && frame.valid.

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

     controller.loop(function(frame) { 
     if (!firstValidFrame && frame.valid) firstValidFrame = frame; 
     var translation = frame.translation(firstValidFrame); 
     console.log("X:" + translation[0]); 
     $('#box').css({marginLeft: translation.x}); 
     });

источник

2013-07-25 23:56:29

Спасибо, это помогло мне двигаться в правильном направлении! – Jako

ответ

Смежные вопросы