Blog | Phodal - A Growth Engineerhttp://www.phodal.com/blog/2015-11-28T11:16:07.498856+00:00BlogLeap Motion JavaScript开发 手势控制基础篇2015-11-28T11:02:16+00:002015-11-28T11:16:07.498856+00:00Phodal Huanghttp://www.phodal.com/blog/author/root/http://www.phodal.com/blog/leap-motion-gestures-example/在上篇《[Node.js Leap Motion 开启AR的小窗
](https://www.phodal.com/blog/leap-motion-nodejs-leapjs-hello-world/)》中,我们介绍了如何写一个Leap Motion的Hello World。
这一篇,让我们来玩玩简单的手势控制。
##Leap Motion JavaScript手势控制
这次,我们需要在起Server的时候,允许手势控制:
```javascript
var leapjs = require('leapjs'),
controller = new leapjs.Controller({
enableGestures: true,
frameEventName: 'animationFrame'
});
```
然后,就是客户端代码。
这时,我们的客户端将通过``ws://127.0.0.1:6437/v6.json``来获取一些相关的数据,如下是一个手势时返回的数据:
```
[
{
"currentFrameRate": 115.121,
"devices": [],
"gestures": [
{
"direction": [
0.043004399999999998,
0.99689099999999997,
-0.066029199999999996
],
"duration": 0,
"handIds": [
646
],
"id": 7,
"pointableIds": [
6461
],
"position": [
-33.822299999999998,
196.53899999999999,
-100.524
],
"speed": 223.33099999999999,
"startPosition": [
-39.386699999999998,
67.549899999999994,
-91.980800000000002
],
"state": "start",
"type": "swipe"
}
]
...
]
```
通过判断数据中的``gesture.type``,我们可以判断这是一个Swipe(滑动)手势。
如下是一个circle类似:
```javascript
"gestures": [
{
"center": [
-41.580500000000001,
124.26600000000001,
-15.910399999999999
],
"duration": 0,
"handIds": [
645
],
"id": 11,
"normal": [
0.75557799999999997,
-0.176064,
0.63095400000000001
],
"pointableIds": [
6450
],
"progress": 0.78971100000000005,
"radius": 36.578299999999999,
"state": "start",
"type": "circle"
}
],
```
我们只需要通过判断gesture.direction的值就可以判断是往哪个方面,代码如下:
```javascript
var isHorizontal = Math.abs(gesture.direction[0]) > Math.abs(gesture.direction[1]);
//Classify as right-left or up-down
if (isHorizontal) {
if (gesture.direction[0] > 0) {
swipeDirection = "right";
} else {
swipeDirection = "left";
}
} else { //vertical
if (gesture.direction[1] > 0) {
swipeDirection = "up";
} else {
swipeDirection = "down";
}
}
```
##Leap Motion手势控制
So,我们可以判断下手势的类似:
```javascript
Leap.loop(function (frame) {
if (frame.valid && frame.gestures.length > 0) {
frame.gestures.forEach(function (gesture) {
switch (gesture.type) {
case "circle":
console.log("Circle Gesture");
break;
case "keyTap":
console.log("Key Tap Gesture");
break;
case "screenTap":
console.log("Screen Tap Gesture");
break;
case "swipe":
console.log("Swipe");
handleSwipe(gesture);
break;
}
});
}
```
随后,依据手势的类似来判断方向,如:
```javascript
var handleSwipe = function (gesture) {
var swipeDirection;
//Classify swipe as either horizontal or vertical
var isHorizontal = Math.abs(gesture.direction[0]) > Math.abs(gesture.direction[1]);
//Classify as right-left or up-down
if (isHorizontal) {
if (gesture.direction[0] > 0) {
swipeDirection = "right";
} else {
swipeDirection = "left";
}
} else { //vertical
if (gesture.direction[1] > 0) {
swipeDirection = "up";
} else {
swipeDirection = "down";
}
}
console.log(swipeDirection);
window.swipeDirection = swipeDirection;
return swipeDirection;
};
```
等我们完成了更多的连接和判断,我们就可以完成与Oculus的集成。Node.js Leap Motion Hello World——开启AR的小窗2015-11-28T10:33:14+00:002015-11-28T11:04:09.588575+00:00Phodal Huanghttp://www.phodal.com/blog/author/root/http://www.phodal.com/blog/leap-motion-nodejs-leapjs-hello-world/Leap Motion的官方已经有一个名为LeapJS的库,但是官方没有做好一个Node.js的Demo,有的都是Client Side的一些示例。
在最开始的时候给我造成了极大的困惑,我以为启动Leap Motion的应用就可以直接运行官方的Demo——在这个应用里会运行WebSocket的Server。
##Leap Motion Node.js 服务端
这时候,我们需要一个简单的服务端代码来启动这个WebSocket Server。按照官方的node包,则是**setupConnectionEvents**。
首先,我们需要先初始化一个controller:
```javascript
var leapjs = require('leapjs'),
controller = new leapjs.Controller({
frameEventName: 'animationFrame'
});
```
然后就是在启动和断开的时候打个Log
```javascript
controller.on('connect', function (data) {
console.log("Successfully connected.");
});
controller.on('streamingStarted', function (data) {
console.log("A Leap device has been connected.");
});
controller.on('streamingStopped', function (data) {
console.log("A Leap device has been disconnected.");
});
```
接着,就可以连接了:
```javascript
controller.connect();
```
最后,我们就可以在浏览器上访问这个WebSocket Server了。
##Leap Motion 浏览器访问
Leap Motion提供了leapjs,用于浏览器访问。如其源码所示,默认的端口是6437:
```javascript
BaseConnection.prototype.getUrl = function() {
return this.scheme + "//" + this.host + ":" + this.port + "/v" + this.opts.requestProtocolVersion + ".json";
}
BaseConnection.prototype.getScheme = function(){
return 'ws:'
}
BaseConnection.prototype.getPort = function(){
return 6437
}
```
接着,我们所需要做的就是创建一个web app。然后,先用官方的Demo:
```javascript
Leap.loop({
hand: function(hand){
console.log( hand.screenPosition() );
}
}).use('screenPosition');
```
然后,启动Server,刷新浏览器,在Leap Motion上面动动,就会有下面的结果:
```
[-65.61160000000001, 160.66859999999997, 72.7992]
[-165.05679999999995, 172.716, 83.8854]
[-222.02319999999997, 157.9176, 83.9886]
[-270.48220000000003, 164.90820000000002, 86.7462]
[-319.08939999999996, 189.69539999999995, 86.4468]
[-347.6512, 236.19600000000003, 76.0038]
[-407.668, 261.657, 72.2484]
```
现在,我们就可以连接更多的东西~~。