update for mobile devices

rossengeorgiev · rossengeorgiev · commit 25b6ac277424 · 2014-08-06T18:36:34.000+01:00
* mobile devies will start is latestonly mode, which will only display
  the latest position for each vehicle and no path.

* There is a link in the settings page that will allow for the whole
  paths to be displayed, if the device is powerful enough

* a number of layout changes for tiny screen phones
diff --git a/css/layout.css b/css/layout.css
@@ -42,10 +42,6 @@ header h1{
     float: left;
 }
 
-header span#app_name {
-    float: right;
-}
-
 /* Grey Area */
 #grey-section{
     width: 100%;
diff --git a/css/main.css b/css/main.css
@@ -178,9 +178,12 @@ header {
 }
 #app_name {
     line-height: normal;
-    margin-top: 10px;
-    position: relative;
+    margin-top: 6px;
+    position: absolute;
+    right: 30px;
     height: 40px;
+    text-align: right;
+    cursor: pointer;
 }
 header > div {
     position: relative;
@@ -219,12 +222,13 @@ header > div {
 }
 
 #locate-me {
-    float: right;
+    position: absolute;
+    right: 0px;
+    top: 12px;
     font-size: 25px;
-    height: 45px;
-    line-height: 50px;
-    margin-top: 5px;
-    margin-left: 5px;
+    height: 25px;
+    width: 25px;
+    line-height: 25px;
     cursor: pointer;
 }
 
@@ -460,23 +464,23 @@ header > div {
     position: relative;
     margin: 20px auto;
     width: 290px;
-    padding-left: 5px;
-    padding-right: 5px;
 }
 .slimContainer hr {
     margin-bottom: 10px;
 }
 .slimContainer .row {
-    width: 100%;
+    width: 280px;
     display: block;
     margin: 5px;
     vertical-align: middle;
+    position: relative;
 }
 .slimContainer .row.info {
     margin-top: 10px;
 }
 .slimContainer .row > span {
     float: left;
+    width: 200px;
 }
 .slimContainer .row.option > span {
     line-height: 30px;
@@ -488,7 +492,8 @@ header > div {
 /* iOS styled switch buttons
  */
 .switch {
-    float: right;
+    position: absolute;
+    right: 0px;
     height: 28px;
     width: 77px;
     border: 1px solid #979797;
@@ -688,5 +693,11 @@ header > div {
         width: 150px;
         height: 40px;
     }
+    #locate-me {
+        display: none;
+    }
+    #app_name {
+        right: 0px;
+    }
 }
 
diff --git a/index.html b/index.html
@@ -40,12 +40,12 @@
                 <li class="chasecar" style="display: none"><i class="icon-car"></i></li>
                 <li class="settings"><i class="icon-settings"></i></li>
                 <li class="weather">
-                    <svg width="100%" height="100%" viewbox="0 0 35 40" version="1.1">
+                    <svg width="100%" height="100%" viewbox="0 0 35 40" xmlns="http://www.w3.org/2000/svg" version="1.1" version="1.1">
                         <path style="fill:#ffffff;" d="M 18.28125,5 C 17.665689,5.1577701 18.03897,6.072102 17.9375,6.6048171 17.961629,7.7933649 17.891319,9.0210305 17.96875,10.1875 18.260664,10.655295 18.988694,10.16755 19.495121,10.179003 19.915569,10.180314 20.482932,9.9817615 20.218593,9.5070668 19.685242,8.0689805 19.166647,6.5372411 18.625,5.15625 18.528924,5.0654291 18.420762,5.0014609 18.28125,5 z M 28.15625,6.78125 C 27.636383,7.0532274 27.291342,7.7650855 26.831767,8.2022559 26.183602,9.0036626 25.432231,9.7753304 24.84375,10.59375 24.760617,11.249334 25.657959,11.271078 26.078986,11.644576 26.390422,11.953835 26.933703,11.952146 27.000157,11.538317 27.50744,10.067568 28.117357,8.594139 28.5625,7.125 28.492656,6.9017107 28.410263,6.7690543 28.15625,6.78125 z M 9.5,10 C 9.0954231,10.135594 9.2373811,10.695886 9.5795967,10.908518 10.537018,12.015516 11.460558,13.256267 12.4375,14.28125 13.029751,14.410245 13.239648,13.580555 13.666521,13.22967 13.9948,13.00156 14.131018,12.482443 13.78125,12.375 12.489706,11.554805 11.012447,10.783392 9.71875,10 9.6458333,10 9.5729167,10 9.5,10 z M 20.84375,11.84375 C 18.371908,11.824599 15.919598,13.01633 14.4375,15 11.081301,15.152911 7.9058815,17.160924 6.28125,20.09375 2.2666586,20.646663 -0.69921244,24.862902 0.11714748,28.826804 0.69396943,32.528614 4.3500351,35.295394 8.0531848,35 13.498142,34.979277 18.945738,35.041925 24.389003,34.967703 28.012052,34.706771 30.775569,30.845122 29.836019,27.330847 29.833738,25.300645 26.765497,24.336816 28.355407,22.48894 29.815113,18.665861 27.745092,13.988203 23.952748,12.472903 22.972942,12.055889 21.908328,11.842683 20.84375,11.84375 z M 20.21875,13.59375 C 23.527165,13.23952 26.784739,15.868299 27.030581,19.205159 27.115191,20.410269 26.970056,22.322167 26.040039,22.926528 23.85825,22.779121 24.34015,19.916014 22.792045,18.711734 21.278161,16.832506 19.06924,15.524713 16.6875,15.125 17.664583,14.25896 18.917452,13.711132 20.21875,13.59375 z M 34.53125,14.5 C 32.976676,14.79175 31.359523,14.999412 29.84375,15.34375 29.432201,15.70465 29.988892,16.309044 30.057328,16.768486 30.153946,17.218356 30.409976,17.817605 30.892161,17.453583 32.226329,16.650798 33.669292,15.884461 34.9375,15.0625 35.138066,14.780605 34.838029,14.456276 34.53125,14.5 z M 15,16.75 C 18.527258,16.691328 21.880457,19.184293 22.875,22.5625 21.79535,22.747412 19.681154,23.400321 19.66679,24.380589 20.173956,24.71003 20.627331,25.845369 21.195407,25.029384 23.413999,23.416094 26.91018,24.431242 27.896354,26.999192 29.087621,29.561636 27.239462,32.866375 24.435283,33.198105 21.16923,33.314717 17.892696,33.218673 14.62245,33.25 11.957151,33.213512 9.2843705,33.327734 6.6243627,33.183689 3.2643734,32.772467 0.9055326,29.012617 2.003206,25.808244 2.6850371,23.482227 4.9843514,21.775323 7.40625,21.78125 8.6597695,18.794322 11.749593,16.71468 15,16.75 z M 30.46875,22.1875 C 30.056841,22.438736 30.028318,23.215643 29.779714,23.682554 29.505486,24.023058 29.684998,24.517691 30.15025,24.501295 31.642521,24.753547 33.129447,25.065901 34.625,25.28125 35.096754,25.222871 35.037983,24.560567 34.590363,24.47021 33.258254,23.721082 31.923603,22.888061 30.59375,22.1875 30.552083,22.1875 30.510417,22.1875 30.46875,22.1875 z"></path>
                     </svg>
                 </li>
                 <li class="embed">
-                    <svg width="100%" height="100%" viewbox="0 0 35 40" version="1.1">
+                    <svg width="100%" height="100%" viewbox="0 0 35 40" xmlns="http://www.w3.org/2000/svg" version="1.1" version="1.1">
                     <path style="fill:#ffffff;" d="m19.188,4.0378c-1.698,10.6-3.396,21.2-5.094,31.8,1.478,0.9,2.037-0.6,2.024-1.7,1.607-10.1,3.213-20.1,4.82-30.1h-1.75zm-6.469,5.3c-3.9064,3-7.8129,6-11.719,9v3.7c3.9045,3,7.8143,6,11.719,9v-3.9c-3.0949-2.3-6.1868-4.6-9.2815-7,3.0937-2.3,6.1875-4.6,9.2815-6.9v-3.9zm9.562,0v3.9c3.094,2.3,6.188,4.6,9.281,6.9-3.093,2.4-6.187,4.7-9.281,7v3.9c3.905-3,7.814-6,11.719-9v-3.7c-3.906-3-7.813-6-11.719-9z"></path>
                     </svg>
                 </li>
@@ -59,7 +59,7 @@
     <div id="embedbox" style="display: none" class="flatpage">
         <div class="slimContainer">
             <h2>Embed tracker
-                <svg width="35" height="40" viewbox="0 0 35 40" version="1.1" class="rfloat">
+                <svg width="35" height="40" viewbox="0 0 35 40" xmlns="http://www.w3.org/2000/svg" version="1.1" version="1.1" class="rfloat">
                 <path style="fill:#666666;" d="m19.188,4.0378c-1.698,10.6-3.396,21.2-5.094,31.8,1.478,0.9,2.037-0.6,2.024-1.7,1.607-10.1,3.213-20.1,4.82-30.1h-1.75zm-6.469,5.3c-3.9064,3-7.8129,6-11.719,9v3.7c3.9045,3,7.8143,6,11.719,9v-3.9c-3.0949-2.3-6.1868-4.6-9.2815-7,3.0937-2.3,6.1875-4.6,9.2815-6.9v-3.9zm9.562,0v3.9c3.094,2.3,6.188,4.6,9.281,6.9-3.093,2.4-6.187,4.7-9.281,7v3.9c3.905-3,7.814-6,11.719-9v-3.7c-3.906-3-7.813-6-11.719-9z"></path>
                 </svg>
             </h2>
@@ -104,7 +104,11 @@ <h2>Contribute</h2>
     <div id="settingsbox" style="display: none" class="flatpage">
         <div class="slimContainer">
             <h2><i class="icon-settings rfloat"></i>Settings</h2>
-            <hr>
+            <hr/>
+            <div class="row option" id="latestonly" style="display:none">
+                <p><a href="?latestonly=0&">Click here</a> view the entire flights</p>
+                <hr/>
+            </div>
             <div class="row option">
                 <span><b>Daylight overlay</b></span>
                 <div class="switch off" id="sw_daylight">
@@ -167,7 +171,7 @@ <h2><i class="icon-settings rfloat"></i>Settings</h2>
                 </span>
             </div>
             <div class="row option">
-                <span><b>Force check for new version</b></span>
+                <span><b>Force check for new  version</b></span>
                 <div class="switch off" id="sw_cache">
                     <span class="thumb"></span>
                     <input type="checkbox" id="opt_cache">
@@ -185,7 +189,7 @@ <h2><i class="icon-settings rfloat"></i>Settings</h2>
     <div id="weatherbox" style="display: none" class="flatpage">
         <div class="slimContainer">
             <h2>Weather
-                <svg width="35" height="40" viewbox="0 0 35 40" version="1.1" class="rfloat">
+                <svg width="35" height="40" viewbox="0 0 35 40" xmlns="http://www.w3.org/2000/svg" version="1.1" version="1.1" class="rfloat">
                     <path style="fill:#666666;" d="M 18.28125,5 C 17.665689,5.1577701 18.03897,6.072102 17.9375,6.6048171 17.961629,7.7933649 17.891319,9.0210305 17.96875,10.1875 18.260664,10.655295 18.988694,10.16755 19.495121,10.179003 19.915569,10.180314 20.482932,9.9817615 20.218593,9.5070668 19.685242,8.0689805 19.166647,6.5372411 18.625,5.15625 18.528924,5.0654291 18.420762,5.0014609 18.28125,5 z M 28.15625,6.78125 C 27.636383,7.0532274 27.291342,7.7650855 26.831767,8.2022559 26.183602,9.0036626 25.432231,9.7753304 24.84375,10.59375 24.760617,11.249334 25.657959,11.271078 26.078986,11.644576 26.390422,11.953835 26.933703,11.952146 27.000157,11.538317 27.50744,10.067568 28.117357,8.594139 28.5625,7.125 28.492656,6.9017107 28.410263,6.7690543 28.15625,6.78125 z M 9.5,10 C 9.0954231,10.135594 9.2373811,10.695886 9.5795967,10.908518 10.537018,12.015516 11.460558,13.256267 12.4375,14.28125 13.029751,14.410245 13.239648,13.580555 13.666521,13.22967 13.9948,13.00156 14.131018,12.482443 13.78125,12.375 12.489706,11.554805 11.012447,10.783392 9.71875,10 9.6458333,10 9.5729167,10 9.5,10 z M 20.84375,11.84375 C 18.371908,11.824599 15.919598,13.01633 14.4375,15 11.081301,15.152911 7.9058815,17.160924 6.28125,20.09375 2.2666586,20.646663 -0.69921244,24.862902 0.11714748,28.826804 0.69396943,32.528614 4.3500351,35.295394 8.0531848,35 13.498142,34.979277 18.945738,35.041925 24.389003,34.967703 28.012052,34.706771 30.775569,30.845122 29.836019,27.330847 29.833738,25.300645 26.765497,24.336816 28.355407,22.48894 29.815113,18.665861 27.745092,13.988203 23.952748,12.472903 22.972942,12.055889 21.908328,11.842683 20.84375,11.84375 z M 20.21875,13.59375 C 23.527165,13.23952 26.784739,15.868299 27.030581,19.205159 27.115191,20.410269 26.970056,22.322167 26.040039,22.926528 23.85825,22.779121 24.34015,19.916014 22.792045,18.711734 21.278161,16.832506 19.06924,15.524713 16.6875,15.125 17.664583,14.25896 18.917452,13.711132 20.21875,13.59375 z M 34.53125,14.5 C 32.976676,14.79175 31.359523,14.999412 29.84375,15.34375 29.432201,15.70465 29.988892,16.309044 30.057328,16.768486 30.153946,17.218356 30.409976,17.817605 30.892161,17.453583 32.226329,16.650798 33.669292,15.884461 34.9375,15.0625 35.138066,14.780605 34.838029,14.456276 34.53125,14.5 z M 15,16.75 C 18.527258,16.691328 21.880457,19.184293 22.875,22.5625 21.79535,22.747412 19.681154,23.400321 19.66679,24.380589 20.173956,24.71003 20.627331,25.845369 21.195407,25.029384 23.413999,23.416094 26.91018,24.431242 27.896354,26.999192 29.087621,29.561636 27.239462,32.866375 24.435283,33.198105 21.16923,33.314717 17.892696,33.218673 14.62245,33.25 11.957151,33.213512 9.2843705,33.327734 6.6243627,33.183689 3.2643734,32.772467 0.9055326,29.012617 2.003206,25.808244 2.6850371,23.482227 4.9843514,21.775323 7.40625,21.78125 8.6597695,18.794322 11.749593,16.71468 15,16.75 z M 30.46875,22.1875 C 30.056841,22.438736 30.028318,23.215643 29.779714,23.682554 29.505486,24.023058 29.684998,24.517691 30.15025,24.501295 31.642521,24.753547 33.129447,25.065901 34.625,25.28125 35.096754,25.222871 35.037983,24.560567 34.590363,24.47021 33.258254,23.721082 31.923603,22.888061 30.59375,22.1875 30.552083,22.1875 30.510417,22.1875 30.46875,22.1875 z" ></path>
                 </svg>
             </h2>
@@ -241,15 +245,15 @@ <h2>Chase car mode</h2>
     <div id="homebox" style="width:0px;height:0px"></div>
     <div id="mapscreen">
         <div id="timebox" class="present slickbox animate" style="display: none">
-            <svg width="40" height="40" viewbox="0 0 200 200" version="1.1" class="lfloat">
+            <svg width="40" height="40" viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1" 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"></path>
             </svg>
             <span class="current lfloat">Current: ???</span>
             <span class="local lfloat">Local: ???</span>
         </div>
 
         <div id="lookanglesbox" class="slickbox animate" style="display: none">
-            <svg width="40" height="40" viewbox="0 0 200 200" version="1.1" class="lfloat">
+            <svg width="40" height="40" viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1" 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"></path>
             </svg>
             <span class="azimuth lfloat" style="display: none">Azimuth: 360.0000</span>
diff --git a/js/app.js b/js/app.js
@@ -20,6 +20,7 @@ var embed = {
     vlist: true,
     graph: true,
     graph_exapnded: false,
+    latestonly: is_mobile
 }
 var params = window.location.search.substring(1).split('&');
 
@@ -34,16 +35,21 @@ for(var idx in params) {
         case "expandgraph": if(line[1] == "1") embed.graph_expanded = true; break;
         case "filter": vfilter = line[1]; break;
         case "nyan": nyan_mode = true; break;
+        case "latestonly": embed.latestonly = (parseInt(line[1]) == 1) ? true : false; break;
     }
 }
 
+if(embed.latestonly) $("#latestonly").show();
+
 if(embed.enabled) {
     //analytics
     if(typeof _gaq == 'object') _gaq.push(['_trackEvent', 'Functionality', 'Embed Opts', window.location.search]);
 }
 
 $.ajaxSetup({ cache: true });
 
+var force_check_cache = false;
+
 // handle cachin events and display a loading bar
 var loadComplete = function(e) {
     clearTimeout(initTimer);
@@ -118,7 +124,7 @@ cache.addEventListener('cached', loadComplete, false);
 cache.addEventListener('error', loadComplete, false);
 
 // if the browser supports progress events, display a loading bar
-cache.addEventListener('checking', function() { clearTimeout(initTimer); $('#loading .bar,#loading').show(); $('#loading .complete').css({width: 0}); }, false);
+cache.addEventListener('checking', function() { if(map && !force_check_cache) return; force_check_cache = false; clearTimeout(initTimer); $('#loading .bar,#loading').show(); $('#loading .complete').css({width: 0}); }, false);
 cache.addEventListener('progress', function(e) { $('#loading .complete').stop(true,true).animate({width: (200/e.total)*e.loaded}); }, false);
 
 var listScroll;
@@ -259,8 +265,8 @@ var positionUpdateHandle = function(position) {
         updateCurrentPosition(lat, lon);
 
         // round the coordinates
-        lat = parseInt(lat * 1000000)/1000000;  // 6 decimal places
-        lon = parseInt(lon * 1000000)/1000000;  // 6 decimal places
+        lat = parseInt(lat * 10000)/10000;  // 4 decimal places (11m accuracy at equator)
+        lon = parseInt(lon * 10000)/10000;  // 4 decimal places
         speed = parseInt(speed * 10)/10;        // 1 decimal place
         accuracy = parseInt(accuracy);
         alt = parseInt(alt);
@@ -644,7 +650,14 @@ $(window).ready(function() {
     $('#sw_cache').click(function() {
         var e = $(this).removeClass('off').addClass('on');
         if(confirm("The app will automatically reload, if new version is available.")) {
-            applicationCache.update();
+            force_check_cache = true;
+
+            try {
+                applicationCache.update();
+            } catch (e) {
+                force_check_cache = false;
+                alert("There is no applicationCache available");
+            }
         }
         e.removeClass('on').addClass('off');
     });
@@ -657,7 +670,7 @@ $(window).ready(function() {
         // if we have geolocation services, show the locate me button
         // the button pants the map to the user current location
         if(is_mobile && !embed.enabled) $(".chasecar").show();
-        $("#locate-me").show().click(function() {
+        $("#locate-me,#app_name").attr('style','').click(function() {
             if(map && currentPosition) {
                 // disable following of vehicles
                 stopFollow();
diff --git a/js/tracker.js b/js/tracker.js
