Merge branch 'master' into 'gulp'

# Conflicts:
#   index.html
#   js/ui_init.js
#   js/x3dom_init.js
#   test.html

js/index.css

- 
+
 table{
     border-collapse:collapse;
 }

js/index.js

@@ -6,28 +6,28 @@ var markers = [];
 $(function(){
 
     //init();
-    
+
     init_maps();
-    
+
     $.ajax({
-        
+
         url: "list.php",
         success: function(response){
 
             List = response;
             parse_list(response);
             $(".arow")[0].click();
-            
+
         }
-        
+
     });
-    
+
 });
 
 function parse_list(res){
-    
+
     var index = 0;
-    
+
     $(res).find("model").each(function(){
 
         var row = $("<tr class='arow'>");
@@ -44,60 +44,60 @@ function parse_list(res){
 
         var vlist = "";
         $(this).find("version").each(function(i,v){
-            
+
             var comments = $(this).find("comments").text();
-            
+
             var link_url = "test.html?path="+name+"&ver="+$(this).attr("name");
             var link = "<a title='"+comments+"' href='"+link_url+"'>"+$(this).attr("name")+"</a>,&nbsp;";
-            
+
             vlist += link;
 
         });
-        
+
         vlist = vlist.slice(0,-7);
-        
+
         row.append("<td class='acell' valign='top'><div>"+vlist+"</div></td>");
-        
+
         row.attr("index",index);
-        
+
         register_row_events(row);
-        
+
         $("#model_table").append(row);
-        
+
         //place markers
         $(this).find("Camera").each(function(){
-            
+
             var lat = $(this).find("latitude").text();
             var lng = $(this).find("longitude").text();
-            
+
             if (markers[lat+lng]==undefined){
 
                 var marker = L.marker([lat, lng]).addTo(map);
                 marker.bindPopup(name+": "+vlist,{
                     direction:"top",
                 });
-            
+
                 markers[lat+lng] = marker;
-                
+
             }else{
-                
+
                 console.log(markers[lat+lng]);
-                
+
                 var content = markers[lat+lng]._popup.getContent();
                 markers[lat+lng]._popup.setContent(content+"<br/>"+name+": "+vlist);
 
             }
-            
+
         });
-        
-        
+
+
         index++;
     });
-    
+
 }
 
 function register_row_events(elem){
-    
+
     $(elem).on("click",function(){
 
         $(".arow").css({
@@ -107,30 +107,30 @@ function register_row_events(elem){
         $(this).css({
             background: "rgba(100,200,255,0.7)"
         });
-        
+
         var index = $(this).attr("index");
         var list = $(List).find("model");
         var item = list[index];
-        
+
         var lat = $($(item).find("latitude")[0]).text();
         var lng = $($(item).find("longitude")[0]).text();
-        
+
         map.panTo(new L.LatLng(lat, lng));
-        
+
         if (markers[lat+lng]!=undefined){
             markers[lat+lng].openPopup();
         }
-        
+
     });
-    
+
 }
 
 // maps
 function init_maps(){
-  
+
   // https: also suppported.
   var Esri_WorldImagery = L.tileLayer(
-    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', 
+    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
     {
       maxZoom: 21,
       attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
@@ -145,35 +145,35 @@ function init_maps(){
       subdomains:['mt0','mt1','mt2','mt3'],
     }
   );
-  
-  var OSMTiles = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', 
+
+  var OSMTiles = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
     {
       maxZoom: 21,
       attribution: 'Map data and images &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
     }
   );
-  
+
   map = L.map('leaflet_map',{
     layers:[googleSat],
     zoomControl:false,
   }).setView([40.7233861, -111.9328843], 12);
 
   new L.Control.Zoom({ position: 'topright' }).addTo(map);
-  
+
   var baseMaps = {
     "Esri world imagery": Esri_WorldImagery,
     "Google": googleSat,
     "Open Street Map": OSMTiles
   };
-  
+
   //Esri_WorldImagery.addTo(map);
   //googleSat.addTo(map);
-  
+
   //custom control:
   //http://www.coffeegnome.net/control-button-leaflet/
-  
+
   L.control.layers(baseMaps).addTo(map);
-  
+
 }
 
 

js/leaflet/L.extra.js

@@ -3,27 +3,27 @@
 
     //from here: https://github.com/bbecquet/Leaflet.PolylineDecorator/blob/master/src/L.RotatedMarker.js
     L.DomUtil.TRANSFORM_ORIGIN = L.DomUtil.testProp(['transformOrigin', 'WebkitTransformOrigin', 'OTransformOrigin', 'MozTransformOrigin', 'msTransformOrigin']);
-    
+
     L.LatLng.prototype.CoordinatesOf = function(angle,distance){
-    
+
         var d = distance;
         var a = angle*Math.PI/180;
-        
+
         var lat1 = this.lat*Math.PI/180;
         var lng1 = this.lng*Math.PI/180;
-        
+
         var R = L.CRS.Earth.R;
-        
+
         var lat2 = Math.asin(Math.sin(lat1)*Math.cos(d/R) + Math.cos(lat1)*Math.sin(d/R)*Math.cos(a));
-        
+
         var y = Math.sin(a)*Math.sin(d/R)*Math.cos(lat1);
         var x = Math.cos(d/R)-Math.sin(lat1)*Math.sin(lat2);
-        
+
         var lng2 = lng1 + Math.atan2(y,x);
-        
+
         lat2 = lat2*180/Math.PI;
         lng2 = lng2*180/Math.PI;
-        
+
         return new L.LatLng(lat2,lng2);
 
     }

js/leaflet/leaflet.camera-view-marker-controls.js

- 
+
 (function (window, document, undefined) {
     "use strict";
-    
+
     L.Control.CameraViewMarkerControls = L.Control.extend({
-        
+
         onAdd: function(map){
-            
+
             var name = "leaflet-control-heel";
-            
+
             var div = L.DomUtil.create('div', name+' leaflet-bar');
 
             L.DomEvent.disableClickPropagation(div);
-            
+
             var title = "Altitude and Elevation control mode";
-            
+
             var label = "&#8645";
             //var label = "+";
             //var label = "&#54629";
-            
+
             var a = L.DomUtil.create('a','leaflet-control-zoom-in leaflet-interactive');
-            
+
             a.innerHTML = label;
             a.title = title;
-            
+
             this._div = div;
             this._button = a;
             this._state = false;
-            
+
             div.appendChild(a);
 
             this._registerEvents();
 
             return div;
         },
-        
+
         onRemove: function(){
             // Nothing to do here
         },
-        
+
         getState: function(){
             return this._state;
         },
-        
+
         _registerEvents: function(){
-            
+
             var self = this;
-            
+
             L.DomEvent.on(this._button, 'click', function(){
                 self._state = !self._state;
                 self._buttonColor();
             }, this._button);
-            
+
         },
-        
+
         _buttonColor: function(){
-            
+
             if (this._state){
                 this._button.style.backgroundColor = "rgba(136,255,136,1)";
             }else{
                 this._button.removeAttribute("style");
             }
-            
+
         }
-        
+
     });
-    
+
     L.control.cameraViewMarkerControls = function (options) {
         return new L.Control.CameraViewMarkerControls(options);
     };
-    
+
 }(this,document));
\ No newline at end of file

js/leaflet/leaflet.camera-view-marker.js

@@ -9,16 +9,16 @@
   https://www.elphel.com
 
 */
-/** 
+/**
  * @file leaflet.camera-view-marker.js
  * @brief A Leaflet plugin that adds camera view marker:
  *        Displays:
  *          * Some marker with basic interactions for position and orientation
- * 
+ *
  * @copyright Copyright (C) 2017 Elphel Inc.
  * @author Oleg Dzhimiev <oleg@elphel.com>
  *
- * @licstart  The following is the entire license notice for the 
+ * @licstart  The following is the entire license notice for the
  * JavaScript code in this page.
  *
  *   The JavaScript code in this page is free software: you can
@@ -52,7 +52,7 @@
      * Leaflet.CameraViewMarker assumes that you have already included the Leaflet library.
      */
 
-    //CircleMarker has everything one need    
+    //CircleMarker has everything one need
     L.CameraViewMarker = L.CircleMarker.extend({
 
         options:{
@@ -66,7 +66,7 @@
             draw_xz: true,
             draw_fov: true,
             h_control: false,
-            
+
             basepoint:{
                 url: ""
             }
@@ -76,11 +76,11 @@
 
             var hecs = this.getHCState();
             var angle = param;
-            
+
             if (param.target){
                 param = param.latlng;
             }
-            
+
             if (param instanceof L.LatLng) {
 
                 var p0 = this._map.latLngToLayerPoint(this._latlng);
@@ -92,30 +92,30 @@
                 angle = (180/Math.PI*Math.atan2(dx,dy)+360)%360;
 
                 if (hecs){
-                    
+
                     var l = this._axis_length;
                     var l_h = l*2.5/2;
                     var p_base_ll = this._latlng;
                     var p_base = this._map.latLngToLayerPoint(p_base_ll);
-                    
+
                     var p1 = new L.Point(p_base.x+l_h*Math.sin(this._heading),p_base.y-l_h*Math.cos(this._heading));
                     var p2 = this._map.latLngToLayerPoint(param);
-                    
+
                     var dy = (p1.y - p2.y) - this._altitude*10;
-                    
+
                     this._elevation = Math.atan2(dy,l_h);
-                    
+
                     angle = (this._heading)*180/Math.PI;
                 }
-                
+
             }
-                        
+
             if (this._units=="deg"){
                 this._heading = angle*(Math.PI/180);
             }else{
                 this._heading = angle;
             }
-            
+
             this._updateCameraViewMarker();
 
         },
@@ -127,19 +127,19 @@
 
             if (param.target){
                 latlng = param.latlng;
-                
+
                 if (hecs){
-                    
+
                     var p1_ll = this._latlng;
                     var p2_ll = latlng;
-                    
+
                     var p1 = this._map.latLngToLayerPoint(p1_ll);
                     var p2 = this._map.latLngToLayerPoint(p2_ll);
-                    
+
                     p2.x = p1.x;
 
                     this._altitude = (p1.y - p2.y)/10;
-                    
+
                     latlng = this._latlng;
                 }
             }
@@ -150,26 +150,26 @@
         },
 
         setAltitude: function(param){
-            
+
             this._altitude = param;
             this._updateCameraViewMarker();
-            
+
         },
 
         setElevation: function(param){
-            
+
             this._elevation = param;
             this._updateCameraViewMarker();
-            
+
         },
-        
+
         setFoV: function(param){
-            
+
             this._fov = param;
             this._updateCameraViewMarker();
-            
+
         },
-        
+
         //initialize is most likely performed by L.CircleMarker
 
         //this is some default function rewritten
@@ -177,28 +177,28 @@
 
             this._initCameraViewMarker();
 
-        },        
-        
+        },
+
         _initCameraViewMarker: function(){
 
             //constants
             this._axis_length = 100;
             this._radius = 10;
-            
+
             this._heading = this.options.heading;
             this._units = this.options.units;
-            
+
             this._fov = this.options.fov;
-            
+
             this._draw_xz = this.options.draw_xz;
             this._draw_fov = this.options.draw_fov;
-            
+
             this._READY = false;
-            
+
             if(!this._layerPaint){
                 this._layerPaint = L.layerGroup().addTo(this._map);
             }
-            
+
             this._controls = {
                 hc:{
                     getState: function(){return false;}
@@ -206,11 +206,11 @@
             };
 
             this.h_control = false;
-            
+
             if (typeof L.control.cameraViewMarkerControls == 'function'){
                 this.h_control = this.options.h_control;
             }
-            
+
             if (this.h_control){
                 this._altitude = this.options.altitude;
                 this._elevation = this.options.elevation*Math.PI/180;
@@ -222,84 +222,84 @@
 
             this.setHeading(this._heading);
             this._registerEvents();
-            
+
         },
-        
+
         _updateCameraViewMarker: function(){
-            
+
             // this.h_control & this._altitude
-            
+
             if (this.h_control){
                 this._updateCameraViewMarker_hc();
             }else{
                 this._updateCameraViewMarker_nohc();
             }
-            
+
         },
-        
+
         _updateCameraViewMarker_hc: function(){
 
             this._updateCameraViewMarker_nohc();
-            
+
         },
-        
+
         _updateCameraViewMarker_nohc: function(){
 
             var hecs = this.getHCState();
-            
+
             var l = this._axis_length;
             var l_h = l*2.5/2;
-            
+
             var p_base_ll = this._latlng;
             var p_base = this._map.latLngToLayerPoint(p_base_ll);
-            
+
             var p_head = new L.Point(p_base.x+l_h*Math.sin(this._heading),p_base.y-l_h*Math.cos(this._heading));
             var p_x    = new L.Point(p_base.x+l*Math.cos(this._heading),p_base.y+l*Math.sin(this._heading));
-            var p_z    = new L.Point(p_base.x-l*Math.sin(this._heading),p_base.y+l*Math.cos(this._heading));        
+            var p_z    = new L.Point(p_base.x-l*Math.sin(this._heading),p_base.y+l*Math.cos(this._heading));
 
             var p_fov_l = new L.Point(p_base.x+l*Math.sin(this._heading-this._fov/2),p_base.y-l*Math.cos(this._heading-this._fov/2));
             var p_fov_r = new L.Point(p_base.x+l*Math.sin(this._heading+this._fov/2),p_base.y-l*Math.cos(this._heading+this._fov/2));
-            
+
             var p_head_ll = this._map.layerPointToLatLng(p_head);
             var p_x_ll    = this._map.layerPointToLatLng(p_x);
             // y axis adds to right handed coordinate system
             var p_z_ll    = this._map.layerPointToLatLng(p_z);
-            
+
             var p_fov_l_ll = this._map.layerPointToLatLng(p_fov_l);
             var p_fov_r_ll = this._map.layerPointToLatLng(p_fov_r);
-        
+
             var l_head = Array(p_base_ll,p_head_ll);
             var l_x    = Array(p_base_ll,p_x_ll);
             var l_z    = Array(p_base_ll,p_z_ll);
-        
+
             var l_fov_l = Array(p_base_ll,p_fov_l_ll);
             var l_fov_r = Array(p_base_ll,p_fov_r_ll);
-            
+
             // BEGIN HECS
-            
+
             //base
             var p_base_cap = new L.Point(p_base.x,p_base.y-10*this._altitude);
             var p_base_cap_ll = this._map.layerPointToLatLng(p_base_cap);
-            
+
             var p_base_cap_t = new L.Point(p_base.x,p_base.y-100);
             var p_base_cap_t_ll = this._map.layerPointToLatLng(p_base_cap_t);
 
             var p_base_cap_b = new L.Point(p_base.x,p_base.y+100);
             var p_base_cap_b_ll = this._map.layerPointToLatLng(p_base_cap_b);
-            
+
             var p_base_cap_l = new L.Point(p_base.x-50/2,p_base.y);
             var p_base_cap_l_ll = this._map.layerPointToLatLng(p_base_cap_l);
-            
+
             var p_base_cap_r = new L.Point(p_base.x+50/2,p_base.y);
             var p_base_cap_r_ll = this._map.layerPointToLatLng(p_base_cap_r);
-            
+
             var l_base_cap_tb = Array(p_base_cap_t_ll,p_base_cap_b_ll);
             var l_base_cap_lr = Array(p_base_cap_l_ll,p_base_cap_r_ll);
 
             //head
             var p_head_cap = new L.Point(p_head.x,p_head.y-10*this._altitude-l_h*Math.tan(this._elevation));
             var p_head_cap_ll = this._map.layerPointToLatLng(p_head_cap);
-            
+
             var p_head_cap_t = new L.Point(p_head.x,p_head.y-100);
             var p_head_cap_t_ll = this._map.layerPointToLatLng(p_head_cap_t);
 
@@ -308,17 +308,17 @@
 
             var p_head_cap_l = new L.Point(p_head.x-50/2,p_head.y);
             var p_head_cap_l_ll = this._map.layerPointToLatLng(p_head_cap_l);
-            
+
             var p_head_cap_r = new L.Point(p_head.x+50/2,p_head.y);
             var p_head_cap_r_ll = this._map.layerPointToLatLng(p_head_cap_r);
-            
+
             var l_head_cap_tb = Array(p_head_cap_t_ll,p_head_cap_b_ll);
             var l_head_cap_lr = Array(p_head_cap_l_ll,p_head_cap_r_ll);
-            
+
             // END
-            
+
             if (!this._READY){
-                
+
                 var cBIcon = L.icon({
                     iconUrl: 'js/images/base.png',
                     iconSize: [32, 46],
@@ -326,46 +326,46 @@
                     //iconSize: [64, 92],
                     className: 'basePointIcon'
                 });
-                
+
                 this._basePoint = new L.marker(p_base_ll,{
                     icon: cBIcon
                 });
-                
+
                 this._basePoint = new L.CircleMarker(p_base_ll,{
                     color: '#191',
                     fillColor: '#0f3',
                     fillOpacity: 0.5,
                     radius: this._radius
                 });
-                
+
                 //this._basePoint._icon.style[L.DomUtil.TRANSFORM_ORIGIN] = "50% 50%";
                 //this._basePoint._icon.style[L.DomUtil.TRANSFORM] += 'rotate(' + (this._heading*180/Math.PI) + 'deg)';
-                
+
                 this._headLine = L.polyline(l_head, {color: 'white', weight:2, dashArray:"5,10"}).addTo(this._layerPaint);
-                
+
                 if (this._draw_xz){
                     this._xAxis = L.polyline(l_x, {color: 'red', weight:2 }).addTo(this._layerPaint);
                     this._zAxis = L.polyline(l_z, {color: 'blue', weight:2 }).addTo(this._layerPaint);
                 }
-                
+
                 if (this._draw_fov){
                     this._lFov = L.polyline(l_fov_l, {color: '#0f3', weight:2 }).addTo(this._layerPaint);
                     this._rFov = L.polyline(l_fov_r, {color: '#0f3', weight:2 }).addTo(this._layerPaint);
                 }
 
                 //draw fov lines here
-                
+
                 this._basePoint.addTo(this._layerPaint).bringToFront();
-                
+
                 var cHIcon = L.icon({
                     iconUrl: 'js/leaflet/images/crosshair.png',
                     iconSize: [32, 32]
                 });
-                
+
                 this._headPoint = new L.marker(p_head_ll,{
                     icon: cHIcon
                 });
-                
+
                 /*
                 this._headPoint = new L.CircleMarker(p_head_ll,{
                     color: 'white',
@@ -374,22 +374,22 @@
                     radius: this._radius
                 });
                 */
-                
+
                 this._headPoint.addTo(this._layerPaint);
-                
+
                 this._READY = true;
-          
+
             }else{
-                
+
                 this._headLine.setLatLngs(l_head);
-                
+
                 if (this._draw_xz){
                     this._xAxis.setLatLngs(l_x);
                     this._zAxis.setLatLngs(l_z);
                 }
-                
+
                 if (this._draw_fov){
-                    
+
                     if (this._lFov){
                         this._lFov.setLatLngs(l_fov_l);
                         this._rFov.setLatLngs(l_fov_r);
@@ -398,10 +398,10 @@
                         this._rFov = L.polyline(l_fov_r, {color: '#0f3', weight:2 }).addTo(this._layerPaint);
                     }
                 }
-                
+
                 this._basePoint.setLatLng(p_base_ll);
                 this._headPoint.setLatLng(p_head_ll);
-                
+
                 if (this._baseCapLineV){
                     this._layerPaint.removeLayer(this._baseCapLineV);
                     this._layerPaint.removeLayer(this._headCapLineV);
@@ -414,47 +414,47 @@
                     this._basePoint.unbindTooltip();
                     this._headPoint.unbindTooltip();
                 }
-                
+
                 if (hecs){
-                    
+
                     this._basePoint.bindTooltip("H= "+this._altitude+" m",{
                         direction:"right",
                         permanent:"true",
                         className: "measurementtooltip",
                         offset:[5,5],
                     }).openTooltip();
-                    
+
                     this._headPoint.bindTooltip("&alpha;= "+((180/Math.PI*this._elevation).toFixed(1))+" &deg;",{
                         direction:"right",
                         permanent:"true",
                         className: "measurementtooltip",
-                        offset:[5,5],                        
+                        offset:[5,5],
                     }).openTooltip();
-                    
+
                     this._layerPaint.removeLayer(this._lFov);
                     this._layerPaint.removeLayer(this._rFov);
                     this._lFov = false;
                     this._rFov = false;
-                    
+
                     this._basePoint.setLatLng(p_base_cap_ll);
                     this._headPoint.setLatLng(p_head_cap_ll);
-                    
+
                     this._baseCapLineV = L.polyline(l_base_cap_tb, {color: '#0f3', weight:2, dashArray:"1,3"}).addTo(this._layerPaint).bringToBack();
                     this._headCapLineV = L.polyline(l_head_cap_tb, {color: '#0f3', weight:2, dashArray:"1,3"}).addTo(this._layerPaint).bringToBack();
                     this._baseCapLineH = L.polyline(l_base_cap_lr, {color: '#0f3', weight:2, dashArray:"1,3"}).addTo(this._layerPaint).bringToBack();
                     this._headCapLineH = L.polyline(l_head_cap_lr, {color: '#0f3', weight:2, dashArray:"1,3"}).addTo(this._layerPaint).bringToBack();
                 }
-                
+
                 //this._basePoint._icon.style[L.DomUtil.TRANSFORM] += 'rotate(' + (this._heading*180/Math.PI) + 'deg)';
 
             }
-        
+
         },
-        
+
         _registerEvents: function(){
 
             this._map.on('zoomend',this._onZoomEnd,this);
-            
+
             this._basePoint.on('mousedown',this._dragCameraViewMarker,this);
             this._headPoint.on('mousedown',this._rotateCameraViewMarker,this);
 
@@ -464,26 +464,26 @@
 
             // from some plugin - I didn't test if it's true
             // necassary for _dragCircle. If switched on already within _dragCircle an unwanted click is fired at the end of the drag.
-            this._map.on('click',this._mouseClick,this);  
+            this._map.on('click',this._mouseClick,this);
 
         },
-      
+
         _mouseClick: function(e){
 
             this._headPoint.on('mousedown',this._rotateCameraViewMarker,this);
-            
+
         },
-      
+
         _rotateCameraViewMarker: function(e){
-        
+
             this._map.dragging.disable();
-            
+
             this._map.off('mousemove',this._mouseMove,this);
             this._map.off('click',this._mouseClick,this);
 
             this._map.on('mousemove',this.setHeading,this);
             this._map.on('mouseup',this._mouseUp,this);
-            
+
             // prevent image getting grabbed by browser
             e.originalEvent.preventDefault();
 
@@ -510,9 +510,9 @@
             this._map.off('click',this._mouseClick,this);
 
             this._map.on('mousemove',this.setBasePoint,this);
-            
+
             this._map.on('mouseup',this._mouseUp,this);
-            
+
             // prevent image getting grabbed by browser
             e.originalEvent.preventDefault();
 
@@ -521,32 +521,32 @@
         _onZoomEnd: function(e){
             this._updateCameraViewMarker();
         },
-      
+
         // height controls
         _initHControl: function(){
 
             var self = this;
-            
+
             this._controls.hc = L.control.cameraViewMarkerControls({position:'topleft'}).addTo(this._map);
-            
+
             var btn = this._controls.hc._button;
-            
+
             L.DomEvent.on(btn, 'click', function(){
                 self._updateCameraViewMarker();
             },btn);
-            
+
         },
-      
+
         getHCState: function(){
-            
+
             return this._controls.hc.getState() || this.hcontrol;
 
         }
-      
+
     });
 
     L.cameraViewMarker = function (latlng,options) {
         return new L.CameraViewMarker(latlng,options);
     };
-    
+
 }(this,document));

js/leaflet/leaflet.camera-view-marker.measure.js

@@ -9,14 +9,14 @@
   https://www.elphel.com
 
 */
-/** 
+/**
  * @file leaflet.camera-view-marker.measure.js
  * @brief extends Leaflet.CameraViewMarker with distance measuring tool
- * 
+ *
  * @copyright Copyright (C) 2017 Elphel Inc.
  * @author Oleg Dzhimiev <oleg@elphel.com>
  *
- * @licstart  The following is the entire license notice for the 
+ * @licstart  The following is the entire license notice for the
  * JavaScript code in this page.
  *
  *   The JavaScript code in this page is free software: you can
@@ -50,30 +50,30 @@
     L.CameraViewMarker.include({
 
         createMeasureMarker: function(param,distance){
-            
+
             var latlng = param;
-            
+
             // param is event
             if(param.target){
                 latlng = param.latlng;
             }
-            
+
             var p1_ll = this._latlng;
 
             // param was angle then need distance
             if (!(latlng instanceof L.LatLng)){
                 latlng = p1_ll.CoordinatesOf(param,distance);
             }
-            
+
             var p2_ll = latlng;
             var l_d = Array(p1_ll,p2_ll);
-            
+
             var pll = L.polyline(l_d, {
-                    color: '#1f1', 
-                    weight:1, 
+                    color: '#1f1',
+                    weight:1,
                     dashArray:"5,5"
                 }).addTo(this._layerPaint).bringToBack();
-                
+
             //circle
             var tmp_point = new L.CircleMarker(latlng,{
                 color: '#1f1',
@@ -82,82 +82,82 @@
                 fillOpacity: 0.5,
                 radius: 5,
             }).addTo(this._layerPaint);
-        
+
             var distance = latlng.distanceTo(this._latlng).toFixed(1);
-        
+
             tmp_point.bindTooltip(distance+' m',{
                 permanent:"true",
                 direction:"right",
                 className: "measurementtooltip",
                 offset:[0,0],
             }).openTooltip();
-        
+
             tmp_point.on('click',this._measureMarkerClick,this);
             tmp_point.on('mousedown',this._dragMeasureMarker,this);
             tmp_point._index = this._measureMarkers.length;
-        
+
             this._measureMarkers.push(tmp_point);
             this._measureLines.push(pll);
-            
+
             return tmp_point._index;
 
         },
-        
+
         moveMeasureMarker: function(param,index){
-            
+
             var latlng = param;
-            
+
             if (param.target){
                 index = this.draggedMarker._index;
                 latlng = param.latlng;
-                
+
                 // prevent image getting grabbed by browser
                 param.originalEvent.preventDefault();
             }
-            
+
             var p1_ll = this._latlng;
             var p2_ll = latlng;
             var l_d = Array(p1_ll,p2_ll);
-            
+
             this._measureMarkers[index].setLatLng(latlng);
             this._measureLines[index].setLatLngs(l_d);
-                        
+
             var distance = p2_ll.distanceTo(p1_ll).toFixed(1);
             this._measureMarkers[index]._tooltip.setContent(distance+' m');
-            
+
             this.draggedMarker = {
                 _index: index,
                 _latlng: latlng
             };
-            
+
             this._syncMeasureMarkersToBasePoint();
-            
+
         },
-      
+
         removeMeasureMarker: function(param){
-            
+
             var index = param;
-            
+
             if(param.target){
                 index = param.target._index;
                 L.DomEvent.stopPropagation(param);
             }
-            
+
             this._layerPaint.removeLayer(this._measureMarkers[index]);
             this._layerPaint.removeLayer(this._measureLines[index]);
-            
+
             this._measureMarkers.splice(index,1);
             this._measureLines.splice(index,1);
-            
+
             this._updateMeasureMarkersIndices();
-            
+
         },
 
         placeSlidingMarker: function(angle,distance){
-          
+
             var p1_ll = this._measureBase;
             var p2_ll = p1_ll.CoordinatesOf(angle,distance);
-            
+
             var l_d = Array(p1_ll,p2_ll);
 
             if (this._slidingMarker == undefined){
@@ -168,43 +168,43 @@
                     fillOpacity: 0.5,
                     radius: 5,
                 }).addTo(this._layerPaint);
-                
+
                 this._slidingLine = L.polyline(l_d, {
-                    color: '#1f1', 
-                    weight:1, 
+                    color: '#1f1',
+                    weight:1,
                     dashArray:"5,5"
                 }).addTo(this._layerPaint).bringToBack();
-                
+
                 this._slidingMarker.bindTooltip(distance.toFixed(1)+' m',{
                     permanent:"true",
                     direction:"right",
                     className: "measurementtooltip",
                     offset:[0,0],
                 }).openTooltip();
-                
+
             }else{
-                
+
                 this._slidingMarker.setLatLng(p2_ll);
                 this._slidingLine.setLatLngs(l_d);
                 this._slidingMarker._tooltip.setContent(distance.toFixed(1)+' m');
 
             }
-            
+
         },
-        
+
         removeSlidingMarker: function(){
-            
+
             if (this._slidingMarker != undefined){
-            
+
                 this._layerPaint.removeLayer(this._slidingMarker);
                 this._layerPaint.removeLayer(this._slidingLine);
                 delete this._slidingMarker;
                 delete this._slidingLine;
-            
+
             }
-            
+
         },
-        
+
         onAdd: function(){
 
             this._initCameraViewMarker();
@@ -213,18 +213,18 @@
         },
 
         _initCVM_M: function(){
-            
+
             this._measuring = false;
-            
+
             this._measureMarkers = Array();
             this._measureLines = Array();
-            
+
             this._map.doubleClickZoom.disable();
-            
+
             this._registerEvents_M();
-            
+
             this._measureBase = this._latlng;
-            
+
             this.draggedMarker = {
                 _index: null,
                 _latlng: null
@@ -238,7 +238,7 @@
             this._map.on('mousemove',this._mouseMove_M,this);
             this._map.on('click', this._toggleMeasureMode, this);
             this._map.on('mousemove',this._syncMeasureMarkersToBasePoint, this);
-            
+
         },
 
         _mouseMove_M: function(e){
@@ -250,22 +250,22 @@
             }
 
         },
-        
+
         _toggleMeasureMode: function(e){
-        
+
             if (e.originalEvent.ctrlKey){
                 this.createMeasureMarker(e);
             }
-        
+
             /*
             self._measuring = !self._measuring;
-            
+
             if(self._measuring){
             self._basePoint.off('mousedown',self._dragCamera, self);
             self._map._container.style.cursor = "crosshair";
-            
+
             self._map.on('click', self._placeMeasurePoint, self);
-            
+
             }else{
             self._basePoint.on('mousedown',self._dragCamera, self);
             self._map._container.style.cursor = "default";
@@ -273,7 +273,7 @@
             }
             */
         },
-      
+
         _measureMarkerClick:function(e){
 
             if (e.originalEvent.ctrlKey){
@@ -281,22 +281,22 @@
             }
 
         },
-              
+
         _syncMeasureMarkersToBasePoint: function(e){
 
             if (this._measureMarkers.length!=0){
                 if (this._measureBase!=this._latlng){
-                    
+
                     var self = this;
-                    
+
                     this._measureMarkers.forEach(function(c,i){
-                        
+
                         var p1_ll = self._latlng;
                         var p2_ll = c.getLatLng();
                         var l_d = Array(p1_ll,p2_ll);
-                    
+
                         self._measureLines[i].setLatLngs(l_d);
-                    
+
                         var distance = p2_ll.distanceTo(p1_ll).toFixed(1);
                         c._tooltip.setContent(distance+' m');
                     });
@@ -304,54 +304,54 @@
                     this._measureBase=this._latlng;
                 }
             }
-            
+
         },
-      
+
         _dragMeasureMarker: function(e){
 
             if (!e.originalEvent.ctrlKey){
-            
+
                 this.draggedMarker = {
                     _index: e.target._index,
                     _latlng: e.target._latlng
                 };
-                
+
                 this._map.dragging.disable();
 
                 this._map.off('mousemove',this._mouseMove,this);
                 this._map.off('click',this._mouseClick,this);
-                
+
                 this._map.on('mousemove',this.moveMeasureMarker,this);
-                
+
                 this._map.on ('mouseup',this._mouseUp_M,this);
             }
-            
+
         },
-      
+
         _mouseUp_M: function(){
-            
+
             this._map.off('mousemove',this.moveMeasureMarker,this);
-            
+
             this._map.dragging.enable();
-            
+
             this._map.on ('mousemove',this._mouseMove,this);
-            
+
             this._map.off ('mouseup',this._mouseUp_M,this);
-            
+
             this.draggedMarker._index = null;
-            
+
         },
-      
+
         _updateMeasureMarkersIndices:function(){
-            
+
             var self = this;
-            
+
             this._measureMarkers.forEach(function(c,i){
                 self._measureMarkers[i]._index = i;
             });
 
         },
-      
+
     });
-    
+
 }(this,document));

js/leaflet_init.js

@@ -7,14 +7,14 @@
   https://www.elphel.com
 
 */
-/** 
+/**
  * @file -
  * @brief -
- * 
+ *
  * @copyright Copyright (C) 2017 Elphel Inc.
  * @author Oleg Dzhimiev <oleg@elphel.com>
  *
- * @licstart  The following is the entire license notice for the 
+ * @licstart  The following is the entire license notice for the
  * JavaScript code in this page.
  *
  *   The JavaScript code in this page is free software: you can
@@ -51,25 +51,25 @@ var LeafletObject = function(id,data,options){
     };
 
     this._settings = $.extend(defaults,options);
-        
+
     this._id = id;
     //[40.7233861, -111.9328843];
     this.center = [data.camera.latitude,data.camera.longitude];
-    
+
     this.heading = data.camera.heading;
     //this.heading = 0;//data.camera.heading;
 
     this.fov = data.camera.fov;
-    
+
     this.initialize();
-    
+
 };
 
 LeafletObject.prototype.initialize = function(){
 
   // https: also suppported.
   var Esri_WorldImagery = L.tileLayer(
-    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', 
+    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
     {
       maxZoom: this._settings.maxzoom,
       attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
@@ -84,14 +84,14 @@ LeafletObject.prototype.initialize = function(){
       subdomains:['mt0','mt1','mt2','mt3'],
     }
   );
-  
-  var OSMTiles = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', 
+
+  var OSMTiles = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
     {
       maxZoom: this._settings.maxzoom,
       attribution: 'Map data and images &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
     }
   );
-  
+
   this._map = L.map(this._id,{
     layers:[googleSat]
   }).setView(this.center, this._settings.zoom);
@@ -103,13 +103,13 @@ LeafletObject.prototype.initialize = function(){
   };
 
   L.control.layers(baseMaps).addTo(this._map);
- 
+
   this.drawCamera();
-    
+
 }
 
 LeafletObject.prototype.drawCamera = function(){
-    
+
     this.marker = L.cameraViewMarker(this.center, {
         color: '#191',
         fillColor: '#0f3',
@@ -121,7 +121,7 @@ LeafletObject.prototype.drawCamera = function(){
         h_control: true,
         id: "basecircle"
     }).addTo(this._map);
-    
+
 }
 
 LeafletObject.prototype.highlightMarker = function(index){
@@ -131,13 +131,13 @@ LeafletObject.prototype.highlightMarker = function(index){
     this.marker._measureMarkers[index].setStyle(style).bringToFront();
     this.marker._measureMarkers[index]._tooltip.bringToFront();
     this.marker._measureLines[index].setStyle(style).bringToFront();
-    
+
 }
 
 LeafletObject.prototype.dehighlightMarker = function(index){
 
     color = Data.markers[index].color;
-    
+
     var style = {color:color,fillColor:color};
 
     this.marker._measureMarkers[index].setStyle(style);
@@ -148,15 +148,15 @@ LeafletObject.prototype.dehighlightMarker = function(index){
 LeafletObject.prototype.toggleMarker = function(index){
 
     //console.log("Toggling "+index);
-    
+
     if (!this.marker._measureMarkers[index]._selected){
         this.marker._measureMarkers[index]._selected = true;
     }else{
         this.marker._measureMarkers[index]._selected = false;
     }
-    
+
     //console.log(this.marker._measureMarkers[index]._selected);
-    
+
 }
 
 LeafletObject.prototype.deleteMarker = function(index){

js/map.css

@@ -15,7 +15,7 @@ html, body, #leaflet_map {
   border-radius: 1px;
   font-size: 16px;
   display:block;
-  
+
   position:absolute;
   top: 16px;
   left: 3px;

js/map.js

-/* 
+/*
  * TODO:
- *    * 
- * 
+ *    *
+ *
  */
 
 // http://stackoverflow.com/questions/9394190/leaflet-map-api-with-google-satellite-layer
@@ -14,7 +14,7 @@ $(function(){
 });
 
 function light_init(){
-  
+
   $.ajax({
     url: "kml/test.kml",
     success: function(data){
@@ -23,15 +23,15 @@ function light_init(){
         parseFloat($(data).find("Camera").find("latitude").text()),
         parseFloat($(data).find("Camera").find("longitude").text())
       ];
-      
+
       var heading = parseFloat($(data).find("Camera").find("longitude").text());
-      
+
       init_maps(marker);
 
     },
   });
-  
-  
+
+
 }
 
 var map;
@@ -40,10 +40,10 @@ var markers = Array();
 function init_maps(center){
 
   var elphelinc = center;//[40.7233861, -111.9328843];
-  
+
   // https: also suppported.
   var Esri_WorldImagery = L.tileLayer(
-    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', 
+    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
     {
       maxZoom: 21,
       attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
@@ -58,14 +58,14 @@ function init_maps(center){
       subdomains:['mt0','mt1','mt2','mt3'],
     }
   );
-  
-  var OSMTiles = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', 
+
+  var OSMTiles = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
     {
       maxZoom: 21,
       attribution: 'Map data and images &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
     }
   );
-  
+
   map = L.map('leaflet_map',{
     layers:[googleSat]
   }).setView(elphelinc, 17);
@@ -75,21 +75,21 @@ function init_maps(center){
     "Google": googleSat,
     "Open Street Map": OSMTiles
   };
-  
+
   //Esri_WorldImagery.addTo(map);
   //googleSat.addTo(map);
-  
+
   //custom control:
   //http://www.coffeegnome.net/control-button-leaflet/
-  
+
   L.control.layers(baseMaps).addTo(map);
- 
+
   drawCamera(elphelinc);
-  
+
 }
 
 function drawCamera(basepoint){
-  
+
   var circle = L.cameraViewMarker(basepoint, {
       color: '#191',
       fillColor: '#0f3',

js/nomap_init.js

@@ -16,43 +16,43 @@ function parseURL(){
 }
 
 $(function(){
-    
+
     parseURL();
     init();
-    
+
 });
 
 function init(){
-    
+
     init_resize();
-    
+
     var x3delement = $("#x3d_id").find("scene");
-    
+
     var model_url = SETTINGS.basepath+"/"+SETTINGS.path+"/"+SETTINGS.version+"/"+SETTINGS.path+".x3d";
-    
+
     console.log(model_url);
-    
+
     var model = $(`
     <group>
         <inline name='mymodel' namespacename='mymodel' url='`+model_url+`'></inline>
     </group>`);
-    
+
     x3delement.append(model);
-    
+
     $.getScript("js/x3dom/x3dom-full.debug.js",function(){
         //wait until it DOM is extended
         x3dom.runtime.ready = function(){
             deep_init();
         };
     });
-    
+
 }
 
 var resizeTimer = false;
 var FOV = 30*Math.PI/180;
 
 function init_resize(){
-    
+
     resize();
 
     //bind resize
@@ -62,40 +62,40 @@ function init_resize(){
             resize();
         },100);
     });
-    
+
 }
 
 function resize(){
 
     var element = document.getElementById('x3d_id');
-    
+
     var w = $(window).width();
     var h = $(window).height();
 
     $(element).attr("width",w);
     $(element).attr("height",h);
-    
+
     var fov = w/h*FOV;
-    
+
     //fov = Math.PI/2;
-    
+
     setFoV(fov);
-    
+
 }
 
 function setFoV(val){
-    
+
     var element = document.getElementById('x3d_id');
-    
+
     var vp = $(element).find("Viewpoint")[0];
     $(vp).prop("fieldOfView",val);
-    
+
 }
 
 var X3DOM_SCENE_INIT_DONE = false;
 
 function deep_init(){
-    /*    
+    /*
     var element = document.getElementById('x3d_id');
 
     element.runtime.enterFrame = function(){

js/nomap_vr_init.js

@@ -16,41 +16,41 @@ function parseURL(){
 }
 
 $(function(){
-    
+
     parseURL();
     init();
-    
+
 });
 
 function init(){
-    
+
     init_resize();
-    
+
     var x3delement = $("#x3d_id").find("scene");
-    
+
     var model_url = SETTINGS.basepath+"/"+SETTINGS.path+"/"+SETTINGS.version+"/"+SETTINGS.path+".x3d";
-    
+
     var model = $(`
     <group>
         <inline name='mymodel' namespacename='mymodel' url='`+model_url+`'></inline>
     </group>`);
-    
+
     x3delement.append(model);
-    
+
     $.getScript("js/x3dom/x3dom-full.debug.js",function(){
         //wait until it DOM is extended
         x3dom.runtime.ready = function(){
             deep_init();
         };
     });
-    
+
 }
 
 var resizeTimer = false;
 var FOV = 30*Math.PI/180;
 
 function init_resize(){
-    
+
     resize();
 
     //bind resize
@@ -60,40 +60,40 @@ function init_resize(){
             resize();
         },100);
     });
-    
+
 }
 
 function resize(){
 
     var element = document.getElementById('x3d_id');
-    
+
     var w = $(window).width();
     var h = $(window).height();
 
     $(element).attr("width",w);
     $(element).attr("height",h);
-    
+
     var fov = w/h*FOV;
-    
+
     //fov = Math.PI/2;
-    
+
     setFoV(fov);
-    
+
 }
 
 function setFoV(val){
-    
+
     var element = document.getElementById('x3d_id');
-    
+
     var vp = $(element).find("Viewpoint")[0];
     $(vp).prop("fieldOfView",val);
-    
+
 }
 
 var X3DOM_SCENE_INIT_DONE = false;
 
 function deep_init(){
-    /*    
+    /*
     var element = document.getElementById('x3d_id');
 
     element.runtime.enterFrame = function(){

js/ui.css

 body{
+  user-select: none;
   padding: 0px;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   margin: 0px;
@@ -53,7 +54,7 @@ html, body, #x3d_wrapper {
   border-radius: 1px;
   font-size: 16px;
   display:block;
-  
+
   position:absolute;
   top: 16px;
   left: 3px;
@@ -167,7 +168,7 @@ html, body, #x3d_wrapper {
     background-image:url('images/settings.png');
     background-size: 32px 32px;
     background-repeat: no-repeat;
-    
+
     background-color:white;
     width: 32px;
     height: 32px;
@@ -190,7 +191,7 @@ html, body, #x3d_wrapper {
     background-image:url('images/align.png');
     background-size: 32px 32px;
     background-repeat: no-repeat;
-    
+
     background-color:white;
     width: 32px;
     height: 32px;

js/ui_align.js

 
 function align_init(){
-    
+
     $("#align_button").on("click",function(){
         align_heading();
     });
-    
+
 }
 
 function align_heading(){
-    
+
     // find selected markers
     // pick the first one?
     // align?!
     console.log("heading");
-    
+
     var map_markers = Map.marker._measureMarkers;
     var selected_markers = [];
-    
+
     map_markers.forEach(function(c,i){
         if (selected_markers.length<2){
             if (c._selected){
@@ -24,26 +24,26 @@ function align_heading(){
             }
         }
     });
-    
+
     if (selected_markers.length<2){
         console.log("select 2 markers");
         Scene.showMessage("messagewindow","error: select 2 markers","red");
     }
-    
-    
-    
+
+
+
     console.log(selected_markers);
-    
+
 }
 
 function align_roll(){
-    
+
     console.log("roll");
-    
+
 }
 
 function align_tilt(){
-    
+
     console.log("tilt");
-    
+
 }

js/ui_functions.js

 // general
 
 /*
- * 
+ *
  */
 function ui_showMessage(id,msg,bg){
-    
+
     if (bg != undefined){
         $("#"+id).css({background:bg});
     }
-    
+
     $("#"+id).show();
-    
+
     $("#"+id).html($("<div>").html(msg).css({
         padding:"5px 10px"
     })).show();
-    
+
 }
 
 function ui_hideMessage(id){
-    
+
     $("#"+id).hide();
-    
+
 }
 
 // scene (x3dom)

js/ui_help.js

 
 function help_init(){
-    
+
     /*
     var help_content = `
 <div>
@@ -16,11 +16,11 @@ function help_init(){
         display:"none"
     }).html(help_content);
     */
-    
+
     var help = $("#help-content");
-    
+
     help.hide();
-    
+
     $("#help_button").on("click",function(){
         help.show();
     });
@@ -28,5 +28,5 @@ function help_init(){
     help.on('click',function(){
         help.hide();
     });
-    
+
 }
\ No newline at end of file

js/ui_menu.js

@@ -7,14 +7,14 @@
   https://www.elphel.com
 
 */
-/** 
+/**
  * @file -
  * @brief -
- * 
+ *
  * @copyright Copyright (C) 2017 Elphel Inc.
  * @author Oleg Dzhimiev <oleg@elphel.com>
  *
- * @licstart  The following is the entire license notice for the 
+ * @licstart  The following is the entire license notice for the
  * JavaScript code in this page.
  *
  *   The JavaScript code in this page is free software: you can
@@ -36,7 +36,7 @@
  */
 
 function menu_init(){
-    
+
     // init checkboxes
     for (var setting in SETTINGS){
         if (typeof SETTINGS[setting] === 'boolean'){
@@ -50,29 +50,29 @@ function menu_init(){
             $("#"+setting).val(SETTINGS[setting]);
         }
     }
-    
+
     // init options menu
     var menu = $("#menu-content");
-    
+
     $("#menu_button").on("click",function(){
         menu.show();
     });
-    
+
     // changing a checkbox will not close menu
     menu.on('click',function(e){
         var test = $(e.target).hasClass("donothide");
-        
+
         if (!test){
             menu.hide();
         }
     });
-    
+
     // change checkbox
     $(".my-check-box").on('click',function(e){
-        
+
         var state = $(this).prop("checked");
         var id    = $(this).attr("id");
-        
+
         if (state==true){
             SETTINGS[id] = true;
         }else{
@@ -84,9 +84,9 @@ function menu_init(){
     crosshair_init();
 
     shiftspeed_init();
-    
+
     marker_size_color_init();
-    
+
     reset_view_init();
 }
 
@@ -117,7 +117,7 @@ function shiftspeed_init(){
 }
 
 function marker_size_color_init(){
-    
+
     $('#markersize').on('change',function(e){
         SETTINGS.markersize = $(this).val();
     });
@@ -127,15 +127,15 @@ function marker_size_color_init(){
         SETTINGS.markercolor = $(this).val();
     });
     $('#markercolor').change();
-    
+
 }
 
 function reset_view_init(){
-    
+
     $("#reset_view").on('click',function(){
         x3d_initial_camera_placement();
         x3d_mouseMove();
         Scene.resize();
     });
-    
+
 }
\ No newline at end of file

js/util_functions.js

@@ -3,37 +3,37 @@
  */
 
 function convert_color_x2l(color){
-    
+
     var rgb = color.split(" ");
-    
+
     var r = parseInt(rgb[0]*15);
     var g = parseInt(rgb[1]*15);
     var b = parseInt(rgb[2]*15);
-    
+
     r = r.toString(16);
     g = g.toString(16);
     b = b.toString(16);
-    
+
     return "#"+r+g+b;
-    
+
 }
 
 /*
  * convert #7f7 to '0.5 1.0 0.5'
  */
 function convert_color_l2x(color){
-    
+
     var r = parseInt(color[1],16);
     var g = parseInt(color[2],16);
     var b = parseInt(color[3],16);
-    
+
     r = r/15;
     g = g/15;
     b = b/15;
-    
+
     return r+" "+g+" "+b;
-    
-} 
+
+}
 
 // http://www.movable-type.co.uk/scripts/latlong.html
 // initial bearing
@@ -46,17 +46,17 @@ function getAzimuth2(p1,p2){
 
     //p1 - start point
     //p2 - end point
-    
+
     var dlat = p2.lat-p1.lat;
     var dlon = p2.lng-p1.lng;
 
     var y = Math.sin(dlon)*Math.cos(p2.lat);
     var x = Math.cos(p1.lat)*Math.sin(p2.lat)-Math.sin(p1.lat)*Math.cos(p2.lat)*Math.cos(dlon);
-    
+
     var azimuth = ((2*Math.PI + Math.atan2(y,x))*180/Math.PI) % 360;
-    
+
     return azimuth;
-  
+
 }
 */
 /*
@@ -64,18 +64,18 @@ function getAzimuth2(p1,p2){
  */
 /*
 function getAzimuth(p1_ll,p2_ll){
-    
+
     var Camera = Map.marker;
-    
+
     var p1 = Camera._map.latLngToLayerPoint(p1_ll);
     var p2 = Camera._map.latLngToLayerPoint(p2_ll);
-    
+
     var dx = p2.x - p1.x;
     var dz = p2.y - p1.y;
-    
+
     var azimuth = (180/Math.PI*Math.atan2(dx,-dz)+360)%360;
-    
+
     return azimuth;
-    
+
 }
 */
\ No newline at end of file

js/x3dom/x3dom.css

@@ -18,8 +18,8 @@ X3D, x3d {
   border: 1px solid #000;
 }
 
-X3D:hover, 
-x3d:hover, 
+X3D:hover,
+x3d:hover,
 .x3dom-canvas:hover {
   -webkit-user-select: none;
   -webkit-touch-callout: none;
@@ -41,7 +41,7 @@ x3d:hover,
 }
 
 .x3dom-canvas:focus {
-    outline:none; 
+    outline:none;
 }
 .x3dom-progress {
     margin: 0;
@@ -195,12 +195,12 @@ x3d:hover,
     opacity: 0.75;
 }
 
-.x3dom-nox3d p { 
+.x3dom-nox3d p {
     color: #fff;
     font-size: 14px;
 }
 
-.x3dom-nox3d a { 
+.x3dom-nox3d a {
     color: #fff;
     font-size: 14px;
 }
@@ -208,9 +208,9 @@ x3d:hover,
 
 /* self-clearing floats */
 .group:after {
-  content: "."; 
-  display: block; 
-  height: 0; 
-  clear: both; 
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
   visibility: hidden;
 }

js/x3dom_functions.js

@@ -7,14 +7,14 @@
   https://www.elphel.com
 
 */
-/** 
+/**
  * @file -
  * @brief -
- * 
+ *
  * @copyright Copyright (C) 2017 Elphel Inc.
  * @author Oleg Dzhimiev <oleg@elphel.com>
  *
- * @licstart  The following is the entire license notice for the 
+ * @licstart  The following is the entire license notice for the
  * JavaScript code in this page.
  *
  *   The JavaScript code in this page is free software: you can
@@ -36,19 +36,19 @@
  */
 
 function x3dom_getViewTranslation(elem){
-    
+
     var m = elem.runtime.viewMatrix().inverse();
     var tr = m.e3();
-    
+
     return tr;
-    
+
 }
 
 /**
- * get position and orientation in the 3D scene defined by mouse's canvas x,y 
+ * get position and orientation in the 3D scene defined by mouse's canvas x,y
  */
 function x3dom_getXYPosOr(cnvx,cnvy,round){
-    
+
     var elem = Scene.element;
 
     var x,y,z;
@@ -59,65 +59,65 @@ function x3dom_getXYPosOr(cnvx,cnvy,round){
     var dist_xz = 1000;
 
     var shootRay = elem.runtime.shootRay(cnvx,cnvy);
-    
+
     var valid_distance = true;
-    
+
     if (shootRay.pickPosition != null){
-        
+
         var index = Scene.highlighted_marker_index;
-        
+
         if (index==null){
             if ((Scene.draggedTransformNode!=undefined)&&(Scene.draggedTransformNode!=null)){
                 var sphere = Scene.draggedTransformNode.parent().parent();
                 index = parseInt(sphere.attr("id").substr(7));
             }
         }
-        
+
         if ((index==null)||(Data.markers[index]==undefined)){
-        
+
             x = shootRay.pickPosition.x;
             y = shootRay.pickPosition.y;
             z = shootRay.pickPosition.z;
-        
+
             dist_xz  = Math.sqrt(x*x+z*z);
-            
+
         }else{
-            
+
             x = Data.markers[index].x;
             y = Data.markers[index].y;
             z = Data.markers[index].z;
-        
+
             dist_xz  = Data.markers[index].d_x3d;
             if (isNaN(dist_xz)){
                 dist_xz  = Math.sqrt(x*x+z*z);
             }
         }
-        
+
         dist_xyz = Math.sqrt(y*y+dist_xz*dist_xz);
-        
+
         id = $(shootRay.pickObject).attr("id");
-        
+
     }else{
 
         var viewingRay = elem.runtime.getViewingRay(cnvx,cnvy);
-        
+
         x = viewingRay.dir.x;
         y = viewingRay.dir.y;
         z = viewingRay.dir.z;
-        
+
         dist_xz = null;
         dist_xyz = null;
-        
+
         valid_distance = false;
     }
-    
+
     var R0 = Data.camera.Matrices.R0;
     var p_w = new x3dom.fields.SFVec3f(x,y,z);
     var p_rw = R0.multMatrixVec(p_w);
-    
+
     if (valid_distance){
         dist_xz = Math.sqrt(p_rw.x*p_rw.x+p_rw.z*p_rw.z);
-        dist_xyz = Math.sqrt(p_rw.y*p_rw.y+dist_xz*dist_xz);   
+        dist_xyz = Math.sqrt(p_rw.y*p_rw.y+dist_xz*dist_xz);
     }else{
         dist_xz = null;
         dist_xyz = null;
@@ -127,17 +127,17 @@ function x3dom_getXYPosOr(cnvx,cnvy,round){
     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;
     sk = 0;
-    
+
     var result = {
         x: !round? x : x.toFixed(2),
         y: !round? y : y.toFixed(2),
         z: !round? z : z.toFixed(2),
-        
+
         a: !round? az : az.toFixed(1),
         e: !round? el : el.toFixed(1),
         s: !round? sk : sk.toFixed(1)
     };
-    
+
     if (dist_xz!=null){
         result.d_xz = !round? dist_xz : dist_xz.toFixed(1);
         result.d_xyz = !round? dist_xyz : dist_xyz.toFixed(1);
@@ -145,35 +145,35 @@ function x3dom_getXYPosOr(cnvx,cnvy,round){
         result.d_xz = dist_xz;
         result.d_xyz = dist_xyz;
     }
-    
+
     result.id = id;
     result.index = index;
-    
+
     return result;
 
 }
 
 /**
- * Get position and orientation of the observer (=viewer=camera) 
+ * Get position and orientation of the observer (=viewer=camera)
  * in the 3D scene
  */
 function x3dom_getCameraPosOr(round){
-    
+
     //console.log("Getting PosOr");
-    
+
     var elem = Scene.element;
-    
+
     var m = elem.runtime.viewMatrix().inverse();
-    
+
     var tr = m.e3();
-    
+
     var R0 = Data.camera.Matrices.R0;
-    
+
     //var T0 = x3dom_toYawPitchRoll();
     m = R0.mult(m);
-    
+
     //m = x3dom_TxMxTi(m);
-    
+
     var ypr = x3dom_YawPitchRoll_nc(m);
 
     ypr.yaw = (180/Math.PI*ypr.yaw+360)%360;
@@ -181,7 +181,7 @@ function x3dom_getCameraPosOr(round){
     ypr.roll *= 180/Math.PI;
 
     //x3dom_matrix_test();
-    
+
     if (!round){
         return {
             x: tr.x,
@@ -199,9 +199,9 @@ function x3dom_getCameraPosOr(round){
             a: ypr.yaw.toFixed(1),
             e: ypr.pitch.toFixed(1),
             s: ypr.roll.toFixed(1)
-        };        
+        };
     }
-    
+
 }
 
 // this upright is for world coordinates, not the camera's
@@ -209,17 +209,17 @@ function x3dom_getCameraPosOr(round){
 function x3dom_setUpRight(){
 
     var mat = Scene.element.runtime.viewMatrix().inverse();
-    
+
     var from = mat.e3();
     var at = from.subtract(mat.e2());
     var up = Data.camera.Matrices.Up0;
-    
+
     var s = mat.e2().cross(up).normalize();
-    
+
     var newup = mat.e2().cross(s).normalize().negate();
-    
+
     mat = x3dom.fields.SFMatrix4f.lookAt(from, at, newup);
-    
+
     x3dom_setViewpoint(mat);
 
 }
@@ -228,7 +228,7 @@ function x3dom_setUpRight(){
  * rotation by delta angle around camera's current Up vector
  */
 function x3dom_rotation(dangle){
-    
+
     var mat = Scene.element.runtime.viewMatrix();
 
     mat = mat.inverse();
@@ -236,19 +236,19 @@ function x3dom_rotation(dangle){
     var from = mat.e3();
     var at = from.subtract(mat.e2());
     var up = mat.e1();
-    
+
     var q0 = x3dom.fields.Quaternion.axisAngle(up, -dangle);
     var m0 = q0.toMatrix();
-    
+
     var m1  = x3dom.fields.SFMatrix4f.translation(from);
     var m1n = x3dom.fields.SFMatrix4f.translation(from.negate());
-    
+
     var mres = m1.mult(m0).mult(m1n);
-    
+
     newat = mres.multMatrixPnt(at);
-    
+
     newmat = x3dom.fields.SFMatrix4f.lookAt(from, newat, up);
-        
+
     x3dom_setViewpoint(newmat);
 
 }
@@ -257,41 +257,41 @@ function x3dom_rotation(dangle){
  * translate camera in x3dom space
  */
 function x3dom_translation(dx,dy,dz){
-    
+
     var delta = new x3dom.fields.SFVec3f(dx,dy,dz);
-    
+
     var mat = Scene.element.runtime.viewMatrix().inverse();
 
     var from = mat.e3();
     var at = from.subtract(mat.e2());
     var up = mat.e1();
-    
+
     var newfrom = from.add(delta);
     var newat = newfrom.subtract(mat.e2());
 
     var newmat = x3dom.fields.SFMatrix4f.lookAt(newfrom, newat, up);
 
     x3dom_setViewpoint(newmat);
-    
+
 }
 
 function x3dom_altelev(alt,elev){
-    
+
     //x3dom_matrix_test();
-    
+
     var mat = Scene.element.runtime.viewMatrix().inverse();
     var R0 = Data.camera.Matrices.R0;
-    //var T = x3dom_toYawPitchRoll();    
+    //var T = x3dom_toYawPitchRoll();
     var from = mat.e3();
     from.y = alt;
-    
+
 
     var mat = R0.mult(mat);
     var ypr = x3dom_YawPitchRoll_nc(mat);
     var ypr2 = x3dom_YawPitchRoll_nc_degs(mat);
     //console.log("Check1");
     //console.log(ypr2);
-    
+
     var az = ypr.yaw;
     var el = elev;
     var sk = ypr.roll;
@@ -309,7 +309,7 @@ function x3dom_altelev(alt,elev){
     var ypr2 = x3dom_YawPitchRoll_nc_degs(R_rw);
     //console.log("Check2");
     //console.log(ypr2);
-    
+
     var matt  = x3dom.fields.SFMatrix4f.translation(from);
 
     var newmat = matt.mult(R_w);
@@ -322,16 +322,16 @@ function x3dom_altelev(alt,elev){
  * back and forth conversions for tests
  */
 function x3dom_matrix_test(){
-    
+
     console.log("begin==================================");
-    
+
     var viewpoint = $(Scene.element).find("Viewpoint");
-    
+
     console.log("Viewpoint DOM element");
     console.log("position: "+viewpoint.attr("position"));
     console.log("orientation: "+viewpoint.attr("orientation"));
 
-    /* 
+    /*
      * 1. view matrix:
      *      - from world to camera
      *          - cols - world basis in camera coords
@@ -343,54 +343,54 @@ function x3dom_matrix_test(){
      */
 
     var mat = Scene.element.runtime.viewMatrix();
-    
+
     console.log("1. View Matrix from runtime");
     console.log(mat.toString());
-    
+
     var mat_i = mat.inverse();
-    
+
     console.log("2. Inverted View Matrix");
     console.log(mat_i.toString());
-    
+
     var from = mat_i.e3();
     var at   = from.subtract(mat_i.e2());
     var up   = mat_i.e1();
-    
+
     console.log("3. From-At-Up");
-    
+
     var mat_fau = x3dom.fields.SFMatrix4f.lookAt(from, at, up);
-    
+
     console.log(mat_fau.toString());
-    
+
     var T = x3dom_toYawPitchRoll();
-    
+
     var mat_eul = T.mult(mat_i).mult(T.inverse());
     var eangles = x3dom_YawPitchRoll_degs(mat_eul);
-    
+
     console.log(eangles);
-    
+
     var R = mat;
     var az = Math.atan2(R._02,R._22)*180/Math.PI;
     var el = -Math.asin(R._12)*180/Math.PI;
     var sk = Math.atan2(R._10,R._11)*180/Math.PI;
-    
+
     console.log("Angles:");
     console.log("az="+az+" el="+el+" sk="+sk);
-    
-    
-    console.log("matrix from angles");    
-    
+
+
+    console.log("matrix from angles");
+
     var matx = x3dom.fields.SFMatrix4f.rotationX(el*Math.PI/180);
     var maty = x3dom.fields.SFMatrix4f.rotationY(az*Math.PI/180);
     var matz = x3dom.fields.SFMatrix4f.rotationZ(sk*Math.PI/180);
-    
+
     var m1  = x3dom.fields.SFMatrix4f.translation(from);
     var m1n = x3dom.fields.SFMatrix4f.translation(from.negate());
-    
+
     var newmat = maty.mult(matx).mult(matz);
-    
+
     console.log(newmat.toString());
-    
+
     console.log("end==================================");
 }
 
@@ -433,11 +433,11 @@ function x3dom_TxMxTi(m){
 }
 
 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,
@@ -446,9 +446,9 @@ function x3dom_YawPitchRoll(m){
 }
 
 function x3dom_YawPitchRoll_degs(m){
-    
+
     var a = x3dom_YawPitchRoll(m);
-    
+
     return {
         yaw: a.yaw*180/Math.PI,
         pitch: a.pitch*180/Math.PI,
@@ -460,38 +460,38 @@ function x3dom_YawPitchRoll_degs(m){
  * from not converted matrix
  */
 function x3dom_YawPitchRoll_nc(m){
-    
+
     var yaw = -Math.atan2(m._02,m._22);
     var pitch = -Math.asin(m._12);
     var roll = -Math.atan2(m._10,m._11);
-    
+
     return {
         yaw: yaw,
         pitch: pitch,
         roll: roll
     };
-    
+
 }
 
 function x3dom_YawPitchRoll_nc_degs(m){
-    
+
     var a = x3dom_YawPitchRoll_nc(m);
-    
+
     return {
         yaw: a.yaw*180/Math.PI,
         pitch: a.pitch*180/Math.PI,
         roll: a.roll*180/Math.PI
     };
-    
+
 }
 
 /*
 function x3dom_YawPitchRoll_2_degs(m){
-    
+
     var pitch = Math.PI+Math.asin(m._20);
     var roll = Math.atan2(m._21/Math.cos(pitch),m._22/Math.cos(pitch));
     var yaw = Math.atan2(m._10/Math.cos(pitch),m._00/Math.cos(pitch));
-    
+
     return {
         yaw: yaw*180/Math.PI,
         pitch: pitch*180/Math.PI,
@@ -500,7 +500,7 @@ function x3dom_YawPitchRoll_2_degs(m){
 }
 */
 function x3dom_delta_map2scene(p0,p1){
-    
+
     var pi = new L.LatLng(p0.lat,p1.lng);
 
     var dx = p0.distanceTo(pi);
@@ -511,73 +511,73 @@ function x3dom_delta_map2scene(p0,p1){
 
     if (p1.lng<p0.lng) dp_rw.x = -dp_rw.x;
     if (p1.lat>p0.lat) dp_rw.z = -dp_rw.z;
-    
+
     var M0 = Data.camera.Matrices.R0.inverse();
     var dp_w = M0.multMatrixVec(dp_rw);
-    
+
     return dp_w;
-    
+
 }
 
 // x,y,z - x3dom internal coords
 function x3dom_getDistAngle(x,y,z){
-    
+
     var R0 = Data.camera.Matrices.R0;
     var p_w = new x3dom.fields.SFVec3f(x,y,z);
     var p_rw = R0.multMatrixVec(p_w);
-    
+
     var d = Math.sqrt(p_rw.x*p_rw.x+p_rw.z*p_rw.z);
     var a = Math.atan2(p_rw.x,-p_rw.z)*180/Math.PI;
-    
+
     return Array(d,a);
-    
+
 }
 
 function x3dom_update_map(){
-    
+
     var Camera = Map.marker;
-    
+
     // real world ypr from viewmatrix
-    
+
     var mat = Scene.element.runtime.viewMatrix().inverse();
     var R0 = Data.camera.Matrices.R0;
     //var T = x3dom_toYawPitchRoll();
-    
+
     var p_w = mat.e3();
     var dp_w = mat.e3();
-    
+
     //var m_rw = T.mult(R0).mult(mat).mult(T.inverse());
-    
+
     // R0 - rw -> w
     mat = R0.mult(mat);
-    
+
     var ypr = x3dom_YawPitchRoll_nc_degs(mat);
-    
+
     var heading = ypr.yaw;
-    
+
     Map.marker.setHeading(heading);
-    
+
     // real world angle distance of some point
-    
+
     if (Scene.old_view_translation != null){
         dp_w = dp_w.subtract(Scene.old_view_translation);
     }
-    
+
     // from w to rw
     dp_rw = R0.multMatrixVec(dp_w);
-    
+
     var distance = Math.sqrt(dp_rw.x*dp_rw.x+dp_rw.z*dp_rw.z);
-    
+
     var angle = 0;
-    
+
     if (dp_rw.z!=0){
         angle = 180/Math.PI*Math.atan2(dp_rw.x,-dp_rw.z);
     }
-    
+
     //angle = angle + heading;
-    
+
     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);
 
@@ -587,16 +587,16 @@ function x3dom_update_map(){
     Data.camera.latitude = p1.lat;
     Data.camera.longitude = p1.lng;
     Data.camera.heading = heading;
-    
+
     Scene.old_view_translation = p_w;
-    
+
 }
 
 // uses globals
 function x3dom_setViewpoint(m){
 
     //console.log("Setting a viewpoint");
-    
+
     var Q = new x3dom.fields.Quaternion(0, 0, 1, 0);
     Q.setValue(m);
     var AA = Q.toAxisAngle();

js/x3dom_init.js

@@ -244,7 +244,7 @@ X3DOMObject.prototype.KeyEvents = function(){
             $("#reset_view").click();
         }
     });
-    
+
 }
 
 /**
@@ -711,6 +711,7 @@ X3DOMObject.Marker.prototype._registerEvents = function(){
 
     marker.on('mousedown',function(e){
 
+        var self = this;
         var elem = $(this).parent().parent().parent();
         var index = parseInt($(elem).attr("id").substr(PREFIX.length));
 
@@ -727,6 +728,13 @@ X3DOMObject.Marker.prototype._registerEvents = function(){
         Scene.element.addEventListener('mousemove',X3DOMObject.Marker.mouseMove,true);
         Scene.element.addEventListener('mouseup',X3DOMObject.Marker.mouseUp,true);
 
+        // check for button released outside the window
+        $(window).on('mouseover.drag_marker',function(e) {
+            if (e && e.buttons===0 && Scene.markerToDrag) {
+                X3DOMObject.Marker.mouseUp.apply(self,[event]);
+            }
+        });
+                
     });
 
     marker.on('mouseup',function(e){
@@ -751,10 +759,12 @@ X3DOMObject.Marker.mouseUp = function(){
         X3DOMObject.Marker.toggle(elem);
     }
     */
-
-    Scene.element.removeEventListener('mouseup',X3DOMObject.Marker.mouseUp,true);
+    
+    Scene.markerToDrag=null;
+    Scene.element.removeEventListener('mouseup',X3DOMObject.Marker.mouseUp,true);    
     Scene.element.removeEventListener('mousemove',X3DOMObject.Marker.mouseMove,true);
-
+    $(window).off('.drag_marker');
+    
     Scene.draggedTransformNode = null;
     Scene.draggingUpVec        = null;
     Scene.draggingRightVec     = null;
@@ -768,6 +778,8 @@ X3DOMObject.Marker.mouseUp = function(){
 // from https://x3dom.org/x3dom/example/MovingObjectsWithDOMEvents.html
 X3DOMObject.Marker.dragStart = function(elem){
 
+    Scene.markerToDrag=elem;
+
     // move up from <shape> to <transform>
     var transformNode = $(elem).parent();
     var tr0 = $(transformNode).attr("translation");
@@ -825,7 +837,9 @@ X3DOMObject.Marker.mouseMove = function(event){
         if (!SETTINGS.slidingdrag){
             X3DOMObject.Marker.drag(event.offsetX - Scene.lastMouseX, event.offsetY - Scene.lastMouseY);
         }else{
+            Scene.markerToDrag.isPickable=false;
             var sr = Scene.element.runtime.shootRay(event.clientX,event.clientY);
+            Scene.markerToDrag.isPickable=true;
             if (sr.pickObject != null){
                 if (!$(sr.pickObject).hasClass("shapemarker")){
                     var sphere = Scene.draggedTransformNode.parent().parent();
@@ -1205,42 +1219,42 @@ X3DOMObject.displayViewInfo = function(e){
     //Map.marker.setAltitude(camera.y);
     //Map.marker.setElevation(camera.e*Math.PI/180);
 
-    var msg = [
-'<table>',
-'<tr>',
-'    <td></td>',
-'    <td colspan="3" align="center">position, m</td>',
-'    <td colspan="3" align="center">orientation, &deg;</td>',
-'</tr>',
-'<tr>',
-'    <th></th>',
-'    <th style="width:60px;">x</th>',
-'    <th style="width:60px;">y</th>',
-'    <th style="width:60px;">z</th>',
-'    <th>azimuth</th>',
-'    <th>elevation</th>',
-'    <th>skew</th>',
-'</tr>',
-'<tr>',
-'    <td>mouse</td>',
-'    <td>'+mouse.x+'</td>',
-'    <td>'+mouse.y+'</td>',
-'    <td>'+mouse.z+'</td>',
-'    <td>'+mouse.a+'</td>',
-'    <td>'+mouse.e+'</td>',
-'    <td>'+mouse.s+'</td>',
-'</tr>',
-'<tr>',
-'    <td>camera</td>',
-'    <td>'+camera.x+'</td>',
-'    <td>'+camera.y+'</td>',
-'    <td>'+camera.z+'</td>',
-'    <td>'+camera.a+'</td>',
-'    <td>'+camera.e+'</td>',
-'    <td>'+camera.s+'</td>',
-'</tr>',
-'</table>'
-].join('\n');
+    var msg = `
+<table>
+<tr>
+    <td></td>
+    <td colspan='3' align='center'>position, m</td>
+    <td colspan='3' align='center'>orientation, &deg;</td>
+</tr>
+<tr>
+    <th></th>
+    <th style='width:60px;'>x</th>
+    <th style='width:60px;'>y</th>
+    <th style='width:60px;'>z</th>
+    <th>azimuth</th>
+    <th>elevation</th>
+    <th>skew</th>
+</tr>
+<tr>
+    <td>mouse</td>
+    <td>`+mouse.x+`</td>
+    <td>`+mouse.y+`</td>
+    <td>`+mouse.z+`</td>
+    <td>`+mouse.a+`</td>
+    <td>`+mouse.e+`</td>
+    <td>`+mouse.s+`</td>
+</tr>
+<tr>
+    <td>camera</td>
+    <td>`+camera.x+`</td>
+    <td>`+camera.y+`</td>
+    <td>`+camera.z+`</td>
+    <td>`+camera.a+`</td>
+    <td>`+camera.e+`</td>
+    <td>`+camera.s+`</td>
+</tr>
+</table>
+`;
 
     if (SETTINGS.viewinfo){
         ui_showMessage("window-viewinfo",msg);

js/x3l.js

 /*
- * 
+ *
  * Copyright (C) 2017 Elphel Inc.
  * License: GPLv3
- * 
+ *
  */
 
 var X3L = function(options){
-    
+
     var defaults = {
         x: 0,
         y: 0,
         z: 0,
-    
+
         latitude: 0,
         longitude: 0,
         altitude: 0,
-    
+
         heading: 0,
         tilt: 90,
         roll: 0,
-        
+
         fov: 0,
-        
+
         color: "#1f1",
         size: 2,
     };
-    
+
     this._data = $.extend(defaults,options);
-    
+
     this.x = this._data.x;
     this.y = this._data.y;
     this.z = this._data.z;
-    
+
     this.longitude = this._data.longitude;
     this.latitude = this._data.latitude;
     this.altitude = this._data.altitude;
-    
+
     this.heading = this._data.heading;
     this.tilt = this._data.tilt;
     this.roll = this._data.roll;
-    
+
     this.fov = this._data.fov;
-    
+
     this.color = this._data.color;
     this.size = this._data.size;
 

test_nomap.html

@@ -3,19 +3,19 @@
   <head>
     <meta charset="utf-8"/>
     <title>Scene (NoMap)</title>
-    
+
     <script type='text/javascript' src='js/jquery/jquery-3.1.1.js'></script>
 
     <script type='text/javascript' src='js/nomap_init.js'></script>
 
     <link rel='stylesheet' type='text/css' href='js/x3dom/x3dom.css'></link>
-    
+
     <link rel='stylesheet' type='text/css' href='js/ui.css'></link>
-    
+
   </head>
   <body>
     <div id='x3d_wrapper'>
-      <x3d id="x3d_id" width='1600px' height='800px' showProgress="true" showStat="false" showLog="false" disableDoubleClick="true" keysEnabled="true"> 
+      <x3d id="x3d_id" width='1600px' height='800px' showProgress="true" showStat="false" showLog="false" disableDoubleClick="true" keysEnabled="true">
         <scene>
           <navigationInfo id="navInfo" type='"examine" "walk"' speed='0.01'></navigationInfo>
           <Viewpoint fieldOfView='1' position='0 0 0' orientation='0 0 1 0'></Viewpoint>

test_nomap_vr.html

@@ -3,14 +3,14 @@
   <head>
     <meta charset="utf-8"/>
     <title>Scene (NoMap)</title>
-    
+
     <script type='text/javascript' src='js/jquery/jquery-3.1.1.js'></script>
     <script type='text/javascript' src='js/x3dom/x3dom-full.debug.js'></script>
 
 <!--     <script type='text/javascript' src='js/nomap_vr_init.js'></script> -->
 
     <link rel='stylesheet' type='text/css' href='js/x3dom/x3dom.css'></link>
-    
+
     <style type='text/css'>
         body {margin:0; padding:0; background-color:#04344c; background-color:#ddeeff; }
         .stereo-view {float:left; }
@@ -38,28 +38,28 @@
     <div class='stereo-view-1'>
         <!--view-source:http://realism.com/sample/model/stereo/VAM_246-1-1870/model-ig0b75.x3d?=&headlight=true&ipd=30&%20=-->
         <!--view-source:http://realism.com/x3d-examples/HTML5-Fall2014/stereo/kelpie.sgl.html -->
-    
+
         <script>
             document.writeln ("<x3d id='all_view' showStat='false' showLog='false' disableDoubleClick='true' keysEnabled='true' x='0px' y='0px' width='"+(2*x3dWidth)+"px' height='"+x3dHeight+"px'>");
             var x3dDimStr = x3dWidth + ' ' + x3dHeight + ' 4';
         </script>
-    
+
         <scene>
             <navigationInfo type='"EXAMINE" "WALK"'></navigationInfo>
 	
-            <background DEF='bgnd' 
-                backUrl=  "js/images/background_side.jpeg" 
-                bottomUrl="js/images/background_floor.jpeg" 
+            <background DEF='bgnd'
+                backUrl=  "js/images/background_side.jpeg"
+                bottomUrl="js/images/background_floor.jpeg"
                 frontUrl= "models/1488240695_710844/V0/1488240695_710844-texture-bgnd-ext.jpeg"
-                leftUrl=  "js/images/background_side.jpeg" 
-                rightUrl= "js/images/background_side.jpeg" 
+                leftUrl=  "js/images/background_side.jpeg"
+                rightUrl= "js/images/background_side.jpeg"
                 topUrl=   "js/images/background_sky.jpeg">
             </background>
-            
+
             <transform translation='0 0 0' rotation='0 1 0 0'>
                 <viewpoint DEF='viewpoint' id='x3d_viewpoint' position='0 0 0' orientation='0 1 0 0' zNear='0.001' zFar='2000'></viewpoint>
             </transform>
-            
+
             <group id='unrendered_scene' render='false'>
                 <group DEF='scene'>
                     <transform DEF='Viewpoint-Left'  id='x3d_viewpoint'       translation='0 0 0' rotation='0 1 0 0'>
@@ -75,7 +75,7 @@
                     </transform>
                 </group>
             </group>
-            
+
             <group DEF='left' render='true'>
                 <shape>
                     <appearance>
@@ -83,15 +83,15 @@
                         <script>
                             document.writeln ("<renderedTexture interpupillaryDistance='0.3' id='rtLeft' stereoMode='LEFT_EYE' update='ALWAYS' dimensions='"+x3dDimStr+"' repeatS='false' repeatT='false'>");
                         </script>
-                        
+
                         <viewpoint USE='viewpoint' containerField='viewpoint'></viewpoint>
-                        
+
                         <background USE='bgnd' containerField='background'></background>
-                        
+
                         <group USE='scene' containerField="scene"></group>
-                        
+
                     </renderedTexture>
-                    
+
                     <composedShader>
                         <field name='tex' type='SFInt32' value='0'></field>
                         <field name='leftEye' type='SFFloat' value='1'></field>
@@ -106,7 +106,7 @@
                             {
                                 vec2 pos = sign(position.xy);
                                 fragTexCoord = texcoord;
-                                gl_Position = vec4((pos.x/2.0)-0.5, pos.y, 0.0, 1.0); 
+                                gl_Position = vec4((pos.x/2.0)-0.5, pos.y, 0.0, 1.0);
                             }
                         </shaderPart>
                         <!-- The division of pos.x relates to the fraction of the window that is used -->
@@ -136,15 +136,15 @@
                         <script>
                             document.writeln ("<renderedTexture interpupillaryDistance='0.3' id='rtRight' stereoMode='RIGHT_EYE' update='ALWAYS' dimensions='"+x3dDimStr+"' repeatS='false' repeatT='false'>");
                         </script>
-                        
+
                         <viewpoint USE='viewpoint' containerField='viewpoint'></viewpoint>
-                        
+
                         <background USE='bgnd' containerField='background'></background>
-                        
+
                         <group USE='scene' containerField="scene"></group>
-                    
+
                     </renderedTexture>
-                    
+
                     <composedShader>
                         <field name='tex' type='SFInt32' value='0'></field>
                         <field name='leftEye' type='SFFloat' value='0'></field>
@@ -172,7 +172,7 @@
         </scene>
         </x3d>
     </div>
-    
+
     <script language='JavaScript'>
         // --> Check to see if there are DeviceOrientation events in the DOM
 
@@ -187,7 +187,7 @@
 		alpha = 360-eventData.alpha;
 		rotate (alpha, 'alpha');
 		rotate (beta,  'beta');
-		rotate (gamma, 'gamma'); 
+		rotate (gamma, 'gamma');
             }, false);
         }else{
             alert ('No Device Motion Sensor');
@@ -197,14 +197,14 @@
             intAngle = Math.floor(angle + 0.5);
             if (intAngle == previousAngles[label]) {return; }
             previousAngles[label] = intAngle;
-            
+
             if (label == 'alpha') {
 		rotateView ("x3d_viewpoint_"+label, vectors[label]+" "+intAngle*deg2rad);
 //              rotateView ("x3d_viewpointR_"+label, vectors[label]+" "+intAngle*deg2rad);
 //              rotateView ("x3d_viewpointL_"+label, vectors[label]+" "+intAngle*deg2rad);
             }
         }
-        
+
         function rotateView (label, vector) {
             view = document.getElementById(label);
             view.setAttribute('set_rotation',vector);