+ loading additional models to the current model

js/ui.css

@@ -146,7 +146,9 @@ html, body, #x3d_wrapper {
     background: rgba(240,240,240,1);
 }
 
-#help-content, #menu-content{
+#help-content,
+#menu-content,
+#extra_models-content{
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     position:absolute;
     top:0px;
@@ -192,7 +194,8 @@ html, body, #x3d_wrapper {
 #align_button_heading,
 #align_button_location,
 #align_tr_button,
-#download_button{
+#download_button,
+#extra_models_button{
     background-size: 32px 32px;
     background-repeat: no-repeat;
     background-position: center;
@@ -222,6 +225,9 @@ html, body, #x3d_wrapper {
     background-image:url('images/ic_horizon_black_48dp_1x.png');
 }
 
+#extra_models_button{
+    background-image:url('images/ic_add_location_black_48dp_1x.png');
+}
 
 #exit_button:hover{
     background-color: rgba(240,150,150,1);
@@ -231,7 +237,8 @@ html, body, #x3d_wrapper {
 #align_button_heading:hover,
 #align_button_location:hover,
 #align_tr_button:hover,
-#download_button:hover{
+#download_button:hover,
+#extra_models_button:hover{
 /*     background-image:url('images/align.png'); */
     background-color: rgba(240,240,240,1);
 }

js/ui_extra_models.js

+
+function load_extra_models(){
+
+  var load_array = [];
+
+  $(".extra_model_item").each(function(){
+
+    var is_checked = $(this).parent().find('input').prop("checked");
+
+    if (is_checked){
+      console.log("Loading "+$(this).html());
+      load_extra_model($(this).html(),$(this).attr('version'));
+    }else{
+      console.log("Hiding "+$(this).html());
+      hide_extra_model($(this).html());
+    }
+
+  });
+
+}
+
+function load_extra_model(name,version){
+
+//get current kml
+//get that model kml
+//find relative orientation and apply to the group first
+
+  //console.log($("inline[name=x3d_"+name+"]"));
+
+  if ($("inline[name=x3d_"+name+"]").length==0){
+
+    model_kml = SETTINGS.basepath+"/"+name+"/"+name+".kml";
+
+    $.ajax({
+      url: model_kml+"?"+Date.now(),
+      success:function(response){
+
+        parse_load_extra_model(name,version,response);
+
+      },
+      error:function(response){
+        console.log("Too bad, file not found");
+      }
+    });
+
+  }else{
+
+    console.log("Model "+name+" is already loaded");
+
+  }
+}
+
+function hide_extra_model(name){
+  //donothing
+}
+
+function parse_load_extra_model(name,version,response){
+
+  var latitude  = parseFloat($(response).find("Camera").find("latitude").text());
+  var longitude = parseFloat($(response).find("Camera").find("longitude").text());
+  var altitude  = parseFloat($(response).find("Camera").find("altitude").text());
+
+  var heading = parseFloat($(response).find("Camera").find("heading").text());
+  var tilt    = parseFloat($(response).find("Camera").find("tilt").text())-90;
+  var roll    = parseFloat($(response).find("Camera").find("roll").text());
+
+  heading = heading*Math.PI/180;
+  tilt = tilt*Math.PI/180;
+  roll = roll*Math.PI/180;
+
+  // 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 Q = new x3dom.fields.Quaternion(0, 0, 1, 0);
+  Q.setValue(R_diff);
+  var AA = Q.toAxisAngle();
+  var rstring = AA[0].toString()+" "+AA[1];
+
+  var x3delement = $("#x3d_id").find("scene");
+
+  model_url = SETTINGS.basepath+"/"+name+"/"+version+"/"+name+".x3d";
+
+  var model = $([
+      '<group>',
+      '  <transform rotation=\''+rstring+'\'>',
+      '    <inline name="x3d_'+name+'" namespacename="x3d_'+name+'" url="'+model_url+'"></inline>',
+      '  </transform>',
+      '</group>'
+    ].join('\n'));
+
+  x3delement.append(model);
+
+}
\ No newline at end of file

js/ui_init.js

@@ -210,10 +210,21 @@ function light_init(){
     var model_url = SETTINGS.files.x3d;
     var model_back_url = SETTINGS.files.x3d_background;
 
+    // multiple models in one scene test
+    //second_x3d = SETTINGS.basepath+"/1502241323_909309/v1/1502241323_909309.x3d";
+
     var model = $([
         '<group>',
+        '  <transform id=\'x3d_transform\'>',
         '    <inline name="x3d" namespacename="x3d" url="'+model_url+'"></inline>',
-        '</group>'
+        '  </transform>',
+        '</group>',
+        // multiple models in one scene test
+        //'<group>',
+        //'  <transform rotation="0,1,0,-0.41">',
+        //'    <inline name="x3d2" namespacename="x3d2" url="'+second_x3d+'"></inline>',
+        //'  </transform>',
+        //'</group>',
       ].join('\n'));
 
     x3delement.append(model);

js/ui_menu.js

@@ -74,7 +74,6 @@ function menu_init(){
     // changing a checkbox will not close menu
     menu.on('click',function(e){
         var test = $(e.target).hasClass("donothide");
-
         if (!test){
             menu.hide();
         }
@@ -107,6 +106,7 @@ function menu_init(){
     work_with_kml_init();
     save_rating_init();
     editmode_init();
+    extra_models_init();
 
     $("#global_coordinates").on('click',function(){
       ui_hideMessage("window-markinfo");
@@ -311,3 +311,77 @@ 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();
+      }
+  });
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

viewer.html

@@ -41,6 +41,7 @@
     <script type='text/javascript' src='js/ui_help.js'></script>
     <script type='text/javascript' src='js/ui_functions.js'></script>
     <script type='text/javascript' src='js/ui_align.js'></script>
+    <script type='text/javascript' src='js/ui_extra_models.js'></script>
 
     <script type='text/javascript' src='js/align_functions.js'></script>
 
@@ -75,6 +76,7 @@
         <div id='help_button' title='Help'>?</div>
         <div id='download_button' title='Download 3d model (.obj & .x3d formats)'></div>
         <div id='menu_button' title='Menu'></div>
+        <div id='extra_models_button' title='Load extra models'></div>
         <div id='align_button' title='Run least squares fitting algorithm (Gauss-Newton) for camera heading and location using markers.
 Instructions:
   1. Use approximate location control on the map to change initial approximation for the algorithm.
@@ -215,6 +217,11 @@ Instructions:
             </table>
         </div>
     </div>
+    <div id='extra_models-content'>
+        <div>
+          <h2>Load extra models</h2>
+        </div>
+    </div>
     <div id='help-content'>
         <div>
             <h2>3D Scene + Map</h2>