Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
87 lines (84 sloc) 3.16 KB
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="" xml:lang="en">
<title>DepthJS Basic Demo</title>
<script src="" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1", {uncompressed:true});</script>
<!-- jQuery is required for the depth.js plugin / it works in no conflict mode -->
<script src="depth.js"></script>
* Just set the functions you want in the global DepthJS object.
* DepthJS with empty functions is already created in depth.js (take a look at the file),
* so you don't need to define every function. If you want to use just a few functions, this
* is the preferred method:
* DepthJS.onKinectInit = function() { console.log("hello kinect"); }
* DepthJS.onMove = function(x,y,z) { console.log("got movement"); }
* In this trivial example, we listen for each event using the event handling callbacks,
* and then use jQuery to set the divs defined in the body with the event details.
DepthJS = {
onKinectInit: function() {
$("#status").text("DepthJS + Kinect detected+!@");
$("#registration").text("Hand not in view");
onRegister: function(x, y, z, data) {
$("#registration").text("Hand in view" + (data == null ? "" : ": " + data));
$("#x").text("x: " + x);
$("#y").text("y: " + y);
$("#z").text("z: " + z);
onUnregister: function() {
$("#registration").text("Hand not in view");
onMove: function(x, y, z) {
$("#x").text("x: " + x);
$("#y").text("y: " + y);
$("#z").text("z: " + z);
onSwipeLeft: function() {
$("#misc").text("swipe left");
onSwipeRight: function() {
$("#misc").text("swipe right");
onSwipeDown: function() {
$("#misc").text("swipe down");
onSwipeUp: function() {
$("#misc").text("swipe up");
onPush: function() {
onPull: function() {
<p><h2>Hi! This is a super duper basic DepthJS demo. Take a look at the source of this file to see how it
works, and how you can include <a href="depth.js">depth.js</a> in any of your web pages and work with Kinect events!</h2></p>
<p>As always, the <a href="">DepthJS home page</a> has all the latest info. You can also check out the source
code at the <a href="">DepthJS github repo</a>.</p>
<div><h1><b>DepthJS Console</b></h1></div>
<div id="status">No Kinect / DepthJS detected</div>
<div id="registration"></div>
<div id="x"></div>
<div id="y"></div>
<div id="z"></div>
<div id="misc"></div>
<div>(The blue pointer ball will not appar in this page. If you can see "Kinect detected" it means the plugin works)</div>