From ef38ff362fe902bace57c73a06328f62e931eafd Mon Sep 17 00:00:00 2001 From: Aman Maheshwari Date: Fri, 4 Oct 2024 11:51:52 +0530 Subject: [PATCH] canvas improved --- src/components/Canvas.tsx | 29 +++++++----- src/components/Connection.tsx | 86 +++++++++++++++++++++-------------- 2 files changed, 69 insertions(+), 46 deletions(-) diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx index e840071..9ac9276 100644 --- a/src/components/Canvas.tsx +++ b/src/components/Canvas.tsx @@ -40,6 +40,7 @@ const Canvas= forwardRef( ({ const [wglPlots, setWglPlots] = useState([]); const [lines, setLines] = useState([]); const linesRef = useRef([]); + const [marginBottom, setMarginBottom] = useState(0); const fps = 60; const samplingRate = 500; // Set the sampling rate in Hz const slidePoints = Math.floor(samplingRate / fps); // Set how many points to slide @@ -79,6 +80,15 @@ const Canvas= forwardRef( ({ + + useEffect(() => { + const containerHeightPx = canvasContainerRef.current?.clientHeight || window.innerHeight; + + // Calculate dynamic margin-bottom based on container height + const dynamicMarginBottom = containerHeightPx * 0.04; // Example: 5% of container height + setMarginBottom(dynamicMarginBottom); + }, []); + const createCanvases = () => { if (!canvasContainerRef.current) return; @@ -107,12 +117,10 @@ const createCanvases = () => { const fixedCanvasWidth = canvasContainerRef.current.clientWidth; // const containerHeight = canvasContainerRef.current.clientHeight || window.innerHeight - 50; - const containerHeightPx = canvasContainerRef.current.clientHeight || window.innerHeight -50; + const containerHeightPx = canvasContainerRef.current.clientHeight || window.innerHeight; const canvasHeight = containerHeightPx / numChannels; const containerHeightVh = (containerHeightPx / window.innerHeight) * 100; // Convert pixels to vh const canvasHeightVh = containerHeightVh / numChannels; // Each channel's height in vh - - const newCanvases: HTMLCanvasElement[] = []; const newWglPlots: WebglPlot[] = []; @@ -133,7 +141,7 @@ const createCanvases = () => { const wglp = new WebglPlot(canvas); newWglPlots.push(wglp); - + wglp.gScaleY = Zoom; const line = new WebglLine(getRandomColor(i), numX); line.lineSpaceX(-1, 2 / numX); wglp.addLine(line); @@ -146,8 +154,6 @@ const createCanvases = () => { setLines(newLines); }; - - const getRandomColor = (i: number): ColorRGBA => { // Define bright colors const colors: ColorRGBA[] = [ @@ -190,9 +196,6 @@ const createCanvases = () => { }, [lines,wglPlots]); // Add dependencies here - - - useEffect(() => { createCanvases(); }, [numChannels]); @@ -231,11 +234,13 @@ const createCanvases = () => { return ( -
+
{/* Canvas container taking 70% of the screen height */} -
+
-
+
diff --git a/src/components/Connection.tsx b/src/components/Connection.tsx index 79d0fa2..d346c4b 100644 --- a/src/components/Connection.tsx +++ b/src/components/Connection.tsx @@ -29,15 +29,7 @@ import { TooltipProvider, TooltipTrigger, } from "./ui/tooltip"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "./ui/select"; import { BitSelection } from "./DataPass"; - import { Separator } from "./ui/separator"; import { Popover, @@ -89,7 +81,6 @@ const Connection: React.FC = ({ const endTimeRef = useRef(null); // Ref to store the end time of the recording const startTimeRef = useRef(null); // Ref to store the start time of the recording const bufferRef = useRef([]); // Ref to store the data temporary buffer during recording - const chartRef = useRef([]); // Define chartRef using useRef const portRef = useRef(null); // Ref to store the serial port const indexedDBRef = useRef(null); const [ifBits, setifBits] = useState("auto"); @@ -101,8 +92,8 @@ const Connection: React.FC = ({ const writerRef = useRef | null>( null ); - const bufferdRef = useRef([]); - const [bufferFull, setBufferFull] = useState(false); + const bufferdRef =useRef([[], []]); // Two buffers: [0] and [1] + // const [bufferFull, setBufferFull] = useState(false); const bufferSize = 10; // Maximum size for each channel buffer const channelCount = 7; // Number of channels const togglePause = () => { @@ -137,6 +128,7 @@ const Connection: React.FC = ({ } }; + const decreaseZoom = () => { if (Zoom > 1) { SetZoom(Zoom - 1); // Decrease canvas count but not below 1 @@ -370,10 +362,10 @@ const Connection: React.FC = ({ const counter = packet[2]; // Extract the counter value from the packet channelData.push(counter); // Add the counter to the channel data dataSteam(channelData); // Pass the channel data to the LineData function for further processing - addToBuffer(channelData); // Add the new data to the buffer if (isRecordingRef.current) { // Check if recording is enabled + addToBuffer(channelData); bufferRef.current.push(channelData); // Store the channel data in the recording buffer } @@ -404,32 +396,58 @@ const Connection: React.FC = ({ } }; - - // Function to add channel data to the buffer - const addToBuffer = (channelData: number[]) => { - if (channelData.length !== channelCount) { - console.error(`Expected ${channelCount} channels, but got ${channelData.length}`); - return; - } - // Add the channel data to the buffer - bufferdRef.current.push(channelData); - // Check if the buffer is full - if (bufferdRef.current.length === bufferSize) { - setBufferFull(true); +const bufferSize1 = 500; // Number of arrays to store per buffer +// const bufferdRef1 = useRef([[], []]); // Two buffers: [0] and [1] +const activeBufferIndex = useRef(0); // Ref instead of state +// const [bufferFull, setBufferFull] = useState([false, false]); // Flags to check if buffers are full +const [isProcessing, setIsProcessing] = useState(false); // Track if a buffer is currently being processed + + + +const processBuffer = (bufferIndex: number) => { + console.log(`Processing buffer ${bufferIndex}...`); + + // Simulate asynchronous processing (replace this with actual processing logic) + setTimeout(() => { + console.log(`Finished processing buffer ${bufferIndex}.`); - // Process the buffer data (e.g., plot or save) - // console.log("Buffer is full and ready for use:", bufferdRef.current); + // Clear the processed buffer after completion + bufferdRef.current[bufferIndex] = []; - // Reset the buffer for reuse - bufferdRef.current = []; - setBufferFull(false); // Reset the flag after processing + // Mark processing as finished + setIsProcessing(false); + }, 1000); // Simulated delay for processing +}; + +const addToBuffer = (channelData: number[]) => { + const currentBuffer = bufferdRef.current[activeBufferIndex.current]; // Get the active buffer + + // Add the channel data to the active buffer + currentBuffer.push(channelData); + + // Check if the active buffer is full + if (currentBuffer.length === bufferSize1 && !isProcessing) { + console.log(`Buffer ${activeBufferIndex.current} is full, preparing to switch buffers.`); + console.log(bufferdRef.current[activeBufferIndex.current]); + // Set processing to true to prevent duplicate processing + setIsProcessing(true); + + // Process the full buffer in the background + processBuffer(activeBufferIndex.current); + + // Immediately switch to the next buffer for new data using ref + const nextBufferIndex = activeBufferIndex.current === 0 ? 1 : 0; + activeBufferIndex.current = nextBufferIndex; // Update the ref directly + console.log(`Switched to buffer ${nextBufferIndex}`); } }; - const convertToCSV = (data: any[]): string => { + + +const convertToCSV = (data: any[]): string => { if (data.length === 0) return ""; const header = Object.keys(data[0]); @@ -785,7 +803,7 @@ const Connection: React.FC = ({ }; return ( -
+
{/* Left-aligned section */}
{isRecordingRef.current && ( @@ -861,12 +879,12 @@ const Connection: React.FC = ({
{/* Center-aligned buttons */} -
+
{/* Connection button with tooltip */} -