Changeset 20920

Timestamp:

07/15/16 00:31:55 (9 years ago)

Author:

dlcheng

Message:

CHG (javascript): Removing zoom dependent control sensitivity, origin view panning is now off by default. viewpanning option added. Transient movie/backgroundcolor performance optimizations.

Location:

issm/trunk-jpl/src/m/plot

Files:

• plot_unit.js (modified) (4 diffs)
• plotdoc.js (modified) (1 diff)
• webgl.js (modified) (8 diffs)

issm/trunk-jpl/src/m/plot/plot_unit.js

@@ -236 +236 @@
                                 }
                                 indices.itemSize = 1;
-                                
+                        
                                 //Initialize movie loop
                                 node["movieInterval"] = 1000 / canvas.moviefps;
@@ -242 +242 @@
                                 node["movieLength"] = timestamps.length;
                                 node["movieFrame"] = 0;
-                        
+
                                 if (canvas["movieHandler"])     clearInterval(canvas["movieHandler"]);
                                 canvas["movieHandler"] = setInterval(function () {
@@ -261 +261 @@
                                                         canvas["progressBar"].slider('refresh');
                                                 }
-                                                node["buffers"] = initBuffers(gl,[node["arrays"][0],node["arrays"][1][node["movieFrame"]],node["arrays"][2]]);
+                                                node["buffers"] = node["buffersArray"][node["movieFrame"]];
                                                 canvas["movieFrame"] = node["movieFrame"];
                                         }, node["movieInterval"]);
@@ -272 +272 @@
                         }
                         
-                        //Initalize buffers
+                        //Initialize buffers
                         node["arrays"] = [vertices, texcoords, indices];
-                        node["buffers"] = initBuffers(gl,[node["arrays"][0],node["arrays"][1][0],node["arrays"][2]]);
+                        node["buffersArray"] = [];
+                        for(var i = 0; i < timestamps.length; i++){
+                                node["buffersArray"][i] = initBuffers(gl,[node["arrays"][0],node["arrays"][1][i],node["arrays"][2]]);
+                        }
+                        node["buffers"] = node["buffersArray"][0];
                         break;
                 //}}}

issm/trunk-jpl/src/m/plot/plotdoc.js

@@ -30 +30 @@
         console.log('       "colormap": same as standard matlab option (default "jet", ex: "hsv","cool","spring","gray","Ala","Rignot",...)');
         console.log('       "edgecolor": same as standard matlab option EdgeColor (default "black", ex: color name: "blue" or RGB array: [0.5, 0.2, 0.8])');
+        console.log('       "viewPanning": enable view origin panning with two-finger touch or shift+mouse drag. (default "off", ex: "on", "off")');
         console.log('       "view": initial azimuth and elevation angles for camera (default [0,90], ex: [90, 180]');
         console.log('       "zoom": initial camera zoom as a percentage of default (default 1, ex: 1.5, 0.01)');

issm/trunk-jpl/src/m/plot/webgl.js

@@ -49 +49 @@
         canvas.cameraMatrix = mat4.create();
         canvas.translation = options.getfieldvalue('origin',[0,0,0.0]);
+        canvas.viewPanning = options.getfieldvalue('viewpanning','off') == 'on';
+        canvas.view = options.getfieldvalue('view',[0,90]); //0 azimuth - up is north, 90 elevation - looking straight down
+        canvas.rotation = canvas.view;
         canvas.rotationAzimuthBounds = options.getfieldvalue('azlim',[0,360]);
         canvas.rotationElevationBounds = options.getfieldvalue('ellim',[-180,180]);
-        canvas.view = options.getfieldvalue('view',[0,90]); //0 azimuth - up is north, 90 elevation - looking straight down
-        canvas.rotation = canvas.view;
-        canvas.controlsensitivity = options.getfieldvalue('controlsensitivity',1);
+        canvas.controlSensitivity = options.getfieldvalue('controlsensitivity',1);
         canvas.twod = options.getfieldvalue('2d','off') == 'on';
         canvas.moviePlay = true;
@@ -59 +60 @@
         canvas.movieIncrement = true;
         canvas.moviefps = options.getfieldvalue('moviefps',5);
+        var backgroundcolor = new RGBColor(options.getfieldvalue('backgroundcolor','lightcyan'));
+        if (backgroundcolor.ok) canvas.backgroundcolor = [backgroundcolor.r/255.0, backgroundcolor.g/255.0, backgroundcolor.b/255.0, 1.0];
+        else throw Error(sprintf("s%s%s\n","initWebGL error message: cound not find out background color for curent canvas ",canvas));
         
         // Add event listeners for canvas
@@ -330 +334 @@
         }
         if (ev.srcEvent.shiftKey || ev.pointers.length == 2) {
-                var deltaX = (canvas.lastDeltaX - ev.deltaX) / canvas.clientWidth / canvas.zoom * -2 * canvas.controlsensitivity;
-                var deltaY = (canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight / canvas.zoom * -2 * canvas.controlsensitivity;
+                if (!canvas.viewPanning) return;
+                var deltaX = (canvas.lastDeltaX - ev.deltaX) / canvas.clientWidth / canvas.zoom * -2 * canvas.controlSensitivity;
+                var deltaY = (canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight / canvas.zoom * -2 * canvas.controlSensitivity;
                 
                 if (canvas.twod) {
@@ -343 +348 @@
         }
         else {
-                canvas.rotation[0] += degrees((canvas.lastDeltaX - ev.deltaX) / canvas.clientWidth / canvas.zoom * -2 * canvas.controlsensitivity);
-                canvas.rotation[1] += degrees((canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight / canvas.zoom * -2 * canvas.controlsensitivity);
+                canvas.rotation[0] += degrees((canvas.lastDeltaX - ev.deltaX) / canvas.clientWidth * -2 * canvas.controlSensitivity);
+                canvas.rotation[1] += degrees((canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight * -2 * canvas.controlSensitivity);
                 
                 if (canvas.rotation[0] > 360) {canvas.rotation[0] -= 360};
@@ -356 +361 @@
         canvas.lastDeltaX = ev.deltaX;
         canvas.lastDeltaY = ev.deltaY;
-        
+
         if (displaylog) console.log(canvas.rotation);
 } //}}}
@@ -371 +376 @@
 function onZoom(ev,canvas,displaylog) { //{{{
         ev.preventDefault();
-        var delta = clamp(clamp(ev.scale || ev.wheelDelta || -ev.detail, -1, 1) * canvas.controlsensitivity * canvas.zoom / 20, -1.0, 1.0);
+        var delta = clamp(clamp(ev.scale || ev.wheelDelta || -ev.detail, -1, 1) * canvas.controlSensitivity * canvas.zoom / 20, -1.0, 1.0);
         canvas.zoom = clamp(canvas.zoom + delta, canvas.zoomBounds[0], canvas.zoomBounds[1]);
         
@@ -486 +491 @@
         }
         
-        if (canvas.textcanvas) {
-                canvas.textcanvas.draw(canvas);
-        }
-
-        // Set clear color to black, fully opaque
+        if (canvas.textcanvas) canvas.textcanvas.draw(canvas);
+
         var gl = canvas.gl;
-        var backgroundcolor = new RGBColor(options.getfieldvalue('backgroundcolor','lightcyan'));
-        if (backgroundcolor.ok) gl.clearColor(backgroundcolor.r/255.0, backgroundcolor.g/255.0, backgroundcolor.b/255.0, 1.0);
-        else throw Error(sprintf("s%s%s\n","initWebGL error message: cound not find out background color for curent canvas ",canvas));
+        gl.clearColor(canvas.backgroundcolor[0], canvas.backgroundcolor[1], canvas.backgroundcolor[2], canvas.backgroundcolor[3]);
                 
         // Skip drawing of new frame if any texture is not yet loaded
@@ -512 +512 @@
         for (var i = drawPassNumber - 1; i >= 0; i--) {
                 for (var node in nodes) {
-                        if (nodes[node]["drawOrder"] == i) {
-                                drawSceneGraphNode(canvas,nodes[node]);
-                        }
+                        if (nodes[node]["drawOrder"] == i) drawSceneGraphNode(canvas,nodes[node]);
                 }
         }