Changeset 20829


Ignore:
Timestamp:
06/29/16 12:10:32 (9 years ago)
Author:
dlcheng
Message:

CHG (javascript): Updating colorbar implementation to use html elements. Removing colorbarorientation support for horizontal colorbars.

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

Legend:

Unmodified
Added
Removed

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

    r20790 r20829  
    1818                        var colorbarorientiation = options.getfieldvalue('colorbarorientation','vertical');
    1919                        var colorbarinnerlabels = options.getfieldvalue('colorbarinnerlabels','off');
    20                         var cheightoffset = options.getfieldvalue('colorbarfontsize',18);
    21                         var cwidthoffset = options.getfieldvalue('colorbarfontsize',18)*3;
    22                         var cwidthscale = 0.5; //Default size of actual colorbar width, relative to canvas width (range [0,1])
    23                         var cheightscale = 0.875; //Default size of actual colorbar height, relative to canvas height (range [0,1])
    24                         var ccontext,ccanvas,ccanvasid,ccanvashtml,cheight,cwidth,color,y,x,cgradient,cmap,colorbar,textAlign,a,b,c,d,e,f,g,h;
    25                         //}}}
    26                         //Set colorbar lables {{{
     20                        var cheightoffset = options.getfieldvalue('colorbarfontsize',18)*options.getfieldvalue('colorbarheight',1);
     21                        var ccanvasid,ctitleid,clabelsid,ccanvas,ctitle,clabels,ccontext,cmap,colorbar,cwidth,cheight,cgradient,color,y,x;
     22                        //}}}
     23                        //Create colorbar labels {{{
    2724                        var labels = [];
    2825                        var cdivisions = options.getfieldvalue('colorbarnticks',6);
    2926                        var caxisdelta = caxis[1] - caxis[0];
    30                         var clabelitem;
    3127                        var precision = options.getfieldvalue('colorbarprecision',3);
    3228                        if (options.getfieldvalue('log','off')!='off') {
    … …  
    4036                                }
    4137                        } //}}}
    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);
     38                        //Initialize colorbar canvas {{{
     39                       
     40                        ccanvasid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid')+'-colorbar');                 
     41                        ccanvas = $('#'+ccanvasid)[0];
     42                        cwidth = ccanvas.width*options.getfieldvalue('colorbarwidth',1);
     43                        cheight = ccanvas.height*options.getfieldvalue('colorbarheight',1);
     44                        ccanvas.width = cwidth;
     45                        ccanvas.height = cheight;
     46                        ccontext = ccanvas.getContext('2d');
     47                        ccontext.clearRect(0,0, cwidth, cheight);
    4748                        ccontext.beginPath();
    4849                        cmap = options.getfieldvalue('colormap','jet');
    4950                        colorbar = colorbars[cmap];
    50                         //Handle orientation {{{
    51                         if (colorbarorientiation=='vertical') {
    52                                 cwidth = ccanvashtml.width*cwidthscale*options.getfieldvalue('colorbarwidth',1);
    53                                 cheight = ccanvashtml.height*cheightscale*options.getfieldvalue('colorbarheight',1);
    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 
     51                        cgradient = ccontext.createLinearGradient(0,cheightoffset/2,0,cheight);
     52                        //}}}
     53                        //Draw colorbar gradient {{{
    8654                        for (var i=0; i < colorbar.length; i++) {
    8755                                color = colorbar[colorbar.length-i-1];
    8856                                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)');
     57                                cgradient.addColorStop(i/colorbar.length*(cdivisions/(cdivisions+1.0))+(1.0/(cdivisions+1.0)),'rgba('+color.toString()+',1.0)');
    9058                        }
    9159                        ccontext.fillStyle=cgradient;
    92                         ccontext.fillRect(a,b,cwidth,cheight);
    93                        
    94                         //Draw colorbar border
     60                        ccontext.fillRect(0,0,cwidth,cheight);
     61                        //}}}
     62                        //Draw colorbar border {{{
    9563                        ccontext.beginPath();
    9664                        ccontext.lineWidth='1';
    9765                        ccontext.strokeStyle=options.getfieldvalue('colorbarfontcolor','black');
    98                         ccontext.rect(a,b,cwidth,cheight);
     66                        ccontext.rect(0,0,cwidth,cheight);
    9967                        ccontext.stroke();
    100                        
    101                         if (colorbarorientiation=='vertical') { //{{{
    102                                 for (var i=0; i <= cdivisions; i++) {
    103                                         y = i/(cdivisions+g)*cheight+cheightoffset/2;
    104                                         x = 0.2*cwidth;
    105                                         ccontext.font=String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif';
    106                                         ccontext.fillStyle=options.getfieldvalue('colorbarfontcolor','black');
    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                                 }
     68                        //}}}
     69                        //Draw colorbar labels {{{
     70                        clabelsid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid')+'-colorbar')+'-labels';
     71                        clabels = $('#'+clabelsid);
     72                        clabels.height(cheight);
     73                        clabels.css({'color':options.getfieldvalue('colorbarfontcolor','black'), 'font-size':options.getfieldvalue('colorbarfontsize',18)+'px'});
     74                        if (colorbarinnerlabels=='on') {
     75                                clabels.removeClass('sim-colorbar-labels-outer');
     76                                clabels.addClass('sim-colorbar-labels-inner');
    11777                        }
    11878                        else {
    119                                 for (var i=0; i <= cdivisions; i++) {
    120                                         y = 0.2*cheight;
    121                                         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);
    126                                         ccontext.beginPath();
    127                                         ccontext.moveTo(x+cwidthoffset,cheightoffset);
    128                                         ccontext.lineTo(x+cwidthoffset,y+cheightoffset);
    129                                         ccontext.moveTo(x+cwidthoffset,cheight-y+cheightoffset);
    130                                         ccontext.lineTo(x+cwidthoffset,cheight+cheightoffset);
    131                                         ccontext.stroke();
    132                                 }
    133                         }
     79                                clabels.removeClass('sim-colorbar-labels-inner');
     80                                clabels.addClass('sim-colorbar-labels-outer');
     81                        }
     82                        var clabelstring = '';
     83                        for (var i=0; i <= cdivisions; i++) {
     84                                y = i/(cdivisions+1)*cheight;
     85                                x = 0.2*cwidth;
     86                                clabelstring += '<li><span>'+labels[i]+'</span></li>';
     87                                ccontext.beginPath();
     88                                ccontext.moveTo(0,y+cheightoffset*1);
     89                                ccontext.lineTo(x,y+cheightoffset*1);
     90                                ccontext.moveTo(cwidth-x,y+cheightoffset*1);
     91                                ccontext.lineTo(cwidth,y+cheightoffset*1);
     92                                ccontext.stroke();
     93                        }
     94                        clabels.append(clabelstring);
     95                        //}}}
     96                        //Draw colorbar title {{{
     97                        ctitleid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid')+'-colorbar')+'-title';
     98                        ctitle = $('#'+ctitleid);
     99                        ctitle.width(cwidth);
    134100                        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);
     101                                ctitle.html(options.getfieldvalue('colorbartitle'));
     102                                ctitle.css({'color':options.getfieldvalue('colorbarfontcolor','black'), 'font-size':options.getfieldvalue('colorbarfontsize',18)+'px'});
    140103                        } //}}}
    141                         //}}}
    142104                }
    143         }
    144         //}}}
     105        } //}}}
    145106        //texture canvas //{{{
    146107        var tcontext,tcanvas,tcanvasid,tcanvashtml,tURL,tgradient;

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

    r20790 r20829  
    2323        console.log('       "colorbarnticks": number of colorbar ticks (default 6, ex: 2, 10)');       
    2424        console.log('       "colorbarprecision": colorbar label digit precision (default 3, ex: 1, 4)');       
    25         console.log('       "colorbarorientation": oreintation of colorbar (default "vertical", ex: "horizontal")');
    2625        console.log('       "colorbarinnerlabels": choose whether labels are inside colorbar (default "off", ex: "on", "off")');
    2726        console.log('       "colorbarfontsize": specify colorbar font size (default 1, ex: 14, 22)');
Note: See TracChangeset for help on using the changeset viewer.