mirror of https://github.com/DJ2LS/FreeDATA
608 lines
19 KiB
JavaScript
608 lines
19 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);
|
|
} // data written in columns
|
|
else {
|
|
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;
|
|
}
|
|
} // WF
|
|
else {
|
|
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
|
|
}
|
|
})();
|