1
|
if (img_prefix == undefined) var img_prefix = 'http://pano.tetaneutral.net/data/tsf2/vpongnian/tiles/ttn_mediatheque/mediatheque_70';
|
2
|
if (to_cap == undefined) var to_cap = 0;
|
3
|
if (to_ele == undefined) var to_ele = 0;
|
4
|
if (to_zoom == undefined) var to_zoom = 0;
|
5
|
if (cap == undefined) var cap = 0;
|
6
|
if (cap_min == undefined) var cap_min = cap;
|
7
|
if (cap_max == undefined) var cap_max = cap_min+360;
|
8
|
if (ref_points == undefined) var ref_points = new Array();
|
9
|
if (image_loop == undefined) var image_loop = true;
|
10
|
|
11
|
|
12
|
var debug_mode = false;
|
13
|
var canvas;
|
14
|
var cntext;
|
15
|
var point_list = new Array();
|
16
|
var zoom = 0;
|
17
|
var zooms = new Array();
|
18
|
var prev_zm;
|
19
|
var zm;
|
20
|
var tile = {width:256, height:256};
|
21
|
var ntiles = {x:228, y:9};
|
22
|
var border_width = 2;
|
23
|
var imageObj = new Array();
|
24
|
|
25
|
var last = {x:0,y:0};
|
26
|
var shift = {x:0,y:0};
|
27
|
var mouse = {x:0,y:0};
|
28
|
var speed = {x:0,y:0};
|
29
|
var canvas_pos = {x:0,y:0};
|
30
|
var tmt;
|
31
|
var is_located = false;
|
32
|
var point_colors = {'pano_point' : '255,128,128',
|
33
|
'ref_point' : '128,128,255',
|
34
|
'loc_point' : '128,255,128',
|
35
|
'temporary' : '255,255,128',
|
36
|
'unlocated' : '255,255,255'};
|
37
|
var test = {x:0, y:0, i:100};
|
38
|
|
39
|
|
40
|
function nmodulo(val, div) {
|
41
|
return Math.floor((val%div+div)%div);
|
42
|
}
|
43
|
|
44
|
function fmodulo(val, div) {
|
45
|
return (val%div+div)%div;
|
46
|
}
|
47
|
|
48
|
function distort_canvas(p, x, y) {
|
49
|
if (p == 0) distort = 0;
|
50
|
else {
|
51
|
cntext.save();
|
52
|
distort++;
|
53
|
cntext.clearRect(0, 0, canvas.width, 2*canvas.height);
|
54
|
var ratio = (canvas.width-2*distort)/canvas.width;
|
55
|
var shift = canvas.height/2*(1-ratio);
|
56
|
cntext.scale(1, ratio);
|
57
|
if (p == 1) cntext.translate(0, 0);
|
58
|
else if (p == -1) cntext.translate(0, 0);
|
59
|
draw_image(x, y);
|
60
|
cntext.restore();
|
61
|
document.getElementById('res').innerHTML = 'distort : ' + distort + ' shift ' + shift + ' ratio : ' + ratio + '<br/>';
|
62
|
}
|
63
|
}
|
64
|
|
65
|
function draw_image(ox, oy) {
|
66
|
var ref_vals = {x:last.x, y:last.y, zoom:zoom};
|
67
|
ox = nmodulo(ox-canvas.width/2, zm.im.width);
|
68
|
oy = Math.floor(oy-canvas.height/2);
|
69
|
|
70
|
cntext.clearRect(0, 0, canvas.width, canvas.height);
|
71
|
cntext.fillStyle = "rgba(128,128,128,0.8)";
|
72
|
|
73
|
if (canvas.height > zm.im.height) {
|
74
|
var fy = Math.floor((oy+canvas.height/2-zm.im.height/2)/(tile.height*zm.ntiles.y))*zm.ntiles.y;
|
75
|
if (fy < 0) fy = 0;
|
76
|
var ly = fy + zm.ntiles.y;
|
77
|
} else {
|
78
|
var fy = Math.floor(oy/tile.height);
|
79
|
var ly = Math.floor((oy+canvas.height+tile.height-1)/tile.height+1);
|
80
|
if (fy < 0) fy = 0;
|
81
|
if (ly > zm.ntiles.y) ly = zm.ntiles.y;
|
82
|
}
|
83
|
|
84
|
for (var j=fy; j<ly; j++) {
|
85
|
var delta_y = (Math.floor(j/zm.ntiles.y) - Math.floor(fy/zm.ntiles.y)) * (tile.height - zm.last_tile.height);
|
86
|
var dy = j*tile.height - oy - delta_y;
|
87
|
var ny = j%ntiles.y;
|
88
|
var wy = zm.tile.width;
|
89
|
if (ny == zm.ntiles.y - 1) wy = zm.last_tile.height;
|
90
|
|
91
|
var cpx = 0;
|
92
|
var i = 0;
|
93
|
var Nx = zm.ntiles.x;
|
94
|
while (cpx < ox+canvas.width) {
|
95
|
var cur_width = zm.tile.width;
|
96
|
if (i%Nx == zm.ntiles.x-1) cur_width = zm.last_tile.width;
|
97
|
if (cpx >= ox-cur_width) {
|
98
|
var nx = i%Nx;
|
99
|
var idx = nx+'-'+ny+'-'+ref_vals.zoom;
|
100
|
if (imageObj[idx] && imageObj[idx].complete) {
|
101
|
draw_tile(idx, cpx-ox, dy);
|
102
|
} else {
|
103
|
var fname = get_file_name(nx, ny, ref_vals.zoom);
|
104
|
imageObj[idx] = new Image();
|
105
|
imageObj[idx].src = fname;
|
106
|
var ts = zm.get_tile_size(nx, ny);
|
107
|
cntext.fillRect(cpx-ox, dy, ts.width, ts.height);
|
108
|
imageObj[idx].addEventListener('load', (function(ref, idx, dx, dy, ox, oy, ts) {
|
109
|
return function() {
|
110
|
draw_tile_del(ref, idx, dx, dy, ox, oy, ts.width, ts.height);
|
111
|
};
|
112
|
})(ref_vals, idx, cpx-ox, dy, ox, oy, ts), false);
|
113
|
}
|
114
|
|
115
|
}
|
116
|
cpx += cur_width;
|
117
|
i++;
|
118
|
}
|
119
|
}
|
120
|
drawDecorations(ox, oy);
|
121
|
}
|
122
|
|
123
|
function draw_tile_del(ref, idx, tx, ty, ox, oy, twidth, theight) {
|
124
|
if (ref.zoom == zoom && ref.x == last.x && ref.y == last.y) {
|
125
|
draw_tile(idx, tx, ty);
|
126
|
drawDecorations(ox, oy, tx, ty, twidth, theight);
|
127
|
}
|
128
|
}
|
129
|
|
130
|
function draw_tile(idx, ox, oy) {
|
131
|
var img = imageObj[idx];
|
132
|
cntext.drawImage(img, ox, oy);
|
133
|
}
|
134
|
|
135
|
function drawDecorations(ox, oy, tx, ty, twidth, theight) {
|
136
|
if (twidth) {
|
137
|
cntext.save();
|
138
|
cntext.beginPath();
|
139
|
cntext.rect(tx, ty, twidth, theight);
|
140
|
cntext.clip();
|
141
|
}
|
142
|
var wgrd = zm.im.width/360;
|
143
|
var od = ((ox+canvas.width/2)/wgrd)%360;
|
144
|
var el = (zm.im.height/2 - (oy+canvas.height/2))/wgrd;
|
145
|
cntext.fillStyle = "rgba(0,128,128,0.9)";
|
146
|
cntext.strokeStyle = "rgb(255,255,255)";
|
147
|
cntext.lineWidth = 1;
|
148
|
cntext.fillRect(canvas.width/2-5, canvas.height/2-5, 10, 10);
|
149
|
cntext.strokeRect(canvas.width/2-5, canvas.height/2-5, 10, 10);
|
150
|
for(var i = 0; i < zm.pt_list.length; i++) {
|
151
|
if (zm.pt_list[i]['type'] != 'unlocated') {
|
152
|
cntext.fillStyle = 'rgba('+point_colors[zm.pt_list[i]['type']]+',0.5)';
|
153
|
var cx = nmodulo(zm.pt_list[i]['xc'] - ox, zm.im.width);
|
154
|
var cy = zm.pt_list[i]['yc'] - oy;
|
155
|
cntext.beginPath();
|
156
|
cntext.arc(cx, cy, 20, 0, 2*Math.PI, true);
|
157
|
cntext.fill();
|
158
|
}
|
159
|
}
|
160
|
|
161
|
|
162
|
|
163
|
|
164
|
|
165
|
|
166
|
|
167
|
|
168
|
if (twidth) {
|
169
|
cntext.restore();
|
170
|
}
|
171
|
|
172
|
}
|
173
|
|
174
|
function insert_drawn_point(lat, lon, alt) {
|
175
|
var rt = 6371;
|
176
|
var alt1 = document.getElementById('pos_alt').childNodes[0].nodeValue;
|
177
|
var lat1 = document.getElementById('pos_lat').childNodes[0].nodeValue*Math.PI/180;
|
178
|
var lon1 = document.getElementById('pos_lon').childNodes[0].nodeValue*Math.PI/180;
|
179
|
var alt2 = alt;
|
180
|
var lat2 = lat*Math.PI/180;
|
181
|
var lon2 = lon*Math.PI/180;
|
182
|
|
183
|
var dLat = lat2-lat1;
|
184
|
var dLon = lon2-lon1;
|
185
|
|
186
|
var a = Math.sin(dLat/2)*Math.sin(dLat/2) + Math.sin(dLon/2)*Math.sin(dLon/2)*Math.cos(lat1)*Math.cos(lat2);
|
187
|
var angle = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
|
188
|
var d = angle*rt;
|
189
|
|
190
|
var y = Math.sin(dLon) * Math.cos(lat2);
|
191
|
var x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);
|
192
|
var cap = Math.atan2(y,x);
|
193
|
var e = Math.atan2((alt2 - alt1)/1000 - d*d/(2*rt),d);
|
194
|
|
195
|
return {d:d, cap:cap*180/Math.PI, ele:e*180/Math.PI};
|
196
|
}
|
197
|
|
198
|
function localate_point() {
|
199
|
var lat = document.getElementById("loca_latitude").value;
|
200
|
var lon = document.getElementById("loca_longitude").value;
|
201
|
var alt = document.getElementById("loca_altitude").value;
|
202
|
if (lat == '' || isNaN(lat) || lat <= -90 || lat > 90) {
|
203
|
alert("La latitude "+lat+"n'est pas correcte");
|
204
|
return;
|
205
|
}
|
206
|
if (lat == '' || isNaN(lon) || lon <= -180 || lon > 180) {
|
207
|
alert("La longitude "+lon+"n'est pas correcte");
|
208
|
return;
|
209
|
}
|
210
|
if (lat == '' || isNaN(alt) || alt < -400 || alt > 10000000) {
|
211
|
alert("l'altitude "+alt+"n'est pas correcte");
|
212
|
return;
|
213
|
}
|
214
|
var opt_ced = new Array();
|
215
|
opt_dce = insert_drawn_point(lat, lon, alt);
|
216
|
display_temp(opt_dce.d, opt_dce.cap, opt_dce.ele);
|
217
|
}
|
218
|
|
219
|
function display_temp(d,cap,ele) {
|
220
|
point_list[point_list.length] = new Array("point temporaire", d,cap,ele, "temporary");
|
221
|
reset_zooms();
|
222
|
putImage(last.x, last.y);
|
223
|
}
|
224
|
|
225
|
function arrayUnset(array, value){
|
226
|
array.splice(array.indexOf(value), 1);
|
227
|
}
|
228
|
|
229
|
function erase_point() {
|
230
|
for (var i=0; i<point_list.length; i++) {
|
231
|
if(point_list[i][0] == "point temporaire"){
|
232
|
arrayUnset(point_list,point_list[i]);
|
233
|
loop = erase_point();
|
234
|
}
|
235
|
}
|
236
|
reset_zooms();
|
237
|
putImage(last.x, last.y);
|
238
|
}
|
239
|
|
240
|
function get_file_name(x, y, z) {
|
241
|
var prm = [z, x, y];
|
242
|
var fname = img_prefix;
|
243
|
for (var i = 0; i < prm.length; i++) {
|
244
|
fname += '_';
|
245
|
if (prm[i] < 10) fname += '00';
|
246
|
else if (prm[i] < 100) fname += '0';
|
247
|
fname += prm[i];
|
248
|
}
|
249
|
fname += '.jpg';
|
250
|
return fname;
|
251
|
}
|
252
|
|
253
|
function keys(key) {
|
254
|
|
255
|
hide_links();
|
256
|
evt = key || event;
|
257
|
|
258
|
|
259
|
if (!key) {
|
260
|
key = window.event;
|
261
|
key.which = key.keyCode;
|
262
|
}
|
263
|
|
264
|
|
265
|
switch (key.which) {
|
266
|
|
267
|
|
268
|
|
269
|
|
270
|
|
271
|
|
272
|
|
273
|
|
274
|
|
275
|
|
276
|
|
277
|
case 36:
|
278
|
putImage(0, zm.im.height/2);
|
279
|
return;
|
280
|
case 35:
|
281
|
putImage(last.x+zm.im.width/2, last.y);
|
282
|
return;
|
283
|
case 39:
|
284
|
putImage(last.x+40, last.y);
|
285
|
return;
|
286
|
case 40:
|
287
|
putImage(last.x, last.y+20);
|
288
|
return;
|
289
|
case 37:
|
290
|
putImage(last.x-40, last.y);
|
291
|
return;
|
292
|
case 38:
|
293
|
putImage(last.x, last.y-20);
|
294
|
return;
|
295
|
case 33:
|
296
|
zoom_control.value--;
|
297
|
change_zoom()
|
298
|
return;
|
299
|
case 34:
|
300
|
zoom_control.value++;
|
301
|
change_zoom()
|
302
|
return;
|
303
|
default:
|
304
|
|
305
|
return;
|
306
|
}
|
307
|
}
|
308
|
|
309
|
function onImageClick(e) {
|
310
|
hide_contextmenu();
|
311
|
shift.x = last.x;
|
312
|
shift.y = last.y;
|
313
|
speed.x = 0;
|
314
|
speed.y = 0;
|
315
|
mouse.x = e.pageX;
|
316
|
mouse.y = e.pageY;
|
317
|
clearTimeout(tmt);
|
318
|
canvas.addEventListener('mousemove', stickImage, false);
|
319
|
canvas.addEventListener('mouseup', launchImage, false);
|
320
|
|
321
|
canvas.style.cursor='move';
|
322
|
|
323
|
document.onmouseup = launchImage;
|
324
|
hide_links();
|
325
|
}
|
326
|
|
327
|
|
328
|
function stickImage(e) {
|
329
|
var xs = mouse.x - e.pageX + shift.x;
|
330
|
var ys = mouse.y - e.pageY + shift.y;
|
331
|
speed.x = xs - last.x;
|
332
|
speed.y = ys - last.y;
|
333
|
putImage(xs, ys);
|
334
|
}
|
335
|
|
336
|
function launchImage(e) {
|
337
|
distort_canvas(0);
|
338
|
canvas.removeEventListener('mousemove', stickImage, false);
|
339
|
|
340
|
shift.x = e.pageX - mouse.x + shift.x;
|
341
|
shift.y = e.pageY - mouse.y + shift.y;
|
342
|
tmt = setTimeout(inertialImage, 100);
|
343
|
}
|
344
|
|
345
|
function putImage(x, y) {
|
346
|
if (!zm.is_updated) return;
|
347
|
if (x >= zm.im.width) {
|
348
|
shift.x -= zm.im.width;
|
349
|
x -= zm.im.width;
|
350
|
} else if (x < 0) {
|
351
|
shift.x += zm.im.width;
|
352
|
x += zm.im.width;
|
353
|
}
|
354
|
if (y >= zm.im.height) {
|
355
|
|
356
|
shift.y = zm.im.height-1;
|
357
|
y = zm.im.height-1;
|
358
|
} else if (y < 0) {
|
359
|
|
360
|
shift.y = 0;
|
361
|
y = 0;
|
362
|
}
|
363
|
|
364
|
last.x = x;
|
365
|
last.y = y;
|
366
|
draw_image(x, y);
|
367
|
}
|
368
|
|
369
|
function inertialImage() {
|
370
|
speed.x *= 0.9;
|
371
|
speed.y *= 0.9;
|
372
|
if (Math.abs(speed.x) > 2 || Math.abs(speed.y) > 2) {
|
373
|
putImage(last.x+speed.x, last.y+speed.y);
|
374
|
tmt = setTimeout(inertialImage, 100);
|
375
|
} else {
|
376
|
show_links();
|
377
|
}
|
378
|
}
|
379
|
|
380
|
function tri_ref_points(v1, v2) {
|
381
|
return v1['x'] - v2['x'];
|
382
|
}
|
383
|
|
384
|
|
385
|
|
386
|
function tzoom(zv) {
|
387
|
this.value = zv;
|
388
|
this.ntiles = {x:0,y:0};
|
389
|
this.tile = {width:0,height:0};
|
390
|
this.last_tile = {width:0,height:0};
|
391
|
this.max_tile = {width:0,height:0};
|
392
|
this.im = {width:0,height:0};
|
393
|
this.is_updated = false;
|
394
|
|
395
|
this.refresh = function() {
|
396
|
this.im.visible_width = this.tile.width*(this.ntiles.x-1)+this.last_tile.width;
|
397
|
this.is_updated = true;
|
398
|
|
399
|
this.im.width = this.im.visible_width;
|
400
|
this.im.height = this.tile.height*(this.ntiles.y-1)+this.last_tile.height;
|
401
|
if (this.last_tile.width > this.tile.width) this.max_tile.width = this.im.last_tile.width;
|
402
|
else this.max_tile.width = this.tile.width;
|
403
|
if (this.last_tile.height > this.tile.height) this.max_tile.height = this.im.last_tile.height;
|
404
|
else this.max_tile.height = this.tile.height;
|
405
|
|
406
|
var ord_pts = new Array();
|
407
|
i=0;
|
408
|
for(var label in ref_points) {
|
409
|
ord_pts[i++] = ref_points[label]
|
410
|
}
|
411
|
ord_pts = ord_pts.sort(tri_ref_points);
|
412
|
is_located = i > 1 || image_loop && i > 0;
|
413
|
|
414
|
var alpha_domain = {start:0, end:360};
|
415
|
this.pixel_y_ratio = this.im.width/360;
|
416
|
if (is_located) {
|
417
|
this.ref_pixels = new Array;
|
418
|
this.ref_pixels[0] = new Array();
|
419
|
for (var i=0; i < ord_pts.length; i++) {
|
420
|
this.ref_pixels[i+1] = new Array();
|
421
|
this.ref_pixels[i+1].x = Math.floor(ord_pts[i].x*this.im.width);
|
422
|
this.ref_pixels[i+1].cap = fmodulo(ord_pts[i].cap, 360);
|
423
|
if (i != ord_pts.length-1) {
|
424
|
this.ref_pixels[i+1].ratio_x = (ord_pts[i+1].x - ord_pts[i].x)/fmodulo(ord_pts[i+1].cap - ord_pts[i].cap, 360)*this.im.width;
|
425
|
}
|
426
|
}
|
427
|
if (image_loop == true) {
|
428
|
var dpix = this.im.width;
|
429
|
var dangle = 360;
|
430
|
if (ord_pts.length > 1) {
|
431
|
dpix = this.im.width - this.ref_pixels[this.ref_pixels.length-1].x + this.ref_pixels[1].x;
|
432
|
dangle = fmodulo(this.ref_pixels[1].cap - this.ref_pixels[this.ref_pixels.length-1].cap, 360);
|
433
|
}
|
434
|
this.ref_pixels[0].ratio_x = dpix/dangle;
|
435
|
this.ref_pixels[ord_pts.length].ratio_x = this.ref_pixels[0].ratio_x;
|
436
|
dpix = this.im.width - this.ref_pixels[ord_pts.length].x;
|
437
|
this.ref_pixels[0].cap = fmodulo(this.ref_pixels[ord_pts.length].cap + dpix / this.ref_pixels[0].ratio_x, 360);
|
438
|
} else {
|
439
|
this.ref_pixels[0].ratio_x = this.ref_pixels[1].ratio_x;
|
440
|
this.ref_pixels[ord_pts.length].ratio_x = this.ref_pixels[ord_pts.length-1].ratio_x;
|
441
|
this.ref_pixels[0].cap = fmodulo(this.ref_pixels[1].cap - this.ref_pixels[1].x / this.ref_pixels[1].ratio_x, 360);
|
442
|
alpha_domain.start = this.ref_pixels[0].cap;
|
443
|
alpha_domain.end = fmodulo(this.ref_pixels[ord_pts.length].cap+(this.im.width-this.ref_pixels[ord_pts.length].x)/this.ref_pixels[ord_pts.length].ratio_x, 360);
|
444
|
this.pixel_y_ratio = this.im.width/fmodulo(alpha_domain.end-alpha_domain.start, 360);
|
445
|
}
|
446
|
this.ref_pixels[0].x = 0;
|
447
|
|
448
|
for (var i=0; i < ord_pts.length; i++) {
|
449
|
this.ref_pixels[i+1].shift_y = Math.floor(this.pixel_y_ratio*ord_pts[i].ele - ord_pts[i].y*this.im.height);
|
450
|
if (i != ord_pts.length-1) {
|
451
|
var next_shift = Math.floor(this.pixel_y_ratio*ord_pts[i+1].ele - ord_pts[i+1].y*this.im.height);
|
452
|
this.ref_pixels[i+1].dshft_y = (next_shift - this.ref_pixels[i+1].shift_y)/(this.ref_pixels[i+2].x - this.ref_pixels[i+1].x);
|
453
|
}
|
454
|
}
|
455
|
|
456
|
if (image_loop == true) {
|
457
|
var dpix = this.im.width;
|
458
|
var delt = 0;
|
459
|
if (ord_pts.length > 1) {
|
460
|
dpix = this.im.width - this.ref_pixels[this.ref_pixels.length-1].x + this.ref_pixels[1].x;
|
461
|
delt = this.ref_pixels[this.ref_pixels.length-1].shift_y - this.ref_pixels[1].shift_y;
|
462
|
}
|
463
|
this.ref_pixels[0].dshft_y = delt/dpix;
|
464
|
this.ref_pixels[ord_pts.length].dshft_y = this.ref_pixels[0].dshft_y;
|
465
|
dpix = this.im.width - this.ref_pixels[ord_pts.length].x;
|
466
|
this.ref_pixels[0].shift_y = this.ref_pixels[ord_pts.length].shift_y - dpix*this.ref_pixels[0].dshft_y;
|
467
|
} else {
|
468
|
this.ref_pixels[0].shift_y = this.ref_pixels[1].shift_y;
|
469
|
this.ref_pixels[0].dshft_y = 0;
|
470
|
this.ref_pixels[ord_pts.length].dshft_y = 0;
|
471
|
}
|
472
|
|
473
|
if (debug_mode) {
|
474
|
var res = document.getElementById('res');
|
475
|
res.innerHTML = 'liste des '+this.ref_pixels.length+' valeurs de correction (image = '+this.im.width+'x'+this.im.height+') zoom = '+this.value+':<br/>';
|
476
|
for (var i=0; i < this.ref_pixels.length; i++) {
|
477
|
res.innerHTML += '<p>point '+i+' :</p><ul>';
|
478
|
for (var key in this.ref_pixels[i]) {
|
479
|
res.innerHTML += '<li>'+key + '['+i+'] = '+this.ref_pixels[i][key]+'</li>';
|
480
|
}
|
481
|
if (i != this.ref_pixels.length-1) {
|
482
|
var tx0 = this.ref_pixels[i+1].x-1;
|
483
|
|
484
|
var ty0 = 0;
|
485
|
} else {
|
486
|
var tx0 = this.im.width-1;
|
487
|
var ty0 = 0;
|
488
|
}
|
489
|
res.innerHTML += '</ul><p>test sur : '+tx0+','+ty0+'</p>';
|
490
|
var tst = this.get_cap_ele(tx0, ty0);
|
491
|
res.innerHTML += '<p>cap:'+tst.cap+', shift:'+tst.ele+'</p>';
|
492
|
var tst2 = this.get_pos_xy(tst.cap, tst.ele);
|
493
|
res.innerHTML += '</ul><p>x:'+tst2.x+', y:'+tst2.y+'</p>';
|
494
|
}
|
495
|
}
|
496
|
}
|
497
|
|
498
|
this.pt_list = new Array();
|
499
|
for (var i=0; i<point_list.length; i++) {
|
500
|
var lbl = point_list[i][0];
|
501
|
var dst = point_list[i][1];
|
502
|
var cap = point_list[i][2];
|
503
|
var ele = point_list[i][3];
|
504
|
var lnk = point_list[i][4];
|
505
|
var typ = 'unlocated';
|
506
|
var rxy = this.get_pos_xy(cap, ele);
|
507
|
var is_visible = fmodulo(cap - alpha_domain.start, 360) <= fmodulo(alpha_domain.end - alpha_domain.start -0.0001, 360)+0.0001 && is_located;
|
508
|
|
509
|
this.pt_list[i] = new Array();
|
510
|
if (ref_points[lbl] != undefined) {
|
511
|
typ = 'ref_point';
|
512
|
if (!is_located) rxy = {x:ref_points[lbl].x*this.im.width, y:ref_points[lbl].y*this.im.height}
|
513
|
} else if(lnk == '' && is_visible && lbl != 'point temporaire') {
|
514
|
typ = 'loc_point';
|
515
|
}else if(is_visible && lbl =='point temporaire') {
|
516
|
typ = 'temporary';
|
517
|
|
518
|
} else if(is_visible) {
|
519
|
typ = 'pano_point';
|
520
|
lnk += '&to_zoom='+this.value;
|
521
|
}
|
522
|
this.pt_list[i]['type'] = typ;
|
523
|
this.pt_list[i]['cap'] = cap;
|
524
|
this.pt_list[i]['ele'] = ele;
|
525
|
this.pt_list[i]['dist'] = dst;
|
526
|
this.pt_list[i]['label'] = lbl;
|
527
|
this.pt_list[i]['lnk'] = lnk;
|
528
|
this.pt_list[i]['xc'] = rxy.x;
|
529
|
this.pt_list[i]['yc'] = Math.floor(this.im.height/2 - rxy.y);
|
530
|
}
|
531
|
}
|
532
|
|
533
|
this.get_tile_size = function(nx, ny) {
|
534
|
var res = {width:0, height:0};
|
535
|
if (nx == this.ntiles.x-1) res.width = this.last_tile.width;
|
536
|
else res.width = this.tile.width;
|
537
|
if (ny == this.ntiles.y-1) res.height = this.last_tile.height;
|
538
|
else res.height = this.tile.height;
|
539
|
return res;
|
540
|
}
|
541
|
|
542
|
this.get_cap_ele = function(px, py) {
|
543
|
if (is_located) {
|
544
|
for (var i=0; i < this.ref_pixels.length; i++) {
|
545
|
if (i == this.ref_pixels.length - 1 || px < this.ref_pixels[i+1].x) {
|
546
|
var dpix = px-this.ref_pixels[i].x;
|
547
|
var cp = fmodulo(this.ref_pixels[i].cap + dpix/this.ref_pixels[i].ratio_x, 360);
|
548
|
var el = (py+this.ref_pixels[i].shift_y+this.ref_pixels[i].dshft_y*dpix)/this.pixel_y_ratio;
|
549
|
return {cap:cp, ele:el};
|
550
|
}
|
551
|
}
|
552
|
} else {
|
553
|
var cp = 360*px/this.im.width;
|
554
|
var el = 360*py/this.im.height;
|
555
|
return {cap:cp, ele:el};
|
556
|
}
|
557
|
}
|
558
|
|
559
|
this.get_pos_xy = function(cap, ele) {
|
560
|
if (is_located) {
|
561
|
var dcap = fmodulo(cap-this.ref_pixels[0].cap, 360);
|
562
|
for (var i=0; i < this.ref_pixels.length; i++) {
|
563
|
if (i == this.ref_pixels.length - 1 || dcap < fmodulo(this.ref_pixels[i+1].cap-this.ref_pixels[0].cap, 360)) {
|
564
|
var px = this.ref_pixels[i].x + this.ref_pixels[i].ratio_x*fmodulo(cap - this.ref_pixels[i].cap, 360);
|
565
|
var dpix = px-this.ref_pixels[i].x;
|
566
|
var py = this.pixel_y_ratio*ele - this.ref_pixels[i].shift_y - this.ref_pixels[i].dshft_y*dpix;
|
567
|
return {x:px, y:py};
|
568
|
}
|
569
|
}
|
570
|
} else {
|
571
|
var px = fmodulo(cap, 360)/360*this.im.width;
|
572
|
var py = ele/360*this.im.height;
|
573
|
return {x:px, y:py};
|
574
|
}
|
575
|
}
|
576
|
}
|
577
|
|
578
|
function reset_zooms () {
|
579
|
for(i=0; i<zooms.length; i++) zooms[i].is_updated = false;
|
580
|
zm.refresh();
|
581
|
}
|
582
|
|
583
|
function wheel_zoom (event) {
|
584
|
var zshift = {x:0, y:0};
|
585
|
if (event.pageX != undefined && event.pageX != undefined) {
|
586
|
zshift.x = event.pageX-canvas.width/2-canvas_pos.x;
|
587
|
zshift.y = event.pageY-canvas.height/2-canvas_pos.y;
|
588
|
}
|
589
|
event.preventDefault();
|
590
|
if (event.wheelDelta < 0 && zoom_control.value < zoom_control.max) {
|
591
|
zoom_control.value++;
|
592
|
change_zoom(zshift.x, zshift.y);
|
593
|
} else if (event.wheelDelta > 0 && zoom_control.value > zoom_control.min) {
|
594
|
zoom_control.value--;
|
595
|
change_zoom(zshift.x, zshift.y);
|
596
|
}
|
597
|
}
|
598
|
|
599
|
function change_zoom(shx, shy) {
|
600
|
var zoom_control = document.getElementById("zoom_ctrl");
|
601
|
var v = zoom_control.value;
|
602
|
|
603
|
prev_zm = zm;
|
604
|
|
605
|
if (zooms[v]) {
|
606
|
if (!zooms[v].is_updated) zooms[v].refresh();
|
607
|
} else {
|
608
|
zooms[v] = new tzoom(v);
|
609
|
}
|
610
|
|
611
|
if (zooms[v].is_updated) {
|
612
|
if (shx == undefined || shy == undefined) {
|
613
|
shx=0;
|
614
|
shy=0;
|
615
|
}
|
616
|
zm = zooms[v];
|
617
|
var px = (last.x+shx)*zm.im.width/prev_zm.im.width - shx;
|
618
|
var py = (last.y+shy)*zm.im.height/prev_zm.im.height - shy;
|
619
|
if (py < zm.im.height && py >= 0) {
|
620
|
zoom = zm.value;
|
621
|
tile = zm.tile;
|
622
|
ntiles = zm.ntiles;
|
623
|
putImage(px, py);
|
624
|
} else {
|
625
|
zm = prev_zm;
|
626
|
zoom_control.value = zm.value;
|
627
|
}
|
628
|
}
|
629
|
}
|
630
|
|
631
|
function change_angle() {
|
632
|
var elvtn_control = document.getElementById('elvtn_ctrl');
|
633
|
var angle_control = document.getElementById('angle_ctrl');
|
634
|
var resxy = zm.get_pos_xy(angle_control.value, elvtn_control.value);
|
635
|
var pos_x = resxy.x;
|
636
|
var pos_y = Math.floor(zm.im.height/2 - resxy.y);
|
637
|
putImage(pos_x, pos_y);
|
638
|
}
|
639
|
|
640
|
function check_prox(x, y, r) {
|
641
|
return Math.sqrt(x*x + y*y) < r;
|
642
|
}
|
643
|
|
644
|
function check_links(e) {
|
645
|
var mouse_x = e.pageX-canvas_pos.x;
|
646
|
var mouse_y = e.pageY-canvas_pos.y;
|
647
|
var pos_x = nmodulo(last.x + mouse_x - canvas.width/2, zm.im.width);
|
648
|
var pos_y = last.y + mouse_y - canvas.height/2;
|
649
|
for(var i = 0; i < zm.pt_list.length; i++) {
|
650
|
if (is_located && zm.pt_list[i]['type'] == 'pano_point') {
|
651
|
if (check_prox(zm.pt_list[i]['xc']-pos_x, zm.pt_list[i]['yc']-pos_y, 20)) {
|
652
|
if (zm.pt_list[i]['lnk'] != '') window.location = zm.pt_list[i]['lnk'];
|
653
|
break;
|
654
|
}
|
655
|
}
|
656
|
}
|
657
|
}
|
658
|
|
659
|
function display_links(e) {
|
660
|
var info = document.getElementById('info');
|
661
|
var mouse_x = e.pageX-canvas_pos.x;
|
662
|
var mouse_y = e.pageY-canvas_pos.y;
|
663
|
var pos_x = nmodulo(last.x + mouse_x - canvas.width/2, zm.im.width);
|
664
|
var pos_y = last.y + mouse_y - canvas.height/2;
|
665
|
|
666
|
var res = zm.get_cap_ele(pos_x, zm.im.height/2 - pos_y);
|
667
|
|
668
|
info.innerHTML = 'élévation : '+res.ele.toFixed(2)+'<br/>cap : '+res.cap.toFixed(2);
|
669
|
info.style.top = e.pageY+'px';
|
670
|
info.style.left = e.pageX+'px';
|
671
|
info.style.backgroundColor = '#FFC';
|
672
|
info.style.display = 'block';
|
673
|
canvas.style.cursor='crosshair';
|
674
|
for(var i = 0; i < zm.pt_list.length; i++) {
|
675
|
if (is_located || zm.pt_list[i]['type'] == 'ref_point') {
|
676
|
if (check_prox(zm.pt_list[i]['xc']-pos_x, zm.pt_list[i]['yc']-pos_y, 20)) {
|
677
|
info.innerHTML = zm.pt_list[i]['label'];
|
678
|
if (zm.pt_list[i]['dist'] < 10) var dst = Math.round(zm.pt_list[i]['dist']*1000)+' m';
|
679
|
else var dst = zm.pt_list[i]['dist'].toFixed(1)+' kms';
|
680
|
info.innerHTML += '<br/> à ' + dst;
|
681
|
info.style.backgroundColor = 'rgb('+point_colors[zm.pt_list[i]['type']]+')';
|
682
|
canvas.style.cursor='auto';
|
683
|
break;
|
684
|
}
|
685
|
}
|
686
|
}
|
687
|
}
|
688
|
|
689
|
function hide_links() {
|
690
|
canvas.removeEventListener( "mousemove", display_links, false);
|
691
|
var info = document.getElementById('info');
|
692
|
info.style.display = 'none';
|
693
|
}
|
694
|
|
695
|
function show_links() {
|
696
|
canvas.addEventListener( "mousemove", display_links, false);
|
697
|
|
698
|
|
699
|
}
|
700
|
|
701
|
function hide_contextmenu() {
|
702
|
document.getElementById('insert').style.display = 'none';
|
703
|
}
|
704
|
|
705
|
function manage_ref_points(e) {
|
706
|
|
707
|
|
708
|
var insrt = document.getElementById('insert');
|
709
|
document.getElementById('do-cancel').onclick = hide_contextmenu;
|
710
|
insrt.style.left = e.pageX+'px';
|
711
|
insrt.style.top = e.pageY+'px';
|
712
|
insrt.style.display = 'block';
|
713
|
var sel_pt = document.getElementById('sel_point');
|
714
|
var do_insert = document.getElementById('do-insert');
|
715
|
var do_delete = document.getElementById('do-delete');
|
716
|
var pos_x = nmodulo(last.x + e.pageX - canvas_pos.x - canvas.width/2, zm.im.width);
|
717
|
var pos_y = last.y + e.pageY - canvas_pos.y - canvas.height/2;
|
718
|
for(var i = 0; i < zm.pt_list.length; i++) {
|
719
|
if (zm.pt_list[i]['type'] == 'ref_point') {
|
720
|
if (check_prox(zm.pt_list[i]['xc']-pos_x, zm.pt_list[i]['yc']-pos_y, 20)) {
|
721
|
sel_pt.value = zm.pt_list[i]['label'];
|
722
|
}
|
723
|
}
|
724
|
}
|
725
|
do_delete.onclick = function() {delete_ref_point(insrt)};
|
726
|
do_insert.onclick = function() {insert_ref_point(insrt, e.pageX-canvas_pos.x, e.pageY-canvas_pos.y)};
|
727
|
return false;
|
728
|
}
|
729
|
|
730
|
function insert_ref_point(el, x, y) {
|
731
|
var label;
|
732
|
el.style.display = 'none';
|
733
|
for(var i = 0; i < zm.pt_list.length; i++) {
|
734
|
label = zm.pt_list[i]['label'];
|
735
|
if(label == document.getElementById('sel_point').value) {
|
736
|
var posx = nmodulo(last.x + x - canvas.width/2, zm.im.width)/zm.im.width;
|
737
|
var posy = 0.5 - (last.y + y - canvas.height/2)/zm.im.height;
|
738
|
var pval = {x:posx, y:posy, cap:zm.pt_list[i]['cap'], ele:zm.pt_list[i]['ele'], label:label};
|
739
|
ref_points[label] = pval;
|
740
|
document.getElementById('res').innerHTML = '<h4>Dernier point entré</h4>';
|
741
|
document.getElementById('res').innerHTML += '<p>reference["'+label+'"] = '+posx.toFixed(5)+','+posy.toFixed(5)+'</p>';
|
742
|
reset_zooms();
|
743
|
putImage(last.x, last.y);
|
744
|
break;
|
745
|
}
|
746
|
}
|
747
|
show_result();
|
748
|
}
|
749
|
|
750
|
function show_result(clear_before) {
|
751
|
var res = document.getElementById('res');
|
752
|
var strg = '';
|
753
|
for (var lbl in ref_points) {
|
754
|
strg += '<li>reference["'+lbl+'"] = '+ref_points[lbl].x.toFixed(5)+','+ref_points[lbl].y.toFixed(5)+'</li>';
|
755
|
}
|
756
|
if (strg) strg = '<h3>Liste de tous les points de référence</h3>\n<ul>' + strg + '</ul>';
|
757
|
if (clear_before) res.innerHTML = strg;
|
758
|
else res.innerHTML += strg;
|
759
|
}
|
760
|
|
761
|
function delete_ref_point(el) {
|
762
|
el.style.display = 'none';
|
763
|
delete ref_points[document.getElementById('sel_point').value];
|
764
|
reset_zooms();
|
765
|
putImage(last.x, last.y);
|
766
|
show_result(true);
|
767
|
}
|
768
|
|
769
|
function clean_canvas_events(e) {
|
770
|
canvas.removeEventListener('mousemove', stickImage, false);
|
771
|
document.getElementById('info').style.display = 'none';
|
772
|
speed.x = 0;
|
773
|
speed.y = 0;
|
774
|
}
|
775
|
|
776
|
canvas_set_size = function() {
|
777
|
canvas.style.border = border_width+"px solid red";
|
778
|
canvas.width = window.innerWidth-2*border_width;
|
779
|
canvas.height = window.innerHeight-2*border_width;
|
780
|
canvas_pos.x = canvas.offsetLeft+border_width;
|
781
|
canvas_pos.y = canvas.offsetTop+border_width;
|
782
|
}
|
783
|
|
784
|
canvas_resize = function() {
|
785
|
canvas_set_size();
|
786
|
putImage(last.x, last.y);
|
787
|
}
|
788
|
|
789
|
function paramIn(e) {
|
790
|
e = e || window.event;
|
791
|
var relatedTarget = e.relatedTarget || e.fromElement;
|
792
|
|
793
|
while (relatedTarget != adding && relatedTarget.nodeName != 'BODY' && relatedTarget != document && relatedTarget != localisation) {
|
794
|
relatedTarget = relatedTarget.parentNode;
|
795
|
}
|
796
|
|
797
|
if (relatedTarget != adding && relatedTarget != localisation) {
|
798
|
document.removeEventListener('keydown', keys, false);
|
799
|
}
|
800
|
}
|
801
|
|
802
|
function paramOut(e) {
|
803
|
|
804
|
e = e || window.event;
|
805
|
var relatedTarget = e.relatedTarget || e.toElement;
|
806
|
|
807
|
while (relatedTarget != adding && relatedTarget.nodeName != 'BODY' && relatedTarget != document && relatedTarget != localisation) {
|
808
|
relatedTarget = relatedTarget.parentNode;
|
809
|
}
|
810
|
|
811
|
if (relatedTarget != adding && relatedTarget != localisation) {
|
812
|
document.addEventListener('keydown', keys, false);
|
813
|
}
|
814
|
|
815
|
}
|
816
|
|
817
|
window.onload = function() {
|
818
|
localisation = document.getElementById("locadraw");
|
819
|
adding = document.getElementById("adding");
|
820
|
canvas = document.getElementById("mon-canvas");
|
821
|
cntext = canvas.getContext("2d");
|
822
|
canvas_set_size();
|
823
|
canvas.addEventListener("click", check_links, false);
|
824
|
|
825
|
canvas.oncontextmenu = manage_ref_points;
|
826
|
canvas.addEventListener("mouseout" , clean_canvas_events, false);
|
827
|
show_links();
|
828
|
|
829
|
var max_zoom = zooms.length - 1;
|
830
|
zoom_control = document.getElementById("zoom_ctrl");
|
831
|
zoom_control.onchange = change_zoom;
|
832
|
zoom_control.max = max_zoom;
|
833
|
if (to_zoom > max_zoom) to_zoom = Math.floor(max_zoom/2);
|
834
|
zm = zooms[to_zoom];
|
835
|
zoom_control.value = to_zoom;
|
836
|
zm.refresh();
|
837
|
|
838
|
zoom = zm.value;
|
839
|
tile = zm.tile;
|
840
|
ntiles = zm.ntiles;
|
841
|
|
842
|
angle_control = document.getElementById("angle_ctrl");
|
843
|
angle_control.value = to_cap;
|
844
|
angle_control.onchange = change_angle;
|
845
|
angle_control.onclick = change_angle;
|
846
|
elvtn_control = document.getElementById("elvtn_ctrl");
|
847
|
elvtn_control.value = to_ele;
|
848
|
elvtn_control.onchange = change_angle;
|
849
|
elvtn_control.onclick = change_angle;
|
850
|
|
851
|
change_angle();
|
852
|
loca_temp = document.getElementById("loca_show");
|
853
|
if (loca_temp) {
|
854
|
loca_temp.onclick = showLoca;
|
855
|
loca_temp = document.getElementById("loca_hide");
|
856
|
loca_temp.onclick = hideLoca;
|
857
|
loca_temp = document.getElementById("loca_button");
|
858
|
loca_temp.onclick = localate_point;
|
859
|
loca_erase = document.getElementById("loca_erase");
|
860
|
loca_erase.onclick = erase_point;
|
861
|
localisation.addEventListener('mouseover',paramIn,false);
|
862
|
localisation.addEventListener('mouseout',paramOut,false);
|
863
|
}
|
864
|
canvas.addEventListener('mousedown', onImageClick, false);
|
865
|
document.addEventListener('keydown', keys, false);
|
866
|
canvas.addEventListener('mousewheel', wheel_zoom, false);
|
867
|
window.onresize = canvas_resize;
|
868
|
if (adding) {
|
869
|
document.getElementById("paramFormHide").onclick = hideForm;
|
870
|
document.getElementById("paramFormShow").onclick = showForm;
|
871
|
adding.addEventListener('mouseover', paramIn, false);
|
872
|
adding.addEventListener('mouseout', paramOut, false);
|
873
|
}
|
874
|
};
|