improved code

Author: Ritika Mishra

src/components/Canvas.tsx

@@ -60,10 +60,6 @@ const Canvas = forwardRef(
     const activeBufferIndexRef = useRef(0); // Initialize useRef with 0
     const dataIndicesRef = useRef<number[]>([]);  // Ref to store data indices
 
-    class ColorRGBA {
-      constructor(public r: number, public g: number, public b: number, public a: number) { }
-    }
-
     //select point
     const getpoints = useCallback((bits: BitSelection): number => {
       switch (bits) {
@@ -91,7 +87,7 @@ const Canvas = forwardRef(
 
     const processIncomingData = (incomingData: number[]) => {
       const currentBuffer = array3DRef.current[activeBufferIndexRef.current];
-    
+
       // Handle canvas count changes and reset buffers
       if (prevCanvasCountRef.current !== canvasCount) {
         for (let bufferIndex = 0; bufferIndex < 6; bufferIndex++) {
@@ -100,23 +96,23 @@ const Canvas = forwardRef(
         }
         prevCanvasCountRef.current = canvasCount;
       }
-    
+
       // Process incoming data for each canvas
       currentBuffer.forEach((buffer, i) => {
-        if (buffer.length >= dataPointCountRef.current || 
-            (!pauseRef.current && buffer.length < dataPointCountRef.current)) {
+        if (buffer.length >= dataPointCountRef.current ||
+          (!pauseRef.current && buffer.length < dataPointCountRef.current)) {
           currentBuffer[i] = [];
         }
         currentBuffer[i].push(incomingData[i + 1]);
       });
-    
+
       // Update snapshot and buffer index when data is ready
       if (currentBuffer[0].length >= dataPointCountRef.current) {
         snapShotRef.current[activeBufferIndexRef.current] = true;
         activeBufferIndexRef.current = (activeBufferIndexRef.current + 1) % 6;
         snapShotRef.current[activeBufferIndexRef.current] = false;
       }
-    
+
       // Update data indices for referencing past buffers
       dataIndicesRef.current = Array.from(
         { length: 5 },

src/components/Colors.ts

@@ -18,30 +18,22 @@ export const customColors = {
   'custom-16': '#F2728B',
 };
 
-export const lightThemeColors = Object.values(customColors).map((hex) => {
-  // Darken the colors more significantly for the light theme
-  return darkenColor(hex, 0.3); // Stronger darkening for light theme (0.3 instead of 0.1)
-});
-
-export const darkThemeColors = Object.values(customColors).map((hex) => {
-  // Lighten the colors slightly for the dark theme
-  return lightenColor(hex, 0.1); // Lightening for dark theme
-});
-
 // Function to darken a color
 function darkenColor(hex: string, amount: number): string {
+  validateInput(hex, amount);
   return adjustColor(hex, -amount); // Negative amount for darkening
 }
 
 // Function to lighten a color
 function lightenColor(hex: string, amount: number): string {
+  validateInput(hex, amount);
   return adjustColor(hex, amount); // Positive amount for lightening
 }
 
 // General color adjustment function (darkens or lightens based on amount)
 function adjustColor(hex: string, amount: number): string {
-  // Ensure that hex starts with '#'
-  if (hex[0] !== '#') {
+  // Validate hex format
+  if (!/^#[0-9A-Fa-f]{6}$/.test(hex)) {
     throw new Error('Invalid hex color');
   }
 
@@ -56,6 +48,29 @@ function adjustColor(hex: string, amount: number): string {
   g = Math.min(255, Math.max(0, g + Math.floor(255 * amount)));
   b = Math.min(255, Math.max(0, b + Math.floor(255 * amount)));
 
-  // Convert RGB back to hex
-  return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)}`;
+  // Convert RGB back to hex with leading zeros
+  return `#${[r, g, b]
+    .map(x => x.toString(16).padStart(2, '0'))
+    .join('')}`;
+}
+
+// Validate input for hex color and amount
+function validateInput(hex: string, amount: number): void {
+  if (!/^#[0-9A-Fa-f]{6}$/.test(hex)) {
+    throw new Error('Invalid hex color format');
+  }
+  if (amount < 0 || amount > 1) {
+    throw new Error('Amount must be between 0 and 1');
+  }
 }
+
+// Example usage
+export const lightThemeColors = Object.values(customColors).map((hex) => {
+  // Darken the colors more significantly for the light theme
+  return darkenColor(hex, 0.3); // Stronger darkening for light theme (0.3 instead of 0.1)
+});
+
+export const darkThemeColors = Object.values(customColors).map((hex) => {
+  // Lighten the colors slightly for the dark theme
+  return lightenColor(hex, 0.1); // Lightening for dark theme
+});

src/components/Connection.tsx

@@ -509,6 +509,7 @@ const Connection: React.FC<ConnectionProps> = ({
           channelCount: null,
           baudRate: null,
           serialTimeout: null,
+          usbProductId: null, // Add usbProductId to the return value
         };
       }
 
@@ -520,7 +521,14 @@ const Connection: React.FC<ConnectionProps> = ({
       );
 
       if (board) {
-        const { adc_resolution, channel_count, sampling_rate, baud_Rate, serial_timeout, device_name } = board;
+        const {
+          adc_resolution,
+          channel_count,
+          sampling_rate,
+          baud_Rate,
+          serial_timeout,
+          device_name,
+        } = board;
 
         // Update state and refs
         const bitSelection = adc_resolution as BitSelection;
@@ -536,13 +544,14 @@ const Connection: React.FC<ConnectionProps> = ({
         return {
           formattedInfo: (
             <>
-              {device_name} <br /> Product ID: {info.usbProductId}
+              {device_name}
             </>
           ),
           adcResolution: adc_resolution,
           channelCount: channel_count,
           baudRate: baud_Rate,
           serialTimeout: serial_timeout,
+          usbProductId: info.usbProductId, // Return usbProductId as well
         };
       }
 
@@ -554,11 +563,13 @@ const Connection: React.FC<ConnectionProps> = ({
         channelCount: null,
         baudRate: null,
         serialTimeout: null,
+        usbProductId: info.usbProductId, // Return the usbProductId even if no matching board is found
       };
     },
     [] // Dependency array
   );
 
+
   interface SavedDevice {
     usbVendorId: number;
     usbProductId: number;
@@ -705,6 +716,7 @@ const Connection: React.FC<ConnectionProps> = ({
             description: (
               <div className="mt-2 flex flex-col space-y-1">
                 <p>Device: {formattedInfo}</p>
+                <p>Product ID: {usbProductId}</p> {/* Display the Product ID */}
                 <p>Baud Rate: {baudRate}</p>
                 {adcResolution && <p>Resolution: {adcResolution} bits</p>}
                 {channelCount && <p>Channel: {channelCount}</p>}
@@ -807,7 +819,7 @@ const Connection: React.FC<ConnectionProps> = ({
         }
         portRef.current = null;
         setIsDeviceConnected(false); // Update connection state
-        toast("DisDeviceConnected from device", {
+        toast("Disconnected from device", {
           action: {
             label: "Reconnect",
             onClick: () => connectToDevice(),

src/components/boards.ts

@@ -53,6 +53,17 @@ export const BoardsList: ReadonlyArray<BoardConfig> = Object.freeze([
     channel_count: 8,
     baud_Rate: 115200,
   }),
+  createBoardConfig({
+    chords_id: "BLACK-PILL",
+    device_name: "Black Pill - STM32F4",
+    field_pid: 22336,
+    adc_resolution: 12,
+    channel_count: 10,
+    sampling_rate: 500,
+    serial_timeout: 200,
+    baud_Rate: 230400
+  }),
+
   createBoardConfig({
     chords_id: "NANO-CLONE",
     device_name: "Arduino Nano Clone",

workers/indexedDBWorker.ts

@@ -110,7 +110,7 @@ const openIndexedDB = async (): Promise<IDBDatabase> => {
 };
 
 // Helper function for IndexedDB transactions
-const performTransaction = async <T>(
+const performIndexDBTransaction = async <T>(
   db: IDBDatabase,
   storeName: string,
   mode: IDBTransactionMode,
@@ -133,7 +133,7 @@ const writeToIndexedDB = async (
   filename: string
 ): Promise<boolean> => {
   try {
-    const existingRecord = await performTransaction(db, "ChordsRecordings", "readwrite", (store) => {
+    const existingRecord = await performIndexDBTransaction(db, "ChordsRecordings", "readwrite", (store) => {
       return new Promise<any>((resolve, reject) => {
         const getRequest = store.get(filename);
         getRequest.onsuccess = () => resolve(getRequest.result);
@@ -143,7 +143,7 @@ const writeToIndexedDB = async (
 
     if (existingRecord) {
       existingRecord.content.push(...data);
-      await performTransaction(db, "ChordsRecordings", "readwrite", (store) => {
+      await performIndexDBTransaction(db, "ChordsRecordings", "readwrite", (store) => {
         return new Promise<void>((resolve, reject) => {
           const putRequest = store.put(existingRecord);
           putRequest.onsuccess = () => resolve();
@@ -152,7 +152,7 @@ const writeToIndexedDB = async (
       });
     } else {
       const newRecord = { filename, content: [...data] };
-      await performTransaction(db, "ChordsRecordings", "readwrite", (store) => {
+      await performIndexDBTransaction(db, "ChordsRecordings", "readwrite", (store) => {
         return new Promise<void>((resolve, reject) => {
           const putRequest = store.put(newRecord);
           putRequest.onsuccess = () => resolve();
@@ -172,7 +172,7 @@ const writeToIndexedDB = async (
 // Function to get all data from IndexedDB
 const getAllDataFromIndexedDB = async (db: IDBDatabase): Promise<any[]> => {
   try {
-    return await performTransaction(db, "ChordsRecordings", "readonly", (store) => {
+    return await performIndexDBTransaction(db, "ChordsRecordings", "readonly", (store) => {
       return new Promise<any[]>((resolve, reject) => {
         const request = store.getAll();
         request.onsuccess = () => resolve(request.result);
@@ -233,7 +233,7 @@ const saveAllDataAsZip = async (canvasCount: number, selectedChannels: number[])
   try {
     const db = await openIndexedDB();
 
-    const allData = await performTransaction(db, "ChordsRecordings", "readonly", (store) => {
+    const allData = await performIndexDBTransaction(db, "ChordsRecordings", "readonly", (store) => {
       return new Promise<any[]>((resolve, reject) => {
         const request = store.getAll();
         request.onsuccess = () => resolve(request.result);
@@ -275,7 +275,7 @@ const saveDataByFilename = async (
   try {
     const db = await openIndexedDB();
 
-    const record = await performTransaction(db, "ChordsRecordings", "readonly", (store) => {
+    const record = await performIndexDBTransaction(db, "ChordsRecordings", "readonly", (store) => {
       return new Promise<any>((resolve, reject) => {
         const index = store.index("filename");
         const getRequest = index.get(filename);
@@ -310,7 +310,7 @@ const saveDataByFilename = async (
 
 // Function to get file count from IndexedDB
 const getFileCountFromIndexedDB = async (db: IDBDatabase): Promise<string[]> => {
-  return performTransaction(db, "ChordsRecordings", "readonly", (store) => {
+  return performIndexDBTransaction(db, "ChordsRecordings", "readonly", (store) => {
     return new Promise<string[]>((resolve, reject) => {
       const filenames: string[] = [];
       const cursorRequest = store.openCursor();
@@ -342,7 +342,7 @@ const deleteFilesByFilename = async (filename: string) => {
       const db = (event.target as IDBOpenDBRequest).result;
 
       try {
-        await performTransaction(db, "ChordsRecordings", "readwrite", async (store) => {
+        await performIndexDBTransaction(db, "ChordsRecordings", "readwrite", async (store) => {
           if (!store.indexNames.contains("filename")) {
             throw new Error("Index 'filename' does not exist.");
           }
@@ -383,7 +383,7 @@ const deleteAllDataFromIndexedDB = async () => {
       const db = (event.target as IDBOpenDBRequest).result;
 
       try {
-        await performTransaction(db, "ChordsRecordings", "readwrite", async (store) => {
+        await performIndexDBTransaction(db, "ChordsRecordings", "readwrite", async (store) => {
           const clearRequest = store.clear();
 
           return new Promise<void>((resolveClear, rejectClear) => {