Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

final commits

  • Loading branch information...
commit 9c4a86fa26b7cd8fc51d93b693aa8ad70c2a70c0 1 parent 130d3c3
@jsjohnst jsjohnst authored
Showing with 254 additions and 3 deletions.
  1. +1 −1  drone.js
  2. +243 −1 index.html
  3. +10 −1 js/leapcopter.js
View
2  drone.js
@@ -7,7 +7,7 @@ var express = require('express')
, arDrone = require('ar-drone')
, png = require('ar-drone-png-stream');
-var directMode = true;
+var directMode = false;
var configs = [
{"name":"tumblrbot", "ip":"192.168.33.10"},
{"ip":"192.168.33.20"},
View
244 index.html
@@ -43,7 +43,7 @@
background-image: url("http://localhost:8010");
}
#camera2.show {
- background-image: url("http://files.tested.com/uploads/0/5/33854-ardrone_20_teaser.jpg");
+ background-image: url("http://localhost:8020");
}
#camera3.show {
background-image: url("http://files.tested.com/uploads/0/5/33854-ardrone_20_teaser.jpg");
@@ -51,6 +51,248 @@
#camera4.show {
background-image: url("http://files.tested.com/uploads/0/5/33854-ardrone_20_teaser.jpg");
}
+.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:3s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:3s;}
+.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}@-webkit-keyframes fadeOutDownBig {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ } 100% {
+ opacity: 0;
+ -webkit-transform: translateY(2000px);
+ }
+}
+
+@-moz-keyframes fadeOutDownBig {
+ 0% {
+ opacity: 1;
+ -moz-transform: translateY(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -moz-transform: translateY(2000px);
+ }
+}
+
+@-o-keyframes fadeOutDownBig {
+ 0% {
+ opacity: 1;
+ -o-transform: translateY(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -o-transform: translateY(2000px);
+ }
+}
+
+@keyframes fadeOutDownBig {
+ 0% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ 100% {
+ opacity: 0;
+ transform: translateY(2000px);
+ }
+}
+
+.fadeOutDownBig {
+ -webkit-animation-name: fadeOutDownBig;
+ -moz-animation-name: fadeOutDownBig;
+ -o-animation-name: fadeOutDownBig;
+ animation-name: fadeOutDownBig;
+}
+@-webkit-keyframes bounceOutDown {
+ 0% {
+ -webkit-transform: translateY(0);
+ }
+
+ 20% {
+ opacity: 1;
+ -webkit-transform: translateY(-20px);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(2000px);
+ }
+}
+
+@-moz-keyframes bounceOutDown {
+ 0% {
+ -moz-transform: translateY(0);
+ }
+
+ 20% {
+ opacity: 1;
+ -moz-transform: translateY(-20px);
+ }
+
+ 100% {
+ opacity: 0;
+ -moz-transform: translateY(2000px);
+ }
+}
+
+@-o-keyframes bounceOutDown {
+ 0% {
+ -o-transform: translateY(0);
+ }
+
+ 20% {
+ opacity: 1;
+ -o-transform: translateY(-20px);
+ }
+
+ 100% {
+ opacity: 0;
+ -o-transform: translateY(2000px);
+ }
+}
+
+@keyframes bounceOutDown {
+ 0% {
+ transform: translateY(0);
+ }
+
+ 20% {
+ opacity: 1;
+ transform: translateY(-20px);
+ }
+
+ 100% {
+ opacity: 0;
+ transform: translateY(2000px);
+ }
+}
+
+.bounceOutDown {
+ -webkit-animation-name: bounceOutDown;
+ -moz-animation-name: bounceOutDown;
+ -o-animation-name: bounceOutDown;
+ animation-name: bounceOutDown;
+}
+@-webkit-keyframes rotateOutDownRight {
+ 0% {
+ -webkit-transform-origin: right bottom;
+ -webkit-transform: rotate(0);
+ opacity: 1;
+ }
+
+ 100% {
+ -webkit-transform-origin: right bottom;
+ -webkit-transform: rotate(-90deg);
+ opacity: 0;
+ }
+}
+
+@-moz-keyframes rotateOutDownRight {
+ 0% {
+ -moz-transform-origin: right bottom;
+ -moz-transform: rotate(0);
+ opacity: 1;
+ }
+
+ 100% {
+ -moz-transform-origin: right bottom;
+ -moz-transform: rotate(-90deg);
+ opacity: 0;
+ }
+}
+
+@-o-keyframes rotateOutDownRight {
+ 0% {
+ -o-transform-origin: right bottom;
+ -o-transform: rotate(0);
+ opacity: 1;
+ }
+
+ 100% {
+ -o-transform-origin: right bottom;
+ -o-transform: rotate(-90deg);
+ opacity: 0;
+ }
+}
+
+@keyframes rotateOutDownRight {
+ 0% {
+ transform-origin: right bottom;
+ transform: rotate(0);
+ opacity: 1;
+ }
+
+ 100% {
+ transform-origin: right bottom;
+ transform: rotate(-90deg);
+ opacity: 0;
+ }
+}
+
+.rotateOutDownRight {
+ -webkit-animation-name: rotateOutDownRight;
+ -moz-animation-name: rotateOutDownRight;
+ -o-animation-name: rotateOutDownRight;
+ animation-name: rotateOutDownRight;
+}
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollOut {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateX(0px) rotate(0deg);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(100%) rotate(120deg);
+ }
+}
+
+@-moz-keyframes rollOut {
+ 0% {
+ opacity: 1;
+ -moz-transform: translateX(0px) rotate(0deg);
+ }
+
+ 100% {
+ opacity: 0;
+ -moz-transform: translateX(100%) rotate(120deg);
+ }
+}
+
+@-o-keyframes rollOut {
+ 0% {
+ opacity: 1;
+ -o-transform: translateX(0px) rotate(0deg);
+ }
+
+ 100% {
+ opacity: 0;
+ -o-transform: translateX(100%) rotate(120deg);
+ }
+}
+
+@keyframes rollOut {
+ 0% {
+ opacity: 1;
+ transform: translateX(0px) rotate(0deg);
+ }
+
+ 100% {
+ opacity: 0;
+ transform: translateX(100%) rotate(120deg);
+ }
+}
+
+.rollOut {
+ -webkit-animation-name: rollOut;
+ -moz-animation-name: rollOut;
+ -o-animation-name: rollOut;
+ animation-name: rollOut;
+}
+
</style>
<div id="cameras">
<div id="camera1" class="camera"></div>
View
11 js/leapcopter.js
@@ -59,6 +59,14 @@ function showCamera(which) {
cameras_visible = which;
}
+document.addEventListener("keydown", function(event) {
+ console.log(event.keyCode);
+ var key = event.keyCode;
+ if(key == 66) {
+ sendCommandImmediate("blink");
+ }
+}, false);
+
function hideCameras() {
for(var i = 1; i <= 4; i++) {
document.getElementById("camera" + i).className = "camera";
@@ -66,7 +74,8 @@ function hideCameras() {
}
function updateText(cmd) {
- document.getElementById("text").innerHTML = cmd;
+ var el = document.getElementById("text");
+ el.innerHTML = '<span class="animated rollOut">' + cmd + '</span>';
}
function sendCommandImmediate(cmd) {
Please sign in to comment.
Something went wrong with that request. Please try again.