Commit 76cde312 authored by Baptiste Jonglez's avatar Baptiste Jonglez

Change point size depending on the distance, to get a better idea of perspective

parent d5d743fb
......@@ -202,14 +202,16 @@ function drawDecorations(ox, oy, tx, ty, twidth, theight) {
cntext.lineWidth = 2;
cntext.fillRect(canvas.width/2-line_width/2, 0, line_width, canvas.height);
cntext.strokeRect(canvas.width/2-line_width, canvas.height/2-line_width, line_width*2, line_width*2);
for(var i = 0; i < zm.pt_list.length; i++) {
if (zm.pt_list[i]['type'] != 'unlocated') {
cntext.fillStyle = 'rgba('+point_colors[zm.pt_list[i]['type']]+',0.5)';
var cx = nmodulo(zm.pt_list[i]['xc'] - ox, zm.im.width);
var cy = zm.pt_list[i]['yc'] - oy;
var cy_ground = zm.pt_list[i]['yc_ground'] - oy;
for(var i = 0; i < zm.pt_list_by_dist.length; i++) {
var point = zm.pt_list_by_dist[i];
if (point['type'] != 'unlocated') {
cntext.fillStyle = 'rgba('+point_colors[point['type']]+',0.7)';
var cx = nmodulo(point['xc'] - ox, zm.im.width);
var cy = point['yc'] - oy;
var cy_ground = point['yc_ground'] - oy;
var circle_size = get_circle_size(point);
cntext.beginPath();
cntext.arc(cx, cy, 20, 0, 2*Math.PI, true);
cntext.arc(cx, cy, circle_size, 0, 2*Math.PI, true);
cntext.fill();
// Draw line that shows the height of the building
cntext.fillStyle = "rgba(0,0,255,0.45)";
......@@ -489,6 +491,13 @@ function tri_ref_points(v1, v2) {
return v1['x'] - v2['x'];
}
function sort_points_by_distance(p1, p2) {
return p1['dist'] - p2['dist'];
}
function sort_points_by_rev_distance(p1, p2) {
return p2['dist'] - p1['dist'];
}
function tzoom(zv) {
......@@ -588,6 +597,9 @@ function tzoom(zv) {
}
this.pt_list = new Array();
// List of points, sorted from furthest away to closest. This is
// used to handle overlapping markers.
this.pt_list_by_dist = new Array();
for (var i=0; i<point_list.length; i++) {
var lbl = point_list[i][0];
var dst = point_list[i][1];
......@@ -637,6 +649,8 @@ function tzoom(zv) {
this.pt_list[i]['yc'] = Math.floor(this.im.height/2 - rxy.y);
this.pt_list[i]['yc_ground'] = Math.floor(this.im.height/2 - rxy_ground.y);
}
this.pt_list_by_dist = this.pt_list.slice(0);
this.pt_list_by_dist.sort(sort_points_by_rev_distance);
},
this.get_tile_size = function(nx, ny) {
......@@ -695,6 +709,18 @@ function tzoom(zv) {
}
}
/*
Main ideas:
- the circle should look roughly like a ball with a radius of 4 meters
- the atan scales its size according to the distance
- we use pixel_y_ratio to adapt the size based on the zoom level and the resolution of the image
- we bound the size to reasonable values (7 px to 50 px)
*/
function get_circle_size(point) {
var size = 75 * zm.pixel_y_ratio * Math.atan2(4, point['dist']);
return Math.max(Math.min(size, 50), 7);
}
function reset_zooms () {
for(i=0; i<zooms.length; i++) zooms[i].is_updated = false;
zm.refresh();
......@@ -769,10 +795,13 @@ function check_links(e) {
var mouse_y = e.pageY-canvas_pos.y;
var pos_x = nmodulo(last.x + mouse_x - canvas.width/2, zm.im.width);
var pos_y = last.y + mouse_y - canvas.height/2;
for(var i = 0; i < zm.pt_list.length; i++) {
if (is_located && zm.pt_list[i]['type'] == 'pano_point') {
if (check_prox(zm.pt_list[i]['xc']-pos_x, zm.pt_list[i]['yc']-pos_y, 20)) {
if (zm.pt_list[i]['lnk'] != '') window.location = zm.pt_list[i]['lnk'];
var circle_size;
for(var i = 0; i < zm.pt_list_by_dist.length; i++) {
var point = zm.pt_list_by_dist[i];
circle_size = get_circle_size(point);
if (is_located && point['type'] == 'pano_point') {
if (check_prox(point['xc']-pos_x, point['yc']-pos_y, circle_size)) {
if (point['lnk'] != '') window.location = point['lnk'];
break;
}
}
......@@ -797,6 +826,7 @@ function display_links(e) {
//var cap = ((pos_x/zm.im.width)*360).toFixed(2);
var res = zm.get_cap_ele(pos_x, zm.im.height/2 - pos_y);
//var ele = ((zm.im.height/2 - pos_y)/zm.im.width)*360;
var circle_size;
info.innerHTML = 'élévation : '+res.ele.toFixed(2)+'&#176;<br/>cap : '+res.cap.toFixed(2)+'&#176;';
info.style.top = index.y+'px';
info.style.left = index.x+'px';
......@@ -805,14 +835,16 @@ function display_links(e) {
info.style.color = 'white'
info.style.display = 'block';
canvas.style.cursor='crosshair';
for(var i = 0; i < zm.pt_list.length; i++) {
if (is_located || zm.pt_list[i]['type'] == 'ref_point') {
if (check_prox(zm.pt_list[i]['xc']-pos_x, zm.pt_list[i]['yc']-pos_y, 20)) {
info.innerHTML = zm.pt_list[i]['label'];
for(var i = 0; i < zm.pt_list_by_dist.length; i++) {
var point = zm.pt_list_by_dist[i];
circle_size = get_circle_size(point);
if (is_located || point['type'] == 'ref_point') {
if (check_prox(point['xc']-pos_x, point['yc']-pos_y, circle_size)) {
info.innerHTML = point['label'];
info.style.opacity = '0.8';
info.style.color = 'black';
info.innerHTML += '<br/>(' + zm.pt_list[i]['dist_human'] + ')';
info.style.backgroundColor = 'rgb('+point_colors[zm.pt_list[i]['type']]+')';
info.innerHTML += '<br/>(' + point['dist_human'] + ')';
info.style.backgroundColor = 'rgb('+point_colors[point['type']]+')';
canvas.style.cursor='auto';
break;
}
......@@ -850,16 +882,19 @@ function manage_ref_points(e) {
var pos_x = nmodulo(last.x + e.pageX - canvas_pos.x - canvas.width/2, zm.im.width);
var pos_y = last.y + e.pageY - canvas_pos.y - canvas.height/2;
var circle_size;
insrt.style.left = e.pageX+'px';
insrt.style.top = e.pageY+'px';
insrt.style.display = 'block';
if (do_insert) {// true if there are ref points
for(var i = 0; i < zm.pt_list.length; i++) {
if (zm.pt_list[i]['type'] == 'ref_point') {
if (check_prox(zm.pt_list[i]['xc']-pos_x, zm.pt_list[i]['yc']-pos_y, 20)) {
sel_pt.value = zm.pt_list[i]['label'];
for(var i = 0; i < zm.pt_list_by_dist.length; i++) {
var point = zm.pt_list_by_dist[i];
circle_size = get_circle_size(point);
if (point['type'] == 'ref_point') {
if (check_prox(point['xc']-pos_x, point['yc']-pos_y, circle_size)) {
sel_pt.value = point['label'];
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment