Changeset 20863


Ignore:
Timestamp:
07/06/16 12:02:49 (9 years ago)
Author:
dlcheng
Message:

CHG (javascript): Integrating jquinn's js plot patches. DEL (javascript): tooltips not needed anymore.

Location:
issm/trunk-jpl/src/m
Files:
1 deleted
4 edited

Legend:

Unmodified
Added
Removed

  • issm/trunk-jpl/src/m/Makefile.am

    r20811 r20863  
    146146                                ${ISSM_DIR}/src/m/parameterization/setmask.js \
    147147                                ${ISSM_DIR}/src/m/plot/slider.js \
    148                                 ${ISSM_DIR}/src/m/plot/tooltips.js \
    149148                                ${ISSM_DIR}/src/m/plot/applyoptions.js \
    150149                                ${ISSM_DIR}/src/m/plot/checkplotoptions.js \

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

    r20833 r20863  
    1616                        //Variable options initialization {{{
    1717                        var caxis = options.getfieldvalue('caxis',[ArrayMin(data),ArrayMax(data)]);
    18                         var colorbarorientiation = options.getfieldvalue('colorbarorientation','vertical');
    1918                        var colorbarinnerlabels = options.getfieldvalue('colorbarinnerlabels','off');
    20                         var cheightoffset = options.getfieldvalue('colorbarfontsize',18)*options.getfieldvalue('colorbarheight',1);
    2119                        var ccanvasid,ctitleid,clabelsid,ccanvas,ctitle,clabels,ccontext,cmap,colorbar,cwidth,cheight,cgradient,color,y,x;
    2220                        //}}}
    … …  
    2927                                for (var i=cdivisions; i >= 0; i--) {
    3028                                        var scale = (Math.log10(caxis[1])-Math.log10(caxis[0]))/Math.log10(options.getfieldvalue('log',10));
    31                                         labels[i] = (Math.pow(options.getfieldvalue('log',10),Math.log10(caxis[0])/Math.log10(options.getfieldvalue('log',10))+scale*(cdivisions-i)/cdivisions)).toPrecision(precision);
     29                                        labels[i] = (Math.pow(options.getfieldvalue('log',10),Math.log10(caxis[0])/Math.log10(options.getfieldvalue('log',10))+scale*(cdivisions-i)/cdivisions)).toFixed(precision);
    3230                                }
    3331                        } else {
    3432                                for (var i=cdivisions; i >= 0; i--) {
    35                                         labels[i] = (caxisdelta*(cdivisions-i)/cdivisions+caxis[0]).toPrecision(precision);
     33                                        labels[i] = (caxisdelta*(cdivisions-i)/cdivisions+caxis[0]).toFixed(precision);
    3634                                }
    3735                        } //}}}
    3836                        //Initialize colorbar canvas {{{
    3937                       
    40                         ccanvasid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid')+'-colorbar');                 
     38                        ccanvasid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid').replace('canvas','colorbar-canvas'));                 
    4139                        ccanvas = $('#'+ccanvasid)[0];
    4240                        cwidth = ccanvas.width*options.getfieldvalue('colorbarwidth',1);
    4341                        cheight = ccanvas.height*options.getfieldvalue('colorbarheight',1);
    44                         ccanvas.width = cwidth;
    45                         ccanvas.height = cheight;
     42                        //ccanvas.width = cwidth;
     43                        //ccanvas.height = cheight;
    4644                        ccontext = ccanvas.getContext('2d');
    4745                        ccontext.clearRect(0,0, cwidth, cheight);
    … …  
    4947                        cmap = options.getfieldvalue('colormap','jet');
    5048                        colorbar = colorbars[cmap];
    51                         cgradient = ccontext.createLinearGradient(0,cheightoffset/2,0,cheight);
     49                        cgradient = ccontext.createLinearGradient(0,0,0,cheight);
    5250                        //}}}
    5351                        //Draw colorbar gradient {{{
    … …  
    6866                        //}}}
    6967                        //Draw colorbar labels {{{
    70                         clabelsid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid')+'-colorbar')+'-labels';
     68                        clabelsid = options.getfieldvalue('colorbarid', ccanvasid).replace('canvas','labels');
    7169                        clabels = $('#'+clabelsid);
    72                         clabels.height(cheight);
    73                         clabels.css({'color':options.getfieldvalue('colorbarfontcolor','black'), 'font-size':options.getfieldvalue('colorbarfontsize',18)+'px'});
     70                        //clabels.height(cheight);
     71                        //clabels.css({'color':options.getfieldvalue('colorbarfontcolor','black'), 'font-size':options.getfieldvalue('colorbarfontsize',18)+'px'});
    7472                        if (colorbarinnerlabels=='on') {
    7573                                clabels.removeClass('sim-colorbar-labels-outer');
    … …  
    8381                        clabels.empty();
    8482                        for (var i=0; i <= cdivisions; i++) {
    85                                 y = i/(cdivisions+1)*cheight;
     83                                y = (i+0.5)/(cdivisions+1)*cheight;
    8684                                x = 0.2*cwidth;
    8785                                clabelstring += '<li><span>'+labels[i]+'</span></li>';
    8886                                ccontext.beginPath();
    89                                 ccontext.moveTo(0,y+cheightoffset*1);
    90                                 ccontext.lineTo(x,y+cheightoffset*1);
    91                                 ccontext.moveTo(cwidth-x,y+cheightoffset*1);
    92                                 ccontext.lineTo(cwidth,y+cheightoffset*1);
     87                                ccontext.moveTo(0,y);
     88                                ccontext.lineTo(x,y);
     89                                ccontext.moveTo(cwidth-x,y);
     90                                ccontext.lineTo(cwidth,y);
    9391                                ccontext.stroke();
    9492                        }
    … …  
    9694                        //}}}
    9795                        //Draw colorbar title {{{
    98                         ctitleid = options.getfieldvalue('colorbarid',options.getfieldvalue('canvasid')+'-colorbar')+'-title';
     96                        ctitleid = options.getfieldvalue('colorbarid', ccanvasid).replace('canvas','heading');
    9997                        ctitle = $('#'+ctitleid);
    100                         ctitle.width(cwidth);
     98                        //ctitle.width(cwidth);
    10199                        if (options.exist('colorbartitle')) {
    102100                                ctitle.html(options.getfieldvalue('colorbartitle'));
    103                                 ctitle.css({'color':options.getfieldvalue('colorbarfontcolor','black'), 'font-size':options.getfieldvalue('colorbarfontsize',18)+'px'});
     101                                //ctitle.css({'color':options.getfieldvalue('colorbarfontcolor','black'), 'font-size':options.getfieldvalue('colorbarfontsize',18)+'px'});
    104102                        } //}}}
    105103                }

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

    r20748 r20863  
    1 function 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');
     1/*
     2        References:     https://bernii.github.io/gauge.js/
     3*/
     4function gaugeInit(){
     5
     6        // Convert arguments to options.
     7        var args                = Array.prototype.slice.call(arguments);
     8        var options     = new pairoptions(args);
     9
     10        // Recover option values.
     11        var canvasId    = options.getfieldvalue('canvasId', 'sim-gauge-canvas');
     12        var textFieldId = options.getfieldvalue('textFieldId', 'gauge-text');
     13        var     value           = options.getfieldvalue('value', 0);
     14        var max                 = options.getfieldvalue('max', 22);
     15        var colors              = options.getfieldvalue('colors', [[0.0, "#FFFF00"],
     16                                                                                                           [0.50, "#FF8000"],
     17                                                                                                           [1.0, "#FF0000"]]);
    618       
    7         //Convert arguments to options
    8         var args = Array.prototype.slice.call(arguments);
    9         var options = new pairoptions(args);
    10 
    11         gaugecanvas = options.getfieldvalue('gaugecanvas','gauge');
    12         gaugetext = options.getfieldvalue('gaugetext','gauge-text');
    13         gaugediv = options.getfieldvalue('gaugediv','slr-controldiv');
    14         gaugevalue = options.getfieldvalue('value',0);
    15         min = options.getfieldvalue('min',0);
    16         max = options.getfieldvalue('max',22);
    17         colors = options.getfieldvalue('colors',[[0.0, "#000000" ], [0.50, "#880000"], [1.0, "#ff0000"]]);
    18         label = options.getfieldvalue('label','');
     19        // Construct associative array of options.
     20        var opts = {
     21                lines:                          12,     // The number of lines to draw
     22                angle:                          0,              // The length of each line
     23                lineWidth:                      0.39,   // The line thickness
     24               
     25                pointer: {
     26                        length:                         0,                      // The radius of the inner circle
     27                        strokeWidth:            0,                      // The rotation offset
     28                        color:                          '#000000'       // Fill color
     29                },
     30               
     31                limitMax:                       'false',        // If true, the pointer will not go past the end of the gauge
     32                percentColors:          colors,
     33                strokeColor:            '#E0E0E0',      // to see which ones work best for you
     34                generateGradient:       true
     35        };
    1936       
    20         $('<div class="bordered margin-8 padding-8"><canvas id="'+gaugecanvas+'" width="100px" height="50%" class="gauge-canvas"></canvas><div id="'+gaugetext+'" class="gauge-text"></div></div>').appendTo('#'+gaugediv);
     37        // Create new gauge.
     38        var newGauge = new Gauge(document.getElementById(canvasId)).setOptions(opts);
    2139       
    22         var opts = {
    23                 lines: 12, // The number of lines to draw
    24                 angle: 0, // The length of each line
    25                 lineWidth: 0.38, // The line thickness
    26                 pointer: {
    27                         length: 0, // The radius of the inner circle
    28                         strokeWidth: 0, // The rotation offset
    29                         color: '#000000' // Fill color
    30                 },
    31                 limitMax: 'false',   // If true, the pointer will not go past the end of the gauge
    32                 colorStart: '#6F6EA0',   // Colors
    33                 colorStop: '#C0C0DB',    // just experiment with them
    34                 strokeColor: '#EEEEEE',   // to see which ones work best for you
    35                 percentColors: colors,
    36                 generateGradient: true
    37         };
    38         var target = document.getElementById(gaugecanvas)
    39         var gauge = new Gauge(target).setOptions(opts);
    40         gauge.setTextField(document.getElementById(gaugetext));
    41         gauge.label = label;
    42         gauge.textField.render = function(gauge) {
    43       return this.el.innerHTML = gauge.displayedValue.toFixed(0) + ' ' + gauge.label;
     40        // Bind text field to gauge.
     41        newGauge.setTextField(document.getElementById(textFieldId));
     42       
     43        newGauge.textField.render = function(newGauge){
     44        return this.el.innerHTML = newGauge.displayedValue.toFixed(0);
    4445    };
    45         gauge.minValue = min;
    46         gauge.maxValue = max;
    47         gauge.animationSpeed = 1;
    48         gauge.set(1); // set once to initialize?
    49         gauge.set(gaugevalue); // set actual value
     46   
     47        newGauge.maxValue                       = max;
     48        newGauge.animationSpeed         = 1;
     49        newGauge.set(1);                // Somehow this prevents pointer from rendering on initialization.
     50        newGauge.set(value);    // set actual value
    5051       
    51         return gauge;
     52        return newGauge;
    5253}
     54/* exported gaugeInit, refreshErrorMessages */

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

    r20823 r20863  
    9292       
    9393        $(selector).appendTo(selector + '-value');
     94       
     95        /*
     96                NOTE:   Slider must be "refreshed" after any JavaScript change to it, as
     97                                it is an AJAX object.
     98        */
    9499        $(selector).slider('refresh');
    95100}
     101/* exported sliderMoveInput, refreshErrorMessages */
    96102
    97 /*
    98         value/label updated by node transient runs in plot_unit.       
    99 */
     103
    100104function progressInit(){
    101105       
    … …  
    111115        var playButton          = $(sim + '-controls-button-play');
    112116        var reverseButton       = $(sim + '-controls-button-reverse');
    113         var timeText            = $(sim + '-controls-text-time');
     117        var timeText            = $(sim + '-controls-progress-time');
    114118       
    115119        /*
    116                 Update progress bar slider attributes.
     120                Update slider attributes.
    117121               
    118122                NOTE:   Although slider has already been created, need to call slider()
    … …  
    164168        });
    165169       
    166         reverseButton.click(function(){
    167                 canvas.movieReverse = !canvas.movieReverse;
    168                 if (canvas.movieReverse) {
    169                         reverseButton.find("span").removeClass("fa-backward");
    170                         reverseButton.find("span").addClass("fa-forward");
    171                 }
    172                 else {
    173                         reverseButton.find("span").removeClass("fa-forward");
    174                         reverseButton.find("span").addClass("fa-backward");
    175                 }
    176         });
    177        
    178170        canvas.timeLabel = timeText;
    179171}
     172/* exported progressInit, refreshErrorMessages */
Note: See TracChangeset for help on using the changeset viewer.