Changeset 19821

Timestamp:

11/25/15 22:20:33 (9 years ago)

Author:

dlcheng

Message:

CHG: Optimizing colorbar and adding colorbar ticks for test101.html

File:

• issm/trunk-jpl/src/m/plot/applyoptions.js (modified) (1 diff)

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

@@ -142 +142 @@
                         var cdivisions = cheight/4;
                         var color;
-                        var ccanvas = $('<canvas id="'+options.getfieldvalue('canvasid')+'_colorbar" width="'+cwidth+'" height="'+cheight+'"></canvas>').insertAfter('#'+options.getfieldvalue('canvasid'));
-                        ccanvas.css({'position':'relative','top':((canvassize-cheight)/-2).toFixed(2)+'px'});
+                        var cheightoffset = options.getfieldvalue('colorbarfontsize',16);
+                        var ccanvas = $('<canvas id="'+options.getfieldvalue('canvasid')+'_colorbar" width="'+String(cwidth*4)+'" height="'+String(cheight+cheightoffset)+'"></canvas>').insertAfter('#'+options.getfieldvalue('canvasid'));
+                        ccanvas.css({'position':'relative','top':((canvassize-cheight-cheightoffset)/-2).toFixed(2)+'px'});
                         var ccontext = ccanvas[0].getContext('2d');
-                        for (var i = 0; i < cdivisions; i++) {
-                                var cindex= Math.floor(i / cdivisions * (colorbar.length - 1));
-                                color = colorbar[(colorbar.length - 1) - cindex];
-                                color = [Math.round(color[0] * 255), Math.round(color[1] * 255), Math.round(color[2] * 255)];   
-                                ccontext.fillStyle = 'rgba(' + color.toString() + ',1.0)';
-                                ccontext.fillRect(0, Math.floor(i * cheight / cdivisions), cwidth, Math.ceil(cheight / cdivisions));
-                        }
+                        var cgradient = ccontext.createLinearGradient(0,cheightoffset/2,0,cheight);
+                        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,'rgba('+color.toString()+',1.0)');
+                        }
+                        ccontext.fillStyle=cgradient;
+                        ccontext.fillRect(0,cheightoffset/2,cwidth,cheight);
+                        //Draw colorbar border
+                        ccontext.beginPath();
+                        ccontext.lineWidth='1';
+                        ccontext.strokeStyle='black';
+                        ccontext.rect(0,cheightoffset/2,cwidth,cheight);
+                        ccontext.stroke();
                         //Set colorbar lables
-                        var clabels = $('<ul id="'+options.getfieldvalue('canvasid')+'_colorbar_labels"></ul>');
-                        clabels.css({'position':'relative','width':'auto','vertical-align':'top','height':String(cheight)+'px','list-style-type':'none','display':'inline-table','top':((canvassize-cheight)/2).toFixed(2)+'px','padding':'0px','margin':'0px '+String(cwidth/4)+'px 0px '+String(cwidth/4)+'px','font-size':String(options.getfieldvalue('colorbarfontsize',16))+'px','color':String(options.getfieldvalue('FontColor','black'))});
-                        clabels.insertAfter('#'+options.getfieldvalue('canvasid')+'_colorbar');
                         var labels = [];
                         var cdivisions = 8;
                         var caxisdelta = caxis[1] - caxis[0];
                         var clabelitem;
-
                         if (options.exist('log')) {
-                                //logvalue=options.getfieldvalue('log');
-                                //set(c,'YTick',log(tick_vals)./log(logvalue));
                                 for (var i = cdivisions; i >= 0; i--) {
-                                        labels[i] = (caxisdelta*i/cdivisions+caxis[0]).toPrecision(3);
+                                        if (caxisdelta*i/cdivisions==min) {
+                                                labels[i] = (caxis[0]).toPrecision(3);
+                                        }
+                                        else {
+                                                labels[i] = (Math.exp(Math.log(caxisdelta)*i/cdivisions)+caxis[0]).toPrecision(3);
+                                        }       
                                 }
                         } else {
                                 for (var i = cdivisions; i >= 0; i--) {
-                                        labels[i] = (caxisdelta*i/cdivisions+caxis[0]).toPrecision(3);
+                                        labels[i] = (caxisdelta*(cdivisions-i)/cdivisions+caxis[0]).toPrecision(3);
                                 }
                         }
                         for (var i = cdivisions; i >= 0; i--) {
-                                var clabelitem = $('<li><div>'+labels[i]+'</div></li>')
-                                clabelitem.css({'display':'table-row'});
-                                clabelitem.find('div').css({'display':'table-cell','vertical-align':'middle'});
-                                clabelitem.appendTo('#'+options.getfieldvalue('canvasid')+'_colorbar_labels');
+                                var y = i/cdivisions*cheight+cheightoffset/2;
+                                var x = 0.2*cwidth;
+                                ccontext.beginPath();
+                                ccontext.moveTo(0,y);
+                                ccontext.lineTo(x,y);
+                                ccontext.moveTo(cwidth-x,y);
+                                ccontext.lineTo(cwidth,y);
+                                ccontext.stroke();
+                                ccontext.font=String(options.getfieldvalue('colorbarfontsize',16))+'px Arial';
+                                ccontext.fillStyle='black';
+                                ccontext.textAlign='left';
+                                ccontext.fillText(labels[i],cwidth+x,y+cheightoffset/2);
+
                         }
                         /* //{{{