Merge pull request #68 from Ritika8081/board-support

 Arduino Nano support is added and maximum channel limit dynamically adjustable

Author: lorforlinux

README.md

@@ -75,7 +75,6 @@ Chords is an application based on Web Serial connection, you can connect [Compat
 
 Thank you for contributing to our project! Your support is invaluable in creating & enhancing Chords-Web and making it even better. 😊
 
-
 <center>
 <a href="https://github.com/upsidedownlabs/Chords-Web/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=upsidedownlabs/Chords-Web" />

next.config.mjs

@@ -1,7 +1,7 @@
-// next.config.mjs
-export default {
+/** @type {import('next').NextConfig} */
+const nextConfig = {
   reactStrictMode: true,
-  output: 'export',
+  output: 'export',  // This is key for static export
   images: {
     unoptimized: true,
     remotePatterns: [
@@ -11,14 +11,6 @@ export default {
       },
     ],
   },
-  webpack(config, { isServer }) {
-    // If this is the server-side bundle, we don’t need to process worker files
-    if (!isServer) {
-      config.module.rules.push({
-        test: /\.worker\.(js|ts)$/,
-        use: { loader: 'worker-loader' },
-      });
-    }
-    return config;
-  },
 };
+/* module.exports = nextConfig*/
+export default nextConfig;

package-lock.json

@@ -1,8 +1,7 @@
 {
   "name": "chords",
-  "version": "2.3.3a",
+  "version": "2.3.4a",
   "private": true,
-  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -50,6 +49,7 @@
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-textshadow": "^2.1.3",
+    "uuid": "^11.0.3",
     "webgl-plot": "^0.7.1"
   },
   "devDependencies": {
@@ -58,6 +58,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/uuid": "^10.0.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
     "postcss": "^8",

package.json

@@ -15,7 +15,8 @@ interface CanvasProps {
   selectedBits: BitSelection;
   isDisplay: boolean;
   canvasCount?: number;
-  currentValue?:number;
+  timeBase?: number;
+  currentSamplingRate:number;
   Zoom: number;
   currentSnapshot: number;
   snapShotRef: React.MutableRefObject<boolean[]>;
@@ -28,7 +29,8 @@ const Canvas = forwardRef(
       selectedBits,
       isDisplay,
       canvasCount = 6, // default value in case not provided
-      currentValue=4,
+      timeBase = 4,
+      currentSamplingRate,
       Zoom,
       currentSnapshot,
       snapShotRef,
@@ -41,10 +43,10 @@ const Canvas = forwardRef(
     const [numChannels, setNumChannels] = useState<number>(canvasCount);
     const numXRef = useRef<number>(2000); // To track the calculated value
     const [canvases, setCanvases] = useState<HTMLCanvasElement[]>([]);
-    const [samplingRate,setSamplingRate]=useState<number>(500);
     const [wglPlots, setWglPlots] = useState<WebglPlot[]>([]);
     const [lines, setLines] = useState<WebglLine[]>([]);
     const linesRef = useRef<WebglLine[]>([]);
+    const [samplingRate, setSamplingRate] = useState<number>(500);
     const sweepPositions = useRef<number[]>(new Array(6).fill(0)); // Array for sweep positions
     const currentSweepPos = useRef<number[]>(new Array(6).fill(0)); // Array for sweep positions
     const array3DRef = useRef<number[][][]>(
@@ -68,12 +70,12 @@ const Canvas = forwardRef(
           return 500; // Default fallback
       }
     }, []);
+    
 
+    useEffect(() => {
+      numXRef.current = (currentSamplingRate * timeBase);
 
-  useEffect(() => {
-    numXRef.current= (getpoints(selectedBits) * currentValue);
-   
-  }, [ currentValue]);
+    }, [timeBase]);
 
     const prevCanvasCountRef = useRef<number>(canvasCount);
 
@@ -116,11 +118,11 @@ const Canvas = forwardRef(
 
 
     useEffect(() => {
-      // Reset when currentValue changes
+      // Reset when timeBase changes
       currentSweepPos.current = new Array(numChannels).fill(0);
       sweepPositions.current = new Array(numChannels).fill(0);
-    }, [currentValue]);
-    
+    }, [timeBase]);
+
 
     useImperativeHandle(
       ref,
@@ -131,7 +133,7 @@ const Canvas = forwardRef(
             currentSweepPos.current = new Array(numChannels).fill(0);
             sweepPositions.current = new Array(numChannels).fill(0);
           }
-    
+
           if (pauseRef.current) {
             processIncomingData(data);
             updatePlots(data, Zoom);
@@ -149,7 +151,7 @@ const Canvas = forwardRef(
           previousCounter = data[0]; // Update the previous counter with the current counter
         },
       }),
-      [Zoom, numChannels,currentValue]
+      [Zoom, numChannels, timeBase]
     );
 
     const createCanvases = () => {
@@ -186,7 +188,7 @@ const Canvas = forwardRef(
       const opacityLightMajor = "0.4"; // Opacity for every 5th line in light theme
       const opacityLightMinor = "0.1"; // Opacity for other lines in light theme
       const distanceminor = samplingRate * 0.04;
-      const numGridLines = getpoints(selectedBits)*4 / distanceminor;
+      const numGridLines = getpoints(selectedBits) * 4 / distanceminor;
       for (let j = 1; j < numGridLines; j++) {
         const gridLineX = document.createElement("div");
         gridLineX.className = "absolute bg-[rgb(128,128,128)]";
@@ -317,12 +319,12 @@ const Canvas = forwardRef(
           sweepPositions.current[i] = (currentSweepPos.current[i] + 1) % line.numPoints;
         });
       },
-      [lines, wglPlots, numChannels, theme,currentValue]
+      [lines, wglPlots, numChannels, theme, timeBase]
     );
 
     useEffect(() => {
       createCanvases();
-    }, [numChannels, theme,currentValue]);
+    }, [numChannels, theme, timeBase]);
 
 
     const animate = useCallback(() => {