remove trailing spaces

8bc06769 · Rurik Bugdanov · f888f6f7 · 8bc06769 · 8bc06769 · 8bc06769
Commit 8bc06769 authored Jun 28, 2017 by Rurik Bugdanov
26 changed files
--- a/index.html
+++ b/index.html
@@ -3,14 +3,14 @@
  <head>
    <meta charset="utf-8"/>
    <title>x3d models index</title>
    <script type='text/javascript' src='js/jquery/jquery-3.1.1.js'></script>
    <script type='text/javascript' src='js/leaflet/leaflet-src.js'></script>
    <script type='text/javascript' src='js/index.js'></script>
    <link rel='stylesheet' type='text/css' href='js/leaflet/leaflet.css'></link>
    <link rel='stylesheet' type='text/css' href='js/index.css'></link>
  </head>
  <body>
  <div id="table_div">

--- a/js/index.css
+++ b/js/index.css
 table{
    border-collapse:collapse;
 }

--- a/js/index.js
+++ b/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);
 }
--- a/js/leaflet/L.extra.js
+++ b/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);
    }

--- a/js/leaflet/leaflet.camera-view-marker-controls.js
+++ b/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
--- a/js/leaflet/leaflet.camera-view-marker.js
+++ b/js/leaflet/leaflet.camera-view-marker.js
--- a/js/leaflet/leaflet.camera-view-marker.measure.js
+++ b/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', 
+                    color: '#1f1',
-                    weight:1, 
+                    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', 
+                    color: '#1f1',
-                    weight:1, 
+                    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));
--- a/js/leaflet_init.js
+++ b/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){

--- a/js/map.css
+++ b/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;

--- a/js/map.js
+++ b/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 &copy; Esri &mdash; 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',

--- a/js/nomap_init.js
+++ b/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(){

--- a/js/nomap_vr_init.js
+++ b/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(){

--- a/js/ui.css
+++ b/js/ui.css
@@ -53,7 +53,7 @@ html, body, #x3d_wrapper {
  border-radius: 1px;
  font-size: 16px;
  display:block;
  position:absolute;
  top: 16px;
  left: 3px;
@@ -167,7 +167,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 +190,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;

--- a/js/ui_align.js
+++ b/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");
 }
--- a/js/ui_functions.js
+++ b/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)

--- a/js/ui_help.js
+++ b/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
--- a/js/ui_init.js
+++ b/js/ui_init.js
--- a/js/ui_menu.js
+++ b/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
--- a/js/util_functions.js
+++ b/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
--- a/js/x3dom/x3dom.css
+++ b/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: "."; 
+  content: ".";
-  display: block; 
+  display: block;
-  height: 0; 
+  height: 0;
-  clear: both; 
+  clear: both;
  visibility: hidden;
 }
--- a/js/x3dom_functions.js
+++ b/js/x3dom_functions.js
--- a/js/x3dom_init.js
+++ b/js/x3dom_init.js
--- a/js/x3l.js
+++ b/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;

--- a/test.html
+++ b/test.html
@@ -3,9 +3,9 @@
  <head>
    <meta charset="utf-8"/>
    <title>Scene+Map</title>
    <script type='text/javascript' src='js/jquery/jquery-3.1.1.js'></script>
    <script type='text/javascript' src='js/leaflet/leaflet-src.js'></script>
    <script type='text/javascript' src='js/leaflet/L.extra.js'></script>
    <script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker-controls.js'></script>
@@ -14,7 +14,7 @@
    <script type='text/javascript' src='js/x3dom_init.js'></script>
    <script type='text/javascript' src='js/x3dom_functions.js'></script>
    <script type='text/javascript' src='js/leaflet_init.js'></script>
    <script type='text/javascript' src='js/x3l.js'></script>
@@ -23,14 +23,14 @@
    <script type='text/javascript' src='js/ui_help.js'></script>
    <script type='text/javascript' src='js/ui_functions.js'></script>
    <script type='text/javascript' src='js/ui_align.js'></script>
    <script type='text/javascript' src='js/util_functions.js'></script>
    <link rel='stylesheet' type='text/css' href='js/leaflet/leaflet.css'></link>
    <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'>

--- a/test_nomap.html
+++ b/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>

--- a/test_nomap_vr.html
+++ b/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' 
+            <background DEF='bgnd'
-                backUrl=  "js/images/background_side.jpeg" 
+                backUrl=  "js/images/background_side.jpeg"
-                bottomUrl="js/images/background_floor.jpeg" 
+                bottomUrl="js/images/background_floor.jpeg"
                frontUrl= "models/1488240695_710844/V0/1488240695_710844-texture-bgnd-ext.jpeg"
-                leftUrl=  "js/images/background_side.jpeg" 
+                leftUrl=  "js/images/background_side.jpeg"
-                rightUrl= "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);