Projet

Général

Profil

Paste
Télécharger (20 ko) Statistiques
| Branche: | Révision:

root / js / pano_array.js @ 1f5db711

1
if (img_prefix == undefined) var img_prefix = './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 (cap == undefined) var cap = 0;
5
if (elevation == undefined) var elevation = 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
var canvas;
12
var cntext;
13
var point_list = new Array();
14
var zoom;
15
var to_zoom;
16
var zooms = new Array();
17
var prev_zm;
18
var zm;
19
var tile = {width:256, height:256};
20
var ntiles = {x:228, y:9};
21
var border_width = 5;
22
var imageObj = new Array();
23

    
24
var last  = {x:0,y:0};
25
var shift = {x:0,y:0};
26
var mouse = {x:0,y:0};
27
var speed = {x:0,y:0};
28
var canvas_pos = {x:0,y:0};
29
var tmt;
30

    
31
var test = {x:0, y:0, i:100};
32

    
33
function nmodulo(val, div) {                // pour obtenir un modulo dans l'espace des nombres naturels N.
34
    return Math.floor((val%div+div)%div);   // il y a peut être plus simple, mais en attendant .... 
35
}
36

    
37
function fmodulo(val, div) {                // pour obtenir un modulo dans l'espace des nombres réels positifs.
38
    return (val%div+div)%div;               // il y a peut être plus simple, mais en attendant .... 
39
}
40

    
41
function distort_canvas(p, x, y) {
42
    if (p == 0) distort = 0;
43
    else {
44
        cntext.save();
45
        distort++;
46
        cntext.clearRect(0, 0, canvas.width, 2*canvas.height);
47
        var ratio = (canvas.width-2*distort)/canvas.width;
48
        var shift = canvas.height/2*(1-ratio);
49
        cntext.scale(1, ratio);
50
        if (p == 1) cntext.translate(0, 0);
51
        else if (p == -1) cntext.translate(0, 0);
52
        draw_image(x, y);
53
        cntext.restore();
54
        document.getElementById('res').innerHTML = 'distort : ' + distort + ' shift ' + shift + ' ratio : ' + ratio + '<br/>';
55
    }
56
}
57

    
58
function draw_image(ox, oy) {
59
    ox = nmodulo(ox-canvas.width/2, zm.im.width);        // pour placer l'origine au centre du canvas 
60
    oy = Math.floor(oy-canvas.height/2);                             // pas de rebouclage vertical
61

    
62
    cntext.clearRect(0, 0, canvas.width, canvas.height);
63
    cntext.fillStyle = "rgba(128,128,128,0.8)";
64
    
65
    if (canvas.height > zm.im.height) {
66
        var fy = Math.floor((oy+canvas.height/2-zm.im.height/2)/(tile.height*zm.ntiles.y))*zm.ntiles.y;
67
        if (fy < 0) fy = 0; 
68
        var ly = fy + zm.ntiles.y;
69
    } else {
70
        var fy = Math.floor(oy/tile.height);
71
        var ly = Math.floor((oy+canvas.height+tile.height-1)/tile.height+1);
72
        if (fy < 0) fy = 0; 
73
        if (ly > zm.ntiles.y) ly = zm.ntiles.y; 
74
    }
75

    
76
    for (var j=fy; j<ly; j++) {
77
        var delta_y = (Math.floor(j/zm.ntiles.y) - Math.floor(fy/zm.ntiles.y)) * (tile.height - zm.last_tile.height);
78
        var dy = j*tile.height - oy - delta_y;
79
        var ny = j%ntiles.y;
80
        var wy = zm.tile.width;
81
        if (ny == zm.ntiles.y - 1) wy = zm.last_tile.height;
82

    
83
        var cpx = 0;
84
        var i = 0;
85
        var Nx = zm.ntiles.x;
86
        while (cpx < ox+canvas.width) {
87
            var cur_width = zm.tile.width;
88
            if (i%Nx == zm.ntiles.x-1) cur_width = zm.last_tile.width;
89
            if (cpx >= ox-cur_width) {
90
                var nx = i%Nx;
91
                load_image(nx, ny, cpx-ox, dy, ox, oy);
92
            }
93
            cpx += cur_width;
94
            i++;
95
        }
96
    }
97
    drawDecorations(ox, oy);
98
}
99

    
100
function load_image(nx, ny, ox, oy, x, y) {
101
    var idx = nx+'-'+ny+'-'+zoom;
102
    if (imageObj[idx] && imageObj[idx].complete) {
103
        draw_tile(idx, ox, oy); // l'image est déja en mémoire, on force le dessin sans attendre.
104
    } else {
105
        var fname = get_file_name(nx, ny, zoom);
106
        imageObj[idx] = new Image();
107
        imageObj[idx].src = fname;
108
        var ts = zm.get_tile_size(nx, ny);
109
        cntext.fillRect(ox, oy, ts.width, ts.height);
110
        var dx = shift.x;
111
        var dy = shift.y;
112
        imageObj[idx].addEventListener('load', function() {draw_tile_del(zoom, dx, dy, idx, ox, oy, x, y)}, false);
113
    }
114
}
115

    
116
function draw_tile_del(ezoom, dx, dy, idx, ox, oy, x, y) {
117
    if (ezoom == zoom && dx == shift.x && dy == shift.y) {
118
        draw_tile(idx, ox, oy);
119
        drawDecorations(x, y);
120
    }
121
}
122

    
123
function draw_tile(idx, ox, oy) {
124
    var img = imageObj[idx];
125
    cntext.drawImage(img, ox, oy);
126
}
127

    
128
function drawDecorations(ox, oy) {
129
    var wgrd = zm.im.width/360;
130
    var od = ((ox+canvas.width/2)/wgrd)%360;
131
    var el = (zm.im.height/2 - (oy+canvas.height/2))/wgrd;
132
//    document.getElementById('angle_ctrl').value = od.toFixed(2);
133
//    document.getElementById('elvtn_ctrl').value = el.toFixed(2);
134
    cntext.fillStyle = "rgba(0,128,128,0.9)";
135
    cntext.strokeStyle = "rgb(255,255,255)";
136
    cntext.lineWidth = 1;
137
    cntext.fillRect(canvas.width/2-5, canvas.height/2-5, 10, 10);
138
    cntext.strokeRect(canvas.width/2-5, canvas.height/2-5, 10, 10);
139
    document.getElementById('res').innerHTML = '';
140
    for(var i = 0; i < zm.pt_list.length; i++) {
141
        var cx = nmodulo(zm.pt_list[i]['xc'] - ox, zm.im.width);
142
        var cy = zm.pt_list[i]['yc'] - oy;
143
        if (zm.pt_list[i]['lnk'] != undefined) cntext.fillStyle = "rgba(255,128,128,0.5)";
144
        else cntext.fillStyle = "rgba(128,255,128,0.5)";
145
        cntext.beginPath();
146
        cntext.arc(cx, cy, 20, 0, 2*Math.PI, true);
147
        cntext.fill();
148
        document.getElementById('res').innerHTML += 'cx : ' + cx + ' cy ' + cy + ' lnk : ' + zm.pt_list[i]['lnk'] + '<br/>';
149
    }
150

    
151
    //cntext.font = "20pt Arial";
152
    //cntext.fillRect(0, 0, 200, 20);
153
    //cntext.fillStyle = "rgb(255,0,0)";
154
    //cntext.fillText(od.toFixed(2), 5, 20);
155
    //for (i=0; i<canvas.width/wgrd; i++) {
156
        //cntext.strokeRect(i*wgrd, 0, wgrd, 20);
157
    //}
158
}
159

    
160
function get_file_name(x, y, z) { // recherche du fichier correspondant au zoom et à la position
161
    var prm = [z, x, y];
162
    var fname = img_prefix;
163
    for (var i = 0; i < prm.length; i++) {
164
        fname += '_';
165
        if (prm[i] < 10) fname += '00';
166
        else if (prm[i] < 100) fname += '0';
167
        fname += prm[i];
168
    }
169
    fname += '.jpg';
170
    return fname;
171
}
172

    
173
function keys(key) {
174
    event.preventDefault();
175
    event.stopPropagation();
176
    if (!key) {
177
        key = event;
178
        key.which = key.keyCode;
179
    }
180
    evt = key || event;
181
//    alert(key);
182
//    if (!evt.shiftKey) return;
183
    switch (key.which) {
184
    case 36: // home
185
        test.x=0;
186
        test.y=0;
187
        putImage(test.x, test.y);
188
        return;
189
    case 66: // b
190
        alert(key.pageX);
191
        test.x=tile.width*(ntiles.x-3);
192
        test.y=0;
193
        putImage(test.x, test.y);
194
        return;
195
    case 67: // c
196
        test.x=0;
197
        test.y=tile.height*(ntiles.y-3);
198
        putImage(test.x, test.y);
199
        return;
200
    case 35: // end
201
        test.x=tile.width*(ntiles.x-3);
202
        test.y=tile.height*(ntiles.y-3);
203
        putImage(test.x, test.y);
204
        return;
205
    case 39: // left
206
        test.x+=test.i;
207
        putImage(test.x, test.y);
208
        return;
209
    case 40: // up
210
        test.y+=test.i;
211
        putImage(test.x, test.y);
212
        return;
213
    case 37: // right
214
        test.x-=test.i;
215
        putImage(test.x, test.y);
216
        return;
217
    case 38: // down
218
        test.y-=test.i;
219
        putImage(test.x, test.y);
220
        return;
221
    case 33: // pageup
222
        test.y=0;
223
        putImage(test.x, test.y);
224
        return;
225
    case 34: // pagedown
226
        test.y=tile.height*(ntiles.y-3);
227
        putImage(test.x, test.y);
228
        return;
229
    default:
230
        //alert(key.which)
231
        return;
232
    }
233
}
234

    
235
function onImageClick(e) {
236
    shift.x = last.x;
237
    shift.y = last.y;
238
    speed.x = 0;
239
    speed.y = 0;
240
    mouse.x = e.pageX;
241
    mouse.y = e.pageY;
242
    clearTimeout(tmt);  //arrêt de l'éffet eventuel d'amorti en cours.
243
    canvas.addEventListener('mousemove', stickImage, false);
244
    canvas.addEventListener('mouseup', launchImage, false);
245
    //canvas.addEventListener('mouseout', launchImage, false);
246
    canvas.style.cursor='move';
247
    //document.onmousemove = stickImage;
248
    document.onmouseup = launchImage;
249
    hide_links();
250
}
251

    
252

    
253
function stickImage(e) {
254
    var xs = mouse.x - e.pageX + shift.x;
255
    var ys = mouse.y - e.pageY + shift.y;
256
    speed.x = xs - last.x;  //mémorisation des vitesses horizontales
257
    speed.y = ys - last.y;  //et verticales lors de ce déplacement
258
    putImage(xs, ys);
259
}
260

    
261
function launchImage(e) {
262
    distort_canvas(0);
263
    canvas.removeEventListener('mousemove', stickImage, false);
264
    show_links();
265
    //document.onmousemove = null;
266
    shift.x = e.pageX - mouse.x + shift.x;
267
    shift.y = e.pageY - mouse.y + shift.y;
268
    tmt = setTimeout(inertialImage, 100);
269
}
270

    
271
function putImage(x, y) { // est destiné à permettre l'effet d'amortissement par la mémorisation de la position courante.
272
    if (!zm.is_updated) return; 
273
    if (x >= zm.im.width) {   // rebouclage horizontal
274
        shift.x -= zm.im.width;
275
        x -= zm.im.width;
276
    } else if (x < 0) {
277
        shift.x += zm.im.width;
278
        x += zm.im.width;
279
    }
280
    if (y >= zm.im.height) {   // pas de rebouclage vertical mais blocage
281
        //distort_canvas(1, x, y);
282
        shift.y = zm.im.height-1;
283
        y = zm.im.height-1;
284
    } else if (y < 0) {
285
        //distort_canvas(-1, x, y);
286
        shift.y = 0;
287
        y = 0;
288
    }
289

    
290
    draw_image(x, y);
291
    last.x = x;
292
    last.y = y;
293
}
294

    
295
function inertialImage() {
296
    speed.x *= 0.9;
297
    speed.y *= 0.9;
298
    if (Math.abs(speed.x) > 2 || Math.abs(speed.y) > 2) {
299
        putImage(last.x+speed.x, last.y+speed.y);
300
        tmt = setTimeout(inertialImage, 100);
301
    }
302
}
303

    
304
function tri_ref_points(v1, v2) {
305
    return v1['x'] - v2['x'];
306
}
307

    
308

    
309

    
310
function tzoom(zv) {
311
    this.ref_pixels = new Array;
312
    this.value = zv;
313
    this.ntiles = {x:0,y:0};
314
    this.tile = {width:0,height:0};
315
    this.last_tile = {width:0,height:0};
316
    this.max_tile = {width:0,height:0};
317
    this.im = {width:0,height:0};
318
    this.pt_list = new Array();
319
    this.is_updated = false;
320

    
321
    this.refresh = function() {
322
        this.im.visible_width = this.tile.width*(this.ntiles.x-1)+this.last_tile.width;
323
        this.is_updated = true;
324

    
325
        this.im.width = this.im.visible_width;
326
        this.im.height = this.tile.height*(this.ntiles.y-1)+this.last_tile.height;
327
        if (this.last_tile.width > this.tile.width) this.max_tile.width = this.im.last_tile.width;
328
        else this.max_tile.width = this.tile.width;
329
        if (this.last_tile.height > this.tile.height) this.max_tile.height = this.im.last_tile.height;
330
        else this.max_tile.height = this.tile.height;
331

    
332
        this.ref_pixels[0] = new Array();    // Attention il faut compter un intervalle de plus !
333
        ord_pts = new Array();
334
        i=0;
335
        for(var label in ref_points) {
336
            ord_pts[i] = ref_points[label]
337
        }
338
        ord_pts = ord_pts.sort(tri_ref_points);
339

    
340
        for (var i=0; i < ord_pts.length; i++) {
341
            this.ref_pixels[i+1] = new Array();
342
            if (i != ord_pts.length-1) {
343
                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;
344
                this.ref_pixels[i+1]['ratio_y'] = (ord_pts[i+1]['y'] - ord_pts[i]['y'])/fmodulo(ord_pts[i+1]['ele'] - ord_pts[i]['ele'], 360);
345
            }
346
            this.ref_pixels[i+1]['x'] = Math.floor(ord_pts[i]['x']*this.im.width);
347
            this.ref_pixels[i+1]['cap'] = ord_pts[i]['cap'];
348
            this.ref_pixels[i+1]['y'] = Math.floor(ord_pts[i]['y']*this.im.height);
349
            this.ref_pixels[i+1]['ele'] = ord_pts[i]['ele'];
350
        }
351
        if (image_loop == true) {
352
            var dpix = this.im.width;
353
            var dangle = 360;
354
            if (ord_pts.length > 1) {
355
                dpix = zm.im.width - this.ref_pixels[this.ref_pixels.length-1]['x'] + this.ref_pixels[1]['x'];
356
                dangle = fmodulo(this.ref_pixels[1]['cap'] - this.ref_pixels[this.ref_pixels.length-1]['cap'], 360);
357
            }
358
            this.ref_pixels[0]['ratio_x'] = dpix/dangle;
359
            this.ref_pixels[ord_pts.length]['ratio_x'] = this.ref_pixels[0]['ratio_x'];
360
            this.ref_pixels[ord_pts.length]['ratio_y'] = this.ref_pixels[0]['ratio_y'];
361
            dpix = this.im.width - this.ref_pixels[ord_pts.length]['x'];
362
            this.ref_pixels[0]['cap'] = this.ref_pixels[ord_pts.length]['cap'] + dpix / this.ref_pixels[0]['ratio_x'];
363
        } else {
364
            this.ref_pixels[0]['ratio_x'] = this.ref_pixels[1]['ratio_x'];
365
            this.ref_pixels[ord_pts.length]['ratio_x'] = this.ref_pixels[ord_pts.length-1]['ratio_x'];
366
            this.ref_pixels[0]['ratio_y'] = this.ref_pixels[1]['ratio_y'];
367
            this.ref_pixels[ord_pts.length]['ratio_y'] = this.ref_pixels[ord_pts.length-1]['ratio_y'];
368
            this.ref_pixels[0]['cap'] = this.ref_pixels[1]['cap'] - this.ref_pixels[1]['x'] / this.ref_pixels[1]['ratio_x'];
369
        }
370
        this.ref_pixels[0]['x'] = 0;
371
        this.ref_pixels[0]['y'] = 0;
372
        this.ref_pixels[0]['ele'] = 0;
373

    
374

    
375
        for (var i=0; i<point_list.length; i++) {
376
            this.pt_list[i] = new Array();
377
            this.pt_list[i]['angle'] = point_list[i][2];
378
            this.pt_list[i]['label'] = point_list[i][0];
379
            this.pt_list[i]['xc'] = Math.floor(this.get_pxx(point_list[i][2], 360));
380
//            var tmp = fmodulo(point_list[i][2], 360);
381
//            this.pt_list[i]['xc'] = Math.floor(tmp * this.im.width/360);
382
            this.pt_list[i]['yc'] = Math.floor(this.im.height/2 - (point_list[i][3] + elevation) * this.im.width/360);
383
            if (point_list[i][4] != '') this.pt_list[i]['lnk'] = point_list[i][4]+'&to_zoom='+zv;
384
        }
385
    }
386
    
387
    this.get_tile_size = function(nx, ny) {
388
        var res = {width:0, height:0};
389
        if (nx == this.ntiles.x-1) res.width = this.last_tile.width;
390
        else res.width = this.tile.width;
391
        if (ny == this.ntiles.y-1) res.height = this.last_tile.height;
392
        else res.height = this.tile.height;
393
        return res;
394
    }
395
    
396
    this.get_cap = function(px) {                         // recherche du cap à partir d'un pixel.
397
        for (var i=0; i < this.ref_pixels.length; i++) {
398
            if (i == this.ref_pixels.length - 1 || px < this.ref_pixels[i+1]['x']) {
399
                return fmodulo(this.ref_pixels[i]['cap']+(px-this.ref_pixels[i]['x'])/this.ref_pixels[i]['ratio_x'], 360);
400
            }
401
        }
402
    }
403
    
404
    this.get_pxx = function(cap) {                        // recherche du pixel à partir d'un cap.
405
        var dcap = fmodulo(cap-this.ref_pixels[0]['cap'], 360);
406
        for (var i=0; i < this.ref_pixels.length; i++) {
407
            if (i == this.ref_pixels.length - 1 || dcap < fmodulo(this.ref_pixels[i+1]['cap']-this.ref_pixels[0]['cap'], 360)) {
408
                return this.ref_pixels[i]['x'] + this.ref_pixels[i]['ratio_x']*fmodulo(cap - this.ref_pixels[i]['cap'], 360);
409
            }
410
        }
411
    }
412
}
413

    
414
function wheel_zoom (event) {
415
    var zshift = {x:0, y:0};
416
    if (event.pageX != undefined && event.pageX != undefined) {
417
        zshift.x = event.pageX-canvas.width/2-canvas_pos.x;
418
        zshift.y = event.pageY-canvas.height/2-canvas_pos.y;
419
    }
420
    event.preventDefault();
421
    if (event.wheelDelta < 0 && zoom_control.value < zoom_control.max) {
422
        zoom_control.value++;
423
        change_zoom(zshift.x, zshift.y);
424
    } else if (event.wheelDelta > 0 && zoom_control.value > zoom_control.min) {
425
        zoom_control.value--; 
426
        change_zoom(zshift.x, zshift.y);
427
    }
428
}
429

    
430
function change_zoom(shx, shy) {
431
    var zoom_control = document.getElementById("zoom_ctrl");
432
    var v = zoom_control.value;
433

    
434
    prev_zm = zm;
435

    
436
    if (zooms[v]) {
437
        if (!zooms[v].is_updated) zooms[v].refresh();
438
    } else {
439
        zooms[v] = new tzoom(v);
440
    }
441

    
442
    if (zooms[v].is_updated) {
443
        if (shx == undefined || shy == undefined) {
444
            shx=0;
445
            shy=0;
446
        }
447
        zm = zooms[v];
448
        var px = (last.x+shx)*zm.im.width/prev_zm.im.width - shx;
449
        var py = (last.y+shy)*zm.im.height/prev_zm.im.height - shy;
450
        if (py < zm.im.height && py >= 0) {
451
            zoom = zm.value;
452
            tile = zm.tile;
453
            ntiles = zm.ntiles;
454
            putImage(px, py);
455
        } else {
456
            zm = prev_zm;
457
            zoom_control.value = zm.value;
458
        }
459
    }
460
}
461

    
462
function change_angle() {
463
    var elvtn_control = document.getElementById('elvtn_ctrl');
464
    var angle_control = document.getElementById('angle_ctrl');
465
    var pos_x = zm.im.width*angle_control.value/360;
466
    var pos_y = Math.floor(zm.im.height/2 - zm.im.width*elvtn_control.value/360);
467
    putImage(pos_x, pos_y);
468
}
469

    
470
function check_links(e) {
471
    var mouse_x = e.pageX-canvas_pos.x;
472
    var mouse_y = e.pageY-canvas_pos.y;
473
    var pos_x = nmodulo(last.x + mouse_x - canvas.width/2, zm.im.width);
474
    var pos_y = last.y + mouse_y - canvas.height/2;
475
    for(var i = 0; i < zm.pt_list.length; i++) {
476
        if (Math.sqrt((zm.pt_list[i]['xc'] - pos_x) * (zm.pt_list[i]['xc'] - pos_x) + (zm.pt_list[i]['yc'] - pos_y) * (zm.pt_list[i]['yc'] - pos_y)) < 20) {
477
            if (zm.pt_list[i]['lnk'] != undefined) window.location = zm.pt_list[i]['lnk'];
478
            break;
479
        }
480
    }
481
}
482

    
483
function display_links(e) {
484
    var info = document.getElementById('info');
485
    var mouse_x = e.pageX-canvas_pos.x;
486
    var mouse_y = e.pageY-canvas_pos.y;
487
    var pos_x = nmodulo(last.x + mouse_x - canvas.width/2, zm.im.width);
488
    var pos_y = last.y + mouse_y - canvas.height/2;
489
    //var cap = ((pos_x/zm.im.width)*360).toFixed(2);
490
    var cap = zm.get_cap(pos_x).toFixed(2);
491
    var elev = (((zm.im.height/2 - pos_y)/zm.im.width)*360 - elevation).toFixed(2);
492
    info.innerHTML = 'élévation :'+elev+'<br/>cap :'+cap;
493
    info.style.top = e.pageY+'px';
494
    info.style.left = e.pageX+'px';
495
    info.style.backgroundColor = '#FFC';
496
    canvas.style.cursor='crosshair';
497
    for(var i = 0; i < zm.pt_list.length; i++) {
498
        if (Math.sqrt((zm.pt_list[i]['xc'] - pos_x) * (zm.pt_list[i]['xc'] - pos_x) + (zm.pt_list[i]['yc'] - pos_y) * (zm.pt_list[i]['yc'] - pos_y)) < 20) {
499
            info.innerHTML = zm.pt_list[i]['label'];
500
            info.style.backgroundColor = '#FC8';
501
            canvas.style.cursor='auto';
502
            break;
503
        }
504
    }
505
}
506

    
507
function hide_links() {
508
    canvas.removeEventListener( "mousemove", display_links, false);
509
    var info = document.getElementById('info');
510
    info.style.display = 'none';
511
}
512

    
513
function show_links() {
514
    canvas.addEventListener( "mousemove", display_links, false);
515
    var info = document.getElementById('info');
516
    info.style.display = 'block';
517
}
518

    
519
function show_insert_point(e) {
520
    event.preventDefault();
521
    event.stopPropagation();
522
    var insrt = document.getElementById('insert');
523
    document.getElementById('do-insert').onclick = function() {insert_point(insert, e.pageX-canvas_pos.x, e.pageY-canvas_pos.y)};
524
    document.getElementById('do-cancel').onclick = function() {insert.style.display = 'none'};
525
    insrt.style.left = e.pageX+'px';
526
    insrt.style.top = e.pageY+'px';
527
    insrt.style.display = 'block';
528
}
529

    
530
function insert_point(el, x, y) {
531
    el.style.display = 'none';
532
    for(var i = 0; i < zm.pt_list.length; i++) {
533
        var label = zm.pt_list[i]['label'];
534
        if(label == document.getElementById('sel_point').value) {
535
            var posx = nmodulo(last.x + x - canvas.width/2, zm.im.width)/zm.im.width;
536
            var posy = 0;
537
            var pval = {x:posx, cap:zm.pt_list[i]['angle'], y:posy, label:label};
538
            ref_points[label] = pval;
539
            document.getElementById('res').innerHTML += zm.pt_list[i]['label'] + '. ' + posx + '=' + zm.pt_list[i]['angle'] + '<br/>';
540
             putImage(last.x, last.y);
541

    
542
//            if (ref_points.length > 1) {
543
//                var pval0 = inserted_points[inserted_points.length-2];
544
//                var origin = fmodulo(pval0.angle - ((pval.angle - pval0.angle)/(pval.ratio - pval0.ratio))*pval0.ratio, 360);
545
//                var end = fmodulo(pval.angle + ((pval.angle - pval0.angle)/(pval.ratio - pval0.ratio))*(1-pval.ratio), 360);
546
//                document.getElementById('res').innerHTML += 'cap_min = ' + origin + '<br/>';
547
//                document.getElementById('res').innerHTML += 'cap_max = ' + end + '<br/>';
548
//            }
549
            break;
550
        }
551
    }
552
}
553

    
554
function clean_canvas_events(e) {
555
    canvas.removeEventListener('mousemove', stickImage, false);
556
    document.getElementById('info').style.display = 'none';
557
    speed.x = 0;
558
    speed.y = 0;
559
}
560

    
561
window.onload = function() {
562
    canvas = document.getElementById("mon-canvas");
563
    canvas.style.border = border_width+"px solid red";
564
    cntext = canvas.getContext("2d");
565
    canvas.width = window.innerWidth-200;
566
    canvas.height = window.innerHeight-20;
567
    canvas.addEventListener("click", check_links, false);
568
    canvas_pos.x = canvas.offsetLeft+border_width;
569
    canvas_pos.y = canvas.offsetTop+border_width;
570
    canvas.addEventListener("contextmenu", show_insert_point, false);
571
    canvas.addEventListener("mouseout", clean_canvas_events, false);
572

    
573
    show_links();
574

    
575
    var max_zoom = zooms.length - 1;
576
    zoom_control = document.getElementById("zoom_ctrl");
577
    zoom_control.onchange = change_zoom;
578
    zoom_control.max = max_zoom;
579
    if (to_zoom == undefined || to_zoom > max_zoom) to_zoom = Math.floor(max_zoom/2);
580
    zm = zooms[to_zoom];
581
    zoom_control.value = to_zoom;
582
    zm.refresh();
583

    
584
    zoom = zm.value;
585
    tile = zm.tile;
586
    ntiles = zm.ntiles;
587

    
588
    angle_control = document.getElementById("angle_ctrl");
589
    angle_control.value = to_cap;
590
    angle_control.onchange = change_angle;
591
    angle_control.onclick = change_angle;
592
    angle_control.onkeyup = change_angle;
593
    elvtn_control = document.getElementById("elvtn_ctrl");
594
    elvtn_control.value = to_ele+elevation;
595
    elvtn_control.onchange = change_angle;
596
    elvtn_control.onclick = change_angle;
597
    elvtn_control.onkeyup = change_angle;
598

    
599
    change_angle();
600

    
601
    canvas.addEventListener('mousedown', onImageClick, false);
602
    addEventListener('keyup', keys, false);
603
    canvas.addEventListener('mousewheel', wheel_zoom, false);
604
};