Feedlyをものぐさに読むブックマークレットでも作ろうかと思ったのですが、こんな手の動きをしたらこうして欲しいなぁ、というイメージは湧いてもそのジェスチャを捉えるのが大変だと悩みはじめました。デフォルトでLeap Motionがみつけてくれるジェスチャは回転、スワイプ、タップだけです。
そこで調べてみたところとてもすてきなLeapTrainer.jsというライブラリを見つけましたので動かしかたを書いておきます。
ダウンロードして、
trainer-ui.html
を開くと手の形が表示されます。
Leap Motionの上で手を動かしてみると画面の手も動きます。たまに黄色くなるときがジェスチャを捉えたときです。手の動きのスピードで検出がはじまるので、OPTIONSのRecording velocityを適当にかえてておきましょう。あまり値を小さくするといらない動きを拾ってしまいますし、大きくしすぎると手をムチャクチャはやく動かさないといけなくなります。
ちょうどよい速さにできたら、左上のCREATE GESTUREをクリックして名前を入力します。CREATEでジェスチャの記録開始までのカウントダウンの開始です。
Perform the ジェスチャ名 gestureと言われたら、Leap Motionの上で手を動かしましょう。
learned!と言われたらジェスチャの設定完了です。左のジェスチャ名をクリックするとデータがJSON形式で表示されます。
これを使いたいところで読み込めば、ジェスチャの検出ができるようになります。
<!doctype html>
<html>
<body><div id="main"></div></body>
<script src="./trainer-ui/js/jquery.min.js"></script>
<script src="http://js.leapmotion.com/0.2.0/leap.min.js"></script>
<script src="./leaptrainer.js"></script>
<script>
var trainer = new LeapTrainer.Controller();
// =============↓ LeapTrainer.jsのデータを貼りつける
trainer.fromJSON('{"name":"TEST1","data":[[{"x":0.0599484...,"stroke":1}]]}');
trainer.fromJSON('{"name":"TEST2","data":[[{"x":0.1806993...,"stroke":1}]]}');
function gestureDetected(name) {
return function() {
console.log(name);
$('#main').html(name);
}
}
// ↓ジェスチャを検出したときに何をするか書く
trainer.on('TEST1', gestureDetected('TEST1'));
trainer.on('TEST2', gestureDetected('TEST2'));
</script>
</html>
0 件のコメント:
コメントを投稿