Skip to content

Commit

Permalink
canvas improved
Browse files Browse the repository at this point in the history
  • Loading branch information
@Amanmahe
Amanmahe committed Oct 4, 2024
1 parent 2163fd9 commit ef38ff3
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 46 deletions.
29 changes: 17 additions & 12 deletions src/components/Canvas.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ const Canvas= forwardRef( ({
const [wglPlots, setWglPlots] = useState<WebglPlot[]>([]);
const [lines, setLines] = useState<WebglLine[]>([]);
const linesRef = useRef<WebglLine[]>([]);
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
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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[] = [];
Expand All @@ -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);
Expand All @@ -146,8 +154,6 @@ const createCanvases = () => {
setLines(newLines);
};



const getRandomColor = (i: number): ColorRGBA => {
// Define bright colors
const colors: ColorRGBA[] = [
Expand Down Expand Up @@ -190,9 +196,6 @@ const createCanvases = () => {

}, [lines,wglPlots]); // Add dependencies here




useEffect(() => {
createCanvases();
}, [numChannels]);
Expand Down Expand Up @@ -231,11 +234,13 @@ const createCanvases = () => {


return (
<div className="flex justify-center items-center h-[84vh] mb-3">
<div
style={{ marginBottom: `${marginBottom}px` }} // Apply the dynamic margin-bottom here
className="flex justify-center items-center h-[80vh] mb-5 mt-3">
{/* Canvas container taking 70% of the screen height */}
<div className="flex flex-col justify-center items-start w-full ">
<div className="flex flex-col justify-center items-start w-full px-3">
<div className="grid w-full h-full relative">
<div className="canvas-container flex flex-wrap justify-center items-center h-[80vh] w-full" ref={canvasContainerRef} ></div>
<div className="canvas-container flex flex-wrap justify-center items-center h-[80vh] w-full" ref={canvasContainerRef} ></div>
</div>
</div>
</div>
Expand Down
86 changes: 52 additions & 34 deletions src/components/Connection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -89,7 +81,6 @@ const Connection: React.FC<ConnectionProps> = ({
const endTimeRef = useRef<number | null>(null); // Ref to store the end time of the recording
const startTimeRef = useRef<number | null>(null); // Ref to store the start time of the recording
const bufferRef = useRef<number[][]>([]); // Ref to store the data temporary buffer during recording
const chartRef = useRef<SmoothieChart[]>([]); // Define chartRef using useRef
const portRef = useRef<SerialPort | null>(null); // Ref to store the serial port
const indexedDBRef = useRef<IDBDatabase | null>(null);
const [ifBits, setifBits] = useState<BitSelection>("auto");
Expand All @@ -101,8 +92,8 @@ const Connection: React.FC<ConnectionProps> = ({
const writerRef = useRef<WritableStreamDefaultWriter<Uint8Array> | null>(
null
);
const bufferdRef = useRef<number[][]>([]);
const [bufferFull, setBufferFull] = useState(false);
const bufferdRef =useRef<number[][][]>([[], []]); // 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 = () => {
Expand Down Expand Up @@ -137,6 +128,7 @@ const Connection: React.FC<ConnectionProps> = ({
}
};


const decreaseZoom = () => {
if (Zoom > 1) {
SetZoom(Zoom - 1); // Decrease canvas count but not below 1
Expand Down Expand Up @@ -370,10 +362,10 @@ const Connection: React.FC<ConnectionProps> = ({
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
}

Expand Down Expand Up @@ -404,32 +396,58 @@ const Connection: React.FC<ConnectionProps> = ({
}
};


// 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<number[][][]>([[], []]); // 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]);
Expand Down Expand Up @@ -785,7 +803,7 @@ const Connection: React.FC<ConnectionProps> = ({
};

return (
<div className="flex items-center justify-center h-4 mb-2 px-4 z-50">
<div className="fixed bottom-0 left-0 right-0 relative flex items-center justify-center h-4 px-4 z-50">
{/* Left-aligned section */}
<div className="absolute left-4 flex items-center space-x-1">
{isRecordingRef.current && (
Expand Down Expand Up @@ -861,12 +879,12 @@ const Connection: React.FC<ConnectionProps> = ({
</div>

{/* Center-aligned buttons */}
<div className="flex gap-3 items-center">
<div className=" relative flex gap-3 items-center ">
{/* Connection button with tooltip */}
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button className="bg-primary gap-2" onClick={handleClick}>
<Button className="bg-primary gap-2 bottom-0" onClick={handleClick}>
{isConnected ? (
<>
Disconnect
Expand All @@ -890,7 +908,7 @@ const Connection: React.FC<ConnectionProps> = ({
{isConnected && (
<TooltipProvider>
<Tooltip>
<div className="flex items-center mx-0 px-0">
<div className="flex items-center mx-0 px-0 ">
{/* Decrease Canvas Button */}
<Tooltip>
<TooltipTrigger asChild>
Expand Down

0 comments on commit ef38ff3

Please sign in to comment.