Changeset 20748


Ignore:
Timestamp:
06/15/16 22:08:25 (9 years ago)
Author:
dlcheng
Message:

CHG (javascript): Adding documentation for javascript plot functions. Adding support for colorbarfontcolor option. Fixes for horizontal colorbar rendering.

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

Legend:

Unmodified
Added
Removed

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

    r20652 r20748  
    11function applyoptions(md,data,datatype,options,canvas,gl,node){
    2         //APPLYOPTIONS - apply the options to current plot
     2        //APPLYOPTIONS - apply colobar, text, cloud, and expdisp options to current plot
    33        //
    44        //   Usage:
    … …  
    1616                        //Variable options initialization {{{
    1717                        var caxis = options.getfieldvalue('caxis',[ArrayMin(data),ArrayMax(data)]);
    18                         var canvassize = options.getfieldvalue('canvassize',480);
    19 
    20                         var ccontext,ccanvas,ccanvasid,ccanvashtml,cheight,cwidth,color,y,x;
    2118                        var colorbarorientiation = options.getfieldvalue('colorbarorientation','vertical');
    2219                        var cheightoffset = options.getfieldvalue('colorbarfontsize',18);
    … …  
    2421                        var cwidthscale = 0.5; //Default size of actual colorbar width, relative to canvas width (range [0,1])
    2522                        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;
    2624                        //}}}
    2725                        //Set colorbar lables {{{
    … …  
    3129                        var clabelitem;
    3230                        var precision = options.getfieldvalue('colorbarprecision',3);
    33                        
    3431                        if (options.getfieldvalue('log','off')!='off') {
    35                                 for (var i = cdivisions; i >= 0; i--) {
     32                                for (var i=cdivisions; i >= 0; i--) {
    3633                                        var scale = (Math.log10(caxis[1])-Math.log10(caxis[0]))/Math.log10(options.getfieldvalue('log',10));
    3734                                        labels[i] = (Math.pow(options.getfieldvalue('log',10),Math.log10(caxis[0])/Math.log10(options.getfieldvalue('log',10))+scale*(cdivisions-i)/cdivisions)).toPrecision(precision);
    3835                                }
    3936                        } else {
    40                                 for (var i = cdivisions; i >= 0; i--) {
     37                                for (var i=cdivisions; i >= 0; i--) {
    4138                                        labels[i] = (caxisdelta*(cdivisions-i)/cdivisions+caxis[0]).toPrecision(precision);
    4239                                }
    … …  
    5249                                ccontext.clearRect(0,0, ccanvashtml.width, ccanvashtml.height);
    5350                                ccontext.beginPath();
    54                                
     51
    5552                                var cgradient = ccontext.createLinearGradient(0,cheightoffset/2,0,cheight);
    5653                                var cmap = options.getfieldvalue('cmap','jet');
    5754                                var colorbar = colorbars[cmap];
    58                                 for (var i = 0; i < colorbar.length; i++) {
     55                                for (var i=0; i < colorbar.length; i++) {
    5956                                        color = colorbar[colorbar.length-i-1];
    6057                                        color = [Math.round(color[0]*255),Math.round(color[1]*255),Math.round(color[2]*255)];   
    … …  
    6764                                ccontext.beginPath();
    6865                                ccontext.lineWidth='1';
    69                                 ccontext.strokeStyle='black';
     66                                ccontext.strokeStyle=options.getfieldvalue('colorbarfontcolor','black');
    7067                                ccontext.rect(0,cheightoffset*3/2,cwidth,cheight);
    7168                                ccontext.stroke();
    7269                               
    73                                 for (var i = 0; i <= cdivisions; i++) {
     70                                for (var i=0; i <= cdivisions; i++) {
    7471                                        y = i/cdivisions*cheight+cheightoffset/2;
    7572                                        x = 0.2*cwidth;
    … …  
    8178                                        ccontext.stroke();
    8279                                        ccontext.font=String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif';
    83                                         ccontext.fillStyle='black';
     80                                        ccontext.fillStyle=options.getfieldvalue('colorbarfontcolor','black');
    8481                                        ccontext.textAlign='left';
    8582                                        ccontext.fillText(labels[i],cwidth+x,y+cheightoffset*3/2);
    … …  
    8784                                if (options.exist('colorbartitle')) {
    8885                                        ccontext.font=String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif';
    89                                         ccontext.fillStyle='black';
     86                                        ccontext.fillStyle=options.getfieldvalue('colorbarfontcolor','black');
    9087                                        ccontext.textAlign='left';
    9188                                        ccontext.textBaseline='bottom';
    … …  
    9491                        } //}}}
    9592                        else { //colorbarorientiation=='horizontal' {{{
    96                                 cheight = options.getfieldvalue('colorbarheight',canvassize/20);
    97                                 cwidth = options.getfieldvalue('colorbarwidth',0.95)*canvassize;
    9893                                ccanvasid = options.getfieldvalue('colorbarcanvasid',options.getfieldvalue('canvasid')+'_colorbar');
    9994                                ccanvashtml = document.getElementById(ccanvasid);
    100                                
     95                                cwidth = ccanvashtml.width*0.7*options.getfieldvalue('colorbarwidth',1);
     96                                cheight = ccanvashtml.height*0.4*options.getfieldvalue('colorbarheight',1);
    10197                                ccanvas = $('#'+ccanvasid);
    102                                 cwidth = ccanvashtml.clientWidth;
    103                                 cheight = ccanvashtml.clientHeight;     
    10498                                ccontext = ccanvas[0].getContext('2d');
    10599                                ccontext.clearRect(0,0, ccanvashtml.width, ccanvashtml.height);
    … …  
    109103                                var cmap = options.getfieldvalue('cmap','jet');
    110104                                var colorbar = colorbars[cmap];
    111                                 for (var i = 0; i < colorbar.length; i++) {
     105                                for (var i=0; i < colorbar.length; i++) {
    112106                                        color = colorbar[colorbar.length-i-1];
    113107                                        color = [Math.round(color[0]*255),Math.round(color[1]*255),Math.round(color[2]*255)];   
    … …  
    120114                                ccontext.beginPath();
    121115                                ccontext.lineWidth='1';
    122                                 ccontext.strokeStyle='black';
     116                                ccontext.strokeStyle=options.getfieldvalue('colorbarfontcolor','black');
    123117                                ccontext.rect(cwidthoffset,cheightoffset,cwidth,cheight);
    124118                                ccontext.stroke();
    125119                               
    126                                 for (var i = 0; i <= cdivisions; i++) {
     120                                for (var i=0; i <= cdivisions; i++) {
    127121                                        y = 0.2*cheight;
    128122                                        x = i/cdivisions*cwidth;
    … …  
    134128                                        ccontext.stroke();
    135129                                        ccontext.font=String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif';
    136                                         ccontext.fillStyle='black';
     130                                        ccontext.fillStyle=options.getfieldvalue('colorbarfontcolor','black');
    137131                                        ccontext.textAlign='center';
    138132                                        ccontext.fillText(labels[cdivisions-i],x+cwidthoffset,cheight+cheightoffset*2);
    … …  
    140134                                if (options.exist('colorbartitle')) {
    141135                                        ccontext.font=String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif';
    142                                         ccontext.fillStyle='black';
     136                                        ccontext.fillStyle=options.getfieldvalue('colorbarfontcolor','black');
    143137                                        ccontext.textAlign='center';
    144138                                        ccontext.textBaseline='bottom';
    … …  
    167161        var cmap = options.getfieldvalue('cmap','jet');
    168162        var colorbar = colorbars[cmap];
    169         for (var i = 0; i < colorbar.length; i++) {
     163        for (var i=0; i < colorbar.length; i++) {
    170164                color = colorbar[colorbar.length-i-1];
    171165                color = [Math.round(color[0]*255),Math.round(color[1]*255),Math.round(color[2]*255)];   
    … …  
    239233
    240234                vertices.itemSize = 3;
    241                 for(var i = 0; i < x.length; i++){
     235                for(var i=0; i < x.length; i++){
    242236                        vertices[vertices.length] = x[i];
    243237                        vertices[vertices.length] = y[i];
    … …  
    317311
    318312                vertices.itemSize = 3;
    319                 for(var i = 0; i < x.length; i++){
     313                for(var i=0; i < x.length; i++){
    320314                        vertices[vertices.length] = x[i];
    321315                        vertices[vertices.length] = y[i];
    … …  
    368362                                textcoordinates = [(textposition[0]+1.0)/2.0*textcanvaswidth, (-textposition[1]+1.0)/2.0*textcanvasheight]; //NDC to screenspace
    369363                                textcontext.font = String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif';
    370                                 textcontext.fillStyle = 'black';
    371                                 textcontext.strokeStyle = 'black';
     364                                textcontext.fillStyle = options.getfieldvalue('colorbarfontcolor','black');
     365                                textcontext.strokeStyle = options.getfieldvalue('colorbarfontcolor','black');
    372366                                textcontext.textAlign = 'center';
    373367                                textcontext.textBaseline = 'middle';

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

    r20726 r20748  
    1 //GAGUE - create a gague and label that display a value
    2 //
    3 //   Usage:
    4 //      gauge=gauge(); TODO: Expand
    5 
    61function gauge() {
     2        //GAGUE - create a gague and label that display a value with unit label
     3        //
     4        //   Usage:
     5        //      gaugeslr = gauge('gaugediv','slr-controldiv','label','m');
     6       
    77        //Convert arguments to options
    88        var args = Array.prototype.slice.call(arguments);

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

    r20586 r20748  
    11function plot_manager(md,options,subplotwidth,nlines,ncols,i){
    2 //PLOT__MANAGER - distribute the plots, called by plotmodel
    3 //
    4 //   Usage:
    5 //      plot_manager(md,options,subplotwidth,i);
    6 //
    7 //   See also: PLOTMODEL, PLOT_UNIT
     2        //PLOT__MANAGER - distribute the plots, called by plotmodel
     3        //
     4        //   Usage:
     5        //      plot_manager(md,options,subplotwidth,i);
     6        //
     7        //   See also: PLOTMODEL, PLOT_UNIT
    88                       
    99        //parse options and get a structure of options.
    1010        checkplotoptions(md,options);
     11       
    1112        //get data to be displayed
    1213        var data = options.getfieldvalue('data');

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

    r20586 r20748  
    11function plot_mesh(md,options,canvas) {
     2        //PLOT_MESH - Function for plotting wireframe mesh.
     3        //
    24        //   Usage:
    35        //      plot_mesh(md,options,canvas);
    46        //
    5         //   See also: PLOTMODEL
     7        //   See also: PLOTMODEL, PLOT_MANAGER
    68
    79        //declare variables:  {{{

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

    r20586 r20748  
    11function plot_overlay(md,data,options,canvas){
    22        //PLOT_OVERLAY - Function for plotting a georeferenced image. 
    3         //This function is called from within the plotmodel code.
    43        //
    54        //   Usage:

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

    r20586 r20748  
    55        //      plot_quiver(md,options,canvas)
    66        //
     7        //   See also: PLOTMODEL, PLOT_MANAGER
    78
    89        //declare variables:  {{{

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

    r20726 r20748  
    1 //SLIDER - create a slider bar to set a value
    2 //
    3 //   Usage:
    4 //      slider=slider(); TODO: Expand
     1function slider() {
     2        //SLIDER - Slider bar with initial value, callback on change, unique name, min/max value range, description message, fill color, widht/height, value precision, value step, and the id of the div to create the slider in.
     3        //
     4        //   Usage:
     5        //              slider('value',0,'callback',function(value){PlotGreenland(value,0);PlotSlr()},'name','greenland','min',0,'max',100,'message',['Remove ice: ','%'],'color','#BBBBBB','width','100%','height','24px','precision',2,'step',5,'slidersdiv','greenland-sliders');
    56
    6 function slider() {
    77        //Convert arguments to options
    88        var args = Array.prototype.slice.call(arguments);
    … …  
    5959}
    6060
    61 //PROGRESS - create a progress bar to display a value
    62 //
    63 //   Usage:
    64 //      progress=progress(); TODO: Expand
    65 
    6661function progress() {
     62        //PROGRESS - Progress bar with initial value, unique name, width/height, and the id of the div to create the slider in. One progress per canvas, value/label updated by node transient runs in plot_unit.
     63        //
     64        //   Usage:
     65        //              progress('value',0,'name','hma','width','100%','height',sliderheight,'progressdiv','hma-progressdiv');
     66        //
     67        //   See also: PLOT_UNIT
     68       
    6769        //Convert arguments to options
    6870        var args = Array.prototype.slice.call(arguments);

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

    r20726 r20748  
    1 //TOOLTIP - create a hidden toolip that shows html formatted info on hover
    2 //
    3 //   Usage:
    4 //      tooltip=tooltip(); TODO: Expand
     1function tooltip() {
     2        //TOOLTIP - create a hidden toolip with value text that shows html formatted info on hover over the tooltipdiv.
     3        //
     4        //   Usage:
     5        //      tooltip('value','<h4>HAIG Glacier (Canadian Rocky Mountains) 30 year transient simulation</h4>','tooltipdiv','info-tooltipdiv');
    56
    6 function tooltip() {
    77        //Convert arguments to options
    88        var args = Array.prototype.slice.call(arguments);
Note: See TracChangeset for help on using the changeset viewer.