Merge pull request #54 from Amanmahe/main

Added Images,Enhanced Design, Improved Navigation, and Interactive Features

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "biosignal-recorder-web",
+  "name": "Chords",
   "version": "0.1.0",
   "private": true,
   "scripts": {

src/app/globals.css

@@ -99,29 +99,3 @@
     border-color: hsl(var(--gray-light));
   }
 }
-
-.loader {
-  position: fixed;
-  top: 70%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 9999; /* Ensure the loader is on top of other content */
-}
-
-.spinner {
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  border-radius: 50%;
-  border-top: 4px solid #000;
-  width: 50px;
-  height: 50px;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

src/app/layout.tsx

@@ -15,7 +15,7 @@ const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "Chords",
-  description: "Web Serial based BioSignal recorder applicaion.",
+  description: "Web Serial based Biopotential Signal recorder applicaion.",
 };
 
 const lobsterTwo = Lobster_Two({

src/app/page.tsx

@@ -40,13 +40,13 @@ const page = () => {
     <>
       <div className="flex flex-col">
         <HeadSection />
-        <Separator className="mt-20" />
+        <Separator className="mt-12" />
         <Steps />
-        <Separator className="mt-20" />
+        <Separator className="mt-12" />
         <Features />
-        <Separator className="mt-20" />
+        <Separator className="mt-12" />
         <TechStack />
-        <Separator className="mt-20" />
+        <Separator className="mt-12" />
         <FAQSection />
         <Footer />
       </div>

src/components/Canvas.tsx

@@ -87,9 +87,6 @@ const Canvas = forwardRef(
       [Zoom, numChannels]
     );
 
-
-
-
     const createCanvases = () => {
       if (!canvasContainerRef.current) return;
 
@@ -164,7 +161,7 @@ const Canvas = forwardRef(
         canvas.width = canvasContainerRef.current.clientWidth ;
         const canvasHeight = (canvasContainerRef.current.clientHeight / numChannels) ;
         canvas.height = canvasHeight;
-        canvas.className = "w-full h-full block rounded-2xl";
+        canvas.className = "w-full h-full block rounded-xl";
 
         // Create a badge for the channel number
         const badge = document.createElement("div");
@@ -304,7 +301,7 @@ const Canvas = forwardRef(
     }, [createCanvases,]);
 
     return (
-      <main className=" flex flex-col flex-[1_1_0%] min-h-100 bg-highlight  rounded-2xl m-4 relative"
+      <main className=" flex flex-col flex-[1_1_0%] min-h-80 bg-highlight  rounded-2xl m-4 relative"
         ref={canvasContainerRef}
       >
       </main>

src/components/Connection.tsx

@@ -37,7 +37,7 @@ import {
 
 interface ConnectionProps {
   onPauseChange: (pause: boolean) => void; // Callback to pass pause state to parent
-  dataSteam: (data: number[]) => void;
+  datastream: (data: number[]) => void;
   Connection: (isConnected: boolean) => void;
   selectedBits: BitSelection;
   setSelectedBits: React.Dispatch<React.SetStateAction<BitSelection>>;
@@ -52,7 +52,7 @@ interface ConnectionProps {
 
 const Connection: React.FC<ConnectionProps> = ({
   onPauseChange,
-  dataSteam,
+  datastream,
   Connection,
   setSelectedBits,
   isDisplay,
@@ -204,22 +204,23 @@ const Connection: React.FC<ConnectionProps> = ({
       connectToDevice();
     }
   };
+  let lastConnectedPort: SerialPort | null = null;
 
   const connectToDevice = async () => {
     try {
       if (portRef.current && portRef.current.readable) {
         await disconnectDevice();
       }
 
-      const port = await navigator.serial.requestPort();
+      const port = lastConnectedPort || await navigator.serial.requestPort();
       await port.open({ baudRate: 230400 });
       Connection(true);
       setIsConnected(true);
       onPauseChange(true);
       setIsDisplay(true);
       isConnectedRef.current = true;
       portRef.current = port;
-
+      lastConnectedPort = port;
       toast.success("Connection Successful", {
         description: (
           <div className="mt-2 flex flex-col space-y-1">
@@ -358,7 +359,7 @@ const Connection: React.FC<ConnectionProps> = ({
               }
               const counter = packet[2]; // Extract the counter value from the packet
               channelData.push(counter); // Add the counter to the channel data
-              dataSteam(channelData); // Pass the channel data to the LineData function for further processing
+              datastream(channelData); // Pass the channel data to the LineData function for further processing
 
               if (isRecordingRef.current) {
                 // Check if recording is enabled
@@ -741,7 +742,7 @@ const Connection: React.FC<ConnectionProps> = ({
     <div className="absolute left-4 flex items-center mx-0 px-0 space-x-1">
       {isRecordingRef.current && (
         <div className="flex items-center space-x-1 w-min ml-2">
-          <button className="flex items-center justify-center px-3 py-2   select-none min-w-20 bg-primary text-destructive whitespace-nowrap rounded"
+          <button className="flex items-center justify-center px-3 py-2   select-none min-w-20 bg-primary text-destructive whitespace-nowrap rounded-xl"
           >
             {formatTime(elapsedTime)}
           </button>
@@ -753,7 +754,7 @@ const Connection: React.FC<ConnectionProps> = ({
             >
               <PopoverTrigger asChild>
                 <Button
-                 className="flex items-center justify-center px-3 py-2   select-none min-w-12  text-destructive whitespace-nowrap rounded"
+                 className="flex items-center justify-center px-3 py-2   select-none min-w-12  text-destructive whitespace-nowrap rounded-xl"
                   variant="destructive"
                 >
                   {endTimeRef.current === null ? (
@@ -818,7 +819,7 @@ const Connection: React.FC<ConnectionProps> = ({
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button className="bg-primary gap-2" onClick={handleClick}>
+            <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}>
               {isConnected ? (
                 <>
                   Disconnect
@@ -846,7 +847,7 @@ const Connection: React.FC<ConnectionProps> = ({
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
-                    className="rounded-r-none"
+                    className="rounded-xl rounded-r-none"
                     onClick={decreaseZoom}
                     disabled={Zoom === 1 || !isDisplay}
                   >
@@ -882,7 +883,7 @@ const Connection: React.FC<ConnectionProps> = ({
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
-                    className="rounded-l-none"
+                    className="rounded-xl rounded-l-none"
                     onClick={increaseZoom}
                     disabled={Zoom === 10 || !isDisplay}
 
@@ -906,7 +907,7 @@ const Connection: React.FC<ConnectionProps> = ({
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button onClick={togglePause}>
+              <Button className="rounded-xl" onClick={togglePause}>
                 {isDisplay ? (
                   <Pause className="h-5 w-5" />
                 ) : (
@@ -929,6 +930,7 @@ const Connection: React.FC<ConnectionProps> = ({
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
+              className="rounded-xl"
                 onClick={handleRecord}
                 disabled={isRecordButtonDisabled || !isDisplay}
               >
@@ -958,7 +960,7 @@ const Connection: React.FC<ConnectionProps> = ({
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
-                    className="rounded-r-none"
+                    className="rounded-xl rounded-r-none"
                     onClick={saveData}
                     disabled={!hasData}
                   >
@@ -976,30 +978,30 @@ const Connection: React.FC<ConnectionProps> = ({
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
-                  className="rounded-r-none mr-1"
+                  className="rounded-xl rounded-r-none mr-1"
                   onClick={saveData}
                   disabled={!hasData}
                 >
                   <Download size={16} />
                 </Button>
               </TooltipTrigger>
               <TooltipContent>
-                <p>Save Data as Zip</p>
+                <p>Save Recording</p>
               </TooltipContent>
             </Tooltip>
 
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
-                  className="rounded-l-none"
+                  className="rounded-xl rounded-l-none"
                   onClick={deleteDataFromIndexedDB}
                   disabled={!hasData}
                 >
                   <Trash2 size={20} />
                 </Button>
               </TooltipTrigger>
               <TooltipContent>
-                <p>Delete All Data</p>
+                <p>Delete Recording</p>
               </TooltipContent>
             </Tooltip>
           </div>
@@ -1015,7 +1017,7 @@ const Connection: React.FC<ConnectionProps> = ({
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
-                    className="rounded-r-none"
+                    className="rounded-xl rounded-r-none"
                     onClick={decreaseCanvas}
                     disabled={canvasCount === 1 || !isDisplay || recData}
                   >
@@ -1059,7 +1061,7 @@ const Connection: React.FC<ConnectionProps> = ({
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
-                    className="rounded-l-none"
+                    className="rounded-xl rounded-l-none"
                     onClick={increaseCanvas}
                     disabled={canvasCount >= 6 || !isDisplay || recData}
                   >

src/components/DataPass.tsx

@@ -22,7 +22,7 @@ const DataPass = () => {
     pauseRef.current = newPauseState;
   };
 
-  const dataSteam = useCallback((data: number[]) => {
+  const datastream = useCallback((data: number[]) => {
 
     if (canvasRef.current) {
       canvasRef.current.updateData(data); // Assuming data is the new data to be displayed
@@ -58,7 +58,7 @@ const DataPass = () => {
       )}
       <Connection
       onPauseChange={handlePauseChange}
-        dataSteam={dataSteam}
+        datastream={datastream}
         Connection={setIsConnected}
         selectedBits={selectedBits}
         setSelectedBits={setSelectedBits}

src/components/LandingComp/FAQSection.tsx

@@ -104,7 +104,7 @@ const FAQSection = () => {
       answer: (
         <>
           Chords supports an array format: [A0, A1, ..., A5, counter], where
-           A0-A5 are raw signal values and counter is a uint8_t (0-255). Array
+          A0-A5 are raw signal values and counter is a uint8_t (0-255). Array
           example : [468, 472, 463, 466, 465, 434, 10]. For implementation
           details, see our{" "}
           <Link
@@ -166,11 +166,13 @@ const FAQSection = () => {
     },
   ];
   return (
-    <section className="w-full py-8 pb-12 md:pb-24 lg:pb-24 mx-auto lg:md:sm:px-0 px-3">
-      <h1 className="text-3xl font-bold text-center text-foreground md:text-4xl lg:text-5xl">
-        Frequently Asked Questions
-      </h1>
-      <div className="mx-auto mt-8 max-w-6xl">
+    <section className="w-full pb-8 md:pb-24 lg:pb-24 mx-auto lg:md:sm:px-0 px-4 md:px-24 lg:px-12">
+      <div className="mx-auto mt-8 max-w-6xl xl:px-8 ">
+        <div className="space-y-4">
+          <h1 className="text-2xl font-bold tracking-wide  sm:text-3xl md:text-3xl text-left text-foreground pb-8">
+            Frequently Asked Questions
+          </h1>
+        </div>
         <Accordion type="single" collapsible className=" max-w-7xl">
           {FAQs.map((faq, index) => (
             <AccordionItem value={`item-${index}`} key={index}>