← Back to branch summary

~cibersheep/unav/systemcolors

« back to all changes in this revision

Viewing changes to nav/class/UI.js

  • Committer: costales
  • Date: 2016-03-26 18:53:17 UTC
  • Revision ID: costales.marcos@gmail.com-20160326185317-4iau3yhe8986h5pg
Init team

Show diffs side-by-side

added added

removed removed

Lines of Context:
nav/class/UI.js
 
1
/*
 
2
 * uNav http://launchpad.net/unav
 
3
 * Copyright (C) 2015-2016 Marcos Alvarez Costales https://launchpad.net/~costales
 
4
 *
 
5
 * uNav is free software; you can redistribute it and/or modify
 
6
 * it under the terms of the GNU General Public License as published by
 
7
 * the Free Software Foundation; either version 2 of the License, or
 
8
 * (at your option) any later version.
 
9
 * 
 
10
 * uNav is distributed in the hope that it will be useful,
 
11
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 
12
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 
13
 * GNU General Public License for more details.
 
14
 */
 
15
 
 
16
function UI(map, nav, settings, maths, lang) {
 
17
        this.map = map;
 
18
        this.nav = nav;
 
19
        this.settings = settings;
 
20
        this.maths = maths;
 
21
        this.lang = lang;
 
22
        
 
23
        this.pos_prev = new Object();
 
24
                this.pos_prev['lat'] = null;
 
25
                this.pos_prev['lng'] = null;
 
26
        
 
27
        this.center_onpos = true;
 
28
        this.center_1st_pos = true;
 
29
        this.zoom_unav = true;
 
30
        this.map_stretched = true;
 
31
        
 
32
        this.marker_pos = new ol.Overlay({
 
33
                positioning: 'center-center',
 
34
                element: document.getElementById('marker_pos')
 
35
        });
 
36
        this.map.addOverlay(this.marker_pos);
 
37
        $('#marker_pos').click(function () {
 
38
                window.location = 'http://clicked_on_map?' + nav.get_pos_data()['now_lat'] + '/' + nav.get_pos_data()['now_lng'] + '/' + t("Current Position") + '/none/none/follow';
 
39
        });
 
40
        
 
41
        this.marker_start = new ol.Overlay({
 
42
                positioning: 'bottom-center',
 
43
                element: document.getElementById('marker_pos_start')
 
44
        });
 
45
        this.map.addOverlay(this.marker_start);
 
46
        $('#marker_pos_start').click(function () {
 
47
                window.location = 'http://clicked_on_map?' + nav.get_pos_data()['start_lat'] + '/' + nav.get_pos_data()['start_lng'] + '/' + t("Current Start") + '/none/none/nofollow';
 
48
        });
 
49
        
 
50
        this.marker_end = new ol.Overlay({
 
51
                positioning: 'bottom-center',
 
52
                element: document.getElementById('marker_pos_end')
 
53
        });
 
54
        this.map.addOverlay(this.marker_end);
 
55
        $('#marker_pos_end').click(function () {
 
56
                window.location = 'http://clicked_on_map?' + nav.get_pos_data()['end_lat'] + '/' + nav.get_pos_data()['end_lng'] + '/' + t("Current End") + '/none/none/nofollow';
 
57
        });
 
58
 
 
59
        this.markers_POI = [];
 
60
        for (i=0 ; i<50; i++) {
 
61
                var POI = new ol.Overlay({
 
62
                  positioning: 'bottom-center',
 
63
                  element: document.getElementById('POI'+i)
 
64
                });
 
65
                this.markers_POI.push(POI);
 
66
                this.map.addOverlay(this.markers_POI[i]);
 
67
        }
 
68
        this.map_pois_extend = new ol.source.Vector({});
 
69
 
 
70
        this.markers_radar = [];
 
71
        for (i=0 ; i<100; i++) {
 
72
                var radar = new ol.Overlay({
 
73
                  positioning: 'bottom-center',
 
74
                  element: document.getElementById('radar'+i)
 
75
                });
 
76
                this.markers_radar.push(radar);
 
77
                this.map.addOverlay(this.markers_radar[i]);
 
78
        }
 
79
 
 
80
        this.routeSource = new ol.source.Vector({});
 
81
        route_line = new ol.layer.Vector({
 
82
                source: this.routeSource,
 
83
                style: [
 
84
                        new ol.style.Style({
 
85
                                stroke: new ol.style.Stroke({
 
86
                                        color: '#A6BCFF',
 
87
                                        width: 5
 
88
                                })
 
89
                        }),
 
90
                        new ol.style.Style({
 
91
                                stroke: new ol.style.Stroke({
 
92
                                        color: '#4169E1',
 
93
                                        width: 3
 
94
                                })
 
95
                        })
 
96
                ]
 
97
        });
 
98
        this.map.addLayer(route_line);
 
99
        
 
100
        this.scaleline = new ol.control.ScaleLine();
 
101
        this.map.addControl(this.scaleline);
 
102
        
 
103
        // Disable zoom events: Bug https://goo.gl/hxDwa3
 
104
        var interactions = this.map.getInteractions().getArray();
 
105
        var inte1 = interactions.filter(function(interaction) {
 
106
          return interaction instanceof ol.interaction.DoubleClickZoom;
 
107
        })[0];
 
108
        var inte2 = interactions.filter(function(interaction) {
 
109
          return interaction instanceof ol.interaction.PinchZoom;
 
110
        })[0];
 
111
        var inte3 = interactions.filter(function(interaction) {
 
112
          return interaction instanceof ol.interaction.MouseWheelZoom;
 
113
        })[0];
 
114
        inte1.setActive(false);
 
115
        inte2.setActive(false);
 
116
        inte3.setActive(false);
 
117
}
 
118
 
 
119
UI.prototype.ZOOM_CITY = 18;
 
120
UI.prototype.ZOOM_HIGHWAY = 16;
 
121
UI.prototype.ZOOM_POI = 17;
 
122
UI.prototype.LONG_TRACK_HIGHWAY = 2000;
 
123
UI.prototype.LONG_TRACK_CITY = 500;
 
124
UI.prototype.DIST4ROTATION = 3;
 
125
UI.prototype.SPEED4ROTATION = 5;
 
126
UI.prototype.COLOR_ORANGE = '#DD4814';
 
127
UI.prototype.COLOR_PURPLE = '#2C001E';
 
128
 
 
129
 
 
130
UI.prototype.set_map_stretched = function(status) {
 
131
        this.map_stretched = status;
 
132
}
 
133
 
 
134
UI.prototype.set_center_onpos = function(status) {
 
135
        this.center_onpos = status;
 
136
}
 
137
 
 
138
UI.prototype.get_center_onpos = function() {
 
139
        return this.center_onpos;
 
140
}
 
141
 
 
142
UI.prototype.set_center_1st_pos = function(status) {
 
143
        this.center_1st_pos = status;
 
144
}
 
145
 
 
146
UI.prototype.set_zoom_unav = function(zoom) {
 
147
        this.zoom_unav = zoom;
 
148
}
 
149
 
 
150
UI.prototype.markers = function(start_lat, start_lng, end_lat, end_lng) {
 
151
        this.marker_start.setPosition(undefined);
 
152
        this.marker_end.setPosition(undefined);
 
153
        
 
154
        if (this.nav.get_route_status() == '2review' || this.nav.get_route_status() == 'yes' || this.nav.get_route_status() == 'out' || this.nav.get_route_status() == 'ended' || this.nav.get_route_status().startsWith('simulate_done')) {
 
155
                if (start_lat != null && start_lng != null)
 
156
                        this.marker_start.setPosition(ol.proj.transform([start_lng, start_lat], 'EPSG:4326', 'EPSG:3857'));
 
157
        }
 
158
        
 
159
        if (end_lat != null && end_lng != null)
 
160
                this.marker_end.setPosition(ol.proj.transform([end_lng, end_lat], 'EPSG:4326', 'EPSG:3857'));
 
161
}
 
162
 
 
163
UI.prototype.route = function(redraw_map) {
 
164
        if (this.nav.get_route_status() !== 'drawing' && this.nav.get_route_status() !== 'simulate_drawing') {
 
165
                this.routeSource.clear();
 
166
                return;
 
167
        }
 
168
        
 
169
        this.map.getView().setRotation(0);
 
170
        
 
171
        this.routeSource.clear();
 
172
        
 
173
        var lineString = new ol.geom.LineString(this.nav.get_route_line_map());
 
174
        lineString.transform('EPSG:4326', 'EPSG:3857');
 
175
        var routepoints = new ol.Feature({
 
176
                geometry: lineString
 
177
        });
 
178
        this.routeSource.addFeature(routepoints);
 
179
        
 
180
        // Fit route to view
 
181
        if (redraw_map) {
 
182
                var pan = ol.animation.pan({duration: 600, source: map.getView().getCenter()});
 
183
                var zoom = ol.animation.zoom({duration: 600, resolution: map.getView().getResolution()});
 
184
                this.map.beforeRender(pan, zoom);
 
185
 
 
186
                var aux_height = 0;
 
187
                if ($('#panel_review_btns').is(':visible'))
 
188
                        aux_height = aux_height + $('#panel_review_btns').height();
 
189
                if ($('#panel_review_summary').is(':visible'))
 
190
                        aux_height = aux_height + $('#panel_review_summary').height();
 
191
                if ($('#panel_summary').is(':visible'))
 
192
                        aux_height = aux_height + $('#panel_summary').height();
 
193
                if ($('#panel_txt_ind').is(':visible'))
 
194
                        aux_height = aux_height + $('#panel_txt_ind').height();
 
195
                if ($('#panel_msg').is(':visible'))
 
196
                        aux_height = aux_height + $('#panel_msg').height();
 
197
                aux_height = aux_height + 50;
 
198
                this.map.getView().fit(this.routeSource.getExtent(), this.map.getSize(), {padding: [80, 25, aux_height, 25]});
 
199
        }
 
200
}
 
201
 
 
202
UI.prototype.pos = function(lat, lng, accu) {
 
203
        this.marker_pos.setPosition(undefined);
 
204
        
 
205
        if (lat === null || lng === null)
 
206
                return;
 
207
        
 
208
        switch (this.settings.get_routing_mode()) {
 
209
                case 0:
 
210
                        $('#marker_pos').attr('src', "img/marker/car.png");
 
211
                        break;
 
212
                case 1:
 
213
                        $('#marker_pos').attr('src', "img/marker/walk.png");
 
214
                        break;
 
215
                case 2:
 
216
                        $('#marker_pos').attr('src', "img/marker/bike.png");
 
217
                        break;
 
218
        }
 
219
        
 
220
        this.marker_pos.setPosition(ol.proj.transform([lng, lat], 'EPSG:4326', 'EPSG:3857'));
 
221
 
 
222
        if (accu <= this.nav.ACCU4DRIVE)
 
223
                $('#marker_pos').css('opacity', '1.0');
 
224
        else if (accu <= this.nav.ACCU4DRIVE * 2)
 
225
                $('#marker_pos').css('opacity', '0.9');
 
226
        else if (accu <= this.nav.ACCU4DRIVE * 4)
 
227
                $('#marker_pos').css('opacity', '0.7');
 
228
        else
 
229
                $('#marker_pos').css('opacity', '0.5');
 
230
}
 
231
 
 
232
UI.prototype.map_center = function(lat, lng) {
 
233
        if (!this.center_onpos)
 
234
                return;
 
235
        
 
236
        if (lat === null && lng === null)
 
237
                return;
 
238
        
 
239
        this.map.getView().setCenter(ol.proj.transform([lng, lat], 'EPSG:4326', 'EPSG:3857'));
 
240
}
 
241
 
 
242
UI.prototype.map_zoom = function(speed, dist2turn, dist_track_done, radar) {
 
243
        if (!this.zoom_unav)
 
244
                return;
 
245
 
 
246
        if (this.nav.get_route_status() != 'yes') {
 
247
                this.map.getView().setZoom(this.ZOOM_POI); // Looking position = POI
 
248
                return;
 
249
        }
 
250
        
 
251
        if (speed <= this.nav.SPEED_CITY) {
 
252
                if (this.settings.get_routing_mode() != 1 && !radar && dist2turn > this.LONG_TRACK_CITY && dist_track_done > (this.LONG_TRACK_CITY/3))
 
253
                        this.map.getView().setZoom(this.ZOOM_CITY - 1); // City special zoom
 
254
                else
 
255
                        this.map.getView().setZoom(this.ZOOM_CITY); // City
 
256
        }
 
257
        else {
 
258
                if (!radar && dist2turn > this.LONG_TRACK_HIGHWAY && dist_track_done > (this.LONG_TRACK_HIGHWAY/3))
 
259
                        this.map.getView().setZoom(this.ZOOM_HIGHWAY - 3); // Highway special zoom
 
260
                else
 
261
                        this.map.getView().setZoom(this.ZOOM_HIGHWAY); // Highway
 
262
        }
 
263
}
 
264
 
 
265
UI.prototype.markers_POI_clear = function() {
 
266
        for (i=0; i<this.markers_POI.length; i++) {
 
267
                this.markers_POI[i].setPosition(undefined);
 
268
                $('#POI'+i).unbind("click");
 
269
        }
 
270
}
 
271
 
 
272
UI.prototype.markers_POI_set = function(pois) {
 
273
        var website = '';
 
274
        var phone = '';
 
275
        
 
276
        // Map
 
277
        this.set_center_onpos(false);
 
278
        this.set_center_1st_pos(false);
 
279
        this.set_zoom_unav(false);
 
280
        this.set_map_stretched(false);
 
281
        this.map_height();
 
282
        
 
283
        // Clear
 
284
        this.markers_POI_clear();
 
285
        this.map_pois_extend.clear();
 
286
 
 
287
        for (i=0; i<pois.length; i++) {
 
288
                // More POIs than expected?
 
289
                if (i>=this.markers_POI.length)
 
290
                        break;
 
291
                
 
292
                // Show POI
 
293
                this.markers_POI[i].setPosition(ol.proj.transform([pois[i].lng, pois[i].lat], 'EPSG:4326', 'EPSG:3857'));
 
294
                
 
295
                // POI Click //to be redefined
 
296
                website = 'none';
 
297
                phone = 'none';
 
298
                if (typeof pois[i].website !== 'undefined') {
 
299
                        website = pois[i].website.replace(/\//g, ' ');
 
300
                        website = website.replace(/\?/g, 'ç');
 
301
                }
 
302
                if (typeof pois[i].phone !== 'undefined')
 
303
                        phone = pois[i].phone;
 
304
                
 
305
                $('#POI'+i).bind('click', {title: pois[i].title, lat: pois[i].lat, lng: pois[i].lng, website: website, phone: phone}, function(event) {
 
306
                        ui.set_center_onpos(false);
 
307
                        ui.set_center_1st_pos(false);
 
308
                        
 
309
                        map.beforeRender(ol.animation.pan({
 
310
                                duration: 600, 
 
311
                                source: map.getView().getCenter()
 
312
                        }));
 
313
                        map.getView().setCenter(ol.proj.transform([event.data.lng, event.data.lat], 'EPSG:4326', 'EPSG:3857'));
 
314
                        
 
315
                        window.location = 'http://clicked_on_map?' + event.data.lat + '/' + event.data.lng + '/' + event.data.title + '/' + event.data.website + '/' + event.data.phone + '/nofollow';
 
316
                });
 
317
                
 
318
                // For fit map
 
319
                var iconFeature = new ol.Feature({
 
320
                        geometry: new ol.geom.Point(ol.proj.transform([pois[i].lng, pois[i].lat], 'EPSG:4326', 'EPSG:3857'))
 
321
                });
 
322
                this.map_pois_extend.addFeature(iconFeature);
 
323
        }
 
324
        
 
325
        // Show PopUp if poi.length = 1
 
326
        var pan = ol.animation.pan({duration: 600, source: map.getView().getCenter()});
 
327
        var zoom = ol.animation.zoom({duration: 600, resolution: map.getView().getResolution()});
 
328
        this.map.beforeRender(pan, zoom);
 
329
        if (pois.length === 1) {
 
330
                this.map.getView().setZoom(this.ZOOM_POI);
 
331
                this.map.getView().setCenter(ol.proj.transform([pois[0].lng, pois[0].lat], 'EPSG:4326', 'EPSG:3857'));
 
332
                
 
333
                website = 'none';
 
334
                phone = 'none';
 
335
                if (typeof pois[0].website !== 'undefined') {
 
336
                        website = pois[0].website.replace(/\//g, ' ');
 
337
                        website = website.replace(/\?/g, 'ç');
 
338
                }
 
339
                if (typeof pois[0].phone !== 'undefined')
 
340
                        phone = pois[0].phone;
 
341
                window.location = 'http://clicked_on_map?' + pois[0].lat + '/' + pois[0].lng + '/' + pois[0].title + '/' + website + '/' + phone + '/nofollow';
 
342
        }
 
343
        else { // Fit
 
344
                var aux_height = 0;
 
345
                if ($('#panel_review_btns').is(':visible'))
 
346
                        aux_height = aux_height + $('#panel_review_btns').height();
 
347
                if ($('#panel_review_summary').is(':visible'))
 
348
                        aux_height = aux_height + $('#panel_review_summary').height();
 
349
                if ($('#panel_summary').is(':visible'))
 
350
                        aux_height = aux_height + $('#panel_summary').height();
 
351
                if ($('#panel_txt_ind').is(':visible'))
 
352
                        aux_height = aux_height + $('#panel_txt_ind').height();
 
353
                if ($('#panel_msg').is(':visible'))
 
354
                        aux_height = aux_height + $('#panel_msg').height();
 
355
                aux_height = aux_height + 50;
 
356
                this.map.getView().fit(this.map_pois_extend.getExtent(), this.map.getSize(), {padding: [80, 15, aux_height, 15]});
 
357
        }
 
358
}
 
359
 
 
360
UI.prototype.panels = function(route_indicator) {
 
361
        $('#panel_msg, #panel_navigation, #panel_review, #max_speed_alert').hide();
 
362
        
 
363
        switch(this.nav.get_route_status()) {
 
364
                case 'waiting4signal':
 
365
                        var gps_data = this.nav.get_pos_data();
 
366
                        if (gps_data['accu'] <= this.nav.ACCU4DRIVE) {
 
367
                                $('#p_msg').html("<progress value='100' max='100' id='gps_progress'></progress><br>" + t("Waiting for a good GPS signal…"));
 
368
                        } else if (gps_data['accu'] <= this.nav.ACCU4DRIVE * 2) {
 
369
                                $('#p_msg').html("<progress value='80' max='100' id='gps_progress'></progress><br>" + t("Waiting for a good GPS signal…"));
 
370
                        } else if (gps_data['accu'] <= this.nav.ACCU4DRIVE * 4) {
 
371
                                $('#p_msg').html("<progress value='60' max='100' id='gps_progress'></progress><br>" + t("Waiting for a good GPS signal…"));
 
372
                        } else if (gps_data['accu'] <= this.nav.ACCU4DRIVE * 7) {
 
373
                                $('#p_msg').html("<progress value='40' max='100' id='gps_progress'></progress><br>" + t("Waiting for a good GPS signal…"));
 
374
                        } else if (gps_data['accu'] <= this.nav.ACCU4DRIVE * 10) {
 
375
                                $('#p_msg').html("<progress value='20' max='100' id='gps_progress'></progress><br>" + t("Waiting for a good GPS signal…"));
 
376
                        } else {
 
377
                                $('#p_msg').html("<progress value='5' max='100' id='gps_progress'></progress><br>" + t("Waiting for a good GPS signal…"));
 
378
                        }
 
379
                        $('#panel_msg').show();
 
380
                        break;
 
381
                case 'calc':
 
382
                case 'calc_from_out':
 
383
                        $('#p_msg').html(t("Searching for a route…"));
 
384
                        $('#panel_msg').show();
 
385
                        break;
 
386
                case 'drawing':
 
387
                        $('#p_msg').html(t("Drawing route…"));
 
388
                        $('#panel_msg').show();
 
389
                        break;
 
390
                case 'errorAPI':
 
391
                        $('#p_msg').html(t("Error finding route between points. Check the connection and try again"));
 
392
                        $('#panel_msg').show();
 
393
                        break;
 
394
                case 'out':
 
395
                        $('#p_msg').html(t("Recalculating route…"));
 
396
                        $('#panel_msg').show();
 
397
                        break;
 
398
                case '2review':
 
399
                        $('#p_review_time2left').html(this.maths.time2human(route_indicator['time'], false));
 
400
                        $('#p_review_total_dist').html(this.maths.dist2human(route_indicator['distance_total'], this.settings.get_unit()));
 
401
                        $('#p_review_time2arrive').html(this.maths.time2human(route_indicator['time'], true));
 
402
                        $('#panel_review').show();
 
403
                        break;
 
404
                case 'yes':
 
405
                        $('#p_time2left').html(this.maths.time2human(route_indicator['time'], false));
 
406
                        $('#p_total_dist').html(this.maths.dist2human(route_indicator['distance_total'], this.settings.get_unit()));
 
407
                        $('#p_speed').html(this.maths.get_speed(route_indicator['speed'], this.settings.get_unit()));
 
408
                        $('#p_time2arrive').html(this.maths.time2human(route_indicator['time'], true));
 
409
                        $('#p_img_ind').attr('src', 'img/steps/'+route_indicator['indication']+'.svg');
 
410
                        if (route_indicator['indication'] > 3) { // Issue with WIFI, so slow signal
 
411
                                $('#p_next_dist').html(this.maths.dist2human(route_indicator['dist2turn'], this.settings.get_unit()));
 
412
                                $('#p_txt_ind').html(route_indicator['msg']);
 
413
                        }
 
414
                        else {
 
415
                                $('#p_next_dist').html('');
 
416
                                $('#p_txt_ind').html(t("Navigation will start soon"));
 
417
                        }
 
418
                        $('#panel_navigation').show();
 
419
                        if (this.settings.get_ui_speed())
 
420
                                $('#p_speed').show();
 
421
                        else
 
422
                                $('#p_speed').hide();
 
423
                        
 
424
                        if (route_indicator['voice'])
 
425
                                this.speak(route_indicator['indication']);
 
426
                                
 
427
                        if (route_indicator['speaked'])
 
428
                                $('#panel_indication').css('background-color', this.COLOR_ORANGE);
 
429
                        else
 
430
                                $('#panel_indication, #panel_txt_ind').css('background-color', this.COLOR_PURPLE);
 
431
                        
 
432
                        // Radar
 
433
                        if (route_indicator['radar']) {
 
434
                                $('#max_speed_alert').show();
 
435
                                $('#txt_mapspeed').html(route_indicator['radar_speed']);
 
436
                                this.radar_sound(route_indicator['radar_sound']);
 
437
                        }
 
438
                        break;
 
439
                case 'ended':
 
440
                        $('#p_msg').html(t("You have arrived at your destination"));
 
441
                        $('#panel_msg').show();
 
442
                        if (route_indicator['voice'])
 
443
                                this.speak(route_indicator['indication']);
 
444
                        break;
 
445
                case 'simulate_calculating':
 
446
                case 'simulate_drawing':
 
447
                        $('#p_msg').html(t("Simulating route…"));
 
448
                        $('#panel_msg').show();
 
449
                        break;
 
450
                case 'simulate_error':
 
451
                        $('#p_msg').html(t("Error simulating route. Try different points"));
 
452
                        $('#panel_msg').show();
 
453
                        break;
 
454
                case 'simulate_done_bike':
 
455
                case 'simulate_done_walk':
 
456
                case 'simulate_done_car':
 
457
                        $('#p_time2left').html(this.maths.time2human(route_indicator['time'], false));
 
458
                        $('#p_total_dist').html(this.maths.dist2human(route_indicator['distance_total'], this.settings.get_unit()));
 
459
                        $('#p_time2arrive').html(this.maths.time2human(route_indicator['time'], true));
 
460
                        $('#p_speed').hide();
 
461
                        switch (this.nav.get_route_status()) {
 
462
                                case 'simulate_done_bike':
 
463
                                        $('#p_img_ind').attr('src', 'img/mode/bike.svg');
 
464
                                        break;
 
465
                                case 'simulate_done_walk':
 
466
                                        $('#p_img_ind').attr('src', 'img/mode/walk.svg');
 
467
                                        break;
 
468
                                default:
 
469
                                        $('#p_img_ind').attr('src', 'img/mode/car.svg');
 
470
                        }
 
471
                        $('#p_next_dist').html('');
 
472
                        $('#p_txt_ind').html(t("Click onto the icon for reviewing the route"));
 
473
                        $('#panel_navigation').show();
 
474
                        $('#panel_indication, #panel_txt_ind').css('background-color', this.COLOR_PURPLE);
 
475
                        break;
 
476
        }
 
477
}
 
478
 
 
479
UI.prototype.scale_line = function() {
 
480
        switch(this.nav.get_route_status()) {
 
481
                case 'no':
 
482
                        $('.ol-scale-line').css({top: 'auto', bottom: '8px'});
 
483
                        break;
 
484
                case '2review':
 
485
                        $('.ol-scale-line').css({top: (window.innerHeight - $('#panel_review_btns').height() - $('#panel_review_summary').height() - 22), bottom: 'auto'});
 
486
                        break;
 
487
                case 'yes':
 
488
                case 'simulate_done_bike':
 
489
                case 'simulate_done_car':
 
490
                case 'simulate_done_walk':
 
491
                        $('.ol-scale-line').css({top: (window.innerHeight - $('#panel_summary').height() - $('#panel_txt_ind').height() - 22), bottom: 'auto'});
 
492
                        break;
 
493
                default:
 
494
                        $('.ol-scale-line').css({top: (window.innerHeight - $('#panel_msg').height() - 22), bottom: 'auto'});
 
495
        }
 
496
}
 
497
 
 
498
UI.prototype.KO_API_radars = function() {
 
499
        $('#error_get_radars').show();
 
500
        this.error_API_radars();
 
501
        $('#error_get_radars').delay(8000).fadeOut('slow');
 
502
}
 
503
 
 
504
UI.prototype.error_API_radars = function() {
 
505
        if (!$('#panel_msg').is(":visible") && !$('#panel_summary').is(":visible") && !$('#panel_review_btns').is(":visible")) {
 
506
                $('#error_get_radars').hide();
 
507
                return;
 
508
        }
 
509
        
 
510
        if ($('#error_get_radars').is(":visible")) {
 
511
                var aux_height = 0;
 
512
                if ($('#panel_review_btns').is(':visible'))
 
513
                        aux_height = aux_height + $('#panel_review_btns').height();
 
514
                if ($('#panel_review_summary').is(':visible'))
 
515
                        aux_height = aux_height + $('#panel_review_summary').height();
 
516
                if ($('#panel_summary').is(':visible'))
 
517
                        aux_height = aux_height + $('#panel_summary').height();
 
518
                if ($('#panel_txt_ind').is(':visible'))
 
519
                        aux_height = aux_height + $('#panel_txt_ind').height();
 
520
                if ($('#panel_msg').is(':visible'))
 
521
                        aux_height = aux_height + $('#panel_msg').height();
 
522
 
 
523
                $('#error_get_radars').css({bottom: aux_height});
 
524
                $('.ol-scale-line').css({top: (window.innerHeight - aux_height - 22), bottom: 'auto'});
 
525
        }
 
526
}
 
527
 
 
528
UI.prototype.map_height = function() {
 
529
        // car + route = car on bottom
 
530
        if (this.map_stretched && this.settings.get_routing_mode() != 1 && (this.nav.get_route_status() == 'yes' || this.nav.get_route_status() == 'out' || this.nav.get_route_status() == 'calc_from_out')) {
 
531
                var aux_height = 0;
 
532
                if ($('#panel_summary').is(':visible'))
 
533
                        aux_height = aux_height + $('#panel_summary').height();
 
534
                if ($('#panel_txt_ind').is(':visible'))
 
535
                        aux_height = aux_height + $('#panel_txt_ind').height();
 
536
                if ($('#panel_msg').is(':visible'))
 
537
                        aux_height = aux_height + $('#panel_msg').height();
 
538
                
 
539
                $('.map').css({height: ((window.innerHeight * 2) - (aux_height * 2) - 120)});
 
540
        }
 
541
        else {
 
542
                $('.map').css({height: '100%'});
 
543
        }
 
544
        
 
545
        this.map.updateSize(); // Hack: Force reload map
 
546
        
 
547
        // Attribution pos
 
548
        if (this.nav.get_route_status() != 'no')
 
549
                $('#map_attribution').css({"margin-top": "-40px"});
 
550
        else
 
551
                $('#map_attribution').css({"margin-top": "auto"});
 
552
 
 
553
}
 
554
 
 
555
UI.prototype.radar_sound = function(play) {
 
556
        if (play && this.settings.get_sound() !== 2)
 
557
                $('#radar_sound_alert').trigger('play');
 
558
}
 
559
 
 
560
UI.prototype.markers_radar_clear = function() {
 
561
        for (i=0; i<this.markers_radar.length; i++) {
 
562
                this.markers_radar[i].setPosition(undefined);
 
563
                $('#radar'+i).unbind("click");
 
564
        }
 
565
}
 
566
 
 
567
UI.prototype.markers_radar_set = function(radars) {
 
568
        if (this.nav.get_route_status() == 'no' || this.nav.get_route_status() == 'errorAPI')
 
569
                return;
 
570
        
 
571
        // Not show speed cameras position for France users. +info: http://goo.gl/ulXvG8
 
572
        if (this.lang.toLowerCase() == 'fr' || this.lang.toLowerCase() == 'br')
 
573
                return;
 
574
        
 
575
        for (i=0; i<radars.length; i++) {
 
576
                // More radars than expected?
 
577
                if (i>=this.markers_radar.length)
 
578
                        break;
 
579
                // Show radar
 
580
                this.markers_radar[i].setPosition(ol.proj.transform([radars[i]['lng'], radars[i]['lat']], 'EPSG:4326', 'EPSG:3857'));
 
581
        }
 
582
}
 
583
 
 
584
UI.prototype.map_rotation = function(status_route, speed, prev_lat, prev_lng, now_lat, now_lng) {
 
585
        if (!this.center_onpos || prev_lat === null || prev_lng === null)
 
586
                return;
 
587
        if (this.center_onpos && this.settings.get_routing_mode() == 1) {
 
588
                this.map.getView().setRotation(0);
 
589
                return;
 
590
        }
 
591
        
 
592
        switch(status_route) {
 
593
                case 'yes':
 
594
                case 'ended':
 
595
                case 'errorAPI':
 
596
                case 'drawing':
 
597
                case 'calc':
 
598
                case 'calc_from_out':
 
599
                case 'out':
 
600
                        if (speed > this.SPEED4ROTATION) {
 
601
                                var dist = geolib.getDistance(
 
602
                                        {latitude: prev_lat, longitude: prev_lng},
 
603
                                        {latitude: now_lat, longitude: now_lng}
 
604
                                );
 
605
                                if (dist >= this.DIST4ROTATION) { // Only if there is an enough distance for calculate
 
606
                                        var angle = this.maths.get_angle(prev_lat, prev_lng, now_lat, now_lng);
 
607
                                        this.map.getView().setRotation(angle);
 
608
                                }
 
609
                        }
 
610
                        break;
 
611
                default:
 
612
                        this.map.getView().setRotation(0);
 
613
        }
 
614
 
 
615
}
 
616
 
 
617
UI.prototype.speak = function(indication) {
 
618
        switch (this.settings.get_sound()) {
 
619
                case 0:
 
620
                        if (indication == 27 || (indication >= 271 && indication <= 274) || indication <= 3) // Not start or exit roundabouts
 
621
                                return;
 
622
                        if (indication == 5 || indication == 6) // Same voice
 
623
                                indication = 4;
 
624
                        $('#'+indication).trigger('play');
 
625
                        break;
 
626
                case 1:
 
627
                        $('#voice_notif').trigger('play');
 
628
                        break;
 
629
        }
 
630
}
 
631
 
 
632
UI.prototype.set_scale_unit = function(unit) {
 
633
        if (unit == 'km')
 
634
                this.scaleline.setUnits('metric');
 
635
        else
 
636
                this.scaleline.setUnits('imperial');
 
637
}
 
638
 
 
639
UI.prototype.update = function() {
 
640
        var gps_data = this.nav.get_pos_data();
 
641
        var route_indicator = this.nav.get_route_indication();
 
642
        
 
643
        this.markers(gps_data['start_lat'], gps_data['start_lng'], gps_data['end_lat'], gps_data['end_lng']);
 
644
        
 
645
        this.panels(route_indicator);
 
646
        this.error_API_radars();
 
647
        
 
648
        this.scale_line();
 
649
        
 
650
        if (!gps_data['gps_is_OK'])
 
651
                return;
 
652
        
 
653
        this.pos(gps_data['now_lat'], gps_data['now_lng'], gps_data['accu']);
 
654
        
 
655
        if (this.center_1st_pos) {
 
656
                this.center_1st_pos = false;
 
657
                this.center_onpos = true;
 
658
                this.zoom_unav = true;
 
659
                
 
660
                var rotate = ol.animation.rotate({duration: 600, rotation: map.getView().getRotation(), easing: ol.easing.linear});
 
661
                var pan = ol.animation.pan({duration: 600, source: map.getView().getCenter()});
 
662
                var zoom = ol.animation.zoom({duration: 600, resolution: map.getView().getResolution()});
 
663
                this.map.beforeRender(pan, zoom, rotate);
 
664
        }
 
665
        
 
666
        this.map_height();
 
667
        this.map_rotation(this.nav.get_route_status(), gps_data['speed'], this.pos_prev['lat'], this.pos_prev['lng'], gps_data['now_lat'], gps_data['now_lng']);
 
668
        this.map_center(gps_data['now_lat'], gps_data['now_lng']);
 
669
        this.map_zoom(gps_data['speed'], route_indicator['dist2turn'], route_indicator['dist_track_done'], route_indicator['radar']);
 
670
        
 
671
        this.pos_prev['lat'] = gps_data['now_lat'];
 
672
        this.pos_prev['lng'] = gps_data['now_lng'];
 
673
}