Skip to content

Commit 4fafe02

Browse files
rossengeorgievrossengeorgiev
committed
added minibox to display look angles
1 parent 6ccf778 commit 4fafe02

File tree

5 files changed

+282
-18
lines changed

5 files changed

+282
-18
lines changed

‎css/main.css‎

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -46,44 +46,72 @@ body {
4646
z-index: 49;
4747
}
4848

49-
#timebox {
49+
.slickbox {
5050
z-index: 49;
5151
background-color: #fff;
5252
position: absolute;
53-
top: 7px;
54-
left: 30px;
55-
//margin-left: -145px;
5653
height: 28px;
5754
width: 225px;
5855
border-radius: 20px;
5956
box-shadow: 0 0 5px #888;
6057
font-size: 11px;
6158
}
62-
#timebox svg {
59+
60+
.slickbox svg {
6361
width: 28px;
6462
height: 28px;
6563
}
66-
#timebox svg path {
64+
65+
.slickbox span {
66+
line-height: 14px;
67+
}
68+
69+
.slickbox svg path {
6770
-webkit-transition: all 0.4s ease-in-out;
6871
-moz-transition: all 0.4s ease-in-out;
6972
-ms-transition: all 0.4s ease-in-out;
7073
-o-transition: all 0.4s ease-in-out;
7174
transition: all 0.4s ease-in-out;
7275
fill: #00a3d3;
7376
}
77+
78+
#timebox {
79+
top: 7px;
80+
left: 30px;
81+
}
82+
83+
#lookanglesbox {
84+
top: 40px;
85+
left: 30px;
86+
}
87+
7488
#timebox.past svg path {
7589
fill: #c00;
7690
}
77-
#timebox span {
78-
line-height: 14px;
79-
}
8091
#timebox .current {
8192
margin-left: 5px;
8293
}
8394
#timebox .local {
8495
margin-left: 15px;
8596
}
8697

98+
.slickbox .azimuth {
99+
margin-left: 9px;
100+
width: 100;
101+
}
102+
.slickbox .bearing {
103+
margin-right: 5px;
104+
width: 60px;
105+
}
106+
.slickbox .elevation {
107+
margin-left: 5px;
108+
width: 100px;
109+
}
110+
.slickbox .range {
111+
margin-right: 5px;
112+
width: 60px;
113+
}
114+
87115
#mapscreen {
88116
float: right;
89117
position: relative;

‎glyphs/icon-compass.svg‎

Lines changed: 192 additions & 0 deletions
Loading

‎glyphs/icon-compass_simple.svg‎

Lines changed: 29 additions & 0 deletions
Loading

‎index.html‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -237,14 +237,24 @@ <h2>Chase car mode</h2>
237237
</div>
238238
<div id="homebox" style="width:0px;height:0px"></div>
239239
<div id="mapscreen">
240-
<div id="timebox" class="present" style="display: none">
240+
<div id="timebox" class="present slickbox" style="display: none">
241241
<svg width="40" height="40" viewbox="0 0 200 200" version="1.1" class="lfloat">
242242
<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" />
243243
</svg>
244244
<span class="current lfloat">Current: ???</span>
245245
<span class="local lfloat">Local: ???</span>
246246
</div>
247247

248+
<div id="lookanglesbox" class="slickbox" style="display: none">
249+
<svg width="40" height="40" viewbox="0 0 200 200" version="1.1" class="lfloat">
250+
<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" />
251+
</svg>
252+
<span class="azimuth lfloat">Azimuth: 360.0000</span>
253+
<span class="bearing rfloat">0° N</span>
254+
<span class="elevation lfloat">Elevation: 90.0000</span>
255+
<span class="range rfloat">10000 km</span>
256+
</div>
257+
248258
<div id="map"></div>
249259

250260
<div id="telemetry_graph" style="display: none">
@@ -263,15 +273,15 @@ <h2>Chase car mode</h2>
263273
</div>
264274
</div>
265275
<script src="http://maps.google.com/maps/api/js?v=3.10&sensor=false&libraries=weather&language=en_us&key=AIzaSyCOqkcNey4CCyG4X0X5qxHAhCgD8g5DwXg" type="text/javascript"></script>
266-
<!--
267276
<script type="text/javascript" language="javascript" src="js/mobile.js"></script>
268-
-->
277+
<!--
269278
<script type="text/javascript" language="javascript" src="js/jquery-1.8.3-min.js"></script>
270279
<script type="text/javascript" language="javascript" src="js/chasecar.lib.js"></script>
271280
<script type="text/javascript" language="javascript" src="js/iscroll.js"></script>
272281
<script type="text/javascript" language="javascript" src="js/nite-overlay.js"></script>
273282
<script type="text/javascript" language="javascript" src="js/tracker.js"></script>
274283
<script type="text/javascript" language="javascript" src="js/app.js"></script>
284+
-->
275285
<script type="text/javascript">
276286

277287
var _gaq = _gaq || [];

‎js/tracker.js‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -118,21 +118,26 @@ function load() {
118118
startAjax();
119119
});
120120

121-
// animate-in the timebox
121+
// animate-in the timebox,
122122
setTimeout(function() {
123123
var elm = $("#timebox");
124124

125-
if(is_mobile) elm.css({left:'5px'});
125+
if(is_mobile) $(".slickbox").css({left:'5px'});
126126
var origW = elm.width();
127127
var iconW = elm.find("svg").width();
128128

129-
elm.find("span").hide();
130-
//elm.css({width:iconW,'margin-left':-iconW/2});
131-
elm.css({width:iconW});
132-
//elm.fadeIn(500,"easeOut").animate({width:origW,'margin-left':-origW/2},400,"easeOut", function() {
129+
// prep for animation
130+
$(".slickbox").css({width:iconW}).find("span").hide();
131+
132+
// animate timebox
133133
elm.fadeIn(500,"easeOut").animate({width:origW},400,"easeOut", function() {
134134
$("#timebox span").fadeIn(500, "easeOut");
135135
});
136+
137+
// animate lookanglesbox, delayed start by 300ms
138+
$("#lookanglesbox").delay(200).fadeIn(500,"easeOut").animate({width:origW},400,"easeOut", function() {
139+
$("#lookanglesbox span").fadeIn(500, "easeOut");
140+
});
136141
}, 500);
137142

138143
// initialize clouds layer

0 commit comments

Comments
 (0)