Index: /issm/trunk-jpl/src/m/plot/applyoptions.js =================================================================== --- /issm/trunk-jpl/src/m/plot/applyoptions.js (revision 20828) +++ /issm/trunk-jpl/src/m/plot/applyoptions.js (revision 20829) @@ -18,15 +18,11 @@ var colorbarorientiation = options.getfieldvalue('colorbarorientation','vertical'); var colorbarinnerlabels = options.getfieldvalue('colorbarinnerlabels','off'); - var cheightoffset = options.getfieldvalue('colorbarfontsize',18); - var cwidthoffset = options.getfieldvalue('colorbarfontsize',18)*3; - var cwidthscale = 0.5; //Default size of actual colorbar width, relative to canvas width (range [0,1]) - var cheightscale = 0.875; //Default size of actual colorbar height, relative to canvas height (range [0,1]) - var ccontext,ccanvas,ccanvasid,ccanvashtml,cheight,cwidth,color,y,x,cgradient,cmap,colorbar,textAlign,a,b,c,d,e,f,g,h; - //}}} - //Set colorbar lables {{{ + var cheightoffset = options.getfieldvalue('colorbarfontsize',18)*options.getfieldvalue('colorbarheight',1); + var ccanvasid,ctitleid,clabelsid,ccanvas,ctitle,clabels,ccontext,cmap,colorbar,cwidth,cheight,cgradient,color,y,x; + //}}} + //Create colorbar labels {{{ var labels = []; var cdivisions = options.getfieldvalue('colorbarnticks',6); var caxisdelta = caxis[1] - caxis[0]; - var clabelitem; var precision = options.getfieldvalue('colorbarprecision',3); if (options.getfieldvalue('log','off')!='off') { @@ -40,107 +36,72 @@ } } //}}} - ccanvasid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid')+'_colorbar'); - ccanvashtml = document.getElementById(ccanvasid); - ccanvas = $('#'+ccanvasid); - ccontext = ccanvas[0].getContext('2d'); - ccontext.clearRect(0,0, ccanvashtml.width, ccanvashtml.height); + //Initialize colorbar canvas {{{ + + ccanvasid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid')+'-colorbar'); + ccanvas = $('#'+ccanvasid)[0]; + cwidth = ccanvas.width*options.getfieldvalue('colorbarwidth',1); + cheight = ccanvas.height*options.getfieldvalue('colorbarheight',1); + ccanvas.width = cwidth; + ccanvas.height = cheight; + ccontext = ccanvas.getContext('2d'); + ccontext.clearRect(0,0, cwidth, cheight); ccontext.beginPath(); cmap = options.getfieldvalue('colormap','jet'); colorbar = colorbars[cmap]; - //Handle orientation {{{ - if (colorbarorientiation=='vertical') { - cwidth = ccanvashtml.width*cwidthscale*options.getfieldvalue('colorbarwidth',1); - cheight = ccanvashtml.height*cheightscale*options.getfieldvalue('colorbarheight',1); - cgradient = ccontext.createLinearGradient(0,cheightoffset/2,0,cheight); - textAlign = 'left'; - a = 0; - b = cheightoffset*3/2; - c = 0; - } - else { - cwidth = ccanvashtml.width*0.7*options.getfieldvalue('colorbarwidth',1); - cheight = ccanvashtml.height*0.4*options.getfieldvalue('colorbarheight',1); - cgradient = ccontext.createLinearGradient(cwidth+cwidthoffset,0,cwidthoffset,0); - textAlign = 'center'; - a = cwidthoffset; - b = cheightoffset; - c = cwidth/2+cwidthoffset; - } //}}} - //Handle internal labels {{{ - if (colorbarinnerlabels=='on') { - textAlign = 'center'; - d = (cdivisions/(cdivisions+1.0)); - e = (1.0/(cdivisions+1.0)); - f = 2; - g = 1; - h = cwidth/2; - } - else { - d = 1; - e = 0; - f = 1; - g = 0; - h = cwidth+0.2*cwidth; - } //}}} - + cgradient = ccontext.createLinearGradient(0,cheightoffset/2,0,cheight); + //}}} + //Draw colorbar gradient {{{ for (var i=0; i < colorbar.length; i++) { color = colorbar[colorbar.length-i-1]; color = [Math.round(color[0]*255),Math.round(color[1]*255),Math.round(color[2]*255)]; - cgradient.addColorStop(i/colorbar.length*d+e,'rgba('+color.toString()+',1.0)'); + cgradient.addColorStop(i/colorbar.length*(cdivisions/(cdivisions+1.0))+(1.0/(cdivisions+1.0)),'rgba('+color.toString()+',1.0)'); } ccontext.fillStyle=cgradient; - ccontext.fillRect(a,b,cwidth,cheight); - - //Draw colorbar border + ccontext.fillRect(0,0,cwidth,cheight); + //}}} + //Draw colorbar border {{{ ccontext.beginPath(); ccontext.lineWidth='1'; ccontext.strokeStyle=options.getfieldvalue('colorbarfontcolor','black'); - ccontext.rect(a,b,cwidth,cheight); + ccontext.rect(0,0,cwidth,cheight); ccontext.stroke(); - - if (colorbarorientiation=='vertical') { //{{{ - for (var i=0; i <= cdivisions; i++) { - y = i/(cdivisions+g)*cheight+cheightoffset/2; - x = 0.2*cwidth; - ccontext.font=String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif'; - ccontext.fillStyle=options.getfieldvalue('colorbarfontcolor','black'); - ccontext.textAlign=textAlign; - ccontext.textBaseline='top'; - ccontext.fillText(labels[i],h,y+cheightoffset*(g+0.5)); - ccontext.beginPath(); - ccontext.moveTo(0,y+cheightoffset*f); - ccontext.lineTo(x,y+cheightoffset*f); - ccontext.moveTo(cwidth-x,y+cheightoffset*f); - ccontext.lineTo(cwidth,y+cheightoffset*f); - ccontext.stroke(); - } + //}}} + //Draw colorbar labels {{{ + clabelsid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid')+'-colorbar')+'-labels'; + clabels = $('#'+clabelsid); + clabels.height(cheight); + clabels.css({'color':options.getfieldvalue('colorbarfontcolor','black'), 'font-size':options.getfieldvalue('colorbarfontsize',18)+'px'}); + if (colorbarinnerlabels=='on') { + clabels.removeClass('sim-colorbar-labels-outer'); + clabels.addClass('sim-colorbar-labels-inner'); } else { - for (var i=0; i <= cdivisions; i++) { - y = 0.2*cheight; - x = i/cdivisions*cwidth; - ccontext.font=String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif'; - ccontext.fillStyle=options.getfieldvalue('colorbarfontcolor','black'); - ccontext.textAlign=textAlign; - ccontext.fillText(labels[cdivisions-i],x+cwidthoffset,cheight+cheightoffset*2); - ccontext.beginPath(); - ccontext.moveTo(x+cwidthoffset,cheightoffset); - ccontext.lineTo(x+cwidthoffset,y+cheightoffset); - ccontext.moveTo(x+cwidthoffset,cheight-y+cheightoffset); - ccontext.lineTo(x+cwidthoffset,cheight+cheightoffset); - ccontext.stroke(); - } - } + clabels.removeClass('sim-colorbar-labels-inner'); + clabels.addClass('sim-colorbar-labels-outer'); + } + var clabelstring = ''; + for (var i=0; i <= cdivisions; i++) { + y = i/(cdivisions+1)*cheight; + x = 0.2*cwidth; + clabelstring += '
  • '+labels[i]+'
    • '; + ccontext.beginPath(); + ccontext.moveTo(0,y+cheightoffset*1); + ccontext.lineTo(x,y+cheightoffset*1); + ccontext.moveTo(cwidth-x,y+cheightoffset*1); + ccontext.lineTo(cwidth,y+cheightoffset*1); + ccontext.stroke(); + } + clabels.append(clabelstring); + //}}} + //Draw colorbar title {{{ + ctitleid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid')+'-colorbar')+'-title'; + ctitle = $('#'+ctitleid); + ctitle.width(cwidth); if (options.exist('colorbartitle')) { - ccontext.font=String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif'; - ccontext.fillStyle=options.getfieldvalue('colorbarfontcolor','black'); - ccontext.textAlign='left'; - ccontext.textBaseline='bottom'; - ccontext.fillText(options.getfieldvalue('colorbartitle'),c,cheightoffset); + ctitle.html(options.getfieldvalue('colorbartitle')); + ctitle.css({'color':options.getfieldvalue('colorbarfontcolor','black'), 'font-size':options.getfieldvalue('colorbarfontsize',18)+'px'}); } //}}} - //}}} } - } - //}}} + } //}}} //texture canvas //{{{ var tcontext,tcanvas,tcanvasid,tcanvashtml,tURL,tgradient; Index: /issm/trunk-jpl/src/m/plot/plotdoc.js =================================================================== --- /issm/trunk-jpl/src/m/plot/plotdoc.js (revision 20828) +++ /issm/trunk-jpl/src/m/plot/plotdoc.js (revision 20829) @@ -23,5 +23,4 @@ console.log(' "colorbarnticks": number of colorbar ticks (default 6, ex: 2, 10)'); console.log(' "colorbarprecision": colorbar label digit precision (default 3, ex: 1, 4)'); - console.log(' "colorbarorientation": oreintation of colorbar (default "vertical", ex: "horizontal")'); console.log(' "colorbarinnerlabels": choose whether labels are inside colorbar (default "off", ex: "on", "off")'); console.log(' "colorbarfontsize": specify colorbar font size (default 1, ex: 14, 22)');