Browse Source

adjustable sg, better reliability, use f_bw in sg and fft

master
Ondřej Hruška 6 years ago
parent
commit
b9727dfef4
  1. 2
      html/css/app.css
  2. 6
      html/js/all.js
  3. 16
      html/pages/fft.html
  4. 6
      html/pages/wfm.html
  5. 2
      html_src/css/app.css
  6. 2
      html_src/css/app.css.map
  7. 10
      html_src/js-src/app.js
  8. 19
      html_src/js-src/lib/chibi.js
  9. 34
      html_src/js-src/page_spectrogram.js
  10. 39
      html_src/js-src/page_waveform.js
  11. 8
      html_src/js-src/utils.js
  12. 6
      html_src/js/all.js
  13. 2
      html_src/js/all.js.map
  14. 16
      html_src/page_fft.php
  15. 19
      html_src/page_spectrogram.php
  16. 6
      html_src/page_waveform.php
  17. 4
      html_src/sass/app.scss
  18. 4
      html_src/sass/form/_select.scss

2
html/css/app.css

File diff suppressed because one or more lines are too long

6
html/js/all.js

File diff suppressed because one or more lines are too long

16
html/pages/fft.html

@ -30,11 +30,11 @@
<label for="count">Bins</label>
<label for="count" class="select-wrap">
<select name="count" id="count">
<!-- <option value="16">8-->
<!-- <option value="32">16-->
<!-- <option value="64">32-->
<!-- <option value="128">64-->
<!-- <option value="256">128-->
<option value="16">8
<option value="32">16
<option value="64">32
<option value="128">64
<option value="256">128
<option value="512">256
<option value="1024">512
<option value="2048" selected>1024
@ -42,8 +42,8 @@
</label>
</div>
<div>
<label for="freq">Rate <span class="mq-tablet-max" style="font-weight:normal;">(Hz)</span></label>
<input id="freq" type="number" value="4096">
<label for="freq">f<sub>bw</sub> <span class="mq-normal-min nb">=</span><span class="mq-tablet-max nb">(Hz)</span></label>
<input id="freq" type="number" value="2048">
<span class="mq-normal-min">Hz</span>
</div>
<div>
@ -73,7 +73,7 @@
</tr>
</table>
<div class="ar"><!-- auto reload -->
<input type="number" id="ar-time" step="0.5" value="1" min="0">&nbsp;s
<input type="number" id="ar-time" step="100" value="1000" min="0">&nbsp;ms
<input type="button" id="ar-btn" class="btn-blue narrow" value="Auto">
</div>
</div>

6
html/pages/wfm.html

@ -31,8 +31,8 @@
<input id="count" type="number" value="500">
</div>
<div>
<label for="freq">Rate <span class="mq-tablet-max" style="font-weight:normal;">(Hz)</span></label>
<input id="freq" type="number" value="4000">
<label for="freq">f<sub>s</sub> <span class="mq-normal-min nb">=</span><span class="mq-tablet-max nb">(Hz)</span></label>
<input id="freq" type="number" value="2048">
<span class="mq-normal-min">Hz</span>
</div>
<div>
@ -62,7 +62,7 @@
</tr>
</table>
<div class="ar"><!-- auto reload -->
<input type="number" id="ar-time" step="0.5" value="1" min="0">&nbsp;s
<input type="number" id="ar-time" step="100" value="1000" min="0">&nbsp;ms
<input type="button" id="ar-btn" class="btn-blue narrow" value="Auto">
</div>
</div>

2
html_src/css/app.css

File diff suppressed because one or more lines are too long

2
html_src/css/app.css.map

File diff suppressed because one or more lines are too long

10
html_src/js-src/app.js

@ -23,12 +23,18 @@ $().ready(function () {
$('input[type=number]').on('mousewheel', function(e) {
var val = +$(this).val();
var step = +($(this).attr('step') || 1);
var min = $(this).attr('min');
var max = $(this).attr('max');
if(e.wheelDelta > 0) {
val += step;
} else {
val -= step;
}
if (!_.isUndefined(min)) val = Math.max(val, min);
if (!_.isUndefined(max)) val = Math.min(val, max);
$(this).val(val);
e.preventDefault();
});
modal.init();
@ -36,6 +42,6 @@ $().ready(function () {
});
function errorMsg(msg) {
notify.show(msg, 3000);
function errorMsg(msg, time) {
notify.show(msg, time || 3000);
}

19
html_src/js-src/lib/chibi.js

@ -513,7 +513,7 @@
// Get/Set form element values
cb.val = function (value) {
var values, i, j;
if (value || value === '') {
if (!_.isUndefined(value)) { // FIXED A BUG HERE
nodeLoop(function (elm) {
switch (elm.nodeName) {
case 'SELECT':
@ -608,11 +608,10 @@
};
// Basic XHR 1, no file support. Shakes fist at IE
cb.ajax = function (url, method, callback, options) { // if options is a number, it's timeout in ms
var xhr,
query = serializeData(nodes),
type = (method) ? method.toUpperCase() : 'GET',
timestamp = '_ts=' + (+new Date()),
abortTmeo;
var xhr;
var query = serializeData(nodes);
var type = (method) ? method.toUpperCase() : 'GET';
var abortTmeo;
if (_.isNumber(options)) options = {timeout: options};
@ -622,7 +621,7 @@
loader: true,
}, options);
console.log('ajax to = ' + opts.timeout);
//console.log('ajax to = ' + opts.timeout);
if (query && (type === 'GET')) {
url += (url.indexOf('?') === -1) ? '?' + query : '&' + query;
@ -633,8 +632,10 @@
if (xhr) {
// prevent caching
if (opts.nocache)
url += (url.indexOf('?') === -1) ? '?' + timestamp : '&' + timestamp;
if (opts.nocache) {
var ts = (+(+new Date())).toString(36);
url += ((url.indexOf('?') === -1) ? '?' : '&') + '_=' + ts;
}
if (opts.loader)
$('#loader').addClass('show');

34
html_src/js-src/page_spectrogram.js

@ -13,14 +13,20 @@ var page_spectrogram = (function () {
dy: 1
};
var opts = {
interval: 0,
sampCount: 0,
binCount: 0,
freq:0
};
var interval = 1000;
var running = false;
var readTimeout; // timer
var readoutPending;
var readXhr;
var sampCount = 1024;
var binCount = sampCount/2;
var lastLoadMs;
var colormap = {
r: [
@ -83,9 +89,10 @@ var page_spectrogram = (function () {
function drawSg(col) {
shiftSg();
for (var i = 0; i < binCount; i++) {
var bc = opts.sampCount/2;
for (var i = 0; i < bc; i++) {
// resolve color from the value
var y = binCount - i;
var y = bc - i - 1;
var clr;
if (i > col.length) {
@ -109,17 +116,17 @@ var page_spectrogram = (function () {
// display
drawSg(j.samples);
} else {
errorMsg("Sampling failed.");
errorMsg("Sampling failed.", 1000);
}
} catch(e) {
errorMsg(e);
}
} else {
errorMsg("Request failed.");
errorMsg("Request failed.", 1000);
}
if (running)
readTimeout = setTimeout(requestData, interval); // TODO should actually compute time remaining, this adds interval to the request time.
readTimeout = setTimeout(requestData, Math.max(0, opts.interval - msElapsed(lastLoadMs))); // TODO should actually compute time remaining, this adds interval to the request time.
}
function requestData() {
@ -128,11 +135,13 @@ var page_spectrogram = (function () {
readXhr.abort();
}
readoutPending = true;
lastLoadMs = msNow();
var fs = $('#freq').val();
var url = _root+'/measure/fft?n='+sampCount+'&fs='+fs;
var fs = opts.freq;
var n = opts.sampCount;
var url = _root+'/measure/fft?n='+n+'&fs='+fs;
readXhr = $().get(url, onRxData, estimateLoadTime(fs,sampCount));
readXhr = $().get(url, onRxData, estimateLoadTime(fs,n));
return true;
}
@ -145,7 +154,10 @@ var page_spectrogram = (function () {
ctx.fillRect(plot.x, plot.y, plot.w, plot.h);
$('#go-btn').on('click', function() {
interval = +$('#interval').val(); // ms
opts.interval = +$('#interval').val(); // ms
opts.freq = $('#freq').val()*2;
opts.sampCount = $('#count').val();
plot.dx = plot.dy = plot.h/(opts.sampCount/2);
running = !running;
if (running) {

39
html_src/js-src/page_waveform.js

@ -9,8 +9,15 @@ var page_waveform = (function () {
var autoReloadTime = 1;
var arTimeout = -1;
var lastLoadMs;
var zoomSavedX, zoomSavedY;
var opts = {
count: 0, // sample count
freq: 0 // sampling freq
};
function buildChart(j) {
// Build the chart
var mql = window.matchMedia('screen and (min-width: 544px)');
@ -137,7 +144,7 @@ var page_waveform = (function () {
readoutPending = false;
if (status != 200) {
errorMsg("Request failed.");
errorMsg("Request failed.", 1000);
if (autoReload)
toggleAutoReload(); // turn it off.
@ -145,7 +152,7 @@ var page_waveform = (function () {
} else {
var j = JSON.parse(resp);
if (!j.success) {
errorMsg("Sampling / readout failed.");
errorMsg("Sampling failed.", 1000);
if (autoReload)
toggleAutoReload(); // turn it off.
@ -156,18 +163,23 @@ var page_waveform = (function () {
buildChart(j);
if (autoReload)
arTimeout = setTimeout(requestReload, autoReloadTime);
arTimeout = setTimeout(requestReload, Math.max(0, autoReloadTime - msElapsed(lastLoadMs)));
}
}
function readInputs() {
opts.count = $('#count').val();
opts.freq = $('#freq').val() * (dataFormat == 'fft' ? 2 : 1); // bw 2x -> f_s
}
function requestReload() {
if (readoutPending) return false;
readoutPending = true;
lastLoadMs = msNow();
var n = $('#count').val();
var fs = $('#freq').val();
var n = opts.count;
var fs = opts.freq;
var url = _root+'/measure/'+dataFormat+'?n='+n+'&fs='+fs;
$().get(url, onRxData, estimateLoadTime(fs,n));
@ -175,7 +187,9 @@ var page_waveform = (function () {
}
function toggleAutoReload() {
autoReloadTime = +$('#ar-time').val() * 1000; // ms
autoReloadTime = +$('#ar-time').val(); // ms
readInputs();
autoReload = !autoReload;
if (autoReload) {
@ -194,13 +208,16 @@ var page_waveform = (function () {
// --- Load data ---
dataFormat = format;
// initial
// requestReload();
function onLoadClick() {
readInputs();
requestReload();
}
$('#load').on('click', onLoadClick);
$('#load').on('click', requestReload);
$('#count,#freq').on('keyup', function (e) {
if (e.which == 13) {
requestReload();
onLoadClick();
}
});

8
html_src/js-src/utils.js

@ -11,6 +11,14 @@ function estimateLoadTime(fs, n) {
return (1000/fs)*n+1500;
}
function msNow() {
return +(new Date);
}
function msElapsed(start) {
return msNow() - start;
}
/**
* Perform a substitution in the given string.
*

6
html_src/js/all.js

File diff suppressed because one or more lines are too long

2
html_src/js/all.js.map

File diff suppressed because one or more lines are too long

16
html_src/page_fft.php

@ -7,11 +7,11 @@
<label for="count">Bins</label>
<label for="count" class="select-wrap">
<select name="count" id="count">
<!-- <option value="16">8-->
<!-- <option value="32">16-->
<!-- <option value="64">32-->
<!-- <option value="128">64-->
<!-- <option value="256">128-->
<option value="16">8
<option value="32">16
<option value="64">32
<option value="128">64
<option value="256">128
<option value="512">256
<option value="1024">512
<option value="2048" selected>1024
@ -19,8 +19,8 @@
</label>
</div>
<div>
<label for="freq">Rate <span class="mq-tablet-max" style="font-weight:normal;">(Hz)</span></label>
<input id="freq" type="number" value="4096">
<label for="freq">f<sub>bw</sub> <span class="mq-normal-min nb">=</span><span class="mq-tablet-max nb">(Hz)</span></label>
<input id="freq" type="number" value="2048">
<span class="mq-normal-min">Hz</span>
</div>
<div>
@ -50,7 +50,7 @@
</tr>
</table>
<div class="ar"><!-- auto reload -->
<input type="number" id="ar-time" step="0.5" value="1" min="0">&nbsp;s
<input type="number" id="ar-time" step="100" value="1000" min="0">&nbsp;ms
<input type="button" id="ar-btn" class="btn-blue narrow" value="Auto">
</div>
</div>

19
html_src/page_spectrogram.php

@ -4,8 +4,23 @@
<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">
<label for="count">Bins</label>
<label for="count" class="select-wrap">
<select name="count" id="count">
<option value="16">8
<option value="32">16
<option value="64">32
<option value="128">64
<option value="256">128
<option value="512">256
<option value="1024" selected>512
<!-- <option value="2048" selected>1024-->
</select>
</label>
</div>
<div>
<label for="freq">f<sub>bw</sub> <span class="mq-normal-min nb">=</span><span class="mq-tablet-max nb">(Hz)</span></label>
<input id="freq" type="number" value="2048">
<span class="mq-normal-min">Hz</span>
</div>
<div>

6
html_src/page_waveform.php

@ -8,8 +8,8 @@
<input id="count" type="number" value="500">
</div>
<div>
<label for="freq">Rate <span class="mq-tablet-max" style="font-weight:normal;">(Hz)</span></label>
<input id="freq" type="number" value="4000">
<label for="freq">f<sub>s</sub> <span class="mq-normal-min nb">=</span><span class="mq-tablet-max nb">(Hz)</span></label>
<input id="freq" type="number" value="2048">
<span class="mq-normal-min">Hz</span>
</div>
<div>
@ -39,7 +39,7 @@
</tr>
</table>
<div class="ar"><!-- auto reload -->
<input type="number" id="ar-time" step="0.5" value="1" min="0">&nbsp;s
<input type="number" id="ar-time" step="100" value="1000" min="0">&nbsp;ms
<input type="button" id="ar-btn" class="btn-blue narrow" value="Auto">
</div>
</div>

4
html_src/sass/app.scss

@ -38,6 +38,10 @@ $c-form-highlight-a: #28bc65;
display: none;
}
.nb {
font-weight: normal;
}
@import "layout/index";
@import "form/index";

4
html_src/sass/form/_select.scss

@ -10,8 +10,8 @@ select {
appearance: none;
cursor: pointer;
line-height: 1.4em;
padding: 3.5px;
line-height: 1.2em;
//padding: 3.5px;
padding-right: 1em;

Loading…
Cancel
Save