From 035b57bc26a7b85b68a1747e4821e229bf125f87 Mon Sep 17 00:00:00 2001
From: Andrew Nesbitt <andrewnez@gmail.com>
Date: Tue, 1 Oct 2013 07:17:50 +0100
Subject: [PATCH] Added dronestream video

---
 index.html   | 73 ++++++++++++++++++++++------------------------------
 package.json |  3 ++-
 server.js    |  2 ++
 3 files changed, 35 insertions(+), 43 deletions(-)
diff --git a/index.html b/index.html
index 411b15f..b2706c8 100644
--- a/index.html
+++ b/index.html
@@ -7,11 +7,30 @@
 button.active{
   background:red;
 }
+body{
+  margin:0;
+  padding:0;
+  height:100%;
+  background:#000;
+  color:#fff;
+  font-family: Helvetica, Arial, "MS Trebuchet", sans-serif;
+}
+#map, #droneStream{
+  width: 50%;
+  height: 400px;
+  float:left;
+}
+#droneStream canvas{
+  width: 100%;
+  height: 400px;
+}
 </style>
 <link rel="stylesheet" href="/leaflet.css" />
 
 </head>
 <body>
+  <div id="map"></div>
+  <div id='droneStream'></div>
   <div id="phone-position">
     Phone:
     <span class='lat'></span>,
@@ -30,13 +49,13 @@ button.active{
   <button id='land'>Land</button>
   <button id='move'>Move</button>
   <button id='stop'>stop</button>
-  <div id="map" style="width: 1000px; height: 600px"></div>
+
 
 
   <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
   <script src="leaflet.js"></script>
   <script src="leaflet-google.js"></script>
-
+  <script src="/dronestream/nodecopter-client.js"></script>
 <script src="jquery.js"></script>
 <script src="/socket.io/socket.io.js"></script>
 <script>
@@ -55,9 +74,15 @@ button.active{
   var droneIcon = L.icon({
       iconUrl: 'images/copter.png'
   });
-  
 
-  function initMap(lat, lon){
+  new NodecopterStream(document.getElementById("droneStream"));
+  
+  navigator.geolocation.getCurrentPosition(initMap, defaultMap, { enableHighAccuracy:true });
+
+  function initMap(position){
+    lat = position.coords.latitude;
+    lon = position.coords.longitude;
+    
     map = L.map('map').setView([lat, lon], 20);
 
     var googleLayer = new L.Google('SATELLITE');
@@ -66,8 +91,9 @@ button.active{
     laptop = L.marker([lat, lon], {icon: laptopIcon}).addTo(map)
   }
   
-  function onPositionError(err){
+  function defaultMap(err){
     console.log(err)
+    initMap({coords: { latitude: 51, longitude: 2 }})
   }
   
    $(function(){
@@ -120,43 +146,6 @@ button.active{
       }
     })
   })
-  
-
-  // L.marker([51.5, -0.09]).addTo(map)
-  // 
-  //   .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
-  // 
-  // L.circle([51.508, -0.11], 500, {
-  // 
-  //   color: 'red',
-  // 
-  //   fillColor: '#f03',
-  // 
-  //   fillOpacity: 0.5
-  // 
-  // }).addTo(map).bindPopup("I am a circle.");
-  // 
-  // L.polygon([
-  // 
-  //   [51.509, -0.08],
-  // 
-  //   [51.503, -0.06],
-  // 
-  //   [51.51, -0.047]
-  // 
-  // ]).addTo(map).bindPopup("I am a polygon.");
-  
-  // L.MultiPolyline([[51.509, -0.08],[51.503, -0.06],[51.51, -0.047]]).addTo(map)
-  // 
-  // var popup = L.popup();
-  // 
-  // function onMapClick(e) {
-  //   popup
-  //     .setLatLng(e.latlng)
-  //     .setContent("You clicked the map at " + e.latlng.toString())
-  //     .openOn(map);
-  // }
-  // map.on('click', onMapClick);
 </script>
 </body>
 </html>
diff --git a/package.json b/package.json
index 7bc256c..ca7a101 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "ar-drone": "git://github.com/andrew/node-ar-drone.git#gps",
     "node-vincenty": "0.0.6",
     "socket.io": "~0.9.16",
-    "express": "~3.4.0"
+    "express": "~3.4.0",
+    "dronestream": "~1.1.1"
   },
   "devDependencies": {},
   "scripts": {
diff --git a/server.js b/server.js
index 0e26669..ed6c0bd 100644
--- a/server.js
+++ b/server.js
@@ -16,6 +16,8 @@ app.get('/phone', function(req, res) {
 
 server.listen(8080);
 
+require("dronestream").listen(server);
+
 io.sockets.on('connection', function(socket) {
   console.log('connection')
 
