improved sgm colors, adjustable tile size

html_src/js-src/app.js

@@ -34,6 +34,14 @@ $().ready(function () {
 		if (!_.isUndefined(max)) val = Math.min(val, max);
 		$(this).val(val);
 
+		if ("createEvent" in document) {
+			var evt = document.createEvent("HTMLEvents");
+			evt.initEvent("change", false, true);
+			$(this)[0].dispatchEvent(evt);
+		} else {
+			$(this)[0].fireEvent("onchange");
+		}
+
 		e.preventDefault();
 	});
 

html_src/js-src/page_spectrogram.js

@@ -28,61 +28,87 @@ var page_spectrogram = (function () {
 
 	var lastLoadMs;
 
-	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;
+	var colormap = [
+		[0.00, 0, 0, 0],
+		[0.10, 41, 17, 41],
+		[0.25, 34, 17, 78],
+		[0.6, 17, 30, 105],
+		[1.0, 17, 57, 126],
+		[1.2, 17, 84, 128],
+		[1.3, 17, 111, 115],
+		[1.4, 17, 134, 96],
+		[1.5, 17, 155, 71],
+		[1.6, 68, 194, 17],
+		[1.75, 111, 209, 17],
+		[1.84, 180, 213, 17],
+		[1.90, 223, 217, 86],
+		[1.97, 248, 222, 176],
+		[1.99, 255, 237, 222],
+		[2.00, 255, 255, 255],
+
+
+		// [0.00, 0, 0, 0],
+		// [0.12, 41, 17, 41],
+		// [0.25, 34, 17, 78],
+		// [0.38, 17, 30, 105],
+		// [0.50, 17, 57, 126],
+		// [0.62, 17, 84, 128],
+		// [0.75, 17, 111, 115],
+		// [0.88, 17, 134, 96],
+		// [1.00, 17, 155, 71],
+		// [1.12, 68, 194, 17],
+		// [1.25, 111, 209, 17],
+		// [1.38, 180, 213, 17],
+		// [1.50, 223, 217, 86],
+		// [1.62, 248, 222, 176],
+		// [1.75, 255, 237, 222],
+		// [2.00, 255, 255, 255],
+	];
+
+	function cmResolv(val) {
+		var x1, x2, c1, c2;
+
+		val = Math.log10(1+val);
+
+		if (val > 2) val = 2;
+		if (val < 0) val = 0;
+
+		_.each(colormap, function(c) {
+			var point = c[0];
+			if (val >= point) {
+				x1 = point;
+				c1 = c;
 			}
 
-			if (db <= p.x) {
-				endX = p.x;
-				endC = p.b;
+			if (val <= point) {
+				x2 = point;
+				c2 = c;
+				return false; // exit iteration
 			}
-		}
+		});
 
-		return Math.round((startC + (endC - startC)*((db - startX)/(endX - startX)))*255);
+		var rate = ((val - x1)/(x2 - x1));
+		if (x1 == x2) rate=0;
+
+		return [
+			Math.round((c1[1] + (c2[1] - c1[1])*rate)),
+			Math.round((c1[2] + (c2[2] - c1[2])*rate)),
+			Math.round((c1[3] + (c2[3] - c1[3])*rate)),
+		];
 	}
 
 	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);
+		var c = cmResolv(x);
 
-		return 'rgb('+r+','+g+','+b+')';
+		return 'rgb('+c[0]+','+c[1]+','+c[2]+')';
 	}
 
 	function shiftSg() {
 		var imageData = ctx.getImageData(plot.x+plot.dx, plot.y, plot.w-plot.dx, plot.h);
+
+		ctx.fillStyle = 'black';
+		ctx.fillRect(plot.x, plot.y, plot.w, plot.h);
+
 		ctx.putImageData(imageData, plot.x, plot.y);
 	}
 
@@ -92,9 +118,12 @@ var page_spectrogram = (function () {
 		var bc = opts.sampCount/2;
 		for (var i = 0; i < bc; i++) {
 			// resolve color from the value
-			var y = bc - i - 1;
 			var clr;
 
+			if (i*plot.dy > plot.h) {
+				break;
+			}
+
 			if (i > col.length) {
 				clr = '#000';
 			} else {
@@ -102,7 +131,7 @@ var page_spectrogram = (function () {
 			}
 			ctx.fillStyle = clr;
 
-			ctx.fillRect(plot.x+plot.w-plot.dx, plot.y+y*plot.dy, plot.dx, plot.dy);
+			ctx.fillRect(plot.x+plot.w-plot.dx, plot.y+plot.h-(i+1)*plot.dy, plot.dx, plot.dy);
 		}
 	}
 
@@ -150,17 +179,34 @@ var page_spectrogram = (function () {
 		var canvas = $('#sg')[0];
 		ctx = canvas.getContext('2d');
 
+		// CLS
 		ctx.fillStyle = '#000';
 		ctx.fillRect(plot.x, plot.y, plot.w, plot.h);
 
-		$('#go-btn').on('click', function() {
-			opts.interval = +$('#interval').val(); // ms
-			opts.freq = $('#freq').val()*2;
-			opts.sampCount = $('#count').val();
-			plot.dx = plot.dy = plot.h/(opts.sampCount/2);
+		// update tile size on bin count selection
+		$('#count').on('change', function() {
+			var count = +$('#count').val();
+			var tile = Math.max(1, plot.h/(count/2));
+
+			$('#tile-x').val(tile);
+			$('#tile-y').val(tile);
+		});
+
+		// chain Y with X
+		$('#tile-y').on('change', function() {
+			$('#tile-x').val($(this).val());
+		});
 
+		$('#go-btn').on('click', function() {
 			running = !running;
 			if (running) {
+				opts.interval = +$('#interval').val(); // ms
+				opts.freq = +$('#freq').val()*2;
+				opts.sampCount = +$('#count').val();
+
+				plot.dx = +$('#tile-x').val();
+				plot.dy = +$('#tile-y').val();
+
 				requestData();
 			} else {
 				clearTimeout(readTimeout);
@@ -171,6 +217,12 @@ var page_spectrogram = (function () {
 				.toggleClass('btn-red')
 				.html(running ? 'Stop' : 'Start');
 		});
+
+		for (var i = 0; i < 99; i++) {
+			ctx.fillStyle = val2color(i);
+			console.log(ctx.fillStyle);
+			ctx.fillRect(i*5,0,5,100);
+		}
 	};
 
 	return sg;

html_src/js-src/utils.js

@@ -19,6 +19,10 @@ function msElapsed(start) {
 	return msNow() - start;
 }
 
+Math.log10 = Math.log10 || function(x) {
+	return Math.log(x) / Math.LN10;
+};
+
 /**
  * Perform a substitution in the given string.
  *

html_src/misc/linearl_face_based.h

@@ -0,0 +1,21 @@
+/*  GIMP header image file format (RGB): /home/ondra/downloads/linearl_face_based.h  */
+
+static unsigned int width = 1;
+static unsigned int height = 100;
+
+/*  Call this macro repeatedly.  After each use, the pixel data can be extracted  */
+
+#define HEADER_PIXEL(data,pixel) {\
+pixel[0] = (((data[0] - 33) << 2) | ((data[1] - 33) >> 4)); \
+pixel[1] = ((((data[1] - 33) & 0xF) << 4) | ((data[2] - 33) >> 2)); \
+pixel[2] = ((((data[2] - 33) & 0x3) << 6) | ((data[3] - 33))); \
+data += 4; \
+}
+static char *header_data =
+	"\"A-&&AE4'!I7(!M9)!U=)AY?*!]A*R!D+2%E+B%F+B%Q+2%X*R%_*2&))R&-)2&1"
+	"(2&8'B&<%R&B$B*E$2FH$C6N$CFQ$SRS$T*X%$2Z%$>]%4O!%4[#%5#&%5G$%5[\""
+	"%6+!%6J^%6V\\%72Y%7>X%7JV%7^S%8*Q%8:N%8RJ%8^G%9*D%9>?%9J<%9R9%:&2"
+	"%:..%:6+%:R&%:^$%+5^$[=[$[IX$K]O$L%K$<1E&<E4+,M2.,U21]%23=-24M52"
+	"6]E27]M28]U2:N!2;N)2>^)2DN-2G.-2K.12M.12N^52R>52S^92U>92WN>!X>B9"
+	"Y>BJ[.K#[NK-\\NO7]^SF^^WM_NWU`^\\!`_('`_<2`_H7`_T=``$E``0J``<O``LW"
+	"``X[```_````````";

html_src/misc/linearl_face_based_16.h

@@ -0,0 +1,16 @@
+/*  GIMP header image file format (RGB): /home/ondra/downloads/linearl_face_based_16.h  */
+
+static unsigned int width = 1;
+static unsigned int height = 16;
+
+/*  Call this macro repeatedly.  After each use, the pixel data can be extracted  */
+
+#define HEADER_PIXEL(data,pixel) {\
+pixel[0] = (((data[0] - 33) << 2) | ((data[1] - 33) >> 4)); \
+pixel[1] = ((((data[1] - 33) & 0xF) << 4) | ((data[2] - 33) >> 2)); \
+pixel[2] = ((((data[2] - 33) & 0x3) << 6) | ((data[3] - 33))); \
+data += 4; \
+}
+static char *header_data =
+	"!!!!+2%J)B&/%2ZJ%4F_%63!%7^T%9:A%:N(2-)2<^%2N.52X^F7_.[Q`_X?````"
+	"";

html_src/misc/linearl_face_based_20.h

@@ -0,0 +1,16 @@
+/*  GIMP header image file format (RGB): /home/ondra/downloads/linearl_face_based_20.h  */
+
+static unsigned int width = 1;
+static unsigned int height = 20;
+
+/*  Call this macro repeatedly.  After each use, the pixel data can be extracted  */
+
+#define HEADER_PIXEL(data,pixel) {\
+pixel[0] = (((data[0] - 33) << 2) | ((data[1] - 33) >> 4)); \
+pixel[1] = ((((data[1] - 33) & 0xF) << 4) | ((data[2] - 33) >> 2)); \
+pixel[2] = ((((data[2] - 33) & 0x3) << 6) | ((data[3] - 33))); \
+data += 4; \
+}
+static char *header_data =
+	"%AA1*R!D*B&'(B&7$S>O%4W#%5S$%7FW%9&F%:6-%;&#%,9A5=929=Y2J>12W.AQ"
+	"ZNJ]`>_^``,H``TY";

html_src/misc/linearl_face_based_8.h

@@ -0,0 +1,15 @@
+/*  GIMP header image file format (RGB): /home/ondra/downloads/linearl_face_based_8.h  */
+
+static unsigned int width = 1;
+static unsigned int height = 8;
+
+/*  Call this macro repeatedly.  After each use, the pixel data can be extracted  */
+
+#define HEADER_PIXEL(data,pixel) {\
+pixel[0] = (((data[0] - 33) << 2) | ((data[1] - 33) >> 4)); \
+pixel[1] = ((((data[1] - 33) & 0xF) << 4) | ((data[2] - 33) >> 2)); \
+pixel[2] = ((((data[2] - 33) & 0x3) << 6) | ((data[3] - 33))); \
+data += 4; \
+}
+static char *header_data =
+	")1YA'BB=%5>`%8NK%;9Z7MI2SN=U`/<(";

html_src/misc/main.c

@@ -0,0 +1,13 @@
+#include "linearl_face_based_16.h"
+#include <stdio.h>
+#include <stdlib.h>
+#include <math.h>
+
+void main() {
+  int pixel[3];
+  char *data = header_data;
+  for (int i = 0; i < height; i++) {
+    HEADER_PIXEL(data, pixel);
+    printf("[%.2f, %d, %d, %d],\n",log10(1+(i/(float)height)*100.0f),pixel[0],pixel[1],pixel[2]);
+  }
+}

html_src/page_spectrogram.php

@@ -14,17 +14,23 @@
 				<option value="256">128
 				<option value="512">256
 				<option value="1024" selected>512
-<!--				<option value="2048" selected>1024-->
+				<option value="2048">1024
 			</select>
 		</label>
 	</div>
+	<div id="tile-cfg">
+		<label for="tile-x">Tile</label>
+		<input id="tile-x" type="number" min=1 step=1 value=1>
+		×
+		<input id="tile-y" type="number" min=1 step=1 value=1>
+	</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>
-		<label for="interval">Interval <span class="mq-tablet-max" style="font-weight:normal;">(ms)</span></label>
+		<label for="interval">t<sub>s</sub>  <span class="mq-normal-min nb">=</span><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>

html_src/sass/pages/_wfm.scss

@@ -26,6 +26,10 @@
 			width: 100%;
 		}
 	}
+
+	#tile-cfg input {
+		width: 3em;
+	}
 }
 
 .Box.chartbox {