Index: /issm/trunk-jpl/src/m/plot/applyoptions.js =================================================================== --- /issm/trunk-jpl/src/m/plot/applyoptions.js (revision 21299) +++ /issm/trunk-jpl/src/m/plot/applyoptions.js (revision 21300) @@ -1,3 +1,3 @@ -function applyoptions(md,data,datatype,options,canvas,gl,node){ +function applyoptions(md,data,datatype,options,canvas,gl,node){ //{{{ //APPLYOPTIONS - apply colobar, text, cloud, and expdisp options to current plot // @@ -374,5 +374,5 @@ node.enableCullFace = true; node.mesh = GL.Mesh.sphere({size:6371000*10}); - node.texture = initTexture(gl,'../../../js/textures/TychoSkymapII_t4_2k.jpg'); + node.texture = initTexture(gl,canvas.rootPath+'textures/TychoSkymapII_t4_2k.jpg'); node.useIndexBuffer = false; node.rotation = [0, 0, 0]; @@ -382,3 +382,3 @@ } } //}}} -} +} //}}} Index: /issm/trunk-jpl/src/m/plot/checkplotoptions.js =================================================================== --- /issm/trunk-jpl/src/m/plot/checkplotoptions.js (revision 21299) +++ /issm/trunk-jpl/src/m/plot/checkplotoptions.js (revision 21300) @@ -1,3 +1,3 @@ -function checkplotoptions(md,options){ +function checkplotoptions(md,options){ //{{{ //PARSE_OPTIONS - build a structure that holds all plot options // @@ -229,3 +229,3 @@ } } -} +} //}}} Index: /issm/trunk-jpl/src/m/plot/gauge.js =================================================================== --- /issm/trunk-jpl/src/m/plot/gauge.js (revision 21299) +++ /issm/trunk-jpl/src/m/plot/gauge.js (revision 21300) @@ -1,7 +1,6 @@ -/* - References: https://bernii.github.io/gauge.js/ -*/ -function gaugeInit(){ - +function gaugeInit(){ //{{{ + /* + References: https://bernii.github.io/gauge.js/ + */ // Convert arguments to options. var args = Array.prototype.slice.call(arguments); @@ -51,4 +50,3 @@ return newGauge; -} -/* exported gaugeInit, refreshErrorMessages */ +} //}}} Index: /issm/trunk-jpl/src/m/plot/plot_manager.js =================================================================== --- /issm/trunk-jpl/src/m/plot/plot_manager.js (revision 21299) +++ /issm/trunk-jpl/src/m/plot/plot_manager.js (revision 21300) @@ -1,3 +1,3 @@ -function plot_manager(md,options,subplotwidth,nlines,ncols,i){ +function plot_manager(md,options,subplotwidth,nlines,ncols,i){ //{{{ //PLOT__MANAGER - distribute the plots, called by plotmodel // @@ -207,3 +207,3 @@ applyoptions(md,data2,datatype,options,canvas,gl,canvas.nodes[canvas.nodes.length-1]); -} +} //}}} Index: /issm/trunk-jpl/src/m/plot/plot_mesh.js =================================================================== --- /issm/trunk-jpl/src/m/plot/plot_mesh.js (revision 21299) +++ /issm/trunk-jpl/src/m/plot/plot_mesh.js (revision 21300) @@ -1,3 +1,3 @@ -function plot_mesh(md,options,canvas) { +function plot_mesh(md,options,canvas) { //{{{ //PLOT_MESH - Function for plotting wireframe mesh. // @@ -137,3 +137,3 @@ //}}} node.mesh = GL.Mesh.load({vertices:vertices, colors:colors, triangles:indices}, null, null, gl); -} +} //}}} Index: /issm/trunk-jpl/src/m/plot/plot_overlay.js =================================================================== --- /issm/trunk-jpl/src/m/plot/plot_overlay.js (revision 21299) +++ /issm/trunk-jpl/src/m/plot/plot_overlay.js (revision 21300) @@ -1,3 +1,3 @@ -function plot_overlay(md,data,options,canvas){ +function plot_overlay(md,data,options,canvas){ //{{{ //PLOT_OVERLAY - Function for plotting a georeferenced image. // @@ -160,3 +160,3 @@ } node.mesh = GL.Mesh.load({vertices:vertices, coords:texcoords, triangles:indices}, null, null, gl); -} +} //}}} Index: /issm/trunk-jpl/src/m/plot/plot_quiver.js =================================================================== --- /issm/trunk-jpl/src/m/plot/plot_quiver.js (revision 21299) +++ /issm/trunk-jpl/src/m/plot/plot_quiver.js (revision 21300) @@ -1,3 +1,3 @@ -function plot_quiver(md,options,canvas) { +function plot_quiver(md,options,canvas) { //{{{ //PLOT_QUIVER - quiver plot with colors // @@ -135,3 +135,3 @@ //}}} node.mesh = GL.Mesh.load({vertices:vertices, colors:colors}, null, null, gl); -} +} //}}} Index: /issm/trunk-jpl/src/m/plot/plot_unit.js =================================================================== --- /issm/trunk-jpl/src/m/plot/plot_unit.js (revision 21299) +++ /issm/trunk-jpl/src/m/plot/plot_unit.js (revision 21300) @@ -1,3 +1,3 @@ -function plot_unit(md,data,datatype,options,canvas) { +function plot_unit(md,data,datatype,options,canvas) { //{{{ //PLOT_UNIT - unit plot, display data // @@ -222,5 +222,6 @@ //Initialize movie loop - node.movieInterval = 1000 / canvas.moviefps; + node.movieLoop = canvas.movieOptions.loop; + node.movieInterval = 1000 / canvas.movieOptions.fps; node.movieTimestamps = timestamps; node.movieLength = timestamps.length; @@ -230,6 +231,30 @@ node.movieFrame = canvas.movieFrame; if (canvas.moviePlay && canvas.movieIncrement) { - if (canvas.movieReverse) {node.movieFrame = (((node.movieFrame - 1) % node.movieLength) + node.movieLength) % node.movieLength; } - else { node.movieFrame = (((node.movieFrame + 1) % node.movieLength) + node.movieLength) % node.movieLength; } + if (canvas.movieReverse) { + if (node.movieFrame == 0) { + if (node.movieLoop) { + node.movieFrame = node.movieLength - 1; + } + else { + toggleMoviePlay(canvas); + } + } + else { + node.movieFrame = node.movieFrame - 1; + } + } + else { + if (node.movieFrame == node.movieLength - 1) { + if (node.movieLoop) { + node.movieFrame = 0; + } + else { + toggleMoviePlay(canvas); + } + } + else { + node.movieFrame = node.movieFrame + 1; + } + } } if (canvas.progressBar) { @@ -261,3 +286,3 @@ throw Error(sprintf("%s%i%s\n",'case ',datatype,' not supported')); } -} +} //}}} Index: /issm/trunk-jpl/src/m/plot/plotdoc.js =================================================================== --- /issm/trunk-jpl/src/m/plot/plotdoc.js (revision 21299) +++ /issm/trunk-jpl/src/m/plot/plotdoc.js (revision 21300) @@ -1,3 +1,3 @@ -function plotdoc() { +function plotdoc() { //{{{ //PLOTDOC - plot documentation // @@ -34,4 +34,5 @@ console.log(' "datamarkers_image": toggle data marker displays (default "on", ex: "on", "off")'); console.log(' "datamarkerssize": specifiy the width and height of the data markers (default [32,32], ex: [24,32], [105,10])'); + console.log(' "datamarkersoptions": specifiy options for data markers (default {"enabled":"on","image":canvas.rootPath+"textures/data_marker.svg","size":[32,32],"format":["X: %.2e
Y: %.2e
Z: %.2e]
Value: %0.1f","x","y","z","value"]}'); console.log(' "displayview": print view value to console (default "off", ex: "on", "off")'); console.log(' "displayzoom": print zoom value to console (default "off", ex: "on", "off")'); @@ -41,5 +42,5 @@ console.log(' "log": value of log (default 10, ex: 2, Math.E)'); console.log(' "mask": list of flags of size numberofnodes or numberofelements. Only "true" values are plotted '); - console.log(' "moviefps": frames per second when displaying transient runs (default 5, ex: 1, 10)'); + console.log(' "movieoptions": specify movie options (default {"fps":4,"loop":true})'); 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")'); 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")'); @@ -67,3 +68,3 @@ console.log(' plotmodel(md,"data","vel","data","mesh","view#2",3,"colorbar#all","on")'); console.log(' plotmodel(md,"data",md.geomtery.surface)'); -} +} //}}} Index: /issm/trunk-jpl/src/m/plot/plotmodel.js =================================================================== --- /issm/trunk-jpl/src/m/plot/plotmodel.js (revision 21299) +++ /issm/trunk-jpl/src/m/plot/plotmodel.js (revision 21300) @@ -1,3 +1,3 @@ -function plotmodel(md){ +function plotmodel(md){ //{{{ //Convert arguments to array: @@ -46,3 +46,3 @@ } } -} +} //}}} Index: /issm/trunk-jpl/src/m/plot/processdata.js =================================================================== --- /issm/trunk-jpl/src/m/plot/processdata.js (revision 21299) +++ /issm/trunk-jpl/src/m/plot/processdata.js (revision 21300) @@ -1,3 +1,3 @@ -function processdata(md,data,options){ +function processdata(md,data,options){ //{{{ //PROCESSDATA - process data to be plotted // @@ -268,3 +268,3 @@ return [data,datatype]; -} +} //}}} Index: /issm/trunk-jpl/src/m/plot/processmesh.js =================================================================== --- /issm/trunk-jpl/src/m/plot/processmesh.js (revision 21299) +++ /issm/trunk-jpl/src/m/plot/processmesh.js (revision 21300) @@ -1,3 +1,3 @@ -function processmesh(md,data,options){ +function processmesh(md,data,options){ //{{{ //PROCESSMESH - process mesh to be plotted // @@ -92,3 +92,3 @@ return [x,y,z,elements,is2d,isplanet]; -} +} //}}} Index: /issm/trunk-jpl/src/m/plot/slider.js =================================================================== --- /issm/trunk-jpl/src/m/plot/slider.js (revision 21299) +++ /issm/trunk-jpl/src/m/plot/slider.js (revision 21300) @@ -1,3 +1,4 @@ -/* +function sliderInit(){ //{{{ + /* Name: sliderInit @@ -27,7 +28,6 @@ slider' label. That said, *all* sliders can be adjusted via the "up" and "down" keys by whatever increment step is set to. -*/ -function sliderInit(){ - + */ + // Convert arguments to options var args = Array.prototype.slice.call(arguments); @@ -69,9 +69,8 @@ */ $(selector).slider('refresh'); -} -/* exported sliderInit, refreshErrorMessages */ +} //}}} - -/* +function sliderMoveInput(selector){ //{{{ + /* Name: sliderMoveInput @@ -88,7 +87,5 @@ NOTE: Destination element must, obviously, be hardcoded into markup for a call to this function to work as expected. -*/ -function sliderMoveInput(selector){ - + */ $(selector).appendTo(selector + '-value'); @@ -98,9 +95,7 @@ */ $(selector).slider('refresh'); -} -/* exported sliderMoveInput, refreshErrorMessages */ +} //}}} - -function progressInit(){ +function progressInit(){ //{{{ // Convert arguments to options. @@ -169,4 +164,3 @@ canvas.timeLabel = timeText; -} -/* exported progressInit, refreshErrorMessages */ +} //}}} Index: /issm/trunk-jpl/src/m/plot/webgl.js =================================================================== --- /issm/trunk-jpl/src/m/plot/webgl.js (revision 21299) +++ /issm/trunk-jpl/src/m/plot/webgl.js (revision 21300) @@ -31,5 +31,5 @@ gl.cullFace(gl.FRONT); // Load shaders and store them in gl object - gl.shaders = loadShaders(gl); + gl.shaders = loadShaders(gl,options.getfieldvalue('rootpath','../../../js/')); // Add event listeners for canvas @@ -61,4 +61,5 @@ //TODO:Group variables in objects for organization and naming canvas.gl = gl; + canvas.rootPath = options.getfieldvalue('rootpath','../../../js/'); canvas.cameraPosition = vec3.create(); canvas.cameraMatrix = mat4.create(); @@ -66,11 +67,14 @@ canvas.dataMarkersAllowed = options.getfieldvalue('datamarkers','off') == 'on'; canvas.dataMarkersEnabled = true; //if data marker feature is on, user can toggle feature on and off - canvas.dataMarkerImage = options.getfieldvalue('datamarkers_image','../../../js/textures/data_marker.svg'); + canvas.dataMarkerImage = options.getfieldvalue('datamarkers_image',canvas.rootPath+'textures/data_marker.svg'); canvas.dataMarkerSize = options.getfieldvalue('datamarkerssize',[32,32]); + canvas.dataMarkerOptions = options.getfieldvalue('datamarkersoptions',{'enabled':'on','image':canvas.rootPath+'textures/data_marker.svg','size':[32,32],'format':['X: %.2e
Y: %.2e
Z: %.2e]
Value: %0.1f','x','y','z','value']}); canvas.inverseCameraMatrix = mat4.create(); canvas.id = options.getfieldvalue('canvasid','.sim-canvas'); + canvas.movieFrame = 0; canvas.moviePlay = true; canvas.movieReverse = false; canvas.movieIncrement = true; + canvas.movieOptions = options.getfieldvalue('movieoptions',{'fps':4,'loop':true}); canvas.moviefps = options.getfieldvalue('moviefps',5); canvas.rotation = options.getfieldvalue('view',[0,90]); //0 azimuth, 90 elevation @@ -91,10 +95,10 @@ return gl; } //}}} -function loadShaders(gl) { //{{{ +function loadShaders(gl,rootPath) { //{{{ var shaders = {}; - shaders.Colored = new GL.Shader.fromURL('../../../js/shaders/Colored.vsh', '../../../js/shaders/Colored.fsh', null, gl); - shaders.Textured = new GL.Shader.fromURL('../../../js/shaders/Textured.vsh', '../../../js/shaders/Textured.fsh', null, gl); - shaders.SkyFromSpace = new GL.Shader.fromURL('../../../js/shaders/SkyFromSpace.vert', '../../../js/shaders/SkyFromSpace.frag', null, gl); - shaders.GroundFromSpace = new GL.Shader.fromURL('../../../js/shaders/GroundFromSpace.vert', '../../../js/shaders/GroundFromSpace.frag', null, gl); + shaders.Colored = new GL.Shader.fromURL(rootPath+'shaders/Colored.vsh', rootPath+'shaders/Colored.fsh', null, gl); + shaders.Textured = new GL.Shader.fromURL(rootPath+'shaders/Textured.vsh', rootPath+'shaders/Textured.fsh', null, gl); + shaders.SkyFromSpace = new GL.Shader.fromURL(rootPath+'shaders/SkyFromSpace.vert', rootPath+'shaders/SkyFromSpace.frag', null, gl); + shaders.GroundFromSpace = new GL.Shader.fromURL(rootPath+'shaders/GroundFromSpace.vert', rootPath+'shaders/GroundFromSpace.frag', null, gl); return shaders; } //}}} @@ -251,10 +255,5 @@ ev.preventDefault(); if (!(canvas.dataMarkersAllowed && canvas.dataMarkersEnabled)) { return; } - - var rect = canvas.getBoundingClientRect(); - var x = ev.srcEvent.clientX - rect.left; - var y = ev.srcEvent.clientY - rect.top; - - updateMarker(canvas, x, y, true); + updateMarker(canvas, ev.srcEvent.layerX, ev.srcEvent.layerY, true); } //}}} function updateMarker(canvas, x, y, reset, origin, far) { //{{{ @@ -269,26 +268,63 @@ if (hit) { - var u = hit.coords[0][0] * hit.uvw[0] + hit.coords[1][0] * hit.uvw[1] + hit.coords[2][0] * hit.uvw[2]; - var v = hit.coords[0][1] * hit.uvw[0] + hit.coords[1][1] * hit.uvw[1] + hit.coords[2][1] * hit.uvw[2]; + var coords = canvas.unitNode.mesh.vertexBuffers.coords.data; + var latitude = md.mesh.lat; + var longitude = md.mesh.long; + var thickness; + var velocity; + if (md.results[0]) { + thickness = md.results[canvas.movieFrame].Thickness; + velocity = md.results[canvas.movieFrame].Vel; + } + else { + thickness = md.geometry.thickness; + velocity = md.initialization.vel; + } + + 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]]; + var hitLatitude = [latitude[hit.indices[0]], latitude[hit.indices[1]], latitude[hit.indices[2]]]; + var hitLongitude = [longitude[hit.indices[0]], longitude[hit.indices[1]], longitude[hit.indices[2]]]; + var hitThickness = [thickness[hit.indices[0]], thickness[hit.indices[1]], thickness[hit.indices[2]]]; + var hitVelocity = [velocity[hit.indices[0]], velocity[hit.indices[1]], velocity[hit.indices[2]]]; + var u = hitCoords[0] * hit.uvw[0] + hitCoords[2] * hit.uvw[1] + hitCoords[4] * hit.uvw[2]; + var v = hitCoords[1] * hit.uvw[0] + hitCoords[3] * hit.uvw[1] + hitCoords[5] * hit.uvw[2]; var value = canvas.unitNode.caxis[0] * (1.0 - v) + canvas.unitNode.caxis[1] * v; - - var rect = canvas.getBoundingClientRect(); + var valueLatitude = Math.abs(hitLatitude[0] * hit.uvw[0] + hitLatitude[1] * hit.uvw[1] + hitLatitude[2] * hit.uvw[2]); + var valueLongitude = Math.abs(hitLongitude[0] * hit.uvw[0] + hitLongitude[1] * hit.uvw[1] + hitLongitude[2] * hit.uvw[2]); + var valueThickness = hitThickness[0] * hit.uvw[0] + hitThickness[1] * hit.uvw[1] + hitThickness[2] * hit.uvw[2]; + var valueVelocity = hitVelocity[0] * hit.uvw[0] + hitVelocity[1] * hit.uvw[1] + hitVelocity[2] * hit.uvw[2]; + var dataMarkerSize = canvas.dataMarkerSize; if (!canvas.marker) { - $('#' + canvas.id).after( 'data marker' ); + $('#' + canvas.id).after( 'data marker'); $('#sim-data-marker-' + canvas.id).css({ 'position': 'absolute', - 'left': (Math.round(x + rect.left) - dataMarkerSize[0] / 2) + 'px', - 'top': (Math.round(y + rect.top) - dataMarkerSize[1]) + 'px', + 'left': (Math.round(x) - dataMarkerSize[0] / 2) + 'px', + 'top': (Math.round(y) - dataMarkerSize[1]) + 'px', 'width': dataMarkerSize[0] + 'px', 'height': dataMarkerSize[1] + 'px', 'pointer-events': 'all', 'cursor': 'pointer', - 'display': 'none' + 'display': 'none' + }); + $('#sim-data-marker-' + canvas.id).tooltipster({ + maxWidth: 320, + zIndex: 2200, + trigger: 'custom', + triggerOpen: { + mouseenter: false, + originClick: true, + touchstart: false + }, + triggerClose: { + mouseleave: false, + originClick: true, + touchleave: false + } }); canvas.marker = $('#sim-data-marker-' + canvas.id); canvas.marker.on('click touch', function () { canvas.marker.fadeOut(175); - canvas.dataMarkerDisplay.stop(); + canvas.dataMarkerDisplay.tooltipster('close'); }); canvas.marker.fadeIn(175); @@ -304,28 +340,35 @@ updateMarker(canvas, Math.round(x), Math.round(y), false, origin, far); canvas.marker.css({ - 'left': (Math.round(x + rect.left) - dataMarkerSize[0] / 2) + 'px', - 'top': (Math.round(y + rect.top) - dataMarkerSize[1]) + 'px' + 'left': (Math.round(x) - dataMarkerSize[0] / 2) + 'px', + 'top': (Math.round(y) - dataMarkerSize[1]) + 'px' }); + if (canvas.dataMarkerDisplay.tooltipster('status').state != 'closed') { canvas.dataMarkerDisplay.tooltipster('reposition'); } }; if (!canvas.dataMarkerDisplay) { - var tripToShowData = new Trip([ - { - content : '

X: ' + hit.modelPos [0].toPrecision(3) + '

Y: ' + hit.modelPos [1].toPrecision(3) + '

Z: ' + hit.modelPos [2].toPrecision(3) + '

Value: ' + (Math.round(value * 1000) / 1000).toPrecision(3) + '

', - position : 'screen-se' - }], - { - onEnd : function(tripIndex) { - canvas.marker.fadeOut(175); - }, - tripTheme : 'dark', - showCloseBox : true, - delay: -1 + canvas.dataMarkerDisplay = $('#sim-data-marker-' + canvas.id); + canvas.dataMarkerDisplay.tooltipster('open'); + } + if (canvas.dataMarkerOptions) { + var format = [canvas.dataMarkerOptions.format[0]]; + for (var i = 1; i < canvas.dataMarkerOptions.format.length; i++) { + var formatString = canvas.dataMarkerOptions.format[i]; + if (formatString.toLowerCase() == 'x') { format.push(hit.modelPos[0]); } + else if (formatString.toLowerCase() == 'y') { format.push(hit.modelPos[1]); } + else if (formatString.toLowerCase() == 'z') { format.push(hit.modelPos[2]); } + else if (formatString.toLowerCase() == 'lat') { format.push(valueLatitude); } + else if (formatString.toLowerCase() == 'long') { format.push(valueLongitude); } + else if (formatString.toLowerCase() == 'thickness') { format.push(valueThickness); } + else if (formatString.toLowerCase() == 'vel') { format.push(valueVelocity); } + else if (formatString.toLowerCase() == 'value') { format.push(value); } + else {format.push(formatString); } + } + + $('#tooltip-content-data-marker-' + canvas.id).html(sprintf.apply(null, format)); + $('#tooltip-content-data-marker-' + canvas.id).css({ + 'font': canvas.dataMarkerOptions.font }); - canvas.dataMarkerDisplay = tripToShowData; - canvas.dataMarkerDisplay.start(); - } - $('#sim-data-marker-content-' + canvas.id).html('

X: ' + hit.modelPos [0].toPrecision(3) + '

Y: ' + hit.modelPos [1].toPrecision(3) + '

Z: ' + hit.modelPos [2].toPrecision(3) + '

Value: ' + (Math.round(value * 1000) / 1000).toPrecision(3) + '

'); - + } + if (reset) { modifyDataMarkersEnabled(true,canvas); } } @@ -386,9 +429,20 @@ if (!canvas.dataMarkersEnabled && canvas.marker) { canvas.marker.fadeOut(175); - canvas.dataMarkerDisplay.stop(); + canvas.dataMarkerDisplay.tooltipster('close'); } else if (canvas.dataMarkersEnabled && canvas.marker) { canvas.marker.fadeIn(175); - canvas.dataMarkerDisplay.start(); + canvas.dataMarkerDisplay.tooltipster('open'); + } +} //}}} +function toggleMoviePlay(canvas) { //{{{ + canvas.moviePlay = !canvas.moviePlay; + if (canvas.moviePlay){ + canvas.playButton.find("span").removeClass("fa-play"); + canvas.playButton.find("span").addClass("fa-pause"); + } + else{ + canvas.playButton.find("span").removeClass("fa-pause"); + canvas.playButton.find("span").addClass("fa-play"); } } //}}}