Skip to content

Commit cf01367

Browse files
author
Ritika Mishra
committed
improved code for frame feature
1 parent dea3a17 commit cf01367

File tree

3 files changed

+84
-77
lines changed

3 files changed

+84
-77
lines changed

‎src/components/Canvas.tsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const Canvas = forwardRef(
3939
let previousCounter: number | null = null; // Variable to store the previous counter value for loss detection
4040
const canvasContainerRef = useRef<HTMLDivElement>(null);
4141
const [numChannels, setNumChannels] = useState<number>(canvasCount);
42-
const [numX, setNumX] = useState<number>(2000); // To track the calculated value
42+
const numXRef = useRef<number>(2000); // To track the calculated value
4343
const [canvases, setCanvases] = useState<HTMLCanvasElement[]>([]);
4444
const [samplingRate,setSamplingRate]=useState<number>(500);
4545
const [wglPlots, setWglPlots] = useState<WebglPlot[]>([]);
@@ -71,8 +71,9 @@ const Canvas = forwardRef(
7171

7272

7373
useEffect(() => {
74-
setNumX(getpoints(selectedBits) * currentValue);
75-
}, [samplingRate, currentValue]);
74+
numXRef.current= getpoints(selectedBits) * currentValue;
75+
76+
}, [ currentValue]);
7677

7778
const prevCanvasCountRef = useRef<number>(canvasCount);
7879

@@ -87,18 +88,18 @@ const Canvas = forwardRef(
8788
}
8889
prevCanvasCountRef.current = canvasCount;
8990
}
90-
if (array3DRef.current[activebuffer.current][i].length >= numX) {
91+
if (array3DRef.current[activebuffer.current][i].length >= numXRef.current) {
9192
array3DRef.current[activebuffer.current][i] = [];
9293
}
9394
array3DRef.current[activebuffer.current][i].push(incomingData[i + 1]);
9495

95-
if (array3DRef.current[activebuffer.current][i].length < numX && !pauseRef.current) {
96+
if (array3DRef.current[activebuffer.current][i].length < numXRef.current && !pauseRef.current) {
9697
array3DRef.current[activebuffer.current][i] = [];
9798
}
9899
}
99100

100101

101-
if (array3DRef.current[activebuffer.current][0].length >= numX) {
102+
if (array3DRef.current[activebuffer.current][0].length >= numXRef.current) {
102103
snapShotRef.current[activebuffer.current] = true;
103104
activebuffer.current = (activebuffer.current + 1) % 6;
104105
snapShotRef.current[activebuffer.current] = false;
@@ -185,7 +186,7 @@ const Canvas = forwardRef(
185186
const opacityLightMajor = "0.4"; // Opacity for every 5th line in light theme
186187
const opacityLightMinor = "0.1"; // Opacity for other lines in light theme
187188
const distanceminor = samplingRate * 0.04;
188-
const numGridLines = 2000 / distanceminor;
189+
const numGridLines = getpoints(selectedBits)*4 / distanceminor;
189190
for (let j = 1; j < numGridLines; j++) {
190191
const gridLineX = document.createElement("div");
191192
gridLineX.className = "absolute bg-[rgb(128,128,128)]";
@@ -241,10 +242,10 @@ const Canvas = forwardRef(
241242
const wglp = new WebglPlot(canvas);
242243
newWglPlots.push(wglp);
243244
wglp.gScaleY = Zoom;
244-
const line = new WebglLine(getLineColor(i, theme), numX);
245+
const line = new WebglLine(getLineColor(i, theme), numXRef.current);
245246
wglp.gOffsetY = 0;
246247
line.offsetY = 0;
247-
line.lineSpaceX(-1, 2 / numX);
248+
line.lineSpaceX(-1, 2 / numXRef.current);
248249

249250
wglp.addLine(line);
250251
newLines.push(line);
@@ -309,7 +310,7 @@ const Canvas = forwardRef(
309310
line.setY(currentSweepPos.current[i] % line.numPoints, data[i + 1]);
310311

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

315316
// Increment the sweep position for the current line
@@ -333,7 +334,7 @@ const Canvas = forwardRef(
333334
wglPlots.forEach((wglp) => wglp.update());
334335
requestAnimationFrame(animate); // Continue the animation loop
335336
}
336-
}, [currentSnapshot, numX, pauseRef.current, wglPlots, Zoom]);
337+
}, [currentSnapshot, numXRef.current, pauseRef.current, wglPlots, Zoom]);
337338

338339

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

‎src/components/Connection.tsx‎

Lines changed: 67 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,13 @@ const Connection: React.FC<ConnectionProps> = ({
131131
setCanvasCount(canvasCount + 1); // Increase canvas count up to 6
132132
}
133133
};
134+
135+
const increaseValue = () => {
136+
if(currentValue < 10){
137+
setCurrentValue(currentValue + 1);
138+
console.log(currentValue);
139+
}
140+
};
134141

135142
const enabledClicks = (snapShotRef.current?.filter(Boolean).length ?? 0) - 1;
136143

@@ -144,13 +151,9 @@ const Connection: React.FC<ConnectionProps> = ({
144151
SetcurrentSnapshot(currentSnapshot + 1);
145152
}
146153
};
147-
const decreaseValue = () => {
148-
setCurrentValue(currentValue - 1);
149-
};
154+
150155

151-
const increaseValue = () => {
152-
setCurrentValue(currentValue + 1);
153-
};
156+
154157
// Handle right arrow click (reset count and disable button if needed)
155158
const handleNextSnapshot = () => {
156159
if (clickCount > 0) {
@@ -166,6 +169,13 @@ const Connection: React.FC<ConnectionProps> = ({
166169
setCanvasCount(canvasCount - 1); // Decrease canvas count but not below 1
167170
}
168171
};
172+
const decreaseValue = () => {
173+
if(currentValue > 1){
174+
setCurrentValue(currentValue - 1);
175+
}
176+
console.log(currentValue);
177+
};
178+
169179
const toggleShowAllChannels = () => {
170180
if (canvasCount === (detectedBitsRef.current == "twelve" ? 3 : 6)) {
171181
setCanvasCount(1); // If canvasCount is 6, reduce it to 1
@@ -270,7 +280,6 @@ const Connection: React.FC<ConnectionProps> = ({
270280

271281
if (zipBlob) {
272282
saveAs(zipBlob, 'ChordsWeb.zip');
273-
toast.success("File downloaded suceesfully.")
274283
} else if (error) {
275284
console.error(error);
276285
}
@@ -822,7 +831,6 @@ const Connection: React.FC<ConnectionProps> = ({
822831

823832
transaction.oncomplete = () => {
824833
console.log("File deletion transaction completed.");
825-
toast.success("File deleted successfully.");
826834
};
827835

828836
transaction.onerror = () => {
@@ -911,20 +919,20 @@ const Connection: React.FC<ConnectionProps> = ({
911919
{/* Left-aligned section */}
912920
<div className="absolute left-4 flex items-center mx-0 px-0 space-x-1">
913921
{isRecordingRef.current && (
914-
<div className="flex items-center space-x-1 w-min">
915-
<button className="flex items-center justify-center px-1 py-2 select-none min-w-20 bg-primary text-destructive whitespace-nowrap rounded-xl"
922+
<div className="flex items-center space-x-1 w-min ml-2">
923+
<button className="flex items-center justify-center px-3 py-2 select-none min-w-20 bg-primary text-destructive whitespace-nowrap rounded-xl"
916924
>
917925
{formatTime(recordingElapsedTime)}
918926
</button>
919-
<Separator orientation="vertical" className="bg-primary h-9 " />
927+
<Separator orientation="vertical" className="bg-primary h-9 ml-2" />
920928
<div>
921929
<Popover
922930
open={isEndTimePopoverOpen}
923931
onOpenChange={setIsEndTimePopoverOpen}
924932
>
925933
<PopoverTrigger asChild>
926934
<Button
927-
className="flex items-center justify-center px-1 py-2 select-none min-w-10 text-destructive whitespace-nowrap rounded-xl"
935+
className="flex items-center justify-center px-3 py-2 select-none min-w-12 text-destructive whitespace-nowrap rounded-xl"
928936
variant="destructive"
929937
>
930938
{endTimeRef.current === null ? (
@@ -989,7 +997,7 @@ const Connection: React.FC<ConnectionProps> = ({
989997
<TooltipProvider>
990998
<Tooltip>
991999
<TooltipTrigger asChild>
992-
<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}>
1000+
<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}>
9931001
{isConnected ? (
9941002
<>
9951003
Disconnect
@@ -1518,60 +1526,53 @@ const Connection: React.FC<ConnectionProps> = ({
15181526
</Tooltip>
15191527
</TooltipProvider>
15201528
)}
1521-
{isConnected && (
1529+
{isConnected && (
15221530
<TooltipProvider>
1523-
<Tooltip>
1524-
<div className="flex items-center mx-0 px-0">
1525-
{/* Decrease value Button */}
1526-
<Tooltip>
1527-
<TooltipTrigger asChild>
1528-
<Button
1529-
className="rounded-xl rounded-r-none"
1530-
onClick={decreaseValue}
1531-
disabled={currentValue === 1}
1532-
>
1533-
<Minus size={16} />
1534-
</Button>
1535-
</TooltipTrigger>
1536-
<TooltipContent>
1537-
<p>Decrease value</p>
1538-
</TooltipContent>
1539-
</Tooltip>
1540-
1541-
<Separator orientation="vertical" className="h-full" />
1542-
1543-
{/* Show Value Display */}
1544-
<Tooltip>
1545-
<TooltipTrigger asChild>
1546-
<Button className="flex items-center justify-center px-3 py-2 rounded-none select-none">
1547-
{currentValue} Sec
1548-
</Button>
1549-
</TooltipTrigger>
1550-
<TooltipContent>
1551-
<p>Value: {currentValue}</p>
1552-
</TooltipContent>
1553-
</Tooltip>
1554-
1555-
<Separator orientation="vertical" className="h-full" />
1556-
1557-
{/* Increase value Button */}
1558-
<Tooltip>
1559-
<TooltipTrigger asChild>
1560-
<Button
1561-
className="rounded-xl rounded-l-none"
1562-
onClick={increaseValue}
1563-
disabled={currentValue === 10}
1564-
>
1565-
<Plus size={16} />
1566-
</Button>
1567-
</TooltipTrigger>
1568-
<TooltipContent>
1569-
<p>Increase value</p>
1570-
</TooltipContent>
1571-
</Tooltip>
1572-
</div>
1573-
</Tooltip>
1574-
</TooltipProvider>
1531+
<Tooltip>
1532+
<div className="flex items-center mx-0 px-0">
1533+
{/* Decrease Current Value */}
1534+
<Tooltip>
1535+
<TooltipTrigger asChild>
1536+
<Button
1537+
className="rounded-xl rounded-r-none"
1538+
onClick={decreaseValue}
1539+
disabled={currentValue == 1}
1540+
>
1541+
<Minus size={16} />
1542+
</Button>
1543+
</TooltipTrigger>
1544+
</Tooltip>
1545+
1546+
<Separator orientation="vertical" className="h-full" />
1547+
1548+
{/* Toggle All Channels Button */}
1549+
<Tooltip>
1550+
<TooltipTrigger asChild>
1551+
<Button
1552+
className="flex items-center justify-center px-3 py-2 rounded-none select-none"
1553+
>
1554+
{currentValue} Sec
1555+
</Button>
1556+
</TooltipTrigger>
1557+
</Tooltip>
1558+
1559+
<Separator orientation="vertical" className="h-full" />
1560+
1561+
{/* Increase Canvas Button */}
1562+
<Tooltip>
1563+
<TooltipTrigger asChild>
1564+
<Button
1565+
className="rounded-xl rounded-l-none"
1566+
onClick={increaseValue}
1567+
disabled={currentValue >= 10 }
1568+
>
1569+
<Plus size={16} />
1570+
</Button>
1571+
</TooltipTrigger>
1572+
</Tooltip>
1573+
</div>
1574+
</Tooltip>
1575+
</TooltipProvider>
15751576
)}
15761577
</div>
15771578
</div>

‎src/components/boards.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ export const BoardsList = Object.freeze([
99
field_pid: "24577",
1010
bits: "ten",
1111
},
12+
{
13+
name: "Arduino Uno R3",
14+
field_pid: "579",
15+
bits: "ten",
16+
},
1217
{
1318
name: "Arduino Due",
1419
field_pid: "61",

0 commit comments

Comments
 (0)