Changeset 19917 for issm/trunk-jpl/src/m/plot/webgl.js

Timestamp:

12/29/15 13:19:43 (9 years ago)

Author:

dlcheng

Message:

CHG (javascript): Adding in pinch zoom handling, azimuth/elevation camera rotation view, and azimuthbounds/elevationbounds clamping options with console output for debugging.

File:

• issm/trunk-jpl/src/m/plot/webgl.js (modified) (7 diffs)

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

@@ -33 +33 @@
 
         // Add context state variables
+        //TODO:Group variables in objects for organization and naming
         canvas.zoomBounds = options.getfieldvalue('zoombounds',[0,-.52]);
-        canvas.zoomFactor = Math.max(canvas.zoomBounds[1], Math.min(options.getfieldvalue('zoomfactor',canvas.zoomBounds[1]), canvas.zoomBounds[0]));
+        canvas.zoomFactor = clamp(options.getfieldvalue('zoomfactor',canvas.zoomBounds[1]), canvas.zoomBounds[1], canvas.zoomBounds[0]);
+        canvas.zoomLast = canvas.zoomFactor;
         canvas.cameraMatrix = mat4.create();
         canvas.translation = [0,0];
-        canvas.rotation = [0,0,0];
+        canvas.rotationAzimuthBounds = options.getfieldvalue('azimuthbounds',[0,360]);
+        canvas.rotationElevationBounds = options.getfieldvalue('elevationbounds',[-180,180]);
+        canvas.rotationDefault = options.getfieldvalue('view',[0,90]); //0 azimuth - up is north, 90 elevation - looking straight down
+        canvas.rotation = canvas.rotationDefault;
         canvas.controlsensitivity = 1;
 
@@ -113 +118 @@
                 texture:null,
                 translation:vec3.create(),
-                rotation:vec3.create(),
+                rotation:vec3.fromValues(-90, 0, 0),
                 scale:vec3.fromValues(1, 1, 1),
                 modelMatrix:mat4.create(),
@@ -134 +139 @@
         
         var zRotationMatrix = mat4.create();    
-        mat4.rotate(zRotationMatrix, zRotationMatrix, node["rotation"][2] * Math.PI/180.0, [0.0, 0.0, 1.0]);
+        mat4.rotate(zRotationMatrix, zRotationMatrix, radians(node["rotation"][2]), [0.0, 0.0, 1.0]);
         mat4.multiply(modelMatrix, zRotationMatrix, modelMatrix);
         var yRotationMatrix = mat4.create();    
-        mat4.rotate(yRotationMatrix, yRotationMatrix, node["rotation"][1] * Math.PI/180.0, [0.0, 1.0, 0.0]);
+        mat4.rotate(yRotationMatrix, yRotationMatrix, radians(node["rotation"][1]), [0.0, 1.0, 0.0]);
         mat4.multiply(modelMatrix, yRotationMatrix, modelMatrix);
         var xRotationMatrix = mat4.create();    
-        mat4.rotate(xRotationMatrix, xRotationMatrix, node["rotation"][0] * Math.PI/180.0, [1.0, 0.0, 0.0]);
+        mat4.rotate(xRotationMatrix, xRotationMatrix, radians(node["rotation"][0]), [1.0, 0.0, 0.0]);
         mat4.multiply(modelMatrix, xRotationMatrix, modelMatrix);
 
         return modelMatrix;
+} //}}}
+function radians (degrees) { //{{{
+  return degrees * Math.PI / 180;
+} //}}}
+function degrees (radians) { //{{{
+  return radians * 180 / Math.PI;
+} //}}}
+function clamp(value, min, max) { //{{{
+        return Math.max(min, Math.min(value, max));
 } //}}}
 //}}}
@@ -271 +285 @@
 //{{{ Interface Functions
 function onPan(ev,canvas) {
+        ev.preventDefault();
         if (ev.type == 'panstart') {
                 canvas.lastDeltaX = 0;
@@ -279 +294 @@
         //canvas.translation[1] -= (canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight * canvas.zoomFactor * 2;
         // else if double finger/pan with modifier key, move camera center
-        canvas.rotation[0] += (canvas.lastDeltaX - ev.deltaX) / canvas.clientWidth * canvas.zoomFactor * 2;
-        canvas.rotation[1] += (canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight * canvas.zoomFactor * 2;
+        canvas.rotation[0] += degrees((canvas.lastDeltaX - ev.deltaX) / canvas.clientWidth * canvas.zoomFactor * 2);
+        canvas.rotation[1] += degrees((canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight * canvas.zoomFactor * 2);
+        
+        if (canvas.rotation[0] > 360) {canvas.rotation[0] -= 360};
+        if (canvas.rotation[0] < 0) {canvas.rotation[0] += 360};
+        if (canvas.rotation[1] > 180) {canvas.rotation[1] -= 360};
+        if (canvas.rotation[1] < -180) {canvas.rotation[1] += 360};
+        
+        canvas.rotation[0] = clamp(canvas.rotation[0], canvas.rotationAzimuthBounds[0], canvas.rotationAzimuthBounds[1]);
+        canvas.rotation[1] = clamp(canvas.rotation[1], canvas.rotationElevationBounds[0], canvas.rotationElevationBounds[1])
+        
         canvas.lastDeltaX = ev.deltaX;
         canvas.lastDeltaY = ev.deltaY;
+        
+        console.log(canvas.rotation);
 }
 function onPinch(ev,canvas) {
+        ev.preventDefault();
         if (ev.type == 'pinchstart') {
-                canvas.lastScale = 1;
-        }
-        canvas.zoomFactor = Math.max(canvas.zoomBounds[1], Math.min(-ev.scale * canvas.lastScale, canvas.zoomBounds[0]));
-        canvas.lastScale = ev.scale;
+                canvas.zoomLast = canvas.zoomFactor;
+        }
+        else {
+                canvas.zoomFactor = clamp(ev.scale * canvas.zoomLast, canvas.zoomBounds[1], canvas.zoomBounds[0]);
+                console.log(canvas.zoomFactor);
+        }
 }
 function onZoom(ev,canvas) {
-        // prevent scrolling when over canvas
         ev.preventDefault();
-        var delta = 1/10 * Math.max(-1, Math.min(ev.scale || ev.wheelDelta || -ev.detail, 1));
-        canvas.zoomFactor = Math.max(canvas.zoomBounds[1], Math.min(canvas.zoomFactor - delta * canvas.zoomFactor, canvas.zoomBounds[0]));
+        var delta = 1/10 * clamp(ev.scale || ev.wheelDelta || -ev.detail, -1, 1);
+        canvas.zoomFactor = clamp(canvas.zoomFactor - delta * canvas.zoomFactor, canvas.zoomBounds[1], canvas.zoomBounds[0]);
+        console.log(canvas.zoomFactor);
 }
 //}}}
@@ -304 +333 @@
         var pMatrix = mat4.create();
         var rotationMatrix = mat4.create();
-        var traversalRotationMatrix = mat4.create();
+        var azimuthRotationMatrix = mat4.create();
         var elevationRotationMatrix = mat4.create();
 
@@ -310 +339 @@
         
         //Calculate rotation around camera focal point about worldspace origin
-        mat4.rotate(traversalRotationMatrix, traversalRotationMatrix, canvas.rotation[0], [0, 1, 0]);
-        mat4.rotate(elevationRotationMatrix, elevationRotationMatrix, canvas.rotation[1], [1, 0, 0]);
-        mat4.multiply(rotationMatrix, elevationRotationMatrix, traversalRotationMatrix);
+        mat4.rotate(azimuthRotationMatrix, azimuthRotationMatrix, radians(canvas.rotation[0]), [0, 1, 0]);
+        mat4.rotate(elevationRotationMatrix, elevationRotationMatrix, radians(canvas.rotation[1]), [1, 0, 0]);
+        mat4.multiply(rotationMatrix, elevationRotationMatrix, azimuthRotationMatrix);
         
         //Apply rotation and scaling transform