Changeset 20401


Ignore:
Timestamp:
03/30/16 22:49:50 (9 years ago)
Author:
dlcheng
Message:

ADD (javascript): plot_quiver implementation. CHG (javascript): Fixing issues with multiple data plots/colorbars in plot_manager to match matlab semantics. Adding movie slider progress bar to sliders.js.

Location:
issm/trunk-jpl/src/m/plot
Files:
1 added
7 edited

Legend:

Unmodified
Added
Removed

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

    r20358 r20401  
    1111                if (options.getfieldvalue('colorbar')==1) {
    1212                        //Handle movie data {{{
     13                        if (typeof data == 'string') {
     14                                //throw Error('plot error message: data of type string');
     15                                return;
     16                        }
    1317                        var     dataresults = processdata(md,data,options);
    1418                        var     data2 = dataresults[0];

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

    r20205 r20401  
    1212        var data=options.getfieldvalue('data');
    1313       
    14         //standard plot: initialize open Gl for each canvas, if needed:
    15         var canvas = $('<div><canvas id="'+options.getfieldvalue('canvasid')+'" width="'+options.getfieldvalue('canvassize',480)+'" height="'+options.getfieldvalue('canvassize',480)+'"></canvas></div>)')
    16         canvas.css({'height':String(options.getfieldvalue('canvassize',480)+'px')});
    17         if ($('#'+options.getfieldvalue('canvasid')).length == 0) {
    18                 canvas.appendTo('body');
    19         }
    20         canvas=document.getElementById(options.getfieldvalue('canvasid'));
    21         //Initialize the buffer structure when first data is drawn to mesh:
    22         var requestDrawing = false;
    23         var gl = canvas.gl;
    24         if (!canvas.hasOwnProperty("nodes")) {
    25                 canvas.nodes = {};
    26                 canvas.datalength = 0;
    27                 requestDrawing = true;
    28                 //Initialize the GL context:
    29                 gl = initWebGL(canvas,options);
    30                 if (!gl) {
    31                         throw Error("plotmodel error message: could not initialize open Gl!");
     14        //TODO: Move into webgl.js?
     15        function initCanvas() {
     16                //standard plot: initialize open Gl for each canvas, if needed:
     17                var canvas = $('<div><canvas id="'+options.getfieldvalue('canvasid')+'" width="'+options.getfieldvalue('canvassize',480)+'" height="'+options.getfieldvalue('canvassize',480)+'"></canvas></div>)')
     18                canvas.css({'height':String(options.getfieldvalue('canvassize',480)+'px')});
     19                if ($('#'+options.getfieldvalue('canvasid')).length == 0) {
     20                        canvas.appendTo('body');
    3221                }
    33                 canvas.gl = gl;
    34         }
    35         canvas.nodes["data"+String(++canvas.datalength)] = Node(gl,options);
     22                canvas=document.getElementById(options.getfieldvalue('canvasid'));
     23                //Initialize the buffer structure when first data is drawn to mesh:
     24                canvas.requestDrawing = false;
     25                var gl = canvas.gl;
     26                if (!canvas.hasOwnProperty("nodes")) {
     27                        canvas.nodes = {};
     28                        canvas.datalength = 0;
     29                        canvas.requestDrawing = true;
     30                        //Initialize the GL context:
     31                        gl = initWebGL(canvas,options);
     32                        if (!gl) {
     33                                throw Error("plotmodel error message: could not initialize open Gl!");
     34                        }
     35                        canvas.gl = gl;
     36                }
     37                canvas.nodes["data"+String(++canvas.datalength)] = Node(gl,options);
     38                return canvas;
     39        }
     40        var canvas = initCanvas();
    3641
    3742        //figure out if this is a special plot
    … …  
    4247                        case 'boundaries':
    4348                                plot_boundaries(md,options,subplotwidth,i);
    44                                 break;
     49                                return;
    4550                        case 'BC':
    4651                                plot_BC(md,options,subplotwidth,i,data);
    47                                 break;
     52                                return;
    4853                        case 'edges':
    4954                                plot_edges(md,options,subplotwidth,i,data);
    50                                 break;
     55                                return;
    5156                        case 'elementnumbering':
    5257                                plot_elementnumbering(md,options,subplotwidth,i);
    53                                 break;
     58                                return;
    5459                        case 'highlightelements':
    5560                                plot_highlightelements(md,options,subplotwidth,i);
    56                                 break;
     61                                return;
    5762                        case 'qmumean':
    5863                                plot_qmumean(md,options,nlines,ncols,i);
    59                                 break;
     64                                return;
    6065                        case 'qmustddev':
    6166                                plot_qmustddev(md,options,nlines,ncols,i);
    62                                 break;
     67                                return;
    6368                        case 'qmuhistnorm':
    6469                                plot_qmuhistnorm(md,options,nlines,ncols,i);
    65                                 break;
     70                                return;
    6671                        case 'qmu_mass_flux_segments':
    6772                                plot_qmu_mass_flux_segments(md,options,nlines,ncols,i);
    68                                 break;
     73                                return;
    6974                        case 'part_hist':
    7075                                plot_parthist(md,options,nlines,ncols,i);
    71                                 break;
     76                                return;
    7277                        case 'part_hist_n':
    7378                                plot_parthistn(md,options,nlines,ncols,i);
    74                                 break;
     79                                return;
    7580                        case 'part_hist_w':
    7681                                plot_parthistw(md,options,nlines,ncols,i);
    77                                 break;
     82                                return;
    7883                        case 'elements_type':
    7984                                plot_elementstype(md,options,subplotwidth,i);
    80                                 break;
     85                                return;
    8186                        case 'vertexnumbering':
    8287                                plot_vertexnumbering(md,options,subplotwidth,i);
    83                                 break;
     88                                return;
    8489                        case 'highlightvertices':
    8590                                plot_highlightvertices(md,options,subplotwidth,i);
    86                                 break;
     91                                return;
    8792                        case 'basal_drag':
    8893                                plot_basaldrag(md,options,subplotwidth,i,data);
    89                                 break;
     94                                return;
    9095                        case 'basal_dragx':
    9196                                plot_basaldrag(md,options,subplotwidth,i,data);
    92                                 break;
     97                                return;
    9398                        case 'basal_dragy':
    9499                                plot_basaldrag(md,options,subplotwidth,i,data);
    95                                 break;
     100                                return;
    96101                        case 'driving_stress':
    97102                                plot_drivingstress(md,options,subplotwidth,i);
    98                                 break;
     103                                return;
    99104                        case 'mesh':
    100105                                plot_mesh(md,options,canvas,gl,canvas.nodes["data"+String(canvas.datalength)]);
    101                                 break;
     106                                return;
    102107                        case 'none':
    103108                                if (!(options.exist('overlay'))){
    104109                                        plot_none(md,options,nlines,ncols,i);
    105110                                }
    106                                 break;
     111                                return;
    107112                        case 'penalties':
    108113                                plot_penalties(md,options,subplotwidth,i);
    109                                 break;
     114                                return;
    110115                        case 'partition':
    111116                                plot_partition(md,options,nlines,ncols,i);
    112                                 break;
     117                                return;
    113118                        case 'referential':
    114119                                plot_referential(md,options,nlines,ncols,i);
    115                                 break;
     120                                return;
    116121                        case 'riftvel':
    117122                                plot_riftvel(md,options,nlines,ncols,i);
    118                                 break;
     123                                return;
    119124                        case 'riftnumbering':
    120125                                plot_riftnumbering(md,options,nlines,ncols,i);
    121                                 break;
     126                                return;
    122127                        case 'rifts':
    123128                                plot_rifts(md,options,nlines,ncols,i);
    124                                 break;
     129                                return;
    125130                        case 'riftrelvel':
    126131                                plot_riftrelvel(md,options,nlines,ncols,i);
    127                                 break;
     132                                return;
    128133                        case 'riftpenetration':
    129134                                plot_riftpenetration(md,options,nlines,ncols,i);
    130                                 break;
     135                                return;
    131136                        case 'riftfraction':
    132137                                plot_riftfraction(md,options,nlines,ncols,i);
    133                                 break;
     138                                return;
    134139                        case 'sarpwr':
    135140                                plot_sarpwr(md,options,subplotwidth,i);
    136                                 break;
     141                                return;
    137142                        case 'time_dependant':
    138143                                plot_vstime(md,options,nlines,ncols,i);
    139                                 break;
     144                                return;
    140145                        case 'icefront':
    141146                                plot_icefront(md,options,subplotwidth,i,data);
    142                                 break;
     147                                return;
    143148                        case 'segments':
    144149                                plot_segments(md,options,subplotwidth,i,data);
    145                                 break;
     150                                return;
    146151                        case 'quiver':
    147                                 data=[md.initialization.vx, md.initialization.vy]; //Go ahead and try plot_unit
    148 
     152                                plot_quiver(md,options,canvas,gl,canvas.nodes["data"+String(canvas.datalength)]);
     153                                return;
    149154                        case 'strainrate_tensor':
    150155                        case 'strainrate':
    … …  
    166171                        case 'deviatoricstress_principalaxis3':
    167172                                plot_tensor(md,options,subplotwidth,i,data);
    168                                 break;
     173                                return;
    169174                        case 'thermaltransient_results':
    170175                                plot_thermaltransient_results(md,options,subplotwidth,i);
    171                                 break;
     176                                return;
    172177                        case 'transient_movie':
    173178                                plot_transient_movie(md,options,subplotwidth,i);
    174                                 break;
     179                                return;
    175180                        case 'transient_results':
    176181                                plot_transient_results(md,options,subplotwidth,i);
    177                                 break;
     182                                return;
    178183                        case 'transient_field':
    179184                                plot_transient_field(md,options,subplotwidth,i);
    180                                 break;
     185                                return;
    181186                        default:
    182187                                if (data in md){
    … …  
    218223                return;
    219224        }
    220 
     225       
    221226        if (typeof data !== 'string'){
    222227                //plot unit
    … …  
    225230
    226231        applyoptions(md,data,options,canvas,gl,canvas.nodes["data"+String(canvas.datalength)]);
    227        
    228         //Draw into the canvas if needed:
    229         if (requestDrawing)     draw(gl,options,canvas);
    230232}

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

    r20234 r20401  
    6262        node["modelMatrix"] = recalculateModelMatrix(node);
    6363        node["drawMode"] = gl.LINES;
    64         node["overlay"] = false;
    6564        node["drawOrder"] = 0;
    6665        node["maskEnabled"] = options.exist('mask');
    … …  
    109108        node["arrays"] = [vertices, colors, indices];
    110109        node["buffers"] = initBuffers(gl, node["arrays"]);
     110        if (canvas.requestDrawing)      draw(gl,options,canvas);
    111111}

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

    r20258 r20401  
    6565        node["texture"] = initTexture(gl,options.getfieldvalue('image'));
    6666        node["alpha"] = options.getfieldvalue('outeralpha',1.0);
    67         node["overlay"] = false;
    6867        node["drawOrder"] = 1;
    6968        node["maskEnabled"] = options.getfieldvalue('outermask','off') == 'on';
    … …  
    127126        node["arrays"] = [vertices, texcoords, indices];
    128127        node["buffers"] = initBuffers(gl,node["arrays"]);
     128        if (canvas.requestDrawing)      draw(gl,options,canvas);
    129129}

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

    r20354 r20401  
    7070        node["modelMatrix"] = recalculateModelMatrix(node);
    7171        node["alpha"] = options.getfieldvalue('alpha',1.0);
    72         node["overlay"] = options.getfieldvalue('overlay','off') == 'on';
    7372        node["drawOrder"] = 0;
    7473        node["maskEnabled"] = options.getfieldvalue('innermask','off') == 'on';
    … …  
    200199                                node["movieFrame"] = 0;
    201200                                node["movieHandler"] = function () {
    202                                                 node["movieFrame"] = (node["movieFrame"] + 1) % (node["movieLength"]);
    203                                                 var array = [node["arrays"][0],node["arrays"][1][node["movieFrame"]],node["arrays"][2]];
    204                                                 node["buffers"] = initBuffers(gl,array);
     201                                                if (canvas["moviePlay"]) {
     202                                                        node["movieFrame"] = canvas["movieFrame"];
     203                                                        if (canvas["movieIncrement"]) {
     204                                                                if (canvas["movieReverse"]) {
     205                                                                        node["movieFrame"] = (((node["movieFrame"] - 1) % node["movieLength"]) + node["movieLength"]) % node["movieLength"]; //Handle negative modulus
     206                                                                }
     207                                                                else {
     208                                                                        node["movieFrame"] = (((node["movieFrame"] + 1) % node["movieLength"]) + node["movieLength"]) % node["movieLength"]; //Handle negative modulus
     209                                                                }
     210                                                        }
     211                                                        if (canvas["timeLabel"]) {
     212                                                                canvas["timeLabel"].html(String(node["movieFrame"]) + "/" +  String(node["movieLength"] - 1));
     213                                                        }
     214                                                        if (canvas["progressBar"]) {
     215                                                                canvas["progressBar"].slider("value", node["movieFrame"]);
     216                                                        }
     217                                                        var array = [node["arrays"][0],node["arrays"][1][node["movieFrame"]],node["arrays"][2]];
     218                                                        node["buffers"] = initBuffers(gl,array);
     219                                                        canvas["movieFrame"] = node["movieFrame"];
     220                                                }
    205221                                                setTimeout(node["movieHandler"], node["movieInterval"]);
    206222                                        };
    207223                                setTimeout(node["movieHandler"], node["movieInterval"]);
     224                                if (canvas["progressBar"]) {
     225                                        canvas["movieFrame"] = 0;
     226                                        canvas["progressBar"].slider("value", 0);
     227                                        canvas["progressBar"].slider("option", {max: node["movieLength"]-1});
     228                                }
    208229                        }
    209230                       
    … …  
    216237                        throw Error(sprintf("%s%i%s\n",'case ',datatype,' not supported'));
    217238        }
     239        if (canvas.requestDrawing) draw(gl,options,canvas);
    218240}

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

    r20359 r20401  
    2323
    2424        $('#'+slidersdiv).css({width:width});
    25         $('<div class="slider'+name+'"></div>').appendTo('#'+slidersdiv);
     25        $('<div class="'+name+'-slider"></div>').appendTo('#'+slidersdiv);
    2626        $('<div class="info'+name+'">'+startmessage[0]+value.toString()+startmessage[1]+'</div>').appendTo('#'+slidersdiv);
    2727        var info=$('.info'+name);
    28         $('.slider'+name).slider({
     28        $('.'+name+'-slider').slider({
    2929                range:'min',
    3030                value:value,
    … …  
    3737                stop:function(event,ui){
    3838                        stopSlide(event,ui,info,callback,middlemessage,endmessage,precision);
    39                 },
     39                }
    4040        });
    41         $('.ui-slider').css({
     41        $('.'+name+'-slider.ui-slider').css({
    4242                width:'auto',
    4343                height:height,
    … …  
    4545                margin:'8px'
    4646        });
    47         $('.ui-slider-handle').css({
     47        $('.'+name+'-slider .ui-slider-handle').css({
    4848                background:color,
    4949                height:parseInt(height)+8
    5050        });
    51         $('.ui-slider-range').css({
     51        $('.'+name+'-slider .ui-slider-range').css({
    5252                background:color
    5353        });
    54 
    5554}
    5655
    … …  
    6665        info.text(endmessage[0]+val.toPrecision(precision).toString()+endmessage[1]);
    6766}
     67
     68function progress(){
     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");
     93                }
     94                else {
     95                        $("#playButton").html("&#9654");
     96                }
     97        });
     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;
     108       
     109        $('#'+progressdiv).css({width:width});
     110        $('<div class="'+name+'-progressbar"></div>').prependTo('#'+progressdiv);
     111        $('.'+name+'-progressbar').slider({
     112                range:'min',
     113                value:0,
     114                min:0,
     115                max:1,
     116                step:1,
     117                start:function(event,ui){
     118                        startProgress(event,ui,canvas);
     119                },
     120                slide:function(event,ui){
     121                        moveProgress(event,ui,canvas);
     122                },
     123                stop:function(event,ui){
     124                        stopProgress(event,ui,canvas);
     125                }
     126        });
     127        $('.'+name+'-progressbar.ui-slider').css({
     128                width:'auto',
     129                height:height,
     130                background:color,
     131                margin:'8px'
     132        });
     133        $('.'+name+'-progressbar .ui-slider-handle').css({
     134                background:color,
     135                height:parseInt(height)+8
     136        });
     137        $('.'+name+'-progressbar .ui-slider-range').css({
     138                background:'red'
     139        });
     140       
     141        canvas.progressBar = $('.'+name+'-progressbar');
     142}
     143
     144function startProgress(event,ui,canvas){
     145        canvas.movieFrame = ui.value;
     146        canvas.movieIncrement = false;
     147}
     148
     149function moveProgress(event,ui,canvas){
     150        canvas.movieFrame = ui.value;
     151}
     152
     153function stopProgress(event,ui,canvas){
     154        canvas.movieFrame = ui.value;
     155        canvas.movieIncrement = true;
     156}

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

    r20358 r20401  
    4545        canvas.controlsensitivity = 1;
    4646        canvas.twod = options.getfieldvalue('2d','off') == 'on';
     47        canvas.moviePlay = true;
     48        canvas.movieReverse = false;
     49        canvas.movieIncrement = true;
    4750
    4851        if (canvas.twod) {
Note: See TracChangeset for help on using the changeset viewer.