There is a saying among web developers that goes something like this: “If you’re trying to do a thing, there’s a jQuery plugin that will do it.” Sometimes, it’s two. Or three. Although they can’t do everything, there’s no doubt that their module system has saved me hundreds of hours – and hundreds of thousands or more across the web collectively. Drawing from this, we’re excited to release a badass plugin system for LeapJS.

The way it works is pretty simple: the plugin developer writes something cool, and then it can be included in any Leap Motion-enabled app. Any plugin can do a couple of different things – run inside the loop and add frame data right before the app reads the frame, or add methods to objects within the frame (hands, fingers, and so on).

We’ve built a couple of convenient plugins as a demonstration, and released them on GitHub at leapmotion/leapjs-plugins with full documentation. (These examples are written in Coffeescript, but you don’t have to use Coffeescript to use them.) Let’s take a look at what’s inside.

Hand Entry

This plugin simply fires events on the controller when a hand enters or leaves the frame.

new Leap.Controller()
 .use('handEntry')
 .connect().
 .on('handFound', (hand)->
   document.getElementById('myDiv').innerHtml = "Found hand #{hand.id}"
 ).on 'handLost', (hand)->
   document.getElementById('myDiv').innerHtml = "Lost hand #{hand.id}"

Learn more »

Screen Position

This converts a position in 3D real-world space to 2D screen space. It’s pretty simple, and totally configurable.

cursor = document.getElementById('hand3d')
new Leap.Controller()
  .use('screenPosition', {}) # here we could set the scaling, or specify our own conversion function.
  .connect()
  .on 'frame' (frame)>
    if (hand = frame.hands[0])
      cursor.style.left = hand.screenPosition()[0]
      cursor.style.bottom = hand.screenPosition()[1]

Note that we have position: fixed set for the cursor elsewhere.

Learn more »

Hand Hold

In leap.js, Hand objects are created afresh with every frame. This is great if you want to do a mathematical analysis of a hand over its recent history (as LeapJS stores 200 recent frames), but not so great if you want to save your own data to the hand for later use.

This plugin adds a “data” method to each Hand in the frame which lets you save and retrieve arbitrary information. Just like jQuery.data().

You may have noticed that our previous example didn’t work with two hands. Let’s fix that.

new Leap.Controller()
  .use('screenPosition', {})
  .connect()
  .on 'frame' (frame)->
    for hand in frame.hands
      unless cursor = hand.data('cursor')
        cursor = document.createElement("div")
        cursor.className = 'cursor-leap'
        document.body.appendChild(cursor)
        hand.data('cursor', cursor)

    cursor.style.left = hand.screenPosition()[0]
    cursor.style.bottom = hand.screenPosition()[1]

This can be simplified by using Leap.loop:

# By default, if a plugin js file is included, Leap.loop will use it.
Leap.loop (frame)->
  for hand in frame.hands
    unless cursor = hand.data('cursor')
      cursor = document.createElement("div")
      cursor.className = 'cursor-leap'
      document.body.appendChild(cursor)
      hand.data('cursor', cursor)

    cursor.style.left = hand.screenPosition()[0]
    cursor.style.bottom = hand.screenPosition()[1]

Learn more »

How do I get all this loot?

Simple. Include leap-plugins.js on your page right after your leap.js script tag, and you’re off.

<!-- development mode, non-minified scripts -->
<script src="//js.leapmotion.com/0.4.0/leap.js"></script>
<script src="//js.leapmotion.com/plugins/0.1.0/leapjs-plugins-0.1.0.js"></script>

Should I write awesome cool plugins?

Yes! As we’ve seen, writing your own personal plugins can be a great way to structure your own application, as well as share code. We’ve also built in some neat tricks, such as looping over hands or fingers. Take a look at the wiki for juicy details.

(Getting started in a nutshell: pass a name and factory function into Leap.Controller.plugin. When run by controller.use, your factory will return a special object, which will be used by the plugin system to add steps to the frame pipeline or extend the objects within the frame.)

When you’re ready to show the world, throw your link on to the top of the wiki. Send us a tweet too, while you’re at it!

What’s next?

You’ll notice there’s a whole empty directory in the git repo, called “extras.” Soon we’ll be blogging about a JavaScript hand visualizer and a web-audio feedback mechanism with the Leap Interaction Box. Stay tuned.

Peter Ehrlich

Peter is a software engineer at Leap Motion who loves to practice web development and bring the power of LeapJS to everyone.