Index: /issm/trunk-jpl/src/m/Makefile.am =================================================================== --- /issm/trunk-jpl/src/m/Makefile.am (revision 20862) +++ /issm/trunk-jpl/src/m/Makefile.am (revision 20863) @@ -146,5 +146,4 @@ ${ISSM_DIR}/src/m/parameterization/setmask.js \ ${ISSM_DIR}/src/m/plot/slider.js \ - ${ISSM_DIR}/src/m/plot/tooltips.js \ ${ISSM_DIR}/src/m/plot/applyoptions.js \ ${ISSM_DIR}/src/m/plot/checkplotoptions.js \ Index: /issm/trunk-jpl/src/m/plot/applyoptions.js =================================================================== --- /issm/trunk-jpl/src/m/plot/applyoptions.js (revision 20862) +++ /issm/trunk-jpl/src/m/plot/applyoptions.js (revision 20863) @@ -16,7 +16,5 @@ //Variable options initialization {{{ var caxis = options.getfieldvalue('caxis',[ArrayMin(data),ArrayMax(data)]); - var colorbarorientiation = options.getfieldvalue('colorbarorientation','vertical'); var colorbarinnerlabels = options.getfieldvalue('colorbarinnerlabels','off'); - 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; //}}} @@ -29,19 +27,19 @@ for (var i=cdivisions; i >= 0; i--) { var scale = (Math.log10(caxis[1])-Math.log10(caxis[0]))/Math.log10(options.getfieldvalue('log',10)); - labels[i] = (Math.pow(options.getfieldvalue('log',10),Math.log10(caxis[0])/Math.log10(options.getfieldvalue('log',10))+scale*(cdivisions-i)/cdivisions)).toPrecision(precision); + labels[i] = (Math.pow(options.getfieldvalue('log',10),Math.log10(caxis[0])/Math.log10(options.getfieldvalue('log',10))+scale*(cdivisions-i)/cdivisions)).toFixed(precision); } } else { for (var i=cdivisions; i >= 0; i--) { - labels[i] = (caxisdelta*(cdivisions-i)/cdivisions+caxis[0]).toPrecision(precision); + labels[i] = (caxisdelta*(cdivisions-i)/cdivisions+caxis[0]).toFixed(precision); } } //}}} //Initialize colorbar canvas {{{ - ccanvasid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid')+'-colorbar'); + ccanvasid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid').replace('canvas','colorbar-canvas')); ccanvas = $('#'+ccanvasid)[0]; cwidth = ccanvas.width*options.getfieldvalue('colorbarwidth',1); cheight = ccanvas.height*options.getfieldvalue('colorbarheight',1); - ccanvas.width = cwidth; - ccanvas.height = cheight; + //ccanvas.width = cwidth; + //ccanvas.height = cheight; ccontext = ccanvas.getContext('2d'); ccontext.clearRect(0,0, cwidth, cheight); @@ -49,5 +47,5 @@ cmap = options.getfieldvalue('colormap','jet'); colorbar = colorbars[cmap]; - cgradient = ccontext.createLinearGradient(0,cheightoffset/2,0,cheight); + cgradient = ccontext.createLinearGradient(0,0,0,cheight); //}}} //Draw colorbar gradient {{{ @@ -68,8 +66,8 @@ //}}} //Draw colorbar labels {{{ - clabelsid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid')+'-colorbar')+'-labels'; + clabelsid = options.getfieldvalue('colorbarid', ccanvasid).replace('canvas','labels'); clabels = $('#'+clabelsid); - clabels.height(cheight); - clabels.css({'color':options.getfieldvalue('colorbarfontcolor','black'), 'font-size':options.getfieldvalue('colorbarfontsize',18)+'px'}); + //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'); @@ -83,12 +81,12 @@ clabels.empty(); for (var i=0; i <= cdivisions; i++) { - y = i/(cdivisions+1)*cheight; + y = (i+0.5)/(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.moveTo(0,y); + ccontext.lineTo(x,y); + ccontext.moveTo(cwidth-x,y); + ccontext.lineTo(cwidth,y); ccontext.stroke(); } @@ -96,10 +94,10 @@ //}}} //Draw colorbar title {{{ - ctitleid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid')+'-colorbar')+'-title'; + ctitleid = options.getfieldvalue('colorbarid', ccanvasid).replace('canvas','heading'); ctitle = $('#'+ctitleid); - ctitle.width(cwidth); + //ctitle.width(cwidth); if (options.exist('colorbartitle')) { ctitle.html(options.getfieldvalue('colorbartitle')); - ctitle.css({'color':options.getfieldvalue('colorbarfontcolor','black'), 'font-size':options.getfieldvalue('colorbarfontsize',18)+'px'}); + //ctitle.css({'color':options.getfieldvalue('colorbarfontcolor','black'), 'font-size':options.getfieldvalue('colorbarfontsize',18)+'px'}); } //}}} } Index: /issm/trunk-jpl/src/m/plot/gauge.js =================================================================== --- /issm/trunk-jpl/src/m/plot/gauge.js (revision 20862) +++ /issm/trunk-jpl/src/m/plot/gauge.js (revision 20863) @@ -1,52 +1,54 @@ -function gauge() { - //GAGUE - create a gague and label that display a value with unit label - // - // Usage: - // gaugeslr = gauge('gaugediv','slr-controldiv','label','m'); +/* + References: https://bernii.github.io/gauge.js/ +*/ +function gaugeInit(){ + + // Convert arguments to options. + var args = Array.prototype.slice.call(arguments); + var options = new pairoptions(args); + + // Recover option values. + var canvasId = options.getfieldvalue('canvasId', 'sim-gauge-canvas'); + var textFieldId = options.getfieldvalue('textFieldId', 'gauge-text'); + var value = options.getfieldvalue('value', 0); + var max = options.getfieldvalue('max', 22); + var colors = options.getfieldvalue('colors', [[0.0, "#FFFF00"], + [0.50, "#FF8000"], + [1.0, "#FF0000"]]); - //Convert arguments to options - var args = Array.prototype.slice.call(arguments); - var options = new pairoptions(args); - - gaugecanvas = options.getfieldvalue('gaugecanvas','gauge'); - gaugetext = options.getfieldvalue('gaugetext','gauge-text'); - gaugediv = options.getfieldvalue('gaugediv','slr-controldiv'); - gaugevalue = options.getfieldvalue('value',0); - min = options.getfieldvalue('min',0); - max = options.getfieldvalue('max',22); - colors = options.getfieldvalue('colors',[[0.0, "#000000" ], [0.50, "#880000"], [1.0, "#ff0000"]]); - label = options.getfieldvalue('label',''); + // Construct associative array of options. + var opts = { + lines: 12, // The number of lines to draw + angle: 0, // The length of each line + lineWidth: 0.39, // The line thickness + + pointer: { + length: 0, // The radius of the inner circle + strokeWidth: 0, // The rotation offset + color: '#000000' // Fill color + }, + + limitMax: 'false', // If true, the pointer will not go past the end of the gauge + percentColors: colors, + strokeColor: '#E0E0E0', // to see which ones work best for you + generateGradient: true + }; - $('
    ').appendTo('#'+gaugediv); + // Create new gauge. + var newGauge = new Gauge(document.getElementById(canvasId)).setOptions(opts); - var opts = { - lines: 12, // The number of lines to draw - angle: 0, // The length of each line - lineWidth: 0.38, // The line thickness - pointer: { - length: 0, // The radius of the inner circle - strokeWidth: 0, // The rotation offset - color: '#000000' // Fill color - }, - limitMax: 'false', // If true, the pointer will not go past the end of the gauge - colorStart: '#6F6EA0', // Colors - colorStop: '#C0C0DB', // just experiment with them - strokeColor: '#EEEEEE', // to see which ones work best for you - percentColors: colors, - generateGradient: true - }; - var target = document.getElementById(gaugecanvas) - var gauge = new Gauge(target).setOptions(opts); - gauge.setTextField(document.getElementById(gaugetext)); - gauge.label = label; - gauge.textField.render = function(gauge) { - return this.el.innerHTML = gauge.displayedValue.toFixed(0) + ' ' + gauge.label; + // Bind text field to gauge. + newGauge.setTextField(document.getElementById(textFieldId)); + + newGauge.textField.render = function(newGauge){ + return this.el.innerHTML = newGauge.displayedValue.toFixed(0); }; - gauge.minValue = min; - gauge.maxValue = max; - gauge.animationSpeed = 1; - gauge.set(1); // set once to initialize? - gauge.set(gaugevalue); // set actual value + + newGauge.maxValue = max; + newGauge.animationSpeed = 1; + newGauge.set(1); // Somehow this prevents pointer from rendering on initialization. + newGauge.set(value); // set actual value - return gauge; + return newGauge; } +/* exported gaugeInit, refreshErrorMessages */ Index: /issm/trunk-jpl/src/m/plot/slider.js =================================================================== --- /issm/trunk-jpl/src/m/plot/slider.js (revision 20862) +++ /issm/trunk-jpl/src/m/plot/slider.js (revision 20863) @@ -92,10 +92,14 @@ $(selector).appendTo(selector + '-value'); + + /* + NOTE: Slider must be "refreshed" after any JavaScript change to it, as + it is an AJAX object. + */ $(selector).slider('refresh'); } +/* exported sliderMoveInput, refreshErrorMessages */ -/* - value/label updated by node transient runs in plot_unit. -*/ + function progressInit(){ @@ -111,8 +115,8 @@ var playButton = $(sim + '-controls-button-play'); var reverseButton = $(sim + '-controls-button-reverse'); - var timeText = $(sim + '-controls-text-time'); + var timeText = $(sim + '-controls-progress-time'); /* - Update progress bar slider attributes. + Update slider attributes. NOTE: Although slider has already been created, need to call slider() @@ -164,16 +168,5 @@ }); - reverseButton.click(function(){ - canvas.movieReverse = !canvas.movieReverse; - if (canvas.movieReverse) { - reverseButton.find("span").removeClass("fa-backward"); - reverseButton.find("span").addClass("fa-forward"); - } - else { - reverseButton.find("span").removeClass("fa-forward"); - reverseButton.find("span").addClass("fa-backward"); - } - }); - canvas.timeLabel = timeText; } +/* exported progressInit, refreshErrorMessages */ Index: sm/trunk-jpl/src/m/plot/tooltips.js =================================================================== --- /issm/trunk-jpl/src/m/plot/tooltips.js (revision 20862) +++ (revision ) @@ -1,33 +1,0 @@ -function tooltip() { - //TOOLTIP - create a hidden toolip with value text that shows html formatted info on hover over the tooltipdiv. - // - // Usage: - // tooltip('value','

    HAIG Glacier (Canadian Rocky Mountains) 30 year transient simulation

    ','tooltipdiv','info-tooltipdiv'); - - //Convert arguments to options - var args = Array.prototype.slice.call(arguments); - var options = new pairoptions(args.slice()); - - //Recover option values: - var value = options.getfieldvalue('value',''); - var tooltipdiv = options.getfieldvalue('tooltipdiv','tooltipdiv'); - - $('
    ' + value + '
    ').appendTo('#'+tooltipdiv); - $("#"+tooltipdiv).hover(function() { - var tooltip = $("> div", this).show(); - var pos = tooltip.offset(); - tooltip.hide(); - var right = pos.left + tooltip.width(); - var pageWidth = $(document).width(); - if (pos.left < 0) { - tooltip.css("marginLeft", "+=" + (-pos.left) + "px"); - } - else if (right > pageWidth) { - tooltip.css("marginLeft", "-=" + (right - pageWidth)); - } - tooltip.fadeIn(); - }, function() { - $("> div", this).fadeOut(function() {$(this).css("marginLeft", ""); - }); - }); -}