gui/gui.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="UTF-8">
		<title>Spectrogram viewer</title>
		<style>
			body {
				margin: 0;
				padding: 2px;
			}
			#canvasdiv {
				width: 100%;
				overflow-x: scroll;
				padding: 0;
				position: relative;
			}
			canvas {
				margin: 0;
				padding: 0;
			}
			input {
				width: 100%;
			}
			table {
				width: 100%;
			}
			td.a {
				width: 10em;
			}
			.freq_scale {
				position: absolute;
				top: 0px;
				background-color: #00000080;
				color: #80ff80;
				border-left: 1px solid red;
			}
			.time_scale {
				position: absolute;
				left: 0px;
				background-color: #00000080;
				color: #80ff80;
				border-top: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div id="canvasdiv"><canvas id="canvas"></canvas></div>
		<table>
		<tr>
			<td class="a">Cursor</td>
			<td class="b" id="info">-</td>
		</tr>
		<tr>
			<td class="a">Palette contrast</td>
			<td class="b"><input type="range" id="slider1" onchange="update_colors()"
				min="0" max="10" step="0.1" value="1"></td>
		</tr>
		<tr>
			<td class="a">Palette offset</td>
			<td class="b"><input type="range" id="slider2" onchange="update_colors()"
				min="0" max="4000" step="10" value="300"></td>
		</tr>
		<tr>
			<td class="a">Time scroll</td>
			<td class="b"><input type="range" id="slider3" onchange="update_zoom()"
				min="0" max="1000" step="250" value="0"></td>
		</tr>
		<tr>
			<td class="a">Time zoom</td>
			<td class="b"><input type="range" id="slider4" onchange="update_zoom()"
				min="-8" max="1" step="1" value="-2"></td>
		</tr>
		<tr>
			<td class="a">Frequency scroll</td>
			<td class="b"><input type="range" id="slider5" onchange="update_zoom()"
				min="0" max="1000" step="250" value="0"></td>
		</tr>
		<tr>
			<td class="a">Frequency zoom</td>
			<td class="b"><input type="range" id="slider6" onchange="update_zoom()"
				min="-4" max="1" step="1" value="-2"></td>
		</tr>
		<tr>
			<td class="a">Data file</td>
			<td class="b"><input type="file" id="fileinput"></td>
		</tr>
		</table>
	<script type="application/javascript">
		/*
		 * Parameters
		 */
		var bins; // Number of bins
		var nrecords = 0; // Number of records in loaded file
		var bin_khz; // Spacing of bins in kHz
		var canvasw, canvash; // Size of the canvas
		var pixel0_khz; // First pixel in kHz
		var pixel_khz; // Spacing of pixels in kHz (in x direction)
		var zoomy = 1; // Records per pixel (in y direction)
		var databytes = 1; // Bytes per bin in data file
		var record_bytes = 0; // Bytes per measurement record
		var spectrum_offset = 0; // Offset of spectrum data within a record
		var has_time = false; // Does the file have timestamps

		/* Various objects */
		const reader = new FileReader();
		const canvasdiv = document.getElementById("canvasdiv");
		const canvas = document.getElementById("canvas");
		const slider1 = document.getElementById("slider1");
		const slider2 = document.getElementById("slider2");
		const slider3 = document.getElementById("slider3");
		const slider4 = document.getElementById("slider4");
		const slider5 = document.getElementById("slider5");
		const slider6 = document.getElementById("slider6");
		const info = document.getElementById("info");
		const ctx = canvas.getContext("2d");

		var img; // ImageData used to draw a line to the canvas
		var imgdata; // Uint32Array view to img
		var view = null; // View to the data file
		/* Intermediate Uint16Array for data after zooming
		 * but before mapping to a palette */
		var zoomed;

		/*
		 * Precalculate color palette.
		 *
		 * View both the image data and the palette as Uint32Arrays
		 * so that all 4 bytes of a pixel can be copied at once
		 * and indexing becomes simpler.
		 */
		function generate_palette() {
			const colors = [[0,0,0], [0,0,255], [255,128,0], [255,255,255]];
			const gradientlen = 0x100;
			const palette = new Uint8Array(4 * gradientlen * (colors.length-1));
			i = 0;
			for (let c=0; c<colors.length-1; c++) {
				for(let j=0; j<gradientlen; j++) {
					const b = j / gradientlen;
					const a = 1.0 - b;
					palette[i++] = Math.round(a * colors[c][0] + b * colors[c+1][0]);
					palette[i++] = Math.round(a * colors[c][1] + b * colors[c+1][1]);
					palette[i++] = Math.round(a * colors[c][2] + b * colors[c+1][2]);
					palette[i++] = 255;
				}
			}
			return new Uint32Array(palette.buffer);
		};
		const paldata = generate_palette();


		function set_canvas_size(w, h) {
			w = Math.round(w);
			h = Math.round(h);
			canvas.width = w;
			canvas.height = h;
			canvasw = w;
			canvash = h;
			img = ctx.createImageData(w, 1);
			zoomed = new Uint16Array(w * h);
			imgdata = new Uint32Array(img.data.buffer);
		}

		set_canvas_size(1280, 800);

		/* Calculate relevant parameters based on FFT size and sample rate */
		function set_data_parameters(fftsize, fs) {
			bins = Math.round(fftsize / 2 + 1);
			bin_khz = fs / fftsize / 1000;
		}

		function update_slider_bounds() {
			slider5.value = 0;
			slider5.max = bins;
			slider3.value = 0;
			slider3.max = nrecords;
		}

		set_data_parameters(16384, 100e6);
		update_slider_bounds();


		/* Draw an image to the canvas based on zoomed data
		 * and color palette settings */
		function update_colors() {
			const multiplier = slider1.value * 1;
			const offset = slider2.value * 1;

			const palmax = paldata.length - 1;

			let zi=0;
			for (let y=0; y<canvash; y++) {
				for (let x=0; x<canvasw; x++) {
					let v = ((zoomed[zi++] - offset) * multiplier);
					v = Math.min(Math.max(Math.round(v), 0), palmax);
					imgdata[x] = paldata[v];
				}
				ctx.putImageData(img, 0, y);
			}
		}

		function update_zoom() {
			const fx_offset = Math.round(slider5.value);
			const fy_offset = Math.round(slider3.value);
			pixel0_khz = bin_khz * fx_offset;

			const zoomx = Math.pow(0.5, slider6.value);
			      zoomy = Math.pow(0.5, slider4.value);
			const zoomxi = Math.max(1, Math.round(zoomx));
			const zoomyi = Math.max(1, Math.round(zoomy));
			pixel_khz = bin_khz * zoomx;

			if (view == null) return;

			let zi=0;
			for (let y=0; y<canvash; y++) {
				for (let x=0; x<canvasw; x++) {
					// Bounds of the rectangle of bins under one pixel
					let fx0 = fx_offset + Math.floor(x * zoomx);
					let fy0 = fy_offset + Math.floor(y * zoomy);
					let fx1 = fx0 + zoomxi;
					let fy1 = fy0 + zoomyi;
					let m = 0;
					if (fx1 <= bins && fy1 <= nrecords) {
						// Find the maximum value under one pixel
						for (let fy=fy0; fy<fy1; fy++) {
							if (databytes == 1) { // 8-bit data
								let p  = spectrum_offset + record_bytes * fy + fx0;
								let p1 = spectrum_offset + record_bytes * fy + fx1;
								for (;p < p1;) {
									m = Math.max(m, view[p++] << 4);
								}
							} else { // 16-bit data
								let p  = spectrum_offset + record_bytes * fy + fx0 * 2;
								let p1 = spectrum_offset + record_bytes * fy + fx1 * 2;
								for (;p < p1; p += 2) {
									m = Math.max(m, (view[p] << 8) | view[p+1]);
								}
							}
						}
					}
					zoomed[zi++] = m;
				}
			}

			update_colors();
			update_scale();
		}

		/*
		 * Javascript magic to load a file
		 */
		var filename;
		function file_loaded(ev) {
			const d = ev.target.result;
			view = new Uint8Array(d);

			/* Parse parameters from filename */
			s = filename.split(".")[0].split("_");
			if (s.length >= 5) {
				databytes = (s.length >= 6 && s[5] == "16") ? 2 : 1;
				has_time = (s.length >= 7 && s[6] == "T");
				set_data_parameters(s[4] * 1, s[3] * 1);
			}
			record_bytes = bins * databytes;
			if (has_time) {
				record_bytes += 12;
				spectrum_offset = 12;
			} else {
				spectrum_offset = 0;
			}

			nrecords = Math.floor(view.length / record_bytes);
			update_slider_bounds();

			update_zoom();
		}
		reader.addEventListener("load", file_loaded);
		function file_changed(ev) {
			filename = ev.target.files[0].name;
			reader.readAsArrayBuffer(ev.target.files[0]);
		}
		document.getElementById("fileinput").
		addEventListener("change", file_changed);

		// Read little endian number of given length (in bytes) from a view
		function read_le(v, p, l) {
			let n = 0, shift = 0;
			for (let i = 0; i < l; i++) {
				n |= v[p++] << shift;
				shift += 8;
			}
			return n;
		}

		// Get time at a given y axis position in the canvas.
		function time_at(y) {
			const fy_offset = Math.round(slider3.value);
			const fy = fy_offset + Math.floor(y * zoomy);
			t_s  = read_le(view, record_bytes * fy + 0, 8);
			t_ns = read_le(view, record_bytes * fy + 8, 4);
			return new Date(1e3 * t_s + 1e-6 * t_ns);
		}

		// Get frequency at a given x axis position in the canvas.
		function freq_at(x) {
			return pixel0_khz + pixel_khz * x;
		}

		function format_time_short(t) {
			return t.toUTCString().substr(-12,8);
		}

		var freq_scale = [];
		var time_scale = [];

		function create_scale() {
			for (let x = 0; x < canvasw; x += 100) {
				let e = document.createElement("span");
				e.className = "freq_scale";
				e.style.left = "" + x + "px";
				canvasdiv.appendChild(e);
				freq_scale.push([x, e]);
			}
			for (let y = 25; y < canvash; y += 50) {
				let e = document.createElement("span");
				e.className = "time_scale";
				e.style.top = "" + y + "px";
				canvasdiv.appendChild(e);
				time_scale.push([y, e]);
			}
		}

		function update_scale() {
			for (const e of freq_scale) {
				e[1].innerText = "" + freq_at(e[0]).toFixed(0) + " kHz";
			}
			for (const e of time_scale) {
				e[1].innerText = format_time_short(time_at(e[0]));
			}
		}

		/*
		 * Info field.
		 */
		function update_info(ev) {
			let t = "";
			if (has_time) {
				t = ", " + time_at(ev.offsetY).toUTCString();
			}
			info.innerText = "" + freq_at(ev.offsetX).toFixed(1) + " kHz" + t;
		}
		canvas.addEventListener("mousemove", update_info);

		create_scale();
		update_zoom();
	</script>
	</body>
</html>