Added dronestream video

2013-10-01 07:17:50 +01:00
commit 035b57bc26
@@ -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>
@@ -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": {
@@ -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')