Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

updates to ui

  • Loading branch information...
commit 9571b94cd33e333fa1d036ba7b69c474051ebeb8 1 parent bfc23b3
@jsjohnst jsjohnst authored
Showing with 136 additions and 11 deletions.
  1. +59 −6 index.html
  2. +77 −5 js/leapcopter.js
View
65 index.html
@@ -1,20 +1,73 @@
<style>
body {
background-color: #000;
+ margin: 0;
+ padding: 1.25em;
+ }
+ #text {
+ font-family: helvetica;
+ font-weigth: bold;
+ font-size: 11em;
+ position: absolute;
+ top: 27%;
+ width: 100%;
+ color: #ffa;
+ text-shadow: 0 0 20px black;
+ text-align: center;
+ text-transform: capitalize;
+ }
+ #cameras {
+ position: fixed;
+ width: 96%;
+ height: 96%;
+ text-align: center;
}
.camera {
background-repeat: no-repeat;
background-position: center;
- background-attachment: fixed;
-webkit-background-size: cover;
+ width: 100%;
+ height: 100%;
+ margin-bottom: 5em;
+ }
+ #cameras.grid .camera {
+ float: left;
+ width: 48%;
+ height: 48%;
+ margin: 1em;
+ }
+ #camera3.grid {
+ clear: both;
+ }
+ #camera1.show {
+ background-image: url("http://localhost:8010");
+ }
+ #camera2.show {
+ background-image: url("http://files.tested.com/uploads/0/5/33854-ardrone_20_teaser.jpg");
+ }
+ #camera3.show {
+ background-image: url("http://files.tested.com/uploads/0/5/33854-ardrone_20_teaser.jpg");
+ }
+ #camera4.show {
+ background-image: url("http://files.tested.com/uploads/0/5/33854-ardrone_20_teaser.jpg");
}
</style>
-<script src="/socket.io/socket.io.js"></script>
-<script src="/js/leap.js"></script>
+<div id="cameras">
+ <div id="camera1" class="camera"></div>
+ <div id="camera2" class="camera"></div>
+ <div id="camera3" class="camera"></div>
+ <div id="camera4" class="camera"></div>
+</div>
+<h2 id="text"></h2>
+<audio id="music" src="http://f.cl.ly/items/0N273o3H0w3o3v3t1C01/(Disc%202)%2006%20-%20Apocalypse%20Now%20-%20Ride%20Of%20The%20Valkyries.mp3"></audio>
+<script src="js/leap.js"></script>
+<script src="js/leapcopter.js"></script>
+<script src="socket.io/socket.io.js"></script>
<script>
- var socket = io.connect('http://192.168.33.110');
- //var socket = io.connect('http://localhost');
+ if(io) {
+ var socket = io.connect('http://localhost');
+ }
+>>>>>>> Stashed changes
//socket.emit('my other event', { my: 'data' });
//socket.emit('takeoff');
</script>
-<script src="/js/leapcopter.js"></script>
View
82 js/leapcopter.js
@@ -19,8 +19,59 @@ function debounce(func, wait, immediate) {
};
};
+function audioPlay() {
+ document.getElementById("music").play();
+}
+
+function audioStop() {
+ setTimeout(function() { document.getElementById("music").pause(); hideCameras(); }, 1000);
+}
+
+var entered_grid = false;
+var cameras_visible = 0;
+var camera_last_change = null;
+
+function showCamera(which) {
+ if(which != (cameras_visible+1)) return;
+ if(camera_last_change) {
+ if(Date.now() - camera_last_change < 2500) return;
+ }
+
+ camera_last_change = Date.now();
+
+ if(which == 1) {
+ if(!entered_grid) {
+ document.getElementById("cameras").className = "";
+ }
+ } else {
+ entered_grid = true;
+ document.getElementById("cameras").className = "grid";
+ }
+
+ document.getElementById("camera" + which).className += " show";
+
+ if(which == 3) {
+ document.getElementById("camera4").className += " show";
+ which = 4;
+ }
+
+ cameras_visible = which;
+}
+
+function hideCameras() {
+ for(var i = 1; i <= 4; i++) {
+ document.getElementById("camera" + i).className = "camera";
+ }
+}
+
+function updateText(cmd) {
+ document.getElementById("text").innerHTML = cmd;
+}
+
function sendCommandImmediate(cmd) {
- socket.emit(cmd);
+ console.log(cmd);
+ updateText(cmd);
+ //socket.emit(cmd);
}
var sendCommand = debounce(function(cmd) {
@@ -36,7 +87,7 @@ function gestureRecognized(gesture, sub) {
}
return;
} else {
- if(gesture == "swipe" && sub) {
+ if(gesture == "swipe" && sub && sub != "up" && sub != "down") {
sendCommand(sub);
} else if(gesture == "spin" && sub) {
sendCommandImmediate(sub);
@@ -105,6 +156,8 @@ function handleCircle(event, gesture) {
var controllerOptions = {enableGestures: true};
var lotsoffingers = false;
+var pointables_duration = 0;
+var started = false;
Leap.loop(controllerOptions, function(event) {
if (event.hands.length == 2) {
@@ -117,16 +170,35 @@ Leap.loop(controllerOptions, function(event) {
}
}
- if(event.pointables.length >= 6) {
+ if(event.pointables.length >= 8) {
lotsoffingers = true;
- setTimeout(function() { lotsoffingers = false; }, 2000);
+ setTimeout(function() { lotsoffingers = false; }, 1000);
}
- if(lotsoffingers && event.pointables.length <= 2) {
+ if(inflight && lotsoffingers && event.pointables.length <= 2) {
+ audioStop();
+ pointables_duration = 0;
+ lotsoffingers = false;
return gestureRecognized("multi", "down");
}
}
+ if (event.hands.length == 1) {
+ if (event.pointables.length == 5) {
+ pointables_duration++;
+ }
+
+ if(pointables_duration > 100) {
+ started = true;
+ showCamera(1);
+ audioPlay();
+ }
+
+ if (event.pointables.length > 1 && event.pointables.length < 5) {
+ showCamera(event.pointables.length);
+ }
+ }
+
if(event.gestures.length > 0) {
var g = event.gestures[0];
if(g.type == "circle" && g.state == "stop") {
Please sign in to comment.
Something went wrong with that request. Please try again.