Permalink
Browse files

add hover events

  • Loading branch information...
1 parent 418146e commit 07bcbc75e4358b6f94b02a7afa6c8af403e67de8 @jeremylightsmith committed Mar 3, 2011
@@ -88,6 +88,7 @@ DepthJS.eventHandlers.onRegister = function(data) {
console.log("Ignoring in two hands for now");
return;
}
+ data.mode = "theforce";
if (data.mode == "theforce") {
DepthJS.registerMode = "selectorBox";
} else if (data.mode == "twohands") {
@@ -100,6 +101,7 @@ DepthJS.eventHandlers.onRegister = function(data) {
DepthJS.lastRegisterTime = new Date();
DepthJS.state = DepthJS.registerMode;
DepthJS[DepthJS.registerMode].show();
+ $("#kinect-help").hide();
};
DepthJS.eventHandlers.onUnregister = function() {
@@ -109,6 +111,7 @@ DepthJS.eventHandlers.onUnregister = function() {
DepthJS.selectorBox.hide();
DepthJS.selectorBoxPopup.hide();
DepthJS.depthose.hide();
+ $("#kinect-help").show();
};
DepthJS.eventHandlers.onHandClick = function() {
@@ -167,6 +170,8 @@ DepthJS.eventHandlers.onMove = function(data) {
} else if (DepthJS.state == "selectorBoxPopup") {
DepthJS.selectorBoxPopup.move(accumulatedX, accumulatedY, accumulatedZ);
} else {
+ //console.debug("setting the force")
+ DepthJS.eventHandlers.onRegister({mode:"theforce"});
if (DepthJS.verbose) console.log("Ignoring move in state " + DepthJS.state);
}
};
@@ -9,14 +9,25 @@ $(function() {
// Let us know its running
console.log("Finished initing, sticking in logo");
- $("<img src='https://github.com/doug/depthjs/raw/master/chrome-extension/logo_128x128.png'>").css({
- position: "fixed",
- width: "32px",
- height: "32px",
- bottom: "20px",
- left: "20px"
- }).appendTo("body");
- console.log($("img"));
+ $("<img/>").attr("src", chrome.extension.getURL("logo_128x128.png"))
+ .css({
+ position: "fixed",
+ width: "32px",
+ height: "32px",
+ bottom: "20px",
+ left: "20px"
+ })
+ .appendTo("body");
+ $("<div id='kinect-help'/>").text("move your hand closer until you see your hand on the screen")
+ .css({
+ position: "fixed",
+ left: "55px",
+ bottom: "20px",
+ backgroundColor: "white",
+ padding: 4
+ })
+ .appendTo("body");
+ // console.log($("img"));
var lastTime = null;
@@ -54,7 +54,7 @@ function print() {
});
var alphabeticalKeys = _.keys(counts).sort();
- console.log("------" + (new Date() + ""));
+ // console.log("------" + (new Date() + ""));
_.each(alphabeticalKeys, function(type) {
console.log([" " + counts[type] + " " + type + "; last = ", lastByType[type]]);
});
@@ -46,33 +46,58 @@ DepthJS.selectorBox.move = function(x, y) {
if (x != $box.css("left") || y != $box.css("top")) {
$box.css({left: x, top: y});
}
+ DepthJS.selectorBox.handleHover()
};
-DepthJS.selectorBox.activate = function() {
- if (DepthJS.verbose) console.log("DepthJS: Activating underneath selectorBox");
- // Lame code for now...
-
- var $intersectingLinks = $("a").filter(function() {
+$.fn.findOverlapping = function($box) {
+ var bx = $box.position().left + $box.width() / 2;
+ var by = $box.position().top + $box.height() / 2;
+
+ return $(this).filter(function() {
var $a = $(this);
var ax = $a.offset().left + $(window).scrollLeft();
var aw = $a.width();
var ay = $a.offset().top + $(window).scrollTop();
var ah = $a.height();
- var $box = DepthJS.selectorBox.$box;
- var bx = $box.position().left;
- var by = $box.position().top;
- var bw = $box.width();
- var bh = $box.height();
-
if (by > ay + ah || // box-top is lower than link-bottom
- by + bh < ay || // box-bottom is higher than link-top
+ by < ay || // box-bottom is higher than link-top
bx > ax + aw || // box-left is right of link right
- bx + bw < aw) { // box-right is left of link left
+ bx < ax) { // box-right is left of link left
return false;
}
return true;
});
+}
+
+DepthJS.selectorBox.handleHover = function() {
+ var $lastElement = $('.depthjs-hover');
+ var $hoverables = $("a").findOverlapping(DepthJS.selectorBox.$box);
+
+ var trigger = function(element, name) {
+ var event = document.createEvent("Events")
+ event.initEvent(name, true, true); //true for can bubble, true for cancelable
+ // var event = document.createEvent(name);
+ // event.initEvent(msg.type, false, false);
+ element[0].dispatchEvent(event);
+ }
+
+ if ($hoverables[0] == $lastElement[0]) { // same element
+ // do nothing
+ } else {
+ if ($lastElement.length > 0) {
+ trigger($lastElement.removeClass('depthjs-hover'), 'hoverOut');
+ }
+ if ($hoverables.length > 0) {
+ trigger($hoverables.addClass("depthjs-hover"), "hoverOver");
+ }
+ }
+};
+
+DepthJS.selectorBox.activate = function() {
+ if (DepthJS.verbose) console.log("DepthJS: Activating underneath selectorBox");
+ // Lame code for now...
+ var $intersectingLinks = $("a").findOverlapping(DepthJS.selectorBox.$box);
if (DepthJS.verbose) console.log("Got " + $intersectingLinks.length + " links");
if (DepthJS.verbose) console.log($intersectingLinks);

2 comments on commit 07bcbc7

@azinman
azinman commented on 07bcbc7 Mar 5, 2011

What is a hover event? For using the mouse? Or just random things on the web page that are 'hoverable'?

@jeremylightsmith
Owner

With this event, we can notify the web page that the kinect "cursor" is hovering over a link, and the webpage can handle it as it likes.

We have one page where we choose to handle it like the XBox and autoclick after 2 seconds, all the while showing a filling pie chart like image.

We can also update the look of things that the xbox "cursor" is on top of by modifying what .depthjs-hover means.

Please sign in to comment.