parent
42f869de61
commit
55ed773298
File diff suppressed because one or more lines are too long
@ -0,0 +1,165 @@ |
||||
var page_spectrogram = (function () { |
||||
var sg = {}; |
||||
|
||||
var ctx; |
||||
|
||||
// drawing area
|
||||
var plot = { |
||||
x:0, |
||||
y:0, |
||||
w:860, |
||||
h:512, |
||||
dx: 1, // bin
|
||||
dy: 1 |
||||
}; |
||||
|
||||
var interval = 1000; |
||||
var running = false; |
||||
var readTimeout; // timer
|
||||
var readoutPending; |
||||
var readXhr; |
||||
|
||||
var sampCount = 1024; |
||||
var binCount = sampCount/2; |
||||
|
||||
var colormap = { |
||||
r: [ |
||||
{x: 0, b: 0}, |
||||
{x: .7, b: 0}, |
||||
{x: 1, b: 1}, |
||||
], |
||||
g: [ |
||||
{x: 0, b: 0}, |
||||
{x: .3, b: 0}, |
||||
{x: .7, b: 1}, |
||||
{x: 1, b: 1}, |
||||
], |
||||
b: [ |
||||
{x: 0, b: 0}, |
||||
{x: .02, b: .3}, |
||||
{x: .3, b: 1}, |
||||
{x: 1, b: 1}, |
||||
] |
||||
}; |
||||
|
||||
function cmResolv(db, tab) { |
||||
var startX,endX,startC,endC; |
||||
|
||||
db /=6; |
||||
if (db > 1) db = 1; |
||||
if (db < 0) db = 0; |
||||
|
||||
for (var i = 0; i < tab.length; i++) { |
||||
var p = tab[i]; |
||||
if (db >= p.x) { |
||||
startX = p.x; |
||||
startC = p.b; |
||||
} |
||||
|
||||
if (db <= p.x) { |
||||
endX = p.x; |
||||
endC = p.b; |
||||
} |
||||
} |
||||
|
||||
return Math.round((startC + (endC - startC)*((db - startX)/(endX - startX)))*255); |
||||
} |
||||
|
||||
function val2color(x) { |
||||
var xx = x;//20 * Math.log(x);
|
||||
|
||||
var r = cmResolv(xx, colormap.r); |
||||
var g = cmResolv(xx, colormap.g); |
||||
var b = cmResolv(xx, colormap.b); |
||||
|
||||
return 'rgb('+r+','+g+','+b+')'; |
||||
} |
||||
|
||||
function shiftSg() { |
||||
var imageData = ctx.getImageData(plot.x+plot.dx, plot.y, plot.w-plot.dx, plot.h); |
||||
ctx.putImageData(imageData, plot.x, plot.y); |
||||
} |
||||
|
||||
function drawSg(col) { |
||||
shiftSg(); |
||||
|
||||
for (var i = 0; i < binCount; i++) { |
||||
// resolve color from the value
|
||||
var y = binCount - i; |
||||
var clr; |
||||
|
||||
if (i > col.length) { |
||||
clr = '#000'; |
||||
} else { |
||||
clr = val2color(col[i]); |
||||
} |
||||
ctx.fillStyle = clr; |
||||
|
||||
ctx.fillRect(plot.x+plot.w-plot.dx, plot.y+y*plot.dy, plot.dx, plot.dy); |
||||
} |
||||
} |
||||
|
||||
|
||||
function onRxData(resp, status) { |
||||
readoutPending = false; |
||||
if (status == 200) { |
||||
try { |
||||
var j = JSON.parse(resp); |
||||
if (j.success) { |
||||
// display
|
||||
drawSg(j.samples); |
||||
} else { |
||||
errorMsg("Sampling failed."); |
||||
} |
||||
} catch(e) { |
||||
errorMsg(e); |
||||
} |
||||
} else { |
||||
errorMsg("Request failed."); |
||||
} |
||||
|
||||
if (running) |
||||
readTimeout = setTimeout(requestData, interval); // TODO should actually compute time remaining, this adds interval to the request time.
|
||||
} |
||||
|
||||
function requestData() { |
||||
if (readoutPending) { |
||||
errorMsg("Request already pending - aborting."); |
||||
readXhr.abort(); |
||||
} |
||||
readoutPending = true; |
||||
|
||||
var fs = $('#freq').val(); |
||||
var url = _root+'/measure/fft?n='+sampCount+'&fs='+fs; |
||||
|
||||
readXhr = $().get(url, onRxData, estimateLoadTime(fs,sampCount)); |
||||
|
||||
return true; |
||||
} |
||||
|
||||
sg.init = function () { |
||||
var canvas = $('#sg')[0]; |
||||
ctx = canvas.getContext('2d'); |
||||
|
||||
ctx.fillStyle = '#000'; |
||||
ctx.fillRect(plot.x, plot.y, plot.w, plot.h); |
||||
|
||||
$('#go-btn').on('click', function() { |
||||
interval = +$('#interval').val(); // ms
|
||||
|
||||
running = !running; |
||||
if (running) { |
||||
requestData(); |
||||
} else { |
||||
clearTimeout(readTimeout); |
||||
} |
||||
|
||||
$('#go-btn') |
||||
.toggleClass('btn-green') |
||||
.toggleClass('btn-red') |
||||
.html(running ? 'Stop' : 'Start'); |
||||
}); |
||||
}; |
||||
|
||||
return sg; |
||||
})(); |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,29 @@ |
||||
<?php $page = 'spectrogram'; include "_start.php"; ?> |
||||
|
||||
<h1>Spectrogram</h1> |
||||
|
||||
<div class="Box center" id="samp-ctrl"> |
||||
<div> |
||||
<label for="freq">Rate <span class="mq-tablet-max" style="font-weight:normal;">(Hz)</span></label> |
||||
<input id="freq" type="number" value="4096"> |
||||
<span class="mq-normal-min">Hz</span> |
||||
</div> |
||||
<div> |
||||
<label for="interval">Interval <span class="mq-tablet-max" style="font-weight:normal;">(ms)</span></label> |
||||
<input id="interval" type="number" value="100" step=100 min=0> |
||||
<span class="mq-normal-min">ms</span> |
||||
</div> |
||||
<div> |
||||
<a id="go-btn" class="button btn-green">Start</a> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="Box center"> |
||||
<canvas id="sg" width=860 height=512></canvas> |
||||
</div> |
||||
|
||||
<script> |
||||
$().ready(page_spectrogram.init()); |
||||
</script> |
||||
|
||||
<?php include "_end.php"; ?> |
||||
Loading…
Reference in new issue