Skip to content

Commit

Permalink
Added frame buffer feature
Browse files Browse the repository at this point in the history
  • Loading branch information
Amanmahe committed Dec 6, 2024
1 parent 4e1b362 commit aa7d423
Show file tree
Hide file tree
Showing 8 changed files with 258 additions and 190 deletions.
2 changes: 0 additions & 2 deletions Version.tsx

This file was deleted.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "Chords",
"version": "0.1.0",
"version": "2.2.0a",
"private": true,
"scripts": {
"dev": "next dev",
Expand Down
133 changes: 105 additions & 28 deletions src/components/Canvas.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,8 @@ interface CanvasProps {
isDisplay: boolean;
canvasCount?: number;
Zoom: number;
}
interface Batch {
time: number;
values: number[];
currentSnapshot: number;
snapShotRef: React.MutableRefObject<boolean[]>;
}

const Canvas = forwardRef(
Expand All @@ -30,6 +28,8 @@ const Canvas = forwardRef(
isDisplay,
canvasCount = 6, // default value in case not provided
Zoom,
currentSnapshot,
snapShotRef,
}: CanvasProps,
ref
) => {
Expand All @@ -45,6 +45,13 @@ const Canvas = forwardRef(
const sweepPositions = useRef<number[]>(new Array(6).fill(0)); // Array for sweep positions
const currentSweepPos = useRef<number[]>(new Array(6).fill(0)); // Array for sweep positions
let numX: number;
const array3DRef = useRef<number[][][]>(
Array.from({ length: 6 }, () =>
Array.from({ length: 6 }, () => Array())
)
);
const activebuffer = useRef(0); // Initialize useRef with 0
const indicesRef = useRef<number[]>([]); // Use `useRef` for indices

const getpoints = useCallback((bits: BitSelection): number => {
switch (bits) {
Expand All @@ -57,6 +64,41 @@ const Canvas = forwardRef(
}
}, []);
numX = getpoints(selectedBits);
const prevCanvasCountRef = useRef<number>(canvasCount);

const processIncomingData = (incomingData: number[]) => {
for (let i = 0; i < canvasCount; i++) {

if (prevCanvasCountRef.current !== canvasCount) {
// Clear the entire buffer if canvasCount changes
for (let bufferIndex = 0; bufferIndex < 6; bufferIndex++) {
array3DRef.current[bufferIndex] = Array.from({ length: canvasCount }, () => []);
snapShotRef.current[bufferIndex] = false;
}
prevCanvasCountRef.current = canvasCount;
}
if (array3DRef.current[activebuffer.current][i].length >= numX) {
array3DRef.current[activebuffer.current][i] = [];
}
array3DRef.current[activebuffer.current][i].push(incomingData[i]);

if (array3DRef.current[activebuffer.current][i].length < numX && !pauseRef.current) {
array3DRef.current[activebuffer.current][i] = [];
}
}


if (array3DRef.current[activebuffer.current][0].length >= numX) {
snapShotRef.current[activebuffer.current] = true;
activebuffer.current = (activebuffer.current + 1) % 6;
snapShotRef.current[activebuffer.current] = false;
}
indicesRef.current = [];
for (let i = 1; i < 6; i++) {
indicesRef.current.push((activebuffer.current - i + 6) % 6);
}
};

useEffect(() => {
setNumChannels(canvasCount);
}, [canvasCount]);
Expand All @@ -66,11 +108,14 @@ const Canvas = forwardRef(
() => ({
updateData(data: number[]) {
// Reset the sweep positions if the number of channels has changed
if (currentSweepPos.current.length !== numChannels) {
if (currentSweepPos.current.length !== numChannels || !pauseRef.current) {
currentSweepPos.current = new Array(numChannels).fill(0);
sweepPositions.current = new Array(numChannels).fill(0);
}
updatePlots(data, Zoom);
if (pauseRef.current) {
processIncomingData(data);
updatePlots(data, Zoom);
}
if (previousCounter !== null) {
// If there was a previous counter value
const expectedCounter: number = (previousCounter + 1) % 256; // Calculate the expected counter value
Expand Down Expand Up @@ -136,7 +181,7 @@ const Canvas = forwardRef(
// Append grid lines to the wrapper
canvasWrapper.appendChild(gridLineX);
}
const horizontalline=50;
const horizontalline = 50;
for (let j = 1; j < horizontalline; j++) {
const gridLineY = document.createElement("div");
gridLineY.className = "absolute bg-[rgb(128,128,128)]";
Expand All @@ -158,8 +203,8 @@ const Canvas = forwardRef(

const canvas = document.createElement("canvas");
canvas.id = `canvas${i + 1}`;
canvas.width = canvasContainerRef.current.clientWidth ;
const canvasHeight = (canvasContainerRef.current.clientHeight / numChannels) ;
canvas.width = canvasContainerRef.current.clientWidth;
const canvasHeight = (canvasContainerRef.current.clientHeight / numChannels);
canvas.height = canvasHeight;
canvas.className = "w-full h-full block rounded-xl";

Expand Down Expand Up @@ -259,31 +304,63 @@ const Canvas = forwardRef(
createCanvases();
}, [numChannels, theme]);

const getValue = useCallback((bits: BitSelection): number => {
switch (bits) {
case "ten":
return 10;
case "twelve":
return 12;
case "fourteen":
return 14;
default:
return 0; // Or any other fallback value you'd like
}
}, []);

const animate = useCallback(() => {
if (pauseRef.current) {
if (!pauseRef.current) {
// If paused, show the buffered data (this part runs when paused)
updatePlotSnapshot(currentSnapshot);
} else {
// If not paused, continue with normal updates (e.g., real-time plotting)
wglPlots.forEach((wglp) => wglp.update());
requestAnimationFrame(animate);
requestAnimationFrame(animate); // Continue the animation loop
}
}, [wglPlots, pauseRef]);
}, [currentSnapshot, numX, pauseRef.current, wglPlots, Zoom]);


const updatePlotSnapshot = (currentSnapshot: number) => {
for (let i = 0; i < canvasCount; i++) {
wglPlots.forEach((wglp, index) => {
if (wglp) {
try {
wglp.gScaleY = Zoom; // Adjust the zoom value
} catch (error) {
console.error(
`Error setting gScaleY for WebglPlot instance at index ${index}:`,
error
);
}
} else {
console.warn(`WebglPlot instance at index ${index} is undefined.`);
}
});
if (
array3DRef.current &&
indicesRef.current &&
indicesRef.current[currentSnapshot] !== undefined &&
array3DRef.current[indicesRef.current[currentSnapshot]] !== undefined
) {
const yArray = new Float32Array(array3DRef.current[indicesRef.current[currentSnapshot]][i]);
// Check if the line exists
const line = linesRef.current[i];
if (line) {
line.shiftAdd(yArray); // Efficiently add new points
} else {
console.error(`Line at index ${i} is undefined or null.`);
}

} else {
console.warn("One of the references is undefined or invalid");
}


useEffect(() => {
if (pauseRef.current) {
requestAnimationFrame(animate);
}
}, [pauseRef.current, animate]);
wglPlots.forEach((wglp) => wglp.update()); // Redraw the plots
};

useEffect(() => {
requestAnimationFrame(animate);

}, [animate]);

useEffect(() => {
const handleResize = () => {
Expand Down
Loading

0 comments on commit aa7d423

Please sign in to comment.