Skip to content

X
x3domlet
Commit b825e1f0 authored by Oleg Dzhimiev's avatar Oleg Dzhimiev
Browse files
Options

loading extra models: load, move, save rotation, hide selected on shift-key

parent a3c408ea
Show whitespace changes
Inline Side-by-side
Showing with 443 additions and 136 deletions
js/index.js
View file @ b825e1f0
...@@ -457,13 +457,15 @@ function wheelEvent_list(event){ ...@@ -457,13 +457,15 @@ function wheelEvent_list(event){
if (event.wheelDelta) { //IE+Opera if (event.wheelDelta) { //IE+Opera
delta = event.wheelDelta/120; delta = event.wheelDelta/120;
if (window.opera) delta = -delta; if (window.opera) delta = -delta;
} else if (event.detail) { // Mozilla }else if (event.detail) { // Mozilla
delta = -event.detail; delta = -event.detail;
} }
if (delta) if (delta){
handleWheel_list(event,delta,shiftKey); handleWheel_list(event,delta,shiftKey);
if (event.preventDefault) }
if (event.preventDefault){
event.preventDefault(); event.preventDefault();
}
event.returnValue = false; event.returnValue = false;
} }
......
js/ui.css
View file @ b825e1f0
...@@ -303,6 +303,7 @@ html, body, #x3d_wrapper { ...@@ -303,6 +303,7 @@ html, body, #x3d_wrapper {
color: black; color: black;
font-size: 16px; font-size: 16px;
margin-bottom: 2px; margin-bottom: 2px;
outline:0;
} }
#window-error{ #window-error{
...@@ -416,9 +417,15 @@ html, body, #x3d_wrapper { ...@@ -416,9 +417,15 @@ html, body, #x3d_wrapper {
height: 25px; height: 25px;
} }
.mpr_name{
font-size:12px;
}
.mpr_input, .mpr_steps{
width:50px;
text-align:right;
}
#mpr_save{
margin: 5px;
}
js/ui_extra_models.js
View file @ b825e1f0
function extra_models_init(){
var emc = $("#extra_models-content");
// get content
$.ajax({
url: [SETTINGS.basepath,SETTINGS.path,"extra.xml"].join("/"),
success: function(response){
var eml = ['<table>'];
$(response).find("model").each(function(){
var name = $(this).attr("name");
var version = $(this).attr("version");
eml.push([
'<tr>',
' <td><input type=\'checkbox\' class=\'my-check-box donothide\' /></td>',
' <td class=\'extra_model_item\' version=\''+version+'\'>'+name+'</td>',
'</tr>'
].join('\n'));
});
eml.push('</table>');
emc.append($(eml.join('\n')));
var load_extra_models_button = $('<button>',{
id: 'load_extra_models_button',
title: 'load checked, hide unchecked',
class:'donothide'
}).html('Load');
emc.append('<br/>').append(load_extra_models_button);
load_extra_models_button.on('click',function(){
load_extra_models();
});
},
error: function(response){
emc.append($("<h2 style='color:red'>N/A</h2>"));
}
});
$("#extra_models_button").on("click",function(){
emc.show();
});
// changing a checkbox will not close menu
emc.on('click',function(e){
var test = $(e.target).hasClass("donothide");
if (!test){
emc.hide();
}
});
}
function manualposor_init(){
$("#window-extrainfo").html([
'<div>',
' <table id=\'mpr_table\'>',
' <tr>',
' <th></th>',
' <th></th>',
' <th align=\'left\' colspan=\'3\'>position, m</th>',
' <th align=\'left\' colspan=\'3\'>orientation, &deg;</th>',
' </tr>',
' <tr>',
' <th></th>',
' <th></th>',
' <th class=\'mpr_name\'>step, m :</th>',
' <th class=\'mpr_name\'><input id=\'mpr_step_m\' type=\'text\' class=\'mpr_steps\' value=\'0.001\'></th>',
' <th></th>',
' <th class=\'mpr_name\'>step, &deg; :</th>',
' <th class=\'mpr_name\'><input id=\'mpr_step_d\' type=\'text\' class=\'mpr_steps\' value=\'0.05\'></th>',
' </tr>',
' <tr>',
' <th>Model</th>',
' <th class=\'mpr_name\' title=\'hide on shift key\'>hide</th>',
' <th class=\'mpr_name\'>x</th>',
' <th class=\'mpr_name\'>y</th>',
' <th class=\'mpr_name\'>z</th>',
' <th class=\'mpr_name\'>azimuth</th>',
' <th class=\'mpr_name\'>elevation</th>',
' <th class=\'mpr_name\'>roll</th>',
' </tr>',
' </table>',
'</div>',
'<div>',
' <div><button id=\'mpr_save\'>save</button></div>',
'</div>',
].join('\n'));
if (SETTINGS.manualposor){
manualposor_refresh_content();
$("#window-extrainfo").show();
}else{
$("#window-extrainfo").hide();
}
$("#manualposor").on('click',function(){
if (SETTINGS.manualposor){
manualposor_refresh_content();
$("#window-extrainfo").show();
}else{
$("#window-extrainfo").hide();
}
});
$("#window-extrainfo").on('mouseenter',function(){
$(this).focus();
});
$("#window-extrainfo").on('mouseleave',function(){
$(this).trigger('keyup');
//$(this).focus();
});
// stop propagation to the scene
$("#window-extrainfo").on('keydown',function(e){
if(e.key=="Shift"){
$(this).find(".mpr_modelname").each(function(){
var modelname = $(this).html();
var checkbox = $(this).parent().find(".mpr_hide");
if (checkbox.prop("checked")){
$("inline[name=x3d_"+modelname+"]").parent().parent().attr("whichChoice",-1);
}
});
}
e.stopPropagation();
});
$("#window-extrainfo").on('keyup',function(e){
$(this).find(".mpr_modelname").each(function(){
var modelname = $(this).html();
$("inline[name=x3d_"+modelname+"]").parent().parent().attr("whichChoice",0);
});
});
// save all models in the list
$("#mpr_save").on('click',function(){
$(".mpr_modelname").each(function(){
var name = $(this).html();
if (name!=SETTINGS.path){
var output = generateKML([Data.extra_models["x3d_"+name]]);
var filename = SETTINGS.basepath+"/"+name+"/"+name+".kml";
console.log("Saving "+filename);
//console.log(output);
postKmlData(filename, output);
}
});
});
}
// Loading
function load_extra_models(){ function load_extra_models(){
var load_array = []; var load_array = [];
...@@ -52,6 +210,9 @@ function load_extra_model(name,version){ ...@@ -52,6 +210,9 @@ function load_extra_model(name,version){
function hide_extra_model(name){ function hide_extra_model(name){
//donothing //donothing
$("inline[name=x3d_"+name+"]").parent().parent().parent().remove();
manualposor_refresh_content();
} }
function parse_load_extra_model(name,version,response){ function parse_load_extra_model(name,version,response){
...@@ -64,6 +225,32 @@ function parse_load_extra_model(name,version,response){ ...@@ -64,6 +225,32 @@ function parse_load_extra_model(name,version,response){
var tilt = parseFloat($(response).find("Camera").find("tilt").text())-90; var tilt = parseFloat($(response).find("Camera").find("tilt").text())-90;
var roll = parseFloat($(response).find("Camera").find("roll").text()); var roll = parseFloat($(response).find("Camera").find("roll").text());
// reset
Data.extra_models["x3d_"+name] = {
latitude: latitude,
longitude: longitude,
altitude: altitude,
heading: heading,
tilt: tilt,
roll: roll,
name : $(response).find("name").text(),
description : $(response).find("Camera").find("description").text(),
visibility : $(response).find("visibility").text(),
href : $(response).find("Icon").find("href").text()
};
// apply translation?!!!
var p0 = new L.LatLng(Data.camera.kml.latitude,Data.camera.kml.longitude);
var p1 = new L.LatLng(Data.extra_models["x3d_"+name].latitude,Data.extra_models["x3d_"+name].longitude);
var p_w = x3dom_delta_map2scene(p0,p1);
console.log(p0);
console.log(p1);
console.log(p_w);
var tstring = [p_w.x,p_w.y,p_w.z].join(",");
console.log("tstring: "+tstring);
heading = heading*Math.PI/180; heading = heading*Math.PI/180;
tilt = tilt*Math.PI/180; tilt = tilt*Math.PI/180;
roll = roll*Math.PI/180; roll = roll*Math.PI/180;
...@@ -95,12 +282,231 @@ function parse_load_extra_model(name,version,response){ ...@@ -95,12 +282,231 @@ function parse_load_extra_model(name,version,response){
var model = $([ var model = $([
'<group>', '<group>',
' <transform rotation=\''+rstring+'\'>', ' <switch whichChoice=\'0\'>',
' <transform rotation=\''+rstring+'\' translation=\''+tstring+'\'>',
' <inline name="x3d_'+name+'" namespacename="x3d_'+name+'" url="'+model_url+'"></inline>', ' <inline name="x3d_'+name+'" namespacename="x3d_'+name+'" url="'+model_url+'"></inline>',
' </transform>', ' </transform>',
' </switch>',
'</group>' '</group>'
].join('\n')); ].join('\n'));
x3delement.append(model); x3delement.append(model);
// add to loaded_models
//update content
manualposor_refresh_content();
} }
// controls and adjustment
function manualposor_refresh_content(){
//$(".mpr_content").remove();
// find loaded models
$("inline").each(function(){
var name = $(this).attr("namespacename").substr(4);
var entry_exists = false;
//exit here
$(".mpr_modelname").each(function(){
if ($(this).html()==name){
entry_exists = true;
}
});
// exit if found entry in the table
if (entry_exists) return;
var tmpstr = "";
if (name==SETTINGS.path){
tmpstr = "(major)";
}
console.log("Model "+tmpstr+": "+name);
// get rotation and translation
var tra = $(this).parent();
//console.log($(tra).attr("translation")+' vs '+$(tra).attr("rotation"));
// always defined
// 0,0,0 vs 0,0,0,0
var tra_rot = $(tra).attr("rotation").split(",");
if (tra_rot.length==1){
tra_rot = $(tra).attr("rotation").split(" ");
}
//TEST
var q = x3dom.fields.Quaternion.parseAxisAngle($(tra).attr("rotation"));
var m = q.toMatrix();
// convert to real world
var R0 = Data.camera.Matrices.R0;
m = m.mult(R0);
var htr = x3dom_YawPitchRoll_nc_degs(m);
console.log(htr);
// pre A.
// x3dom.fields.Quaternion.parseAxisAngle
// A.
//var quat = x3dom.fields.Quaternion.axisAngle(new x3dom.fields.SFVec3f(+m[1], +m[2], +m[3]), +m[4]);
// B.
//toMatrix
console.log(tra_rot);
// tra_tra is local - convert to real world
var tra_tra = $(tra).attr("translation").split(",");
var tra_tra_rw = x3dom_scene_to_real(tra_tra[0],tra_tra[1],tra_tra[2]);
$("#mpr_table").append($([
'<tr class=\'mpr_content\'>',
' <td align=\'center\' class=\'mpr_name mpr_modelname\'>'+name+'</td>',
' <td><input type=\'checkbox\' class=\'mpr_hide\'></td>',
' <td><input type=\'text\' class=\'mpr_input mpr_tra mpr_x\' value=\''+tra_tra_rw.x+'\' \></td>',
' <td><input type=\'text\' class=\'mpr_input mpr_tra mpr_y\' value=\''+tra_tra_rw.y+'\' \></td>',
' <td><input type=\'text\' class=\'mpr_input mpr_tra mpr_z\' value=\''+tra_tra_rw.z+'\' \></td>',
' <td><input type=\'text\' class=\'mpr_input mpr_rot mpr_h\' value=\''+htr.yaw.toFixed(2)+'\' \></td>',
' <td><input type=\'text\' class=\'mpr_input mpr_rot mpr_t\' value=\''+htr.pitch.toFixed(2)+'\' \></td>',
' <td><input type=\'text\' class=\'mpr_input mpr_rot mpr_r\' value=\''+htr.roll.toFixed(2)+'\' \></td>',
'</tr>',
].join("\n")));
});
// remove entry if inline missing
$(".mpr_modelname").each(function(){
var name = $(this).html();
var inline = $("inline[name=x3d_"+name+"]");
if (inline.length==0){
$(this).parent().remove();
if (Data.extra_models["x3d_"+name]!==undefined){
delete Data.extra_models["x3d_"+name];
}
}
});
// events - mousewheel
$(".mpr_input").each(function(){
//unbind existing
this.removeEventListener("mousewheel",false);
//bind new
this.onmousewheel = function(event){
// not used
shiftKey = (event.shiftKey==1);
var delta = 0;
if (!event) event = window.event; // IE
if (event.wheelDelta) { //IE+Opera
delta = event.wheelDelta/120;
if (window.opera) {
delta = -delta;
}
} else if (event.detail) { // Mozilla
delta = -event.detail;
}
//add
if (delta){
var speed = 0;
var preci = 0;
// degrees?
if($(this).hasClass("mpr_rot")){
speed = parseFloat($("#mpr_step_d").val());
preci = 2;
}else{
speed = parseFloat($("#mpr_step_m").val());
preci = 3;
}
var tmpval = parseFloat($(this).val());
newval = tmpval + (delta>0?speed:-speed);
$(this).val(newval.toFixed(preci));
// move/rotate model
var tmp_pp = $(this).parent().parent();
var tmpname = tmp_pp.find(".mpr_name").html();
var tmptransform = $("inline[name=x3d_"+tmpname+"]").parent();
//get new coordinates
var angle = 0;
var distance = 0;
var dp_rw = {
x: parseFloat(tmp_pp.find(".mpr_x").val()),
y: parseFloat(tmp_pp.find(".mpr_y").val()),
z: parseFloat(tmp_pp.find(".mpr_z").val())
};
distance = Math.sqrt(dp_rw.x*dp_rw.x+dp_rw.z*dp_rw.z);
if (dp_rw.z!=0){
angle = 180/Math.PI*Math.atan2(dp_rw.x,-dp_rw.z);
}
var dp_r = x3dom_real_to_scene(dp_rw.x,dp_rw.y,dp_rw.z);
var new_tra = [dp_r.x,dp_r.y,dp_r.z].join(",");
var heading = tmp_pp.find(".mpr_h").val()*Math.PI/180;
var tilt = tmp_pp.find(".mpr_t").val()*Math.PI/180;
var roll = tmp_pp.find(".mpr_r").val()*Math.PI/180;
// update object
var initial_coordinates = [Data.camera.latitude,Data.camera.longitude];
var p0 = new L.LatLng(initial_coordinates[0],initial_coordinates[1]);//Camera._latlng;
var p1 = p0.CoordinatesOf(angle,distance);
Data.extra_models["x3d_"+tmpname].latitude = p1.lat.toFixed(8);
Data.extra_models["x3d_"+tmpname].longitude = p1.lng.toFixed(8);
Data.extra_models["x3d_"+tmpname].heading = (parseFloat(tmp_pp.find(".mpr_h").val())+360)%360;
Data.extra_models["x3d_"+tmpname].tilt = parseFloat(tmp_pp.find(".mpr_t").val())+90;
Data.extra_models["x3d_"+tmpname].roll = tmp_pp.find(".mpr_r").val();
// Heading,Tilt,Roll
var Mh = x3dom.fields.SFMatrix4f.rotationZ(heading);
var Mt = x3dom.fields.SFMatrix4f.rotationY(tilt);
var Mr = x3dom.fields.SFMatrix4f.rotationX(roll);
// proper Euler rotation
var R = Mh.mult(Mt).mult(Mr);
//var R = Mr.mult(Mt).mult(Mh);
// convert to proper Euler
var T = x3dom_toYawPitchRoll();
var R1 = T.inverse().mult(R).mult(T);
var R0 = Data.camera.Matrices.R0;
var R_diff = R1.mult(R0.inverse());
//var R_diff = R1;
var Q = new x3dom.fields.Quaternion(0, 0, 1, 0);
Q.setValue(R_diff);
var AA = Q.toAxisAngle();
var new_rot = AA[0].toString()+" "+AA[1];
tmptransform.attr("rotation",new_rot);
tmptransform.attr("translation",new_tra);
}
}
});
}
js/ui_init.js
View file @ b825e1f0
...@@ -38,6 +38,7 @@ ...@@ -38,6 +38,7 @@
var Data = { var Data = {
camera:{}, camera:{},
markers:[], markers:[],
extra_models:[]
}; };
var Scene; var Scene;
...@@ -211,6 +212,7 @@ function light_init(){ ...@@ -211,6 +212,7 @@ function light_init(){
var x3delement = $("#x3d_id").find("scene"); var x3delement = $("#x3d_id").find("scene");
var model_url = SETTINGS.files.x3d; var model_url = SETTINGS.files.x3d;
var model_name = SETTINGS.path;
var model_back_url = SETTINGS.files.x3d_background; var model_back_url = SETTINGS.files.x3d_background;
// multiple models in one scene test // multiple models in one scene test
...@@ -218,9 +220,11 @@ function light_init(){ ...@@ -218,9 +220,11 @@ function light_init(){
var model = $([ var model = $([
'<group>', '<group>',
' <transform id=\'x3d_transform\'>', ' <switch whichChoice=\'0\'>',
' <inline name="x3d" namespacename="x3d" url="'+model_url+'"></inline>', ' <transform id=\'x3d_transform\' class=\'inline_wrapper\'>',
' <inline name="x3d_'+model_name+'" namespacename="x3d_'+model_name+'" url="'+model_url+'"></inline>',
' </transform>', ' </transform>',
' </switch>',
'</group>', '</group>',
// multiple models in one scene test // multiple models in one scene test
//'<group>', //'<group>',
......
js/ui_menu.js
View file @ b825e1f0
...@@ -106,6 +106,7 @@ function menu_init(){ ...@@ -106,6 +106,7 @@ function menu_init(){
work_with_kml_init(); work_with_kml_init();
save_rating_init(); save_rating_init();
editmode_init(); editmode_init();
// see extra_models.js
extra_models_init(); extra_models_init();
manualposor_init(); manualposor_init();
...@@ -292,45 +293,6 @@ function editmode_init(){ ...@@ -292,45 +293,6 @@ function editmode_init(){
} }
function manualposor_init(){
$("#window-extrainfo").html([
'<div>',
' <table id=\'mpr_table\'>',
' <tr>',
' <th></th>',
' <th colspan=\'3\'>position, m</th>',
' <th colspan=\'3\'>orientation, &deg;</th>',
' </tr>',
' <tr>',
' <th>Model</th>',
' <th>x</th>',
' <th>y</th>',
' <th>z</th>',
' <th>azimuth</th>',
' <th>elevation</th>',
' <th>skew</th>',
' </tr>',
' </table>',
'</div>'
].join('\n'));
if (SETTINGS.manualposor){
$("#window-extrainfo").show();
}else{
$("#window-extrainfo").hide();
}
$("#manualposor").on('click',function(){
if (SETTINGS.manualposor){
$("#window-extrainfo").show();
}else{
$("#window-extrainfo").hide();
}
});
}
function controls_showhide(){ function controls_showhide(){
if (!SETTINGS.experimental){ if (!SETTINGS.experimental){
...@@ -351,77 +313,3 @@ function controls_showhide(){ ...@@ -351,77 +313,3 @@ function controls_showhide(){
} }
} }
function extra_models_init(){
var emc = $("#extra_models-content");
// get content
$.ajax({
url: [SETTINGS.basepath,SETTINGS.path,"extra.xml"].join("/"),
success: function(response){
var eml = ['<table>'];
$(response).find("model").each(function(){
var name = $(this).attr("name");
var version = $(this).attr("version");
eml.push([
'<tr>',
' <td><input type=\'checkbox\' class=\'my-check-box donothide\' /></td>',
' <td class=\'extra_model_item\' version=\''+version+'\'>'+name+'</td>',
'</tr>'
].join('\n'));
});
eml.push('</table>');
emc.append($(eml.join('\n')));
var load_extra_models_button = $('<button>',{
id: 'load_extra_models_button',
title: 'load checked, hide unchecked',
class:'donothide'
}).html('Load');
emc.append('<br/>').append(load_extra_models_button);
load_extra_models_button.on('click',function(){
load_extra_models();
});
},
error: function(response){
emc.append($("<h2 style='color:red'>N/A</h2>"));
}
});
$("#extra_models_button").on("click",function(){
emc.show();
});
// changing a checkbox will not close menu
emc.on('click',function(e){
var test = $(e.target).hasClass("donothide");
if (!test){
emc.hide();
}
});
}
js/x3dom_functions.js
View file @ b825e1f0
...@@ -149,7 +149,7 @@ function x3dom_getXYPosOr(cnvx,cnvy,round){ ...@@ -149,7 +149,7 @@ function x3dom_getXYPosOr(cnvx,cnvy,round){
dist_xyz = null; dist_xyz = null;
} }
// azimuth, elevation and skew are relative to the camera location // azimuth, elevation and roll are relative to the camera location
az = Math.atan2(p_rw.x,-p_rw.z)*180/Math.PI; az = Math.atan2(p_rw.x,-p_rw.z)*180/Math.PI;
az = (az+360)%360; az = (az+360)%360;
el = Math.atan2(p_rw.y,Math.sqrt(p_rw.x*p_rw.x+p_rw.z*p_rw.z))*180/Math.PI; el = Math.atan2(p_rw.y,Math.sqrt(p_rw.x*p_rw.x+p_rw.z*p_rw.z))*180/Math.PI;
......
js/x3dom_init.js
View file @ b825e1f0
...@@ -1284,7 +1284,7 @@ X3DOMObject.displayViewInfo = function(e){ ...@@ -1284,7 +1284,7 @@ X3DOMObject.displayViewInfo = function(e){
' <th style=\'width:60px;\'>z</th>', ' <th style=\'width:60px;\'>z</th>',
' <th>azimuth</th>', ' <th>azimuth</th>',
' <th>elevation</th>', ' <th>elevation</th>',
' <th>skew</th>', ' <th>roll</th>',
'</tr>', '</tr>',
'<tr>', '<tr>',
' <td>mouse</td>', ' <td>mouse</td>',
......
viewer.html
View file @ b825e1f0
...@@ -102,7 +102,7 @@ Instructions: ...@@ -102,7 +102,7 @@ Instructions:
<div id='window-error'></div> <div id='window-error'></div>
<div id='window-viewinfo'></div> <div id='window-viewinfo'></div>
<div id='window-markinfo'></div> <div id='window-markinfo'></div>
<div id='window-extrainfo'></div> <div id='window-extrainfo' tabindex='1'></div>
<div id='window-info'></div> <div id='window-info'></div>
</div> </div>
<div id='menu-content'> <div id='menu-content'>
...@@ -118,7 +118,7 @@ Instructions: ...@@ -118,7 +118,7 @@ Instructions:
<td><input id='markinfo' type='checkbox' class='my-check-box donothide' /></td> <td><input id='markinfo' type='checkbox' class='my-check-box donothide' /></td>
</tr> </tr>
<tr> <tr>
<td>Show view info (x, y, z, azimuth, elevation, skew)</td> <td>Show view info (x, y, z, azimuth, elevation, roll)</td>
<td><input id='viewinfo' type='checkbox' class='my-check-box donothide' /></td> <td><input id='viewinfo' type='checkbox' class='my-check-box donothide' /></td>
</tr> </tr>
<tr> <tr>
......
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