Use your LeapMotion device in your AngularJS Application. Modify your Scopes via Gestures. Easy to use. Just in development. Feel free to contribute or create feature requests ;)
bower install angular-leap
<div ng-controller="ExampleCtrl">
<div leap-swipe-left="a=a+1">Swipe Left => +1</div>
<div leap-swipe-right="a=a+1">Swipe Left => +1</div>
<div leap-swipe-up="a=a+10">Swipe Up => +10</div>
<div leap-swipe-down="a=a-10">Swipe Down => -10</div>
<div leap-swipe-forward="a=a*a">Swipe Forward => a^2</div>
<div leap-swipe-backward="a=a/2">Swipe Backward => a/2</div>
<div leap-circle="addByCircleSze($gesture)">Circle => +%CicleSize%</div>
<div leap-circle-clockwise="addByCircleSze($gesture)">Circle clockwise => +%CicleSize%</div>
<div leap-circle-counter-clockwise="addByCircleSze($gesture)">Circle counter-clockwise => +%CicleSize%</div>
<div leap-screentap="sqrt($gesture)">ScreenTap => sqrt</div>
<div leap-keytap="pow2($gesture)">Swipe Down => power^%Hands%</div>
<!-- Bind frame values to the scope (default 50ms) -->
<div leap-bind="{hands: 'hands'}" style="position:absolute;left:{{hands[0].palmPosition[0]}}px">{{hands[0].palmPosition[0]}}</div>
<!-- Bind frame values to the scope all 1000ms via attribute config -->
<div leap-bind="{hands: 'hands'}"
leap-bind-update-rate="1000"
style="position:absolute;left:{{hands[0].palmPosition[0]}}px">{{hands[0].palmPosition[0]}}</div>
<div leap-bind="{x: 'hands[0].palmPosition[0]'}"
leap-bind-update-rate="1000"
style="position:absolute;left:{{x}}px">{{x}}</div>
</div>angular.module("angular-leap-example")
.controller("ExampleCtrl", function ($scope, leap) {
$scope.a = 1;
$scope.sqrt = function($gesture){
$scope.a = Math.sqrt($scope.a);
};
$scope.pow2 = function($gesture){
$scope.a = Math.pow($scope.a,$gesture.handIds.length+1);
};
$scope.addByCircleSize = function($gesture){
$scope.a = $scope.a + $gesture.radius;
}
});angular-leap-instant.herokuapp.com
- Documentation
- Offer other events for easy usage
- Robin Böhm (@roobijn)
- Pascal Precht (@PascalPrecht)
