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.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_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);