Plugins

Usage

<!-- Getting Started -->
<script src="leap.js"></script>
<script src="leap.handOpen.js"></script>
<script type="text/javascript">
  new Leap.Controller()
    .use('handOpen')
    .connect()
    .on('frame', function(frame){
      if (frame.hands[0]){
        console.log("The first hand is" + hand.open);
      }
    })
</script>

What's Happening: A plugin is included on the page, which attaches an open state to hand objects when the hand is rolled sideways.

<!-- Configuration -->
<script src="leap.js"></script>
<script src="leap.hand-open.js"></script>
<script type="text/javascript">
  var controller = new Leap.Controller()  
  controller.use('handOpen', {tipsAt: 0.6})
  controller.connect();
  controller.on('frame', function(frame){
    if (frame.hands[0]){
      console.log("The first hand is" + hand.open);
    }
  })

</script>

What's Happening: The user has configured the handOpen for this controller to open at 0.6 radians, instead of the default 0.5.

Plugin Development

// leap.hand-open.js - The structure 
Leap.plugin('handOpen', function() {
  return {
    hand: function(hand) {
      hand.open = false
    }
  };
});

Leap.plugin receives a plugin name and factory. The factory should return an object with keys for different frame objects-- frame, hand, finger, tool, or pointable. If a function is passed, it will be executed in the context of the controller for every instance of the object, witht the object itself passed in as an argument. If a hash is passed, it is expected to be a collection of methods to be added to the frame-object's prototype.

For more complex use cases, options can be passed in and stored when the factory executes.

Leap.plugin('handOpen', function(options) {
  options || (options = {});

  options.tipsAt || (options.tipsAt = 50);  
  options.maxTip || (options.maxTip = 1);  
  options.minTip || (options.minTip = 0);  

  return {
    hand: function(hand) {            
      hand.openPercent = Math.round((Math.abs(hand.roll()) - options.minTip) / (options.maxTip - options.minTip) * 100);
      if (hand.openPercent > options.tipsAt){
        hand.tipped = true;
      }
    }
  };
});

• The callback is executed in the context of the controller, once for every hand in the frame.
• Configuration and default are set up once, saving time on a per-frame basis

Generating Events

Having this of a callback be the controller allows a plugin to emit custom Leapjs events. Here, we emit an event the first time a hand opens.

// leap.hand-open.js
Leap.plugin('handOpen', function(options) {
  var aHandHasBeenOpened = false;
  options || (options = {});

  options.tipsAt || (options.tipsAt = 50);  
  options.maxTip || (options.maxTip = 1);  
  options.minTip || (options.minTip = 0);  

  return {
    hand: function(hand) {                  
      hand.openPercent = Math.round((Math.abs(hand.roll()) - options.minTip) / (options.maxTip - options.minTip) * 100);
      if (hand.openPercent > options.tipsAt){
        hand.tipped = true;
       
        // this is new
        if (!aHandHasBeenOpened){
          this.emit('handOpen', hand)
          aHandHasBeenOpened = true;
        }

      }
    }
  };
});

// And later, bind to the event..
// myApp.js
new Controller()
  .use('handOpen') //"handOpen" is the plugin name
  .on('handOpen',  //coincidentally, "handOpen" is the event name
    function(hand){ console.log('hand open event', this, arguments); }
  ).connect();