Skip to content

Commit f947aaf

Browse files
lorforlinuxlorforlinux
authored
Merge pull request #65 from Ritika8081/web-worker
Updated code to provide more control over data plotting.
2 parents 61e7ae3 + bbcacb4 commit f947aaf

File tree

6 files changed

+168
-31
lines changed

6 files changed

+168
-31
lines changed

‎src/components/Canvas.tsx‎

Lines changed: 35 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ interface CanvasProps {
1515
selectedBits: BitSelection;
1616
isDisplay: boolean;
1717
canvasCount?: number;
18+
currentValue?:number;
1819
Zoom: number;
1920
currentSnapshot: number;
2021
snapShotRef: React.MutableRefObject<boolean[]>;
@@ -27,6 +28,7 @@ const Canvas = forwardRef(
2728
selectedBits,
2829
isDisplay,
2930
canvasCount = 6, // default value in case not provided
31+
currentValue=4,
3032
Zoom,
3133
currentSnapshot,
3234
snapShotRef,
@@ -37,14 +39,14 @@ const Canvas = forwardRef(
3739
let previousCounter: number | null = null; // Variable to store the previous counter value for loss detection
3840
const canvasContainerRef = useRef<HTMLDivElement>(null);
3941
const [numChannels, setNumChannels] = useState<number>(canvasCount);
42+
const numXRef = useRef<number>(2000); // To track the calculated value
4043
const [canvases, setCanvases] = useState<HTMLCanvasElement[]>([]);
44+
const [samplingRate,setSamplingRate]=useState<number>(500);
4145
const [wglPlots, setWglPlots] = useState<WebglPlot[]>([]);
4246
const [lines, setLines] = useState<WebglLine[]>([]);
4347
const linesRef = useRef<WebglLine[]>([]);
44-
const samplingRate = 500; // Set the sampling rate in Hz
4548
const sweepPositions = useRef<number[]>(new Array(6).fill(0)); // Array for sweep positions
4649
const currentSweepPos = useRef<number[]>(new Array(6).fill(0)); // Array for sweep positions
47-
let numX: number;
4850
const array3DRef = useRef<number[][][]>(
4951
Array.from({ length: 6 }, () =>
5052
Array.from({ length: 6 }, () => Array())
@@ -53,21 +55,26 @@ const Canvas = forwardRef(
5355
const activebuffer = useRef(0); // Initialize useRef with 0
5456
const indicesRef = useRef<number[]>([]); // Use `useRef` for indices
5557

58+
//select point
5659
const getpoints = useCallback((bits: BitSelection): number => {
5760
switch (bits) {
5861
case "ten":
59-
return samplingRate * 2;
62+
return 250;
6063
case "twelve":
61-
return samplingRate * 4;
6264
case "fourteen":
63-
return samplingRate * 4;
6465
case "sixteen":
65-
return samplingRate * 4;
66+
return 500;
6667
default:
67-
return 0; // Or any other fallback value you'd like
68+
return 500; // Default fallback
6869
}
6970
}, []);
70-
numX = getpoints(selectedBits);
71+
72+
73+
useEffect(() => {
74+
numXRef.current= (getpoints(selectedBits) * currentValue)+1;
75+
76+
}, [ currentValue]);
77+
7178
const prevCanvasCountRef = useRef<number>(canvasCount);
7279

7380
const processIncomingData = (incomingData: number[]) => {
@@ -81,18 +88,18 @@ const Canvas = forwardRef(
8188
}
8289
prevCanvasCountRef.current = canvasCount;
8390
}
84-
if (array3DRef.current[activebuffer.current][i].length >= numX) {
91+
if (array3DRef.current[activebuffer.current][i].length >= numXRef.current) {
8592
array3DRef.current[activebuffer.current][i] = [];
8693
}
8794
array3DRef.current[activebuffer.current][i].push(incomingData[i + 1]);
8895

89-
if (array3DRef.current[activebuffer.current][i].length < numX && !pauseRef.current) {
96+
if (array3DRef.current[activebuffer.current][i].length < numXRef.current && !pauseRef.current) {
9097
array3DRef.current[activebuffer.current][i] = [];
9198
}
9299
}
93100

94101

95-
if (array3DRef.current[activebuffer.current][0].length >= numX) {
102+
if (array3DRef.current[activebuffer.current][0].length >= numXRef.current) {
96103
snapShotRef.current[activebuffer.current] = true;
97104
activebuffer.current = (activebuffer.current + 1) % 6;
98105
snapShotRef.current[activebuffer.current] = false;
@@ -107,6 +114,14 @@ const Canvas = forwardRef(
107114
setNumChannels(canvasCount);
108115
}, [canvasCount]);
109116

117+
118+
useEffect(() => {
119+
// Reset when currentValue changes
120+
currentSweepPos.current = new Array(numChannels).fill(0);
121+
sweepPositions.current = new Array(numChannels).fill(0);
122+
}, [currentValue]);
123+
124+
110125
useImperativeHandle(
111126
ref,
112127
() => ({
@@ -116,6 +131,7 @@ const Canvas = forwardRef(
116131
currentSweepPos.current = new Array(numChannels).fill(0);
117132
sweepPositions.current = new Array(numChannels).fill(0);
118133
}
134+
119135
if (pauseRef.current) {
120136
processIncomingData(data);
121137
updatePlots(data, Zoom);
@@ -133,7 +149,7 @@ const Canvas = forwardRef(
133149
previousCounter = data[0]; // Update the previous counter with the current counter
134150
},
135151
}),
136-
[Zoom, numChannels]
152+
[Zoom, numChannels,currentValue]
137153
);
138154

139155
const createCanvases = () => {
@@ -170,7 +186,7 @@ const Canvas = forwardRef(
170186
const opacityLightMajor = "0.4"; // Opacity for every 5th line in light theme
171187
const opacityLightMinor = "0.1"; // Opacity for other lines in light theme
172188
const distanceminor = samplingRate * 0.04;
173-
const numGridLines = numX / distanceminor;
189+
const numGridLines = getpoints(selectedBits)*4 / distanceminor;
174190
for (let j = 1; j < numGridLines; j++) {
175191
const gridLineX = document.createElement("div");
176192
gridLineX.className = "absolute bg-[rgb(128,128,128)]";
@@ -226,10 +242,10 @@ const Canvas = forwardRef(
226242
const wglp = new WebglPlot(canvas);
227243
newWglPlots.push(wglp);
228244
wglp.gScaleY = Zoom;
229-
const line = new WebglLine(getLineColor(i, theme), numX);
245+
const line = new WebglLine(getLineColor(i, theme), numXRef.current);
230246
wglp.gOffsetY = 0;
231247
line.offsetY = 0;
232-
line.lineSpaceX(-1, 2 / numX);
248+
line.lineSpaceX(-1, 2 / numXRef.current);
233249

234250
wglp.addLine(line);
235251
newLines.push(line);
@@ -294,19 +310,19 @@ const Canvas = forwardRef(
294310
line.setY(currentSweepPos.current[i] % line.numPoints, data[i + 1]);
295311

296312
// Clear the next point to create a gap (optional, for visual effect)
297-
const clearPosition = (currentSweepPos.current[i] + (numX / 100)) % line.numPoints;
313+
const clearPosition = (currentSweepPos.current[i] + (numXRef.current / 100)) % line.numPoints;
298314
line.setY(clearPosition, NaN);
299315

300316
// Increment the sweep position for the current line
301317
sweepPositions.current[i] = (currentSweepPos.current[i] + 1) % line.numPoints;
302318
});
303319
},
304-
[lines, wglPlots, numChannels, theme]
320+
[lines, wglPlots, numChannels, theme,currentValue]
305321
);
306322

307323
useEffect(() => {
308324
createCanvases();
309-
}, [numChannels, theme]);
325+
}, [numChannels, theme,currentValue]);
310326

311327

312328
const animate = useCallback(() => {
@@ -318,7 +334,7 @@ const Canvas = forwardRef(
318334
wglPlots.forEach((wglp) => wglp.update());
319335
requestAnimationFrame(animate); // Continue the animation loop
320336
}
321-
}, [currentSnapshot, numX, pauseRef.current, wglPlots, Zoom]);
337+
}, [currentSnapshot, numXRef.current, pauseRef.current, wglPlots, Zoom]);
322338

323339

324340
const updatePlotSnapshot = (currentSnapshot: number) => {

‎src/components/Connection.tsx‎

Lines changed: 79 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ interface ConnectionProps {
5555
setCanvasCount: React.Dispatch<React.SetStateAction<number>>; // Specify type for setCanvasCount
5656
canvasCount: number;
5757
channelCount: number;
58+
currentValue:number;
59+
setCurrentValue: React.Dispatch<React.SetStateAction<number>>;
5860
SetZoom: React.Dispatch<React.SetStateAction<number>>;
5961
SetcurrentSnapshot: React.Dispatch<React.SetStateAction<number>>;
6062
currentSnapshot: number;
@@ -76,6 +78,8 @@ const Connection: React.FC<ConnectionProps> = ({
7678
snapShotRef,
7779
SetZoom,
7880
Zoom,
81+
currentValue,
82+
setCurrentValue,
7983
}) => {
8084
const [isConnected, setIsConnected] = useState<boolean>(false); // State to track if the device is connected
8185
const isConnectedRef = useRef<boolean>(false); // Ref to track if the device is connected
@@ -127,6 +131,12 @@ const Connection: React.FC<ConnectionProps> = ({
127131
}
128132
};
129133

134+
const increaseValue = () => {
135+
if(currentValue < 10){
136+
setCurrentValue(currentValue + 1);
137+
}
138+
};
139+
130140
const enabledClicks = (snapShotRef.current?.filter(Boolean).length ?? 0) - 1;
131141

132142
// Enable/Disable left arrow button
@@ -155,6 +165,12 @@ const Connection: React.FC<ConnectionProps> = ({
155165
setCanvasCount(canvasCount - 1); // Decrease canvas count but not below 1
156166
}
157167
};
168+
const decreaseValue = () => {
169+
if(currentValue > 1){
170+
setCurrentValue(currentValue - 1);
171+
}
172+
};
173+
158174
const toggleShowAllChannels = () => {
159175
if (canvasCount === (detectedBitsRef.current == "twelve" ? 3 : 6)) {
160176
setCanvasCount(1); // If canvasCount is 6, reduce it to 1
@@ -218,6 +234,14 @@ const Connection: React.FC<ConnectionProps> = ({
218234
});
219235
}
220236
};
237+
const setCanvasCountInWorker = (canvasCount:number) => {
238+
if (!workerRef.current) {
239+
initializeWorker();
240+
}
241+
// Send canvasCount independently to the worker
242+
workerRef.current?.postMessage({ action: 'setCanvasCount', canvasCount: canvasnumbersRef.current });
243+
};
244+
setCanvasCountInWorker(canvasnumbersRef.current);
221245

222246
const processBuffer = async (bufferIndex: number, canvasCount: number) => {
223247
if (!workerRef.current) {
@@ -890,20 +914,20 @@ const Connection: React.FC<ConnectionProps> = ({
890914
{/* Left-aligned section */}
891915
<div className="absolute left-4 flex items-center mx-0 px-0 space-x-1">
892916
{isRecordingRef.current && (
893-
<div className="flex items-center space-x-1 w-min ml-2">
894-
<button className="flex items-center justify-center px-3 py-2 select-none min-w-20 bg-primary text-destructive whitespace-nowrap rounded-xl"
917+
<div className="flex items-center space-x-1 w-min">
918+
<button className="flex items-center justify-center px-1 py-2 select-none min-w-20 bg-primary text-destructive whitespace-nowrap rounded-xl"
895919
>
896920
{formatTime(recordingElapsedTime)}
897921
</button>
898-
<Separator orientation="vertical" className="bg-primary h-9 ml-2" />
922+
<Separator orientation="vertical" className="bg-primary h-9 " />
899923
<div>
900924
<Popover
901925
open={isEndTimePopoverOpen}
902926
onOpenChange={setIsEndTimePopoverOpen}
903927
>
904928
<PopoverTrigger asChild>
905929
<Button
906-
className="flex items-center justify-center px-3 py-2 select-none min-w-12 text-destructive whitespace-nowrap rounded-xl"
930+
className="flex items-center justify-center px-1 py-2 select-none min-w-10 text-destructive whitespace-nowrap rounded-xl"
907931
variant="destructive"
908932
>
909933
{endTimeRef.current === null ? (
@@ -968,7 +992,7 @@ const Connection: React.FC<ConnectionProps> = ({
968992
<TooltipProvider>
969993
<Tooltip>
970994
<TooltipTrigger asChild>
971-
<Button className="flex items-center justify-center gap-1 py-2 px-6 sm:py-3 sm:px-8 rounded-xl font-semibold" onClick={handleClick}>
995+
<Button className="flex items-center justify-center gap-1 py-2 px-2 sm:py-3 sm:px-4 rounded-xl font-semibold" onClick={handleClick}>
972996
{isConnected ? (
973997
<>
974998
Disconnect
@@ -1497,9 +1521,58 @@ const Connection: React.FC<ConnectionProps> = ({
14971521
</Tooltip>
14981522
</TooltipProvider>
14991523
)}
1524+
{isConnected && (
1525+
<TooltipProvider>
1526+
<Tooltip>
1527+
<div className="flex items-center mx-0 px-0">
1528+
{/* Decrease Current Value */}
1529+
<Tooltip>
1530+
<TooltipTrigger asChild>
1531+
<Button
1532+
className="rounded-xl rounded-r-none"
1533+
onClick={decreaseValue}
1534+
disabled={currentValue == 1}
1535+
>
1536+
<Minus size={16} />
1537+
</Button>
1538+
</TooltipTrigger>
1539+
</Tooltip>
1540+
1541+
<Separator orientation="vertical" className="h-full" />
1542+
1543+
{/* Toggle All Channels Button */}
1544+
<Tooltip>
1545+
<TooltipTrigger asChild>
1546+
<Button
1547+
className="flex items-center justify-center px-3 py-2 rounded-none select-none"
1548+
>
1549+
{currentValue} Sec
1550+
</Button>
1551+
</TooltipTrigger>
1552+
</Tooltip>
1553+
1554+
<Separator orientation="vertical" className="h-full" />
1555+
1556+
{/* Increase Canvas Button */}
1557+
<Tooltip>
1558+
<TooltipTrigger asChild>
1559+
<Button
1560+
className="rounded-xl rounded-l-none"
1561+
onClick={increaseValue}
1562+
disabled={currentValue >= 10}
1563+
>
1564+
<Plus size={16} />
1565+
</Button>
1566+
</TooltipTrigger>
1567+
</Tooltip>
1568+
</div>
1569+
</Tooltip>
1570+
</TooltipProvider>
1571+
)}
15001572
</div>
15011573
</div>
15021574
);
15031575
};
15041576

1505-
export default Connection;
1577+
export default Connection;
1578+

‎src/components/DataPass.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const DataPass = () => {
1313
const [isConnected, setIsConnected] = useState<boolean>(false); // Connection status
1414
const [isDisplay, setIsDisplay] = useState<boolean>(true); // Display state
1515
const [canvasCount, setCanvasCount] = useState<number>(1); // Number of canvases
16+
const [currentValue, setCurrentValue] = useState<number>(4); // To track the current index to show
1617
const [channelCount, setChannelCount] = useState<number>(1); // Number of channels
1718
const canvasRef = useRef<any>(null); // Create a ref for the Canvas component
1819
let previousCounter: number | null = null; // Variable to store the previous counter value for loss detection
@@ -55,6 +56,7 @@ const DataPass = () => {
5556
selectedBits={selectedBits}
5657
isDisplay={isDisplay}
5758
canvasCount={canvasCount} // Pass canvas count
59+
currentValue={currentValue}
5860
/>
5961
) : (
6062
<Steps />
@@ -70,6 +72,8 @@ const DataPass = () => {
7072
setIsDisplay={setIsDisplay}
7173
setCanvasCount={setCanvasCount}
7274
canvasCount={canvasCount}
75+
setCurrentValue={setCurrentValue}
76+
currentValue={currentValue}
7377
channelCount={channelCount}
7478
SetZoom={SetZoom}
7579
SetcurrentSnapshot={SetcurrentSnapshot}

‎tsconfig.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"noEmit": true,
1313
"esModuleInterop": true,
1414
"module": "esnext",
15-
"moduleResolution": "bundler",
15+
"moduleResolution": "node",
1616
"resolveJsonModule": true,
1717
"isolatedModules": true,
1818
"jsx": "preserve",
@@ -22,17 +22,18 @@
2222
"name": "next"
2323
}
2424
],
25+
"baseUrl": ".",
2526
"paths": {
2627
"@/*": [
27-
"./src/*"
28+
"src/*",
29+
"workers/*"
2830
]
2931
}
3032
},
3133
"include": [
3234
"next-env.d.ts",
3335
"**/*.ts",
3436
".next/types/**/*.ts",
35-
"**/*.ts",
3637
"**/*.tsx",
3738
"out/types/**/*.ts"
3839
],

0 commit comments

Comments
 (0)