Simple application showing the integration between a Leap Motion Controller and the Lightstreamer JavaScript Client library
JavaScript HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build_r.js
src
.gitignore
LICENSE
README.md
leapdemo.png
screen_leap_large.png

README.md

Lightstreamer - Leap Motion Demo - HTML (LeapJS, Three.js) Client

The Leap Motion Demo is a simple application showing the integration between a Leap Motion Controller and the Lightstreamer JavaScript Client library. It displays a game field containing some small blocks, where each block is controlled by a different user connected to the same application through a Leap Motion Controller device.

This project includes a web client front-end for the Leap Motion Demo:

As an example of Lightstreamer Adapters Needed by This Client, you may refer to the Lightstreamer - Leap Motion Demo - Java Adapter.

Live Demo

screenshot

View live demo

Details

This page uses the JavaScript Client API for Lightstreamer to handle the communications with Lightstreamer Server, leapjs to read the users' hand movement through the Leap Motion Controller and three.js to display the users' positions on the browser.

Each user can act on its own block in two different modes: he can make a fist to grab its block and drag it around the game field, or release the fist and "throw" his block. In the first case, all the hand positions are sent to the Lightstreamer server, which, in turn, push them to all the currently connected clients, whereas in the latter case, only the applied forces are sent to the server and to the other clients; each client will calculate the current position of the block using the received forces and will re-synchronize with the Lightstreamer server, which is calculating the various positions, too, every few seconds.

Install

If you want to install a version of this demo pointing to your local Lightstreamer server, follow these steps:

  • As prerequisite, the Lightstreamer - Leap Motion Demo - Java Adapter has to be deployed in your local Lightstreamer server instance. Please check out that project and follow the installation instructions provided with it.
  • Lightstreamer JS client is currently hot-linked in the html page: you may want to replace it with a local version and/or to upgrade its version.
  • RequireJS is currently hot-linked in the html page: you may want to replace it with a local version and/or to upgrade its version.
  • jQuery is currently hot-linked in the html page: you may want to replace it with a local version and/or to upgrade its version.
  • leapjs is currently hot-linked in the html page: you may want to replace it with a local version and/or to upgrade its version.
  • three.js is currently hot-linked in the html page: you may want to replace it with a local version and/or to upgrade its version.
  • Deploy this demo on the Lightstreamer Server (used as Web server) or in any external Web Server. If you choose the former, please create the folder <LS_HOME>/pages/LeapDemo and copy here the contents of the /src folder of this project. The client demo configuration assumes that Lightstreamer Server, Lightstreamer Adapters, and this client are launched on the same machine. If you need to target a different Lightstreamer server, please search in js/Constants.js this line:
    SERVER: protocolToUse+"//localhost:8080"
    and change it accordingly.
  • Open your browser and point it to: http://localhost:8080/LeapDemo/

See Also

Lightstreamer Adapters Needed by This Client

Lightstreamer Compatibility Notes

  • Compatible with Lightstreamer JavaScript Client library version 6.1 or newer.