Changeset 19858


Ignore:
Timestamp:
12/05/15 21:13:58 (9 years ago)
Author:
dlcheng
Message:

CHG: javascript - Adding colorbar orientation option.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r19856 r19858  
    138138                        var caxis = options.getfieldvalue('caxis',[Math.min.apply(null,data),Math.max.apply(null,data)]);
    139139                        var canvassize = options.getfieldvalue('canvassize',480);
    140                         var cheight = options.getfieldvalue('colorbarheight',0.95)*canvassize;
    141                         var cwidth = options.getfieldvalue('colorbarwidth',canvassize/20);
     140                        var cheight;
     141                        var cwidth;
    142142                        var cdivisions = cheight/4;
    143143                        var color;
     144                        var ccontext,ccanvas,ccanvasid,ccanvashtml;
     145                        var colorbarorientiation = options.getfieldvalue('colorbarorientation','vertical');
     146                        //define offsets for correct font drawing on canvas
    144147                        var cheightoffset = options.getfieldvalue('colorbarfontsize',16);
    145                         var ccontext,ccanvas,ccanvasid,ccanvashtml;
    146                         ccanvasid = options.getfieldvalue('colorbarcanvasid',options.getfieldvalue('canvasid')+'_colorbar');
    147                         ccanvashtml = document.getElementById(ccanvasid);
    148                         if (ccanvashtml==null) {
    149                                 ccanvas = $('<canvas id="'+ccanvasid+'" width="'+String(cwidth+cheightoffset*4)+'" height="'+String(cheight+cheightoffset)+'"></canvas>').insertAfter('#'+options.getfieldvalue('canvasid'));
    150                                 ccanvas.css({'position':'relative','top':((canvassize-cheight-cheightoffset)/-2).toFixed(2)+'px'});
    151                                 ccontext = ccanvas[0].getContext('2d');
    152                         }
    153                         else{
    154                                 ccanvas = $('#'+ccanvasid);
    155                                 if (options.exist('colorbarcanvasid')&&!ccanvashtml.hasOwnProperty('init')){
    156                                         //store actual colobar size
    157                                         cwidth = ccanvas.width();
    158                                         cheight = ccanvas.height();
    159                                         //get html object instead of jqurey object to modify height/width to accomodate labels
    160                                         ccanvashtml.width = ccanvas.width()+cheightoffset*6;
    161                                         ccanvashtml.height = cheight+cheightoffset;
    162                                         ccanvashtml.cwidth = cwidth;
    163                                         ccanvashtml.cheight = cheight;
    164                                         ccanvashtml.init = true;
    165                                 }
    166                                 else {
    167                                         cwidth = ccanvashtml.cwidth;
    168                                         cheight = ccanvashtml.cheight;
    169                                 }
    170                                 ccontext = ccanvas[0].getContext('2d');
    171                                 /*erase existing colorbar:*/
    172                                 ccontext.clearRect(0,0, cwidth*4, cheight+cheightoffset);
     148                        var cwidthoffset = options.getfieldvalue('colorbarfontsize',16)*3;
     149                       
     150                        //Set colorbar lables
     151                        var labels = [];
     152                        var cdivisions = options.getfieldvalue('colorbarnticks',6);
     153                        var caxisdelta = caxis[1] - caxis[0];
     154                        var clabelitem;
     155                        var precision=options.getfieldvalue('colorbarprecision',3);
     156                        if (options.exist('log')) {
     157                                for (var i = cdivisions; i >= 0; i--) {
     158                                        if (caxisdelta*i/cdivisions==min) {
     159                                                labels[i] = (caxis[0]).toPrecision(precision);
     160                                        }
     161                                        else {
     162                                                labels[i] = (Math.exp(Math.log(caxisdelta)*i/cdivisions)+caxis[0]).toPrecision(precision);
     163                                        }       
     164                                }
     165                        } else {
     166                                for (var i = cdivisions; i >= 0; i--) {
     167                                        labels[i] = (caxisdelta*(cdivisions-i)/cdivisions+caxis[0]).toPrecision(precision);
     168                                }
     169                        }
     170                        var y;
     171                        var x;
     172                       
     173                        if (colorbarorientiation=='vertical') {
     174                                cheight = options.getfieldvalue('colorbarheight',0.95)*canvassize;
     175                                cwidth = options.getfieldvalue('colorbarwidth',canvassize/20);
     176                                ccanvasid = options.getfieldvalue('colorbarcanvasid',options.getfieldvalue('canvasid')+'_colorbar');
     177                                ccanvashtml = document.getElementById(ccanvasid);
     178                                if (ccanvashtml==null) {
     179                                        ccanvas = $('<canvas id="'+ccanvasid+'" width="'+String(cwidth+cheightoffset*4)+'" height="'+String(cheight+cheightoffset)+'"></canvas>').insertAfter('#'+options.getfieldvalue('canvasid'));
     180                                        ccanvas.css({'position':'relative','top':((canvassize-cheight-cheightoffset)/-2).toFixed(2)+'px'});
     181                                        ccontext = ccanvas[0].getContext('2d');
     182                                }
     183                                else{
     184                                        ccanvas = $('#'+ccanvasid);
     185                                        if (options.exist('colorbarcanvasid')&&!ccanvashtml.hasOwnProperty('init')){
     186                                                //store actual colobar size
     187                                                cwidth = ccanvas.width();
     188                                                cheight = ccanvas.height();
     189                                                //get html object instead of jqurey object to modify height/width to accomodate labels
     190                                                ccanvashtml.width = ccanvas.width()+cheightoffset*6;
     191                                                ccanvashtml.height = cheight+cheightoffset;
     192                                                ccanvashtml.cwidth = cwidth;
     193                                                ccanvashtml.cheight = cheight;
     194                                                ccanvashtml.init = true;
     195                                        }
     196                                        else {
     197                                                cwidth = ccanvashtml.cwidth;
     198                                                cheight = ccanvashtml.cheight;
     199                                        }
     200                                        ccontext = ccanvas[0].getContext('2d');
     201                                        /*erase existing colorbar:*/
     202                                        ccontext.clearRect(0,0, cwidth*4, cheight+cheightoffset);
     203                                        ccontext.beginPath();
     204                                }
     205                                var cgradient = ccontext.createLinearGradient(0,cheightoffset/2,0,cheight);
     206                                var tgradient = ccontext.createLinearGradient(0,0,0,256);
     207                               
     208                                var cmap = options.getfieldvalue('cmap','jet');
     209                                var colorbar = colorbars[cmap];
     210                                for (var i = 0; i < colorbar.length; i++) {
     211                                        color = colorbar[colorbar.length-i-1];
     212                                        color = [Math.round(color[0]*255),Math.round(color[1]*255),Math.round(color[2]*255)];   
     213                                        cgradient.addColorStop(i/colorbar.length,'rgba('+color.toString()+',1.0)');
     214                                        tgradient.addColorStop(i/colorbar.length,'rgba('+color.toString()+',1.0)');
     215                                }
     216                                ccontext.fillStyle=cgradient;
     217                                ccontext.fillRect(0,cheightoffset/2,cwidth,cheight);
     218                               
     219                               
     220                                //Draw colorbar border
    173221                                ccontext.beginPath();
    174                         }
    175                         var cgradient = ccontext.createLinearGradient(0,cheightoffset/2,0,cheight);
    176                         var tgradient = ccontext.createLinearGradient(0,0,0,256);
    177                         var cmap = options.getfieldvalue('cmap','jet');
    178                         var colorbar = colorbars[cmap];
    179                         for (var i = 0; i < colorbar.length; i++) {
    180                                 color = colorbar[colorbar.length-i-1];
    181                                 color = [Math.round(color[0]*255),Math.round(color[1]*255),Math.round(color[2]*255)];   
    182                                 cgradient.addColorStop(i/colorbar.length,'rgba('+color.toString()+',1.0)');
    183                                 tgradient.addColorStop(i/colorbar.length,'rgba('+color.toString()+',1.0)');
    184                         }
    185                         ccontext.fillStyle=cgradient;
    186                         ccontext.fillRect(0,cheightoffset/2,cwidth,cheight);
     222                                ccontext.lineWidth='1';
     223                                ccontext.strokeStyle='black';
     224                                ccontext.rect(0,cheightoffset/2,cwidth,cheight);
     225                                ccontext.stroke();
     226                               
     227                                for (var i = 0; i <= cdivisions; i++) {
     228                                        y = i/cdivisions*cheight+cheightoffset/2;
     229                                        x = 0.2*cwidth;
     230                                        ccontext.beginPath();
     231                                        ccontext.moveTo(0,y);
     232                                        ccontext.lineTo(x,y);
     233                                        ccontext.moveTo(cwidth-x,y);
     234                                        ccontext.lineTo(cwidth,y);
     235                                        ccontext.stroke();
     236                                        ccontext.font=String(options.getfieldvalue('colorbarfontsize',16))+'px Arial';
     237                                        ccontext.fillStyle='black';
     238                                        ccontext.textAlign='left';
     239                                        ccontext.fillText(labels[i],cwidth+x,y+cheightoffset/2);
     240                                }
     241                        }
     242                        else { //colorbarorientiation=='horizontal'
     243                                cheight = options.getfieldvalue('colorbarheight',canvassize/20);
     244                                cwidth = options.getfieldvalue('colorbarwidth',0.95)*canvassize;
     245                                ccanvasid = options.getfieldvalue('colorbarcanvasid',options.getfieldvalue('canvasid')+'_colorbar');
     246                                ccanvashtml = document.getElementById(ccanvasid);
     247                                if (ccanvashtml==null) {
     248                                        ccanvas = $('<canvas id="'+ccanvasid+'" width="'+String(cwidth+cheightoffset*4)+'" height="'+String(cheight+cheightoffset)+'"></canvas>').insertAfter('#'+options.getfieldvalue('canvasid'));
     249                                        ccanvas.css({'position':'relative','top':((canvassize-cheight-cheightoffset)/-2).toFixed(2)+'px'});
     250                                        ccontext = ccanvas[0].getContext('2d');
     251                                }
     252                                else{
     253                                        ccanvas = $('#'+ccanvasid);
     254                                        if (options.exist('colorbarcanvasid')&&!ccanvashtml.hasOwnProperty('init')){
     255                                                //store actual colobar size
     256                                                cwidth = ccanvas.width();
     257                                                cheight = ccanvas.height();
     258                                                //get html object instead of jqurey object to modify height/width to accomodate labels
     259                                                ccanvashtml.width = cwidth+cheightoffset*6;
     260                                                ccanvashtml.height = cheight+cheightoffset;
     261                                                ccanvashtml.cwidth = cwidth;
     262                                                ccanvashtml.cheight = cheight;
     263                                                ccanvashtml.init = true;
     264                                        }
     265                                        else {
     266                                                cwidth = ccanvashtml.cwidth;
     267                                                cheight = ccanvashtml.cheight;
     268                                        }
     269                                        ccontext = ccanvas[0].getContext('2d');
     270                                        /*erase existing colorbar:*/
     271                                        ccontext.clearRect(0,0, cwidth*4, cheight+cheightoffset);
     272                                        ccontext.beginPath();
     273                                }
     274                                var cgradient = ccontext.createLinearGradient(cwidth+cwidthoffset,0,cwidthoffset,0);
     275                                var tgradient = ccontext.createLinearGradient(cwidthoffset,0,0,256);
     276                               
     277                                var cmap = options.getfieldvalue('cmap','jet');
     278                                var colorbar = colorbars[cmap];
     279                                for (var i = 0; i < colorbar.length; i++) {
     280                                        color = colorbar[colorbar.length-i-1];
     281                                        color = [Math.round(color[0]*255),Math.round(color[1]*255),Math.round(color[2]*255)];   
     282                                        cgradient.addColorStop(i/colorbar.length,'rgba('+color.toString()+',1.0)');
     283                                        tgradient.addColorStop(i/colorbar.length,'rgba('+color.toString()+',1.0)');
     284                                }
     285                                ccontext.fillStyle=cgradient;
     286                                ccontext.fillRect(cwidthoffset,0,cwidth,cheight);
     287                               
     288                               
     289                                //Draw colorbar border
     290                                ccontext.beginPath();
     291                                ccontext.lineWidth='1';
     292                                ccontext.strokeStyle='black';
     293                                ccontext.rect(cwidthoffset,0,cwidth,cheight);
     294                                ccontext.stroke();
     295                               
     296                                for (var i = 0; i <= cdivisions; i++) {
     297                                        y = 0.2*cheight;
     298                                        x = i/cdivisions*cwidth;
     299                                        ccontext.beginPath();
     300                                        ccontext.moveTo(x+cwidthoffset,0);
     301                                        ccontext.lineTo(x+cwidthoffset,y);
     302                                        ccontext.moveTo(x+cwidthoffset,cheight-y);
     303                                        ccontext.lineTo(x+cwidthoffset,cheight);
     304                                        ccontext.stroke();
     305                                        ccontext.font=String(options.getfieldvalue('colorbarfontsize',16))+'px Arial';
     306                                        ccontext.fillStyle='black';
     307                                        ccontext.textAlign='center';
     308                                        ccontext.fillText(labels[cdivisions-i],x+cwidthoffset,cheight+cheightoffset);
     309                                }
     310                        }
     311                       
    187312                        //Make texture canvas
    188313                        var tcontext,tcanvas,tcanvasid,tcanvashtml,tURL;
    … …  
    202327                        tURL = tcanvashtml.toDataURL();
    203328                        node["texture"] = initTexture(gl,tURL);
    204                         //Draw colorbar border
    205                         ccontext.beginPath();
    206                         ccontext.lineWidth='1';
    207                         ccontext.strokeStyle='black';
    208                         ccontext.rect(0,cheightoffset/2,cwidth,cheight);
    209                         ccontext.stroke();
    210                         //Set colorbar lables
    211                         var labels = [];
    212                         var cdivisions = options.getfieldvalue('colorbarnticks',6);
    213                         var caxisdelta = caxis[1] - caxis[0];
    214                         var clabelitem;
    215                         precision=options.getfieldvalue('colorbarprecision',3);
    216                         if (options.exist('log')) {
    217                                 for (var i = cdivisions; i >= 0; i--) {
    218                                         if (caxisdelta*i/cdivisions==min) {
    219                                                 labels[i] = (caxis[0]).toPrecision(precision);
    220                                         }
    221                                         else {
    222                                                 labels[i] = (Math.exp(Math.log(caxisdelta)*i/cdivisions)+caxis[0]).toPrecision(precision);
    223                                         }       
    224                                 }
    225                         } else {
    226                                 for (var i = cdivisions; i >= 0; i--) {
    227                                         labels[i] = (caxisdelta*(cdivisions-i)/cdivisions+caxis[0]).toPrecision(precision);
    228                                 }
    229                         }
    230                         for (var i = cdivisions; i >= 0; i--) {
    231                                 var y = i/cdivisions*cheight+cheightoffset/2;
    232                                 var x = 0.2*cwidth;
    233                                 ccontext.beginPath();
    234                                 ccontext.moveTo(0,y);
    235                                 ccontext.lineTo(x,y);
    236                                 ccontext.moveTo(cwidth-x,y);
    237                                 ccontext.lineTo(cwidth,y);
    238                                 ccontext.stroke();
    239                                 ccontext.font=String(options.getfieldvalue('colorbarfontsize',16))+'px Arial';
    240                                 ccontext.fillStyle='black';
    241                                 ccontext.textAlign='left';
    242                                 ccontext.fillText(labels[i],cwidth+x,y+cheightoffset/2);
    243 
    244                         }
    245329                        /* //{{{
    246330                        if exist(options,'wrapping')
Note: See TracChangeset for help on using the changeset viewer.