Changeset 20823


Ignore:
Timestamp:
06/28/16 12:55:56 (9 years ago)
Author:
dlcheng
Message:

CHG (javascript): Integrating new sliders and progress bars. Updating solve to accept callback id for displaying computation progress info.

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

Legend:

Unmodified
Added
Removed

  • issm/trunk-jpl/src/m/classes/clusters/generic.js

    r20802 r20823  
    4646                        fclose(fid);
    4747        } //}}}
    48         this.UploadAndRun = function (md,callbackfunction,fid,toolkitsstring,solutionstring,name,runtimename) { //{{{
     48        this.UploadAndRun = function (md,callbackfunction,callbackid,fid,toolkitsstring,solutionstring,name,runtimename) { //{{{
    4949
    5050                var request = new XMLHttpRequest();
    51                 $(".run-button").html(sprintf("%-16s", "CONNECTING...")).prop("disabled", true);
     51                $(callbackid).html(sprintf("%-16s", "CONNECTING...")).prop("disabled", true);
    5252                request.position = 0; //Keep track of current parsing position in repsonseText
    5353                request.timeout = 30000;
    5454                request.ontimeout = function (event) { //{{{
    55                         $(".run-button").html(sprintf("%-16s", "RUN")).prop("disabled", false);
     55                        $(callbackid).html(sprintf("%-16s", "RUN")).prop("disabled", false);
    5656                } //}}}
    5757                request.upload.onprogress = function(event) { //{{{
    5858                        var progress = (event.loaded / event.total * 100).toFixed(0);
    59                         $(".run-button").html(sprintf("%-20s", "UPLOADING: " + progress + "%"));
     59                        $(callbackid).html(sprintf("%-20s", "UPLOADING: " + progress + "%"));
    6060        } //}}}
    6161                request.onprogress = function (event) { //{{{
    … …  
    6868                                endIndex = startIndex + chunkSize;
    6969                                if (chunkSize >= 1024) { //Arbitrary maximium size of message (Must be below minimium size of model results)
    70                                         $(".run-button").html(sprintf("%-20s", "DOWNLOADING: " + ((request.responseText.length - request.position) / chunkSize * 100).toFixed(0) + "%")).prop("disabled", true);
     70                                        $(callbackid).html(sprintf("%-20s", "DOWNLOADING: " + ((request.responseText.length - request.position) / chunkSize * 100).toFixed(0) + "%")).prop("disabled", true);
    7171                                }
    7272                                else if (request.responseText.length >= endIndex) { //Ensure entire chunk is loaded
    7373                                        var responseChunk = request.responseText.slice(startIndex, endIndex);
    74                                         $(".run-button").html(responseChunk);
     74                                        $(callbackid).html(responseChunk);
    7575                                        request.position = endIndex;
    7676                                }
    … …  
    9696                                console.log(e);
    9797                        }
    98                         $(".run-button").html(sprintf("%-16s", "RUN")).prop("disabled", false);
     98                        $(callbackid).html(sprintf("%-16s", "RUN")).prop("disabled", false);
    9999                        callbackfunction();
    100100                }; //}}}

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

    r20796 r20823  
    246246                                canvas["movieHandler"] = setInterval(function () {
    247247                                                node["movieFrame"] = canvas["movieFrame"];
    248                                                 if (canvas["moviePlay"]) {
     248                                                if (canvas["moviePlay"] && canvas["movieIncrement"]) {
    249249                                                        if (canvas["movieReverse"]) {
    250250                                                                node["movieFrame"] = (((node["movieFrame"] - 1) % node["movieLength"]) + node["movieLength"]) % node["movieLength"]; //Handle negative modulus
    … …  
    254254                                                        }
    255255                                                }
    256                                                 if (canvas["timeLabel"]) canvas["timeLabel"].html(node["movieTimestamps"][node["movieFrame"]].toFixed(0) + " " + options.getfieldvalue("movietimeunit","yr"));
    257                                                 if (canvas["progressBar"]) canvas["progressBar"].slider("value", node["movieFrame"]);
     256                                                if (canvas["timeLabel"]) {
     257                                                        canvas["timeLabel"].html(node["movieTimestamps"][node["movieFrame"]].toFixed(0) + " " + options.getfieldvalue("movietimeunit","yr"));
     258                                                }
     259                                                if (canvas["progressBar"]) {
     260                                                        canvas["progressBar"].val(node["movieFrame"]);
     261                                                        canvas["progressBar"].slider('refresh');
     262                                                }
    258263                                                node["buffers"] = initBuffers(gl,[node["arrays"][0],node["arrays"][1][node["movieFrame"]],node["arrays"][2]]);
    259264                                                canvas["movieFrame"] = node["movieFrame"];
    … …  
    261266                                if (canvas["progressBar"]) {
    262267                                        canvas["movieFrame"] = 0;
    263                                         canvas["progressBar"].slider("value", 0);
    264                                         canvas["progressBar"].slider("option", {max: node["movieLength"]-1});
     268                                        canvas["progressBar"].val(0);
     269                                        canvas["progressBar"].attr('max', node["movieLength"]-1);
     270                                        canvas["progressBar"].slider('refresh');
    265271                                }
    266272                        }

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

    r20759 r20823  
    1 function slider() {
    2         //SLIDER - Slider bar with initial value, callback on change, unique name, min/max value range, description message, fill color, widht/height, value precision, value step, and the id of the div to create the slider in.
    3         //
    4         //   Usage:
    5         //              slider('value',0,'callback',function(value){PlotGreenland(value,0);PlotSlr()},'name','greenland','min',0,'max',100,'message',['Remove ice: ','%'],'color','#BBBBBB','width','100%','height','24px','precision',2,'step',5,'slidersdiv','greenland-sliders');
     1/*
     2        Name:
     3                sliderInit
     4       
     5        Description:
     6                Initialize slider corresponding to passed selector with passed value,
     7                minimum and maximum values, step (which is the increment for the
     8                slider), and callback function (which is called when slider is changed).
     9       
     10                Options are passed as pairs to the function according to the usage
     11                example below.
     12       
     13        Usage:
     14                sliderInit(
     15                        'selector', #some-element,
     16                        'value', 0,
     17                        'min', -1,
     18                        'max', 1,
     19                        'step', 0.1,
     20                        'callback', function(value){someEngineFunction(value)}
     21                );
     22       
     23        NOTE:   jQuery Mobile will reflect changes to slider in its input "label"
     24                        based on the width of the slider. For example, step might be set to
     25                        0.1, but if the width of the slider is too narrow, changes to the
     26                        slider will only be reflected in whole numeral increments in the
     27                        slider' label. That said, *all* sliders can be adjusted via the
     28                        "up" and "down" keys by whatever increment step is set to.
     29*/
     30function sliderInit(){
     31       
     32        // Convert arguments to options
     33        var args                = Array.prototype.slice.call(arguments);
     34        var options     = new pairoptions(args.slice());
    635
    7         //Convert arguments to options
    8         var args = Array.prototype.slice.call(arguments);
    9         var options = new pairoptions(args.slice());
     36        // Recover option values
     37        var selector    = options.getfieldvalue('selector', '');
     38        var value               = options.getfieldvalue('value', 0);
     39        var callback    = options.getfieldvalue('callback', function(event, ui){});
     40        var min                 = options.getfieldvalue('min', 0.6 * value);
     41        var max                 = options.getfieldvalue('max', 1.4 * value);
     42        var step                = options.getfieldvalue('step', 1);
    1043
    11         //Recover option values:
    12         var value = options.getfieldvalue('value',0);
    13         var callback = options.getfieldvalue('callback',function(){});
    14         var name = options.getfieldvalue('name','');
    15         var min = options.getfieldvalue('min',0.6*value);
    16         var max = options.getfieldvalue('max',1.4*value);
    17         var width = options.getfieldvalue('width','auto');
    18         var height = options.getfieldvalue('height',32);
    19         var message = options.getfieldvalue('message','');
    20         var startmessage = options.getfieldvalue('startmessage',message);
    21         var middlemessage = options.getfieldvalue('middlemessage',message);
    22         var endmessage = options.getfieldvalue('endmessage',message);
    23         var color = options.getfieldvalue('color','#bbbbbb');
    24         var precision = options.getfieldvalue('precision',3);
    25         var step = options.getfieldvalue('step',1);
    26         var slidersdiv = options.getfieldvalue('slidersdiv','slidersdiv');
     44        /*
     45                Update slider attributes.
     46               
     47                NOTE:   Although slider has already been created, need to call slider()
     48                                in order to avoid:
     49                               
     50                                        Error: cannot call methods on slider prior to
     51                                        initialization; attempted to call method 'refresh'
     52                                       
     53                                Attempted all other methods for intialization of slider widget
     54                                from jQuery Mobile, and this is the only one that seemed to work
     55                                (see index.php for related markup).
     56        */
     57        $(selector).slider();
     58        $(selector).val(value);
     59        $(selector).attr('min', min);
     60        $(selector).attr('max', max);
     61        $(selector).attr('step', step);
     62        $(selector).on('slidestop', function(event, ui){
     63                callback(parseFloat($(selector).val()));
     64        });
    2765
    28         $('<div class="'+name+'-slider"></div>').appendTo('#'+slidersdiv);
    29         $('<div class="info'+name+'">'+startmessage[0]+value.toFixed(precision)+startmessage[1]+'</div>').appendTo('#'+slidersdiv);
    30         var info=$('.info'+name);
    31         $('.'+name+'-slider').slider({
    32                 range:'min',
    33                 value:value,
    34                 min:min,
    35                 max:max,
    36                 step:step,
    37                 slide:function(event,ui){
    38                         info.text(middlemessage[0]+ui.value.toFixed(precision)+middlemessage[1]);
    39                 },
    40                 stop:function(event,ui){
    41                         info.text(middlemessage[0]+ui.value.toFixed(precision)+middlemessage[1]);
    42                         callback(ui.value);
    43                         info.text(endmessage[0]+ui.value.toFixed(precision)+endmessage[1]);
     66        /*
     67                NOTE:   Slider must be "refreshed" after any JavaScript change to it, as
     68                                it is an AJAX object.
     69        */
     70        $(selector).slider('refresh');
     71}
     72/* exported sliderInit, refreshErrorMessages */
     73
     74
     75/*
     76        Name:
     77                sliderMoveInput
     78       
     79        Description:
     80                Appends a jQuery Mobile slider input to an element whose selector
     81                adheres to the following protocol,
     82               
     83                        destination = sliderSelector + '-value'
     84                       
     85        Usage:
     86                sliderMoveInput('#someSliderSelector');
     87               
     88        NOTE:   Destination element must, obviously, be hardcoded into markup for a
     89                        call to this function to work as expected.
     90*/
     91function sliderMoveInput(selector){
     92       
     93        $(selector).appendTo(selector + '-value');
     94        $(selector).slider('refresh');
     95}
     96
     97/*
     98        value/label updated by node transient runs in plot_unit.       
     99*/
     100function progressInit(){
     101       
     102        // Convert arguments to options.
     103        var args                        = Array.prototype.slice.call(arguments);
     104        var options             = new pairoptions(args.slice());
     105       
     106        // Recover option values
     107        var sim                         = options.getfieldvalue('sim', '');
     108       
     109        var canvas                      = $(sim + '-canvas')[0];
     110        var progressBar         = $(sim + '-controls-slider-progress');
     111        var playButton          = $(sim + '-controls-button-play');
     112        var reverseButton       = $(sim + '-controls-button-reverse');
     113        var timeText            = $(sim + '-controls-text-time');
     114       
     115        /*
     116                Update progress bar slider attributes.
     117               
     118                NOTE:   Although slider has already been created, need to call slider()
     119                                in order to avoid:
     120                               
     121                                        Error: cannot call methods on slider prior to
     122                                        initialization; attempted to call method 'refresh'
     123                                       
     124                                Attempted all other methods for intialization of slider widget
     125                                from jQuery Mobile, and this is the only one that seemed to work
     126                                (see index.php for related markup).
     127        */
     128        $(progressBar).slider();
     129        $(progressBar).val(value);
     130        $(progressBar).attr('min', 0);
     131        $(progressBar).attr('max', 1);
     132        $(progressBar).attr('step', 1);
     133        $(progressBar).on('slidestop', function(event, ui){
     134                canvas.movieIncrement = true;
     135                canvas.movieFrame = parseInt($(progressBar).val());
     136        });
     137        $(progressBar).on('change', function(event, ui){
     138                canvas.movieFrame = parseInt($(progressBar).val());
     139        });
     140        $(progressBar).on('slidestart', function(event, ui){
     141                canvas.movieIncrement = false; 
     142                canvas.movieFrame = parseInt($(progressBar).val());
     143        });
     144
     145        /*
     146                NOTE:   Slider must be "refreshed" after any JavaScript change to it, as
     147                                it is an AJAX object.
     148        */
     149        $(progressBar).slider('refresh');
     150       
     151        // Attach progress bar slider to simulation.
     152        canvas.progressBar = progressBar;
     153
     154        playButton.click(function(){
     155                canvas.moviePlay = !canvas.moviePlay;
     156                if (canvas.moviePlay){
     157                        playButton.find("span").removeClass("fa-play");
     158                        playButton.find("span").addClass("fa-pause");
     159                }
     160                else{
     161                        playButton.find("span").removeClass("fa-pause");
     162                        playButton.find("span").addClass("fa-play");
    44163                }
    45164        });
    46         $('.'+name+'-slider.ui-slider').css({
    47                 width:'auto',
    48                 height:height,
    49                 background:color,
    50                 margin:'8px'
    51         });
    52         $('.'+name+'-slider .ui-slider-handle').css({
    53                 background:color,
    54                 height:parseInt(height)+8
    55         });
    56         $('.'+name+'-slider .ui-slider-range').css({
    57                 background:color
    58         });
    59 }
    60 
    61 function progress() {
    62         //PROGRESS - Progress bar with initial value, unique name, width/height, and the id of the div to create the slider in. One progress per canvas, value/label updated by node transient runs in plot_unit.
    63         //
    64         //   Usage:
    65         //              progress('value',0,'name','hma','width','100%','height',sliderheight,'progressdiv','hma-progressdiv');
    66         //
    67         //   See also: PLOT_UNIT
    68165       
    69         //Convert arguments to options
    70         var args = Array.prototype.slice.call(arguments);
    71         var options = new pairoptions(args.slice());
    72        
    73         var value = options.getfieldvalue('value',0);
    74         var name = options.getfieldvalue('name','hma');
    75         var min = options.getfieldvalue('min',0.6*value);
    76         var max = options.getfieldvalue('max',1.4*value);
    77         var width = options.getfieldvalue('width','auto');
    78         var height = options.getfieldvalue('height',32);
    79         var color = options.getfieldvalue('color','#bbbbbb');
    80         var progressdiv = options.getfieldvalue('progressdiv','progressdiv');
    81        
    82         var canvas = $('#'+name)[0];
    83         var progressbar = $('#'+name+'-progressbar');
    84         var playbutton = $('#'+name+'-playbutton');
    85         var reversebutton = $('#'+name+'-reversebutton');
    86         var timelabel = $('#'+name+'-timelabel');
    87 
    88        
    89         playbutton.click(function() {
    90                 canvas.moviePlay = !canvas.moviePlay;
    91                 if (canvas.moviePlay) {
    92                         $("#playButton").html("&#10074&#10074");
     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");
    93171                }
    94172                else {
    95                         $("#playButton").html("&#9654");
     173                        reverseButton.find("span").removeClass("fa-forward");
     174                        reverseButton.find("span").addClass("fa-backward");
    96175                }
    97176        });
    98         reversebutton.click(function() {
    99                 canvas.movieReverse = !canvas.movieReverse;
    100                 if (canvas.movieReverse) {
    101                         reversebutton.html("&#9664&#9664");
    102                 }
    103                 else {
    104                         reversebutton.html("&#9654&#9654");
    105                 }
    106         });
    107         canvas.timeLabel = timelabel;
    108177       
    109         $('<div class="'+name+'-progressbar bordered margin-8 padding-8"></div>').prependTo('#'+progressdiv);
    110         $('.'+name+'-progressbar').slider({
    111                 range:'min',
    112                 value:0,
    113                 min:0,
    114                 max:1,
    115                 step:1,
    116                 start:function(event,ui){
    117                         canvas.movieFrame = ui.value;
    118                         canvas.movieIncrement = false;
    119                 },
    120                 slide:function(event,ui){
    121                         canvas.movieFrame = ui.value;
    122                 },
    123                 stop:function(event,ui){
    124                         canvas.movieFrame = ui.value;
    125                         canvas.movieIncrement = true;
    126                 }
    127         });
    128         $('.'+name+'-progressbar.ui-slider').css({
    129                 width:'auto',
    130                 height:height,
    131                 background:color,
    132                 margin:'8px'
    133         });
    134         $('.'+name+'-progressbar .ui-slider-handle').css({
    135                 background:color,
    136                 height:parseInt(height)+8
    137         });
    138         $('.'+name+'-progressbar .ui-slider-range').css({
    139                 background:'red'
    140         });
    141        
    142         canvas.progressBar = $('.'+name+'-progressbar');
     178        canvas.timeLabel = timeText;
    143179}

  • issm/trunk-jpl/src/m/solve/solve.js

    r20299 r20823  
    103103
    104104        //callback function:
    105         function callbackfunction(){}; //default, do nothing if no callback requested.
    106         if (options.getfieldvalue('callback',false)){
    107                 callbackfunction=options.getfieldvalue('callback');
     105        function callbackfunction(){}; //default, do nothing if no callback function requested.
     106        if (options.getfieldvalue('callbackfunction',false)){
     107                callbackfunction=options.getfieldvalue('callbackfunction');
     108        }
     109       
     110        //callback id:
     111        var callbackid = '.run-button'; //default, update .run-button elements with progress updates.
     112        if (options.getfieldvalue('callbackid',false)){
     113                callbackid=options.getfieldvalue('callbackid');
    108114        }
    109115
    … …  
    131137
    132138                /*We are running somewhere else on a computational server. Send the buffer to that server and retrieve output: */
    133                 cluster.UploadAndRun(md,callbackfunction,fid,toolkitsstring,solutionstring,md.miscellaneous.name,md.priv.runtimename);
     139                cluster.UploadAndRun(md,callbackfunction,callbackid,fid,toolkitsstring,solutionstring,md.miscellaneous.name,md.priv.runtimename);
    134140
    135141                return md;
Note: See TracChangeset for help on using the changeset viewer.