Project

General

Profile

« Previous | Next » 

Revision 7f9aab46

ID7f9aab46527fc167ca5e3e4de05fa21fdad8f6c6
Parent 1f5db711
Child 6b16425b

Added by Victor Pongnian over 9 years ago

Version réaliée pour la sage de Victor Pongnian

Files

  • added
  • modified
  • copied
  • renamed
  • deleted

View differences

Changesets

class/site_point.class.php
9 9
  public function __construct($dir) {
10 10
    $this->base_dir = $dir;
11 11
    $dir_fd = opendir($this->base_dir);
12
  
12 13
    while (false !== ($file = readdir($dir_fd))) {
14
    	
13 15
       if (preg_match('/(.*)_[0-9]+_[0-9]+_[0-9]+\.jpg$/', $file, $reg)) {
14 16
	 $this->prefix = $reg[1];
17
	 
15 18
	 break;
16 19
       }
17 20
    }
......
20 23
    $pfname = $this->base_dir.'/'.$this->prefix.'.params';
21 24
    if (is_file($pfname)) {
22 25
      $this->params = @parse_ini_file($pfname);
23
    }
26
    } 
24 27
  }
25 28
  
26 29
  public function get_params() {
......
65 68
    $lon2 = $lon * M_PI/180;
66 69

  
67 70
    $dLat = $lat2-$lat1;
68
    $dLon = $lon2-$lon1;
71
    $dLon = $lon2-$lon1; 
69 72
    
70
    $a = sin($dLat/2) * sin($dLat/2) + sin($dLon/2) * sin($dLon/2) * cos($lat1) * cos($lat2); 
73
    $a = sin($dLat/2) * sin($dLat/2) + sin($dLon/2) * sin($dLon/2) * cos($lat1) * cos($lat2);  // 
71 74
    $angle = 2 * atan2(sqrt($a), sqrt(1-$a));
72 75
    $d = $angle * $rt;                    // distance du point en Kms
73 76
    
74 77
    $y = sin($dLon)*cos($lat2);
75 78
    $x = cos($lat1)*sin($lat2) - sin($lat1)*cos($lat2)*cos($dLon);
76 79
    $cap = atan2($y, $x);                 // cap pour atteindre le point en radians
77

  
80
    
78 81
    $e = atan2(($alt2 - $alt1)/1000 - $d*$d/(2*$rt), $d);  // angle de l'élévation en radians
79 82
    //    printf("%s, %s, %s, %s\n",$lat1, $this->params['latitude'], $lat, $dLat);
80

  
81
    return array($d, $cap*180/M_PI, $e*180/M_PI);   // les résultats sont en degrés
83
	
84
    return array($d, $cap*180/M_PI, $e*180/M_PI, $rapport);   // les résultats sont en degrés
82 85
  }
83 86
  
84 87
}
class/sites_dir.class.php
4 4

  
5 5
  public function __construct($dir) {
6 6
    $this->base_dir = $dir;
7
  }
7
    }
8 8
  
9 9
  public function get_sites() {
10
    $dir_fd = opendir($this->base_dir);
10
	try
11
	{
12
	    $dir_fd = opendir($this->base_dir);
13
	}
14
	catch(Exception $e)
15
	{
16
		die('Erreur : '.$e->getMessage());
17
	}
18
	     
19
 
11 20
    $point_list = array();
12 21
    while (false !== ($point_dir = readdir($dir_fd))) {
13 22
      $pt = new site_point($this->base_dir.'/'.$point_dir);
......
15 24
    }
16 25
    return $point_list;
17 26
  }
27
  
28
  public function get_dir() {
29
  	return $this->base_dir;
30
  }
18 31

  
19 32
}
css/all.css
41 41
    border:solid #F00 1px;
42 42
    border-radius:0.5em;
43 43
    padding:0 1em;
44
    text-shadow:2px 2px 2px #000, -2px -2px 2px #000;
44 45
}      
45 46

  
47
legend:hover {
48
    color:#FF0;
49
    cursor:default;
50
}
51

  
46 52
fieldset#control {
47 53
    text-shadow:2px 2px 2px #000, -2px -2px 2px #000;
48 54
    color:#FFF;
......
59 65
input {
60 66
    vertical-align:middle;
61 67
}
68

  
69

  
62 70
input[type="number"] {
63 71
    border-radius:1em;
64 72
    display:block;
65 73
    float:right;
66 74
}
67 75

  
68
#res>:not(ul), #control, #params, #info {
76
#locadraw input[type="number"] {
77
    width:10ex;
78
}
79

  
80
#res>:not(ul), #control, #params, #info ,#addParams ,#adding, #loca{
69 81
    user-select:none;
70 82
    -khtml-user-select:none;
71 83
    -o-user-select:none;
......
74 86
}
75 87

  
76 88
div#params {
77
    padding:0.2em 0.5em;
89
    padding:0.2em 1.3em;
78 90
    border-radius:0.5em;
79 91
    background-color:rgba(128,128,128,0.5);
80 92
    border:solid #00F 1px;
......
85 97
}
86 98

  
87 99
div#params em {
100
	
88 101
    display:block;
89 102
    float:right;
90 103
    background-color:#88F;
......
97 110
    display:inline;
98 111
}
99 112

  
113
span#loca{
114
	text-shadow:2px 2px 2px #000, -2px -2px 2px #000;
115
    color:#FFF;
116
    float:left;
117
    position:absolute;
118
    bottom:1em;
119
    left:1em;
120
    cursor:pointer;
121
    padding:0.2em 0.5em;
122
    padding:0 1em; 
123
}
124

  
125

  
126
div#addParams  {
127
	text-shadow:2px 2px 2px #000, -2px -2px 2px #000;
128
    color:#FFF;
129
    float:left;
130
    position:absolute;
131
    top:1em;
132
    right:2em;
133
    
134
    border:solid #F00 1px;
135
    border-radius:0.5em;
136
    padding:0.2em 0.5em;
137
    background-color:#F88; 
138
    padding:0 1em; 
139
   
140
}
141

  
142
div#addParams label {
143
        
144
    border-radius:0.5em;
145
    padding:0 1em;
146
}
147

  
148
div#addParams label:hover {
149
	 color: #FF0; 
150
     
151
}
152

  
153
fieldset#locadraw {
154
    
155
    color:#FFF;
156
    float:left;
157
    position:absolute;
158
    bottom:1em;
159
    left:1em;
160
    background-color:rgba(128,128,128,0.5);
161
    border:solid #F00 1px;
162
    border-radius:0.5em;
163
    padding:0 1em;
164
    visibility:hidden;
165
}
166

  
167
fieldset#adding {
168
    
169
    color:#FFF;
170
    float:left;
171
    position:absolute;
172
    top:1em;
173
    right:2em;
174
    background-color:rgba(128,128,128,0.5);
175
    border:solid #F00 1px;
176
    border-radius:0.5em;
177
    padding:0 1em;
178
    visibility: hidden;
179
}
180

  
181

  
182

  
183
form#form_param label {
184
	
185
    margin-right: 15px;
186
    width: 0.5em;
187
    padding:0.3em 0.5em;
188
    min-height: 1px;
189
    text-align: left;
190
    text-shadow:2px 2px 2px #000, -2px -2px 2px #000;
191
}
192
 
193

  
194
input:focus {
195
  border-color: rgba(82, 168, 236, 0.75);
196
  -moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
197
  -webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
198
  box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
199
}
200
 
201
.correct {
202
  border-color: rgba(68, 191, 68, 0.75);
203
}
204
 
205
.correct:focus {
206
  border-color: rgba(68, 191, 68, 0.75);
207
  -moz-box-shadow: 0 0 8px rgba(68, 191, 68, 0.5);
208
  -webkit-box-shadow: 0 0 8px rgba(68, 191, 68, 0.5);
209
  box-shadow: 0 0 8px rgba(68, 191, 68, 0.5);
210
}
211
 
212
.incorrect {
213
  border-color: rgba(191, 68, 68, 0.75);
214
}
215
 
216
.incorrect:focus {
217
  border-color: rgba(191, 68, 68, 0.75);
218
  -moz-box-shadow: 0 0 8px rgba(191, 68, 68, 0.5);
219
  -webkit-box-shadow: 0 0 8px rgba(191, 68, 68, 0.5);
220
  box-shadow: 0 0 8px rgba(191, 68, 68, 0.5);
221
} 
222

  
223
/*p#chsignInfo {
224
color:#F00;
225
font-size: 12px;
226
margin:1.02em 1em;
227
background-color: #CCC;
228
border-radius: 4px;
229
padding:2px;
230
}*/
231

  
232
.answer {
233
  margin:0.2em 0;
234
  display:block;
235
}
236

  
237
.answer input {
238
  border-radius:0.5rem;
239
  padding:0.2em 0.7em;
240
}
241

  
242
.form_button {
243
    background-color:rgba(128,128,128,0.9);
244
    /*background: url(button.png) no-repeat top;*/
245
    display:inline-block;
246
}
247

  
100 248
.validators {
101 249
    text-align:center;
102 250
    background-color:#CCC;
index.php
3 3
<head>
4 4
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
5 5
  <title>Liste des panoramas</title>
6
  <link rel="stylesheet" media="screen" href="css/all.css" />
6
  <link rel="stylesheet" media="screen" href="css/index_style.css" />
7 7
  <script src="js/pano.js"></script>
8 8
</head>
9 9
<body>
10
  <h1>Liste des panoramas</h1>   
11
  <?php
12
   require 'class/site_point.class.php';
13
   require 'class/sites_dir.class.php';
14
   echo '<ul>';
15
   if(isset($_GET['dir']) && is_dir($_GET['dir'])) {
16
     $base_dir = $_GET['dir'];
17
   } else {
18
     $base_dir = 'tiles';
19
   }
20

  
21
   $dir = new sites_dir($base_dir);
22

  
23
   foreach($dir->get_sites() as $pt) {
24
     $params = $pt->get_params();
25
     if (isset($params['titre'])) {
26
       $cmt = $params['titre'];
27
     } else {
28
       $cmt = sprintf('fichier <samp>%s/%s</samp>', $pt->get_name(), $pt->get_prefix());
29
     }
30
     printf ('<li><a href="panorama.php?dir=%s&amp;panorama=%s">%s</a></li>'."\n", $base_dir, $pt->get_name(), $cmt);
31
   }
32
   echo '</ul>';
33
  ?>
10
	<img id="top" src="images/top.png" alt="">
11
	<div id="index_container">
12
		<h1><img src="images/tetaneutral.png" /></h1>
13
	  	<h2>Liste des panoramas</h2>
14
		   <?php
15
		  
16
		   require 'class/site_point.class.php';
17
		   require 'class/sites_dir.class.php';
18
		   
19
		   echo '<div id="containerList">';
20
		   echo '<ul>';
21
		 
22
		   if(isset($_GET['dir']) && is_dir($_GET['dir'])) {
23
		     $base_dir = $_GET['dir']; 
24
		   } else {
25
		    $base_dir='tiles';
26
		   }
27
		   
28
		   $dir = new sites_dir($base_dir);
29
		 
30
		   
31
		   foreach($dir->get_sites() as $pt) {
32
		   
33
		     $params = $pt->get_params();
34
		     if (isset($params['titre'])) {
35
		       $cmt = $params['titre'];
36
		      
37
		     } else {
38
		       $cmt = sprintf('fichier <samp>%s/%s</samp>', $pt->get_name(), $pt->get_prefix());
39
		     }
40
		     
41
		     printf ('<li><a href="panorama.php?dir=%s&amp;panorama=%s">%s</a></li>'."\n", $base_dir, $pt->get_name(), $cmt);
42
		   }
43
		   ?>
44
		</div>
45
	</div>
46
   <div id="interaction">
47
   
48
   <li><a href="./envoyer.php" title="Envoyer une image sur le site">Ajouter un panorama</a></li>
49
   <li><a href="./creerPano.php" title="Générer un panorama à partir d\'une image déjà envoyée">Générer un panorama</a></li>
50
 
51
   </div>
52
   </ul>
53
 <img id="bottom" src="images/bottom.png" alt="">
34 54
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
35 55
</body>
36 56
</html>
js/pano.js
1
if (img_prefix == undefined) var img_prefix = './tiles/ttn_mediatheque/mediatheque_70';
1
if (img_prefix == undefined) var img_prefix = 'http://pano.tetaneutral.net/data/tsf2/vpongnian/tiles/ttn_mediatheque/mediatheque_70';
2 2
if (to_cap == undefined) var to_cap = 0;
3 3
if (to_ele == undefined) var to_ele = 0;
4 4
if (to_zoom == undefined) var to_zoom = 0;
......
8 8
if (ref_points == undefined) var ref_points = new Array();
9 9
if (image_loop == undefined) var image_loop = true;
10 10

  
11

  
11 12
var debug_mode = false;
12 13
var canvas;
13 14
var cntext;
......
31 32
var point_colors = {'pano_point' : '255,128,128',
32 33
		    'ref_point'  : '128,128,255',
33 34
		    'loc_point'  : '128,255,128',
35
		    'temporary'  : '255,255,128',
34 36
		    'unlocated'  : '255,255,255'};
35 37
var test = {x:0, y:0, i:100};
36 38

  
39

  
37 40
function nmodulo(val, div) {                // pour obtenir un modulo dans l'espace des nombres naturels N.
38 41
    return Math.floor((val%div+div)%div);   // il y a peut être plus simple, mais en attendant .... 
39 42
}
......
165 168
    if (twidth) {
166 169
	cntext.restore();
167 170
    }
171
    
172
}
173

  
174
function insert_drawn_point(lat,lon,alt) {
175
	
176
	var rt = 6371;  // Rayon de la terre
177
    var alt1 = document.getElementById('pos_alt').childNodes[0].nodeValue;
178
    var lat1 = document.getElementById('pos_lat').childNodes[0].nodeValue*Math.PI/180;
179
    var lon1 = document.getElementById('pos_lon').childNodes[0].nodeValue*Math.PI/180;
180
    var alt2 = alt;
181
    var lat2 = lat*Math.PI/180;
182
    var lon2 = lon*Math.PI/180;
183
    
184
    var dLat = lat2-lat1;
185
    var dLon = lon2-lon1; 
186
   
187
    var a = Math.sin(dLat/2)*Math.sin(dLat/2) + Math.sin(dLon/2)*Math.sin(dLon/2)*Math.cos(lat1)*Math.cos(lat2);  // 
188
    var angle = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
189
    var d = angle*rt;                    // distance du point en Kms
190
   
191
    var y = Math.sin(dLon) * Math.cos(lat2);
192
    var x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);
193
    var cap = Math.atan2(y,x);                 // cap pour atteindre le point en radians
194
    var e = Math.atan2((alt2 - alt1)/1000 - d*d/(2*rt),d);  // angle de l'élévation en radians
195
    
196
    return {d:d, cap:cap*180/Math.PI, ele:e*180/Math.PI};   // les résultats sont en degrés
197
}
198

  
199
localate_point = function () {
200
	
201
    var lat = document.getElementById("loca_latitude").value;
202
    var lon = document.getElementById("loca_longitude").value;
203
    var alt = document.getElementById("loca_altitude").value;
204
    if (lat == '' || isNaN(lat) || lat <= -90 || lat > 90) {
205
	alert("La latitude "+lat+"n'est pas correcte");
206
	return;
207
    }
208
    if (lat == '' || isNaN(lon) || lon <= -180 || lon > 180) {
209
	alert("La longitude "+lon+"n'est pas correcte");
210
	return;
211
    }
212
    if (lat == '' || isNaN(alt) || alt < -400) {
213
	alert("l'altitude "+alt+"n'est pas correcte");
214
	return;
215
    }
216
	    var opt_ced = new Array();
217
	    opt_dce = insert_drawn_point(lat,lon,alt);
218
	    // -----Première solution : afficher dynamiquement le point !
219
	    var d = opt_dce.d;
220
	    var cap = opt_dce.cap;
221
	    var ele = opt_dce.ele;
222
	    
223
	    display_temp(d, cap, ele);
224
	   
225
}
226

  
227
function display_temp(d,cap,ele) {
228
   
229
    point_list[point_list.length] = new Array("point temporaire", d,cap,ele, "temporary");
230
    reset_zooms();
231
    putImage(last.x, last.y);
232
}
233

  
234
function arrayUnset(array, value){
235
    array.splice(array.indexOf(value), 1);
236
}
237

  
238
erase_point = function() {
239
	
240
	for (var i=0; i<point_list.length; i++) {
241
		if(point_list[i][0] == "point temporaire"){
242
			arrayUnset(point_list,point_list[i]);
243
			loop = erase_point();
244
		}	
245
	}	
246
	reset_zooms();
247
    putImage(last.x, last.y);   
168 248
}
169 249

  
170 250
function get_file_name(x, y, z) { // recherche du fichier correspondant au zoom et à la position
......
181 261
}
182 262

  
183 263
function keys(key) {
264
	
184 265
    hide_links();
185 266
    evt = key || event;
186
    evt.preventDefault();
187
    evt.stopPropagation();
267
    //evt.preventDefault();
268
    //evt.stopPropagation();
188 269
    if (!key) {
189 270
	key = window.event;
190 271
	key.which = key.keyCode;
......
192 273
//    alert(key);
193 274
//    if (!evt.shiftKey) return;
194 275
    switch (key.which) {
195
    case 66: // b
276
    /*case 66: // b
196 277
	alert(key.pageX);
197 278
	test.x=tile.width*(ntiles.x-3);
198 279
	test.y=0;
......
202 283
	test.x=0;
203 284
	test.y=tile.height*(ntiles.y-3);
204 285
	putImage(test.x, test.y);
205
	return;
286
	return;*/
206 287
    case 36: // home
207 288
	putImage(0, zm.im.height/2);
208 289
	return;
......
440 521
	    if (ref_points[lbl] != undefined) {
441 522
		typ = 'ref_point';
442 523
		if (!is_located) rxy = {x:ref_points[lbl].x*this.im.width, y:ref_points[lbl].y*this.im.height}
443
	    } else if(lnk == '' && is_visible) {
524
	    } else if(lnk == '' && is_visible && lbl != 'point temporaire') {
444 525
		typ = 'loc_point';
526
	    }else if(is_visible && lbl =='point temporaire') {
527
	    typ = 'temporary';
528
	    
445 529
	    } else if(is_visible) {
446 530
		typ = 'pano_point';
447 531
		lnk += '&to_zoom='+this.value;
448
	    }
532
	    } 
449 533
	    this.pt_list[i]['type'] = typ;
450 534
	    this.pt_list[i]['cap'] = cap;
451 535
	    this.pt_list[i]['ele'] = ele;
......
700 784
    speed.y = 0;
701 785
}
702 786

  
787

  
788

  
703 789
canvas_set_size = function() {
704 790
    canvas.style.border = border_width+"px solid red";
705 791
    canvas.width = window.innerWidth-2*border_width;
......
713 799
    putImage(last.x, last.y);
714 800
}
715 801

  
802

  
803

  
804
function paramIn(e) {
805
	
806
	 e = e || window.event; 
807
	 var relatedTarget = e.relatedTarget || e.fromElement; 
808
	 
809
	 while (relatedTarget != adding && relatedTarget.nodeName != 'BODY' && relatedTarget != document && relatedTarget != localisation) {
810
	        relatedTarget = relatedTarget.parentNode;
811
	 }
812
	 
813
	 if (relatedTarget != adding && relatedTarget != localisation) {
814
		 document.removeEventListener('keydown', keys, false);
815
	 }
816
}
817

  
818
function paramOut(e) {
819
	 
820
    e = e || window.event; 
821
    var relatedTarget = e.relatedTarget || e.toElement; 
822
 
823
    while (relatedTarget != adding && relatedTarget.nodeName != 'BODY' && relatedTarget != document && relatedTarget != localisation) {
824
        relatedTarget = relatedTarget.parentNode;
825
    }
826
 
827
    if (relatedTarget != adding && relatedTarget != localisation) {
828
    	document.addEventListener('keydown', keys, false);
829
    }
830
 
831
}
832

  
716 833
window.onload = function() {
834
	
835
	localisation = document.getElementById("locadraw");
836
	adding = document.getElementById("adding");
717 837
    canvas = document.getElementById("mon-canvas");
718 838
    cntext = canvas.getContext("2d");
719 839
    canvas_set_size();
......
746 866
    elvtn_control.onclick = change_angle;
747 867

  
748 868
    change_angle();
749

  
869
    loca_temp = document.getElementById("loca_button");
870
    loca_temp.onclick = localate_point;
871
    loca_erase = document.getElementById("loca_erase");
872
    loca_erase.onclick = erase_point;
750 873
    canvas.addEventListener('mousedown', onImageClick, false);
751
    addEventListener('keydown', keys, false);
874
    document.addEventListener('keydown', keys, false);
752 875
    canvas.addEventListener('mousewheel', wheel_zoom, false);
753 876
    window.onresize = canvas_resize;
877
    adding.addEventListener('mouseover',paramIn,false);
878
    adding.addEventListener('mouseout',paramOut,false);
879
    localisation.addEventListener('mouseover',paramIn,false);
880
    localisation.addEventListener('mouseout',paramOut,false);
881
      
754 882
};
js/pano_array.js
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
};
js/pano_old.js
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

  
9
var inserted_points = new Array();
10
var canvas;
11
var cntext;
12
var point_list = new Array();
13
var zoom;
14
var to_zoom;
15
var zooms = new Array();
16
var prev_zm;
17
var zm;
18
var tile = {width:256, height:256};
19
var ntiles = {x:228, y:9};
20
var border_width = 5;
21
var imageObj = new Array();
22

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

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

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

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

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

  
57
function draw_image(ox, oy) {
58
    ox = nmodulo(ox-canvas.width/2, zm.im.width);        // pour placer l'origine au centre du canvas 
59
    var ocx = nmodulo(ox - zm.phase_pix, zm.im.width);
60
    //document.getElementById('res').innerHTML = zm.phase_pix + ' -- ' + zm.im.width + ' shift(x,y) ' + shift.x;
61
    oy = Math.floor(oy-canvas.height/2);                             // pas de rebouclage vertical
62

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

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

  
84
	var cpx = 0;
85
	var i = 0;
86
	var Nx = zm.ntiles.x;
87
	if (zm.im.unused_width != 0) Nx++;
88
	while (cpx < ocx+canvas.width) {
89
	    var cur_width = zm.tile.width;
90
	    if (i%Nx == zm.ntiles.x-1) cur_width = zm.last_tile.width;
91
	    else if (i%Nx == Nx-1) cur_width = zm.im.unused_width;
92
	    if (cpx >= ocx-cur_width) {
93
		if (i%Nx == Nx-1 && zm.im.unused_width != 0) {
94
		    cntext.fillRect(cpx-ocx, dy, zm.im.unused_width, wy);
95
		} else {
96
		    var nx = i%Nx;
97
		    load_image(nx, ny, cpx-ocx, dy, ox, oy);
98
		}
99
	    }
100
	    cpx += cur_width;
101
	    i++;
102
	}
103
    }
104
    drawDecorations(ox, oy);
105
}
106

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

  
123
function draw_tile_del(ezoom, dx, dy, idx, ox, oy, x, y) {
124
    if (ezoom == zoom && dx == shift.x && dy == shift.y) {
125
	draw_tile(idx, ox, oy);
126
	drawDecorations(x, y);
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) {
136
    var wgrd = zm.im.width/360;
137
    var od = ((ox+canvas.width/2)/wgrd)%360;
138
    var el = (zm.im.height/2 - (oy+canvas.height/2))/wgrd;
139
//    document.getElementById('angle_ctrl').value = od.toFixed(2);
140
//    document.getElementById('elvtn_ctrl').value = el.toFixed(2);
141
    cntext.fillStyle = "rgba(0,128,128,0.9)";
142
    cntext.strokeStyle = "rgb(255,255,255)";
143
    cntext.lineWidth = 1;
144
    cntext.fillRect(canvas.width/2-5, canvas.height/2-5, 10, 10);
145
    cntext.strokeRect(canvas.width/2-5, canvas.height/2-5, 10, 10);
146
    for(var i = 0; i < zm.pt_list.length; i++) {
147
	var cx = zm.pt_list[i]['xc'] - ox;
148
	var cy = zm.pt_list[i]['yc'] - oy;
149
	if (zm.pt_list[i]['lnk'] != undefined) cntext.fillStyle = "rgba(255,128,128,0.5)";
150
	else cntext.fillStyle = "rgba(128,255,128,0.5)";
151
	cntext.beginPath();
152
	cntext.arc(cx, cy, 20, 0, 2*Math.PI, true);
153
	cntext.fill();
154
    }
155

  
156
    //cntext.font = "20pt Arial";
157
    //cntext.fillRect(0, 0, 200, 20);
158
    //cntext.fillStyle = "rgb(255,0,0)";
159
    //cntext.fillText(od.toFixed(2), 5, 20);
160
    //for (i=0; i<canvas.width/wgrd; i++) {
161
	//cntext.strokeRect(i*wgrd, 0, wgrd, 20);
162
    //}
163
}
164

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

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

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

  
... This diff was truncated because it exceeds the maximum size that can be displayed.