1. +help 2. +setting

js/.directory

 [Dolphin]
 PreviewsShown=true
-Timestamp=2017,6,5,18,57,32
+SortRole=date
+Timestamp=2017,6,7,11,0,36
 Version=3
 ViewMode=1

js/ui_init.js

@@ -12,6 +12,7 @@ var INIT_HEADING = 0;
 var SETTINGS = {
     'pointer':   false,
     'highlight': false,
+    'markinfo':  true,
     'viewinfo':  true,
     'moreinfo':  true,
     'crosshair': false,
@@ -19,6 +20,24 @@ var SETTINGS = {
     'slidingdrag': true
 }
 
+// no comments
+function parseURL(){
+    var parameters=location.href.replace(/\?/ig,"&").split("&");
+    for (var i=0;i<parameters.length;i++) parameters[i]=parameters[i].split("=");
+    for (var i=1;i<parameters.length;i++) {
+        switch (parameters[i][0]) {
+            case "pointer":      SETTINGS.pointer   = true; break;
+            case "highlight":    SETTINGS.highlight = true; break;
+            case "markinfo":     SETTINGS.markinfo  = true; break;
+            case "viewinfo":     SETTINGS.viewinfo  = true; break;
+            case "moreinfo":     SETTINGS.moreinfo  = true; break;
+            case "crosshair":    SETTINGS.crosshair = true; break;
+            case "slidingdrag":  SETTINGS.slidingdrag = true; break;
+            case "shiftspeed":   SETTINGS.shiftspeed = parseFloat(parameters[i][1]); break;
+        }
+    }
+}
+
 $(function(){
 
     parseURL();
@@ -662,21 +681,3 @@ function getAzimuth(p1_ll,p2_ll){
     return azimuth;
     
 }
-
-
-// no comments
-function parseURL(){
-    var parameters=location.href.replace(/\?/ig,"&").split("&");
-    for (var i=0;i<parameters.length;i++) parameters[i]=parameters[i].split("=");
-    for (var i=1;i<parameters.length;i++) {
-        switch (parameters[i][0]) {
-            case "pointer":      SETTINGS.pointer   = true; break;
-            case "highlight":    SETTINGS.highlight = true; break;
-            case "viewinfo":     SETTINGS.viewinfo  = true; break;
-            case "moreinfo":     SETTINGS.moreinfo  = true; break;
-            case "crosshair":    SETTINGS.crosshair = true; break;
-            case "slidingdrag":  SETTINGS.slidingdrag = true; break;
-            case "shiftspeed": SETTINGS.shiftspeed = parseFloat(parameters[i][1]); break;
-        }
-    }
-}

js/x3dom_functions.js

@@ -271,9 +271,11 @@ function x3dom_altelev(alt,elev){
     var from = mat.e3();
     from.y = alt;
 
+    // convert to W2C*C2W
     var az = Math.atan2(mat._02,mat._22);
     var el = elev;
     var sk = Math.atan2(mat._10,mat._11);
+    
 
     var matx = x3dom.fields.SFMatrix4f.rotationX(el);
     var maty = x3dom.fields.SFMatrix4f.rotationY(az);
@@ -293,6 +295,9 @@ function x3dom_altelev(alt,elev){
     
 }
 
+/**
+ * back and forth conversions for test purposes
+ */
 function x3dom_matrix_test(){
     
     var viewpoint = $(Scene.element).find("Viewpoint");
@@ -321,7 +326,7 @@ function x3dom_matrix_test(){
     //az = (az+INIT_HEADING+360)%360;
     //az = (az+360)%360;
     var el = -Math.asin(R._12)*180/Math.PI;
-    var sk = Math.atan2(R._10,R._11);
+    var sk = Math.atan2(R._10,R._11)*180/Math.PI;
     
     console.log("Angles:");
     console.log("az="+az+" el="+el+" sk="+sk);
@@ -343,10 +348,10 @@ function x3dom_matrix_test(){
 }
 
 /**
- * Get World to Camera coordinates tranform matrix
- * what's x3dom's native getWCtoCCMatrix()? canvas-to-world?
+ * Transform to calculate conventional Euler angles for z-y'-x" = z-y-z
+ * unrelated: what's x3dom's native getWCtoCCMatrix()? canvas-to-world?
  */
-function x3dom_W2C(){
+function x3dom_C2E(){
     return new x3dom.fields.SFMatrix4f(
         0, 0, 1, 0,
         1, 0, 0, 0,
@@ -355,6 +360,19 @@ function x3dom_W2C(){
     );
 }
 
-function x3dom_C2W(){
+function x3dom_E2C(){
     return x3dom_W2C().inverse();
 }
+
+function x3dom_YawPitchRoll(m){
+    
+    var yaw = Math.atan2(m._10,m._00);
+    var pitch = -Math.asin(m._20);
+    var roll = Math.atan2(m._21,m._22);
+    
+    return {
+        yaw: yaw,
+        pitch: pitch,
+        roll: roll
+    };
+}

js/x3dom_init.js

@@ -1047,7 +1047,7 @@ X3DOMObject.MapMarker.registerEvents = function(map_mark){
  */
 X3DOMObject.displayInfo = function(e){
     
-        if (Data.markers.length==0){
+        if (Data.markers.length==0||!SETTINGS.markinfo){
             ui_hideMessage("window-markinfo");
         }
         //console.log("displayInfo");
@@ -1115,7 +1115,7 @@ X3DOMObject.displayInfo = function(e){
  */
 X3DOMObject.displayViewInfo = function(e){
     
-    if (Data.markers.length==0){
+    if (Data.markers.length==0||!SETTINGS.markinfo){
         ui_hideMessage("window-markinfo");
     }
     
@@ -1219,20 +1219,20 @@ X3DOMObject.displayMarkInfo = function(index){
         
         
         if (!isNaN(d_x3d_float)&&!isNaN(d_map_float)){
-            delta = (d_x3d_float-d_map_float).toFixed(1);
+            delta = (d_map_float-d_x3d_float).toFixed(1);
         }else{
             delta = "-";
         }
         
         
         msg += "<table>";
-        msg += "<tr><th align='left'>d<sub>map</sub></th><td align='left' style='text-align:left;'>"+d_map_msg+"</td></tr>";
-        msg += "<tr><th align='left'>d<sub>3d</sub></th><td align='left' style='text-align:left;'>"+d_x3d_msg+"</td></tr>";
+        msg += "<tr title='drag marker over map to update distance'><th align='left'>d<sub>map</sub></th><td align='left' style='text-align:left;'>"+d_map_msg+"</td></tr>";
+        msg += "<tr title='drag marker over 3d scene to update distance'><th align='left'>d<sub>3d</sub></th><td align='left' style='text-align:left;'>"+d_x3d_msg+"</td></tr>";
         msg += "<tr><th align='center'>&Delta;</th><td align='left' style='text-align:left;'>"+delta+" m</td></tr>";
         msg += "</table>";
     }
     
-    if (hide){
+    if (hide||!SETTINGS.markinfo){
         ui_hideMessage("window-markinfo");
     }else{
         ui_showMessage("window-markinfo",msg);

test.html

@@ -64,6 +64,10 @@
         <div>
             <h2>Settings</h2>
             <table>
+                <tr>
+                    <td>Show marker info (satellite vs 3D model distalnce)</td>
+                    <td><input id='markinfo' type='checkbox' class='my-check-box' /></td>
+                </tr>
                 <tr>
                     <td>Show view info (x, y, z, azimuth, elevation, skew)</td>
                     <td><input id='viewinfo' type='checkbox' class='my-check-box' /></td>
@@ -97,6 +101,16 @@
     <div id='help-content'>
         <div>
             <h2>3D Scene + Map</h2>
+            <h3 style='color:rgba(200,200,255,1);'>Comparing 3D model and Map (satellite imagery) measurements</h3>
+            <ul>
+                <li>Place a marker in the 3D scene near the feature of interest. Drag the marker closer if needed.<br/>This will set the 3D model distance.</li>
+                <li>Drag the corresponding marker over the map to what looks like the feature of interest to set the map distance.<br/>If the <b>show marker info</b> is enabled the distances and the difference will be displayed.</li>
+            </ul>
+            Update measurements:
+            <ul>
+                <li>Map distance - drag marker over map</li>
+                <li>3D model distance - drag marker over 3D scene</li>
+            </ul>
             <h3 style='color:rgba(200,200,255,1);'>Map</h3>
             <table>
             <tr>
@@ -147,7 +161,8 @@
                 </td>
             </tr>
             <tr>
-                <td><b>draggable objects (camera XY)</b></td>
+<!--                 <td><b>draggable objects (camera XY)</b></td> -->
+                <td><b>draggable objects (stick to surfaces)</b></td>
                 <td>
                     <ul>
                         <li>markers only</li>