Merge pull request #39 from akadeepesh/main

Reverting canvas theme change trial

package.json

@@ -33,6 +33,7 @@
     "esc-pos-encoder": "^2.0.1",
     "file-saver": "^2.0.5",
     "framer-motion": "^11.5.4",
+    "html2canvas": "^1.4.1",
     "jszip": "^3.10.1",
     "lucide-react": "^0.383.0",
     "next": "14.2.3",

src/components/Canvas.tsx

@@ -9,6 +9,7 @@ import React, {
 import { SmoothieChart, TimeSeries } from "smoothie";
 import { useTheme } from "next-themes";
 import { BitSelection } from "./DataPass";
+import html2canvas from "html2canvas";
 
 interface CanvasProps {
   data: string;
@@ -28,12 +29,43 @@ const Canvas: React.FC<CanvasProps> = ({
   const chartRef = useRef<SmoothieChart[]>([]);
   const seriesRef = useRef<(TimeSeries | null)[]>([]);
   const [isChartInitialized, setIsChartInitialized] = useState(false);
-  const [isGlobalPaused, setIsGlobalPaused] = useState(!isDisplay);
+  const [isGlobalPaused, setIsGlobalPaused] = useState(true);
   const batchSize = 10;
   const batchBuffer = useMemo<Array<{ time: number; values: number[] }>>(
     () => [],
     []
   );
+  const [screenshotUrl, setScreenshotUrl] = useState<string | null>(null);
+  const gridRef = useRef<HTMLDivElement>(null);
+
+  const captureScreenshot = useCallback(() => {
+    if (gridRef.current) {
+      html2canvas(gridRef.current).then((canvas) => {
+        const url = canvas.toDataURL();
+        setScreenshotUrl(url);
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    setIsGlobalPaused(!isDisplay);
+
+    if (!isDisplay) {
+      captureScreenshot();
+    } else {
+      setScreenshotUrl(null);
+    }
+
+    chartRef.current.forEach((chart) => {
+      if (chart) {
+        if (isDisplay) {
+          chart.start();
+        } else {
+          chart.stop();
+        }
+      }
+    });
+  }, [isDisplay, captureScreenshot]);
 
   const getChannelColor = useCallback(
     (index: number) => {
@@ -117,12 +149,6 @@ const Canvas: React.FC<CanvasProps> = ({
           ) as HTMLCanvasElement,
           500
         );
-
-        if (isGlobalPaused) {
-          chart.stop();
-        } else {
-          chart.start();
-        }
       }
     });
   }, [
@@ -288,9 +314,10 @@ const Canvas: React.FC<CanvasProps> = ({
   return (
     <div className="flex flex-col justify-center items-start px-4 m-4 h-[80vh]">
       <div
+        ref={gridRef}
         className={`grid ${
           isGridView ? "md:grid-cols-2 grid-cols-1" : "grid-cols-1"
-        } w-full h-full`}
+        } w-full h-full relative`}
       >
         {channels.map((channel, index) => {
           if (channel) {
@@ -314,6 +341,12 @@ const Canvas: React.FC<CanvasProps> = ({
           }
           return null;
         })}
+        {screenshotUrl && (
+          <div
+            className="absolute top-0 left-0 w-full h-full bg-cover bg-center z-10"
+            style={{ backgroundImage: `url(${screenshotUrl})` }}
+          />
+        )}
       </div>
     </div>
   );