Changeset 20769

Timestamp:

06/17/16 21:43:07 (9 years ago)

Author:

dlcheng

Message:

CHG (javascript): js api standardidation and changes (initialzoom/zoom, cmap/colormap, image/overlay_image, colorbarcanvasid/colorbarid, azimuthbounds/azlim, elevationbounds/azlim, zoombounds/zoomlim) . Full js plot documentation. Implementing linewidth and scaling options for quiver plots.

Location:

issm/trunk-jpl/src/m/plot

Files:

• applyoptions.js (modified) (5 diffs)
• plot_mesh.js (modified) (2 diffs)
• plot_overlay.js (modified) (1 diff)
• plot_quiver.js (modified) (4 diffs)
• plotdoc.js (modified) (2 diffs)
• webgl.js (modified) (4 diffs)

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

@@ -41 +41 @@
                         //Handle orientation {{{
                         if (colorbarorientiation=='vertical') { //{{{
-                                ccanvasid = options.getfieldvalue('colorbarcanvasid',options.getfieldvalue('canvasid')+'_colorbar');
+                                ccanvasid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid')+'_colorbar');
                                 ccanvashtml = document.getElementById(ccanvasid);
                                 cwidth = ccanvashtml.width*cwidthscale*options.getfieldvalue('colorbarwidth',1);
@@ -51 +51 @@
 
                                 var cgradient = ccontext.createLinearGradient(0,cheightoffset/2,0,cheight);
-                                var cmap = options.getfieldvalue('cmap','jet');
+                                var cmap = options.getfieldvalue('colormap','jet');
                                 var colorbar = colorbars[cmap];
                                 for (var i=0; i < colorbar.length; i++) {
@@ -91 +91 @@
                         } //}}}
                         else { //colorbarorientiation=='horizontal' {{{
-                                ccanvasid = options.getfieldvalue('colorbarcanvasid',options.getfieldvalue('canvasid')+'_colorbar');
+                                ccanvasid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid')+'_colorbar');
                                 ccanvashtml = document.getElementById(ccanvasid);
                                 cwidth = ccanvashtml.width*0.7*options.getfieldvalue('colorbarwidth',1);
@@ -101 +101 @@
 
                                 var cgradient = ccontext.createLinearGradient(cwidth+cwidthoffset,0,cwidthoffset,0);            
-                                var cmap = options.getfieldvalue('cmap','jet');
+                                var cmap = options.getfieldvalue('colormap','jet');
                                 var colorbar = colorbars[cmap];
                                 for (var i=0; i < colorbar.length; i++) {
@@ -159 +159 @@
         tgradient = tcontext.createLinearGradient(0,0,0,256);
                 
-        var cmap = options.getfieldvalue('cmap','jet');
+        var cmap = options.getfieldvalue('colormap','jet');
         var colorbar = colorbars[cmap];
         for (var i=0; i < colorbar.length; i++) {

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

@@ -64 +64 @@
         node["shaderName"] = "colored";
         node["shader"] = gl["shaders"][node["shaderName"]]["program"];
+        node["lineWidth"] = options.getfieldvalue('linewidth',1);
         node["scale"] = [scale, scale, scale * matrixscale];
         node["translation"] = [(xmin + xmax) / (-2 / scale), (ymin + ymax) / (-2 / scale), (zmin + zmax) / (2 / scale)];
@@ -77 +78 @@
 
         //retrieve some options
-        var linewidth=options.getfieldvalue('linewidth',1);
-        var edgecolor=new RGBColor(options.getfieldvalue('edgecolor','black'));
+        var edgecolor = new RGBColor(options.getfieldvalue('edgecolor','black'));
         if (edgecolor.ok) edgecolor = [edgecolor.r/255.0, edgecolor.g/255.0, edgecolor.b/255.0, 1.0];
         else throw Error(sprintf("s%s%s\n","initWebGL error message: cound not find out edgecolor color for curent canvas ",canvas));

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

@@ -67 +67 @@
         node["translation"] = [(xmin + xmax) / (-2 / scale), (ymin + ymax) / (-2 / scale), (zmin + zmax) / (2 / scale)];
         node["modelMatrix"] = recalculateModelMatrix(node);
-        node["texture"] = initTexture(gl,options.getfieldvalue('image'));
+        node["texture"] = initTexture(gl,options.getfieldvalue('overlay_image'));
         node["alpha"] = options.getfieldvalue('outeralpha',1.0);
         node["drawOrder"] = 1;

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

@@ -66 +66 @@
         node["shaderName"] = "colored";
         node["shader"] = gl["shaders"][node["shaderName"]]["program"];
+        node["lineWidth"] = options.getfieldvalue('linewidth',1);
         node["scale"] = [scale, scale, scale * matrixscale];
         node["translation"] = [(xmin + xmax) / (-2 / scale), (ymin + ymax) / (-2 / scale), (zmin + zmax) / (2 / scale)];
@@ -80 +81 @@
 
         //retrieve some options
-        var linewidth=options.getfieldvalue('linewidth',1);
-        
         var edgecolor=new RGBColor(options.getfieldvalue('edgecolor','black'));
         if (edgecolor.ok) edgecolor = [edgecolor.r/255.0, edgecolor.g/255.0, edgecolor.b/255.0, 1.0];
@@ -98 +97 @@
                 var magnitude;
                 var color = edgecolor;
+                var scaling = options.getfieldvalue('scaling',1);
                 for(var i = 0; i < x.length; i++){
                         //Check for NaN values and remove from indices array as necessary, but preserve vertex array spacing
@@ -111 +111 @@
                         
                         xyz2 = vec3.fromValues(vx[i], vy[i], 0.0);
-                        magnitude = 1000.0; //mesh resolution
+                        magnitude = 1000.0*scaling; //mesh resolution
                         vec3.normalize(direction, xyz2);
                         vec3.scale(direction, direction, magnitude);

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

@@ -7 +7 @@
         //TODO: Standardize image to overlay_image, heightscale to scaling, colorbarfontsize/color, clarify innermask/outermask, edgecolor implementation, check colormap, 
 
-        console.log(' WARNING: documentation may not reflect entire implementation as of June 16 2016');
+        console.log(' WARNING: starred methods (*) are experimental and not guarenteed to be stable');
         console.log('   Plot usage: plotmodel(model,varargin)');
         console.log('   Options: ');
@@ -16 +16 @@
         console.log('                  - "mesh": draw mesh using trisurf');
         console.log('                  - "quiver": quiver plot');
-        console.log('       "caxis": modify  colorbar range. (array of type [a b] where b>=a)');
-        console.log('       "backgroundcolor": plot background color. (default is "w")');
-        console.log('       "colorbar": add colorbar (string "on" or "off")');
-        console.log('       "colorbartitle": colorbar title (string)');
+        console.log('       "caxis": modify  colorbar range. (array of type [a, b] where b>=a)');
+        console.log('       "backgroundcolor": plot background color. (default "lightcyan", ex: "green","blue")');
+        console.log('       "colorbar": add colorbar (default "off", ex: "on", "off")');
+        console.log('       "colorbarid": colorbar canvas id (string)');
+        console.log('       "colorbartitle": colorbar title (string)'); 
+        console.log('       "colorbarnticks": number of colorbar ticks (default 6, ex: 2, 10)');        
+        console.log('       "colorbarprecision": colorbar label digit precision (default 3, ex: 1, 4)');        
+        console.log('       "colorbarorientation": oreintation of colorbar (default "vertical", ex: "horizontal")');
+        console.log('       "colorbarfontsize": specify colorbar font size (default 1, ex: 14, 22)');
+        console.log('       "colorbarfontcolor": specify colorbar font color (default "black", ex: "green","blue")');
         console.log('       "colorbarwidth": multiplier (default 1) to the default width colorbar');
         console.log('       "colorbarheight": multiplier (default 1) to the default height colorbar');
-        console.log('       "colormap": same as standard matlab option ("jet","hsv","cool","spring","gray","Ala","Rignot",...)');
-        console.log('       "edgecolor": same as standard matlab option EdgeColor (color name: "black" or RGB array: [0.5 0.2 0.8])');
-        console.log('       "view": same as standard matlab option (ex: 2, 3 or [90 180]');
-        console.log('       "xlim": same as standard matlab option (ex: [0 500])');
-        console.log('       "ylim": same as standard matlab option');
-        console.log('       "zlim": same as standard matlab option');
-        console.log('       "xlabel": same as standard matlab option (ex:"km")');
-        console.log('       "overlay": yes or no. This will overlay a radar amplitude image behind');
-        console.log('       "overlay_image": path to overlay image. provide overlay_xlim, overlay_ylim, overlay_xposting and overlay_yposting options also');
-        console.log('       "alpha": transparency coefficient (the higher, the more transparent). Default is 1.5');
-        console.log('       "scaling": scaling factor used by quiver plots. Default is 0.4');
-        console.log('       "linewidth": line width for expconsole.log plot (use a cell of strings if more than one)');
+        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('       "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)');
+        console.log('       "centeroffset": initial camera offset from model center (default [0,0,0.0], ex: [-2, 1.5, 0.01])');
+        console.log('       "xlim": x coordinates to fit inside camera (ex: [0, 500])');
+        console.log('       "ylim": y coordinates to fit inside camera (ex: [0, 500])');
+        console.log('       "zlim": z coordinates to fit inside camera (ex: [0, 500])');
+        console.log('       "azlim": azimuth view limits (ex: [0, 180])');
+        console.log('       "ellim": elevation view limits (ex: [-90, 90])');
+        console.log('       "zoomlim": zoom view limits (ex: [0.05, 10])');
+        console.log('       "displayview": print view value to console');
+        console.log('       "displayzoom": print zoom value to console');
+        console.log('       "controlsensitivity": sensitivty of view/zoom changes as a percentage of default (default 1, ex: 0.5, 2.75)');
+        console.log('       "2d": renders orthographic camera with view set to [0, 90] (default "off", ex: "on", "off")');
+        console.log('       "moviefps": frames per second when displaying transient runs (default 5, ex: 1, 10)');
+        console.log('       "overlay": overlay a radar amplitude image behind (default "off", ex: "on", "off")');
+        console.log('       "overlay_image": path to overlay image (default "off", ex: "on", "off")');
+        console.log('       "alpha": transparency coefficient 0.0 to 1.0, the lower, the more transparent. (default 1.0, ex: 0.5, 0.25)');
+        console.log('       "heightscale": scaling factor to accentuate height. (default 1, ex: 0.5, 100)');
+        console.log('       "scaling*": scaling factor used by quiver plots. Default is 0.4');
+        console.log('       "linewidth*": line width for mesh, quiver, and contour plots, currently limited by WebGL to 1. (default 1, ex: 2, 5)');
+        console.log('       "cloud*": plot a cloud of points, given a flat array of 3d coordinates (ex: [0.0, 0.0, 0.0, 1.0, 1.0, 1.0])');
+        console.log('       "expdisp*": plot exp file on top of a data plot. provide exp file as an argument (use a cell of strings if more than one)');
+        console.log('       "textlabels*": plot text labels rendered in 3d space, using an array of text/coordinate pairs (ex: [{"pos":[0.0,0.0,0.0],"text":"origin"}])');
+        console.log('       "outermask*": Special mask that colors all parts of a overlay mesh below a height a certain color. provide outermaskheight and outermaskcolor options also (default "off", ex: "on", "off")');
+        console.log('       "innermask*": Special mask that colors all parts of a data mesh below a height a certain color. provide innermaskheight and innermaskcolor options also (default "off", ex: "on", "off")');
         console.log('       "mask": list of flags of size numberofnodes or numberofelements. Only "true" values are plotted ');
         console.log('       "log": value of log');

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

@@ -4 +4 @@
         //Initialize open Gl for each canvas, if needed: 
         var canvas=document.getElementById(options.getfieldvalue('canvasid'));
-        if (!canvas) {
-                canvas = $('<div><canvas id="'+options.getfieldvalue('canvasid')+'" width="'+options.getfieldvalue('canvassize',480)+'" height="'+options.getfieldvalue('canvassize',480)+'"></canvas></div>)')
-                canvas.css({'height':String(options.getfieldvalue('canvassize',480)+'px')});
-                canvas.appendTo('body');
-        }
         if (!canvas.initialized) {
                 canvas.gl = initWebGL(canvas,options);
@@ -51 +46 @@
         //TODO:Group variables in objects for organization and naming
         canvas.gl = gl;
-        canvas.zoomBounds = options.getfieldvalue('zoombounds',[0.001,100.0]);
-        canvas.zoomFactor = clamp(options.getfieldvalue('zoomfactor',1.0), canvas.zoomBounds[0], canvas.zoomBounds[1]);
+        canvas.zoomBounds = options.getfieldvalue('zoomlim',[0.001,100.0]);
+        canvas.zoomFactor = clamp(options.getfieldvalue('zoom',1.0), canvas.zoomBounds[0], canvas.zoomBounds[1]);
         canvas.zoomLast = canvas.zoomFactor;
         canvas.cameraMatrix = mat4.create();
         canvas.translation = options.getfieldvalue('centeroffset',[0,0,0.0]);
-        canvas.rotationAzimuthBounds = options.getfieldvalue('azimuthbounds',[0,360]);
-        canvas.rotationElevationBounds = options.getfieldvalue('elevationbounds',[-180,180]);
+        canvas.rotationAzimuthBounds = options.getfieldvalue('azlim',[0,360]);
+        canvas.rotationElevationBounds = options.getfieldvalue('ellim',[-180,180]);
         canvas.rotationDefault = options.getfieldvalue('view',[0,90]); //0 azimuth - up is north, 90 elevation - looking straight down
         canvas.rotation = canvas.rotationDefault;
@@ -141 +136 @@
                 useIndexBuffer:true,
                 alpha:1.0,
+                lineWidth:1.0,
                 disableDepthTest:false, 
                 enableCullFace:false,
@@ -454 +450 @@
                 gl.disable(gl.DEPTH_TEST);
         }
+        gl.lineWidth(node["lineWidth"]);
         gl.blendFunc (gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
         if  (node["useIndexBuffer"] == true) {