fully working lookangles

Author: rossengeorgiev

css/main.css

@@ -66,6 +66,13 @@ body {
     line-height: 14px;
 }
 
+.slickbox div {
+    font-size: 14px;
+    margin-top: 3px;
+    width: 180px;
+    text-align: center;
+}
+
 .slickbox svg path {
     -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;

index.html

@@ -249,10 +249,12 @@ <h2>Chase car mode</h2>
             <svg width="40" height="40" viewbox="0 0 200 200" version="1.1" class="lfloat">
 <path d="M100,0c-55.228,0-100,44.772-100,100,0,55.23,44.772,100,100,100,55.23,0,100-44.77,100-100,0-55.228-44.77-100-100-100zm0,10c49.71,0,90,40.294,90,90,0,49.71-40.29,90-90,90-49.706,0-90-40.29-90-90,0-49.706,40.294-90,90-90zm-2.062,10c-43.229,1.095-77.938,36.508-77.938,80,0,44.18,35.817,80,80,80,44.18,0,80-35.82,80-80,0-44.183-35.82-80-80-80-0.69,0-1.376-0.017-2.062,0zm-14.219,9.469h7.969l16.092,27.187,0.16-0.031v-27.156h7.97v39.812h-7.97l-16.065-27.187h-0.187v27.187h-7.969v-39.812zm16.281,44.593l6.94,19,19,6.938-19,6.94-6.94,19-6.938-19-19-6.94,19-6.938,6.938-19zm-72.781,5.876h7.812l5.719,27.252,0.156,0.03,7.469-27.282h5.875l7.531,27.282h0.157l5.687-27.282h7.813l-9.313,39.812h-7.406l-7.313-26.281h-0.156l-7.312,26.281h-7.407l-9.312-39.812zm107.75,0h27.22v6.156h-19.25v10h16.5v6.156h-16.5v11.37h19.28v6.13h-27.25v-39.812zm-34.56,51.502c4.37,0,7.93,1.17,10.68,3.5,2.76,2.32,4.09,5.18,4,8.59l-0.06,0.16h-7.75c0-1.84-0.61-3.33-1.84-4.47s-2.97-1.69-5.19-1.69c-2.133,0-3.771,0.46-4.938,1.41-1.166,0.95-1.75,2.18-1.75,3.65,0,1.35,0.627,2.45,1.876,3.32,1.248,0.86,3.406,1.78,6.472,2.75,4.39,1.22,7.7,2.83,9.97,4.84,2.26,2.01,3.4,4.64,3.4,7.91,0,3.41-1.34,6.09-4.03,8.06s-6.24,2.94-10.66,2.94c-4.335,0-8.113-1.11-11.34-3.35-3.227-2.23-4.81-5.38-4.719-9.4l0.063-0.16h7.75c0,2.37,0.738,4.12,2.187,5.22s3.474,1.66,6.059,1.66c2.17,0,3.82-0.46,4.97-1.35s1.72-2.1,1.72-3.59c0-1.53-0.54-2.76-1.62-3.69-1.09-0.93-2.98-1.8-5.691-2.63-4.74-1.36-8.326-2.99-10.75-4.87-2.425-1.88-3.657-4.42-3.657-7.69,0-3.26,1.408-5.93,4.188-8s6.336-3.12,10.66-3.12z" />
             </svg>
-            <span class="azimuth lfloat">Azimuth: 360.0000</span>
-            <span class="bearing rfloat">0° N</span>
-            <span class="elevation lfloat">Elevation: 90.0000</span>
-            <span class="range rfloat">10000 km</span>
+            <span class="azimuth lfloat" style="display: none">Azimuth: 360.0000</span>
+            <span class="bearing rfloat" style="display: none">0° N</span>
+            <span class="elevation lfloat" style="display: none">Elevation: 90.0000</span>
+            <span class="range rfloat" style="display: none">10000 km</span>
+            <div class="nopos lfloat" style="display: none">No position available</div>
+            <div class="nofollow lfloat" style="display: none">No vehicle selected</div>
         </div>
 
         <div id="map"></div>

js/app.js

@@ -214,6 +214,9 @@ var positionUpdateHandle = function(position) {
             GPS_ts = parseInt(position.timestamp/1000);
             $('#cc_timestamp').text('just now');
 
+            // update look angles once we get position
+            if(follow_vehicle > -1) { update_lookangles(follow_vehicle); }
+
             if(CHASE_enabled) {
                 ChaseCar.updatePosition(callsign, position);
                 CHASE_timer = (new Date()).getTime() + 15000;

js/tracker.js

@@ -132,6 +132,11 @@ function calculate_lookangles(a, b) {
 }
 
 function update_lookangles(idx) {
+    if(GPS_ts == null) { return; }
+    else if($("#lookanglesbox span").first().is(":hidden")) {
+        $("#lookanglesbox div").hide().parent().find("span").show();
+    }
+
     var a = {lat: GPS_lat, lon: GPS_lon, alt: GPS_alt};
 
     var xref = vehicles[idx].curr_position;
@@ -203,7 +208,11 @@ function load() {
 
         // animate lookanglesbox, delayed start by 300ms
         $("#lookanglesbox").delay(200).fadeIn(500,"easeOut").animate({width:origW},400,"easeOut", function() {
-          $("#lookanglesbox span").fadeIn(500, "easeOut");
+          if(GPS_ts == null) {
+              $("#lookanglesbox .nopos").fadeIn(500, "easeOut");
+          } else if($("#lookanglesbox span:first").is(":hidden")) {
+              $("#lookanglesbox .nofollow").fadeIn(500, "easeOut");
+          }
         });
     }, 500);
 
@@ -365,6 +374,9 @@ function stopFollow() {
         // reset nite overlay
         nite.setDate(null);
         nite.refresh();
+
+        // update lookangles box
+        $("#lookanglesbox span").hide().parent().find(".nofollow").show();
     }
 }