diff --git a/js/expo.js b/js/expo.js index 9b4ca621..80b8e47e 100644 --- a/js/expo.js +++ b/js/expo.js @@ -7,12 +7,16 @@ */ function ExpoCurve(offset, power, inputRange, outputRange, steps) { var - curve, inputScale; + curve, inputScale, rawInputScale; function lookupStraightLine(input) { return (input + offset) * inputScale; } + this.lookupRaw = function(input) { + return (input + offset) * rawInputScale; + } + /** * An approximation of lookupMathPow by precomputing several expo curve points and interpolating between those * points using straight line interpolation. @@ -58,6 +62,8 @@ function ExpoCurve(offset, power, inputRange, outputRange, steps) { return result; } + rawInputScale = outputRange / inputRange; + // If steps argument isn't supplied, use a reasonable default if (steps === undefined) { steps = 12; diff --git a/js/graph_spectrum.js b/js/graph_spectrum.js index b6bb1979..ae2ad76d 100644 --- a/js/graph_spectrum.js +++ b/js/graph_spectrum.js @@ -53,7 +53,7 @@ function dataLoad(chunks, startFrameIndex, fieldIndex, curve, buffer) { var chunk = chunks[chunkIndex]; for (; frameIndex < chunk.frames.length; frameIndex++) { var fieldValue = chunk.frames[frameIndex][fieldIndex]; - bufferData[i++] = (curve.lookup(fieldValue)); + bufferData[i++] = (curve.lookupRaw(fieldValue)); if (i >= buffer.length) break dataCollectionLoop; @@ -91,7 +91,7 @@ function draw() { canvasCtx.fillStyle = 'rgba(255, 255, 255, .25)'; /* white */ canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); - var barWidth = (WIDTH / PLOTTED_BUFFER_LENGTH);// * 2.5; + var barWidth = (WIDTH / PLOTTED_BUFFER_LENGTH) - 1;// * 2.5; var barHeight; var x = 0; @@ -101,17 +101,43 @@ function draw() { canvasCtx.fillStyle = 'rgba(0,255,0,0.3)'; /* green */ canvasCtx.fillRect(x,HEIGHT-barHeight,barWidth,barHeight); - x += barWidth; + x += barWidth + 1; } - drawAxisLabel('#' + leftPad(audioIterations, "0", 7), WIDTH - 8, HEIGHT - 10); + drawGridLines(options.analyserSampleRate, LEFT, TOP, WIDTH, HEIGHT); + drawAxisLabel('#' + leftPad(audioIterations, "0", 7), WIDTH - 8, HEIGHT - 10, 'right'); canvasCtx.restore(); } +function drawGridLines(sampleRate, LEFT, TOP, WIDTH, HEIGHT) { + + var ticks = 5; + var frequencyInterval = (sampleRate / ticks) / 4; + var frequency = 0; + + for(var i=0; i<=ticks; i++) { + canvasCtx.beginPath(); + canvasCtx.lineWidth = 1; + canvasCtx.strokeStyle = "rgba(255,255,255,0.25)"; + + canvasCtx.moveTo(i * (WIDTH / ticks), 0); + canvasCtx.lineTo(i * (WIDTH / ticks), HEIGHT); + + canvasCtx.stroke(); + drawAxisLabel((frequency)+"Hz", i * (WIDTH / ticks), HEIGHT * 1.05, 'center'); + frequency += frequencyInterval; + } +} -function drawAxisLabel(axisLabel, X, Y) { +function drawAxisLabel(axisLabel, X, Y, align) { canvasCtx.font = drawingParams.fontSizeFrameLabel + "pt " + DEFAULT_FONT_FACE; canvasCtx.fillStyle = "rgba(255,255,255,0.9)"; - canvasCtx.textAlign = 'right'; + if(align) { + canvasCtx.textAlign = align; + } else + { + canvasCtx.textAlign = 'center'; + } + canvasCtx.fillText(axisLabel, X, Y); } diff --git a/js/grapher.js b/js/grapher.js index f52a5a67..1e15facd 100755 --- a/js/grapher.js +++ b/js/grapher.js @@ -53,7 +53,8 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, options) defaultOptions = { gapless:false, drawCraft:"3D", drawPidTable:true, drawSticks:true, drawTime:true, - drawAnalyser:true, // add an analyser option + drawAnalyser:true, // add an analyser option + analyserSampleRate:2000/*Hz*/, // the loop time for the log eraseBackground: true // Set to false if you want the graph to draw on top of an existing canvas image },