From e81bc40495721aa0a87538e70f59a4b5ee601cfe Mon Sep 17 00:00:00 2001 From: Ritika Mishra <103934960+Ritika8081@users.noreply.github.com> Date: Mon, 9 Sep 2024 12:35:17 +0530 Subject: [PATCH 01/21] updated image load and improved chart/theme logic on paused state --- src/components/Canvas.tsx | 2 -- src/components/Connection.tsx | 4 ++-- src/components/LandingComp/HeadSection.tsx | 23 +++++++++++++++++++--- 3 files changed, 22 insertions(+), 7 deletions(-) diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx index 22e6146..0f75a16 100644 --- a/src/components/Canvas.tsx +++ b/src/components/Canvas.tsx @@ -120,8 +120,6 @@ const Canvas: React.FC = ({ if (isGlobalPaused) { chart.stop(); - } else { - chart.start(); } } }); diff --git a/src/components/Connection.tsx b/src/components/Connection.tsx index 4b25291..378851b 100644 --- a/src/components/Connection.tsx +++ b/src/components/Connection.tsx @@ -163,7 +163,7 @@ const Connection: React.FC = ({ // 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 = ({ description: (

Device: {formatPortInfo(port.getInfo())}

-

Baud Rate: 57600

+

Baud Rate: 115200

), }); diff --git a/src/components/LandingComp/HeadSection.tsx b/src/components/LandingComp/HeadSection.tsx index 962710c..1cf375e 100644 --- a/src/components/LandingComp/HeadSection.tsx +++ b/src/components/LandingComp/HeadSection.tsx @@ -8,13 +8,30 @@ import { useTheme } from "next-themes"; import Chords from "./Chords"; const HeadSection = () => { - const { theme } = useTheme(); + const { theme, resolvedTheme } = useTheme(); // Use resolvedTheme for better detection const [isImageLoaded, setIsImageLoaded] = useState(false); + const [mounted, setMounted] = useState(false); // To check if theme is ready + // Set mounted to true only after the client has mounted useEffect(() => { + setMounted(true); setIsImageLoaded(false); // Reset loading state on theme change }, [theme]); + // Preload images to avoid delay in theme switch + const preloadImage = (src) => { + const img = new Image(); + img.src = src; + }; + + useEffect(() => { + preloadImage("./assets/dark/HeroSignalsClean.png"); + preloadImage("./assets/light/HeroSignalsClean.png"); + }, []); + + // If not mounted yet, return null to avoid theme flickering + if (!mounted) return null; + return ( <>
@@ -32,7 +49,7 @@ const HeadSection = () => { - - +
+
+
+

+ Tune Into Your EXG Data +
With +

+
+
+
+ + + + + - -
+ + Source Code + +
+ - {/* Loader */} - {!isImageLoaded && ( -
-
-
- )} + {/* Loader */} + {!isImageLoaded && ( +
+
+
+ )} - {/* Image */} - Plotter setIsImageLoaded(true)} - /> -
- + {/* Image */} + Plotter setIsImageLoaded(true)} + /> + ); }; From 105849c62e7bc721a5cb450939e2de3a15c43097 Mon Sep 17 00:00:00 2001 From: Ritika Mishra <103934960+Ritika8081@users.noreply.github.com> Date: Mon, 9 Sep 2024 13:12:26 +0530 Subject: [PATCH 04/21] updated image links --- src/components/LandingComp/HeadSection.tsx | 150 +++++++++++---------- 1 file changed, 79 insertions(+), 71 deletions(-) diff --git a/src/components/LandingComp/HeadSection.tsx b/src/components/LandingComp/HeadSection.tsx index 4198073..f28ccc1 100644 --- a/src/components/LandingComp/HeadSection.tsx +++ b/src/components/LandingComp/HeadSection.tsx @@ -8,93 +8,101 @@ import { useTheme } from "next-themes"; import Chords from "./Chords"; const HeadSection: React.FC = () => { - const { resolvedTheme } = useTheme(); + const { theme, resolvedTheme } = useTheme(); // Use resolvedTheme for better theme detection const [isImageLoaded, setIsImageLoaded] = useState(false); - const [mounted, setMounted] = useState(false); + const [mounted, setMounted] = useState(false); // To check if the component is mounted - // Only mount once, no need to reset image loading on theme change + // Set mounted to true after the client has mounted useEffect(() => { setMounted(true); - }, []); + setIsImageLoaded(false); // Reset image loading state on theme change + }, [theme]); + + // Preload dark and light images to avoid delay on theme switch + const preloadImage = (src: string) => { + const img = new window.Image(); + img.src = src; + }; - // Preload images for fast loading and smooth transitions between themes + // Preload images on component mount useEffect(() => { - const darkImage = new window.Image(); - darkImage.src = "/assets/dark/HeroSignalsClean.png"; - const lightImage = new window.Image(); - lightImage.src = "/assets/light/HeroSignalsClean.png"; + preloadImage("./assets/dark/HeroSignalsClean.png"); + preloadImage("./assets/light/HeroSignalsClean.png"); }, []); - if (!mounted) return null; // Prevent render before mounting + // If the component is not mounted yet, avoid rendering to prevent flickering + if (!mounted) return null; return ( -
-
-
-
-

- Tune Into Your EXG Data -
With -

-
-
-
- - - - - + + - - Source Code - - + + +
- - {/* Loader */} - {!isImageLoaded && ( -
-
-
- )} + {/* Loader */} + {!isImageLoaded && ( +
+
+
+ )} - {/* Image */} - Plotter setIsImageLoaded(true)} - /> -
+ {/* Image */} + Plotter setIsImageLoaded(true)} + /> + + ); }; From cfcd22878736128e8e91f8571e1e9abc20055082 Mon Sep 17 00:00:00 2001 From: Ritika Mishra <103934960+Ritika8081@users.noreply.github.com> Date: Mon, 9 Sep 2024 14:17:17 +0530 Subject: [PATCH 05/21] updated code to load correct image --- src/components/LandingComp/HeadSection.tsx | 9 +++++---- src/components/Theming/mode-toggle.tsx | 6 +++--- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/LandingComp/HeadSection.tsx b/src/components/LandingComp/HeadSection.tsx index f28ccc1..4c5facc 100644 --- a/src/components/LandingComp/HeadSection.tsx +++ b/src/components/LandingComp/HeadSection.tsx @@ -1,4 +1,5 @@ "use client"; + import React, { useState, useEffect } from "react"; import Link from "next/link"; import { Button } from "../../components/ui/button"; @@ -8,15 +9,14 @@ import { useTheme } from "next-themes"; import Chords from "./Chords"; const HeadSection: React.FC = () => { - const { theme, resolvedTheme } = useTheme(); // Use resolvedTheme for better theme detection + const { resolvedTheme } = useTheme(); // `resolvedTheme` reflects the system theme or the user-set theme const [isImageLoaded, setIsImageLoaded] = useState(false); - const [mounted, setMounted] = useState(false); // To check if the component is mounted + const [mounted, setMounted] = useState(false); // Ensures the theme detection works after mounting // Set mounted to true after the client has mounted useEffect(() => { setMounted(true); - setIsImageLoaded(false); // Reset image loading state on theme change - }, [theme]); + }, []); // Preload dark and light images to avoid delay on theme switch const preloadImage = (src: string) => { @@ -96,6 +96,7 @@ const HeadSection: React.FC = () => { alt="Plotter" width={1000} height={1000} + priority // Use priority to preload the image className={`mx-auto mt-20 rounded transition-opacity duration-300 ${ isImageLoaded ? "opacity-100" : "opacity-0" }`} diff --git a/src/components/Theming/mode-toggle.tsx b/src/components/Theming/mode-toggle.tsx index 648c314..4fe8e12 100644 --- a/src/components/Theming/mode-toggle.tsx +++ b/src/components/Theming/mode-toggle.tsx @@ -1,9 +1,8 @@ "use client"; -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import { MoonIcon, SunIcon } from "@radix-ui/react-icons"; import { useTheme } from "next-themes"; - import { Button } from "@/components/ui/button"; export function ModeToggle({ @@ -11,13 +10,14 @@ export function ModeToggle({ ...props }: React.HTMLAttributes) { const { theme, setTheme } = useTheme(); - const [mounted, setMounted] = React.useState(false); + const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); const toggleTheme = () => { + console.log("Current theme:", theme); // Debug log setTheme(theme === "dark" ? "light" : "dark"); }; From 90591bc423718e28b075f53116d24e057e7a98aa Mon Sep 17 00:00:00 2001 From: Ritika Mishra <103934960+Ritika8081@users.noreply.github.com> Date: Tue, 10 Sep 2024 00:30:42 +0530 Subject: [PATCH 06/21] nav icon and theme issue fix --- README.md | 13 +------ src/components/Canvas.tsx | 50 ++++++++++++++++++++------ src/components/Navbar.tsx | 18 +++++++++- src/components/Theming/mode-toggle.tsx | 44 ++++++++--------------- 4 files changed, 73 insertions(+), 52 deletions(-) diff --git a/README.md b/README.md index ef6f360..5a6bcc4 100644 --- a/README.md +++ b/README.md @@ -8,18 +8,7 @@ Chords is an application based on Web Serial connection, you can connect boards - **Connection**: Experience a smooth connection/disconnection with board in single click. - **Real-time Visualization**: Visualize incoming data without any jitter from the board in real-time on SmoothieCharts. -- **Recording**: Record the signals data in csv files, multiple instances can be recorded and downloaded as zip of csv's. -- **Bi Directional Communication**: We can also write data in the board, the table below shows what we recieve if sent data is: -
- -| Sent Data | Data Received | Value | -| :-------: | ------------- | --------------------- | -| 'c' | Channel Count | 6 | -| 'n' | Board Name | "Arduino" | -| 's' | Sampling Rate | {125, 250, 500, 1000} | -| 'r' | Resolution | 10 | - -
+- **Recording**: Record the signals data and downloaded data in csv files. ## Compatible Browsers diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx index 0f75a16..7302730 100644 --- a/src/components/Canvas.tsx +++ b/src/components/Canvas.tsx @@ -1,4 +1,5 @@ "use client"; +import { Pause, Play, Grid, List } from "lucide-react"; import React, { useEffect, useRef, @@ -14,7 +15,7 @@ interface CanvasProps { data: string; selectedBits: BitSelection; isGridView: boolean; - isDisplay: boolean; + isDisplay: boolean; // New prop for play/pause functionality } const Canvas: React.FC = ({ @@ -28,6 +29,7 @@ const Canvas: React.FC = ({ const chartRef = useRef([]); const seriesRef = useRef<(TimeSeries | null)[]>([]); const [isChartInitialized, setIsChartInitialized] = useState(false); + const [isPaused, setIsPaused] = useState(Array(channels.length).fill(false)); // Paused state for each channe const [isGlobalPaused, setIsGlobalPaused] = useState(!isDisplay); const batchSize = 10; const batchBuffer = useMemo>( @@ -117,10 +119,6 @@ const Canvas: React.FC = ({ ) as HTMLCanvasElement, 500 ); - - if (isGlobalPaused) { - chart.stop(); - } } }); }, [ @@ -136,7 +134,7 @@ const Canvas: React.FC = ({ batchBuffer.forEach((batch) => { channels.forEach((channel, index) => { - if (channel) { + if (channel && !isPaused[index]) { const series = seriesRef.current[index]; if (series && !isNaN(batch.values[index])) { series.append(batch.time, batch.values[index]); @@ -146,7 +144,7 @@ const Canvas: React.FC = ({ }); batchBuffer.length = 0; - }, [channels, batchBuffer, isGlobalPaused]); + }, [channels, batchBuffer, isGlobalPaused, isPaused]); const handleDataUpdate = useCallback( (line: string) => { @@ -163,7 +161,7 @@ const Canvas: React.FC = ({ }, [processBatch, batchBuffer, isDisplay] ); - + // console.log(data); useEffect(() => { if (isChartInitialized) { const lines = String(data).split("\n"); @@ -171,6 +169,13 @@ const Canvas: React.FC = ({ } }, [data, isChartInitialized, handleDataUpdate]); + // Updated to ensure colors are correctly applied when the theme changes + useEffect(() => { + if (isChartInitialized) { + updateChartColors(); // Apply the updated theme colors to the chart + } + }, [theme, isChartInitialized, updateChartColors]); + useEffect(() => { const intervalId = setInterval(() => { if (batchBuffer.length > 0 && isDisplay) { @@ -247,6 +252,27 @@ const Canvas: React.FC = ({ shouldAutoScale, getChannelColor, ]); + useEffect(() => { + const resizeCanvas = () => { + channels.forEach((channel, index) => { + const canvas = document.getElementById( + `smoothie-chart-${index + 1}` + ) as HTMLCanvasElement; + + const parentDiv = canvas.parentElement; + if (parentDiv) { + canvas.height = parentDiv.offsetHeight - 2; + canvas.width = parentDiv.offsetWidth; + } + }); + }; + + window.addEventListener("resize", resizeCanvas); + + return () => { + window.removeEventListener("resize", resizeCanvas); + }; + }, [channels]); useEffect(() => { if (isChartInitialized) { @@ -287,7 +313,9 @@ const Canvas: React.FC = ({
{channels.map((channel, index) => { @@ -295,7 +323,9 @@ const Canvas: React.FC = ({ return (
{ + const { theme, setTheme, systemTheme } = useTheme(); + const [mounted, setMounted] = useState(false); + + // To prevent hydration mismatch, we wait until the component is mounted + useEffect(() => { + setMounted(true); + }, []); + + if (!mounted) { + return null; // Avoid rendering until the component is mounted + } + + // Determine the current theme (dark/light) + const currentTheme = theme === "system" ? systemTheme : theme; + return (
diff --git a/src/components/Theming/mode-toggle.tsx b/src/components/Theming/mode-toggle.tsx index 4fe8e12..876712b 100644 --- a/src/components/Theming/mode-toggle.tsx +++ b/src/components/Theming/mode-toggle.tsx @@ -3,37 +3,23 @@ import React, { useEffect, useState } from "react"; import { MoonIcon, SunIcon } from "@radix-ui/react-icons"; import { useTheme } from "next-themes"; -import { Button } from "@/components/ui/button"; -export function ModeToggle({ - className, - ...props -}: React.HTMLAttributes) { - const { theme, setTheme } = useTheme(); - const [mounted, setMounted] = useState(false); +export const ModeToggle = () => { + const { theme, setTheme, systemTheme } = useTheme(); - useEffect(() => { - setMounted(true); - }, []); - - const toggleTheme = () => { - console.log("Current theme:", theme); // Debug log - setTheme(theme === "dark" ? "light" : "dark"); - }; - - if (!mounted) { - return null; - } + // Determine the current theme (dark/light) + const currentTheme = theme === "system" ? systemTheme : theme; return ( -
- -
+ ); -} +}; From 5dd35d1b0ff3ab27e56bb66251d954512ca9fcd6 Mon Sep 17 00:00:00 2001 From: Ritika Mishra <103934960+Ritika8081@users.noreply.github.com> Date: Tue, 10 Sep 2024 01:01:55 +0530 Subject: [PATCH 07/21] updated theme button in navbar --- src/components/Theming/mode-toggle.tsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/Theming/mode-toggle.tsx b/src/components/Theming/mode-toggle.tsx index 876712b..38f1034 100644 --- a/src/components/Theming/mode-toggle.tsx +++ b/src/components/Theming/mode-toggle.tsx @@ -1,8 +1,6 @@ -"use client"; - -import React, { useEffect, useState } from "react"; -import { MoonIcon, SunIcon } from "@radix-ui/react-icons"; import { useTheme } from "next-themes"; +import { MoonIcon, SunIcon } from "@radix-ui/react-icons"; +import { Button } from "@/components/ui/button"; // Importing the Button from shadcn export const ModeToggle = () => { const { theme, setTheme, systemTheme } = useTheme(); @@ -10,16 +8,18 @@ export const ModeToggle = () => { // Determine the current theme (dark/light) const currentTheme = theme === "system" ? systemTheme : theme; + // Toggle between light and dark themes + const toggleTheme = () => { + setTheme(currentTheme === "dark" ? "light" : "dark"); + }; + return ( - + ); }; From 0114956dd16b2404866a6e67688a0f116aa95ec3 Mon Sep 17 00:00:00 2001 From: Ritika Mishra <103934960+Ritika8081@users.noreply.github.com> Date: Tue, 10 Sep 2024 13:37:22 +0530 Subject: [PATCH 08/21] fixed issues --- src/components/Canvas.tsx | 33 ++++++++-------------- src/components/Connection.tsx | 4 +-- src/components/LandingComp/HeadSection.tsx | 2 +- src/components/Theming/mode-toggle.tsx | 25 +++++++++------- 4 files changed, 30 insertions(+), 34 deletions(-) diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx index 7302730..74596ee 100644 --- a/src/components/Canvas.tsx +++ b/src/components/Canvas.tsx @@ -15,7 +15,7 @@ interface CanvasProps { data: string; selectedBits: BitSelection; isGridView: boolean; - isDisplay: boolean; // New prop for play/pause functionality + isDisplay: boolean; } const Canvas: React.FC = ({ @@ -29,7 +29,6 @@ const Canvas: React.FC = ({ const chartRef = useRef([]); const seriesRef = useRef<(TimeSeries | null)[]>([]); const [isChartInitialized, setIsChartInitialized] = useState(false); - const [isPaused, setIsPaused] = useState(Array(channels.length).fill(false)); // Paused state for each channe const [isGlobalPaused, setIsGlobalPaused] = useState(!isDisplay); const batchSize = 10; const batchBuffer = useMemo>( @@ -134,7 +133,7 @@ const Canvas: React.FC = ({ batchBuffer.forEach((batch) => { channels.forEach((channel, index) => { - if (channel && !isPaused[index]) { + if (channel) { const series = seriesRef.current[index]; if (series && !isNaN(batch.values[index])) { series.append(batch.time, batch.values[index]); @@ -144,7 +143,7 @@ const Canvas: React.FC = ({ }); batchBuffer.length = 0; - }, [channels, batchBuffer, isGlobalPaused, isPaused]); + }, [channels, batchBuffer, isGlobalPaused]); const handleDataUpdate = useCallback( (line: string) => { @@ -161,7 +160,7 @@ const Canvas: React.FC = ({ }, [processBatch, batchBuffer, isDisplay] ); - // console.log(data); + useEffect(() => { if (isChartInitialized) { const lines = String(data).split("\n"); @@ -313,9 +312,7 @@ const Canvas: React.FC = ({
{channels.map((channel, index) => { @@ -323,20 +320,14 @@ const Canvas: React.FC = ({ return (
-
- -
+
); } diff --git a/src/components/Connection.tsx b/src/components/Connection.tsx index 378851b..66e165b 100644 --- a/src/components/Connection.tsx +++ b/src/components/Connection.tsx @@ -776,7 +776,7 @@ const Connection: React.FC = ({ onClick={saveData} disabled={!hasData} > - + )} @@ -796,7 +796,7 @@ const Connection: React.FC = ({ onClick={saveData} // Adjust functionality for saving multiple datasets if needed disabled={!hasData} > - +

{datasets}

+
+ +
); -}; +} From 4b6b7fe6f0d635e541a20a4f85d9bb65b83ce2e6 Mon Sep 17 00:00:00 2001 From: akadeepesh Date: Tue, 10 Sep 2024 15:56:39 +0530 Subject: [PATCH 09/21] Canvas theme change done, baudrate set --- src/components/Canvas.tsx | 26 ++++++++++++++++++++++---- src/components/Connection.tsx | 4 ++-- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx index c84704b..a54f349 100644 --- a/src/components/Canvas.tsx +++ b/src/components/Canvas.tsx @@ -311,6 +311,14 @@ const Canvas: React.FC = ({ } }, [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 (
= ({ 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 = ({ } return null; })} - {screenshotUrl && ( -
)}
diff --git a/src/components/Connection.tsx b/src/components/Connection.tsx index 4b25291..378851b 100644 --- a/src/components/Connection.tsx +++ b/src/components/Connection.tsx @@ -163,7 +163,7 @@ const Connection: React.FC = ({ // 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 = ({ description: (

Device: {formatPortInfo(port.getInfo())}

-

Baud Rate: 57600

+

Baud Rate: 115200

), }); From 60f21fae53f748c0876d33cead8b02a45ad19c89 Mon Sep 17 00:00:00 2001 From: Ritika Mishra <103934960+Ritika8081@users.noreply.github.com> Date: Tue, 10 Sep 2024 16:15:52 +0530 Subject: [PATCH 10/21] added responsiveness --- src/components/Canvas.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx index 74596ee..ba16948 100644 --- a/src/components/Canvas.tsx +++ b/src/components/Canvas.tsx @@ -1,5 +1,5 @@ "use client"; -import { Pause, Play, Grid, List } from "lucide-react"; + import React, { useEffect, useRef, @@ -309,7 +309,7 @@ const Canvas: React.FC = ({ }, [theme, isChartInitialized, updateChartColors]); return ( -
+
= ({
Date: Fri, 13 Sep 2024 11:18:58 +0530 Subject: [PATCH 11/21] updated code according to new arduino code --- package-lock.json | 124 +++++++++++++++++++++++++++++----- public/CNAME | 1 + src/components/Canvas.tsx | 40 ----------- src/components/Connection.tsx | 46 +++++++++---- 4 files changed, 142 insertions(+), 69 deletions(-) create mode 100644 public/CNAME diff --git a/package-lock.json b/package-lock.json index b90a6f8..e206caa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -61,6 +61,7 @@ "version": "5.2.0", "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", + "dev": true, "engines": { "node": ">=10" }, @@ -307,6 +308,7 @@ "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", + "dev": true, "dependencies": { "string-width": "^5.1.2", "string-width-cjs": "npm:string-width@^4.2.0", @@ -323,6 +325,7 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", + "dev": true, "engines": { "node": ">=12" }, @@ -334,6 +337,7 @@ "version": "7.1.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "dev": true, "dependencies": { "ansi-regex": "^6.0.1" }, @@ -348,6 +352,7 @@ "version": "0.3.5", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", + "dev": true, "dependencies": { "@jridgewell/set-array": "^1.2.1", "@jridgewell/sourcemap-codec": "^1.4.10", @@ -361,6 +366,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "dev": true, "engines": { "node": ">=6.0.0" } @@ -369,6 +375,7 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", + "dev": true, "engines": { "node": ">=6.0.0" } @@ -376,12 +383,14 @@ "node_modules/@jridgewell/sourcemap-codec": { "version": "1.4.15", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", - "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" + "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", + "dev": true }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.25", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", + "dev": true, "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" @@ -559,6 +568,7 @@ "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", + "dev": true, "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" @@ -571,6 +581,7 @@ "version": "2.0.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", + "dev": true, "engines": { "node": ">= 8" } @@ -579,6 +590,7 @@ "version": "1.2.8", "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", + "dev": true, "dependencies": { "@nodelib/fs.scandir": "2.1.5", "fastq": "^1.6.0" @@ -591,6 +603,7 @@ "version": "0.11.0", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", + "dev": true, "optional": true, "engines": { "node": ">=14" @@ -2754,13 +2767,13 @@ "version": "15.7.12", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", - "devOptional": true + "dev": true }, "node_modules/@types/react": { "version": "18.3.3", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz", "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==", - "devOptional": true, + "dev": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -2770,7 +2783,7 @@ "version": "18.3.0", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz", "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==", - "devOptional": true, + "dev": true, "dependencies": { "@types/react": "*" } @@ -3020,12 +3033,14 @@ "node_modules/any-promise": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", - "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==" + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", + "dev": true }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dev": true, "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -3055,7 +3070,8 @@ "node_modules/arg": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", - "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==" + "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", + "dev": true }, "node_modules/argparse": { "version": "2.0.1", @@ -3353,6 +3369,7 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", + "dev": true, "engines": { "node": ">=8" }, @@ -3373,6 +3390,7 @@ "version": "3.0.3", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "dev": true, "dependencies": { "fill-range": "^7.1.1" }, @@ -3528,6 +3546,7 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "dev": true, "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -3551,6 +3570,7 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, "dependencies": { "is-glob": "^4.0.1" }, @@ -3662,6 +3682,7 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "dev": true, "engines": { "node": ">= 6" } @@ -3685,6 +3706,7 @@ "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", @@ -3723,7 +3745,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "devOptional": true + "dev": true }, "node_modules/damerau-levenshtein": { "version": "1.0.8", @@ -3903,7 +3925,8 @@ "node_modules/didyoumean": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", - "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==" + "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", + "dev": true }, "node_modules/dir-glob": { "version": "3.0.1", @@ -3920,7 +3943,8 @@ "node_modules/dlv": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", - "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==" + "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", + "dev": true }, "node_modules/doctrine": { "version": "3.0.0", @@ -3937,7 +3961,8 @@ "node_modules/eastasianwidth": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", - "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==" + "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", + "dev": true }, "node_modules/electron-to-chromium": { "version": "1.5.13", @@ -3972,7 +3997,8 @@ "node_modules/emoji-regex": { "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", - "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==" + "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", + "dev": true }, "node_modules/enhanced-resolve": { "version": "5.16.1", @@ -4599,6 +4625,7 @@ "version": "3.3.2", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", + "dev": true, "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", @@ -4614,6 +4641,7 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, "dependencies": { "is-glob": "^4.0.1" }, @@ -4637,6 +4665,7 @@ "version": "1.17.1", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz", "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==", + "dev": true, "dependencies": { "reusify": "^1.0.4" } @@ -4662,6 +4691,7 @@ "version": "7.1.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", + "dev": true, "dependencies": { "to-regex-range": "^5.0.1" }, @@ -4718,6 +4748,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz", "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==", + "dev": true, "dependencies": { "cross-spawn": "^7.0.0", "signal-exit": "^4.0.1" @@ -4798,6 +4829,7 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -4945,6 +4977,7 @@ "version": "10.3.10", "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz", "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==", + "dev": true, "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^2.3.5", @@ -4966,6 +4999,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, "dependencies": { "is-glob": "^4.0.3" }, @@ -4977,6 +5011,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, "dependencies": { "balanced-match": "^1.0.0" } @@ -4985,6 +5020,7 @@ "version": "9.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz", "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==", + "dev": true, "dependencies": { "brace-expansion": "^2.0.1" }, @@ -5317,6 +5353,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, "dependencies": { "binary-extensions": "^2.0.0" }, @@ -5397,6 +5434,7 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -5440,6 +5478,7 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, "dependencies": { "is-extglob": "^2.1.1" }, @@ -5475,6 +5514,7 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, "engines": { "node": ">=0.12.0" } @@ -5640,7 +5680,8 @@ "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==" + "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", + "dev": true }, "node_modules/iterator.prototype": { "version": "1.1.2", @@ -5659,6 +5700,7 @@ "version": "2.3.6", "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz", "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==", + "dev": true, "dependencies": { "@isaacs/cliui": "^8.0.2" }, @@ -5676,6 +5718,7 @@ "version": "1.21.0", "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz", "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==", + "dev": true, "bin": { "jiti": "bin/jiti.js" } @@ -5845,6 +5888,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz", "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==", + "dev": true, "engines": { "node": ">=10" } @@ -5852,7 +5896,8 @@ "node_modules/lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", - "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", + "dev": true }, "node_modules/linewrap": { "version": "0.2.1", @@ -5903,6 +5948,7 @@ "version": "10.2.2", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz", "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==", + "dev": true, "engines": { "node": "14 || >=16.14" } @@ -5941,6 +5987,7 @@ "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", + "dev": true, "engines": { "node": ">= 8" } @@ -5949,6 +5996,7 @@ "version": "4.0.8", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", + "dev": true, "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" @@ -5991,6 +6039,7 @@ "version": "7.1.2", "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "dev": true, "engines": { "node": ">=16 || 14 >=14.17" } @@ -6038,6 +6087,7 @@ "version": "2.7.0", "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", + "dev": true, "dependencies": { "any-promise": "^1.0.0", "object-assign": "^4.0.1", @@ -6207,6 +6257,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -6253,6 +6304,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", + "dev": true, "engines": { "node": ">= 6" } @@ -6466,6 +6518,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true, "engines": { "node": ">=8" } @@ -6479,6 +6532,7 @@ "version": "1.11.1", "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz", "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==", + "dev": true, "dependencies": { "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" @@ -6508,6 +6562,7 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, "engines": { "node": ">=8.6" }, @@ -6519,6 +6574,7 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -6527,6 +6583,7 @@ "version": "4.0.6", "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz", "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==", + "dev": true, "engines": { "node": ">= 6" } @@ -6544,6 +6601,7 @@ "version": "8.4.38", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "dev": true, "funding": [ { "type": "opencollective", @@ -6684,6 +6742,7 @@ "version": "15.1.0", "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", + "dev": true, "dependencies": { "postcss-value-parser": "^4.0.0", "read-cache": "^1.0.0", @@ -6700,6 +6759,7 @@ "version": "4.0.1", "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz", "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==", + "dev": true, "dependencies": { "camelcase-css": "^2.0.1" }, @@ -6718,6 +6778,7 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz", "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==", + "dev": true, "funding": [ { "type": "opencollective", @@ -6752,6 +6813,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.1.tgz", "integrity": "sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==", + "dev": true, "engines": { "node": ">=14" }, @@ -6763,6 +6825,7 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz", "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==", + "dev": true, "dependencies": { "postcss-selector-parser": "^6.0.11" }, @@ -6974,6 +7037,7 @@ "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", + "dev": true, "funding": [ { "type": "github", @@ -7089,6 +7153,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", + "dev": true, "dependencies": { "pify": "^2.3.0" } @@ -7110,6 +7175,7 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, "dependencies": { "picomatch": "^2.2.1" }, @@ -7213,6 +7279,7 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==", + "dev": true, "engines": { "iojs": ">=1.0.0", "node": ">=0.10.0" @@ -7257,6 +7324,7 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", + "dev": true, "funding": [ { "type": "github", @@ -7394,6 +7462,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, "dependencies": { "shebang-regex": "^3.0.0" }, @@ -7405,6 +7474,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true, "engines": { "node": ">=8" } @@ -7431,6 +7501,7 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true, "engines": { "node": ">=14" }, @@ -7534,6 +7605,7 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", + "dev": true, "dependencies": { "eastasianwidth": "^0.2.0", "emoji-regex": "^9.2.2", @@ -7551,6 +7623,7 @@ "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", @@ -7563,12 +7636,14 @@ "node_modules/string-width-cjs/node_modules/emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true }, "node_modules/string-width/node_modules/ansi-regex": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", + "dev": true, "engines": { "node": ">=12" }, @@ -7580,6 +7655,7 @@ "version": "7.1.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "dev": true, "dependencies": { "ansi-regex": "^6.0.1" }, @@ -7681,6 +7757,7 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, "dependencies": { "ansi-regex": "^5.0.1" }, @@ -7735,6 +7812,7 @@ "version": "3.35.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==", + "dev": true, "dependencies": { "@jridgewell/gen-mapping": "^0.3.2", "commander": "^4.0.0", @@ -7790,6 +7868,7 @@ "version": "3.4.3", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz", "integrity": "sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==", + "dev": true, "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", @@ -7973,6 +8052,7 @@ "version": "3.3.1", "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", + "dev": true, "dependencies": { "any-promise": "^1.0.0" } @@ -7981,6 +8061,7 @@ "version": "1.6.0", "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", + "dev": true, "dependencies": { "thenify": ">= 3.1.0 < 4" }, @@ -7992,6 +8073,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, "dependencies": { "is-number": "^7.0.0" }, @@ -8019,7 +8101,8 @@ "node_modules/ts-interface-checker": { "version": "0.1.13", "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", - "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==" + "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", + "dev": true }, "node_modules/tsconfig-paths": { "version": "3.15.0", @@ -8288,6 +8371,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, "dependencies": { "isexe": "^2.0.0" }, @@ -8416,6 +8500,7 @@ "version": "8.1.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", + "dev": true, "dependencies": { "ansi-styles": "^6.1.0", "string-width": "^5.0.1", @@ -8433,6 +8518,7 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", @@ -8448,12 +8534,14 @@ "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true }, "node_modules/wrap-ansi-cjs/node_modules/string-width": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", @@ -8467,6 +8555,7 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", + "dev": true, "engines": { "node": ">=12" }, @@ -8478,6 +8567,7 @@ "version": "6.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", + "dev": true, "engines": { "node": ">=12" }, @@ -8489,6 +8579,7 @@ "version": "7.1.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "dev": true, "dependencies": { "ansi-regex": "^6.0.1" }, @@ -8521,6 +8612,7 @@ "version": "2.4.3", "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.3.tgz", "integrity": "sha512-sntgmxj8o7DE7g/Qi60cqpLBA3HG3STcDA0kO+WfB05jEKhZMbY7umNm2rBpQvsmZ16/lPXCJGW2672dgOUkrg==", + "dev": true, "bin": { "yaml": "bin.mjs" }, diff --git a/public/CNAME b/public/CNAME new file mode 100644 index 0000000..153d2c4 --- /dev/null +++ b/public/CNAME @@ -0,0 +1 @@ +chords.upsidedownlabs.tech \ No newline at end of file diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx index 2603094..4cb5dce 100644 --- a/src/components/Canvas.tsx +++ b/src/components/Canvas.tsx @@ -10,7 +10,6 @@ import React, { import { SmoothieChart, TimeSeries } from "smoothie"; import { useTheme } from "next-themes"; import { BitSelection } from "./DataPass"; -import html2canvas from "html2canvas"; interface CanvasProps { data: string; @@ -39,35 +38,6 @@ const Canvas: React.FC = ({ const [screenshotUrl, setScreenshotUrl] = useState(null); const gridRef = useRef(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) => { const colorsDark = ["#FF4985", "#79E6F3", "#00FFC1", "#ccc"]; @@ -380,16 +350,6 @@ const Canvas: React.FC = ({ } return null; })} - {screenshotUrl && !isDisplay && ( - Chart Screenshot - )}
); diff --git a/src/components/Connection.tsx b/src/components/Connection.tsx index 66e165b..dfdc078 100644 --- a/src/components/Connection.tsx +++ b/src/components/Connection.tsx @@ -87,6 +87,9 @@ const Connection: React.FC = ({ const readerRef = useRef< ReadableStreamDefaultReader | null | undefined >(null); // Ref to store the reader for the serial port + const writerRef = useRef | null>( + null + ); const handleTimeSelection = (minutes: number | null) => { // Function to handle the time selection @@ -160,14 +163,14 @@ const Connection: React.FC = ({ }; const connectToDevice = async () => { - // Function to connect to the device try { const port = await navigator.serial.requestPort(); // Request the serial port - 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 + await port.open({ baudRate: 115200 }); // Open the port with baud rate 115200 + Connection(true); // Set the connection state to true, enabling the data visualization setIsConnected(true); isConnectedRef.current = true; portRef.current = port; + toast.success("Connection Successful", { description: (
@@ -177,10 +180,26 @@ const Connection: React.FC = ({ ), }); + // Get the reader from the port const reader = port.readable?.getReader(); readerRef.current = reader; - readData(); // Start reading the data from the device - await navigator.wakeLock.request("screen"); // Request the wake lock to keep the screen on + + // Get the writer from the port (check if it's available) + const writer = port.writable?.getWriter(); + if (writer) { + writerRef.current = writer; + + const message = new TextEncoder().encode("START"); + await writerRef.current.write(message); + } else { + console.error("Writable stream not available"); + } + + // Start reading the data from the device + readData(); + + // Request the wake lock to keep the screen on + await navigator.wakeLock.request("screen"); } catch (error) { // If there is an error during connection, disconnect the device disconnectDevice(); @@ -226,9 +245,11 @@ const Connection: React.FC = ({ const readData = async (): Promise => { let bufferIndex = 0; const buffer: number[] = []; // Buffer to store incoming data from the device - const PACKET_LENGTH = 17; // Length of the expected data packet - const SYNC_BYTE1 = 0xa5; // First synchronization byte to identify the start of a packet - const SYNC_BYTE2 = 0x5a; // Second synchronization byte to identify the start of a packet + const HEADER_LENGTH = 3; + const NUM_CHANNELS = 6; + const PACKET_LENGTH = 16; // Length of the expected data packet + const SYNC_BYTE1 = 0xc7; // First synchronization byte to identify the start of a packet + const SYNC_BYTE2 = 0x7c; // Second synchronization byte to identify the start of a packet const END_BYTE = 0x01; // End byte to identify the end of a packet let previousCounter: number | null = null; // Variable to store the previous counter value for loss detection let hasRemovedInitialElements = false; // Flag to check if initial buffer elements have been removed @@ -271,16 +292,15 @@ const Connection: React.FC = ({ ) { const packet = buffer.slice(syncIndex, syncIndex + PACKET_LENGTH); // Extract the packet from the buffer const channelData: string[] = []; // Array to store the extracted channel data - for (let i = 0; i < 6; i++) { + for (let channel = 0; channel < NUM_CHANNELS; channel++) { // Loop through each channel in the packet - const highByte = packet[4 + i * 2]; // Extract the high byte for the channel - const lowByte = packet[5 + i * 2]; // Extract the low byte for the channel + const highByte = packet[channel * 2 + HEADER_LENGTH]; // Extract the high byte for the channel + const lowByte = packet[channel * 2 + HEADER_LENGTH + 1]; // Extract the low byte for the channel const value = (highByte << 8) | lowByte; // Combine the high and low bytes to get the channel value channelData.push(value.toString()); // Convert the value to string and store it in the array } - const counter = packet[3]; // Extract the counter value from the packet + const counter = packet[2]; // Extract the counter value from the packet channelData.push(counter.toString()); // Add the counter value to the channel data - LineData(channelData); // Pass the channel data to the LineData function for further processing if (isRecordingRef.current) { // Check if recording is enabled From a1c814f87c644a78508a32483f2c840ffbb371b8 Mon Sep 17 00:00:00 2001 From: Ritika Mishra <103934960+Ritika8081@users.noreply.github.com> Date: Fri, 13 Sep 2024 12:40:05 +0530 Subject: [PATCH 12/21] disable theme change on pause state --- src/app/page.tsx | 1 - src/app/stream/page.tsx | 1 - src/components/Connection.tsx | 2 +- src/components/DataPass.tsx | 4 ++-- src/components/Navbar.tsx | 4 ++-- src/components/Theming/mode-toggle.tsx | 15 ++++++++++++--- 6 files changed, 17 insertions(+), 10 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 71c7286..bebf2d7 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -38,7 +38,6 @@ const SkeletonUI = () => ( const page = () => { return ( <> -
diff --git a/src/app/stream/page.tsx b/src/app/stream/page.tsx index a8dc188..c202406 100644 --- a/src/app/stream/page.tsx +++ b/src/app/stream/page.tsx @@ -5,7 +5,6 @@ import SerialCheck from "../../components/SerialCheck"; const Page = () => { return (
-
); diff --git a/src/components/Connection.tsx b/src/components/Connection.tsx index dfdc078..dd0f9fc 100644 --- a/src/components/Connection.tsx +++ b/src/components/Connection.tsx @@ -816,7 +816,7 @@ const Connection: React.FC = ({ onClick={saveData} // Adjust functionality for saving multiple datasets if needed disabled={!hasData} > - +

{datasets}

- + ) { +}: React.HTMLAttributes & { disabled?: boolean }) { const { theme, setTheme, systemTheme } = useTheme(); // Determine the current theme (dark/light) @@ -13,12 +14,20 @@ export function ModeToggle({ // Toggle between light and dark themes const toggleTheme = () => { - setTheme(currentTheme === "dark" ? "light" : "dark"); + if (!disabled) { + setTheme(currentTheme === "dark" ? "light" : "dark"); + } }; return (
-