FFt calculation improved

Author: Amanmahe

package-lock.json

@@ -41,7 +41,7 @@
     "html2canvas": "^1.4.1",
     "jszip": "^3.10.1",
     "lucide-react": "^0.460.0",
-    "next": "14.2.21",
+    "next": "^14.2.21",
     "next-pwa": "^5.6.0",
     "next-themes": "^0.3.0",
     "react": "^18",

package.json

@@ -55,49 +55,56 @@ const Graph: React.FC<GraphProps> = ({
 
   const FREQ_RESOLUTION = samplingRate / 256;
 
-  function calculateBandPower(fftMagnitudes: number[], freqRange: number[]) {
-    const [startFreq, endFreq] = freqRange;
-    const startIndex = Math.max(1, Math.floor(startFreq / FREQ_RESOLUTION));
-    const endIndex = Math.min(Math.floor(endFreq / FREQ_RESOLUTION), fftMagnitudes.length - 1);
-    let power = 0;
-    for (let i = startIndex; i <= endIndex; i++) {
-      power += fftMagnitudes[i] * fftMagnitudes[i];
-    }
-    return power;
-  }
-
+  const calculateBandPower = useCallback(
+    (fftMagnitudes: number[], freqRange: number[]) => {
+      const [startFreq, endFreq] = freqRange;
+      const startIndex = Math.max(1, Math.floor(startFreq / FREQ_RESOLUTION));
+      const endIndex = Math.min(Math.floor(endFreq / FREQ_RESOLUTION), fftMagnitudes.length - 1);
+      let power = 0;
+      for (let i = startIndex; i <= endIndex; i++) {
+        power += fftMagnitudes[i] * fftMagnitudes[i];
+      }
+      return power;
+    },
+    [FREQ_RESOLUTION]
+  );
+  
   useEffect(() => {
     if (fftData.length > 0 && fftData[0].length > 0) {
       const channelData = fftData[0];
-
+  
       const deltaPower = calculateBandPower(channelData, DELTA_RANGE);
       const thetaPower = calculateBandPower(channelData, THETA_RANGE);
       const alphaPower = calculateBandPower(channelData, ALPHA_RANGE);
       const betaPower = calculateBandPower(channelData, BETA_RANGE);
       const gammaPower = calculateBandPower(channelData, GAMMA_RANGE);
       const total = deltaPower + thetaPower + alphaPower + betaPower + gammaPower;
-
+  
       const newBandPowerData = [
         (deltaPower / total) * 100,
         (thetaPower / total) * 100,
         (alphaPower / total) * 100,
         (betaPower / total) * 100,
         (gammaPower / total) * 100,
       ];
-
+  
       if (
         newBandPowerData.some((value) => !isNaN(value) && value > -Infinity)
       ) {
-        setBandPowerData(newBandPowerData);
-
-        // Send smoothed beta value to parent
+        setBandPowerData((prev) => {
+          if (JSON.stringify(prev) !== JSON.stringify(newBandPowerData)) {
+            return newBandPowerData;
+          }
+          return prev;
+        });
+  
         if (onBetaUpdate) {
           onBetaUpdate(newBandPowerData[3]);
         }
       } 
     }
-  }, [fftData, calculateBandPower, onBetaUpdate]);
-
+  }, [fftData, calculateBandPower, onBetaUpdate && onBetaUpdate.toString()]); // Memoized dependencies
+  
 
   const drawGraph = useCallback(
     (currentBandPowerData: number[]) => {
@@ -131,8 +138,8 @@ const Graph: React.FC<GraphProps> = ({
       const barWidth = (width - leftMargin - rightMargin) / bandNames.length;
       const barSpacing = barWidth * 0.2; // Space between bars
 
-      let minPower = Math.min(...currentBandPowerData);
-      let maxPower = Math.max(...currentBandPowerData);
+      let minPower = 0;
+      let maxPower = 100;
 
       if (maxPower - minPower < 1) {
         maxPower = minPower + 1;
@@ -151,8 +158,9 @@ const Graph: React.FC<GraphProps> = ({
       // Draw bars
       currentBandPowerData.forEach((power, index) => {
         const x = leftMargin + index * barWidth;
-        const normalizedHeight = (power - minPower) / (maxPower - minPower);
-        const barHeight = normalizedHeight * (height - bottomMargin - 10);
+        const normalizedHeight = Math.max(0, (power - minPower) / (maxPower - minPower)); 
+        const barHeight = Math.max(0,normalizedHeight * (height - bottomMargin - 10));
+        
         ctx.fillStyle = bandColors[index];
         ctx.fillRect(x + barSpacing / 2, height - bottomMargin - barHeight, barWidth - barSpacing, barHeight);
       });

src/components/BandPowerGraph.tsx

@@ -33,6 +33,8 @@ const FFT = forwardRef(
     const fftBufferRef = useRef<number[][]>(Array.from({ length: 16 }, () => []));
     const [fftData, setFftData] = useState<number[][]>(Array.from({ length: 16 }, () => []));
     const fftSize = Math.pow(2, Math.round(Math.log2(currentSamplingRate / 2)));
+    const sampleupdateref = useRef<number>(50);
+    sampleupdateref.current=currentSamplingRate/10;
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const containerRef = useRef<HTMLDivElement>(null);
     const { theme } = useTheme();
@@ -54,7 +56,6 @@ const FFT = forwardRef(
         : 'border rounded-xl bg-gray-600 text-primary-foreground'}
   `;
 
-
     let samplesReceived = 0;
     class SmoothingFilter {
       private bufferSize: number;
@@ -111,7 +112,6 @@ const FFT = forwardRef(
       const freqStep = currentSamplingRate / fftSize;
       const startIndex = Math.max(1, Math.floor(startFreq / freqStep));
       const endIndex = Math.min(Math.floor(endFreq / freqStep), magnitudes.length - 1);
-
       let power = 0;
       for (let i = startIndex; i <= endIndex; i++) {
         power += magnitudes[i] * magnitudes[i];
@@ -161,7 +161,7 @@ const FFT = forwardRef(
           );
       }
     };
-    const filter = new SmoothingFilter(128, 1); 
+    const filter = new SmoothingFilter((currentSamplingRate/ sampleupdateref.current)*2,1); 
 
     useImperativeHandle(
       ref,
@@ -178,7 +178,7 @@ const FFT = forwardRef(
             samplesReceived++;
 
             // Trigger FFT computation more frequently
-            if (samplesReceived % 15 === 0) { // Changed from 25 to 5
+            if (samplesReceived %  sampleupdateref.current === 0) { // Changed from 25 to 5
               const processedBuffer = fftBufferRef.current[i].slice(0, fftSize);
               const floatInput = new Float32Array(processedBuffer);
               const fftMags = fftProcessor.computeMagnitudes(floatInput);
@@ -299,7 +299,6 @@ const FFT = forwardRef(
 
       try {
         const wglp = new WebglPlot(canvas);
-        console.log("WebglPlot created:", wglp);
         wglp.gScaleY = Zoom;
         const lineColor = theme === "dark" ? new ColorRGBA(1, 2, 2, 1) : new ColorRGBA(0, 0, 0, 1); // Adjust colors as needed
 
@@ -308,7 +307,6 @@ const FFT = forwardRef(
         line.lineSpaceX(-1, 2 / dataPointCountRef.current);
         wglp.addLine(line);
         newWglPlots.push(wglp);
-        console.log(newWglPlots)
         linesRef.current = [line];
         wglPlotsref.current = [wglp];
       } catch (error) {
@@ -328,8 +326,6 @@ const FFT = forwardRef(
 
     const updatePlot = useCallback((data: number, Zoom: number) => {
       if (!wglPlotsref.current[0] || !linesRef.current[0]) {
-        console.log(linesRef.current[0]);
-        console.log(wglPlotsref.current[0]);
         return;
       }
       const line = linesRef.current[0];
@@ -391,13 +387,8 @@ const FFT = forwardRef(
 
       const xScale = (width - leftMargin - 10) / displayPoints;
 
-      let yMax = 1; // Default to prevent division by zero
-      yMax = Math.max(...fftData[0]);
-      // fftData.forEach((channelData) => {
-      //   if (channelData.length > 0) {
-      //     yMax = Math.max(yMax, ...channelData.slice(0, displayPoints));
-      //   }
-      // });
+      let yMax = 1;//Default to prevent division by zero
+      yMax = Math.max(...fftData.flat());
 
       const yScale = (height - bottomMargin - 10) / yMax;
 
@@ -408,8 +399,7 @@ const FFT = forwardRef(
           const x = leftMargin + i * xScale;
           const y = height - bottomMargin - channelData[i] * yScale;
 
-          if (i === 0) ctx.moveTo(x, y);
-          else ctx.lineTo(x, y);
+       ctx.lineTo(x, y);
         }
         ctx.stroke();
       });
@@ -422,7 +412,7 @@ const FFT = forwardRef(
       for (let i = 0; i <= 5; i++) {
         const labelY =
           height - bottomMargin - (i / 5) * (height - bottomMargin - 10);
-        ctx.fillText(((yMax * i) / 5).toFixed(1), leftMargin - 5, labelY);
+        ctx.fillText(((yMax * i) / 5).toFixed(3), leftMargin - 5, labelY);
       }
 
       ctx.textAlign = "center";