├── .gitignore
├── .gitmodules
├── .npmignore
├── README.md
├── app.js
├── index.js
├── package.json
└── public
    ├── js
        └── main.js
    ├── model
        ├── ARDrone.three.json
        ├── ardrone2.obj
        └── ardrone_hull.tga
    ├── style
        └── style.css
    └── webgl.html


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | 


--------------------------------------------------------------------------------
/.gitmodules:
--------------------------------------------------------------------------------
1 | [submodule "public/js/three.js"]
2 | 	path = public/js/three.js
3 | 	url = git://github.com/mrdoob/three.js.git
4 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | /.idea
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | remote-control and monitoring for your nodecopter
 2 | ====
 3 | 
 4 | note: the code is a complete mess and will eventually be reworked and
 5 | documented.
 6 | 
 7 | usage
 8 | ----
 9 | 
10 | Install the module with `npm install nodecopter-monitor`, then integrate it
11 | into your project with
12 | 
13 |     var arDrone = require('ar-drone'),
14 |         client = arDrone.createClient();
15 | 
16 |     require('nodecopter-monitor').init(client);
17 | 
18 | after starting your program you can access the monitoring via `http://localhost:3001/webgl.html`.
19 | From the monitoring-page you can also remote-control the drone with the following key-commands:
20 | 
21 |     space – takeoff
22 |     escape - land
23 |     W/S/A/D – move front/back/left/right
24 |     cursor-keys – up/down and rotate cw/ccw
25 |     1/2/3/4/5 – animations (flipAhead/flipLeft/yawShake/doublePhiThetaMixed/wave)
26 |  
27 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | var arDrone = require('ar-drone'),
2 |     client = arDrone.createClient();
3 | 
4 | require('./index.js').init(client);
5 | 
6 | require('nodecopter-gamepad').bindEvents(client);


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | exports.init = function(drone) {
 2 |     var express = require('express'),
 3 |         http = require('http'),
 4 |         path = require('path'),
 5 |         util = require('util');
 6 | 
 7 |     var app = express(),
 8 |         srv = http.createServer(app),
 9 |         io = require('socket.io').listen(srv);
10 | 
11 |     io.set('log level', 0);
12 | 
13 |     app.configure(function() {
14 |       app.set('port', process.env.PORT || 3001);
15 |       app.use(app.router);
16 |       app.use(express.static(path.join(__dirname, 'public')));
17 |     });
18 | 
19 |     drone.config('general:navdata_demo', 'TRUE');
20 | 
21 | 
22 |     // send required parts of navdata to the client
23 |     drone.on('navdata', function(data) {
24 |         if(!data.demo) { return; }
25 | 
26 |         var clientData = {
27 |             droneState: { flying: data.droneState.flying }
28 |         };
29 | 
30 |         var navdataClientKeys = ['controlState', 'flyState', 'batteryPercentage', 'altitudeMeters'];
31 | 
32 |         for(var i=0, n=navdataClientKeys.length; i<n; i++) {
33 |             var k = navdataClientKeys[i];
34 |             clientData[k] = data.demo[k];
35 |         }
36 | 
37 |         clientData.rotation = {
38 |             leftRight: data.demo.rotation.leftRight,
39 |             frontBack: data.demo.rotation.frontBack,
40 |             clockwise: data.demo.rotation.clockwise
41 |         };
42 | 
43 |         io.sockets.emit('navdata', clientData);
44 |         //console.log(util.inspect(clientData, {colors:true}));
45 |     });
46 | 
47 |     srv.listen(app.get('port'), function(){
48 |       console.log("Express server listening on port " + app.get('port'));
49 |     });
50 | 
51 | 
52 | 
53 | 
54 |     // notify client and serve images
55 |     var pngstream = drone.createPngStream(),
56 |         currentImg, i = 0;
57 | 
58 |     pngstream.on("data", function (frame) {
59 |         currentImg = frame;
60 |         io.sockets.emit("image", "/image/" + i++);
61 |     });
62 | 
63 |     app.get('/image/:id', function (req, res) {
64 |         res.writeHead(200, { "Content-Type": "image/png" });
65 |         res.end(currentImg, "binary");
66 |     });
67 | 
68 |     return app;
69 | };
70 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nodecopter-monitor",
 3 |   "description": "monitoring and remote-control for a nodecopter",
 4 |   "version": "0.1.1",
 5 |   "dependencies": {
 6 |     "ar-drone": "*",
 7 |     "express": "~3.0.0",
 8 |     "nodecopter-gamepad": "0.0.1",
 9 |     "socket.io": "~0.9.10"
10 |   },
11 |   "author": {
12 |     "name": "usefulthink",
13 |     "email": "m.schuhfuss@gmail.com"
14 |   },
15 |   "contributors": [
16 |     {
17 |       "name": "zaubernerd"
18 |     },
19 |     {
20 |       "name": "line-o"
21 |     }
22 |   ],
23 |   "main": "index.js",
24 |   "repository": "https://github.com/usefulthink/nodecopter-monitor.git",
25 |   "homepage": "https://github.com/usefulthink/nodecopter-monitor",
26 |   "license": "BSD"
27 | }
28 | 


--------------------------------------------------------------------------------
/public/js/main.js:
--------------------------------------------------------------------------------
  1 | var win = window;
  2 | 
  3 | var nodecopterWebGL = {
  4 |     /**
  5 |      * Expose these objects for debugging purposes
  6 |      * (to easily change positions, rotations, etc).
  7 |      */
  8 |     camera: null,
  9 |     scene: null,
 10 |     renderer: null,
 11 |     floor: null,
 12 |     drone: null,
 13 |     ambientLight: null,
 14 |     spotLight: null,
 15 |     directionalLight: null,
 16 | 
 17 |     droneModelURL: "",
 18 |     navData: null,
 19 | 
 20 |     /**
 21 |      * Helper function to convert angle degrees to radians.
 22 |      * @function
 23 |      * @param  {number} The angle in degrees.
 24 |      * @return {number} The angle in radians.
 25 |      */
 26 |     deg2Rad: (function () {
 27 |         var RAD_PER_DEG = Math.PI / 180;
 28 |         return function (deg) {
 29 |             return deg * RAD_PER_DEG;
 30 |         };
 31 |     }()),
 32 | 
 33 | 
 34 |     init: function (container) {
 35 |         this.width = win.innerWidth;
 36 |         this.height = win.innerHeight;
 37 | 
 38 |         win.addEventListener("resize", this.setSize.bind(this), false);
 39 | 
 40 |         // Initialize everything.
 41 |         this.scene = this.initThreeJS(container);
 42 |         this.initFloorModel(this.scene);
 43 |         this.initLightning(this.scene);
 44 | 
 45 |         // Start rendering the scene once the drone model is loaded
 46 |         this.initDroneModel(this.scene, function () {
 47 |             this.render();
 48 |         }.bind(this));
 49 |     },
 50 | 
 51 |     /**
 52 |      * Resets the camera aspect ratio and the renderer size.
 53 |      * To be called whenever the display size changes.
 54 |      * @param {number} width  The new display width.
 55 |      * @param {number} height The new display height.
 56 |      */
 57 |     setSize: function (width, height) {
 58 |         this.width = typeof width === "number" ? width : win.innerWidth;
 59 |         this.height = typeof height === "number" ? width : win.innerHeight;
 60 | 
 61 |         this.camera.aspect = this.width / this.height;
 62 |         this.camera.updateProjectionMatrix();
 63 | 
 64 |         this.renderer.setSize(this.width, this.height);
 65 |     },
 66 | 
 67 |     /**
 68 |      * Sets the demo navdata from the drone so the webGL drone can move.
 69 |      * @param {object} navData The navdata.demo data from the drone.
 70 |      */
 71 |     setNavData: function (navData) {
 72 |         this.navData = navData;
 73 |     },
 74 | 
 75 |     /**
 76 |      * Initializes the camera, renderer and scene and attaches
 77 |      * the canvas to the provided DOM node.
 78 |      */
 79 |     initThreeJS: function (container) {
 80 |         this.camera = new THREE.PerspectiveCamera(50, this.width / this.height, 0.1, 8000);
 81 |         this.camera.position.set(0, 200, 300);
 82 | 
 83 |         this.renderer = new THREE.WebGLRenderer({antialias: true});
 84 |         this.renderer.setSize(this.width, this.height);
 85 |         this.renderer.shadowMapEnabled = true;
 86 | 
 87 |         container.appendChild(this.renderer.domElement);
 88 | 
 89 |         return new THREE.Scene();
 90 |     },
 91 | 
 92 |     /**
 93 |      * Initializes the floor model.
 94 |      * @param  {object} scene The THREE.js scene object.
 95 |      */
 96 |     initFloorModel: function (scene) {
 97 |         /*
 98 |          var planeGeo = new THREE.PlaneGeometry(1200, 2000, 1, 1);
 99 |          var planeMat = new THREE.MeshLambertMaterial({ color: 0xffffff });
100 |          this.floor = new THREE.Mesh(planeGeo, planeMat);
101 |          this.floor.rotation.x = -Math.PI/2;
102 |          this.floor.receiveShadow = true;
103 |          scene.add(this.floor);
104 |          */
105 | 
106 |         var floorTileCanvas = document.createElement("canvas"),
107 |             context = floorTileCanvas.getContext("2d");
108 | 
109 |         floorTileCanvas.width = floorTileCanvas.height = 512;
110 |         context.fillStyle = "#aac";
111 |         context.fillRect(0, 0, 512, 512);
112 |         context.fillStyle = "#ccf";
113 | 
114 |         context.fillRect(0, 0, 256, 256);
115 |         context.fillRect(256, 256, 256, 256);
116 | 
117 |         var floorTexture = new THREE.Texture(floorTileCanvas, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping),
118 |             floorMaterial = new THREE.MeshLambertMaterial({map: floorTexture});
119 | 
120 |         floorTexture.needsUpdate = true;
121 |         floorTexture.repeat.set(5000, 5000);
122 | 
123 |         var geometry = new THREE.PlaneGeometry(100, 100);
124 | 
125 |         this.floor = new THREE.Mesh(geometry, floorMaterial);
126 | 
127 |         this.floor.rotation.x = -Math.PI / 2;
128 |         this.floor.scale.set(10000, 10000, 10000);
129 |         this.floor.receiveShadow = true;
130 | 
131 |         scene.add(this.floor);
132 |     },
133 | 
134 |     /**
135 |      * Loads and initializes the drone model.
136 |      * @param  {object}   scene    The THREE.js scene object.
137 |      * @param  {function} callback A callback function to be called when the model is loaded.
138 |      */
139 |     initDroneModel: function (scene, callback) {
140 |         new THREE.JSONLoader().load(this.droneModelURL, function (geometry) {
141 |             var material = new THREE.MeshFaceMaterial();
142 |             this.drone = new THREE.Mesh(geometry, material);
143 |             this.drone.scale.set(0.8, 0.8, 0.8);
144 |             this.drone.castShadow = true;
145 |             scene.add(this.drone);
146 | 
147 |             callback();
148 |         }.bind(this));
149 |     },
150 | 
151 |     /**
152 |      * Initializes three different lights.
153 |      */
154 |     initLightning: function (scene) {
155 |         this.ambientLight = new THREE.AmbientLight(0x404030);
156 |         scene.add(this.ambientLight);
157 | 
158 |         this.spotLight = new THREE.SpotLight(0xffeedd);
159 |         this.spotLight.position.set(0, 1000, 0);
160 |         this.spotLight.castShadow = true;
161 |         this.spotLight.shadowDarkness = 0.7;
162 | 
163 |         // this.spotLight.shadowCameraVisible = true;
164 | 
165 |         scene.add(this.spotLight);
166 | 
167 |         this.directionalLight = new THREE.DirectionalLight(0xffeedd);
168 |         this.directionalLight.position.set(0, 1000, 1000);
169 |         // this.directionalLight.castShadow = true; // Works only with orthographic camera.
170 |         scene.add(this.directionalLight);
171 |     },
172 | 
173 |     /**
174 |      * Renders the scene and calls itself via requestAnimationFrame.
175 |      */
176 |     render: function () {
177 |         requestAnimationFrame(this.render.bind(this));
178 | 
179 |         if (this.navData) {
180 |             var roll = this.deg2Rad(this.navData.rotation.leftRight),
181 |                 yaw = -this.deg2Rad(this.navData.rotation.clockwise),
182 |                 pitch = -this.deg2Rad(this.navData.rotation.frontBack);
183 | 
184 |             this.drone.eulerOrder = 'YZX';
185 |             this.drone.rotation.set(pitch, yaw, roll);
186 |             this.drone.position.y = 10 + this.navData.altitudeMeters * 100;
187 | 
188 |             //this.drone.position.x += this.navData.xVelocity / 60;
189 |             //this.drone.position.z += this.navData.yVelocity / 60;
190 |         }
191 | 
192 |         if (typeof this.onRender === "function") {
193 |             this.onRender.call(this);
194 |         }
195 | 
196 |         this.camera.lookAt(this.drone.position);
197 |         this.renderer.render(this.scene, this.camera);
198 |     }
199 | };
200 | 
201 | 
202 | var $ = document.getElementById.bind(document);
203 | 
204 | var batteryMeterEl = $('batteryMeter'),
205 |     droneStateEl = $('droneStateData'),
206 |     imgEl = $('camImage'),
207 |     containerEl = $('nodecopter-webgl');
208 | 
209 | var navData = null, droneState = null,
210 |     lastBatteryPercentage = 100;
211 | 
212 | var socket = io.connect('http://localhost:3001');
213 | 
214 | socket.on('navdata', function (data) {
215 |     droneState = data.droneState;
216 |     navData = data;
217 |     nodecopterWebGL.setNavData(navData);
218 | });
219 | 
220 | var isImageLoading = false;
221 | socket.on('image', function(src) {
222 |     if(isImageLoading) { return; }
223 | 
224 |     var tmpImg = new Image();
225 |     tmpImg.src = src;
226 |     tmpImg.onload = function() {
227 |         isImageLoading = false;
228 |         imgEl.src = src;
229 |     };
230 |     isImageLoading = true;
231 | });
232 | 
233 | 
234 | // initialize webgl-stuff
235 | nodecopterWebGL.droneModelURL = "model/ARDrone.three.json";
236 | nodecopterWebGL.init(containerEl);
237 | 
238 | nodecopterWebGL.onRender = function () {
239 |     if(!navData) { return; }
240 | 
241 |     droneStateEl.innerHTML = JSON.stringify(navData, null, 2);
242 | 
243 |     if (navData.batteryPercentage !== lastBatteryPercentage) {
244 |         lastBatteryPercentage = navData.batteryPercentage;
245 |         batteryMeterEl.innerHTML = lastBatteryPercentage;
246 |     }
247 | };


--------------------------------------------------------------------------------
/public/model/ardrone_hull.tga:
--------------------------------------------------------------------------------
1 | 

TRUEVISION-XFILE.


--------------------------------------------------------------------------------
/public/style/style.css:
--------------------------------------------------------------------------------
 1 | * { margin: 0; padding: 0; }
 2 | 
 3 | body {
 4 |   font-family: monospace;
 5 |   background-color: #000;
 6 |   color: #fff;
 7 |   margin: 0;
 8 |   overflow: hidden;
 9 | }
10 | 
11 | #camImage {
12 |   position: absolute;
13 |   top: 0; right: 0;
14 |   width: 400px;
15 |   height: auto;
16 | 
17 |   opacity: 0.9;
18 | }
19 | 
20 | #battery {
21 |   position: absolute;
22 |   top: 0; left: 0;
23 |   font-size: 26px;
24 | }
25 | 
26 | #droneStateData {
27 |   color: white;
28 |   font-size: 10px;
29 |   position: absolute;
30 |   bottom: 0; right: 0;
31 | 
32 |   width: 300px; height: 200px;
33 | 
34 |   background: rgba(0,0,0,0.5);
35 | }


--------------------------------------------------------------------------------
/public/webgl.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 6 |     <link rel="stylesheet" href="style/style.css">
 7 | </head>
 8 | 
 9 | <body>
10 |     <!-- 1px transparent gif… -->
11 |     <img id="camImage" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
12 |     <div id="battery">Battery: <span id="batteryMeter">NA</span>%</div>
13 |     <pre id="droneStateData"></pre>
14 |     <div id="nodecopter-webgl"></div>
15 | 
16 |     <script src="/socket.io/socket.io.js"></script>
17 |     <script src="js/three.js/build/three.js"></script>
18 |     <script src="js/main.js"></script>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------