Chapter 4. Leap and the Web

Compiled Leap applications written in C++ are extremely powerful and very easy to distribute via the Leap Motion app store (Airspace). The controller's usefulness extends beyond native applications though; it can also seamlessly integrate with client-side web technologies.

In this chapter we'll cover the basics of the Leap SDK for the Web, including the following:

• WebSockets

• LeapJS

• Drawing on a canvas

HTML5 and Leap

Creating scripted or compiled desktop applications with the SDK is all well and good. There are plenty of nifty applications which require lower-level interfaces with a particular operating system API, as in our examples of cursor control, MIDI output, and window management. But when it comes to portability, distribution, and simplicity, it is pretty hard to beat the Web and HTML5.

User-agent standards have become massively more robust in recent times, making powerful mechanisms such as WebSockets, two-dimensional and three-dimensional graphics capabilities, and much more available. All that is necessary to tap into these powerful toolkits is a bit of HTML and JavaScript. Whereas in the earlier days of the Web, if one wanted to interface with a system service connected to specialized hardware such as Leap, as a minimum, a browser plugin would be required. With modern web browsers such tomfoolery is no longer required, and enabling Leap support for any old web page is as simple...

The Leap Motion service

The Leap Motion service is an application running as a daemon on Unix-style platforms (Mac OS X and Linux) and as a service on Windows. Its job is to communicate with the controller hardware devices over USB, post-process frames of hand- and scene-tracking information, and then make this data available to API clients in their native formats. When we use the C++ API to create our frame data Listener , it is really communicating with the Leap Motion service behind the scenes, which is why the service must already be started by the user for our Listener to receive any updates. In the case of our client-side JavaScript code, the frame data is transmitted over a socket, although the details of that communication are still hidden by the consumer of the Leap API.

LeapJS

While we could certainly write our own JavaScript library to use WebSockets to receive the controller frame data from the service's built-in WebSocket server, that would be a colossal waste of our efforts given the fact that there exists such a library already: LeapJS.

LeapJS is an open source library that contains routines and interfaces to make it easy to do absolutely anything anyone might want to do, with the controller in the land of JavaScript. Modules are provided for both HTML5 clients as well as Node.js applications, providing Leap support on the frontend and backend. The frame data, once received, is structured to match the C++, Objective-C, and SWIG-based interfaces that we have already studied.

Receiving the controller frame data and making use of it is even simpler than compiling C++ Leap-based applications; all that is needed is a web browser and a text editor. Though before we float down the calm river of client-side Leap development, we should affix the LeapJS outboard...

JavaScript visualization

Now that we have a hand tracking update callback working nicely, let's do some basic visualization of the data to get a feel for combining the tracking data with some primitive HTML5/JavaScript animation.

HTML5 rules. Why? Everyone has a web browser that will run it more or less identically, without the need for users to use any native installers or download anything. Not that obtaining Leap-enabled native applications is that much more work, the Airspace app store makes that about as easy as one could ask for. From the developer's perspective, using HTML5 and JavaScript greatly simplifies tasks such as drawing graphical primitives, performing network I/O, 3D graphics, and obtaining input. Pretty much everything we need to make any sort of interface is easily accessible and already portable without any need for a time-consuming project and linker setup and dependencies as it most certainly would be if we were to, say, attempt to use OpenGL with C++.

For our next little...

Summary

And that completes our simple JavaScript visualizer. Let's step back and admire it for a second; we've got a (pseudo-)3D cross-platform visual application available to Leap motion users without any download or install, animating at 60 FPS in a web browser, all in a very modest 50 lines of code or so. When contrasted with all of the difficulties of trying to accomplish the same with C++, the advantages of using LeapJS should be apparent.

Of course, our little visualizer is a rather contrived example that doesn't do much in the way of looking cool or showing off the more advanced interaction features of LeapJS or HTML5. More on that coming right up!

The LeapJS pointable tip visualizer in action