You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1211 lines
33 KiB
JavaScript
1211 lines
33 KiB
JavaScript
|
|
import {vector4to3, vector3_nomalize, psr_to_xyz, matmul} from "./util.js"
|
|
import {globalObjectCategory, } from './obj_cfg.js';
|
|
import { MovableView } from "./popup_dialog.js";
|
|
|
|
function BoxImageContext(ui){
|
|
|
|
this.ui = ui;
|
|
|
|
// draw highlighted box
|
|
this.updateFocusedImageContext = function(box){
|
|
var scene_meta = box.world.frameInfo.sceneMeta;
|
|
|
|
|
|
let bestImage = choose_best_camera_for_point(
|
|
scene_meta,
|
|
box.position);
|
|
|
|
if (!bestImage){
|
|
return;
|
|
}
|
|
|
|
if (!scene_meta.calib.camera){
|
|
return;
|
|
}
|
|
|
|
var calib = scene_meta.calib.camera[bestImage]
|
|
if (!calib){
|
|
return;
|
|
}
|
|
|
|
if (calib){
|
|
var img = box.world.cameras.getImageByName(bestImage);
|
|
if (img && (img.naturalWidth > 0)){
|
|
|
|
this.clear_canvas();
|
|
|
|
var imgfinal = box_to_2d_points(box, calib)
|
|
|
|
if (imgfinal != null){ // if projection is out of range of the image, stop drawing.
|
|
var ctx = this.ui.getContext("2d");
|
|
ctx.lineWidth = 0.5;
|
|
|
|
// note: 320*240 should be adjustable
|
|
var crop_area = crop_image(img.naturalWidth, img.naturalHeight, ctx.canvas.width, ctx.canvas.height, imgfinal);
|
|
|
|
ctx.drawImage(img, crop_area[0], crop_area[1],crop_area[2], crop_area[3], 0, 0, ctx.canvas.width, ctx.canvas.height);// ctx.canvas.clientHeight);
|
|
//ctx.drawImage(img, 0,0,img.naturalWidth, img.naturalHeight, 0, 0, 320, 180);// ctx.canvas.clientHeight);
|
|
var imgfinal = vectorsub(imgfinal, [crop_area[0],crop_area[1]]);
|
|
var trans_ratio = {
|
|
x: ctx.canvas.height/crop_area[3],
|
|
y: ctx.canvas.height/crop_area[3],
|
|
}
|
|
|
|
draw_box_on_image(ctx, box, imgfinal, trans_ratio, true);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
this.clear_canvas = function(){
|
|
var c = this.ui;
|
|
var ctx = c.getContext("2d");
|
|
ctx.clearRect(0, 0, c.width, c.height);
|
|
}
|
|
|
|
|
|
function vectorsub(vs, v){
|
|
var ret = [];
|
|
var vl = v.length;
|
|
|
|
for (var i = 0; i<vs.length/vl; i++){
|
|
for (var j=0; j<vl; j++)
|
|
ret[i*vl+j] = vs[i*vl+j]-v[j];
|
|
}
|
|
|
|
return ret;
|
|
}
|
|
|
|
|
|
function crop_image(imgWidth, imgHeight, clientWidth, clientHeight, corners)
|
|
{
|
|
var maxx=0, maxy=0, minx=imgWidth, miny=imgHeight;
|
|
|
|
for (var i = 0; i < corners.length/2; i++){
|
|
var x = corners[i*2];
|
|
var y = corners[i*2+1];
|
|
|
|
if (x>maxx) maxx=x;
|
|
else if (x<minx) minx=x;
|
|
|
|
if (y>maxy) maxy=y;
|
|
else if (y<miny) miny=y;
|
|
}
|
|
|
|
var targetWidth= (maxx-minx)*1.5;
|
|
var targetHeight= (maxy-miny)*1.5;
|
|
|
|
if (targetWidth/targetHeight > clientWidth/clientHeight){
|
|
//increate height
|
|
targetHeight = targetWidth*clientHeight/clientWidth;
|
|
}
|
|
else{
|
|
targetWidth = targetHeight*clientWidth/clientHeight;
|
|
}
|
|
|
|
var centerx = (maxx+minx)/2;
|
|
var centery = (maxy+miny)/2;
|
|
|
|
return [
|
|
centerx - targetWidth/2,
|
|
centery - targetHeight/2,
|
|
targetWidth,
|
|
targetHeight
|
|
];
|
|
}
|
|
|
|
function draw_box_on_image(ctx, box, box_corners, trans_ratio, selected){
|
|
var imgfinal = box_corners;
|
|
|
|
if (!selected){
|
|
let target_color = null;
|
|
if (box.world.data.cfg.color_obj == "category")
|
|
{
|
|
target_color = globalObjectCategory.get_color_by_category(box.obj_type);
|
|
}
|
|
else // by id
|
|
{
|
|
let idx = (box.obj_track_id)?parseInt(box.obj_track_id): box.obj_local_id;
|
|
target_color = globalObjectCategory.get_color_by_id(idx);
|
|
}
|
|
|
|
|
|
|
|
//ctx.strokeStyle = get_obj_cfg_by_type(box.obj_type).color;
|
|
|
|
//var c = get_obj_cfg_by_type(box.obj_type).color;
|
|
var r ="0x"+(target_color.x*256).toString(16);
|
|
var g ="0x"+(target_color.y*256).toString(16);;
|
|
var b ="0x"+(target_color.z*256).toString(16);;
|
|
|
|
ctx.fillStyle="rgba("+parseInt(r)+","+parseInt(g)+","+parseInt(b)+",0.2)";
|
|
}
|
|
else{
|
|
ctx.strokeStyle="#ff00ff";
|
|
ctx.fillStyle="rgba(255,0,255,0.2)";
|
|
}
|
|
|
|
// front panel
|
|
ctx.beginPath();
|
|
ctx.moveTo(imgfinal[3*2]*trans_ratio.x,imgfinal[3*2+1]*trans_ratio.y);
|
|
|
|
for (var i=0; i < imgfinal.length/2/2; i++)
|
|
{
|
|
ctx.lineTo(imgfinal[i*2+0]*trans_ratio.x, imgfinal[i*2+1]*trans_ratio.y);
|
|
}
|
|
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
|
|
// frame
|
|
ctx.beginPath();
|
|
|
|
ctx.moveTo(imgfinal[3*2]*trans_ratio.x,imgfinal[3*2+1]*trans_ratio.y);
|
|
|
|
for (var i=0; i < imgfinal.length/2/2; i++)
|
|
{
|
|
ctx.lineTo(imgfinal[i*2+0]*trans_ratio.x, imgfinal[i*2+1]*trans_ratio.y);
|
|
}
|
|
//ctx.stroke();
|
|
|
|
|
|
//ctx.strokeStyle="#ff00ff";
|
|
//ctx.beginPath();
|
|
|
|
ctx.moveTo(imgfinal[7*2]*trans_ratio.x,imgfinal[7*2+1]*trans_ratio.y);
|
|
|
|
for (var i=4; i < imgfinal.length/2; i++)
|
|
{
|
|
ctx.lineTo(imgfinal[i*2+0]*trans_ratio.x, imgfinal[i*2+1]*trans_ratio.y);
|
|
}
|
|
|
|
ctx.moveTo(imgfinal[0*2]*trans_ratio.x,imgfinal[0*2+1]*trans_ratio.y);
|
|
ctx.lineTo(imgfinal[4*2+0]*trans_ratio.x, imgfinal[4*2+1]*trans_ratio.y);
|
|
ctx.moveTo(imgfinal[1*2]*trans_ratio.x,imgfinal[1*2+1]*trans_ratio.y);
|
|
ctx.lineTo(imgfinal[5*2+0]*trans_ratio.x, imgfinal[5*2+1]*trans_ratio.y);
|
|
ctx.moveTo(imgfinal[2*2]*trans_ratio.x,imgfinal[2*2+1]*trans_ratio.y);
|
|
ctx.lineTo(imgfinal[6*2+0]*trans_ratio.x, imgfinal[6*2+1]*trans_ratio.y);
|
|
ctx.moveTo(imgfinal[3*2]*trans_ratio.x,imgfinal[3*2+1]*trans_ratio.y);
|
|
ctx.lineTo(imgfinal[7*2+0]*trans_ratio.x, imgfinal[7*2+1]*trans_ratio.y);
|
|
|
|
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
|
|
|
|
class ImageContext extends MovableView{
|
|
|
|
constructor(parentUi, name, autoSwitch, cfg, on_img_click){
|
|
|
|
// create ui
|
|
let template = document.getElementById("image-wrapper-template");
|
|
let tool = template.content.cloneNode(true);
|
|
// this.boxEditorHeaderUi.appendChild(tool);
|
|
// return this.boxEditorHeaderUi.lastElementChild;
|
|
|
|
parentUi.appendChild(tool);
|
|
let ui = parentUi.lastElementChild;
|
|
let handle = ui.querySelector("#move-handle");
|
|
super(handle, ui);
|
|
|
|
this.ui = ui;
|
|
this.cfg = cfg;
|
|
this.on_img_click = on_img_click;
|
|
this.autoSwitch = autoSwitch;
|
|
this.setImageName(name);
|
|
}
|
|
|
|
remove(){
|
|
this.ui.remove();
|
|
}
|
|
|
|
|
|
setImageName(name)
|
|
{
|
|
this.name = name;
|
|
this.ui.querySelector("#header").innerText = (this.autoSwitch?"auto-":"")+name;
|
|
}
|
|
|
|
|
|
get_selected_box = null;
|
|
|
|
|
|
init_image_op(func_get_selected_box){
|
|
this.ui.onclick = (e)=>this.on_click(e);
|
|
this.get_selected_box = func_get_selected_box;
|
|
// var h = parentUi.querySelector("#resize-handle");
|
|
// h.onmousedown = resize_mouse_down;
|
|
|
|
// c.onresize = on_resize;
|
|
}
|
|
clear_main_canvas(){
|
|
|
|
var boxes = this.ui.querySelector("#svg-boxes").children;
|
|
|
|
if (boxes.length>0){
|
|
for (var c=boxes.length-1; c >= 0; c--){
|
|
boxes[c].remove();
|
|
}
|
|
}
|
|
|
|
var points = this.ui.querySelector("#svg-points").children;
|
|
|
|
if (points.length>0){
|
|
for (var c=points.length-1; c >= 0; c--){
|
|
points[c].remove();
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
world = null;
|
|
img = null;
|
|
|
|
attachWorld(world){
|
|
this.world = world;
|
|
};
|
|
|
|
hide (){
|
|
this.ui.style.display="none";
|
|
};
|
|
|
|
hidden(){
|
|
this.ui.style.display=="none";
|
|
};
|
|
|
|
show(){
|
|
this.ui.style.display="";
|
|
};
|
|
|
|
|
|
|
|
drawing = false;
|
|
points = [];
|
|
polyline;
|
|
|
|
all_lines=[];
|
|
|
|
img_lidar_point_map = {};
|
|
|
|
point_color_by_distance(x,y)
|
|
{
|
|
// x,y are image coordinates
|
|
let p = this.img_lidar_point_map[y*this.img.width+x];
|
|
|
|
let distance = Math.sqrt(p[1]*p[1] + p[2]*p[2] + p[3]*p[3] );
|
|
|
|
if (distance > 60.0)
|
|
distance = 60.0;
|
|
else if (distance < 10.0)
|
|
distance = 10.0;
|
|
|
|
return [(distance-10)/50.0, 1- (distance-10)/50.0, 0].map(c=>{
|
|
let hex = Math.floor(c*255).toString(16);
|
|
if (hex.length == 1)
|
|
hex = "0"+hex;
|
|
return hex;
|
|
}).reduce((a,b)=>a+b,"#");
|
|
|
|
}
|
|
|
|
to_polyline_attr(points){
|
|
return points.reduce(function(x,y){
|
|
return String(x)+","+y;
|
|
}
|
|
)
|
|
}
|
|
|
|
|
|
to_viewbox_coord(x,y){
|
|
var div = this.ui.querySelector("#maincanvas-svg");
|
|
|
|
x = Math.round(x*2048/div.clientWidth);
|
|
y = Math.round(y*1536/div.clientHeight);
|
|
return [x,y];
|
|
|
|
}
|
|
|
|
on_click(e){
|
|
var p= this.to_viewbox_coord(e.layerX, e.layerY);
|
|
var x=p[0];
|
|
var y=p[1];
|
|
|
|
console.log("clicked",x,y);
|
|
|
|
|
|
if (!this.drawing){
|
|
|
|
if (e.ctrlKey){
|
|
this.drawing = true;
|
|
var svg = this.ui.querySelector("#maincanvas-svg");
|
|
//svg.style.position = "absolute";
|
|
|
|
this.polyline = document.createElementNS("http://www.w3.org/2000/svg", 'polyline');
|
|
svg.appendChild(this.polyline);
|
|
this.points.push(x);
|
|
this.points.push(y);
|
|
|
|
|
|
this.polyline.setAttribute("class", "maincanvas-line")
|
|
this.polyline.setAttribute("points", this.to_polyline_attr(this.points));
|
|
|
|
var c = this.ui;
|
|
c.onmousemove = on_move;
|
|
c.ondblclick = on_dblclick;
|
|
c.onkeydown = on_key;
|
|
|
|
}
|
|
else{
|
|
// not drawing
|
|
//this is a test
|
|
if (false){
|
|
let nearest_x = 100000;
|
|
let nearest_y = 100000;
|
|
let selected_pts = [];
|
|
|
|
for (let i =x-100; i<x+100; i++){
|
|
if (i < 0 || i >= this.img.width)
|
|
continue;
|
|
|
|
for (let j = y-100; j<y+100; j++){
|
|
if (j < 0 || j >= this.img.height)
|
|
continue;
|
|
|
|
let lidarpoint = this.img_lidar_point_map[j*this.img.width+i];
|
|
if (lidarpoint){
|
|
//console.log(i,j, lidarpoint);
|
|
selected_pts.push(lidarpoint); //index of lidar point
|
|
|
|
if (((i-x) * (i-x) + (j-y)*(j-y)) < ((nearest_x-x)*(nearest_x-x) + (nearest_y-y)*(nearest_y-y))){
|
|
nearest_x = i;
|
|
nearest_y = j;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
console.log("nearest", nearest_x, nearest_y);
|
|
this.draw_point(nearest_x, nearest_y);
|
|
if (nearest_x < 100000)
|
|
{
|
|
this.on_img_click([this.img_lidar_point_map[nearest_y*this.img.width+nearest_x][0]]);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
if (this.points[this.points.length-2]!=x || this.points[this.points.length-1]!=y){
|
|
this.points.push(x);
|
|
this.points.push(y);
|
|
this.polyline.setAttribute("points", this.to_polyline_attr(this.points));
|
|
}
|
|
|
|
}
|
|
|
|
|
|
function on_move(e){
|
|
var p= to_viewbox_coord(e.layerX, e.layerY);
|
|
var x=p[0];
|
|
var y=p[1];
|
|
|
|
console.log(x,y);
|
|
this.polyline.setAttribute("points", this.to_polyline_attr(this.points) + ',' + x + ',' + y);
|
|
}
|
|
|
|
function on_dblclick(e){
|
|
|
|
this.points.push(this.points[0]);
|
|
this.points.push(this.points[1]);
|
|
|
|
this.polyline.setAttribute("points", this.to_polyline_attr(this.points));
|
|
console.log(this.points)
|
|
|
|
all_lines.push(this.points);
|
|
|
|
this.drawing = false;
|
|
this.points = [];
|
|
|
|
var c = this.ui;
|
|
c.onmousemove = null;
|
|
c.ondblclick = null;
|
|
c.onkeypress = null;
|
|
c.blur();
|
|
}
|
|
|
|
function cancel(){
|
|
|
|
polyline.remove();
|
|
|
|
this.drawing = false;
|
|
this.points = [];
|
|
var c = this.ui;
|
|
c.onmousemove = null;
|
|
c.ondblclick = null;
|
|
c.onkeypress = null;
|
|
|
|
c.blur();
|
|
}
|
|
|
|
function on_key(e){
|
|
if (e.key == "Escape"){
|
|
cancel();
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// all boxes
|
|
|
|
|
|
|
|
getCalib(){
|
|
var scene_meta = this.world.sceneMeta;
|
|
|
|
if (!scene_meta.calib.camera){
|
|
return null;
|
|
}
|
|
|
|
//var active_camera_name = this.world.cameras.active_name;
|
|
var calib = scene_meta.calib.camera[this.name];
|
|
|
|
return calib;
|
|
}
|
|
|
|
|
|
|
|
|
|
get_trans_ratio(){
|
|
var img = this.world.cameras.getImageByName(this.name);
|
|
|
|
if (!img || img.width==0){
|
|
return null;
|
|
}
|
|
|
|
var clientWidth, clientHeight;
|
|
|
|
clientWidth = 2048;
|
|
clientHeight = 1536;
|
|
|
|
var trans_ratio ={
|
|
x: clientWidth/img.naturalWidth,
|
|
y: clientHeight/img.naturalHeight,
|
|
};
|
|
|
|
return trans_ratio;
|
|
}
|
|
|
|
show_image(){
|
|
var svgimage = this.ui.querySelector("#svg-image");
|
|
|
|
// active img is set by global, it's not set sometimes.
|
|
var img = this.world.cameras.getImageByName(this.name);
|
|
if (img){
|
|
svgimage.setAttribute("xlink:href", img.src);
|
|
}
|
|
|
|
this.img = img;
|
|
|
|
|
|
}
|
|
|
|
|
|
points_to_svg(points, trans_ratio, cssclass, radius=2){
|
|
var ptsFinal = points.map(function(x, i){
|
|
if (i%2==0){
|
|
return Math.round(x * trans_ratio.x);
|
|
}else {
|
|
return Math.round(x * trans_ratio.y);
|
|
}
|
|
});
|
|
|
|
var svg = document.createElementNS("http://www.w3.org/2000/svg", 'g');
|
|
|
|
if (cssclass)
|
|
{
|
|
svg.setAttribute("class", cssclass);
|
|
}
|
|
|
|
for (let i = 0; i < ptsFinal.length; i+=2){
|
|
|
|
|
|
let x = ptsFinal[i];
|
|
let y = ptsFinal[i+1];
|
|
|
|
let p = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
|
|
p.setAttribute("cx", x);
|
|
p.setAttribute("cy", y);
|
|
p.setAttribute("r", 2);
|
|
p.setAttribute("stroke-width", "1");
|
|
|
|
if (! cssclass){
|
|
let image_x = points[i];
|
|
let image_y = points[i+1];
|
|
let color = point_color_by_distance(image_x, image_y);
|
|
color += "24"; //transparency
|
|
p.setAttribute("stroke", color);
|
|
p.setAttribute("fill", color);
|
|
}
|
|
|
|
svg.appendChild(p);
|
|
}
|
|
|
|
return svg;
|
|
}
|
|
|
|
draw_point(x,y){
|
|
let trans_ratio = this.get_trans_ratio();
|
|
let svg = this.ui.querySelector("#svg-points");
|
|
let pts_svg = this.points_to_svg([x,y], trans_ratio, "radar-points");
|
|
svg.appendChild(pts_svg);
|
|
};
|
|
|
|
|
|
|
|
|
|
render_2d_image (){
|
|
|
|
|
|
if (this.cfg.disableMainImageContext)
|
|
return;
|
|
this.clear_main_canvas();
|
|
|
|
this.show_image();
|
|
this.draw_svg();
|
|
}
|
|
|
|
|
|
hide_canvas(){
|
|
//document.getElementsByClassName("ui-wrapper")[0].style.display="none";
|
|
this.ui.style.display="none";
|
|
}
|
|
|
|
show_canvas(){
|
|
this.ui.style.display="inline";
|
|
}
|
|
|
|
|
|
draw_svg(){
|
|
// draw picture
|
|
var img = this.world.cameras.getImageByName(this.name);
|
|
|
|
if (!img || img.width==0){
|
|
this.hide_canvas();
|
|
return;
|
|
}
|
|
|
|
this.show_canvas();
|
|
|
|
var trans_ratio = this.get_trans_ratio();
|
|
|
|
var calib = this.getCalib();
|
|
if (!calib){
|
|
return;
|
|
}
|
|
|
|
let svg = this.ui.querySelector("#svg-boxes");
|
|
|
|
// draw boxes
|
|
this.world.annotation.boxes.forEach((box)=>{
|
|
var imgfinal = box_to_2d_points(box, calib);
|
|
if (imgfinal){
|
|
var box_svg = this.box_to_svg (box, imgfinal, trans_ratio, this.get_selected_box() == box);
|
|
svg.appendChild(box_svg);
|
|
}
|
|
|
|
});
|
|
|
|
svg = this.ui.querySelector("#svg-points");
|
|
|
|
// draw radar points
|
|
if (this.cfg.projectRadarToImage)
|
|
{
|
|
this.world.radars.radarList.forEach(radar=>{
|
|
let pts = radar.get_unoffset_radar_points();
|
|
let ptsOnImg = points3d_to_image2d(pts, calib);
|
|
|
|
// there may be none after projecting
|
|
if (ptsOnImg && ptsOnImg.length>0){
|
|
let pts_svg = this.points_to_svg(ptsOnImg, trans_ratio, radar.cssStyleSelector);
|
|
svg.appendChild(pts_svg);
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
|
|
// project lidar points onto camera image
|
|
if (this.cfg.projectLidarToImage){
|
|
let pts = this.world.lidar.get_all_points();
|
|
let ptsOnImg = points3d_to_image2d(pts, calib, true, this.img_lidar_point_map, img.width, img.height);
|
|
|
|
// there may be none after projecting
|
|
if (ptsOnImg && ptsOnImg.length>0){
|
|
let pts_svg = this.points_to_svg(ptsOnImg, trans_ratio);
|
|
svg.appendChild(pts_svg);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
box_to_svg(box, box_corners, trans_ratio, selected){
|
|
|
|
|
|
var imgfinal = box_corners.map(function(x, i){
|
|
if (i%2==0){
|
|
return Math.round(x * trans_ratio.x);
|
|
}else {
|
|
return Math.round(x * trans_ratio.y);
|
|
}
|
|
})
|
|
|
|
|
|
var svg = document.createElementNS("http://www.w3.org/2000/svg", 'g');
|
|
svg.setAttribute("id", "svg-box-local-"+box.obj_local_id);
|
|
|
|
if (selected){
|
|
svg.setAttribute("class", box.obj_type+" box-svg box-svg-selected");
|
|
} else{
|
|
if (box.world.data.cfg.color_obj == "id")
|
|
{
|
|
svg.setAttribute("class", "color-"+box.obj_track_id%33);
|
|
}
|
|
else // by id
|
|
{
|
|
svg.setAttribute("class", box.obj_type + " box-svg");
|
|
}
|
|
}
|
|
|
|
|
|
var front_panel = document.createElementNS("http://www.w3.org/2000/svg", 'polygon');
|
|
svg.appendChild(front_panel);
|
|
front_panel.setAttribute("points",
|
|
imgfinal.slice(0, 4*2).reduce(function(x,y){
|
|
return String(x)+","+y;
|
|
})
|
|
)
|
|
|
|
/*
|
|
var back_panel = document.createElementNS("http://www.w3.org/2000/svg", 'polygon');
|
|
svg.appendChild(back_panel);
|
|
back_panel.setAttribute("points",
|
|
imgfinal.slice(4*2).reduce(function(x,y){
|
|
return String(x)+","+y;
|
|
})
|
|
)
|
|
*/
|
|
|
|
for (var i = 0; i<4; ++i){
|
|
var line = document.createElementNS("http://www.w3.org/2000/svg", 'line');
|
|
svg.appendChild(line);
|
|
line.setAttribute("x1", imgfinal[(4+i)*2]);
|
|
line.setAttribute("y1", imgfinal[(4+i)*2+1]);
|
|
line.setAttribute("x2", imgfinal[(4+(i+1)%4)*2]);
|
|
line.setAttribute("y2", imgfinal[(4+(i+1)%4)*2+1]);
|
|
}
|
|
|
|
|
|
for (var i = 0; i<4; ++i){
|
|
var line = document.createElementNS("http://www.w3.org/2000/svg", 'line');
|
|
svg.appendChild(line);
|
|
line.setAttribute("x1", imgfinal[i*2]);
|
|
line.setAttribute("y1", imgfinal[i*2+1]);
|
|
line.setAttribute("x2", imgfinal[(i+4)*2]);
|
|
line.setAttribute("y2", imgfinal[(i+4)*2+1]);
|
|
}
|
|
|
|
return svg;
|
|
}
|
|
|
|
|
|
boxes_manager = {
|
|
display_image: ()=>{
|
|
if (!this.cfg.disableMainImageContext)
|
|
this.render_2d_image();
|
|
},
|
|
|
|
add_box: (box)=>{
|
|
var calib = this.getCalib();
|
|
if (!calib){
|
|
return;
|
|
}
|
|
var trans_ratio = this.get_trans_ratio();
|
|
if (trans_ratio){
|
|
var imgfinal = box_to_2d_points(box, calib);
|
|
if (imgfinal){
|
|
var imgfinal = imgfinal.map(function(x, i){
|
|
if (i%2==0){
|
|
return Math.round(x * trans_ratio.x);
|
|
}else {
|
|
return Math.round(x * trans_ratio.y);
|
|
}
|
|
})
|
|
|
|
var svg_box = this.box_to_svg(box, imgfinal, trans_ratio);
|
|
var svg = this.ui.querySelector("#svg-boxes");
|
|
svg.appendChild(svg_box);
|
|
}
|
|
}
|
|
},
|
|
|
|
|
|
onBoxSelected: (box_obj_local_id, obj_type)=>{
|
|
var b = this.ui.querySelector("#svg-box-local-"+box_obj_local_id);
|
|
if (b){
|
|
b.setAttribute("class", "box-svg-selected");
|
|
}
|
|
},
|
|
|
|
|
|
onBoxUnselected: (box_obj_local_id, obj_type)=>{
|
|
var b = this.ui.querySelector("#svg-box-local-"+box_obj_local_id);
|
|
|
|
if (b)
|
|
b.setAttribute("class", obj_type);
|
|
},
|
|
|
|
remove_box: (box_obj_local_id)=>{
|
|
var b = this.ui.querySelector("#svg-box-local-"+box_obj_local_id);
|
|
|
|
if (b)
|
|
b.remove();
|
|
},
|
|
|
|
update_obj_type: (box_obj_local_id, obj_type)=>{
|
|
this.onBoxSelected(box_obj_local_id, obj_type);
|
|
},
|
|
|
|
update_box: (box)=>{
|
|
var b = this.ui.querySelector("#svg-box-local-"+box.obj_local_id);
|
|
if (!b){
|
|
return;
|
|
}
|
|
|
|
var children = b.childNodes;
|
|
|
|
var calib = this.getCalib();
|
|
if (!calib){
|
|
return;
|
|
}
|
|
|
|
var trans_ratio = this.get_trans_ratio();
|
|
var imgfinal = box_to_2d_points(box, calib);
|
|
|
|
if (!imgfinal){
|
|
//box may go out of image
|
|
return;
|
|
}
|
|
var imgfinal = imgfinal.map(function(x, i){
|
|
if (i%2==0){
|
|
return Math.round(x * trans_ratio.x);
|
|
}else {
|
|
return Math.round(x * trans_ratio.y);
|
|
}
|
|
})
|
|
|
|
if (imgfinal){
|
|
var front_panel = children[0];
|
|
front_panel.setAttribute("points",
|
|
imgfinal.slice(0, 4*2).reduce(function(x,y){
|
|
return String(x)+","+y;
|
|
})
|
|
)
|
|
|
|
|
|
|
|
for (var i = 0; i<4; ++i){
|
|
var line = children[1+i];
|
|
line.setAttribute("x1", imgfinal[(4+i)*2]);
|
|
line.setAttribute("y1", imgfinal[(4+i)*2+1]);
|
|
line.setAttribute("x2", imgfinal[(4+(i+1)%4)*2]);
|
|
line.setAttribute("y2", imgfinal[(4+(i+1)%4)*2+1]);
|
|
}
|
|
|
|
|
|
for (var i = 0; i<4; ++i){
|
|
var line = children[5+i];
|
|
line.setAttribute("x1", imgfinal[i*2]);
|
|
line.setAttribute("y1", imgfinal[i*2+1]);
|
|
line.setAttribute("x2", imgfinal[(i+4)*2]);
|
|
line.setAttribute("y2", imgfinal[(i+4)*2+1]);
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
class ImageContextManager {
|
|
constructor(parentUi, selectorUi, cfg, on_img_click){
|
|
this.parentUi = parentUi;
|
|
this.selectorUi = selectorUi;
|
|
this.cfg = cfg;
|
|
this.on_img_click = on_img_click;
|
|
|
|
this.addImage("", true);
|
|
|
|
|
|
this.selectorUi.onmouseenter=function(event){
|
|
if (this.timerId)
|
|
{
|
|
clearTimeout(this.timerId);
|
|
this.timerId = null;
|
|
}
|
|
|
|
event.target.querySelector("#camera-list").style.display="";
|
|
|
|
};
|
|
|
|
|
|
this.selectorUi.onmouseleave=function(event){
|
|
let ui = event.target.querySelector("#camera-list");
|
|
|
|
this.timerId = setTimeout(()=>{
|
|
ui.style.display="none";
|
|
this.timerId = null;
|
|
},
|
|
200);
|
|
|
|
};
|
|
|
|
this.selectorUi.querySelector("#camera-list").onclick = (event)=>{
|
|
let cameraName = event.target.innerText;
|
|
|
|
if (cameraName == "auto"){
|
|
|
|
let existed = this.images.find(x=>x.autoSwitch);
|
|
|
|
if (existed)
|
|
{
|
|
this.removeImage(existed);
|
|
}
|
|
else
|
|
{
|
|
this.addImage("", true);
|
|
}
|
|
|
|
}
|
|
else{
|
|
let existed = this.images.find(x=>!x.autoSwitch && x.name == cameraName);
|
|
|
|
if (existed)
|
|
{
|
|
this.removeImage(existed);
|
|
|
|
}
|
|
else
|
|
{
|
|
this.addImage(cameraName);
|
|
}
|
|
}
|
|
};
|
|
|
|
}
|
|
|
|
updateCameraList(cameras){
|
|
|
|
let autoCamera = '<div class="camera-item" id="camera-item-auto">auto</div>';
|
|
|
|
if (this.images.find(i=>i.autoSwitch)){
|
|
autoCamera = '<div class="camera-item camera-selected" id="camera-item-auto">auto</div>';
|
|
}
|
|
|
|
let camera_selector_str = cameras.map(c=>{
|
|
|
|
let existed = this.images.find(i=>i.name == c && !i.autoSwitch);
|
|
let className = existed?"camera-item camera-selected":"camera-item";
|
|
|
|
return `<div class="${className}" id="camera-item-${c}">${c}</div>`;
|
|
}).reduce((x,y)=>x+y, autoCamera);
|
|
|
|
let ui = this.selectorUi.querySelector("#camera-list");
|
|
ui.innerHTML = camera_selector_str;
|
|
ui.style.display="none";
|
|
|
|
this.setDefaultBestCamera(cameras[0]);
|
|
}
|
|
|
|
setDefaultBestCamera(c){
|
|
|
|
if (!this.bestCamera)
|
|
{
|
|
let existed = this.images.find(x=>x.autoSwitch);
|
|
if (existed)
|
|
{
|
|
existed.setImageName(c);
|
|
}
|
|
|
|
this.bestCamera = c;
|
|
}
|
|
}
|
|
|
|
images = [];
|
|
addImage(name, autoSwitch)
|
|
{
|
|
|
|
if (autoSwitch && this.bestCamera && !name)
|
|
name = this.bestCamera;
|
|
|
|
let image = new ImageContext(this.parentUi, name, autoSwitch, this.cfg, this.on_img_click);
|
|
|
|
this.images.push(image);
|
|
|
|
if (this.init_image_op_para){
|
|
image.init_image_op(this.init_image_op_para);
|
|
}
|
|
|
|
if (this.world){
|
|
image.attachWorld(this.world);
|
|
image.render_2d_image();
|
|
}
|
|
|
|
|
|
let selectorName = autoSwitch?"auto":name;
|
|
|
|
let ui = this.selectorUi.querySelector("#camera-item-"+selectorName);
|
|
if (ui)
|
|
ui.className = "camera-item camera-selected";
|
|
|
|
|
|
return image;
|
|
}
|
|
|
|
removeImage(image){
|
|
|
|
let selectorName = image.autoSwitch?"auto":image.name;
|
|
this.selectorUi.querySelector("#camera-item-"+selectorName).className = "camera-item";
|
|
this.images = this.images.filter(x=>x!=image);
|
|
image.remove();
|
|
|
|
|
|
}
|
|
|
|
setBestCamera(camera)
|
|
{
|
|
this.images.filter(i=>i.autoSwitch).forEach(i=>{
|
|
i.setImageName(camera);
|
|
i.boxes_manager.display_image();
|
|
});
|
|
|
|
this.bestCamera = camera;
|
|
}
|
|
|
|
render_2d_image(){
|
|
this.images.forEach(i=>i.render_2d_image());
|
|
}
|
|
|
|
attachWorld(world){
|
|
|
|
this.world = world;
|
|
this.images.forEach(i=>i.attachWorld(world));
|
|
}
|
|
|
|
hide(){
|
|
this.images.forEach(i=>i.hide());
|
|
}
|
|
|
|
|
|
show(){
|
|
this.images.forEach(i=>i.show());
|
|
}
|
|
|
|
clear_main_canvas(){
|
|
this.images.forEach(i=>i.clear_main_canvas());
|
|
}
|
|
|
|
init_image_op(op){
|
|
this.init_image_op_para = op;
|
|
this.images.forEach(i=>i.init_image_op(op));
|
|
}
|
|
hidden(){
|
|
return false;
|
|
}
|
|
|
|
choose_best_camera_for_point = choose_best_camera_for_point;
|
|
|
|
self = this;
|
|
|
|
boxes_manager = {
|
|
|
|
display_image: ()=>{
|
|
if (!this.cfg.disableMainImageContext)
|
|
this.render_2d_image();
|
|
},
|
|
|
|
add_box: (box)=>{
|
|
this.images.forEach(i=>i.boxes_manager.add_box(box));
|
|
},
|
|
|
|
|
|
onBoxSelected: (box_obj_local_id, obj_type)=>{
|
|
this.images.forEach(i=>i.boxes_manager.onBoxSelected(box_obj_local_id, obj_type));
|
|
},
|
|
|
|
|
|
onBoxUnselected: (box_obj_local_id, obj_type)=>{
|
|
this.images.forEach(i=>i.boxes_manager.onBoxUnselected(box_obj_local_id, obj_type));
|
|
},
|
|
|
|
remove_box: (box_obj_local_id)=>{
|
|
this.images.forEach(i=>i.boxes_manager.remove_box(box_obj_local_id));
|
|
},
|
|
|
|
update_obj_type: (box_obj_local_id, obj_type)=>{
|
|
this.images.forEach(i=>i.boxes_manager.update_obj_type(box_obj_local_id, obj_type));
|
|
},
|
|
|
|
update_box: (box)=>{
|
|
this.images.forEach(i=>i.boxes_manager.update_box(box));
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
function box_to_2d_points(box, calib){
|
|
var scale = box.scale;
|
|
var pos = box.position;
|
|
var rotation = box.rotation;
|
|
|
|
var box3d = psr_to_xyz(pos, scale, rotation);
|
|
|
|
//console.log(box.obj_track_id, box3d.slice(8*4));
|
|
|
|
box3d = box3d.slice(0,8*4);
|
|
return points3d_homo_to_image2d(box3d, calib);
|
|
}
|
|
|
|
// points3d is length 4 row vector, homogeneous coordinates
|
|
// returns 2d row vectors
|
|
function points3d_homo_to_image2d(points3d, calib, accept_partial=false,save_map, img_dx, img_dy){
|
|
var imgpos = matmul(calib.extrinsic, points3d, 4);
|
|
|
|
//rect matrix shall be applied here, for kitti
|
|
if (calib.rect){
|
|
imgpos = matmul(calib.rect, imgpos, 4);
|
|
}
|
|
|
|
var imgpos3 = vector4to3(imgpos);
|
|
|
|
var imgpos2;
|
|
if (calib.intrinsic.length>9) {
|
|
imgpos2 = matmul(calib.intrinsic, imgpos, 4);
|
|
}
|
|
else
|
|
imgpos2 = matmul(calib.intrinsic, imgpos3, 3);
|
|
|
|
let imgfinal = vector3_nomalize(imgpos2);
|
|
let imgfinal_filterd = [];
|
|
|
|
if (accept_partial){
|
|
let temppos=[];
|
|
let p = imgpos3;
|
|
for (var i = 0; i<p.length/3; i++){
|
|
if (p[i*3+2]>0){
|
|
let x = imgfinal[i*2];
|
|
let y = imgfinal[i*2+1];
|
|
|
|
x = Math.round(x);
|
|
y = Math.round(y);
|
|
if (x > 0 && x < img_dx && y > 0 && y < img_dy){
|
|
if (save_map){
|
|
save_map[img_dx*y+x] = [i, points3d[i*4+0], points3d[i*4+1], points3d[i*4+2]]; //save index? a little dangerous! //[points3d[i*4+0], points3d[i*4+1], points3d[i*4+2]];
|
|
}
|
|
|
|
imgfinal_filterd.push(x);
|
|
imgfinal_filterd.push(y);
|
|
|
|
}
|
|
else{
|
|
// console.log("points outside of image",x,y);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
imgfinal = imgfinal_filterd;
|
|
//warning: what if calib.intrinsic.length
|
|
//todo: this function need clearance
|
|
//imgpos2 = matmul(calib.intrinsic, temppos, 3);
|
|
}
|
|
else if (!accept_partial && !all_points_in_image_range(imgpos3)){
|
|
return null;
|
|
}
|
|
|
|
return imgfinal;
|
|
}
|
|
|
|
function point3d_to_homo(points){
|
|
let homo=[];
|
|
for (let i =0; i<points.length; i+=3){
|
|
homo.push(points[i]);
|
|
homo.push(points[i+1]);
|
|
homo.push(points[i+2]);
|
|
homo.push(1);
|
|
}
|
|
|
|
return homo;
|
|
}
|
|
function points3d_to_image2d(points, calib, accept_partial=false, save_map, img_dx, img_dy){
|
|
//
|
|
return points3d_homo_to_image2d(point3d_to_homo(points), calib, accept_partial, save_map, img_dx, img_dy);
|
|
}
|
|
|
|
function all_points_in_image_range(p){
|
|
for (var i = 0; i<p.length/3; i++){
|
|
if (p[i*3+2]<0){
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
|
|
function choose_best_camera_for_point(scene_meta, center){
|
|
|
|
if (!scene_meta.calib){
|
|
return null;
|
|
}
|
|
|
|
var proj_pos = [];
|
|
for (var i in scene_meta.calib.camera){
|
|
var imgpos = matmul(scene_meta.calib.camera[i].extrinsic, [center.x,center.y,center.z,1], 4);
|
|
proj_pos.push({calib: i, pos: vector4to3(imgpos)});
|
|
}
|
|
|
|
var valid_proj_pos = proj_pos.filter(function(p){
|
|
return all_points_in_image_range(p.pos);
|
|
});
|
|
|
|
valid_proj_pos.forEach(function(p){
|
|
p.dist_to_center = p.pos[0]*p.pos[0] + p.pos[1]*p.pos[1];
|
|
});
|
|
|
|
valid_proj_pos.sort(function(x,y){
|
|
return x.dist_to_center - y.dist_to_center;
|
|
});
|
|
|
|
//console.log(valid_proj_pos);
|
|
|
|
if (valid_proj_pos.length>0){
|
|
return valid_proj_pos[0].calib;
|
|
}
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
export {ImageContextManager, BoxImageContext};
|