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

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>

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>

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);
 }

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');

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) {

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();
 			}
 		});
 

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.
  *

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>

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>

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>

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";
 

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;