Permalink
Browse files

Added API for web pages with basic demo

  • Loading branch information...
1 parent d462c02 commit 365fe0d1c4fe0c87e52b56849003f5a75253f606 @azinman azinman committed Apr 13, 2011
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
+ "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<head>
+ <title>DepthJS Basic Demo</title>
+ <script src="http://www.google.com/jsapi" 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>
+ <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");
+ $("#x").text("");
+ $("#y").text("");
+ $("#z").text("");
+ },
+ 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() {
+ $("#misc").text("push");
+ },
+ onPull: function() {
+ $("#misc").text("pull");
+ }
+ };
+ </script>
+</head>
+<body>
+
+<div>
+ <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="http://depthjs.media.mit.edu">DepthJS home page</a> has all the latest info. You can also check out the source
+ code at the <a href="http://github.com/doug/depthjs">DepthJS github repo</a>.</p>
+ <br><br>
+</div>
+<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>
+</body>
+</html>
View
@@ -0,0 +1,69 @@
+/*
+DepthJS
+Copyright (C) 2010 Aaron Zinman, Doug Fritz, Roy Shilkrot, Greg Elliott
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+*/
+
+/**
+ * Include this file in your HTML pages to access the Kinect via DepthJS plugins.
+ * If the user has the DepthJS plugin installed in their browser, then your webpage will be
+ * able to get high-level events through this simple API.
+ *
+ * Just override the definition of the event handlers in the global DepthJS object with your own
+ * functions.
+ *
+ * See BasicDemo.html or our "interesting" CatBucket game.
+ *
+ * NOTE: depth.js requires jQuery. You can use it in noConflict mode.
+ */
+
+// Override window.DepthJS
+window.DepthJS = {
+ onKinectInit: function() {},
+ onRegister: function(x, y, z, data) {},
+ onUnregister: function() {},
+ onMove: function(x, y, z) {},
+ onSwipeLeft: function() {},
+ onSwipeRight: function() {},
+ onSwipeDown: function() {},
+ onSwipeUp: function() {},
+ onPush: function() {},
+ onPull: function() {}
+};
+
+// Requires jQuery
+(function($){
+ $(function() {
+ var $domPort = $("<div id='DepthJS_eventPort' style='display:none'></div>");
+ $domPort.appendTo("body");
+ $domPort.bind("DepthJSEvent", function() {
+ var json = $domPort.text();
+ var eventObj = JSON.parse(json);
+ var type = eventObj.type;
+ if (type == null) {
+ console.log("DepthJS: No type found in event; ignoring");
+ return;
+ }
+ if (DepthJS["on" + type] == null) {
+ console.log("DepthJS: Could not find handler for event type " + type + "; ignoring");
+ return;
+ }
+ var data = eventObj.data;
+ if (type == "Register") DepthJS.onRegister(data.x, data.y, data.z, data.data);
+ else if (type == "Move") DepthJS.onMove(data.x, data.y, data.z);
+ else DepthJS["on" + type](data.data);
+ });
+ }); // wait until body is ready
+})(jQuery); // no conflict
@@ -5,14 +5,21 @@ console.log("DepthJS: Loading Event Link");
DepthJS.eventLink.initPort = function() {
if (DepthJS.verbose) console.log("DepthJS: Event link init");
DepthJS.eventLink.domPort = null;
- $(function() {
+ var checkForEventPort = function() {
var $eventPort = $("#DepthJS_eventPort")
if ($eventPort.length > 0 ) {
console.log("DepthJS: Registering eventPort on DepthJS supported web page");
DepthJS.eventLink.domPort = $eventPort;
+ DepthJS.eventLink.onEvent({type: "KinectInit", data:{}});
+ return true;
+ }
+ return false;
+ };
+ $(function() {
+ if (!checkForEventPort()) {
+ // try again in 300msec
+ setTimeout(checkForEventPort, 300);
}
- //DepthJS.eventLink.domPort = $("<div id='DepthJS_eventPort' style='display:none'></div>");
- //DepthJS.eventLink.domPort.appendTo("body");
});
DepthJS.browser.addContentScriptListener("event", DepthJS.eventLink.onEvent);
};
@@ -21,10 +28,13 @@ DepthJS.eventLink.onEvent = function (msg) {
DepthJS.logSortaVerbose(msg.type, "DepthJS: event " + msg.type);
if (DepthJS.eventLink.domPort != null) {
// jQuery's trigger doesn't seem to work here for some reason
- var event = document.createEvent("Event");
- event.initEvent(msg.type, false, false);
+ var e = document.createEvent("Event");
+ e.initEvent("DepthJSEvent", false, false);
+ if (msg.jsonRep == null) {
+ msg.jsonRep = JSON.stringify(msg);
+ };
DepthJS.eventLink.domPort.text(msg.jsonRep);
- DepthJS.eventLink.domPort.get(0).dispatchEvent(event);
+ DepthJS.eventLink.domPort.get(0).dispatchEvent(e);
} else {
var handler = DepthJS.eventHandlers["on"+msg.type];
if (handler != null) {
@@ -3,8 +3,8 @@ $(function() {
if (window.top === window) {
// The parent frame is the top-level frame, not an iframe.
console.log(["Initing DepthJS", DepthJS]);
- DepthJS.selectorBox.init();
DepthJS.eventLink.initPort();
+ DepthJS.selectorBox.init();
DepthJS.depthose.init();
// Let us know its running

0 comments on commit 365fe0d

Please sign in to comment.