FreeDATA/gui/src/waterfall/spectrogram.js
2021-07-17 09:05:50 +02:00

466 lines
No EOL
20 KiB
JavaScript

/*=============================================================
Filename: Spectrogram-1v00.js
JavaScript graphics functions to draw Spectrograms.
Date Description By
-------|-------------------------------------------------|---
12Nov18 First beta ARC
17Nov18 Added offset into data buffer ARC
08May19 this.imageURL URL added
bugfix: fixed isNaN test
Changed sgStart, sgStop to start, stop
Added options object to constructors ARC
10May19 Enabled Left to Right as well as Top to Bottom ARC
11May19 Added RasterscanSVG ARC
12May19 Added blnkline for horizontal ratser scans ARC
13May19 Eliminated unneccessary putImageData ARC
14May19 Removed toDataURL, not used drawImage is better
bugfix: SVG RHC names swapped ARC
02Jun19 bugfix: startOfs not honored in horizontalNewLine ARC
03Jun19 Flipped the SVG and RHC names for waterfalls ARC
04Jun19 Unflip SVG and RHC for horizontal mode ARC
Swap "SVG" & "RHC" strings to match fn names ARC
05Jun19 bugfix: WaterfallSVG scrolling wrong way ARC
10Jun19 bugfix: support lineRate=0 for static display
bugfix: ipBufPtr must be a ptr to a ptr ARC
11Jun19 Make ipBuffers an Array of Arrays, if lineRate=0
use all buffers else use only ipBuffer[0] ARC
13Jun19 Use Waterfall and Rasterscan plus direction
Use Boolean rater than string compare ARC
16Jun19 Use const and let ARC
20Jun19 Change order of parameters ARC
21Jun19 Add setLineRate method ARC
06Jul19 Released as Rev 1v00 ARC
==============================================================*/
var Waterfall, Rasterscan;
(function(){
Waterfall = function(ipBufAry, w, h, dir, options)
{
var direction = (typeof(dir) === "string")? dir.toLowerCase() : "down";
switch (direction)
{
case "up":
return new Spectrogram(ipBufAry, w, h, "WF", false, true, options);
case "down":
default:
return new Spectrogram(ipBufAry, w, h, "WF", true, true, options);
case "left":
return new Spectrogram(ipBufAry, w, h, "WF", false, false, options);
case "right":
return new Spectrogram(ipBufAry, w, h, "WF", true, false, options);
}
}
Rasterscan = function(ipBufAry, w, h, dir, options)
{
const direction = (typeof(dir) === "string")? dir.toLowerCase() : "down";
switch (direction)
{
case "up":
return new Spectrogram(ipBufAry, w, h, "RS", true, true, options);
case "down":
default:
return new Spectrogram(ipBufAry, w, h, "RS", false, true, options);
case "left":
return new Spectrogram(ipBufAry, w, h, "RS", false, false, options);
case "right":
return new Spectrogram(ipBufAry, w, h, "RS", true, false, options);
}
}
function Spectrogram(ipBufAry, w, h, sgMode, rhc, vert, options)
{
const opt = (typeof options === 'object')? options: {}; // avoid undeclared object errors
let offScreenCtx; // offscreen canvas drawing context
const pxPerLine = w || 200;
const lines = h || 200;
let lineRate = 30; // requested line rate for dynamic waterfalls
let interval = 0; // msec
let startOfs = 0;
const lineBuf = new ArrayBuffer(pxPerLine * 4); // 1 line
const lineBuf8 = new Uint8ClampedArray(lineBuf);
const lineImgData = new ImageData(lineBuf8, pxPerLine, 1); // 1 line of canvas pixels
let pageImgData; // lines * pxPerLine of canvas pixels
let ipBuf8; // map input data to 0..255 unsigned bytes
const blankBuf = new ArrayBuffer(pxPerLine * 4); // 1 line
const blankBuf8 = new Uint8ClampedArray(blankBuf);
const blankImgData = new ImageData(blankBuf8, pxPerLine, 1); // 1 line of canvas pixels
const clearBuf = new ArrayBuffer(pxPerLine * lines * 4); // fills with 0s ie. rgba 0,0,0,0 = transparent
const clearBuf8 = new Uint8ClampedArray(clearBuf);
let clearImgData;
let nextLine = 0;
let timerID = null;
let running = false;
let sgTime = 0;
let sgStartTime = 0;
// Matlab Jet ref: stackoverflow.com grayscale-to-red-green-blue-matlab-jet-color-scale
let colMap = [[ 0, 0, 128, 255], [ 0, 0, 131, 255], [ 0, 0, 135, 255], [ 0, 0, 139, 255],
[ 0, 0, 143, 255], [ 0, 0, 147, 255], [ 0, 0, 151, 255], [ 0, 0, 155, 255],
[ 0, 0, 159, 255], [ 0, 0, 163, 255], [ 0, 0, 167, 255], [ 0, 0, 171, 255],
[ 0, 0, 175, 255], [ 0, 0, 179, 255], [ 0, 0, 183, 255], [ 0, 0, 187, 255],
[ 0, 0, 191, 255], [ 0, 0, 195, 255], [ 0, 0, 199, 255], [ 0, 0, 203, 255],
[ 0, 0, 207, 255], [ 0, 0, 211, 255], [ 0, 0, 215, 255], [ 0, 0, 219, 255],
[ 0, 0, 223, 255], [ 0, 0, 227, 255], [ 0, 0, 231, 255], [ 0, 0, 235, 255],
[ 0, 0, 239, 255], [ 0, 0, 243, 255], [ 0, 0, 247, 255], [ 0, 0, 251, 255],
[ 0, 0, 255, 255], [ 0, 4, 255, 255], [ 0, 8, 255, 255], [ 0, 12, 255, 255],
[ 0, 16, 255, 255], [ 0, 20, 255, 255], [ 0, 24, 255, 255], [ 0, 28, 255, 255],
[ 0, 32, 255, 255], [ 0, 36, 255, 255], [ 0, 40, 255, 255], [ 0, 44, 255, 255],
[ 0, 48, 255, 255], [ 0, 52, 255, 255], [ 0, 56, 255, 255], [ 0, 60, 255, 255],
[ 0, 64, 255, 255], [ 0, 68, 255, 255], [ 0, 72, 255, 255], [ 0, 76, 255, 255],
[ 0, 80, 255, 255], [ 0, 84, 255, 255], [ 0, 88, 255, 255], [ 0, 92, 255, 255],
[ 0, 96, 255, 255], [ 0, 100, 255, 255], [ 0, 104, 255, 255], [ 0, 108, 255, 255],
[ 0, 112, 255, 255], [ 0, 116, 255, 255], [ 0, 120, 255, 255], [ 0, 124, 255, 255],
[ 0, 128, 255, 255], [ 0, 131, 255, 255], [ 0, 135, 255, 255], [ 0, 139, 255, 255],
[ 0, 143, 255, 255], [ 0, 147, 255, 255], [ 0, 151, 255, 255], [ 0, 155, 255, 255],
[ 0, 159, 255, 255], [ 0, 163, 255, 255], [ 0, 167, 255, 255], [ 0, 171, 255, 255],
[ 0, 175, 255, 255], [ 0, 179, 255, 255], [ 0, 183, 255, 255], [ 0, 187, 255, 255],
[ 0, 191, 255, 255], [ 0, 195, 255, 255], [ 0, 199, 255, 255], [ 0, 203, 255, 255],
[ 0, 207, 255, 255], [ 0, 211, 255, 255], [ 0, 215, 255, 255], [ 0, 219, 255, 255],
[ 0, 223, 255, 255], [ 0, 227, 255, 255], [ 0, 231, 255, 255], [ 0, 235, 255, 255],
[ 0, 239, 255, 255], [ 0, 243, 255, 255], [ 0, 247, 255, 255], [ 0, 251, 255, 255],
[ 0, 255, 255, 255], [ 4, 255, 251, 255], [ 8, 255, 247, 255], [ 12, 255, 243, 255],
[ 16, 255, 239, 255], [ 20, 255, 235, 255], [ 24, 255, 231, 255], [ 28, 255, 227, 255],
[ 32, 255, 223, 255], [ 36, 255, 219, 255], [ 40, 255, 215, 255], [ 44, 255, 211, 255],
[ 48, 255, 207, 255], [ 52, 255, 203, 255], [ 56, 255, 199, 255], [ 60, 255, 195, 255],
[ 64, 255, 191, 255], [ 68, 255, 187, 255], [ 72, 255, 183, 255], [ 76, 255, 179, 255],
[ 80, 255, 175, 255], [ 84, 255, 171, 255], [ 88, 255, 167, 255], [ 92, 255, 163, 255],
[ 96, 255, 159, 255], [100, 255, 155, 255], [104, 255, 151, 255], [108, 255, 147, 255],
[112, 255, 143, 255], [116, 255, 139, 255], [120, 255, 135, 255], [124, 255, 131, 255],
[128, 255, 128, 255], [131, 255, 124, 255], [135, 255, 120, 255], [139, 255, 116, 255],
[143, 255, 112, 255], [147, 255, 108, 255], [151, 255, 104, 255], [155, 255, 100, 255],
[159, 255, 96, 255], [163, 255, 92, 255], [167, 255, 88, 255], [171, 255, 84, 255],
[175, 255, 80, 255], [179, 255, 76, 255], [183, 255, 72, 255], [187, 255, 68, 255],
[191, 255, 64, 255], [195, 255, 60, 255], [199, 255, 56, 255], [203, 255, 52, 255],
[207, 255, 48, 255], [211, 255, 44, 255], [215, 255, 40, 255], [219, 255, 36, 255],
[223, 255, 32, 255], [227, 255, 28, 255], [231, 255, 24, 255], [235, 255, 20, 255],
[239, 255, 16, 255], [243, 255, 12, 255], [247, 255, 8, 255], [251, 255, 4, 255],
[255, 255, 0, 255], [255, 251, 0, 255], [255, 247, 0, 255], [255, 243, 0, 255],
[255, 239, 0, 255], [255, 235, 0, 255], [255, 231, 0, 255], [255, 227, 0, 255],
[255, 223, 0, 255], [255, 219, 0, 255], [255, 215, 0, 255], [255, 211, 0, 255],
[255, 207, 0, 255], [255, 203, 0, 255], [255, 199, 0, 255], [255, 195, 0, 255],
[255, 191, 0, 255], [255, 187, 0, 255], [255, 183, 0, 255], [255, 179, 0, 255],
[255, 175, 0, 255], [255, 171, 0, 255], [255, 167, 0, 255], [255, 163, 0, 255],
[255, 159, 0, 255], [255, 155, 0, 255], [255, 151, 0, 255], [255, 147, 0, 255],
[255, 143, 0, 255], [255, 139, 0, 255], [255, 135, 0, 255], [255, 131, 0, 255],
[255, 128, 0, 255], [255, 124, 0, 255], [255, 120, 0, 255], [255, 116, 0, 255],
[255, 112, 0, 255], [255, 108, 0, 255], [255, 104, 0, 255], [255, 100, 0, 255],
[255, 96, 0, 255], [255, 92, 0, 255], [255, 88, 0, 255], [255, 84, 0, 255],
[255, 80, 0, 255], [255, 76, 0, 255], [255, 72, 0, 255], [255, 68, 0, 255],
[255, 64, 0, 255], [255, 60, 0, 255], [255, 56, 0, 255], [255, 52, 0, 255],
[255, 48, 0, 255], [255, 44, 0, 255], [255, 40, 0, 255], [255, 36, 0, 255],
[255, 32, 0, 255], [255, 28, 0, 255], [255, 24, 0, 255], [255, 20, 0, 255],
[255, 16, 0, 255], [255, 12, 0, 255], [255, 8, 0, 255], [255, 4, 0, 255],
[255, 0, 0, 255], [251, 0, 0, 255], [247, 0, 0, 255], [243, 0, 0, 255],
[239, 0, 0, 255], [235, 0, 0, 255], [231, 0, 0, 255], [227, 0, 0, 255],
[223, 0, 0, 255], [219, 0, 0, 255], [215, 0, 0, 255], [211, 0, 0, 255],
[207, 0, 0, 255], [203, 0, 0, 255], [199, 0, 0, 255], [195, 0, 0, 255],
[191, 0, 0, 255], [187, 0, 0, 255], [183, 0, 0, 255], [179, 0, 0, 255],
[175, 0, 0, 255], [171, 0, 0, 255], [167, 0, 0, 255], [163, 0, 0, 255],
[159, 0, 0, 255], [155, 0, 0, 255], [151, 0, 0, 255], [147, 0, 0, 255],
[143, 0, 0, 255], [139, 0, 0, 255], [135, 0, 0, 255], [131, 0, 0, 255],
[ 0, 0, 0, 0]];
function incrLine()
{
if ((vert && !rhc) || (!vert && rhc))
{
nextLine++;
if (nextLine >= lines)
{
nextLine = 0;
}
}
else
{
nextLine--;
if (nextLine < 0)
{
nextLine = lines-1;
}
}
}
function updateWaterfall() // update dynamic waterfalls at a fixed rate
{
let sgDiff;
// grab latest line of data, write it to off screen buffer, inc 'nextLine'
sgNewLine();
// loop to write data data at the desired rate, data is being updated asynchronously
// ref for accurate timeout: http://www.sitepoint.com/creating-accurate-timers-in-javascript
sgTime += interval;
sgDiff = (Date.now() - sgStartTime) - sgTime;
if (running)
{
timerID = setTimeout(updateWaterfall, interval - sgDiff);
}
}
function sgSetLineRate(newRate)
{
if (isNaN(newRate) || newRate > 50 || newRate < 0)
{
console.error("invalid line rate [0 <= lineRate < 50 lines/sec]");
// don't change the lineRate;
}
else if (newRate === 0) // static (one pass) raster
{
lineRate = 0;
}
else
{
lineRate = newRate;
interval = 1000/lineRate; // msec
}
}
this.setLineRate = sgSetLineRate;
function setProperty(propertyName, value)
{
if ((typeof propertyName !== "string")||(value === undefined)) // null is OK, forces default
{
return;
}
switch (propertyName.toLowerCase())
{
case "linerate":
sgSetLineRate(value); // setLine does checks for number etc
break;
case "startbin":
if (!isNaN(value) && value > 0)
{
startOfs = value;
}
break;
case "onscreenparentid":
if (typeof value === "string" && document.getElementById(value))
{
demoCvsId = value;
}
break;
case "colormap":
if (Array.isArray(value) && Array.isArray(value[0]) && value[0].length == 4)
{
colMap = value; // value must be an array of 4 element arrays to get here
if (colMap.length<256) // fill out the remaining colors with last color
{
for (let i=colMap.length; i<256; i++)
{
colMap[i] = colMap[colMap.length-1];
}
}
}
break;
default:
break;
}
}
function verticalNewLine()
{
let tmpImgData, ipBuf8;
if (sgMode == "WF")
{
if (rhc)
{
// shift the current display down 1 line, oldest line drops off
tmpImgData = offScreenCtx.getImageData(0, 0, pxPerLine, lines-1);
offScreenCtx.putImageData(tmpImgData, 0, 1);
}
else
{
// shift the current display up 1 line, oldest line drops off
tmpImgData = offScreenCtx.getImageData(0, 1, pxPerLine, lines-1);
offScreenCtx.putImageData(tmpImgData, 0, 0);
}
}
ipBuf8 = Uint8ClampedArray.from(ipBufAry[0]);
for (let sigVal, rgba, opIdx = 0, ipIdx = startOfs; ipIdx < pxPerLine+startOfs; opIdx += 4, ipIdx++)
{
sigVal = ipBuf8[ipIdx] || 0; // if input line too short add zeros
rgba = colMap[sigVal]; // array of rgba values
// byte reverse so number aa bb gg rr
lineBuf8[opIdx] = rgba[0]; // red
lineBuf8[opIdx+1] = rgba[1]; // green
lineBuf8[opIdx+2] = rgba[2]; // blue
lineBuf8[opIdx+3] = rgba[3]; // alpha
}
offScreenCtx.putImageData(lineImgData, 0, nextLine);
if (sgMode === "RS")
{
incrLine();
// if not static draw a white line in front of the current line to indicate new data point
if (lineRate)
{
offScreenCtx.putImageData(blankImgData, 0, nextLine);
}
}
};
function horizontalNewLine()
{
let tmpImgData, ipBuf8;
if (sgMode == "WF")
{
if (rhc)
{
// shift the current display right 1 line, oldest line drops off
tmpImgData = offScreenCtx.getImageData(0, 0, lines-1, pxPerLine);
offScreenCtx.putImageData(tmpImgData, 1, 0);
}
else
{
// shift the current display left 1 line, oldest line drops off
tmpImgData = offScreenCtx.getImageData(1, 0, lines-1, pxPerLine);
offScreenCtx.putImageData(tmpImgData, 0, 0);
}
}
// refresh the page image (it was just shifted)
pageImgData = offScreenCtx.getImageData(0, 0, lines, pxPerLine);
if (ipBufAry[0].constructor !== Uint8Array)
{
ipBuf8 = Uint8ClampedArray.from(ipBufAry[0]); // clamp input values to 0..255 range
}
else
{
ipBuf8 = ipBufAry[0]; // conversion already done
}
for (let sigVal, rgba, opIdx, ipIdx=0; ipIdx < pxPerLine; ipIdx++)
{
sigVal = ipBuf8[ipIdx+startOfs] || 0; // if input line too short add zeros
rgba = colMap[sigVal]; // array of rgba values
opIdx = 4*((pxPerLine-ipIdx-1)*lines+nextLine);
// byte reverse so number aa bb gg rr
pageImgData.data[opIdx] = rgba[0]; // red
pageImgData.data[opIdx+1] = rgba[1]; // green
pageImgData.data[opIdx+2] = rgba[2]; // blue
pageImgData.data[opIdx+3] = rgba[3]; // alpha
}
if (sgMode === "RS")
{
incrLine();
// if not draw a white line in front of the current line to indicate new data point
if (lineRate)
{
for (let j=0; j < pxPerLine; j++)
{
if (rhc)
{
opIdx = 4*(j*lines+nextLine);
}
else
{
opIdx = 4*((pxPerLine-j-1)*lines+nextLine);
}
// byte reverse so number aa bb gg rr
pageImgData.data[opIdx] = 255; // red
pageImgData.data[opIdx+1] = 255; // green
pageImgData.data[opIdx+2] = 255; // blue
pageImgData.data[opIdx+3] = 255; // alpha
}
}
}
offScreenCtx.putImageData(pageImgData, 0, 0);
};
const sgNewLine = (vert)? verticalNewLine: horizontalNewLine; // function pointers
//===== set all the options ================
for (let prop in opt)
{
// check that this is opt's own property, not inherited from prototype
if (opt.hasOwnProperty(prop))
{
setProperty(prop, opt[prop]);
}
}
// ===== now make the exposed properties and methods ===============
this.newLine = sgNewLine;
this.offScreenCvs = document.createElement("canvas");
if (vert)
{
this.offScreenCvs.setAttribute('width', pxPerLine); // reset canvas pixels width
this.offScreenCvs.setAttribute('height', lines); // don't use style for this
clearImgData = new ImageData(clearBuf8, pxPerLine, lines);
}
else // data written in columns
{
this.offScreenCvs.setAttribute('width', lines); // reset canvas pixels width
this.offScreenCvs.setAttribute('height', pxPerLine); // don't use style for this
clearImgData = new ImageData(clearBuf8, lines, pxPerLine);
}
offScreenCtx = this.offScreenCvs.getContext("2d");
this.clear = function()
{
offScreenCtx.putImageData(clearImgData, 0, 0);
};
this.start = function()
{
sgStartTime = Date.now();
sgTime = 0;
running = true;
updateWaterfall(); // start the update loop
};
this.stop = function()
{
running = false;
if (timerID)
{
clearTimeout(timerID);
}
// reset where the next line is to be written
if (sgMode === "RS")
{
if (vert)
{
nextLine = (rhc)? lines-1 : 0;
}
else
{
nextLine = (rhc)? 0 : lines-1;
}
}
else // WF
{
nextLine = (rhc)? 0 : lines-1;
}
};
// make a white line, it will show the input line for RS displays
blankBuf8.fill(255);
// make a full canvas of the color map 0 values
for (let i=0; i<pxPerLine*lines*4; i+=4)
{
// byte reverse so number aa bb gg rr
clearBuf8[i] = colMap[0][0]; // red
clearBuf8[i+1] = colMap[0][1]; // green
clearBuf8[i+2] = colMap[0][2]; // blue
clearBuf8[i+3] = colMap[0][3]; // alpha
}
// for diagnostics only
if (typeof(demoCvsId) == "string")
{
document.getElementById(demoCvsId).appendChild(this.offScreenCvs);
}
// initialize the direction and first line position
this.stop();
// everything is set
// if dynamic, wait for the start or newLine methods to be called
}
}())