added altitude profile

Author: rossengeorgiev

cache.manifest

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# version 25
+# version 26
 
 # gogole maps files
 http://maps.google.com/maps/api/js?v=3.10&sensor=false&key=AIzaSyCOqkcNey4CCyG4X0X5qxHAhCgD8g5DwXg
@@ -17,6 +17,7 @@ http://maps.gstatic.com/mapfiles/arrow-down.png
 
 # app files
 img/logo.png
+img/blank.png
 img/marker-you.png
 img/markers/antenna-green.png
 img/markers/balloon-blue.png

css/main.css

@@ -121,11 +121,17 @@ header > div {
     float: right;
     color: #aaa;
     }
-#main .header span {
-    overflow: hidden; 
-    display: block;
-    width: 90%;
-    float: left;
+#main .header {
+    height: 20px;
+    padding: 10px;
+    border-bottom: 2px solid #33b5e5;
+    position: relative;
+    z-index: 4;
+    cursor: pointer;
+    background-color: #fff;
+}
+#main .vehicle0 .header {
+    border-top: 2px solid #33b5e5;
 }
 #main .header.empty {
     text-align: center;
@@ -134,6 +140,12 @@ header > div {
     line-height: 100px;
     border: 0;
 }
+#main .header span {
+    overflow: hidden; 
+    display: block;
+    width: 90%;
+    float: left;
+}
 .row .header .arrow:after { content: "▲"; }
 .row.active .header .arrow:after { content: "▼"; }
 
@@ -144,10 +156,6 @@ header > div {
     position: relative;
 }
 #main .row .header {
-    position: relative;
-    z-index: 4;
-    cursor: pointer;
-    background-color: #fff;
  }
 #main .row:hover .header { color: #33b5e5; font-weight: bold; }
 #main .row .data { display: none; width: 100%; }
@@ -159,11 +167,18 @@ header > div {
 }
 #main .row .data img { 
     position: absolute;
-    z-index: 3;
+    z-index: 2;
     bottom: 40%;
     right: 25%;
     opacity: 0.6;
 }
+#main .row .header .graph { 
+    position: absolute;
+    bottom: -1px;
+    right: 25px;
+    width: 60px;
+    height: 40px;
+}
 #main .row .data dt > i { 
     font-size: 12px;
 }
@@ -315,11 +330,6 @@ header > div {
         border-right: 1px solid #ddd;
         overflow: hidden;
     }
-    #main .header {
-        height: 20px;
-        padding: 10px;
-        border-bottom: 2px solid #33b5e5;
-    }
     #main .data {
         height: 100%;
         padding-bottom: 5px;
@@ -364,11 +374,6 @@ header > div {
     #main {
         height: 180px;
     }
-    #main .header {
-        height: 20px;
-        padding: 10px;
-        border-bottom: 2px solid #33b5e5;
-    }
     #main .data {
         height: 140px;
     }
@@ -404,5 +409,8 @@ header > div {
     #main .data dl > dd.receivers { 
         font-size: 10px;
     }
+    #main .row .header .graph { 
+        width: 150px;
+    }
 }
 

css/mobile.css

@@ -8,6 +8,8 @@ var markers_url = "img/markers/";
 var vehicle_names = [];
 var vehicles = [];
 
+var graph_url = "http://chart.googleapis.com/chart?chf=bg,s,67676700&chxr=0,0,46|1,0,0|2,0,45&chxs=0,676767,0,0,_,000000|1,676767,0,0,t,676767|2,676767,0,0,_,676767&chxt=r,y,x&chs=150x40&cht=lc&chco=33B5E5&chds=0,{AA}&chls=2&chm=B,33B5E533,0,0,0,-1&chd=t:";
+
 var receiver_names = [];
 var receivers = [];  
 
@@ -362,7 +364,10 @@ function updateVehicleInfo(index, position) {
 
 
   // start
-  var a    = '<div class="header"><span>' + vehicle_names[index] + '</span><i class="arrow"></i></div>'
+  var a    = '<div class="header">'
+           + '<span>' + vehicle_names[index] + '</span>'
+           + '<img class="graph" src="img/blank.png">'
+           + '<i class="arrow"></i></div>'
            + '<div class="data">'
            + '<img src="'+image+'" />'
            + '<div class="left">'
@@ -675,12 +680,13 @@ function addPosition(position) {
                             prediction: null,
                             ascent_rate: 0.0,
                             max_alt: parseFloat(position.gps_alt),
-                            alt_data: new Array(),
                             path_enabled: vehicle_type == "balloon" && position.vehicle.toLowerCase().indexOf("iss") == -1,
                             follow: false,
                             color_index: c,
                             prediction_traget: null,
                             prediction_burst: null,
+                            alt_list: [0],
+                            alt_rate: 0
                             };
         vehicles.push(vehicle_info);
     }
@@ -708,6 +714,13 @@ function addPosition(position) {
                     rate = (position.gps_alt - vehicle.curr_position.gps_alt) / dt;
                     vehicle.ascent_rate = 0.7 * rate
                                           + 0.3 * vehicles[vehicle_index].ascent_rate;
+
+                    if(Math.abs(vehicle.alt_rate - rate) >= 0.5) {
+                        vehicle.alt_rate = rate;
+                        vehicle.alt_list.push(parseInt(vehicle.curr_position.gps_alt));
+                    } else {
+                        vehicle.alt_list[vehicle.alt_list.length-1] = parseInt(vehicle.curr_position.gps_alt);
+                    }
                 }
 
                 if(vehicle.curr_position.gps_lat != position.gps_lat
@@ -946,6 +959,8 @@ function update(response) {
       for (vehicle_index = 0; vehicle_index < vehicle_names.length; vehicle_index++) {
 	  	updatePolyline(vehicle_index);
 	    updateVehicleInfo(vehicle_index, vehicles[vehicle_index].curr_position);
+        
+        $('.vehicle'+vehicle_index+' .graph').attr('src', graph_url.replace("{AA}",vehicles[vehicle_index].max_alt)  + vehicles[vehicle_index].alt_list.join(','));
 
         // remember last position for each vehicle
         lastPPointer.push(vehicles[vehicle_index].curr_position);