saving and parsing marks for multiple models orientation

js/ui.css

@@ -426,6 +426,6 @@ html, body, #x3d_wrapper {
   text-align:right;
 }
 
-#mpr_save{
-  margin: 5px;
+#mpr_save, #mpr_save_marks{
+  margin: 0px 5px 5px 5px;
 }

js/ui_extra_models.js

@@ -34,6 +34,8 @@ function extra_models_init(){
         load_extra_models();
       });
 
+      //mpr_marks_load();
+
     },
     error: function(response){
       emc.append($("<h2 style='color:red'>N/A</h2>"));
@@ -90,7 +92,8 @@ function manualposor_init(){
       ' </table>',
       '</div>',
       '<div>',
-      '  <div><button id=\'mpr_save\'>save</button></div>',
+      '  <div><button id=\'mpr_save\'>save kmls</button></div>',
+      '  <div><button id=\'mpr_save_marks\' title=\'save to file\' >save marks</button></div>',
       '</div>',
     ].join('\n'));
 
@@ -179,6 +182,78 @@ function manualposor_init(){
 
       MPR_PO = null;
 
+      $("inline").each(function(){
+        $(this).parent().parent().parent().attr("whichChoice",0);
+      });
+
+    });
+
+    $("#mpr_save_marks").on('click',function(){
+
+      //var str = mpr_markers_print();
+      //console.log(str);
+
+      var str = mpr_markers_to_xml();
+      console.log(str);
+
+      $.ajax({
+        url: "store_marks.php?model="+SETTINGS.path,
+        type: "POST",
+        data: str,
+        async: true,
+        complete: function(response){
+          var res = parseInt(response.responseText);
+          if (res!=0){
+            ui_showMessage("window-error","Error saving marks, code: "+res);
+          }
+        },
+        contentType: "text/xml; charset=\"utf-8\""
+      });
+
+    });
+
+}
+
+function mpr_marks_load(){
+
+  $.ajax({
+    url: [SETTINGS.basepath,SETTINGS.path,"marks.xml"].join("/"),
+    success: function(response){
+
+      $(response).find("record").each(function(){
+
+        var uid = $(this).attr("uid");
+        var marks = $(this).find("mark");
+
+        var name1 = $(marks[0]).attr("model");
+        var p1    = $(marks[0]).attr("position").split(",");
+        var p1l   = new x3dom.fields.SFVec3f(p1[0],p1[1],p1[2]);
+
+        var name2 = $(marks[1]).attr("model");
+        var p2    = $(marks[1]).attr("position").split(",");
+        var p2l   = new x3dom.fields.SFVec3f(p2[0],p2[1],p2[2]);
+
+        // local position is constant
+        Data.mpr.markers.push({
+          uid: uid,
+          m1:{
+            name: name1,
+            position: p1l
+          },
+          m2:{
+            name: name2,
+            position: p2l
+          }
+        });
+
+      });
+
+      MPR_MARKS_LOADED = true;
+
+    },
+    error: function(response){
+      MPR_MARKS_LOADED = true;
+    }
   });
 
 }
@@ -323,6 +398,46 @@ function parse_load_extra_model(name,version,response){
   //update content
   manualposor_refresh_content();
 
+  // now there are mpr_marks
+  for(var i=0;i<Data.mpr.markers.length;i++){
+    var mark = Data.mpr.markers[i];
+    //check if already placed
+    if ($('.mprmarker[uid='+mark.uid+']').length==0){
+      var inline1 = $('inline[name=x3d_'+mark.m1.name+']');
+      var inline2 = $('inline[name=x3d_'+mark.m2.name+']');
+      // now check if both models are loaded
+      if((inline1.length!=0)&&(inline2.length!=0)){
+
+        // place now
+        var p1 = mark.m1.position;
+        var p2 = mark.m2.position;
+
+        var d = x3dom_3d_distance(p1.x,p1.y,p1.z,true);
+        var size = 1*SETTINGS.markersize_k*d;
+        var color = x3dom_autocolor();
+
+        var uid = mark.uid;
+
+        var p1l = p1;
+        var p2l = p2;
+
+        var target1 = inline1;
+        var target2 = inline2;
+
+        var name1 = mark.m1.name;
+        var name2 = mark.m2.name;
+
+        var d = x3dom_3d_distance(p1.x,p1.y,p1.z,true);
+        var size = 1*SETTINGS.markersize_k*d;
+
+        new MPRMarker({target:target1.parent(), uid:uid, model:name1, position:p1l, size: size, color: color});
+        new MPRMarker({target:target2.parent(), uid:uid, model:name2, position:p2l, size: size, color: color});
+
+      }
+    }
+
+  }
+
 }
 
 // controls and adjustment
@@ -695,59 +810,224 @@ function manualposor_init_shootrays(x,y){
 
 }
 
+
 function manualposor_shootrays(){
 
   var r1 = $(".mpr_r1[name=r1]:checked");
   var r2 = $(".mpr_r2[name=r2]:checked");
 
+  if (r1.length==0||r2.length==0){
+    MPR.counter = 0;
+    return;
+  }
+
+  // need to delete
   if (MPR.counter==1){
 
-    if (r2.length!=0){
     $("inline[name=x3d_"+r2.val()+"]").parent().parent().parent().attr("whichChoice",-1);
-    }
-
-    //Scene.element.runtime.enterFrame();
 
   }else if (MPR.counter==2){
 
-    var ray1 = Scene.element.runtime.shootRay(MPR.x,MPR.y);
-    console.log(ray1);
-
-    if (r1.length!=0){
+    MPR.ray1 = x3dom_shootRay_fixed(MPR.x,MPR.y);
+    if(MPR.ray1==-1){
+      MPR.counter=0;
+      ui_showMessage("window-error","ray didn't hit a model (models must overlap)");
+    }else{
       $("inline[name=x3d_"+r1.val()+"]").parent().parent().parent().attr("whichChoice",-1);
     }
 
-  }else if(MPR.counter==3){
+  }else if (MPR.counter==3){
 
-    var ray2 = Scene.element.runtime.shootRay(MPR.x,MPR.y);
-    console.log(ray2);
+    MPR.ray2 = x3dom_shootRay_fixed(MPR.x,MPR.y);
+    MPR.counter=0;
 
-    MPR.counter = 0;
+    // register and place marker pair
+    if(MPR.ray2!=-1){
+      manualposor_newMarksPair(MPR.ray1,MPR.ray2);
+    }else{
+      ui_showMessage("window-error","ray didn't hit a model (models must overlap)");
+    }
 
   }
 
-  if (MPR.counter!=0){
-    console.log("Counter: "+MPR.counter);
-    MPR.counter++;
+  // force enterFrame event
+  if(MPR.counter!=0){
 
     setTimeout(function(){
-      var r1 = $(".mpr_r1[name=r1]:checked");
-      if (r1.length!=0){
       $("inline[name=x3d_"+r1.val()+"]").parent().parent().parent().attr("whichChoice",0);
-      }
-      if (r2.length!=0){
       $("inline[name=x3d_"+r2.val()+"]").parent().parent().parent().attr("whichChoice",0);
-      }
     },10);
 
+    MPR.counter++;
+
+  }
+
+}
+
+// register and place marker pair
+function manualposor_newMarksPair(ray1,ray2){
+
+  console.log("new pair");
+
+  // already with x3d_
+  var name1 = ray1.pickObject.id.split("__")[0].substr(4);
+  var name2 = ray2.pickObject.id.split("__")[0].substr(4);
+
+  // uid matches uid in global array
+  var uid = "s"+Date.now();
+
+  var p1 = ray1.pickPosition;
+  var p2 = ray2.pickPosition;
+
+  // force relative size (relative to p1 point)
+  var d = x3dom_3d_distance(p1.x,p1.y,p1.z,true);
+  var size = 1*SETTINGS.markersize_k*d;
+  var color = x3dom_autocolor();
+
+  var target1 = $("inline[name=x3d_"+name1+"]");
+  var m = x3dom_getTransorm_from_2_parents(target1);
+  var p1l = m.inverse().multMatrixVec(p1);
+
+  var target2 = $("inline[name=x3d_"+name2+"]");
+  m = x3dom_getTransorm_from_2_parents(target2);
+  var p2l = m.inverse().multMatrixVec(p2);
+
+  new MPRMarker({target:target1.parent(), uid:uid, model:name1, position:p1l, size: size, color: color});
+  new MPRMarker({target:target2.parent(), uid:uid, model:name2, position:p2l, size: size, color: color});
+
+  // local position is constant
+  Data.mpr.markers.push({
+    uid: uid,
+    m1:{
+      name: name1,
+      position: p1l
+    },
+    m2:{
+      name: name2,
+      position: p2l
+    }
+  });
+
+}
+
+var MPRMarker = function(options){
+
+  this.uid      = options.uid;
+  this.target   = options.target;
+  this.name     = options.name;
+  // position
+  this.p     = options.position;
+  this.color = options.color;
+
+  this.size = options.size;
+
+  this.size_str  = [this.size,this.size,this.size].join(",");
+
+  this.init();
+
+}
+
+MPRMarker.prototype.init = function(){
+
+  var html = $([
+    '<group>',
+    '  <switch whichChoice="0">',
+    //'    <transform translation="'+(this.p.x-this.size/2)+' '+(this.p.y-this.size/2)+' '+(this.p.z-this.size/2)+'" rotation="0 0 0 0">',
+    '    <transform translation="'+(this.p.x)+' '+(this.p.y)+' '+(this.p.z)+'" rotation="0 0 0 0">',
+    '      <shape class="mprmarker" uid="'+this.uid+'">',
+    '        <appearance>',
+    '          <material diffuseColor="'+this.color+'" transparency="0.0" myColor="'+this.color+'"></material>',
+    '        </appearance>',
+    '        <box DEF="box" size="'+this.size_str+'" />',
+    '      </shape>',
+    '    </transform>',
+    '  </switch>',
+    '</group>'
+  ].join('\n'));
+
+  $(this.target).append(html);
+
+  html.find("shape").on('click',function(){
+    var uid = $(this).attr("uid");
+    $(".mprmarker[uid="+uid+"]").each(function(){
+      $(this).parent().parent().parent().remove();
+    });
+
+    // remove from Data.mpr.markers
+    mpr_marker_remove_by_uid(uid);
+
+  });
+
+}
+
+function mpr_marker_remove_by_uid(uid){
+    var c;
+    for(var i=0;i<Data.mpr.markers.length;i++){
+      c = Data.mpr.markers[i];
+      if(c.uid==uid){
+        Data.mpr.markers.splice(i,1);
+        break;
+      }
+    }
+}
+
+function mpr_markers_print(){
+
+  var str = [];
+
+  for(var i=0;i<Data.mpr.markers.length;i++){
+
+    var rec = Data.mpr.markers[i];
+
+    str[i] = [
+      '\n{',
+      '  uid: \''+rec.uid+'\',',
+      '  m1: {',
+      '        name: \''+rec.m1.name+'\',',
+      '        position: { x: '+rec.m1.position.x+', y: '+rec.m1.position.y+', z: '+rec.m1.position.z+' }',
+      '      },',
+      '  m2: {',
+      '        name: \''+rec.m2.name+'\',',
+      '        position: { x: '+rec.m2.position.x+', y: '+rec.m2.position.y+', z: '+rec.m2.position.z+' }',
+      '      }',
+      '}'
+    ].join("\n");
+
   }
 
+  str = "["+str.join(",")+"\n]";
+
+  return str;
+
 }
 
+function mpr_markers_to_xml(){
+
+  var str = [];
+
+  for(var i=0;i<Data.mpr.markers.length;i++){
 
+    var rec = Data.mpr.markers[i];
 
+    str[i] = [
+      '  <record uid=\''+rec.uid+'\'>',
+      '    <mark model=\''+rec.m1.name+'\' position=\''+rec.m1.position.x+','+rec.m1.position.y+','+rec.m1.position.z+'\'></mark>',
+      '    <mark model=\''+rec.m2.name+'\' position=\''+rec.m2.position.x+','+rec.m2.position.y+','+rec.m2.position.z+'\'></mark>',
+      '  </record>'
+    ].join("\n");
 
+  }
+
+  str = [
+    '<?xml version="1.0" encoding="UTF-8"?>',
+    '<Document>',
+    str.join('\n'),
+    '</Document>'
+  ].join('\n');
 
+  return str;
+
+}
 
 
 

js/ui_init.js

@@ -38,7 +38,10 @@
 var Data = {
     camera:{},
     markers:[],
-    extra_models:[]
+    extra_models:[],
+    mpr:{
+      markers:[]
+    }
 };
 
 var Scene;
@@ -54,6 +57,8 @@ var SETTINGS = {
     'moreinfo':  true,
     'crosshair': false,
     'shiftspeed' : 0.01,
+    // for relative size
+    'markersize_k': 0.025,
     'markersize' : 1,
     'markercolor': "#1f1",
     'slidingdrag': true,
@@ -92,12 +97,17 @@ var AUTOCOLORS_COUNTER = 0;
 var MARKER_PREFIX = "my-sph-";
 
 // Manual Position & Orientation mode
+// x,y - canvas coordinates - click position
+// counter - helper counter
 var MPR = {
   counter: 0,
   x: null,
   y: null
 };
 
+// recorded marks restored
+var MPR_MARKS_LOADED = false;
+
 // no comments
 function parseURL(){
     var parameters=location.href.replace(/\?/ig,"&").split("&");
@@ -458,6 +468,7 @@ function deep_init(){
 
             x3d_setShiftSpeed();
 
+            if (!MPR_MARKS_LOADED) mpr_marks_load();
         }
 
         // loading extra models?
@@ -612,7 +623,7 @@ function x3d_events(){
 
             }else{
 
-              // place align marker here
+              // for alignment? do nothing
 
             }
 

js/x3dom_functions.js

@@ -356,6 +356,24 @@ function zNear_bug_correction(xyz){
 
 }
 
+// shoot ray with zNear correction
+function x3dom_shootRay_fixed(x,y){
+
+  var ray =  Scene.element.runtime.shootRay(x,y);
+
+  // missed
+  if (ray.pickPosition==null){
+    return -1;
+  }
+
+  var tmp = zNear_bug_correction([ray.pickPosition.x,ray.pickPosition.y,ray.pickPosition.z]);
+
+  ray.pickPosition = new x3dom.fields.SFVec3f(tmp[0],tmp[1],tmp[2]);
+
+  return ray;
+
+}
+
 // this upright is for world coordinates, not the camera's
 // the up vector should be taken from the initial camera orientation in kml.
 function x3dom_setUpRight(){
@@ -872,3 +890,51 @@ function x3dom_setViewpoint(m){
     Data.camera.Matrices.RC_w = m;
 
 }
+
+function x3dom_markersize(x,y,z){
+
+  if (SETTINGS.markersize<0){
+    var d = x3dom_3d_distance(x,y,z,true);
+    res = -SETTINGS.markersize*SETTINGS.markersize_k*d;
+  }else{
+    res = SETTINGS.markersize;
+  }
+
+  return res;
+
+}
+
+function x3dom_getTransorm(element){
+
+    var tra_str = $(element).attr("translation");
+    var rot_str = $(element).attr("rotation");
+
+    var mr = x3dom.fields.Quaternion.parseAxisAngle(rot_str).toMatrix();
+
+    var tra = x3dom.fields.SFVec3f.parse(tra_str);
+    var mt  = x3dom.fields.SFMatrix4f.translation(tra);
+    var mtn = x3dom.fields.SFMatrix4f.translation(tra.negate());
+
+    var m = mr.mult(mt);
+
+    return m;
+}
+
+function x3dom_getTransorm_from_2_parents(element){
+
+  var m1 = x3dom_getTransorm(element.parent());
+  var m2 = x3dom_getTransorm(element.parent().parent());
+
+  return m1.mult(m2);
+
+}
+
+function x3dom_autocolor(){
+
+  var color = SETTINGS.markercolor;
+  color = AUTOCOLORS[AUTOCOLORS_COUNTER%AUTOCOLORS.length];
+  AUTOCOLORS_COUNTER++;
+
+  return color;
+
+}

js/x3dom_init.js

@@ -64,6 +64,7 @@ var X3DOMObject = function(element,data,options){
     // status vars
     this._X3DOM_SCENE_INIT_BACK_DONE = false;
     this._X3DOM_SCENE_INIT_DONE = false;
+
     this._ctrlKey = false;
     this._shiftKey = false;
     this._stored_x3dom_event = null;
@@ -515,7 +516,7 @@ X3DOMObject.prototype.createMarker = function(x,y,z,id){
     var index = null;
 
     var color = convert_color_l2x(SETTINGS.markercolor);
-    var size = SETTINGS.markersize/2;
+    var size = x3dom_markersize()/2;
 
     if ((id=="")||(id==undefined)){
         sph_class = "my-markers";
@@ -1014,7 +1015,7 @@ X3DOMObject.PointerMarker.updatePars = function(){
   // place pointer marker
   $("#sliding_sphere").find('material').attr("diffuseColor",convert_color_l2x(SETTINGS.markercolor));
   $("#sliding_sphere").find('material').attr("transparency","0.2");
-  $("#sliding_sphere").find('Sphere').attr("radius",SETTINGS.markersize/2);
+  $("#sliding_sphere").find('Sphere').attr("radius",((SETTINGS.markersize<0)?-1:1)*SETTINGS.markersize/2);
 
 }
 
@@ -1515,9 +1516,7 @@ X3DOMObject.createNewMarker = function(x,y,z){
   var Camera = Map.marker;
   // Create marker for Data
 
-  var color = SETTINGS.markercolor;
-  color = AUTOCOLORS[AUTOCOLORS_COUNTER%AUTOCOLORS.length];
-  AUTOCOLORS_COUNTER++;
+  var color = x3dom_autocolor();
 
   var xyz_real = x3dom_scene_to_real(x,y,z);
 
@@ -1526,7 +1525,7 @@ X3DOMObject.createNewMarker = function(x,y,z){
       y: y || 0,
       z: z || 0,
       color: color,
-      size:  SETTINGS.markersize,
+      size: x3dom_markersize(x,y,z)
   });
 
   mark.d_x3d = Math.sqrt(Math.pow(xyz_real.x,2)+Math.pow(xyz_real.z,2));

store_marks.php

+<?php
+/*
+*! -----------------------------------------------------------------------------**
+*! FILE NAME  : store_marks.php
+*! REVISION   : 1.0
+*! DESCRIPTION: save marks for manual position and orientation
+*! Copyright (C) 2017 Elphel, Inc.
+*!
+*! -----------------------------------------------------------------------------**
+*!  This program is free software: you can redistribute it and/or modify
+*!  it under the terms of the GNU General Public License as published by
+*!  the Free Software Foundation, either version 3 of the License, or
+*!  (at your option) any later version.
+*!
+*!  This program is distributed in the hope that it will be useful,
+*!  but WITHOUT ANY WARRANTY; without even the implied warranty of
+*!  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+*!  GNU General Public License for more details.
+*!
+*!  You should have received a copy of the GNU General Public License
+*!  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*!
+*!  It means that the program's users have the four essential freedoms:
+*!
+*!   * The freedom to run the program, for any purpose (freedom 0).
+*!   * The freedom to study how the program works, and change it to make it do what you wish (freedom 1).
+*!     Access to the source code is a precondition for this.
+*!   * The freedom to redistribute copies so you can help your neighbor (freedom 2).
+*!   * The freedom to distribute copies of your modified versions to others (freedom 3).
+*!
+*!  By doing this you can give the whole community a chance to benefit from your changes.
+*!  Access to the source code is a precondition for this.
+*! -----------------------------------------------------------------------------**
+*/
+
+require_once("call_filter.php");
+
+$model = $_GET['model'];
+
+$marks_file = "models/$model/marks.xml";
+
+$contents = file_get_contents('php://input');
+
+if (!preg_match("/\//",$model)){
+
+  $result = file_put_contents($marks_file,$contents);
+  if (!$result) {
+    die("-1");
+  }else{
+    die("0");
+  }
+
+}else{
+
+  die("-2");
+
+}
+
+?>