[21337] | 1 | Index: ../trunk-jpl/src/m/plot/plotdoc.js
|
---|
| 2 | ===================================================================
|
---|
| 3 | --- ../trunk-jpl/src/m/plot/plotdoc.js (revision 20828)
|
---|
| 4 | +++ ../trunk-jpl/src/m/plot/plotdoc.js (revision 20829)
|
---|
| 5 | @@ -22,7 +22,6 @@
|
---|
| 6 | console.log(' "colorbartitle": colorbar title (string)');
|
---|
| 7 | console.log(' "colorbarnticks": number of colorbar ticks (default 6, ex: 2, 10)');
|
---|
| 8 | console.log(' "colorbarprecision": colorbar label digit precision (default 3, ex: 1, 4)');
|
---|
| 9 | - console.log(' "colorbarorientation": oreintation of colorbar (default "vertical", ex: "horizontal")');
|
---|
| 10 | console.log(' "colorbarinnerlabels": choose whether labels are inside colorbar (default "off", ex: "on", "off")');
|
---|
| 11 | console.log(' "colorbarfontsize": specify colorbar font size (default 1, ex: 14, 22)');
|
---|
| 12 | console.log(' "colorbarfontcolor": specify colorbar font color (default "black", ex: "green","blue")');
|
---|
| 13 | Index: ../trunk-jpl/src/m/plot/applyoptions.js
|
---|
| 14 | ===================================================================
|
---|
| 15 | --- ../trunk-jpl/src/m/plot/applyoptions.js (revision 20828)
|
---|
| 16 | +++ ../trunk-jpl/src/m/plot/applyoptions.js (revision 20829)
|
---|
| 17 | @@ -17,17 +17,13 @@
|
---|
| 18 | var caxis = options.getfieldvalue('caxis',[ArrayMin(data),ArrayMax(data)]);
|
---|
| 19 | var colorbarorientiation = options.getfieldvalue('colorbarorientation','vertical');
|
---|
| 20 | var colorbarinnerlabels = options.getfieldvalue('colorbarinnerlabels','off');
|
---|
| 21 | - var cheightoffset = options.getfieldvalue('colorbarfontsize',18);
|
---|
| 22 | - var cwidthoffset = options.getfieldvalue('colorbarfontsize',18)*3;
|
---|
| 23 | - var cwidthscale = 0.5; //Default size of actual colorbar width, relative to canvas width (range [0,1])
|
---|
| 24 | - var cheightscale = 0.875; //Default size of actual colorbar height, relative to canvas height (range [0,1])
|
---|
| 25 | - var ccontext,ccanvas,ccanvasid,ccanvashtml,cheight,cwidth,color,y,x,cgradient,cmap,colorbar,textAlign,a,b,c,d,e,f,g,h;
|
---|
| 26 | + var cheightoffset = options.getfieldvalue('colorbarfontsize',18)*options.getfieldvalue('colorbarheight',1);
|
---|
| 27 | + var ccanvasid,ctitleid,clabelsid,ccanvas,ctitle,clabels,ccontext,cmap,colorbar,cwidth,cheight,cgradient,color,y,x;
|
---|
| 28 | //}}}
|
---|
| 29 | - //Set colorbar lables {{{
|
---|
| 30 | + //Create colorbar labels {{{
|
---|
| 31 | var labels = [];
|
---|
| 32 | var cdivisions = options.getfieldvalue('colorbarnticks',6);
|
---|
| 33 | var caxisdelta = caxis[1] - caxis[0];
|
---|
| 34 | - var clabelitem;
|
---|
| 35 | var precision = options.getfieldvalue('colorbarprecision',3);
|
---|
| 36 | if (options.getfieldvalue('log','off')!='off') {
|
---|
| 37 | for (var i=cdivisions; i >= 0; i--) {
|
---|
| 38 | @@ -39,109 +35,74 @@
|
---|
| 39 | labels[i] = (caxisdelta*(cdivisions-i)/cdivisions+caxis[0]).toPrecision(precision);
|
---|
| 40 | }
|
---|
| 41 | } //}}}
|
---|
| 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 | + //Initialize colorbar canvas {{{
|
---|
| 48 | +
|
---|
| 49 | + ccanvasid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid')+'-colorbar');
|
---|
| 50 | + ccanvas = $('#'+ccanvasid)[0];
|
---|
| 51 | + cwidth = ccanvas.width*options.getfieldvalue('colorbarwidth',1);
|
---|
| 52 | + cheight = ccanvas.height*options.getfieldvalue('colorbarheight',1);
|
---|
| 53 | + ccanvas.width = cwidth;
|
---|
| 54 | + ccanvas.height = cheight;
|
---|
| 55 | + ccontext = ccanvas.getContext('2d');
|
---|
| 56 | + ccontext.clearRect(0,0, cwidth, cheight);
|
---|
| 57 | ccontext.beginPath();
|
---|
| 58 | cmap = options.getfieldvalue('colormap','jet');
|
---|
| 59 | colorbar = colorbars[cmap];
|
---|
| 60 | - //Handle orientation {{{
|
---|
| 61 | - if (colorbarorientiation=='vertical') {
|
---|
| 62 | - cwidth = ccanvashtml.width*cwidthscale*options.getfieldvalue('colorbarwidth',1);
|
---|
| 63 | - cheight = ccanvashtml.height*cheightscale*options.getfieldvalue('colorbarheight',1);
|
---|
| 64 | - cgradient = ccontext.createLinearGradient(0,cheightoffset/2,0,cheight);
|
---|
| 65 | - textAlign = 'left';
|
---|
| 66 | - a = 0;
|
---|
| 67 | - b = cheightoffset*3/2;
|
---|
| 68 | - c = 0;
|
---|
| 69 | - }
|
---|
| 70 | - else {
|
---|
| 71 | - cwidth = ccanvashtml.width*0.7*options.getfieldvalue('colorbarwidth',1);
|
---|
| 72 | - cheight = ccanvashtml.height*0.4*options.getfieldvalue('colorbarheight',1);
|
---|
| 73 | - cgradient = ccontext.createLinearGradient(cwidth+cwidthoffset,0,cwidthoffset,0);
|
---|
| 74 | - textAlign = 'center';
|
---|
| 75 | - a = cwidthoffset;
|
---|
| 76 | - b = cheightoffset;
|
---|
| 77 | - c = cwidth/2+cwidthoffset;
|
---|
| 78 | - } //}}}
|
---|
| 79 | - //Handle internal labels {{{
|
---|
| 80 | - if (colorbarinnerlabels=='on') {
|
---|
| 81 | - textAlign = 'center';
|
---|
| 82 | - d = (cdivisions/(cdivisions+1.0));
|
---|
| 83 | - e = (1.0/(cdivisions+1.0));
|
---|
| 84 | - f = 2;
|
---|
| 85 | - g = 1;
|
---|
| 86 | - h = cwidth/2;
|
---|
| 87 | - }
|
---|
| 88 | - else {
|
---|
| 89 | - d = 1;
|
---|
| 90 | - e = 0;
|
---|
| 91 | - f = 1;
|
---|
| 92 | - g = 0;
|
---|
| 93 | - h = cwidth+0.2*cwidth;
|
---|
| 94 | - } //}}}
|
---|
| 95 | -
|
---|
| 96 | + cgradient = ccontext.createLinearGradient(0,cheightoffset/2,0,cheight);
|
---|
| 97 | + //}}}
|
---|
| 98 | + //Draw colorbar gradient {{{
|
---|
| 99 | for (var i=0; i < colorbar.length; i++) {
|
---|
| 100 | color = colorbar[colorbar.length-i-1];
|
---|
| 101 | color = [Math.round(color[0]*255),Math.round(color[1]*255),Math.round(color[2]*255)];
|
---|
| 102 | - cgradient.addColorStop(i/colorbar.length*d+e,'rgba('+color.toString()+',1.0)');
|
---|
| 103 | + cgradient.addColorStop(i/colorbar.length*(cdivisions/(cdivisions+1.0))+(1.0/(cdivisions+1.0)),'rgba('+color.toString()+',1.0)');
|
---|
| 104 | }
|
---|
| 105 | ccontext.fillStyle=cgradient;
|
---|
| 106 | - ccontext.fillRect(a,b,cwidth,cheight);
|
---|
| 107 | -
|
---|
| 108 | - //Draw colorbar border
|
---|
| 109 | + ccontext.fillRect(0,0,cwidth,cheight);
|
---|
| 110 | + //}}}
|
---|
| 111 | + //Draw colorbar border {{{
|
---|
| 112 | ccontext.beginPath();
|
---|
| 113 | ccontext.lineWidth='1';
|
---|
| 114 | ccontext.strokeStyle=options.getfieldvalue('colorbarfontcolor','black');
|
---|
| 115 | - ccontext.rect(a,b,cwidth,cheight);
|
---|
| 116 | + ccontext.rect(0,0,cwidth,cheight);
|
---|
| 117 | ccontext.stroke();
|
---|
| 118 | -
|
---|
| 119 | - if (colorbarorientiation=='vertical') { //{{{
|
---|
| 120 | - for (var i=0; i <= cdivisions; i++) {
|
---|
| 121 | - y = i/(cdivisions+g)*cheight+cheightoffset/2;
|
---|
| 122 | - x = 0.2*cwidth;
|
---|
| 123 | - ccontext.font=String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif';
|
---|
| 124 | - ccontext.fillStyle=options.getfieldvalue('colorbarfontcolor','black');
|
---|
| 125 | - ccontext.textAlign=textAlign;
|
---|
| 126 | - ccontext.textBaseline='top';
|
---|
| 127 | - ccontext.fillText(labels[i],h,y+cheightoffset*(g+0.5));
|
---|
| 128 | - ccontext.beginPath();
|
---|
| 129 | - ccontext.moveTo(0,y+cheightoffset*f);
|
---|
| 130 | - ccontext.lineTo(x,y+cheightoffset*f);
|
---|
| 131 | - ccontext.moveTo(cwidth-x,y+cheightoffset*f);
|
---|
| 132 | - ccontext.lineTo(cwidth,y+cheightoffset*f);
|
---|
| 133 | - ccontext.stroke();
|
---|
| 134 | - }
|
---|
| 135 | + //}}}
|
---|
| 136 | + //Draw colorbar labels {{{
|
---|
| 137 | + clabelsid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid')+'-colorbar')+'-labels';
|
---|
| 138 | + clabels = $('#'+clabelsid);
|
---|
| 139 | + clabels.height(cheight);
|
---|
| 140 | + clabels.css({'color':options.getfieldvalue('colorbarfontcolor','black'), 'font-size':options.getfieldvalue('colorbarfontsize',18)+'px'});
|
---|
| 141 | + if (colorbarinnerlabels=='on') {
|
---|
| 142 | + clabels.removeClass('sim-colorbar-labels-outer');
|
---|
| 143 | + clabels.addClass('sim-colorbar-labels-inner');
|
---|
| 144 | }
|
---|
| 145 | else {
|
---|
| 146 | - for (var i=0; i <= cdivisions; i++) {
|
---|
| 147 | - y = 0.2*cheight;
|
---|
| 148 | - x = i/cdivisions*cwidth;
|
---|
| 149 | - ccontext.font=String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif';
|
---|
| 150 | - ccontext.fillStyle=options.getfieldvalue('colorbarfontcolor','black');
|
---|
| 151 | - ccontext.textAlign=textAlign;
|
---|
| 152 | - ccontext.fillText(labels[cdivisions-i],x+cwidthoffset,cheight+cheightoffset*2);
|
---|
| 153 | - ccontext.beginPath();
|
---|
| 154 | - ccontext.moveTo(x+cwidthoffset,cheightoffset);
|
---|
| 155 | - ccontext.lineTo(x+cwidthoffset,y+cheightoffset);
|
---|
| 156 | - ccontext.moveTo(x+cwidthoffset,cheight-y+cheightoffset);
|
---|
| 157 | - ccontext.lineTo(x+cwidthoffset,cheight+cheightoffset);
|
---|
| 158 | - ccontext.stroke();
|
---|
| 159 | - }
|
---|
| 160 | + clabels.removeClass('sim-colorbar-labels-inner');
|
---|
| 161 | + clabels.addClass('sim-colorbar-labels-outer');
|
---|
| 162 | }
|
---|
| 163 | + var clabelstring = '';
|
---|
| 164 | + for (var i=0; i <= cdivisions; i++) {
|
---|
| 165 | + y = i/(cdivisions+1)*cheight;
|
---|
| 166 | + x = 0.2*cwidth;
|
---|
| 167 | + clabelstring += '<li><span>'+labels[i]+'</span></li>';
|
---|
| 168 | + ccontext.beginPath();
|
---|
| 169 | + ccontext.moveTo(0,y+cheightoffset*1);
|
---|
| 170 | + ccontext.lineTo(x,y+cheightoffset*1);
|
---|
| 171 | + ccontext.moveTo(cwidth-x,y+cheightoffset*1);
|
---|
| 172 | + ccontext.lineTo(cwidth,y+cheightoffset*1);
|
---|
| 173 | + ccontext.stroke();
|
---|
| 174 | + }
|
---|
| 175 | + clabels.append(clabelstring);
|
---|
| 176 | + //}}}
|
---|
| 177 | + //Draw colorbar title {{{
|
---|
| 178 | + ctitleid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid')+'-colorbar')+'-title';
|
---|
| 179 | + ctitle = $('#'+ctitleid);
|
---|
| 180 | + ctitle.width(cwidth);
|
---|
| 181 | if (options.exist('colorbartitle')) {
|
---|
| 182 | - ccontext.font=String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif';
|
---|
| 183 | - ccontext.fillStyle=options.getfieldvalue('colorbarfontcolor','black');
|
---|
| 184 | - ccontext.textAlign='left';
|
---|
| 185 | - ccontext.textBaseline='bottom';
|
---|
| 186 | - ccontext.fillText(options.getfieldvalue('colorbartitle'),c,cheightoffset);
|
---|
| 187 | + ctitle.html(options.getfieldvalue('colorbartitle'));
|
---|
| 188 | + ctitle.css({'color':options.getfieldvalue('colorbarfontcolor','black'), 'font-size':options.getfieldvalue('colorbarfontsize',18)+'px'});
|
---|
| 189 | } //}}}
|
---|
| 190 | - //}}}
|
---|
| 191 | }
|
---|
| 192 | - }
|
---|
| 193 | - //}}}
|
---|
| 194 | + } //}}}
|
---|
| 195 | //texture canvas //{{{
|
---|
| 196 | var tcontext,tcanvas,tcanvasid,tcanvashtml,tURL,tgradient;
|
---|
| 197 | tcanvasid = 'texturecanvas';
|
---|