Merge branch 'master' of https://github.com/Elphel/freecad_x3d

x3d_web_viewer/viewmodel.js

-/*
-FILE NAME  : viewmodel.js
-DESCRIPTION: x3d viewer
-REVISION: 1.00
-AUTHOR: Oleg Dzhimiev <oleg@elphel.com>
-LICENSE: AGPL v3+, see http://www.gnu.org/licenses/agpl.txt
-Copyright (C) 2015 Elphel, Inc.
-*/
+/** @licstart  The following is the entire license notice for the
+ *  JavaScript code in this page.
+ *
+ *   Copyright (C) 2017 Elphel Inc.
+ *   Author: Oleg Dzhimiev <oleg@elphel.com>
+ *   Desctiption: x3d viewer
+ *
+ *   The JavaScript code in this page is free software: you can
+ *   redistribute it and/or modify it under the terms of the GNU
+ *   General Public License (GNU GPL) as published by the Free Software
+ *   Foundation, either version 3 of the License, or (at your option)
+ *   any later version.  The code is distributed WITHOUT ANY WARRANTY;
+ *   without even the implied warranty of MERCHANTABILITY or FITNESS
+ *   FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
+ *
+ *   As additional permission under GNU GPL version 3 section 7, you
+ *   may distribute non-source (e.g., minimized or compacted) forms of
+ *   that code without the copy of the GNU GPL normally required by
+ *   section 4, provided you include this license notice and a URL
+ *   through which recipients can access the Corresponding Source.
+ *
+ *  @licend  The above is the entire license notice
+ *  for the JavaScript code in this page.
+ */
 
 var model = "Undefined";
 var NSN = "m";
@@ -24,8 +40,13 @@ var zoom = 0.9;
 
 var undo = Array();
 
+$(function(){
+  prerun();
+  resize();
+});
+
 function resize(){
-    console.log("resize");
+    //console.log("resize");
     var w = $(window).width();
     var h = $(window).height();
     if (w>h){
@@ -42,11 +63,11 @@ function resize(){
     $("#title").css({
         left: ($("#main").width()/2-$("#title").width()/2)+"px",
     });
-    
+
     $("#webgl_error").css({
         top:($("#main").height()/2-$("#webgl_error").height()/2)+"px"
     });
-    
+
 }
 
 var resizeTimer;
@@ -63,10 +84,10 @@ function prerun(){
         clearTimeout(resizeTimer);
         resizeTimer = window.setTimeout(resize(),250);
     });
-    
+
     //"model" and some other parameters
     parseURL();
-        
+
     //create and init x3d canvas
     var x3d_cnv = $("<x3d>",{
         id:"x3d_canvas",width:"700px",height:"600px",showLog:"false"
@@ -74,42 +95,43 @@ function prerun(){
         position:"absolute",
         border: "1px solid gray",
         "border-radius": "2px",
-        outline: "none"        
+        outline: "none"
     }).addClass("nooutline");
-    
+
     $("#main").prepend(x3d_cnv);
-    
+
     x3d_cnv.click(function(){
         console.log("Temporary disable stop_animation() call");
         //stop_animation();
     });
-    
+
     var x3d_cnv_ni = $("<navigationinfo>",{id:"navi",type:"'examine' 'any'",speed:"1",headlight:"true"});
-    
+
     var x3d_cnv_vp = $("<Viewpoint>").attr("fieldOfView","0.200");
-    
+
     var x3d_cnv_in = $("<inline>",{
         id:"topinline",
         nameSpaceName:NSN,
         url: model
     });
-        
+
     var x3d_cnv_trans = $("<Transform id='anima' DEF='ball'>");
-        
+
     x3d_cnv_trans.append(x3d_cnv_in);
-        
+
     var scene = $("<Scene>");
     scene.append(x3d_cnv_trans);
     x3d_cnv.append(scene);
-            
+
     if (animate){
         start_animation();
     }
-    
+
     //load x3dom.js
     //$.getScript("x3dom-1.7.0/x3dom.debug.js",function(){
     //$.getScript("http://x3dom.org/download/1.7.1/x3dom.js");
-    $.getScript("http://x3dom.org/download/1.7/x3dom.js",function(){
+    //$.getScript("http://x3dom.org/download/1.7/x3dom.js",function(){
+    $.getScript("x3dom-1.7.0/x3dom-full.debug.js",function(){
         x3dom.runtime.ready = function() {
             //x3dom.caps.BACKEND
             if (x3dom.caps.BACKEND!="webgl"){
@@ -122,7 +144,7 @@ function prerun(){
                     background:"black",
                     "z-index":"999"
                 });
-                
+
                 var webgl_error = $("<div>",{id:"webgl_error"}).css({
                     position:"absolute",
                     top:"0px",
@@ -137,19 +159,19 @@ function prerun(){
                 }).html("\
 This browser does not support WebGL. Please, check at <a style='color:rgba(100,200,255,1)' href='http://get.webgl.org/'>get.webgl.org</a><br/>\
 X3DOM Flash version is not available.<br/>\
-");             
-                
+");
+
                 $("#main").append(webgl_error_background).append(webgl_error);
                 webgl_error.css({
                     top:($("#main").height()/2-webgl_error.height()/2)+"px"
                 });
-                
+
                 //console.log($("#x3dom-x3d_canvas-object"));
                 $("#x3dom-x3d_canvas-object").remove();
             }
         };
     });
-        
+
     var settings = $("<div>").load(settings_file,function(response,status,xhr){
         if (xhr.status==200){
             var xml = $.parseXML(response);
@@ -159,13 +181,13 @@ X3DOM Flash version is not available.<br/>\
         }
         scene.prepend(x3d_cnv_vp).prepend(x3d_cnv_ni);
     });
-    
+
     $("#main").css({
         position:"absolute",
         width: x3d_cnv.width()+"px",
         height: x3d_cnv.height()+"px"
     });
-    
+
     var showall = 1;
     var element = document.getElementById('x3d_canvas');
     $(document).load(function(){
@@ -175,8 +197,8 @@ X3DOM Flash version is not available.<br/>\
                 element.runtime.showAll("negY");
                 if (showdefault) element.runtime.resetView();
                 showall=0;
-                place_camera();
-                model_init();
+                //place_camera();
+                //model_init();
             }else{
                 //console.log("Loaded "+load_counter);
                 if (showall>=0){
@@ -200,10 +222,10 @@ X3DOM Flash version is not available.<br/>\
             }
         };
     });
-    
+
     //help
     init_help($("#main"));
-    
+
     //info popup
     var info = $("<div>",{id:"info"}).css({
         position:"absolute",
@@ -217,16 +239,16 @@ X3DOM Flash version is not available.<br/>\
         background:"rgba(50,50,50,0.9)",
         display:"none"
     });
-    
+
     $("#main").append(info);
-    
+
     rst_model = $("<button>",{id:"reset_model"}).addClass("btn-my btn nooutline").html("reset model").css({
         position: "absolute",
         top: "3px",
         left: "3px",
         cursor:"pointer"
     });
-    
+
     rst_model.click(function(){
         model_run_cmd("reset","reset");
         btn_subpart_enableAll();
@@ -239,7 +261,7 @@ X3DOM Flash version is not available.<br/>\
             start_animation();
         }
     });
-    
+
     $("#main").append(rst_model);
 
     undo_model = $("<button>",{id:"undo_model"}).addClass("btn-my btn nooutline").html("<span class=\"glyphicon glyphicon-share-alt\" aria-hidden=\"true\"></span>").css({
@@ -252,21 +274,21 @@ X3DOM Flash version is not available.<br/>\
         "-webkit-transform": "scaleX(-1)",
         transform: "scaleX(-1)"
     });
-    
+
     undo_model.click(function(){
         model_run_cmd(undo[undo.length-1],"click-int-all");
         undo.pop();
     });
-    
-    $("#main").append(undo_model);   
-    
+
+    $("#main").append(undo_model);
+
     $("#thrd").css({
         position:"absolute",
         top: "3px",
         right: "27px"
     });
 
-    $("#v1").css({cursor:"pointer"}).click(function(){element.runtime.showAll("posX");});    
+    $("#v1").css({cursor:"pointer"}).click(function(){element.runtime.showAll("posX");});
     $("#v2").css({cursor:"pointer"}).click(function(){element.runtime.showAll("negX");});
 
     $("#v3").css({cursor:"pointer"}).click(function(){element.runtime.showAll("posY");});
@@ -274,20 +296,20 @@ X3DOM Flash version is not available.<br/>\
 
     $("#v5").css({cursor:"pointer"}).click(function(){element.runtime.showAll("posZ");});
     $("#v6").css({cursor:"pointer"}).click(function(){element.runtime.showAll("negZ");});
-    
+
     $("#v7").css({cursor:"pointer"}).click(function(){element.runtime.resetView();});
-    
+
     if (nocontrols) {
         undo_model.css({display:"none"});
         rst_model.css({display:"none"});
         hlp.css({display:"none"});
         $("#thrd").css({display:"none"});
     }
-    
+
     var index = model.lastIndexOf("/");
     var model_pn = model.substr(index+1);
     model_pn = model_pn.slice(0,-4);
-    
+
     var pn_title = $("<div>",{id:"title"}).css({
         position:"absolute",
         "border-radius":"2px 2px 2px 2px",
@@ -297,18 +319,18 @@ X3DOM Flash version is not available.<br/>\
         padding:"10px 10px 10px 10px",
         background:"rgba(50,50,50,0.9)"
     }).html(model_pn);
-    
+
     $("#main").append(pn_title);
-    
+
     pn_title.css({
         top: "0px",
         left: ($("#main").width()/2-pn_title.width()/2)+"px",
     });
-    
+
     if (notitle){
         pn_title.css({display:"none"});
     }
-    
+
 }
 
 function model_init(){
@@ -332,53 +354,53 @@ function place_camera(){
     var top = $("#topinline");
     //get top boundary box position
     var top_groups = top.find("Group");
-    
+
     if (top_groups.length>0){
         var top_group = $(top_groups[0]);
         var top_bboxcenter = top_group.prop('bboxCenter');
         top_bboxcenter = top_bboxcenter.split(" ");
         var top_bboxsize = top_group.prop('bboxSize');
         top_bboxsize = top_bboxsize.split(" ");
-        
+
         console.log("Top group bboxcenter is at");
         console.log(top_bboxcenter);
-        
+
         top_group.parent().prop("translation",(-top_bboxcenter[0])+" "+(-top_bboxcenter[1])+" "+(-top_bboxcenter[2]));
-        
+
         //var fov = $("Viewpoint").attr("fieldOfView");
         var fov = $("Viewpoint").prop("fieldOfView");
-        
+
         console.log("field of view is "+fov);
-        
+
         //(top_bboxsize[1]/2) / l = tg a/2
         fov=fov*zoom;
         var phi = -0.7;
-        
+
         var boxsize;
-        
+
         console.log(top_bboxsize);
         boxsize = 0;
         for(var k=0;k<top_bboxsize.length;k++){
             if (parseFloat(top_bboxsize[k])>boxsize) boxsize = parseFloat(top_bboxsize[k]);
         }
-        
+
         //boxsize = Math.max(...top_bboxsize);
-        
-        var view_distance = (boxsize/2)/Math.tan(fov/2);    
-        
+
+        var view_distance = (boxsize/2)/Math.tan(fov/2);
+
         var view_elevation = view_distance*Math.tan(phi);
-        
+
         //$("Viewpoint").attr("position","0 "+view_distance+" 0");
         //$("Viewpoint").attr("orientation","-1 0 0 1.57080");
         console.log(view_distance+" "+view_elevation+" "+phi);
-        
+
         $("Viewpoint").attr("position","0 "+view_distance+" "+(view_elevation));
         $("Viewpoint").attr("orientation","-1 0 0 "+(Math.PI/2-phi));
         showdefault = true;
-        
+
         var element = document.getElementById('x3d_canvas');
         if (showdefault) element.runtime.resetView();
-        
+
         var x3d_cnv_ni = $("NavigationInfo");
         x3d_cnv_ni.prop("speed",Math.round(Math.sqrt(view_distance)/5));
         console.log("speed is "+x3d_cnv_ni.prop("speed"));
@@ -386,30 +408,30 @@ function place_camera(){
 }
 
 function showBOM(){
-    console.log("showBOM");    
+    console.log("showBOM");
     //var bom = $("<ul>",{id:"bom",class:"list-group"}).css({
     var bom = $("<table>",{id:"bom"}).css({
         position:"absolute",
         top:"5px",
         left:"105px"
     });
-    
+
     if (nobuttons){
         bom.css({
             display:"none"
         });
     }
-    
+
     $("body").append(bom);
-    
+
     var top = $("#topinline");
-    
+
     //upper case was important
     var parts_unique = top.find("Inline");
     //remove the first element -  because of the specific model structure?
     parts_unique.splice(0,1);
     //console.log("Unsorted");
-    //console.log(parts_unique);  
+    //console.log(parts_unique);
     parts_unique.sort(function(a,b){
         a = $(a).prop("nameSpaceName");
         b = $(b).prop("nameSpaceName");
@@ -421,26 +443,26 @@ function showBOM(){
             return 0;
         }
     });
-    
+
     var bomtr_counter=0;
     var bomtr_subcounter=0;
-    
+
     //console.log("Sorted");
     //console.log(parts_unique);
-    
+
     //set default transparency?
     parts_unique.find("Material").attr("transparency",0.1);
     parts_unique.find("Material").prop("transparency",0.1);
-    
+
     parts_unique.find("Material").attr("shininess",0.5);
     parts_unique.find("Material").prop("shininess",0.5);
-    
+
     parts_unique.find("Material").attr("specularColor","0.2 0.2 0.2");
     parts_unique.find("Material").prop("specularColor","0.2 0.2 0.2");
-    
+
     var prev_nsn_group="";
     var odd_group_en = false;
-    
+
     parts_unique.each(function(i){
         var part = $(this);
         var tmp_nsn = this.getAttribute("nameSpaceName");
@@ -449,30 +471,30 @@ function showBOM(){
         if (prev_nsn_group=="") prev_nsn_group = tmp_nsn_group;
         if (prev_nsn_group!=tmp_nsn_group) odd_group_en=!odd_group_en;
         //find secondary appearances
-                      
+
         if (odd_group_en){
             //odd_group = "btn-odd-success";
             odd_group = "";
         }else{
             odd_group = "";
         }
-            
+
         var sublist = top.find("[USE="+tmp_nsn+"]");
         var ele_sublist = "";
-        
+
         var btn_subpart = false;
-        
+
         ele_ul = $("<ul>",{class:"dropdown-menu","data-toggle":"dropdown"}).css({padding:"10px","min-width":"100px",border:"1px solid rgba(50,50,50,0.5)"});
         btn_part = $("<button>",{class:"btn-part btn btn-default btn-sm btn-success "+odd_group}).css({"min-width":"100px"}).html(tmp_nsn);
-        
+
         btn_part.css({background:getColorByNSN(tmp_nsn)});
-        
+
         btn_part.attr("odd",odd_group_en);
         btn_part.attr("nsn",tmp_nsn);
         btn_part.attr("state","normal");
-        
+
         prev_nsn_group = tmp_nsn_group;
-        
+
         ele_sublist = $("<div>",{class:"btn-group"}).append(btn_part).append(
                 $("<button>",{class:"dropdown-toggle btn btn-default btn-sm nooutline",
                     "data-toggle":"dropdown",
@@ -485,36 +507,36 @@ function showBOM(){
                 )
             );
         ele_sublist.attr("blockpropagation",false);
-        
+
         //toggle all button
         btn_subpart = $("<button>",{class:"btn-subpart btn btn-default btn-sm btn-success",title:"Toggle all"}).css({width:"40px"}).html("all");
         btn_subpart.attr("index",sublist.length);
         btn_subpart.attr("nsn",tmp_nsn);
         btn_subpart.attr("selected",true);
-        
+
         //btn_subpart.click(function(){btn_subpart_click_all($(this),ele_sublist);});
         btn_subpart.click(function(e){
             model_run_cmd(tmp_nsn,"click-int-all");
             e.stopPropagation();
         });
-        
+
         btn_link_open = $("<a>",{href:"?"+inherited_parameters+"model="+path+"/"+tmp_nsn+".x3d",class:"btn btn-default btn-sm",title:"Open in new window"}).html("<span class=\"glyphicon glyphicon-open\" aria-hidden=\"true\"></span>").css({padding:"7px 13px 7px 13px",margin:"6px 0px 6px 6px"});
-        
+
         btn_link_open.click(function(e){
             window.location.href = $(this).attr('href');
         });
-        
+
         btn_link_to_wiki = $("<a>",{href:elphel_wiki_prefix+"\""+tmp_nsn+"\"&fulltext=Search",class:"btn btn-default btn-sm",title:"Elphel Wiki docs"}).html("<span class=\"glyphicon glyphicon-book\" aria-hidden=\"true\"></span>").css({padding:"7px 13px 7px 13px",margin:"6px"});
-        
+
         btn_link_to_wiki.click(function(e){
             window.location.href = $(this).attr('href');
         });
-        
+
         ele_ul.append($("<li>").append(btn_subpart.css({display:"inline"}))
                                .append(btn_link_open.css({display:"inline"}))
                                .append(btn_link_to_wiki.css({display:"inline"}))
                                .css({padding:"3px","min-width":"100px",width:"150px"}));
-        
+
         //build a list for unique and multiple parts
         for(var j=0;j<=sublist.length;j++){
             btn_subpart = $("<button>",{class:"btn-subpart btn btn-default btn-sm btn-success",title:"Toggle element"}).css({width:"40px"}).html(j+1);
@@ -523,14 +545,14 @@ function showBOM(){
             btn_subpart.attr("nsn",tmp_nsn);
             btn_subpart.attr("selected",true);
             btn_subpart.click(function(){btn_subpart_click($(this),ele_sublist);});
-            
+
             if (j%5==0) {
                 list_el = $("<li>").css({padding:"3px","min-width":"100px",width:"237px"});
                 ele_ul.append(list_el);
-            }    
+            }
             list_el.append(btn_subpart.css({display:"inline",margin:"0px 6px 0px 0px"}));
-        }            
-        
+        }
+
         ele_sublist.click(function(e){
             if ($(this).attr("blockpropagation")=="true") {
                 e.stopPropagation();
@@ -538,10 +560,10 @@ function showBOM(){
             $(this).attr("blockpropagation",false);
         });
         ele_sublist.append(ele_ul);
-        
+
         //var ele = $("<li>",{class:"list-group-item"}).append($(ele_sublist));
         var ele = $("<td>").css({padding:"2px 5px 2px 0px"}).append($(ele_sublist));
-        
+
         /*
         if(i%3==0){
             bomtr = $("<tr>");
@@ -557,13 +579,13 @@ function showBOM(){
         }else{
             bomtr_subcounter++;
             bomtr = $("#bomtr_"+bomtr_subcounter);
-            console.log("Adding to tr #"+bomtr_subcounter);
+            //console.log("Adding to tr #"+bomtr_subcounter);
             if (bomtr_subcounter==bomtr_counter){
                 bomtr_subcounter=0;
             }
         }
         bomtr.append(ele);
-        
+
         btn_part.click(function(){
             model_run_cmd(tmp_nsn,"click-ext");
         });
@@ -576,10 +598,10 @@ function unbindCanvas(){
     $("Switch").off("mousedown").off("mousemove").off("click");
     var canvas = document.getElementById("x3d_canvas");
     canvas.removeEventListener("touchstart",touchstarted,false);
-    canvas.removeEventListener("touchmove",touchmoved,false); 
+    canvas.removeEventListener("touchmove",touchmoved,false);
     canvas.removeEventListener("mousedown", mousestarted,false);
     canvas.removeEventListener("mousemove", mousemoved,true);  //does not work with false
-    canvas.removeEventListener("mouseup",   mouseended,true); 
+    canvas.removeEventListener("mouseup",   mouseended,true);
     canvas.removeEventListener("mouseleave",mouseleft,false);
     canvas.removeEventListener("touchend",  mouseended,false);
     canvas.removeEventListener("touchcancel",  touchcanceled,false);
@@ -588,7 +610,7 @@ function unbindCanvas(){
 function bindCanvas(){
     //whichChoice for Group tag didn't work
     //$("Switch").on("mousedown").on("mousemove").on("click");
-    
+
     $("Switch").each(function(){
         var hmm = $(this);
         var id = hmm.attr("id");
@@ -597,7 +619,7 @@ function bindCanvas(){
         $(this).attr("nsn",pn);
         $(this).attr("state","normal");
     });
-    
+
     //unblock click
     $("Switch").mousedown(function(){
         blockclick = false;
@@ -609,18 +631,18 @@ function bindCanvas(){
             blockclick = true;
         }
     });
-    
+
     var canvas = document.getElementById("x3d_canvas");
     canvas.addEventListener("touchstart",touchstarted,false);
     canvas.addEventListener("touchmove", touchmoved,false);
     canvas.addEventListener("mousedown", mousestarted,false);
     canvas.addEventListener("mousemove", mousemoved,true);  //does not work with false
     canvas.addEventListener("mouseleave", mouseleft,false);
-    canvas.addEventListener("mouseup",   mouseended,true); 
+    canvas.addEventListener("mouseup",   mouseended,true);
     canvas.addEventListener("touchend",  mouseended,false);
     canvas.addEventListener("touchcancel",touchcanceled,false);
     console.log("Added event listeners");
-    
+
     //click
     $("Switch").click(function(event){
         var hmm = $(this);
@@ -629,12 +651,12 @@ function bindCanvas(){
         var pn = pn_arr[pn_arr.length-2];
         old_time = switch_click_time;
         switch_click_time = getTimeStamp();
-        if (!blockclick){                      
+        if (!blockclick){
             if ((switch_click_time-old_time)<400){
                 if (event.which==1){
                     if (pn_arr[pn_arr.length-1]=="0") model_run_cmd(pn,"normalize");
                     if (pn_arr[pn_arr.length-1]=="0") model_run_cmd(pn,"right-click");
-                }    
+                }
             }else{
                 if (event.which==1){
                     //fighting multiple click events
@@ -646,7 +668,7 @@ function bindCanvas(){
                 }
                 console.log("The pointer is over "+hmm.attr("id")+", whichChoice="+hmm.attr("whichChoice")+" render="+hmm.attr("render")+" DEF="+hmm.attr("DEF"));
             }
-        }    
+        }
     });
 }
 
@@ -732,64 +754,70 @@ function mousemoved(event){
 function mouseended(event){
         dragging = false;
         var last_state=getMoveState(event);
-        console.log("mouse ended, history length="+move_history.length);
-        // find history snapshot farher than minimal or local best or first
-        var last_dist=0;
-        var use_index=move_history.length-1;
-        
-        for (var i =move_history.length-1;i>=0;i--){
-                dist=Math.sqrt(Math.pow(last_state.mousepos[0]-move_history[i].mousepos[0],2) + Math.pow(last_state.mousepos[1]-move_history[i].mousepos[1],2))
-                if (dist > min_move) {
-                        use_index = i;
-                } else if (dist < last_dist){
-                        use_index = i + 1;
-                } else if (i==0) {
-                        use_index = 0;
-                } else if ((getTimeStamp()-move_history[i].timestamp)>moveReleaseTimeLimit) {        
-                } else {
-                        last_dist = dist;
-                        continue;
-                }
-                break;
-        }
-    
-        //deltat
-        dt = last_state.timestamp - move_history[use_index].timestamp;
-        console.log("Using sample #"+i +" behind="+(move_history.length-i)+" dist="+dist+" dt="+(dt/1000)+"s");
-        
-        if (dt == 0) {
-                inertial_rot_axis_speed=[new x3dom.fields.SFVec3f(0,0,1),0];
-        }else{
-            
-            delta_matrix = last_state.matrix.mult(move_history[use_index].matrix.inverse());
-            
-            var translation = new x3dom.fields.SFVec3f(0,0,0);
-            var scaleFactor = new x3dom.fields.SFVec3f(1,1,1);
-            var rotation = new x3dom.fields.Quaternion(0,0,1,0);
-            var scaleOrientation = new x3dom.fields.Quaternion(0,0,1,0);
-            delta_matrix.getTransform(translation, rotation, scaleFactor, scaleOrientation);
-            
-            view_rot_axis_speed=rotation.toAxisAngle();
-            view_rot_axis_speed[1] /= dt;
-            
-            // Orient first arrow according to rotation  (Z-component will be small)
-            //var x_axis = new x3dom.fields.SFVec3f(1,0,0);
-            //var x_arrow_q=x3dom.fields.Quaternion.rotateFromTo(new x3dom.fields.SFVec3f(1,0,0), view_rot_axis_speed[0]);
-            //var x_arrow_aa=x_arrow_q.toAxisAngle();
-            //document.getElementById("trans_X-ARROW").setAttribute("rotation",x_arrow_aa[0].toString()+" "+x_arrow_aa[1]);
-            // Orient second arrow according to rotation  (Z-component will be small)
-            
-            var world_rot_axis=last_state.matrix.inverse().multMatrixVec(view_rot_axis_speed[0]);
-            
-            //var x1_arrow_aa=x3dom.fields.Quaternion.rotateFromTo(new x3dom.fields.SFVec3f(1,0,0), world_rot_axis).toAxisAngle();
-            //document.getElementById("trans_X-ARROW").setAttribute("rotation",x1_arrow_aa[0].toString()+" "+x1_arrow_aa[1]);
-            
-            lastRotatedTime = getTimeStamp();
-            inertial_rot_axis_speed = [world_rot_axis, view_rot_axis_speed[1]];
+
+        if (move_history != undefined){
+
+          console.log("mouse ended, history length="+move_history.length);
+          // find history snapshot farher than minimal or local best or first
+          var last_dist=0;
+          var use_index=move_history.length-1;
+
+          for (var i =move_history.length-1;i>=0;i--){
+                  dist=Math.sqrt(Math.pow(last_state.mousepos[0]-move_history[i].mousepos[0],2) + Math.pow(last_state.mousepos[1]-move_history[i].mousepos[1],2))
+                  if (dist > min_move) {
+                          use_index = i;
+                  } else if (dist < last_dist){
+                          use_index = i + 1;
+                  } else if (i==0) {
+                          use_index = 0;
+                  } else if ((getTimeStamp()-move_history[i].timestamp)>moveReleaseTimeLimit) {
+                  } else {
+                          last_dist = dist;
+                          continue;
+                  }
+                  break;
+          }
+
+          //deltat
+          dt = last_state.timestamp - move_history[use_index].timestamp;
+          console.log("Using sample #"+i +" behind="+(move_history.length-i)+" dist="+dist+" dt="+(dt/1000)+"s");
+
+          if (dt == 0) {
+                  inertial_rot_axis_speed=[new x3dom.fields.SFVec3f(0,0,1),0];
+          }else{
+
+              delta_matrix = last_state.matrix.mult(move_history[use_index].matrix.inverse());
+
+              var translation = new x3dom.fields.SFVec3f(0,0,0);
+              var scaleFactor = new x3dom.fields.SFVec3f(1,1,1);
+              var rotation = new x3dom.fields.Quaternion(0,0,1,0);
+              var scaleOrientation = new x3dom.fields.Quaternion(0,0,1,0);
+              delta_matrix.getTransform(translation, rotation, scaleFactor, scaleOrientation);
+
+              view_rot_axis_speed=rotation.toAxisAngle();
+              view_rot_axis_speed[1] /= dt;
+
+              // Orient first arrow according to rotation  (Z-component will be small)
+              //var x_axis = new x3dom.fields.SFVec3f(1,0,0);
+              //var x_arrow_q=x3dom.fields.Quaternion.rotateFromTo(new x3dom.fields.SFVec3f(1,0,0), view_rot_axis_speed[0]);
+              //var x_arrow_aa=x_arrow_q.toAxisAngle();
+              //document.getElementById("trans_X-ARROW").setAttribute("rotation",x_arrow_aa[0].toString()+" "+x_arrow_aa[1]);
+              // Orient second arrow according to rotation  (Z-component will be small)
+
+              var world_rot_axis=last_state.matrix.inverse().multMatrixVec(view_rot_axis_speed[0]);
+
+              //var x1_arrow_aa=x3dom.fields.Quaternion.rotateFromTo(new x3dom.fields.SFVec3f(1,0,0), world_rot_axis).toAxisAngle();
+              //document.getElementById("trans_X-ARROW").setAttribute("rotation",x1_arrow_aa[0].toString()+" "+x1_arrow_aa[1]);
+
+              lastRotatedTime = getTimeStamp();
+              inertial_rot_axis_speed = [world_rot_axis, view_rot_axis_speed[1]];
+          }
+          console.log("rotation axis:"+inertial_rot_axis_speed[0].toString()+", angular_velocity="+(1000*inertial_rot_axis_speed[1])+" rad/s");
+
+          inertial_rotate();
+
         }
-        console.log("rotation axis:"+inertial_rot_axis_speed[0].toString()+", angular_velocity="+(1000*inertial_rot_axis_speed[1])+" rad/s");
-        
-        inertial_rotate();
+
 }
 
 var animation_array;
@@ -798,41 +826,41 @@ var halflife = 2000;
 
 function inertial_rotate(){
     if (!dragging && inertial_rot_axis_speed && (inertial_rot_axis_speed[1]>=minRotationSpeed)) {
-        
+
         rotationTime = halflife;
         tq = fraction;
-        
+
         animation_array = [];
         dt = 0;//ms
         animation_en = true;
         animation_duration = 0;//==5000ms
-        
+
         var am = document.getElementById('x3d_canvas').runtime.getCurrentTransform(document.getElementById("anima"));
-        
+
         var ts0 = getTimeStamp();
         //console.log(ts0);
-        
+
         while(animation_en){
             inertial_rot_axis_speed[1] *= Math.exp(-tq/rotationTime);
             //console.log("Rotation Speed "+inertial_rot_axis_speed[1]+" dt="+dt);
             q=x3dom.fields.Quaternion.axisAngle(inertial_rot_axis_speed[0],inertial_rot_axis_speed[1]*tq);
             rm = new x3dom.fields.SFMatrix4f();
             rm.setRotate(q);
-            
+
             var translation = new x3dom.fields.SFVec3f(0,0,0);
             var scaleFactor = new x3dom.fields.SFVec3f(1,1,1);
             var rotation = new x3dom.fields.Quaternion(0,0,1,0);
             var scaleOrientation = new x3dom.fields.Quaternion(0,0,1,0);
             am.getTransform(translation, rotation, scaleFactor, scaleOrientation);
             aa= rotation.toAxisAngle();
-            
+
             var tmp_key = dt;
             var tmp_keyvalue = aa[0].toString()+" "+aa[1];
-            
+
             am = rm.mult(am);
-            
+
             animation_array.push([tmp_key,tmp_keyvalue]);
-            
+
             //if (dt==animation_duration) animation_en = false;
             if (inertial_rot_axis_speed[1]<=minRotationSpeed) {
                 animation_en = false;
@@ -848,28 +876,28 @@ function inertial_rotate(){
             dt += tq;
             //animation_duration += tq;
         }
-        
+
         var ts1 = getTimeStamp();
-        
+
         //find index
         var keyStr = "";
         var keyValueStr = "";
         var calc_index = Math.ceil((ts1-ts0)/tq);
-        
+
         animation_duration = animation_duration - calc_index*tq;
-        
+
         for(var i=calc_index;i<animation_array.length;i++){
             keyStr += " "+(animation_array[i][0]/animation_duration);
             keyValueStr += " "+animation_array[i][1];
         }
-        
+
         var ts = "<timeSensor DEF='time' cycleInterval='"+((animation_duration/1000))+"' loop='false' enabled='true' startTime='"+(getTimeStamp()/1000)+"'></timeSensor>\n";
         var oi = "<orientationInterpolator DEF='move' key='"+keyStr+"' keyValue='"+keyValueStr+"'></orientationInterpolator>\n";
         var r1 = "<Route fromNode='time' fromField ='fraction_changed' toNode='move' toField='set_fraction'></Route>\n";
         var r2 = "<Route fromNode='move' fromField ='value_changed' toNode='ball' toField='set_rotation'></Route>\n";
-        
+
         var x3d_cnv_anim = $(ts+oi+r1+r2);
-            
+
         $("#anima").append(x3d_cnv_anim);
         $("timeSensor").attr("enabled",true);
     }
@@ -905,38 +933,38 @@ function update_info(name,state,cmd){
                 var open_btn = $("<a>",{
                     id:"info_open",
                     title:"open part in a new window",
-                    class:"btn btn-default btn-sm nooutline"    
+                    class:"btn btn-default btn-sm nooutline"
                 }).attr("nsn",name).html("<span class=\"glyphicon glyphicon-open\" aria-hidden=\"true\"></span>").css({
                     padding: "8px 11px 7px 11px",
                     margin: "0px 0px 0px 10px"
                 });
-                
+
                 open_btn.attr("href","?"+inherited_parameters+"model="+path+"/"+name+".x3d");
-                
+
                 var wiki_btn = $("<a>",{
                     id:"info_wiki",
                     title:"look for part in Elphel wiki",
-                    class:"btn btn-default btn-sm nooutline"    
+                    class:"btn btn-default btn-sm nooutline"
                 }).attr("nsn",name).html("<span class=\"glyphicon glyphicon-book\" aria-hidden=\"true\"></span>").css({
                     padding: "8px 11px 7px 11px",
                     margin: "0px 0px 0px 10px"
                 });
-                
+
                 wiki_btn.attr("href",elphel_wiki_prefix+"\""+name+"\"&fulltext=Search");
-                
+
                 var hide_btn = $("<button>",{
                     id:"info_hide",
                     title:"hide parts",
-                    class:"btn btn-default btn-danger btn-sm nooutline"    
+                    class:"btn btn-default btn-danger btn-sm nooutline"
                 }).attr("nsn",name).html("<span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"></span>").css({
                     padding: "8px 11px 7px 11px",
                     margin: "0px 0px 0px 10px"
                 });
-                
+
                 hide_btn.click(function(){
                     model_run_cmd(name,"info-hide-click");
                 });
-                
+
                 $("#info").append(pn).append($("<span>").append(open_btn));
                 if (!nodocs) $("#info").append($("<span>").append(wiki_btn));
                 $("#info").append($("<span>").append(hide_btn)).css({display:""});
@@ -947,7 +975,7 @@ function update_info(name,state,cmd){
             break;
         case "normalize0.9":
             update_info(name,"normal","left-click");
-            break;            
+            break;
         default: return false;
     }
 }
@@ -977,13 +1005,13 @@ function model_run_cmd(name,cmd){
             }
             //int buttons - white
             $(".btn-subpart[nsn="+name+"]").removeClass("btn-success");
-            
+
             //other buttons - untouched
             break;
         case "left-click":
             if (state=="normal"){
-                //other buttons - deselect! 
-                
+                //other buttons - deselect!
+
                 //other states to normal
                 //make others who are visible - almost transparent
                 model_run_cmd(name,"normalize0.9");
@@ -992,7 +1020,7 @@ function model_run_cmd(name,cmd){
                 $("Switch[nsn="+name+"]").find("Material").attr("transparency",0.0);
                 //ext button - blue
                 $(".btn-part[nsn="+name+"]").css({background:"","font-weight":"bold"});
-                $(".btn-part[nsn="+name+"]").addClass("btn-primary").removeClass("btn-success").css({opacity:"1.0"});                
+                $(".btn-part[nsn="+name+"]").addClass("btn-primary").removeClass("btn-success").css({opacity:"1.0"});
                 if ($(".btn-part[nsn="+name+"]").attr("odd")=="true"){
                     $(".btn-part[nsn="+name+"]").removeClass("btn-odd-success");
                 }
@@ -1010,7 +1038,7 @@ function model_run_cmd(name,cmd){
                 //whichChoice 0
                 $("Switch[nsn="+name+"]").attr("whichChoice",0);
                 //ext button - green
-                
+
                 $(".btn-part[nsn="+name+"]").css({background:getColorByNSN(name),"font-weight":"normal"});
                 $(".btn-part[nsn="+name+"]").addClass("btn-success");
                 if ($(".btn-part[nsn="+name+"]").attr("odd")=="true"){
@@ -1018,7 +1046,7 @@ function model_run_cmd(name,cmd){
                 }
                 //int buttons - green
                 $(".btn-subpart[nsn="+name+"]").addClass("btn-success");
-                //other buttons - untouched   
+                //other buttons - untouched
             }else{
                 //update status to "disabled"
                 //whichChoice = -1
@@ -1046,7 +1074,7 @@ function model_run_cmd(name,cmd){
             if (state=="selected"){
                 //others - switch to normal, make transparent
                 $("Switch").each(function(){
-                    $(this).find("Material").attr("transparency",1.0);                    
+                    $(this).find("Material").attr("transparency",1.0);
                     if ($(this).attr("state")=="selected") {
                         $(this).attr("state","normal");
                         $(".btn-part[nsn="+$(this).attr("nsn")+"]").css({background:getColorByNSN($(this).attr("nsn")),"font-weight":"normal"});
@@ -1057,10 +1085,10 @@ function model_run_cmd(name,cmd){
                     }
                     if ($(this).attr("state")!="disabled") $(".btn-part[nsn="+$(this).attr("nsn")+"]").css({opacity:"0.5"});
                 });
-                
+
                 $("Switch[nsn="+name+"]").attr("state","superselected");
                 $("Switch[nsn="+name+"]").find("Material").attr("transparency",0.0);
-                
+
                 $(".btn-part[nsn="+name+"]").css({background:"","font-weight":"bold"});
                 $(".btn-part[nsn="+name+"]").removeClass("btn-success").addClass("btn-primary").css({opacity:"1.0"});
                 if ($(".btn-part[nsn="+name+"]").attr("odd")=="true"){
@@ -1070,14 +1098,14 @@ function model_run_cmd(name,cmd){
                         // superselected
                         // update status to superselected
                         // all white? but not permanent? transparent?
-                
+
                 //superselected?
                         // update status to normal
                         // all normal?
-                
+
                 //normal?
                         // update status to selected
-                        // all normal?   
+                        // all normal?
             }
             if (state=="normal"){
                 model_run_cmd(name,"left-click");
@@ -1097,7 +1125,7 @@ function model_run_cmd(name,cmd){
                 });
                 model_run_cmd(name,"click-int-all");
             }
-            break; 
+            break;
             case "info-hide-click":
                 model_run_cmd(name,"normalize");
                 model_run_cmd(name,"right-click");
@@ -1114,7 +1142,7 @@ function model_run_cmd(name,cmd){
                     }
                 }
                 $(".btn-part[nsn="+$(this).attr("nsn")+"]").css({opacity:"1.0"});
-            });                
+            });
             break;
         case "normalize0.9":
             $("Switch").each(function(){
@@ -1128,7 +1156,7 @@ function model_run_cmd(name,cmd){
                     }
                 }
                 $(".btn-part[nsn="+$(this).attr("nsn")+"]").css({opacity:"1.0"});
-            }); 
+            });
             break;
         case "reset":
             $("Switch").each(function(){
@@ -1144,7 +1172,7 @@ function model_run_cmd(name,cmd){
                 $(".btn-subpart[nsn="+$(this).attr("nsn")+"]").addClass("btn-success").attr("selected",true);
             });
             break;
-        default: 
+        default:
             return false;
     }
 }
@@ -1214,7 +1242,7 @@ function parseURL() {
     }
     if (nobuttons) inherited_parameters += "nobuttons&";
     if (animate)   inherited_parameters += "animate&";
-    
+
     var index = model.lastIndexOf("/");
     if (index>0){
         path = model.substr(0,index);
@@ -1232,10 +1260,10 @@ function getColorByNSN(nsn){
         tmp_result = 512;
     }
     tmp_result += nsn_arr[1]*2;
-    
+
     var g = 50 + ((tmp_result>>6)&0x7)*30;
     var b = 50 + ((tmp_result>>3)&0x7)*5;
     var r = 50 + ((tmp_result>>0)&0x7)*30;
-    
+
     return "rgba("+r+","+g+","+b+",1)";
 }