Canvas theme change done, baudrate set

akadeepesh · Sep 10, 2024 · 4b6b7fe · 4b6b7fe
1 parent 6f26f3f
commit 4b6b7fe
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx
@@ -311,13 +311,27 @@ const Canvas: React.FC<CanvasProps> = ({
     }
   }, [theme, isChartInitialized, updateChartColors]);
 
+  // const getImageFilters = useCallback(() => {
+  //   if (theme === "dark") {
+  //     return "brightness(0.8) hue-rotate(180deg) saturate(2) contrast(1.2)";
+  //   } else {
+  //     return "brightness(1.2) saturate(0.8) contrast(0.9)";
+  //   }
+  // }, [theme]);
+
   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 relative`}
+        style={{
+          backgroundColor:
+            theme === "dark" ? "hsl(222.2, 84%, 4.9%)" : "hsl(0, 0%, 100%)",
+          color:
+            theme === "dark" ? "hsl(210, 40%, 98%)" : "hsl(222.2, 84%, 4.9%)",
+        }}
       >
         {channels.map((channel, index) => {
           if (channel) {
@@ -341,10 +355,14 @@ 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})` }}
+        {screenshotUrl && !isDisplay && (
+          <img
+            src={screenshotUrl}
+            alt="Chart Screenshot"
+            className={`absolute top-0 left-0 w-full h-full object-cover z-50 cursor-pointer ${
+              theme === "dark" ? "" : "invert"
+            }`}
+            // style={{ filter: getImageFilters() }}
           />
         )}
       </div>

diff --git a/src/components/Connection.tsx b/src/components/Connection.tsx
@@ -163,7 +163,7 @@ 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 57600
+      await port.open({ baudRate: 115200 }); // 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;
@@ -172,7 +172,7 @@ const Connection: React.FC<ConnectionProps> = ({
         description: (
           <div className="mt-2 flex flex-col space-y-1">
             <p>Device: {formatPortInfo(port.getInfo())}</p>
-            <p>Baud Rate: 57600</p>
+            <p>Baud Rate: 115200</p>
           </div>
         ),
       });