Changeset 20790


Ignore:
Timestamp:
06/21/16 19:21:25 (9 years ago)
Author:
dlcheng
Message:

CHG (javascript): fixing translations for 2d plots. Adding in colorbarinnerlabels options implementation. Updating docs.

Location:
issm/trunk-jpl/src/m/plot
Files:
3 edited

Legend:

Unmodified
Added
Removed

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

    r20777 r20790  
    1717                        var caxis = options.getfieldvalue('caxis',[ArrayMin(data),ArrayMax(data)]);
    1818                        var colorbarorientiation = options.getfieldvalue('colorbarorientation','vertical');
     19                        var colorbarinnerlabels = options.getfieldvalue('colorbarinnerlabels','off');
    1920                        var cheightoffset = options.getfieldvalue('colorbarfontsize',18);
    2021                        var cwidthoffset = options.getfieldvalue('colorbarfontsize',18)*3;
    2122                        var cwidthscale = 0.5; //Default size of actual colorbar width, relative to canvas width (range [0,1])
    2223                        var cheightscale = 0.875; //Default size of actual colorbar height, relative to canvas height (range [0,1])
    23                         var ccontext,ccanvas,ccanvasid,ccanvashtml,cheight,cwidth,color,y,x;
     24                        var ccontext,ccanvas,ccanvasid,ccanvashtml,cheight,cwidth,color,y,x,cgradient,cmap,colorbar,textAlign,a,b,c,d,e,f,g,h;
    2425                        //}}}
    2526                        //Set colorbar lables {{{
    … …  
    3940                                }
    4041                        } //}}}
     42                        ccanvasid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid')+'_colorbar');
     43                        ccanvashtml = document.getElementById(ccanvasid);
     44                        ccanvas = $('#'+ccanvasid);
     45                        ccontext = ccanvas[0].getContext('2d');
     46                        ccontext.clearRect(0,0, ccanvashtml.width, ccanvashtml.height);
     47                        ccontext.beginPath();
     48                        cmap = options.getfieldvalue('colormap','jet');
     49                        colorbar = colorbars[cmap];
    4150                        //Handle orientation {{{
    42                         if (colorbarorientiation=='vertical') { //{{{
    43                                 ccanvasid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid')+'_colorbar');
    44                                 ccanvashtml = document.getElementById(ccanvasid);
     51                        if (colorbarorientiation=='vertical') {
    4552                                cwidth = ccanvashtml.width*cwidthscale*options.getfieldvalue('colorbarwidth',1);
    4653                                cheight = ccanvashtml.height*cheightscale*options.getfieldvalue('colorbarheight',1);
    47                                 ccanvas = $('#'+ccanvasid);
    48                                 ccontext = ccanvas[0].getContext('2d');
    49                                 ccontext.clearRect(0,0, ccanvashtml.width, ccanvashtml.height);
    50                                 ccontext.beginPath();
    51 
    52                                 var cgradient = ccontext.createLinearGradient(0,cheightoffset/2,0,cheight);
    53                                 var cmap = options.getfieldvalue('colormap','jet');
    54                                 var colorbar = colorbars[cmap];
    55                                 for (var i=0; i < colorbar.length; i++) {
    56                                         color = colorbar[colorbar.length-i-1];
    57                                         color = [Math.round(color[0]*255),Math.round(color[1]*255),Math.round(color[2]*255)];   
    58                                         cgradient.addColorStop(i/colorbar.length,'rgba('+color.toString()+',1.0)');
    59                                 }
    60                                 ccontext.fillStyle=cgradient;
    61                                 ccontext.fillRect(0,cheightoffset*3/2,cwidth,cheight);
    62                                
    63                                 //Draw colorbar border
    64                                 ccontext.beginPath();
    65                                 ccontext.lineWidth='1';
    66                                 ccontext.strokeStyle=options.getfieldvalue('colorbarfontcolor','black');
    67                                 ccontext.rect(0,cheightoffset*3/2,cwidth,cheight);
    68                                 ccontext.stroke();
    69                                
     54                                cgradient = ccontext.createLinearGradient(0,cheightoffset/2,0,cheight);
     55                                textAlign = 'left';
     56                                a = 0;
     57                                b = cheightoffset*3/2;
     58                                c = 0;
     59                        }
     60                        else {
     61                                cwidth = ccanvashtml.width*0.7*options.getfieldvalue('colorbarwidth',1);
     62                                cheight = ccanvashtml.height*0.4*options.getfieldvalue('colorbarheight',1);
     63                                cgradient = ccontext.createLinearGradient(cwidth+cwidthoffset,0,cwidthoffset,0);               
     64                                textAlign = 'center';
     65                                a = cwidthoffset;
     66                                b = cheightoffset;
     67                                c = cwidth/2+cwidthoffset;
     68                        } //}}}
     69                        //Handle internal labels {{{
     70                        if (colorbarinnerlabels=='on') {
     71                                textAlign = 'center';
     72                                d = (cdivisions/(cdivisions+1.0));
     73                                e = (1.0/(cdivisions+1.0));
     74                                f = 2;
     75                                g = 1;
     76                                h = cwidth/2;
     77                        }
     78                        else {
     79                                d = 1;
     80                                e = 0;
     81                                f = 1;
     82                                g = 0;
     83                                h = cwidth+0.2*cwidth;
     84                        } //}}}
     85
     86                        for (var i=0; i < colorbar.length; i++) {
     87                                color = colorbar[colorbar.length-i-1];
     88                                color = [Math.round(color[0]*255),Math.round(color[1]*255),Math.round(color[2]*255)];   
     89                                cgradient.addColorStop(i/colorbar.length*d+e,'rgba('+color.toString()+',1.0)');
     90                        }
     91                        ccontext.fillStyle=cgradient;
     92                        ccontext.fillRect(a,b,cwidth,cheight);
     93                       
     94                        //Draw colorbar border
     95                        ccontext.beginPath();
     96                        ccontext.lineWidth='1';
     97                        ccontext.strokeStyle=options.getfieldvalue('colorbarfontcolor','black');
     98                        ccontext.rect(a,b,cwidth,cheight);
     99                        ccontext.stroke();
     100                       
     101                        if (colorbarorientiation=='vertical') { //{{{
    70102                                for (var i=0; i <= cdivisions; i++) {
    71                                         y = i/cdivisions*cheight+cheightoffset/2;
     103                                        y = i/(cdivisions+g)*cheight+cheightoffset/2;
    72104                                        x = 0.2*cwidth;
    73                                         ccontext.beginPath();
    74                                         ccontext.moveTo(0,y+cheightoffset);
    75                                         ccontext.lineTo(x,y+cheightoffset);
    76                                         ccontext.moveTo(cwidth-x,y+cheightoffset);
    77                                         ccontext.lineTo(cwidth,y+cheightoffset);
    78                                         ccontext.stroke();
    79105                                        ccontext.font=String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif';
    80106                                        ccontext.fillStyle=options.getfieldvalue('colorbarfontcolor','black');
    81                                         ccontext.textAlign='left';
    82                                         ccontext.fillText(labels[i],cwidth+x,y+cheightoffset*3/2);
    83                                 }
    84                                 if (options.exist('colorbartitle')) {
    85                                         ccontext.font=String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif';
    86                                         ccontext.fillStyle=options.getfieldvalue('colorbarfontcolor','black');
    87                                         ccontext.textAlign='left';
    88                                         ccontext.textBaseline='bottom';
    89                                         ccontext.fillText(options.getfieldvalue('colorbartitle'),0,cheightoffset);
    90                                 }
    91                         } //}}}
    92                         else { //colorbarorientiation=='horizontal' {{{
    93                                 ccanvasid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid')+'_colorbar');
    94                                 ccanvashtml = document.getElementById(ccanvasid);
    95                                 cwidth = ccanvashtml.width*0.7*options.getfieldvalue('colorbarwidth',1);
    96                                 cheight = ccanvashtml.height*0.4*options.getfieldvalue('colorbarheight',1);
    97                                 ccanvas = $('#'+ccanvasid);
    98                                 ccontext = ccanvas[0].getContext('2d');
    99                                 ccontext.clearRect(0,0, ccanvashtml.width, ccanvashtml.height);
    100                                 ccontext.beginPath();
    101 
    102                                 var cgradient = ccontext.createLinearGradient(cwidth+cwidthoffset,0,cwidthoffset,0);           
    103                                 var cmap = options.getfieldvalue('colormap','jet');
    104                                 var colorbar = colorbars[cmap];
    105                                 for (var i=0; i < colorbar.length; i++) {
    106                                         color = colorbar[colorbar.length-i-1];
    107                                         color = [Math.round(color[0]*255),Math.round(color[1]*255),Math.round(color[2]*255)];   
    108                                         cgradient.addColorStop(i/colorbar.length,'rgba('+color.toString()+',1.0)');
    109                                 }
    110                                 ccontext.fillStyle=cgradient;
    111                                 ccontext.fillRect(cwidthoffset,cheightoffset,cwidth,cheight);
    112                                
    113                                 //Draw colorbar border
    114                                 ccontext.beginPath();
    115                                 ccontext.lineWidth='1';
    116                                 ccontext.strokeStyle=options.getfieldvalue('colorbarfontcolor','black');
    117                                 ccontext.rect(cwidthoffset,cheightoffset,cwidth,cheight);
    118                                 ccontext.stroke();
    119                                
     107                                        ccontext.textAlign=textAlign;
     108                                        ccontext.textBaseline='top';
     109                                        ccontext.fillText(labels[i],h,y+cheightoffset*(g+0.5));                                 
     110                                        ccontext.beginPath();
     111                                        ccontext.moveTo(0,y+cheightoffset*f);
     112                                        ccontext.lineTo(x,y+cheightoffset*f);
     113                                        ccontext.moveTo(cwidth-x,y+cheightoffset*f);
     114                                        ccontext.lineTo(cwidth,y+cheightoffset*f);
     115                                        ccontext.stroke();
     116                                }
     117                        }
     118                        else {
    120119                                for (var i=0; i <= cdivisions; i++) {
    121120                                        y = 0.2*cheight;
    122121                                        x = i/cdivisions*cwidth;
     122                                        ccontext.font=String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif';
     123                                        ccontext.fillStyle=options.getfieldvalue('colorbarfontcolor','black');
     124                                        ccontext.textAlign=textAlign;
     125                                        ccontext.fillText(labels[cdivisions-i],x+cwidthoffset,cheight+cheightoffset*2);
    123126                                        ccontext.beginPath();
    124127                                        ccontext.moveTo(x+cwidthoffset,cheightoffset);
    … …  
    127130                                        ccontext.lineTo(x+cwidthoffset,cheight+cheightoffset);
    128131                                        ccontext.stroke();
    129                                         ccontext.font=String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif';
    130                                         ccontext.fillStyle=options.getfieldvalue('colorbarfontcolor','black');
    131                                         ccontext.textAlign='center';
    132                                         ccontext.fillText(labels[cdivisions-i],x+cwidthoffset,cheight+cheightoffset*2);
    133                                 }
    134                                 if (options.exist('colorbartitle')) {
    135                                         ccontext.font=String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif';
    136                                         ccontext.fillStyle=options.getfieldvalue('colorbarfontcolor','black');
    137                                         ccontext.textAlign='center';
    138                                         ccontext.textBaseline='bottom';
    139                                         ccontext.fillText(options.getfieldvalue('colorbartitle'),cwidth/2+cwidthoffset,cheightoffset);
    140                                 }
     132                                }
     133                        }
     134                        if (options.exist('colorbartitle')) {
     135                                ccontext.font=String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif';
     136                                ccontext.fillStyle=options.getfieldvalue('colorbarfontcolor','black');
     137                                ccontext.textAlign='left';
     138                                ccontext.textBaseline='bottom';
     139                                ccontext.fillText(options.getfieldvalue('colorbartitle'),c,cheightoffset);
    141140                        } //}}}
    142141                        //}}}

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

    r20769 r20790  
    2424        console.log('       "colorbarprecision": colorbar label digit precision (default 3, ex: 1, 4)');       
    2525        console.log('       "colorbarorientation": oreintation of colorbar (default "vertical", ex: "horizontal")');
     26        console.log('       "colorbarinnerlabels": choose whether labels are inside colorbar (default "off", ex: "on", "off")');
    2627        console.log('       "colorbarfontsize": specify colorbar font size (default 1, ex: 14, 22)');
    2728        console.log('       "colorbarfontcolor": specify colorbar font color (default "black", ex: "green","blue")');

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

    r20771 r20790  
    335335                var deltaY = (canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight / canvas.zoom * -2 * canvas.controlsensitivity;
    336336               
    337                 canvas.translation[0] += Math.cos(radians(canvas.rotation[0])) * deltaX - Math.sin(radians(canvas.rotation[0])) * deltaY;
    338                 canvas.translation[1] += Math.sin(radians(canvas.rotation[0])) * deltaX + Math.cos(radians(canvas.rotation[0])) * deltaY;
     337                if (canvas.twod) {
     338                        canvas.translation[0] += Math.cos(radians(canvas.rotation[0])) * deltaX - Math.sin(radians(0)) * deltaY;
     339                        canvas.translation[1] += Math.sin(radians(canvas.rotation[0])) * deltaX + Math.cos(radians(0)) * deltaY;
     340                }
     341                else {
     342                        canvas.translation[0] += Math.cos(radians(canvas.rotation[0])) * deltaX - Math.sin(radians(canvas.rotation[0])) * deltaY;
     343                        canvas.translation[1] += Math.sin(radians(canvas.rotation[0])) * deltaX + Math.cos(radians(canvas.rotation[0])) * deltaY;
     344                }
    339345        }
    340346        else {
Note: See TracChangeset for help on using the changeset viewer.