Projet

Général

Profil

Révision fe3e0cdf

Ajouté par Jocelyn Delande il y a plus de 10 ans

- Moved ref_points.php to something less toulouse-specific ;-)
by default : no ref points, but the ability to define its own list
or to use one of the files from ref_points folder.
- Fixed the UI if the ref_points list is empty.

Voir les différences:

.gitignore
1 1
upload/
2 2
tiles/
3
*~
3
*~
4
ref_points.local.php
README.md
19 19
* **view on map** for a given LOS between two points/panoramas.
20 20

  
21 21

  
22
Known Limitations
23
-----------------
22
Setting up reference points
23
----------------------------
24 24

  
25
* The reference points are hardcoded in ref_points.php
25
Reference points are known points you are likely to see from your panoramas,
26
they are a visual reference and a way to orientate your panoramas.
27

  
28
By default, there are no *ref_points*, you can create your own *ref_points* list
29
or use one of the provided lists.
30

  
31
To get started, copy one of the files from `ref_points` folder in the root
32
folder, remane it to `ref_points.local.php` and customize it.
26 33

  
27 34
Panorama view
28 35
--------------
......
35 42
location you visualize on the panorama.
36 43

  
37 44

  
38

  
39

  
40 45
### Mouse interaction for panorama view ###
41 46

  
42 47
* *drag image*  to move
js/pano.js
38 38

  
39 39

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

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

  
48 48
function distort_canvas(p, x, y) {
......
64 64

  
65 65
function draw_image(ox, oy) {
66 66
    var ref_vals  = {x:last.x, y:last.y, zoom:zoom};
67
    ox = nmodulo(ox-canvas.width/2, zm.im.width);        // pour placer l'origine au centre du canvas 
67
    ox = nmodulo(ox-canvas.width/2, zm.im.width);        // pour placer l'origine au centre du canvas
68 68
    oy = Math.floor(oy-canvas.height/2);                 // pas de rebouclage vertical
69 69

  
70 70
    cntext.clearRect(0, 0, canvas.width, canvas.height);
71 71
    cntext.fillStyle = "rgba(128,128,128,0.8)";
72
    
72

  
73 73
    if (canvas.height > zm.im.height) {
74 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; 
75
	if (fy < 0) fy = 0;
76 76
	var ly = fy + zm.ntiles.y;
77 77
    } else {
78 78
	var fy = Math.floor(oy/tile.height);
79 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; 
80
	if (fy < 0) fy = 0;
81
	if (ly > zm.ntiles.y) ly = zm.ntiles.y;
82 82
    }
83 83

  
84 84
    for (var j=fy; j<ly; j++) {
......
141 141
	cntext.beginPath();
142 142
        cntext.rect(tx, ty, twidth, theight);
143 143
        cntext.clip();
144
    } 
144
    }
145 145
    var wgrd = zm.im.width/360;
146 146
    var od = ((ox+canvas.width/2)/wgrd)%360;
147 147
    var el = (zm.im.height/2 - (oy+canvas.height/2))/wgrd;
......
164 164
    if (twidth) {
165 165
	cntext.restore();
166 166
    }
167
    
167

  
168 168
}
169 169

  
170 170
function insert_drawn_point(lat, lon, alt) {
......
179 179
    var alt2 = alt;
180 180
    var lat2 = lat*Math.PI/180;
181 181
    var lon2 = lon*Math.PI/180;
182
    
182

  
183 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);  // 
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 187
    var angle = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
188 188
    var d = angle*rt;                    // distance du point en Kms
189
   
189

  
190 190
    var y = Math.sin(dLon) * Math.cos(lat2);
191 191
    var x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);
192 192
    var cap = Math.atan2(y,x);                 // cap pour atteindre le point en radians
193 193
    var e = Math.atan2((alt2 - alt1)/1000 - d*d/(2*rt),d);  // angle de l'élévation en radians
194
    
194

  
195 195
    return {d:d, cap:cap*180/Math.PI, ele:e*180/Math.PI};   // les résultats sont en degrés
196 196
}
197 197

  
......
216 216
    display_temp(opt_dce.d, opt_dce.cap, opt_dce.ele);
217 217
}
218 218

  
219
function display_temp(d,cap,ele) {  
219
function display_temp(d,cap,ele) {
220 220
    point_list[point_list.length] = new Array("point temporaire", d,cap,ele, "temporary");
221 221
    reset_zooms();
222 222
    putImage(last.x, last.y);
......
226 226
    array.splice(array.indexOf(value), 1);
227 227
}
228 228

  
229
function erase_point() {	
229
function erase_point() {
230 230
	for (var i=0; i<point_list.length; i++) {
231 231
		if(point_list[i][0] == "point temporaire"){
232 232
			arrayUnset(point_list,point_list[i]);
233 233
			loop = erase_point();
234
		}	
235
	}	
234
		}
235
	}
236 236
	reset_zooms();
237
    putImage(last.x, last.y);   
237
    putImage(last.x, last.y);
238 238
}
239 239

  
240 240
function get_file_name(x, y, z) { // recherche du fichier correspondant au zoom et à la position
......
251 251
}
252 252

  
253 253
function keys(key) {
254
	
254

  
255 255
    hide_links();
256 256
    evt = key || event;
257 257
    //evt.preventDefault();
......
343 343
}
344 344

  
345 345
function putImage(x, y) { // est destiné à permettre l'effet d'amortissement par la mémorisation de la position courante.
346
    if (!zm.is_updated) return; 
346
    if (!zm.is_updated) return;
347 347
    if (x >= zm.im.width) {   // rebouclage horizontal
348 348
	shift.x -= zm.im.width;
349 349
	x -= zm.im.width;
......
411 411
	ord_pts = ord_pts.sort(tri_ref_points);
412 412
	is_located = i > 1 || image_loop && i > 0;
413 413

  
414
	var alpha_domain = {start:0, end:360}; 
414
	var alpha_domain = {start:0, end:360};
415 415
	this.pixel_y_ratio = this.im.width/360;
416 416
	if (is_located) {
417 417
	    this.ref_pixels = new Array;
......
514 514
		typ = 'loc_point';
515 515
	    }else if(is_visible && lbl =='point temporaire') {
516 516
	    typ = 'temporary';
517
	    
517

  
518 518
	    } else if(is_visible) {
519 519
		typ = 'pano_point';
520 520
		lnk += '&to_zoom='+this.value;
521
	    } 
521
	    }
522 522
	    this.pt_list[i]['type'] = typ;
523 523
	    this.pt_list[i]['cap'] = cap;
524 524
	    this.pt_list[i]['ele'] = ele;
......
529 529
	    this.pt_list[i]['yc'] = Math.floor(this.im.height/2 - rxy.y);
530 530
	}
531 531
    }
532
    
532

  
533 533
    this.get_tile_size = function(nx, ny) {
534 534
	var res = {width:0, height:0};
535 535
	if (nx == this.ntiles.x-1) res.width = this.last_tile.width;
......
538 538
	else res.height = this.tile.height;
539 539
	return res;
540 540
    }
541
    
541

  
542 542
    this.get_cap_ele = function(px, py) {               // recherche d'un cap et d'une élévation à partir d'un pixel X,Y.
543 543
	if (is_located) {
544 544
	    for (var i=0; i < this.ref_pixels.length; i++) {
......
555 555
	    return {cap:cp, ele:el};
556 556
	}
557 557
    }
558
    
558

  
559 559
    this.get_pos_xy = function(cap, ele) {                  // recherche des coordonnées pixel à partir d'un cap et d'une élévation.
560 560
	if (is_located) {
561 561
	    var dcap = fmodulo(cap-this.ref_pixels[0].cap, 360);
......
591 591
	zoom_control.value++;
592 592
	change_zoom(zshift.x, zshift.y);
593 593
    } else if (event.wheelDelta > 0 && zoom_control.value > zoom_control.min) {
594
	zoom_control.value--; 
594
	zoom_control.value--;
595 595
	change_zoom(zshift.x, zshift.y);
596 596
    }
597 597
}
......
637 637
    putImage(pos_x, pos_y);
638 638
}
639 639

  
640
function check_prox(x, y, r) {   //verification si un point de coordonnées x, y est bien dans un cercle de rayon r centré en X,Y. 
640
function check_prox(x, y, r) {   //verification si un point de coordonnées x, y est bien dans un cercle de rayon r centré en X,Y.
641 641
    return Math.sqrt(x*x + y*y) < r;
642 642
}
643 643

  
......
702 702
    document.getElementById('insert').style.display = 'none';
703 703
}
704 704

  
705
function manage_ref_points(e) {
705
function manage_ref_points(e, has_points) {
706 706
    //event.preventDefault();
707 707
    //event.stopPropagation();
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');
708
	var sel_pt = document.getElementById('sel_point');
714 709
    var do_insert = document.getElementById('do-insert');
715
    var do_delete = document.getElementById('do-delete');
716
    var show_cap = document.getElementById('show-cap');
710
	var do_delete = document.getElementById('do-delete');
711
	var do_cancel = document.getElementById('do-cancel');
712
	var show_cap = document.getElementById('show-cap');
713
	var insrt = document.getElementById('insert');
714

  
717 715
    var pos_x = nmodulo(last.x + e.pageX - canvas_pos.x - canvas.width/2, zm.im.width);
718
    var pos_y = last.y + e.pageY - canvas_pos.y - canvas.height/2;
719
    for(var i = 0; i < zm.pt_list.length; i++) {
720
	if (zm.pt_list[i]['type'] == 'ref_point') {
721
	    if (check_prox(zm.pt_list[i]['xc']-pos_x, zm.pt_list[i]['yc']-pos_y, 20)) {
722
		sel_pt.value = zm.pt_list[i]['label'];
723
	    }
716
	var pos_y = last.y + e.pageY - canvas_pos.y - canvas.height/2;
717

  
718
	insrt.style.left = e.pageX+'px';
719
	insrt.style.top = e.pageY+'px';
720
	insrt.style.display = 'block';
721

  
722
	if (has_points) {
723
		    for(var i = 0; i < zm.pt_list.length; i++) {
724
			    if (zm.pt_list[i]['type'] == 'ref_point') {
725
				    if (check_prox(zm.pt_list[i]['xc']-pos_x,
726
				                   zm.pt_list[i]['yc']-pos_y, 20)) {
727
					    sel_pt.value = zm.pt_list[i]['label'];
728
				    }
729
			    }
730
		    }
731
		do_delete.onclick = function() {delete_ref_point(insrt)};
732
		do_insert.onclick = function() {insert_ref_point(insrt, e.pageX-canvas_pos.x, e.pageY-canvas_pos.y)};
733
		show_cap.onclick = function() {
734
			window.open('show_capline.php?title='+encodeURIComponent(btoa(title))+'&cap='+res.cap+'&org_lat='+pt_lat+'&org_lon='+pt_lon+'&dist=120000');
735
		};
724 736
	}
725
    }
726
    do_delete.onclick = function() {delete_ref_point(insrt)};
727
    do_insert.onclick = function() {insert_ref_point(insrt, e.pageX-canvas_pos.x, e.pageY-canvas_pos.y)};
737

  
738
	do_cancel.onclick = hide_contextmenu;
728 739
    var res = zm.get_cap_ele(pos_x, zm.im.height/2 - pos_y);
729 740
    var pt_lat = document.getElementById('pos_lat').childNodes[0].nodeValue;
730 741
    var pt_lon = document.getElementById('pos_lon').childNodes[0].nodeValue;
731
    show_cap.onclick = function() {
732
	window.open('show_capline.php?title='+encodeURIComponent(btoa(title))+'&cap='+res.cap+'&org_lat='+pt_lat+'&org_lon='+pt_lon+'&dist=120000');
733
    };
734 742
    return false;
735 743
}
736 744

  
......
794 802
}
795 803

  
796 804
function paramIn(e) {
797
    e = e || window.event; 
798
    var relatedTarget = e.relatedTarget || e.fromElement; 
799
    
805
    e = e || window.event;
806
    var relatedTarget = e.relatedTarget || e.fromElement;
807

  
800 808
    while (relatedTarget != adding && relatedTarget.nodeName != 'BODY' && relatedTarget != document && relatedTarget != localisation) {
801 809
	relatedTarget = relatedTarget.parentNode;
802 810
    }
803
    
811

  
804 812
    if (relatedTarget != adding && relatedTarget != localisation) {
805 813
	document.removeEventListener('keydown', keys, false);
806 814
    }
807 815
}
808 816

  
809 817
function paramOut(e) {
810
	 
811
    e = e || window.event; 
812
    var relatedTarget = e.relatedTarget || e.toElement; 
813
 
818

  
819
    e = e || window.event;
820
    var relatedTarget = e.relatedTarget || e.toElement;
821

  
814 822
    while (relatedTarget != adding && relatedTarget.nodeName != 'BODY' && relatedTarget != document && relatedTarget != localisation) {
815 823
        relatedTarget = relatedTarget.parentNode;
816 824
    }
817
 
825

  
818 826
    if (relatedTarget != adding && relatedTarget != localisation) {
819 827
    	document.addEventListener('keydown', keys, false);
820 828
    }
821
 
829

  
822 830
}
823 831

  
824 832
window.onload = function() {
panorama.php
15 15
  <label class="form_col" title="L'altitude positive Ex: 170">Altitude :
16 16
    <input  name="loca_altitude" type="number" min="-400" id="loca_altitude"/></label>
17 17
  <div class="answer">
18
    <input type="button" value="Localiser" id="loca_button"/> 
18
    <input type="button" value="Localiser" id="loca_button"/>
19 19
    <input type="button" value="Effacer" id="loca_erase"/>
20 20
  </div>
21 21
</fieldset>
22 22
EO_FORM_EXTPOINT;
23 23

  
24 24
   $form_param = <<<'EO_FORM_PARAM'
25
<div id="addParams">		
26
  <label id="paramFormShow">Paramétrer le panorama</label>	
25
<div id="addParams">
26
  <label id="paramFormShow">Paramétrer le panorama</label>
27 27
</div>
28 28
     <form action="addParams.php?param_dir=%s&amp;param_panorama=%s" id="form_param" method="post">
29 29
  <fieldset id="adding"><legend id="paramFormHide">Paramétrage du panorama</legend>
30 30
    <label title="Au moins 4 caractères">Titre :
31
      <input type="text" pattern="^.{1,40}$" name="param_title" placeholder="%s" 
31
      <input type="text" pattern="^.{1,40}$" name="param_title" placeholder="%s"
32 32
	     title="ne doit pas contenir pus de 40 caractères" required=""/></label>
33 33
    <label title="La latitude ϵ [-90°, 90°]. Ex : 46.55257">Latitude :
34 34
      <input name="param_latitude" type="number" min="-90" max="90" placeholder="43.56" required="" step="any"/></label>
......
38 38
      <input name="param_altitude" type="number" min="-400" required="" placeholder="170" step="any"/></label>
39 39
    <label title="L'image fait-elle 360° ?">Rebouclage :
40 40
      <input type="checkbox" name="param_loop" value="true"></label>
41
    
41

  
42 42
    <div>
43
      <input type="submit" value="Submit"/> 
43
      <input type="submit" value="Submit"/>
44 44
      <input type="reset" value="Reset"/>
45 45
    </div>
46 46
  </fieldset>
......
110 110
       printf('point_list[%d] = new Array("%s", %03lf, %03lf, %03lf, "%s");'."\n", $ipt++, $prm['titre'], $dist, $cap, $ele, $lnk);
111 111
     }
112 112
   }
113

  
114
   include 'ref_points.php';
113
   $ref_points = array ();
114
   $ref_points_filename = 'ref_points.local.php';
115
   if (file_exists($ref_points_filename)) {
116
     include $ref_points_filename;
117
   }
115 118
   $extra_names = array();
116 119
   $ref_names = array();
117 120
   if (is_array($ref_points)) {
......
122 125
       printf('point_list[%d] = new Array("%s", %03lf, %03lf, %03lf, "");'."\n", $ipt++, $name, $dist, $cap, $ele);
123 126
     }
124 127
   }
125
 
128

  
126 129

  
127 130
   if (isset($params['reference'])) {
128 131
     echo "ref_points = new Array();\n";
......
134 137
       }
135 138
     }
136 139
   }
137
  
140

  
138 141
   $localLat = (isset($_POST["loca_latitude"])) ? $_POST["loca_latitude"] : NULL;
139 142
   $localLon = (isset($_POST["loca_longitude"])) ? $_POST["loca_longitude"] : NULL;
140 143
   $localAlt = (isset($_POST["loca_altitude"])) ? $_POST["loca_altitude"] : NULL;
141
 
144

  
142 145
   if ($localLat && $localLon && $localAlt) {
143 146
     list($localDistance, $localCap, $localEle) = $pt->coordsToCap($localLat, $localLon, $localAlt);
144 147
     $n = "point temporaire";
145 148
     printf('point_list[%d] = new Array("%s", %03lf, %03lf, %03lf, "temporary");'."\n",$ipt++, $n, $localDistance, $localCap, $localEle);
146
   } 
149
   }
147 150
  ?>
148 151
  </script>
149 152
  <link type="image/x-icon" rel="shortcut icon" href="images/tsf.png"/>
150 153
  <link rel="stylesheet" media="screen" href="css/map.css" />
151
  <script src="js/hide_n_showForm.js"></script> 
154
  <script src="js/hide_n_showForm.js"></script>
152 155
</head>
153 156
<body>
154 157
  <canvas id="mon-canvas">
155 158
    Ce message indique que ce navigateur est vétuste car il ne supporte pas <samp>canvas</samp> (IE6, IE7, IE8, ...)
156 159
  </canvas>
157
  
160

  
158 161
  <fieldset id="control"><legend>contrôle</legend>
159 162
      <label>Zoom : <input type="range" min="0" max="2" value="2" id="zoom_ctrl"/></label>
160 163
      <label>Cap : <input type="number" min="0" max="360" step="10" value="0" autofocus="" id="angle_ctrl"/></label>
......
162 165
  </fieldset>
163 166

  
164 167
  <?php
165
      
168

  
166 169
     if ($params && isset($params['latitude']) && isset($params['longitude'])) {
167 170
       print("<div id=\"params\">\n");
168 171
       printf ("<p>latitude :   <em><span id=\"pos_lat\">%.5f</span>°</em></p>\n", $params['latitude']);
169 172
       printf ("<p>longitude : <em><span id=\"pos_lon\">%.5f</span>°</em></p>\n", $params['longitude']);
170
       if (isset($params['altitude'])) printf ("<p>altitude : <em><span id=\"pos_alt\">%d</span> m</em></p>\n", $params['altitude']); 
173
       if (isset($params['altitude'])) printf ("<p>altitude : <em><span id=\"pos_alt\">%d</span> m</em></p>\n", $params['altitude']);
171 174
       print("</div>\n");
172 175
       echo $form_extpoint;
173 176
     } elseif ($params == false ) {
......
176 179
        printf($form_param, $dir, $name, $name);
177 180
     }
178 181
     echo '<p id="info"></p>'."\n";
182

  
183
     echo "<p id=\"insert\">";
179 184
     if (count($extra_names) > 1) {
180
       echo "<p id=\"insert\">\n<select id=\"sel_point\" name=\"known_points\">\n";
185
       echo "<select id=\"sel_point\" name=\"known_points\">\n";
181 186
       foreach ($extra_names as $nm) {
182
	 echo '<option>'.$nm."</option>\n";
187
	     echo '<option>'.$nm."</option>\n";
183 188
       }
184 189
       echo "</select>\n";
185 190
       echo "<input type=\"button\" id=\"do-insert\" value=\"insérer\"/>\n";
186 191
       echo "<input type=\"button\" id=\"do-delete\" value=\"suppimer\"/>\n";
187
       echo "<input type=\"button\" id=\"do-cancel\" value=\"annuler\"/>\n";
188 192
       echo "<input type=\"button\" id=\"show-cap\" value=\"visualiser cet axe sur OSM\"/>\n";
189
       echo "</p>\n";
193
     } else {
194
       echo "Pas de point de reférénce connu, lisez le <em>README.md</em> pour en ajouter. \n";
190 195
     }
191
     
196
     echo "<input type=\"button\" id=\"do-cancel\" value=\"annuler\"/>\n";
197
     echo "</p>\n";
192 198
  ?>
193 199
  <p id="res"></p>
194 200
  <div class="validators">

Formats disponibles : Unified diff