Skip to content

Commit d5fb7a7

Browse files
author
Ritika Mishra
committed
update functionality to disable channel and timebase setting while pause
1 parent 2e491a2 commit d5fb7a7

File tree

2 files changed

+85
-89
lines changed

2 files changed

+85
-89
lines changed

‎src/components/Canvas.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,8 @@ const Canvas = forwardRef(
8686
const prevCanvasCountRef = useRef<number>(canvasCount);
8787

8888
const processIncomingData = (incomingData: number[]) => {
89+
if (pauseRef.current) return; // Skip processing if paused
90+
8991
const currentBuffer = array3DRef.current[activeBufferIndexRef.current];
9092

9193
// Handle canvas count changes and reset buffers
@@ -115,8 +117,8 @@ const Canvas = forwardRef(
115117

116118
// Update data indices for referencing past buffers
117119
dataIndicesRef.current = Array.from(
118-
{ length: 5 },
119-
(_, i) => (activeBufferIndexRef.current - i - 1 + 6) % 6
120+
{ length: 6 },
121+
(_, i) => (activeBufferIndexRef.current - i + 6) % 6
120122
);
121123
};
122124

‎src/components/Connection.tsx‎

Lines changed: 81 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1345,28 +1345,28 @@ const Connection: React.FC<ConnectionProps> = ({
13451345
</Button>
13461346
)}
13471347
{!isDeviceConnected && (
1348-
<Button
1349-
className="flex items-center gap-1 py-2 px-4 rounded-xl font-semibold"
1350-
onClick={() => (isDeviceConnected ? disconnectDevice() : connectToDevicefft())}
1351-
disabled={isfftLoading}
1352-
>
1353-
{isfftLoading ? (
1354-
<>
1355-
<Loader size={17} className="animate-spin" />
1356-
Connecting...
1357-
</>
1358-
) : isDeviceConnected ? (
1359-
<>
1360-
Disconnect
1361-
<CircleX size={17} />
1362-
</>
1363-
) : (
1364-
<>
1365-
FFT Visualizer
1366-
<Cable size={17} />
1367-
</>
1368-
)}
1369-
</Button>
1348+
<Button
1349+
className="flex items-center gap-1 py-2 px-4 rounded-xl font-semibold"
1350+
onClick={() => (isDeviceConnected ? disconnectDevice() : connectToDevicefft())}
1351+
disabled={isfftLoading}
1352+
>
1353+
{isfftLoading ? (
1354+
<>
1355+
<Loader size={17} className="animate-spin" />
1356+
Connecting...
1357+
</>
1358+
) : isDeviceConnected ? (
1359+
<>
1360+
Disconnect
1361+
<CircleX size={17} />
1362+
</>
1363+
) : (
1364+
<>
1365+
FFT Visualizer
1366+
<Cable size={17} />
1367+
</>
1368+
)}
1369+
</Button>
13701370
)}
13711371
</Popover>
13721372
</TooltipTrigger>
@@ -1422,7 +1422,7 @@ const Connection: React.FC<ConnectionProps> = ({
14221422
<Button
14231423
className="rounded-xl"
14241424
onClick={handleRecord}
1425-
1425+
disabled={!isDisplay}
14261426
>
14271427
{isRecordingRef.current ? (
14281428
<CircleStop />
@@ -1820,60 +1820,52 @@ const Connection: React.FC<ConnectionProps> = ({
18201820
<TooltipProvider>
18211821
<div className="space-y-6">
18221822
{/* Channel Selection */}
1823-
<div className="flex items-center justify-center rounded-lg mb-[2.5rem]">
1824-
<div className=" w-full">
1825-
<div className="absolute inset-0 rounded-lg border-gray-300 dark:border-gray-600 opacity-50 pointer-events-none"></div>
1826-
<div className="relative">
1827-
{/* Heading and Select All Button */}
1823+
{isDisplay && (
1824+
<div className="flex items-center justify-center rounded-lg mb-[2.5rem]">
1825+
<div className="w-full">
1826+
{/* Channels Count & Select All Button */}
18281827
<div className="flex items-center justify-between mb-4">
18291828
<h3 className="text-xs font-semibold text-gray-500">
18301829
<span className="font-bold text-gray-600">Channels Count:</span> {selectedChannels.length}
18311830
</h3>
1832-
{
1833-
!(selectedChannels.length === maxCanvasElementCountRef.current && manuallySelected) && (
1834-
<button
1835-
onClick={handleSelectAllToggle}
1836-
className={`px-4 py-1 text-xs font-light rounded-lg transition ${isSelectAllDisabled
1837-
? "text-gray-400 bg-gray-200 dark:bg-gray-700 dark:text-gray-500 cursor-not-allowed"
1838-
: "text-white bg-black hover:bg-gray-700 dark:bg-white dark:text-black dark:border dark:border-gray-500 dark:hover:bg-primary/70"
1839-
}`}
1840-
disabled={isSelectAllDisabled}
1841-
>
1842-
{isAllEnabledChannelSelected ? "RESET" : "Select All"}
1843-
</button>
1844-
)
1845-
}
1831+
{!(selectedChannels.length === maxCanvasElementCountRef.current && manuallySelected) && (
1832+
<button
1833+
onClick={handleSelectAllToggle}
1834+
className={`px-4 py-1 text-xs font-light rounded-lg transition ${isSelectAllDisabled
1835+
? "text-gray-400 bg-gray-200 dark:bg-gray-700 dark:text-gray-500 cursor-not-allowed"
1836+
: "text-white bg-black hover:bg-gray-700 dark:bg-white dark:text-black dark:border dark:border-gray-500 dark:hover:bg-primary/70"
1837+
}`}
1838+
disabled={isSelectAllDisabled}
1839+
>
1840+
{isAllEnabledChannelSelected ? "RESET" : "Select All"}
1841+
</button>
1842+
)}
18461843
</div>
1847-
{/* Button Grid */}
1844+
{/* Channel Buttons Grid */}
18481845
<div id="button-container" className="relative space-y-2 rounded-lg">
18491846
{Array.from({ length: 2 }).map((_, container) => (
18501847
<div key={container} className="grid grid-cols-8 gap-2">
18511848
{Array.from({ length: 8 }).map((_, col) => {
18521849
const index = container * 8 + col;
18531850
const isChannelDisabled = index >= maxCanvasElementCountRef.current;
18541851
const isSelected = selectedChannels.includes(index + 1);
1855-
1856-
// For selected channels, use the shared custom color.
1857-
// Otherwise, use default styles.
18581852
const buttonStyle = isChannelDisabled
18591853
? isDarkModeEnabled
18601854
? { backgroundColor: "#030c21", color: "gray" }
18611855
: { backgroundColor: "#e2e8f0", color: "gray" }
18621856
: isSelected
18631857
? { backgroundColor: getCustomColor(index, activeTheme), color: "white" }
18641858
: { backgroundColor: "white", color: "black" };
1865-
1866-
// Optional: calculate rounded corners based on button position.
18671859
const isFirstInRow = col === 0;
18681860
const isLastInRow = col === 7;
18691861
const isFirstContainer = container === 0;
18701862
const isLastContainer = container === 1;
18711863
const roundedClass = `
1872-
${isFirstInRow && isFirstContainer ? "rounded-tl-lg" : ""}
1873-
${isLastInRow && isFirstContainer ? "rounded-tr-lg" : ""}
1874-
${isFirstInRow && isLastContainer ? "rounded-bl-lg" : ""}
1875-
${isLastInRow && isLastContainer ? "rounded-br-lg" : ""}
1876-
`;
1864+
${isFirstInRow && isFirstContainer ? "rounded-tl-lg" : ""}
1865+
${isLastInRow && isFirstContainer ? "rounded-tr-lg" : ""}
1866+
${isFirstInRow && isLastContainer ? "rounded-bl-lg" : ""}
1867+
${isLastInRow && isLastContainer ? "rounded-br-lg" : ""}
1868+
`;
18771869

18781870
return (
18791871
<button
@@ -1892,7 +1884,7 @@ const Connection: React.FC<ConnectionProps> = ({
18921884
</div>
18931885
</div>
18941886
</div>
1895-
</div>
1887+
)}
18961888

18971889
{/* Zoom Controls */}
18981890
<div className="relative w-full flex flex-col items-start text-sm mb-[2rem]">
@@ -1933,40 +1925,42 @@ const Connection: React.FC<ConnectionProps> = ({
19331925
</div>
19341926

19351927
{/* Time-Base Selection */}
1936-
<div className="relative w-full flex flex-col items-start mt-3 text-sm">
1937-
<p className="absolute top-[-1.2rem] left-0 text-xs font-semibold text-gray-500">
1938-
<span className="font-bold text-gray-600">Time Base:</span> {timeBase} Seconds
1939-
</p>
1940-
<div className="relative w-[28rem] flex items-center rounded-lg py-2 border border-gray-300 dark:border-gray-600">
1941-
{/* Button for setting Time Base to 1 */}
1942-
<button
1943-
className="text-gray-700 dark:text-gray-400 mx-1 px-2 py-1 border rounded hover:bg-gray-200 dark:hover:bg-gray-700"
1944-
onClick={() => setTimeBase(1)}
1945-
>
1946-
1
1947-
</button>
1948-
<input
1949-
type="range"
1950-
min="1"
1951-
max="10"
1952-
value={timeBase}
1953-
onChange={(e) => setTimeBase(Number(e.target.value))}
1954-
style={{
1955-
background: `linear-gradient(to right, rgb(101, 136, 205) ${((timeBase - 1) / 9) * 100}%, rgb(165, 165, 165) ${((timeBase - 1) / 9) * 11}%)`,
1956-
}}
1957-
className="flex-1 h-[0.15rem] rounded-full appearance-none bg-gray-200 focus:outline-none focus:ring-0 slider-input"
1958-
/>
1959-
{/* Button for setting Time Base to 10 */}
1960-
<button
1961-
className="text-gray-700 dark:text-gray-400 mx-2 px-2 py-1 border rounded hover:bg-gray-200 dark:hover:bg-gray-700"
1962-
onClick={() => setTimeBase(10)}
1963-
>
1964-
10
1965-
</button>
1966-
<style jsx>{` input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none;appearance: none; width: 15px; height: 15px;
1967-
background-color: rgb(101, 136, 205); border-radius: 50%; cursor: pointer; }`}</style>
1928+
{isDisplay && (
1929+
<div className="relative w-full flex flex-col items-start mt-3 text-sm">
1930+
<p className="absolute top-[-1.2rem] left-0 text-xs font-semibold text-gray-500">
1931+
<span className="font-bold text-gray-600">Time Base:</span> {timeBase} Seconds
1932+
</p>
1933+
<div className="relative w-[28rem] flex items-center rounded-lg py-2 border border-gray-300 dark:border-gray-600">
1934+
{/* Buttons & Slider */}
1935+
<button
1936+
className="text-gray-700 dark:text-gray-400 mx-1 px-2 py-1 border rounded hover:bg-gray-200 dark:hover:bg-gray-700"
1937+
onClick={() => setTimeBase(1)}
1938+
>
1939+
1
1940+
</button>
1941+
<input
1942+
type="range"
1943+
min="1"
1944+
max="10"
1945+
value={timeBase}
1946+
onChange={(e) => setTimeBase(Number(e.target.value))}
1947+
style={{
1948+
background: `linear-gradient(to right, rgb(101, 136, 205) ${((timeBase - 1) / 9) * 100}%, rgb(165, 165, 165) ${((timeBase - 1) / 9) * 11}%)`,
1949+
}}
1950+
className="flex-1 h-[0.15rem] rounded-full appearance-none bg-gray-200 focus:outline-none focus:ring-0 slider-input"
1951+
/>
1952+
<button
1953+
className="text-gray-700 dark:text-gray-400 mx-2 px-2 py-1 border rounded hover:bg-gray-200 dark:hover:bg-gray-700"
1954+
onClick={() => setTimeBase(10)}
1955+
>
1956+
10
1957+
</button>
1958+
<style jsx>{` input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none;appearance: none; width: 15px; height: 15px;
1959+
background-color: rgb(101, 136, 205); border-radius: 50%; cursor: pointer; }`}</style>
1960+
</div>
19681961
</div>
1969-
</div>
1962+
)}
1963+
19701964
</div>
19711965
</TooltipProvider>
19721966
</PopoverContent>

0 commit comments

Comments
 (0)