Merge pull request #90 from Ritika8081/fft-plot

Fix issue  of snapshot duplicating channel 1's data.

Author: lorforlinux

.github/workflows/deploy.yml

@@ -7,7 +7,11 @@ name: Deploy Next.js site to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["*"]
+    branches-ignore : 
+      - "**dev**"
+  pull_request:
+    branches-ignore : 
+      - "**dev**"
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

README.md

@@ -23,15 +23,16 @@ Chords is an application based on Web Serial connection, you can connect [Compat
 1.  Connect the Arduino to your computer using a USB cable.
 2.  Open the Arduino IDE and flash the provided firmware onto the Arduino.
 3.  Open Chords in a web browser.
-4.  Click the "Connect" button to establish a connection with the Arduino and stream.
-5.  Click the "Zoom" button to zoom in on data visualization.
-6.  Click the "Play/Pause" to control data flow and navigate frames with forward/backward buttons.
-7.  Click the "Record" button to record data.
-8.  Click the "download" button to download the recorded data.
-9.  Click the "Delete" button to delete recorded data.
-10. Click the "Plus/Minus" button to increase/decrease channel.
-11. Click "Filter" button for EMG, ECG, EOG and EEG filters with muscle, heart, eye and brain icons or master buttons for all channels. You can apply 50Hz or 60Hz filter to individual or all channel.
-12. Click the "Disconnect" button to terminate the connection with the Arduino and stop the data stream.
+4.  Click the "Visualize Now" button to navigate to the applications page, where you'll find three options: "Chords Visualizer", "Serial Wizard", and "FFT Plot".
+5.  Select "Chords Visualizer" to connect with the Arduino and begin streaming data.
+7.  Click the "Settings" icon to open the popover, where you'll find a "Zoom" slider to adjust the view as needed.
+8.  Click the "Play/Pause" to control data flow and navigate frames with forward/backward buttons.
+9.  Click the "Record" button to record data.
+10. Click the "download" button to download the recorded data.
+11. Click the "Delete" button to delete recorded data.
+12. Click the "Settings" icon to select from (up to 16) available channels of your development board. Use "Select All" to choose all channels simultaneously, and "Reset" to revert to the previous channel selection.
+13. Click the "Filter" button to select filters for EMG, ECG, EOG, and EEG for muscle, heart, eye, and brain data, respectively. Click on individual icons or master buttons at the top to apply a filter for all channels. You can also apply 50Hz or 60Hz notch filter to individual or all channels.
+14. Click the "Disconnect" button to terminate the connection with your development board and stop the data stream.
 
 ## Technologies Used
 
@@ -81,6 +82,8 @@ Chords is an application based on Web Serial connection, you can connect [Compat
 
 - [X] **Serial Wizard** : We are introducing the Serial Plotter and Monitor, a powerful tool that enables you to visualize data graphically, display raw data in text format, and even use both modes simultaneously for a more comprehensive analysis. In the past,we had no better option to run both plotter and monitor at the same time and high-speed plotting that hindered real-time data visualization. To address these challenges, we've created a user-friendly, smooth-performing Serial Plotter & Monitor with multi-mode support, providing a more responsive and efficient data analysis experience.
 
+- [X] **FFT Visualizer** : We've added FFT analysis and EEG band spectrum plotting to enhance real-time brain signal visualization. These features let you monitor EEG frequency bands—Delta, Theta, Alpha, Beta, and Gamma—for deeper insights into mental states. The “FFT Visualizer” shows filtered EEG signals and offers two modes: Band Power for real-time EEG strength and Beta Candle, a unique focus-level indicator where a brighter candle means higher beta activity. You can also download EEG data as CSV for further analysis.
+
 ## Contributors
 
 Thank you for contributing to our project! Your support is invaluable in creating & enhancing Chords-Web and making it even better. 😊

public/assets/dark/HeroSignalsClean.png

@@ -86,39 +86,57 @@ const Canvas = forwardRef(
         const prevCanvasCountRef = useRef<number>(canvasCount);
 
         const processIncomingData = (incomingData: number[]) => {
-            if (pauseRef.current) return; // Skip processing if paused
+            // Ensure we have valid references
+            if (!selectedChannelsRef.current || !array3DRef.current) return;
 
             const currentBuffer = array3DRef.current[activeBufferIndexRef.current];
+            if (!currentBuffer) return;
 
             // Handle canvas count changes and reset buffers
             if (prevCanvasCountRef.current !== canvasCount) {
                 for (let bufferIndex = 0; bufferIndex < 6; bufferIndex++) {
-                    array3DRef.current[bufferIndex] = Array.from({ length: canvasCount }, () => []);
+                    array3DRef.current[bufferIndex] = Array.from(
+                        { length: selectedChannelsRef.current.length },
+                        () => []
+                    );
                     snapShotRef.current[bufferIndex] = false;
                 }
                 prevCanvasCountRef.current = canvasCount;
             }
 
-            // Process incoming data for each canvas
-            currentBuffer.forEach((buffer, i) => {
-                if (buffer.length >= dataPointCountRef.current ||
-                    (!pauseRef.current && buffer.length < dataPointCountRef.current)) {
+            // Process incoming data for each selected channel
+            selectedChannelsRef.current.forEach((channelNumber, i) => {
+                // Ensure currentBuffer[i] exists
+                if (!currentBuffer[i]) {
                     currentBuffer[i] = [];
                 }
-                currentBuffer[i].push(incomingData[i + 1]);
+
+                // Clear buffer if needed
+                if (currentBuffer[i].length >= dataPointCountRef.current ||
+                    (!pauseRef.current && currentBuffer[i].length < dataPointCountRef.current)) {
+                    currentBuffer[i] = [];
+                }
+
+                // Safely access incoming data
+                if (channelNumber >= 0 && channelNumber < incomingData.length) {
+                    currentBuffer[i].push(incomingData[channelNumber]);
+                } else {
+                    console.warn(`Invalid channel number ${channelNumber} or missing data`);
+                    currentBuffer[i].push(0); // Push default value if data is missing
+                }
             });
 
             // Update snapshot and buffer index when data is ready
-            if (currentBuffer[0].length >= dataPointCountRef.current) {
+            if (currentBuffer[0] && currentBuffer[0].length >= dataPointCountRef.current) {
                 snapShotRef.current[activeBufferIndexRef.current] = true;
                 activeBufferIndexRef.current = (activeBufferIndexRef.current + 1) % 6;
                 snapShotRef.current[activeBufferIndexRef.current] = false;
             }
 
             // Update data indices for referencing past buffers
             dataIndicesRef.current = Array.from(
-                { length: 6 },
-                (_, i) => (activeBufferIndexRef.current - i + 6) % 6
+                { length: 5 },
+                (_, i) => (activeBufferIndexRef.current - i + 5) % 6
             );
         };
 
@@ -367,43 +385,37 @@ const Canvas = forwardRef(
 
 
         const updatePlotSnapshot = (currentSnapshot: number) => {
-            for (let i = 0; i < canvasCount; i++) {
-                wglPlots.forEach((wglp, index) => {
-                    if (wglp) {
-                        try {
-                            wglp.gScaleY = Zoom; // Adjust the zoom value
-                        } catch (error) {
-                            console.error(
-                                `Error setting gScaleY for WebglPlot instance at index ${index}:`,
-                                error
-                            );
-                        }
-                    } else {
-                        console.warn(`WebglPlot instance at index ${index} is undefined.`);
+            const currentSelectedChannels = selectedChannelsRef.current;
+
+            currentSelectedChannels.forEach((channelNumber, i) => {
+                const wglp = wglPlots[i];
+                if (wglp) {
+                    try {
+                        wglp.gScaleY = Zoom;
+                    } catch (error) {
+                        console.error(`Error setting gScaleY for WebglPlot instance at index ${i}:`, error);
                     }
-                });
-                if (
-                    array3DRef.current &&
+                }
+
+                if (array3DRef.current &&
                     dataIndicesRef.current &&
                     dataIndicesRef.current[currentSnapshot] !== undefined &&
-                    array3DRef.current[dataIndicesRef.current[currentSnapshot]] !== undefined
-                ) {
-                    const yArray = new Float32Array(array3DRef.current[dataIndicesRef.current[currentSnapshot]][i]);
-                    // Check if the line exists
+                    array3DRef.current[dataIndicesRef.current[currentSnapshot]] &&
+                    array3DRef.current[dataIndicesRef.current[currentSnapshot]][i]) {
+
+                    const channelData = array3DRef.current[dataIndicesRef.current[currentSnapshot]][i];
+                    const yArray = new Float32Array(channelData);
+
                     const line = linesRef.current[i];
                     if (line) {
-                        line.shiftAdd(yArray); // Efficiently add new points
+                        line.shiftAdd(yArray);
                     } else {
                         console.error(`Line at index ${i} is undefined or null.`);
                     }
-
-                } else {
-                    console.warn("One of the references is undefined or invalid");
                 }
+            });
 
-
-            }
-            wglPlots.forEach((wglp) => wglp.update()); // Redraw the plots
+            wglPlots.forEach((wglp) => wglp.update());
         };
 
         useEffect(() => {