Changeset 20652


Ignore:
Timestamp:
05/25/16 23:35:31 (9 years ago)
Author:
dlcheng
Message:

CHG (javascript): Code revision for implementing dynamically resizing colorbars.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r20586 r20652  
    1414                                data = data[0];
    1515                        } //}}}
    16                         //Variable options initialization {{{           
     16                        //Variable options initialization {{{
    1717                        var caxis = options.getfieldvalue('caxis',[ArrayMin(data),ArrayMax(data)]);
    1818                        var canvassize = options.getfieldvalue('canvassize',480);
    19                         var cheight;
    20                         var cwidth;
    21                         var cdivisions = cheight/4;
    22                         var color;
    23                         var ccontext,ccanvas,ccanvasid,ccanvashtml;
     19
     20                        var ccontext,ccanvas,ccanvasid,ccanvashtml,cheight,cwidth,color,y,x;
    2421                        var colorbarorientiation = options.getfieldvalue('colorbarorientation','vertical');
    2522                        var cheightoffset = options.getfieldvalue('colorbarfontsize',18);
    2623                        var cwidthoffset = options.getfieldvalue('colorbarfontsize',18)*3;
    27                         var y;
    28                         var x;
     24                        var cwidthscale = 0.5; //Default size of actual colorbar width, relative to canvas width (range [0,1])
     25                        var cheightscale = 0.875; //Default size of actual colorbar height, relative to canvas height (range [0,1])
    2926                        //}}}
    3027                        //Set colorbar lables {{{
    … …  
    3330                        var caxisdelta = caxis[1] - caxis[0];
    3431                        var clabelitem;
    35                         var precision=options.getfieldvalue('colorbarprecision',3);
     32                        var precision = options.getfieldvalue('colorbarprecision',3);
    3633                       
    3734                        if (options.getfieldvalue('log','off')!='off') {
    … …  
    4744                        //Handle orientation {{{
    4845                        if (colorbarorientiation=='vertical') { //{{{
    49                                 cheight = options.getfieldvalue('colorbarheight',0.95)*canvassize;
    50                                 cwidth = options.getfieldvalue('colorbarwidth',canvassize/20);
    5146                                ccanvasid = options.getfieldvalue('colorbarcanvasid',options.getfieldvalue('canvasid')+'_colorbar');
    5247                                ccanvashtml = document.getElementById(ccanvasid);
    53                                 if (ccanvashtml==null) {
    54                                         ccanvas = $('<canvas id="'+ccanvasid+'" width="'+String(cwidth+cheightoffset*4)+'" height="'+String(cheight+cheightoffset*2)+'"></canvas>').insertAfter('#'+options.getfieldvalue('canvasid'));
    55                                         ccanvas.css({'position':'relative','top':((canvassize-cheight-cheightoffset)/-2).toFixed(2)+'px'});
    56                                         ccontext = ccanvas[0].getContext('2d');
    57                                 }
    58                                 else{
    59                                         ccanvas = $('#'+ccanvasid);
    60                                         if (options.exist('colorbarcanvasid')&&!ccanvashtml.hasOwnProperty('init')){
    61                                                 //store actual colobar size
    62                                                 cwidth = ccanvashtml.clientWidth;
    63                                                 cheight = ccanvashtml.clientHeight;
    64                                                 ccanvas.attr({width:cwidth+cheightoffset*4,height:cheight+cheightoffset*2}).css({width:cwidth+cheightoffset*4,height:cheight+cheightoffset*2});
    65                                                 //get html object instead of jqurey object to modify height/width to accomodate labels
    66                                                 ccanvashtml.cwidth = cwidth;
    67                                                 ccanvashtml.cheight = cheight;
    68                                                 ccanvashtml.init = true;
    69                                         }
    70                                         else {
    71                                                 cwidth = ccanvashtml.cwidth;
    72                                                 cheight = ccanvashtml.cheight;
    73                                         }
    74                                         ccontext = ccanvas[0].getContext('2d');
    75                                         /*erase existing colorbar:*/
    76                                         ccontext.clearRect(0,0, ccanvashtml.width, ccanvashtml.height);
    77                                         ccontext.beginPath();
    78                                 }
     48                                cwidth = ccanvashtml.width*cwidthscale*options.getfieldvalue('colorbarwidth',1);
     49                                cheight = ccanvashtml.height*cheightscale*options.getfieldvalue('colorbarheight',1);
     50                                ccanvas = $('#'+ccanvasid);
     51                                ccontext = ccanvas[0].getContext('2d');
     52                                ccontext.clearRect(0,0, ccanvashtml.width, ccanvashtml.height);
     53                                ccontext.beginPath();
     54                               
    7955                                var cgradient = ccontext.createLinearGradient(0,cheightoffset/2,0,cheight);
    80                                
    8156                                var cmap = options.getfieldvalue('cmap','jet');
    8257                                var colorbar = colorbars[cmap];
    … …  
    12398                                ccanvasid = options.getfieldvalue('colorbarcanvasid',options.getfieldvalue('canvasid')+'_colorbar');
    12499                                ccanvashtml = document.getElementById(ccanvasid);
    125                                 if (ccanvashtml==null) {
    126                                         ccanvas = $('<canvas id="'+ccanvasid+'" width="'+String(cwidth+cheightoffset*4)+'" height="'+String(cheight+cheightoffset*5/2)+'"></canvas>').insertAfter('#'+options.getfieldvalue('canvasid'));
    127                                         ccanvas.css({'position':'relative','top':((canvassize-cheight-cheightoffset*2)/-2).toFixed(2)+'px'});
    128                                         ccontext = ccanvas[0].getContext('2d');
    129                                 }
    130                                 else{
    131                                         ccanvas = $('#'+ccanvasid);
    132                                         if (options.exist('colorbarcanvasid')&&!ccanvashtml.hasOwnProperty('init')){
    133                                                 //store actual colobar size
    134                                                 cwidth = ccanvashtml.clientWidth;
    135                                                 cheight = ccanvashtml.clientHeight;
    136                                                 //get html object instead of jqurey object to modify height/width to accomodate labels
    137                                                 ccanvashtml.width = cwidth+cheightoffset*6;
    138                                                 ccanvashtml.height = cheight+cheightoffset*5/2;
    139                                                 ccanvashtml.cwidth = cwidth;
    140                                                 ccanvashtml.cheight = cheight;
    141                                                 ccanvashtml.init = true;
    142                                         }
    143                                         else {
    144                                                 cwidth = ccanvashtml.cwidth;
    145                                                 cheight = ccanvashtml.cheight;
    146                                         }
    147                                         ccontext = ccanvas[0].getContext('2d');
    148                                         /*erase existing colorbar:*/
    149                                         ccontext.clearRect(0,0, ccanvashtml.width, ccanvashtml.height);
    150                                         ccontext.beginPath();
    151                                 }
    152                                 var cgradient = ccontext.createLinearGradient(cwidth+cwidthoffset,0,cwidthoffset,0);
    153                                
     100                               
     101                                ccanvas = $('#'+ccanvasid);
     102                                cwidth = ccanvashtml.clientWidth;
     103                                cheight = ccanvashtml.clientHeight;     
     104                                ccontext = ccanvas[0].getContext('2d');
     105                                ccontext.clearRect(0,0, ccanvashtml.width, ccanvashtml.height);
     106                                ccontext.beginPath();
     107
     108                                var cgradient = ccontext.createLinearGradient(cwidth+cwidthoffset,0,cwidthoffset,0);           
    154109                                var cmap = options.getfieldvalue('cmap','jet');
    155110                                var colorbar = colorbars[cmap];
Note: See TracChangeset for help on using the changeset viewer.