Merge branch 'feature-lookangles'

* feature-lookangles:
  fixed message showing after stopFollow() with no lock
  show range in meters when under 10km
  fix bug parsing coords as int insteado float
  fully working lookangles
  small code fixups
  calculate and display look angles on pan
  added minibox to display look angles

Author: rossengeorgiev

css/main.css

@@ -46,44 +46,79 @@ body {
     z-index: 49;
 }
 
-#timebox {
+.slickbox {
     z-index: 49;
     background-color: #fff;
     position: absolute;
-    top: 7px;
-    left: 30px;
-    //margin-left: -145px;
     height: 28px;
     width: 225px;
     border-radius: 20px;
     box-shadow: 0 0 5px #888;
     font-size: 11px;
 }
-#timebox svg {
+
+.slickbox svg {
     width: 28px;
     height: 28px;
 }
-#timebox svg path {
+
+.slickbox span {
+    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;
     -ms-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
     fill: #00a3d3;
 }
+
+#timebox {
+    top: 7px;
+    left: 30px;
+}
+
+#lookanglesbox {
+    top: 40px;
+    left: 30px;
+}
+
 #timebox.past svg path {
     fill: #c00;
 }
-#timebox span {
-    line-height: 14px;
-}
 #timebox .current {
     margin-left: 5px;
 }
 #timebox .local {
     margin-left: 15px;
 }
 
+.slickbox .azimuth {
+    margin-left: 9px;
+    width: 100;
+}
+.slickbox .bearing {
+    margin-right: 5px;
+    width: 60px;
+}
+.slickbox .elevation {
+    margin-left: 5px;
+    width: 100px;
+}
+.slickbox .range {
+    margin-right: 5px;
+    width: 60px;
+}
+
 #mapscreen {
     float: right;
     position: relative;

glyphs/icon-compass.svg

@@ -237,14 +237,26 @@ <h2>Chase car mode</h2>
     </div>
     <div id="homebox" style="width:0px;height:0px"></div>
     <div id="mapscreen">
-        <div id="timebox" class="present" style="display: none">
+        <div id="timebox" class="present slickbox" style="display: none">
             <svg width="40" height="40" viewbox="0 0 200 200" version="1.1" class="lfloat">
                   <path d="M99.812,43.188c-2.77,0-5,2.032-5,4.562v40.875c-4.315,1.97-7.312,6.321-7.312,11.375,0,6.9,5.596,12.5,12.5,12.5,1.05,0,2.06-0.16,3.03-0.41l23.35,23.35c2.23,2.24,5.93,2.13,8.28-0.22s2.42-6.04,0.18-8.28l-23-23c0.42-1.24,0.66-2.56,0.66-3.94,0-5.202-3.17-9.68-7.69-11.562v-40.688c0-2.53-2.23-4.562-4.998-4.562zm-5.906-23c0.031-0.003,0.063,0.002,0.094,0v14.374c0,0.236,0.202,0.438,0.438,0.438h11.122c0.24,0,0.44-0.202,0.44-0.438v-14.343c39.4,2.921,70.86,34.381,73.78,73.781h-14.34c-0.24,0-0.44,0.171-0.44,0.406v11.154c0,0.24,0.2,0.44,0.44,0.44h14.34c-2.92,39.4-34.38,70.86-73.78,73.78v-14.37c0-0.24-0.2-0.41-0.44-0.41h-11.122c-0.236,0-0.438,0.17-0.438,0.41v14.37c-39.4-2.92-70.86-34.38-73.781-73.78h14.343c0.236,0,0.438-0.2,0.438-0.44v-11.154c0-0.235-0.202-0.406-0.438-0.406h-14.343c2.918-39.372,34.33-70.848,73.687-73.812zm6.094-10.188c-49.706,0-90,40.294-90,90,0,49.71,40.294,90,90,90,49.71,0,90-40.29,90-90,0-49.706-40.29-90-90-90zm0-10c55.23,0,100,44.772,100,100,0,55.23-44.77,100-100,100-55.228,0-100-44.77-100-100,0-55.228,44.772-100,100-100z" />
             </svg>
             <span class="current lfloat">Current: ???</span>
             <span class="local lfloat">Local: ???</span>
         </div>
 
+        <div id="lookanglesbox" class="slickbox" style="display: none">
+            <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" 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>
 
         <div id="telemetry_graph" style="display: none">

glyphs/icon-compass_simple.svg

@@ -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;
@@ -597,11 +600,11 @@ $(window).ready(function() {
     // The position is displayed in top right corner of the screen
     // This should be very handly for in the field tracking
     //setTimeout(function() {updateCurrentPosition(50.27533, 3.335166);}, 5000);
-    if(navigator.geolocation && is_mobile && !embed.enabled) {
+    if(navigator.geolocation) {
         // if we have geolocation services, show the locate me button
         // the button pants the map to the user current location
-        $("#locate-me,.chasecar").show();
-        $("#locate-me").click(function() {
+        if(is_mobile && !embed.enabled) $(".chasecar").show();
+        $("#locate-me").show().click(function() {
             if(map && currentPosition) {
                 // disable following of vehicles
                 stopFollow();