Changeset 21300


Ignore:
Timestamp:
10/20/16 12:57:09 (8 years ago)
Author:
dlcheng
Message:

CHG: Integrating changes to js plot functions, including new options datamarkersoptions and movieoptions. Deprecating moviefps option. Updating plotdoc. Adding folds, fixing end of file new lines.

Location:
issm/trunk-jpl/src/m/plot
Files:
14 edited

Legend:

Unmodified
Added
Removed

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

    r21231 r21300  
    1 function applyoptions(md,data,datatype,options,canvas,gl,node){
     1function applyoptions(md,data,datatype,options,canvas,gl,node){ //{{{
    22        //APPLYOPTIONS - apply colobar, text, cloud, and expdisp options to current plot
    33        //
    … …  
    374374                        node.enableCullFace = true;
    375375                        node.mesh = GL.Mesh.sphere({size:6371000*10});
    376                         node.texture = initTexture(gl,'../../../js/textures/TychoSkymapII_t4_2k.jpg');
     376                        node.texture = initTexture(gl,canvas.rootPath+'textures/TychoSkymapII_t4_2k.jpg');
    377377                        node.useIndexBuffer = false;
    378378                        node.rotation = [0, 0, 0];
    … …  
    382382                }
    383383        } //}}}
    384 }
     384} //}}}

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

    r20904 r21300  
    1 function checkplotoptions(md,options){
     1function checkplotoptions(md,options){ //{{{
    22        //PARSE_OPTIONS - build a structure that holds all plot options
    33        //
    … …  
    229229           }
    230230        }
    231 }
     231} //}}}

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

    r20863 r21300  
    1 /*
    2         References:     https://bernii.github.io/gauge.js/
    3 */
    4 function gaugeInit(){
    5 
     1function gaugeInit(){ //{{{
     2        /*
     3                References:     https://bernii.github.io/gauge.js/
     4        */
    65        // Convert arguments to options.
    76        var args                = Array.prototype.slice.call(arguments);
    … …  
    5150       
    5251        return newGauge;
    53 }
    54 /* exported gaugeInit, refreshErrorMessages */
     52} //}}}

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

    r20748 r21300  
    1 function plot_manager(md,options,subplotwidth,nlines,ncols,i){
     1function plot_manager(md,options,subplotwidth,nlines,ncols,i){ //{{{
    22        //PLOT__MANAGER - distribute the plots, called by plotmodel
    33        //
    … …  
    207207
    208208        applyoptions(md,data2,datatype,options,canvas,gl,canvas.nodes[canvas.nodes.length-1]);
    209 }
     209} //}}}

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

    r21231 r21300  
    1 function plot_mesh(md,options,canvas) {
     1function plot_mesh(md,options,canvas) { //{{{
    22        //PLOT_MESH - Function for plotting wireframe mesh.
    33        //
    … …  
    137137        //}}}
    138138        node.mesh = GL.Mesh.load({vertices:vertices, colors:colors, triangles:indices}, null, null, gl);
    139 }
     139} //}}}

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

    r21231 r21300  
    1 function plot_overlay(md,data,options,canvas){
     1function plot_overlay(md,data,options,canvas){ //{{{
    22        //PLOT_OVERLAY - Function for plotting a georeferenced image. 
    33        //
    … …  
    160160        }
    161161        node.mesh = GL.Mesh.load({vertices:vertices, coords:texcoords, triangles:indices}, null, null, gl);
    162 }
     162} //}}}

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

    r21231 r21300  
    1 function plot_quiver(md,options,canvas) {
     1function plot_quiver(md,options,canvas) { //{{{
    22        //PLOT_QUIVER - quiver plot with colors
    33        //
    … …  
    135135        //}}}
    136136        node.mesh = GL.Mesh.load({vertices:vertices, colors:colors}, null, null, gl);
    137 }
     137} //}}}

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

    r21231 r21300  
    1 function plot_unit(md,data,datatype,options,canvas) {
     1function plot_unit(md,data,datatype,options,canvas) { //{{{
    22        //PLOT_UNIT - unit plot, display data
    33        //
    … …  
    222222                       
    223223                                //Initialize movie loop
    224                                 node.movieInterval = 1000 / canvas.moviefps;
     224                                node.movieLoop = canvas.movieOptions.loop;
     225                                node.movieInterval = 1000 / canvas.movieOptions.fps;
    225226                                node.movieTimestamps = timestamps;
    226227                                node.movieLength = timestamps.length;
    … …  
    230231                                                node.movieFrame = canvas.movieFrame;
    231232                                                if (canvas.moviePlay && canvas.movieIncrement) {
    232                                                         if (canvas.movieReverse) {node.movieFrame = (((node.movieFrame - 1) % node.movieLength) + node.movieLength) % node.movieLength; }
    233                                                         else { node.movieFrame = (((node.movieFrame + 1) % node.movieLength) + node.movieLength) % node.movieLength; }
     233                                                        if (canvas.movieReverse) {
     234                                                                if (node.movieFrame == 0) {
     235                                                                        if (node.movieLoop) {
     236                                                                                node.movieFrame = node.movieLength - 1;
     237                                                                        }
     238                                                                        else {
     239                                                                                toggleMoviePlay(canvas);
     240                                                                        }
     241                                                                }
     242                                                                else {
     243                                                                        node.movieFrame = node.movieFrame - 1;
     244                                                                }
     245                                                        }
     246                                                        else {
     247                                                                if (node.movieFrame == node.movieLength - 1) {
     248                                                                        if (node.movieLoop) {
     249                                                                                node.movieFrame = 0;
     250                                                                        }
     251                                                                        else {
     252                                                                                toggleMoviePlay(canvas);
     253                                                                        }
     254                                                                }
     255                                                                else {
     256                                                                        node.movieFrame = node.movieFrame + 1;
     257                                                                }
     258                                                        }
    234259                                                }
    235260                                                if (canvas.progressBar) {
    … …  
    261286                        throw Error(sprintf("%s%i%s\n",'case ',datatype,' not supported'));
    262287        }
    263 }
     288} //}}}

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

    r21238 r21300  
    1 function plotdoc() {
     1function plotdoc() { //{{{
    22        //PLOTDOC - plot documentation
    33        //
    … …  
    3434        console.log('       "datamarkers_image": toggle data marker displays (default "on", ex: "on", "off")');
    3535        console.log('       "datamarkerssize": specifiy the width and height of the data markers (default [32,32], ex: [24,32], [105,10])');
     36        console.log('       "datamarkersoptions": specifiy options for data markers (default {"enabled":"on","image":canvas.rootPath+"textures/data_marker.svg","size":[32,32],"format":["X: %.2e<br>Y: %.2e<br>Z: %.2e]<br>Value: %0.1f","x","y","z","value"]}');
    3637        console.log('       "displayview": print view value to console (default "off", ex: "on", "off")');
    3738        console.log('       "displayzoom": print zoom value to console (default "off", ex: "on", "off")');
    … …  
    4142        console.log('       "log": value of log (default 10, ex: 2, Math.E)');
    4243        console.log('       "mask": list of flags of size numberofnodes or numberofelements. Only "true" values are plotted ');
    43         console.log('       "moviefps": frames per second when displaying transient runs (default 5, ex: 1, 10)');
     44        console.log('       "movieoptions": specify movie options (default {"fps":4,"loop":true})');
    4445        console.log('       "innermask*": Special mask that colors all parts of a data mesh below a height a certain color. provide innermaskheight and innermaskcolor options also (default "off", ex: "on", "off")');
    4546        console.log('       "outermask*": Special mask that colors all parts of a overlay mesh below a height a certain color. provide outermaskheight and outermaskcolor options also (default "off", ex: "on", "off")');
    … …  
    6768        console.log('       plotmodel(md,"data","vel","data","mesh","view#2",3,"colorbar#all","on")');
    6869        console.log('       plotmodel(md,"data",md.geomtery.surface)');
    69 }
     70} //}}}

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

    r20584 r21300  
    1 function plotmodel(md){
     1function plotmodel(md){ //{{{
    22
    33        //Convert arguments to array:
    … …  
    4646                }
    4747        }
    48 }
     48} //}}}

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

    r20514 r21300  
    1 function processdata(md,data,options){
     1function processdata(md,data,options){ //{{{
    22        //PROCESSDATA - process data to be plotted
    33        //
    … …  
    268268
    269269        return [data,datatype];
    270 }
     270} //}}}

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

    r20471 r21300  
    1 function processmesh(md,data,options){
     1function processmesh(md,data,options){ //{{{
    22//PROCESSMESH - process mesh to be plotted
    33//
    … …  
    9292
    9393        return  [x,y,z,elements,is2d,isplanet];
    94 }
     94} //}}}

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

    r20863 r21300  
    1 /*
     1function sliderInit(){ //{{{
     2        /*
    23        Name:
    34                sliderInit
    … …  
    2728                        slider' label. That said, *all* sliders can be adjusted via the
    2829                        "up" and "down" keys by whatever increment step is set to.
    29 */
    30 function sliderInit(){
    31        
     30        */
     31
    3232        // Convert arguments to options
    3333        var args                = Array.prototype.slice.call(arguments);
    … …  
    6969        */
    7070        $(selector).slider('refresh');
    71 }
    72 /* exported sliderInit, refreshErrorMessages */
     71} //}}}
    7372
    74 
    75 /*
     73function sliderMoveInput(selector){ //{{{
     74        /*
    7675        Name:
    7776                sliderMoveInput
    … …  
    8887        NOTE:   Destination element must, obviously, be hardcoded into markup for a
    8988                        call to this function to work as expected.
    90 */
    91 function sliderMoveInput(selector){
    92        
     89        */
    9390        $(selector).appendTo(selector + '-value');
    9491       
    … …  
    9895        */
    9996        $(selector).slider('refresh');
    100 }
    101 /* exported sliderMoveInput, refreshErrorMessages */
     97} //}}}
    10298
    103 
    104 function progressInit(){
     99function progressInit(){ //{{{
    105100       
    106101        // Convert arguments to options.
    … …  
    169164       
    170165        canvas.timeLabel = timeText;
    171 }
    172 /* exported progressInit, refreshErrorMessages */
     166} //}}}

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

    r21238 r21300  
    3131                        gl.cullFace(gl.FRONT);
    3232                        // Load shaders and store them in gl object
    33                         gl.shaders = loadShaders(gl);
     33                        gl.shaders = loadShaders(gl,options.getfieldvalue('rootpath','../../../js/'));
    3434                       
    3535                        // Add event listeners for canvas
    … …  
    6161        //TODO:Group variables in objects for organization and naming
    6262        canvas.gl = gl;
     63        canvas.rootPath = options.getfieldvalue('rootpath','../../../js/');
    6364        canvas.cameraPosition = vec3.create();
    6465        canvas.cameraMatrix = mat4.create();
    … …  
    6667        canvas.dataMarkersAllowed = options.getfieldvalue('datamarkers','off') == 'on';
    6768        canvas.dataMarkersEnabled = true; //if data marker feature is on, user can toggle feature on and off
    68         canvas.dataMarkerImage = options.getfieldvalue('datamarkers_image','../../../js/textures/data_marker.svg');
     69        canvas.dataMarkerImage = options.getfieldvalue('datamarkers_image',canvas.rootPath+'textures/data_marker.svg');
    6970        canvas.dataMarkerSize = options.getfieldvalue('datamarkerssize',[32,32]);
     71        canvas.dataMarkerOptions = options.getfieldvalue('datamarkersoptions',{'enabled':'on','image':canvas.rootPath+'textures/data_marker.svg','size':[32,32],'format':['X: %.2e<br>Y: %.2e<br>Z: %.2e]<br>Value: %0.1f','x','y','z','value']});
    7072        canvas.inverseCameraMatrix = mat4.create();
    7173        canvas.id = options.getfieldvalue('canvasid','.sim-canvas');
     74        canvas.movieFrame = 0;
    7275        canvas.moviePlay = true;
    7376        canvas.movieReverse = false;
    7477        canvas.movieIncrement = true;
     78        canvas.movieOptions = options.getfieldvalue('movieoptions',{'fps':4,'loop':true});
    7579        canvas.moviefps = options.getfieldvalue('moviefps',5);
    7680        canvas.rotation = options.getfieldvalue('view',[0,90]); //0 azimuth, 90 elevation
    … …  
    9195        return gl;
    9296} //}}}
    93 function loadShaders(gl) { //{{{
     97function loadShaders(gl,rootPath) { //{{{
    9498        var shaders = {};
    95         shaders.Colored = new GL.Shader.fromURL('../../../js/shaders/Colored.vsh', '../../../js/shaders/Colored.fsh', null, gl);
    96         shaders.Textured = new GL.Shader.fromURL('../../../js/shaders/Textured.vsh', '../../../js/shaders/Textured.fsh', null, gl);
    97         shaders.SkyFromSpace = new GL.Shader.fromURL('../../../js/shaders/SkyFromSpace.vert', '../../../js/shaders/SkyFromSpace.frag', null, gl);
    98         shaders.GroundFromSpace = new GL.Shader.fromURL('../../../js/shaders/GroundFromSpace.vert', '../../../js/shaders/GroundFromSpace.frag', null, gl);
     99        shaders.Colored = new GL.Shader.fromURL(rootPath+'shaders/Colored.vsh', rootPath+'shaders/Colored.fsh', null, gl);
     100        shaders.Textured = new GL.Shader.fromURL(rootPath+'shaders/Textured.vsh', rootPath+'shaders/Textured.fsh', null, gl);
     101        shaders.SkyFromSpace = new GL.Shader.fromURL(rootPath+'shaders/SkyFromSpace.vert', rootPath+'shaders/SkyFromSpace.frag', null, gl);
     102        shaders.GroundFromSpace = new GL.Shader.fromURL(rootPath+'shaders/GroundFromSpace.vert', rootPath+'shaders/GroundFromSpace.frag', null, gl);
    99103        return shaders;
    100104} //}}}
    … …  
    251255        ev.preventDefault();
    252256        if (!(canvas.dataMarkersAllowed && canvas.dataMarkersEnabled)) { return; }
    253        
    254         var rect = canvas.getBoundingClientRect();
    255         var x = ev.srcEvent.clientX - rect.left;
    256         var y = ev.srcEvent.clientY - rect.top;
    257        
    258         updateMarker(canvas, x, y, true);
     257        updateMarker(canvas, ev.srcEvent.layerX, ev.srcEvent.layerY, true);
    259258} //}}}
    260259function updateMarker(canvas, x, y, reset, origin, far) { //{{{
    … …  
    269268       
    270269        if (hit) {
    271                 var u = hit.coords[0][0] * hit.uvw[0] + hit.coords[1][0] * hit.uvw[1] + hit.coords[2][0] * hit.uvw[2];
    272                 var v = hit.coords[0][1] * hit.uvw[0] + hit.coords[1][1] * hit.uvw[1] + hit.coords[2][1] * hit.uvw[2];
     270                var coords = canvas.unitNode.mesh.vertexBuffers.coords.data;
     271                var latitude = md.mesh.lat;
     272                var longitude = md.mesh.long;
     273                var thickness;
     274                var velocity;
     275                if (md.results[0]) {
     276                        thickness = md.results[canvas.movieFrame].Thickness;
     277                        velocity = md.results[canvas.movieFrame].Vel;
     278                }
     279                else {
     280                        thickness = md.geometry.thickness;
     281                        velocity = md.initialization.vel;
     282                }
     283               
     284                var hitCoords = [coords[hit.indices[0]*2], coords[hit.indices[0]*2+1],coords[hit.indices[1]*2], coords[hit.indices[1]*2+1],coords[hit.indices[2]*2], coords[hit.indices[2]*2+1]];
     285                var hitLatitude = [latitude[hit.indices[0]], latitude[hit.indices[1]], latitude[hit.indices[2]]];
     286                var hitLongitude = [longitude[hit.indices[0]], longitude[hit.indices[1]], longitude[hit.indices[2]]];
     287                var hitThickness = [thickness[hit.indices[0]], thickness[hit.indices[1]], thickness[hit.indices[2]]];
     288                var hitVelocity = [velocity[hit.indices[0]], velocity[hit.indices[1]], velocity[hit.indices[2]]];
     289                var u = hitCoords[0] * hit.uvw[0] + hitCoords[2] * hit.uvw[1] + hitCoords[4] * hit.uvw[2];
     290                var v = hitCoords[1] * hit.uvw[0] + hitCoords[3] * hit.uvw[1] + hitCoords[5] * hit.uvw[2];
    273291                var value = canvas.unitNode.caxis[0] * (1.0 - v) + canvas.unitNode.caxis[1] * v;
    274                
    275                 var rect = canvas.getBoundingClientRect();
     292                var valueLatitude = Math.abs(hitLatitude[0] * hit.uvw[0] + hitLatitude[1] * hit.uvw[1] + hitLatitude[2] * hit.uvw[2]);
     293                var valueLongitude = Math.abs(hitLongitude[0] * hit.uvw[0] + hitLongitude[1] * hit.uvw[1] + hitLongitude[2] * hit.uvw[2]);
     294                var valueThickness = hitThickness[0] * hit.uvw[0] + hitThickness[1] * hit.uvw[1] + hitThickness[2] * hit.uvw[2];
     295                var valueVelocity = hitVelocity[0] * hit.uvw[0] + hitVelocity[1] * hit.uvw[1] + hitVelocity[2] * hit.uvw[2];
     296               
    276297                var dataMarkerSize = canvas.dataMarkerSize;
    277298                if (!canvas.marker) {
    278                         $('#' + canvas.id).after( '<img src=' + canvas.dataMarkerImage + ' alt="data marker" width="' + dataMarkerSize[0] + '" height="' + dataMarkerSize[1] + '" id="sim-data-marker-' + canvas.id + '" class="sim-data-marker noselect"></img>' );
     299                        $('#' + canvas.id).after( '<img src=' + canvas.dataMarkerImage + ' alt="data marker" width="' + dataMarkerSize[0] + '" height="' + dataMarkerSize[1] + '" id="sim-data-marker-' + canvas.id + '" class="sim-data-marker noselect tooltip" data-tooltip-content="#tooltip-content-data-marker-' + canvas.id + '"></img><span id="tooltip-content-data-marker-' + canvas.id + '"></span>');
    279300                        $('#sim-data-marker-' + canvas.id).css({
    280301                                'position': 'absolute',
    281                                 'left': (Math.round(x + rect.left) - dataMarkerSize[0] / 2) + 'px',
    282                                 'top': (Math.round(y + rect.top) - dataMarkerSize[1]) + 'px',
     302                                'left': (Math.round(x) - dataMarkerSize[0] / 2) + 'px',
     303                                'top': (Math.round(y) - dataMarkerSize[1]) + 'px',
    283304                                'width': dataMarkerSize[0] + 'px',
    284305                                'height': dataMarkerSize[1] + 'px',
    285306                                'pointer-events': 'all',
    286307                                'cursor': 'pointer',
    287                                 'display': 'none'
     308                                'display': 'none'               
     309                        });
     310                        $('#sim-data-marker-' + canvas.id).tooltipster({
     311                                maxWidth: 320,
     312                                zIndex: 2200,
     313                                trigger: 'custom',
     314                                triggerOpen: {
     315                                        mouseenter: false,
     316                                        originClick: true,
     317                                        touchstart: false
     318                                },
     319                                triggerClose: {
     320                                        mouseleave: false,
     321                                        originClick: true,
     322                                        touchleave: false
     323                                }
    288324                        });
    289325                        canvas.marker = $('#sim-data-marker-' + canvas.id);
    290326                        canvas.marker.on('click touch', function () {
    291327                                canvas.marker.fadeOut(175);
    292                                 canvas.dataMarkerDisplay.stop();
     328                                canvas.dataMarkerDisplay.tooltipster('close');
    293329                        });
    294330                        canvas.marker.fadeIn(175);
    … …  
    304340                        updateMarker(canvas, Math.round(x), Math.round(y), false, origin, far);
    305341                        canvas.marker.css({
    306                                 'left': (Math.round(x + rect.left) - dataMarkerSize[0] / 2) + 'px',
    307                                 'top': (Math.round(y + rect.top) - dataMarkerSize[1]) + 'px'
     342                                'left': (Math.round(x) - dataMarkerSize[0] / 2) + 'px',
     343                                'top': (Math.round(y) - dataMarkerSize[1]) + 'px'
    308344                        });
     345                        if (canvas.dataMarkerDisplay.tooltipster('status').state != 'closed') { canvas.dataMarkerDisplay.tooltipster('reposition'); }
    309346                };
    310347               
    311348                if (!canvas.dataMarkerDisplay) {
    312                         var tripToShowData = new Trip([
    313                         {
    314                                 content : '<div id="sim-data-marker-content-' + canvas.id + '" class="sim-data-marker-content"><p>X: ' + hit.modelPos [0].toPrecision(3) + ' </p><p>Y: ' + hit.modelPos [1].toPrecision(3) + ' </p><p>Z: ' + hit.modelPos [2].toPrecision(3) + '</p><p>Value: ' + (Math.round(value * 1000) / 1000).toPrecision(3) + '</p></div>',
    315                                 position : 'screen-se'
    316                         }],
    317                         {
    318                                 onEnd : function(tripIndex) {
    319                                         canvas.marker.fadeOut(175);
    320                                 },
    321                                 tripTheme : 'dark',
    322                                 showCloseBox : true,
    323                                 delay: -1
     349                        canvas.dataMarkerDisplay = $('#sim-data-marker-' + canvas.id);
     350                        canvas.dataMarkerDisplay.tooltipster('open');
     351                }
     352                if (canvas.dataMarkerOptions) {
     353                        var format = [canvas.dataMarkerOptions.format[0]];     
     354                        for (var i = 1; i < canvas.dataMarkerOptions.format.length; i++) {
     355                                var formatString = canvas.dataMarkerOptions.format[i];
     356                                if (formatString.toLowerCase() == 'x') { format.push(hit.modelPos[0]); }
     357                                else if (formatString.toLowerCase() == 'y') { format.push(hit.modelPos[1]); }
     358                                else if (formatString.toLowerCase() == 'z') { format.push(hit.modelPos[2]); }
     359                                else if (formatString.toLowerCase() == 'lat') { format.push(valueLatitude); }
     360                                else if (formatString.toLowerCase() == 'long') { format.push(valueLongitude); }
     361                                else if (formatString.toLowerCase() == 'thickness') { format.push(valueThickness); }
     362                                else if (formatString.toLowerCase() == 'vel') { format.push(valueVelocity); }
     363                                else if (formatString.toLowerCase() == 'value') { format.push(value); }
     364                                else {format.push(formatString); }
     365                        }
     366                       
     367                        $('#tooltip-content-data-marker-' + canvas.id).html(sprintf.apply(null, format));
     368                        $('#tooltip-content-data-marker-' + canvas.id).css({
     369                                'font': canvas.dataMarkerOptions.font
    324370                        });
    325                         canvas.dataMarkerDisplay = tripToShowData;
    326                         canvas.dataMarkerDisplay.start();
    327                 }
    328                 $('#sim-data-marker-content-' + canvas.id).html('<p>X: ' + hit.modelPos [0].toPrecision(3) + ' </p><p>Y: ' + hit.modelPos [1].toPrecision(3) + ' </p><p>Z: ' + hit.modelPos [2].toPrecision(3) + '</p><p>Value: ' + (Math.round(value * 1000) / 1000).toPrecision(3) + '</p>');
    329                                
     371                }
     372
    330373                if (reset) { modifyDataMarkersEnabled(true,canvas); }
    331374        }
    … …  
    386429        if (!canvas.dataMarkersEnabled && canvas.marker) {
    387430                canvas.marker.fadeOut(175);
    388                 canvas.dataMarkerDisplay.stop();
     431                canvas.dataMarkerDisplay.tooltipster('close');
    389432        }
    390433        else if (canvas.dataMarkersEnabled && canvas.marker) {
    391434                canvas.marker.fadeIn(175);
    392                 canvas.dataMarkerDisplay.start();
     435                canvas.dataMarkerDisplay.tooltipster('open');
     436        }
     437} //}}}
     438function toggleMoviePlay(canvas) { //{{{
     439        canvas.moviePlay = !canvas.moviePlay;
     440        if (canvas.moviePlay){
     441                canvas.playButton.find("span").removeClass("fa-play");
     442                canvas.playButton.find("span").addClass("fa-pause");
     443        }
     444        else{
     445                canvas.playButton.find("span").removeClass("fa-pause");
     446                canvas.playButton.find("span").addClass("fa-play");
    393447        }
    394448} //}}}
Note: See TracChangeset for help on using the changeset viewer.