Merge pull request #17 from Ritika8081/main

Added a loader and disabled autoscale button in paused state.

src/app/globals.css

@@ -82,3 +82,30 @@
     -webkit-text-fill-color: transparent;
   }
 }
+/* styles/globals.css */
+.loader {
+  position: fixed;
+  top: 70%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999; /* Ensure the loader is on top of other content */
+}
+
+/* styles/globals.css */
+.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/components/Connection.tsx

@@ -166,19 +166,20 @@ const Connection: React.FC<ConnectionProps> = ({
     // Function to connect to the device
     try {
       const port = await navigator.serial.requestPort(); // Request the serial port
-      await port.open({ baudRate: 57600 }); // Open the port with baud rate 115200
+      await port.open({ baudRate: 57600 }); // Open the port with baud rate 57600
       Connection(true); // Set the connection state to true, which will enable the data visualization as it is getting used is DataPaas
       setIsConnected(true);
       isConnectedRef.current = true;
       portRef.current = port;
-      toast.success("Connection Successfull", {
+      toast.success("Connection Successful", {
         description: (
           <div className="mt-2 flex flex-col space-y-1">
             <p>Device: {formatPortInfo(port.getInfo())}</p>
             <p>Baud Rate: 57600</p>
           </div>
         ),
       });
+
       const reader = port.readable?.getReader();
       readerRef.current = reader;
       readData(); // Start reading the data from the device
@@ -699,6 +700,7 @@ const Connection: React.FC<ConnectionProps> = ({
                   setSelectedBits(selectedBits === "auto" ? ifBits : "auto")
                 }
                 aria-label="Toggle Autoscale"
+                disabled={!isDisplay} // Disable when paused
               >
                 Autoscale
               </Button>
@@ -708,6 +710,7 @@ const Connection: React.FC<ConnectionProps> = ({
                   setSelectedBits(value as BitSelection)
                 }
                 value={selectedBits}
+                disabled={!isDisplay} // Disable when paused
               >
                 <SelectTrigger className="w-32">
                   <SelectValue placeholder="Select bits" />

src/components/LandingComp/FAQSection.tsx

@@ -103,8 +103,8 @@ const FAQSection = () => {
       question: "What data format does Chords support?",
       answer: (
         <>
-          Chords supports an array format: [counter, A0, A1, ..., A6], where
-          counter is a uint8_t (0-255) and A0-A6 are raw signal values. Array
+          Chords supports an array format: [counter, A0, A1, ..., A4], where
+          counter is a uint8_t (0-255) and A0-A4 are raw signal values. Array
           example : [10, 468, 472, 463, 466, 465]. For implementation details,
           see our{" "}
           <Link

src/components/LandingComp/HeadSection.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Link from "next/link";
 import { Button } from "../../components/ui/button";
 import { GitHubLogoIcon } from "@radix-ui/react-icons";
@@ -9,6 +9,12 @@ import Chords from "./Chords";
 
 const HeadSection = () => {
   const { theme } = useTheme();
+  const [isImageLoaded, setIsImageLoaded] = useState(false);
+
+  useEffect(() => {
+    setIsImageLoaded(false); // Reset loading state on theme change
+  }, [theme]);
+
   return (
     <>
       <section className="w-full pt-24">
@@ -24,23 +30,17 @@ const HeadSection = () => {
               <div className="space-x-4 flex">
                 <Link href="/stream">
                   <Button>
-                    {theme === "dark" ? (
-                      <Image
-                        src="./assets/dark/favicon.ico"
-                        width={16}
-                        height={16}
-                        alt="logo"
-                        className="mr-2"
-                      />
-                    ) : (
-                      <Image
-                        src="./assets/light/favicon.ico"
-                        width={16}
-                        height={16}
-                        alt="logo"
-                        className="mr-2"
-                      />
-                    )}
+                    <Image
+                      src={
+                        theme === "dark"
+                          ? "./assets/dark/favicon.ico"
+                          : "./assets/light/favicon.ico"
+                      }
+                      width={16}
+                      height={16}
+                      alt="logo"
+                      className="mr-2"
+                    />
                     Visualize Now
                   </Button>
                 </Link>
@@ -60,23 +60,29 @@ const HeadSection = () => {
             </div>
           </div>
         </div>
-        {theme === "dark" ? (
-          <Image
-            src="./assets/dark/HeroSignalsClean.png"
-            alt="Plotter"
-            width={1000}
-            height={1000}
-            className="mx-auto mt-20 rounded"
-          />
-        ) : (
-          <Image
-            src="./assets/light/HeroSignalsClean.png"
-            alt="Plotter"
-            width={1000}
-            height={1000}
-            className="mx-auto mt-20 rounded"
-          />
+
+        {/* Loader */}
+        {!isImageLoaded && (
+          <div className="loader">
+            <div className="spinner"></div>
+          </div>
         )}
+
+        {/* Image */}
+        <Image
+          src={
+            theme === "dark"
+              ? "./assets/dark/HeroSignalsClean.png"
+              : "./assets/light/HeroSignalsClean.png"
+          }
+          alt="Plotter"
+          width={1000}
+          height={1000}
+          className={`mx-auto mt-20 rounded transition-opacity duration-300 ${
+            isImageLoaded ? "opacity-100" : "opacity-0"
+          }`}
+          onLoadingComplete={() => setIsImageLoaded(true)}
+        />
       </section>
     </>
   );

src/components/Navbar.tsx

@@ -28,7 +28,10 @@ const Navbar = () => {
           </div>
           <div className="flex gap-0 md:gap-2 items-center">
             <ModeToggle />
-            <Link href="https://github.com/upsidedownlabs" target="__blank">
+            <Link
+              href="https://github.com/upsidedownlabs/Chords-Web"
+              target="__blank"
+            >
               <Button variant={"ghost"} size={"sm"}>
                 <GitHubLogoIcon width={24} height={24} />
               </Button>