Skip to content

Commit 2ad5c70

Browse files
rossengeorgievrossengeorgiev
committed
added telemetry graph; only availabe on desktops
* telemetry graph is a plot of altitude, and any addtional numeric data for the payload * only available for payloads * plot spans over the whole flight * plot can be zoomed by making a selection using click&drag * double click will reset zoom/selection * mouseover will display values at the specific time * graph starts collapsed and can be made visisble using a button at the lower left corner of the map
1 parent 2779ae2 commit 2ad5c70

File tree

9 files changed

+3731
-39
lines changed

9 files changed

+3731
-39
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
*.swp
22
js/mobile.js
3+
js/init_plot.js
34
css/mobile.css

‎build.sh‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ echo "Done!"
1313
#compile javascript
1414
echo -n "Compiling JavaScript... "
1515
cd js
16-
rm -f mobile.js
16+
rm -f mobile.js init_plot.js
1717
# precompiled libs
1818
cat jquery* iscroll.js >> mobile.js
1919

@@ -25,6 +25,10 @@ java -jar "../tools/yuicompressor-2.4.8pre.jar" --type=js --disable-optimization
2525
java -jar "../tools/yuicompressor-2.4.8pre.jar" --type=js --disable-optimizations --nomunge tracker.js >> mobile.js
2626
java -jar "../tools/yuicompressor-2.4.8pre.jar" --type=js --disable-optimizations --nomunge app.js >> mobile.js
2727

28+
#compile plot lib and config
29+
java -jar "../tools/yuicompressor-2.4.8pre.jar" --type=js --disable-optimizations --nomunge jquery.flot.js >> init_plot.js
30+
java -jar "../tools/yuicompressor-2.4.8pre.jar" --type=js --disable-optimizations --nomunge plot_config.js >> init_plot.js
31+
2832
cd ..
2933
echo "Done!"
3034
echo -n "Increment cache version... "

‎cache.manifest‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
CACHE MANIFEST
2-
# version 46
2+
# version 50
33

44
# gogole maps files
55
http://maps.google.com/maps/api/js?v=3.10&sensor=false&key=AIzaSyCOqkcNey4CCyG4X0X5qxHAhCgD8g5DwXg
@@ -54,6 +54,7 @@ img/markers/target-red.png
5454
img/markers/target-yellow.png
5555
css/mobile.css
5656
js/mobile.js
57+
js/init_plot.js
5758
font/HabitatFont.eot
5859
font/HabitatFont.svg
5960
font/HabitatFont.ttf

‎css/main.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -335,9 +335,36 @@ header > div {
335335
top: 3px;
336336
}
337337

338+
#telemetry_graph {
339+
display: none;
340+
}
341+
338342
@media only screen and (min-width: 321px) {
339343
.portrait { display: none; }
340344
.landscape { display: block; }
345+
#telemetry_graph {
346+
display: block;
347+
float: right;
348+
height: 200px;
349+
width: 280px;
350+
background: #fff;
351+
position: relative;
352+
}
353+
#telemetry_graph .graph_label {
354+
position: absolute;
355+
top: -21px;
356+
left: 0px;
357+
height: 21px;
358+
padding: 0px 5px;
359+
background: #00a3d3;
360+
z-index: 20;
361+
font-weight: bold;
362+
font-size: 11px;
363+
color: #fff;
364+
border-radius: 0px 5px 0 0;
365+
box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.2);
366+
cursor: pointer;
367+
}
341368
#map {
342369
float: right;
343370
height: 245px;

‎index.html‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en" manifest="cache.manifest">
2+
<html lang="en">
33
<head>
44
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
55
<title>habitat mobile tracker</title>
@@ -10,6 +10,13 @@
1010
<meta name="apple-mobile-web-app-capable" content="yes" />
1111
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
1212
<link rel="apple-touch-icon" sizes="144x144" href="img/apple-touch-icon.png" />
13+
<!--
14+
<link rel="stylesheet" href="css/base.css"/>
15+
<link rel="stylesheet" href="css/skeleton.css"/>
16+
<link rel="stylesheet" href="css/layout.css"/>
17+
<link rel="stylesheet" href="css/habitat-font.css"/>
18+
<link rel="stylesheet" href="css/main.css"/>
19+
-->
1320
<link rel="stylesheet" href="css/mobile.css"/>
1421
<link rel="shortcut icon" href="favicon.ico" />
1522
</head>
@@ -61,40 +68,40 @@ <h2>Settings</h2>
6168
<div class="switch off" id="sw_daylight">
6269
<span class="thumb"></span>
6370
<input type="checkbox" id="opt_daylight">
64-
</div>
71+
</div>
6572
</div>
6673
<div class="row option">
6774
<span><b>Imperial units</b></span>
6875
<div class="switch off" id="sw_imperial">
6976
<span class="thumb"></span>
7077
<input type="checkbox" id="opt_imperial">
71-
</div>
78+
</div>
7279
</div>
7380
<div class="row option">
7481
<span><b>Availability offline</b></span>
7582
<div class="switch off" id="sw_offline">
7683
<span class="thumb"></span>
7784
<input type="checkbox" id="opt_offline">
78-
</div>
85+
</div>
7986
</div>
8087
<div class="row option">
8188
<span><b>Mobile station</b></span>
8289
<div class="switch off" id="sw_station">
8390
<span class="thumb"></span>
8491
<input type="checkbox" id="opt_station">
85-
</div>
92+
</div>
8693
</div>
8794
<div class="row info">
8895
<span>
89-
Chase car equipped with radio reciever
96+
Chase car equipped with radio reciever
9097
</span>
9198
</div>
9299
<div class="row option">
93100
<span><b>Force refresh cache</b></span>
94101
<div class="switch off" id="sw_cache">
95102
<span class="thumb"></span>
96103
<input type="checkbox" id="opt_cache">
97-
</div>
104+
</div>
98105
</div>
99106
<div class="row info">
100107
<span>
@@ -113,7 +120,7 @@ <h2>Chase car mode</h2>
113120
<div class="switch off" id="sw_chasecar">
114121
<span class="thumb"></span>
115122
<input type="checkbox" id="chasecar_on">
116-
</div>
123+
</div>
117124
</div>
118125
<div class="row option">
119126
<span>Callsign</span>
@@ -147,18 +154,22 @@ <h2>Chase car mode</h2>
147154
<span>Speed</span>
148155
<span class="r" id="cc_speed">none</span>
149156
</div>
150-
</div>
157+
</div>
151158
</div>
152-
<div id="map" style="dispaly: none"></div>
153-
<div id="main" style="dispaly: none">
159+
<div id="map" style="dispaly: none" class="main_screen"></div>
160+
<div id="main" style="dispaly: none" class="main_screen">
154161
<div class="scrollwrapper">
155-
<div class="portrait">
156-
<div class="row vehicle0"><div class="header empty"><span>No vehicles :(</span></div></div>
157-
</div>
158-
<div class="landscape">
159-
<div class="row vehicle0"><div class="header empty"><span>No vehicles :(</span></div></div>
162+
<div class="portrait">
163+
<div class="row vehicle0"><div class="header empty"><span>No vehicles :(</span></div></div>
164+
</div>
165+
<div class="landscape">
166+
<div class="row vehicle0"><div class="header empty"><span>No vehicles :(</span></div></div>
167+
</div>
160168
</div>
161169
</div>
170+
<div id="telemetry_graph" style="display: none">
171+
<div class="graph_label">Telemetry Graph</div>
172+
<div class="holder" style="height: 200px;width: 50px"></div>
162173
</div>
163174
<script src="http://maps.google.com/maps/api/js?v=3.10&sensor=false&key=AIzaSyCOqkcNey4CCyG4X0X5qxHAhCgD8g5DwXg" type="text/javascript"></script>
164175
<script type="text/javascript" language="javascript" src="js/mobile.js"></script>

‎js/app.js‎

Lines changed: 42 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
1+
// detect if mobile
2+
var is_mobile = false;
3+
4+
if(
5+
navigator.userAgent.match(/Android/i)
6+
|| navigator.userAgent.match(/iPhone/i)
7+
|| navigator.userAgent.match(/iPod/i)
8+
|| navigator.userAgent.match(/iPad/i)
9+
|| navigator.userAgent.match(/Windows Phone/i)
10+
|| navigator.userAgent.match(/webOS/i)
11+
|| navigator.userAgent.match(/BlackBerry/i)
12+
) is_mobile = true;
13+
114
// handle cachin events and display a loading bar
215
var loadReload = false;
316
var loadComplete = function(e) {
@@ -17,8 +30,14 @@ var loadComplete = function(e) {
1730
function trackerInit() {
1831
$('#loading,#settingsbox,#aboutbox,#chasebox').hide(); // welcome screen
1932
$('header,#main,#map').show(); // interface elements
33+
34+
if(!is_mobile) {
35+
$('<script type="text/javascript" language="javascript" src="js/init_plot.js"></script>').appendTo('body');
36+
$('#telemetry_graph').addClass("main_screen").attr('style','');
37+
}
2038
checkSize();
2139

40+
2241
if(!map) load();
2342
}
2443

@@ -56,9 +75,14 @@ function checkSize() {
5675
$('.container').width(w-20);
5776

5877
if($('.landscape:visible').length) {
59-
$('#main,#map').height(h-hh-5);
78+
$('#main').height(h-hh-5);
79+
if($('#telemetry_graph .graph_label').hasClass('active')) {
80+
$('#map').height(h-hh-5-200);
81+
} else {
82+
$('#map').height(h-hh-5);
83+
}
6084
$('body,#loading').height(h);
61-
$('#map').width(w-sw-1);
85+
$('#map,#telemetry_graph,#telemetry_graph .holder').width(w-sw-1);
6286
} else { // portrait mode
6387
if(h < 420) h = 420;
6488
$('body,#loading').height(h);
@@ -74,20 +98,6 @@ function checkSize() {
7498
window.onresize = checkSize;
7599
window.onchangeorientation = checkSize;
76100

77-
// detect if mobile
78-
var is_mobile = false;
79-
80-
if(
81-
navigator.userAgent.match(/Android/i)
82-
|| navigator.userAgent.match(/iPhone/i)
83-
|| navigator.userAgent.match(/iPod/i)
84-
|| navigator.userAgent.match(/iPad/i)
85-
|| navigator.userAgent.match(/Windows Phone/i)
86-
|| navigator.userAgent.match(/webOS/i)
87-
|| navigator.userAgent.match(/BlackBerry/i)
88-
) is_mobile = true;
89-
90-
91101

92102
// functions
93103

@@ -181,6 +191,18 @@ $(window).ready(function() {
181191
// add inline scroll to vehicle list
182192
listScroll = new iScroll('main', { hScrollbar: false, hScroll: false, snap: false, scrollbarClass: 'scrollStyle' });
183193

194+
$('#telemetry_graph').on('click', '.graph_label', function() {
195+
var e = $(this);
196+
if(e.hasClass('active')) {
197+
e.removeClass('active');
198+
var h = $('#map').height() + $('#telemetry_graph').height();
199+
} else {
200+
e.addClass('active');
201+
var h = $('#map').height() - $('#telemetry_graph').height();
202+
}
203+
$('#map').stop(null,null).animate({'height': h});
204+
});
205+
184206
// confirm dialog when launchnig a native map app with coordinates
185207
$('#main').on('click', '#launch_mapapp', function() {
186208
return confirm("Launch your maps app?");
@@ -222,7 +244,7 @@ $(window).ready(function() {
222244
$('.nav')
223245
.on('click', '.home', function() {
224246
var e = $(this);
225-
var box = $('#main,#map');
247+
var box = $('.main_screen');
226248
if(box.is(':hidden')) {
227249
$('#chasecarbox,#aboutbox,#settingsbox').hide();
228250
box.show();
@@ -233,7 +255,7 @@ $(window).ready(function() {
233255
var e = $(this);
234256
var box = $('#chasecarbox');
235257
if(box.is(':hidden')) {
236-
$('#map,#main,#aboutbox,#settingsbox').hide();
258+
$('.main_screen,#aboutbox,#settingsbox').hide();
237259
box.show();
238260
}
239261
checkSize();
@@ -242,7 +264,7 @@ $(window).ready(function() {
242264
var e = $(this);
243265
var box = $('#aboutbox');
244266
if(box.is(':hidden')) {
245-
$('#map,#main,#chasecarbox,#settingsbox').hide();
267+
$('.main_screen,#chasecarbox,#settingsbox').hide();
246268
box.show();
247269
}
248270
checkSize();
@@ -251,7 +273,7 @@ $(window).ready(function() {
251273
var e = $(this);
252274
var box = $('#settingsbox');
253275
if(box.is(':hidden')) {
254-
$('#map,#main,#chasecarbox,#aboutbox').hide();
276+
$('.main_screen,#chasecarbox,#aboutbox').hide();
255277
box.show();
256278
}
257279
});

0 commit comments

Comments
 (0)