Add start stop sequence transformer

sebromero · sebromero · commit c9299d45ebf5 · 2024-01-17T07:15:00.000-03:00
diff --git a/libraries/Camera/examples/CameraCaptureWebSerial/CameraCaptureWebSerial.ino b/libraries/Camera/examples/CameraCaptureWebSerial/CameraCaptureWebSerial.ino
@@ -52,7 +52,9 @@ If resolution higher than 320x240 is required, please use external RAM via
   SDRAM.begin();
 */
 #define CHUNK_SIZE 512  // Size of chunks in bytes
-#define RESOLUTION CAMERA_R320x240
+#define RESOLUTION  CAMERA_R320x240 // CAMERA_R160x120
+constexpr uint8_t START_SEQUENCE[4] = { 0xfa, 0xce, 0xfe, 0xed };
+constexpr uint8_t STOP_SEQUENCE[4] = { 0xda, 0xbb, 0xad, 0x00 };
 FrameBuffer fb;
 
 unsigned long lastUpdate = 0;
@@ -84,13 +86,20 @@ void sendFrame(){
     size_t bufferSize = cam.frameSize();
     digitalWrite(LED_BUILTIN, LOW);
     
+    Serial.write(START_SEQUENCE, sizeof(START_SEQUENCE));
+    Serial.flush();
+    delay(1);
+
     // Split buffer into chunks
     for(size_t i = 0; i < bufferSize; i += CHUNK_SIZE) {
       size_t chunkSize = min(bufferSize - i, CHUNK_SIZE);
       Serial.write(buffer + i, chunkSize);
       Serial.flush();
       delay(1);  // Optional: Add a small delay to allow the receiver to process the chunk
     }    
+    Serial.write(STOP_SEQUENCE, sizeof(STOP_SEQUENCE));
+    Serial.flush();
+    delay(1);
     
     digitalWrite(LED_BUILTIN, HIGH);
   } else {
diff --git a/libraries/Camera/extras/WebSerialCamera/app.js b/libraries/Camera/extras/WebSerialCamera/app.js
@@ -11,7 +11,7 @@
  * to the serial port if it has been previously connected.
  * 2. The application requests the camera configuration (mode and resolution) from the board.
  * 3. The application starts reading the image data stream from the serial port. 
- * It waits until the calculated number of bytes have been read and then processes the data.
+ * It waits until the expected amount of bytes have been read and then processes the data.
  * 4. The processed image data is rendered on the canvas.
  * 
  * @author Sebastian Romero
@@ -25,6 +25,9 @@ const canvas = document.getElementById('bitmapCanvas');
 const ctx = canvas.getContext('2d');
 
 const imageDataTransfomer = new ImageDataTransformer(ctx);
+imageDataTransfomer.setStartSequence([0xfa, 0xce, 0xfe, 0xed]);
+imageDataTransfomer.setStopSequence([0xda, 0xbb, 0xad, 0x00]);
+
 // 🐣 Uncomment one of the following lines to apply a filter to the image data
 // imageDataTransfomer.filter = new GrayScaleFilter();
 // imageDataTransfomer.filter = new BlackAndWhiteFilter();
diff --git a/libraries/Camera/extras/WebSerialCamera/transformers.js b/libraries/Camera/extras/WebSerialCamera/transformers.js
@@ -4,6 +4,166 @@
  */
 
 
+/**
+ * Represents a transformer that processes incoming data between start and stop sequences.
+ */
+class StartStopSequenceTransformer {
+    constructor(startSequence = null, stopSequence = null, expectedBytes = null) {
+        this.startSequence = new Uint8Array(startSequence);
+        this.stopSequence = new Uint8Array(stopSequence);
+        this.expectedBytes = expectedBytes;
+        this.buffer = new Uint8Array(0);
+        this.controller = undefined;
+        this.waitingForStart = true;
+    }
+
+    /**
+     * Sets the start sequence for the received data.
+     * This is used to disregard any data before the start sequence.
+     * @param {Array<number>} startSequence - The start sequence as an array of numbers.
+     */
+    setStartSequence(startSequence) {
+        this.startSequence = new Uint8Array(startSequence);
+    }
+
+    /**
+     * Sets the stop sequence for the received data.
+     * This is used to know when the data has finished being sent and should be processed.
+     * @param {Array<number>} stopSequence - The stop sequence as an array of numbers.
+     */
+    setStopSequence(stopSequence) {
+        this.stopSequence = new Uint8Array(stopSequence);
+    }
+
+    /**
+     * Sets the expected number of bytes for the received data.
+     * This is used to check if the number of bytes matches the expected amount
+     * and discard the data if it doesn't.
+     * 
+     * @param {number} expectedBytes - The expected number of bytes.
+     */
+    setExpectedBytes(expectedBytes) {
+        this.expectedBytes = expectedBytes;
+    }
+
+    /**
+     * Transforms the incoming chunk of data and enqueues the processed bytes to the controller
+     * between start and stop sequences.
+     * 
+     * @param {Uint8Array} chunk - The incoming chunk of data.
+     * @param {TransformStreamDefaultController} controller - The controller for enqueuing processed bytes.
+     * @returns {Promise<void>} - A promise that resolves when the transformation is complete.
+     */
+    async transform(chunk, controller) {
+        this.controller = controller;
+
+        // Concatenate incoming chunk with existing buffer
+        this.buffer = new Uint8Array([...this.buffer, ...chunk]);
+
+        let startIndex = 0;
+
+        while (startIndex < this.buffer.length) {
+            if (this.waitingForStart) {
+                // Look for the start sequence
+                startIndex = this.indexOfSequence(this.buffer, this.startSequence, startIndex);
+
+                if (startIndex === -1) {
+                    // No start sequence found, discard the buffer
+                    this.buffer = new Uint8Array(0);
+                    return;
+                }
+
+                // Remove bytes before the start sequence
+                this.buffer = this.buffer.slice(startIndex + this.startSequence.length);
+                startIndex = 0; // Reset startIndex after removing bytes
+                this.waitingForStart = false;
+            }
+
+            // Look for the stop sequence
+            const stopIndex = this.indexOfSequence(this.buffer, this.stopSequence, startIndex);
+
+            if (stopIndex === -1) {
+                // No stop sequence found, wait for more data
+                return;
+            }
+
+            // Extract bytes between start and stop sequences
+            const bytesToProcess = this.buffer.slice(startIndex, stopIndex);
+            this.buffer = this.buffer.slice(stopIndex + this.stopSequence.length);
+
+            // Check if the number of bytes matches the expected amount
+            if (this.expectedBytes !== null && bytesToProcess.length !== this.expectedBytes) {
+                // Drop all bytes in the buffer to avoid broken data
+                throw new Error(`🚫 Expected ${this.expectedBytes} bytes, but got ${bytesToProcess.length} bytes instead.`);
+                this.buffer = new Uint8Array(0);
+                return;
+            }
+
+            // Notify the controller that bytes have been processed
+            controller.enqueue(this.convertBytes(bytesToProcess));
+            this.waitingForStart = true;
+        }
+    }
+
+    /**
+     * Flushes the buffer and processes any remaining bytes when the stream is closed.
+     * 
+     * @param {WritableStreamDefaultController} controller - The controller for the writable stream.
+     */
+    flush(controller) {
+        // Only enqueue the remaining bytes if they meet the expectedBytes criteria
+        if (this.buffer.length === this.expectedBytes || this.expectedBytes === null) {
+            controller?.enqueue(this.buffer);
+        }
+    }
+
+    /**
+     * Finds the index of the given sequence in the buffer.
+     * 
+     * @param {Uint8Array} buffer - The buffer to search.
+     * @param {Uint8Array} sequence - The sequence to find.
+     * @param {number} startIndex - The index to start searching from.
+     * @returns {number} - The index of the sequence in the buffer, or -1 if not found.
+     */
+    indexOfSequence(buffer, sequence, startIndex) {
+        for (let i = startIndex; i <= buffer.length - sequence.length; i++) {
+            if (this.isSubarray(buffer, sequence, i)) {
+                return i;
+            }
+        }
+        return -1;
+    }
+
+    /**
+     * Checks if a subarray is present at a given index in the buffer.
+     * 
+     * @param {Uint8Array} buffer - The buffer to check.
+     * @param {Uint8Array} subarray - The subarray to check.
+     * @param {number} index - The index to start checking from.
+     * @returns {boolean} - True if the subarray is present at the given index, false otherwise.
+     */
+    isSubarray(buffer, subarray, index) {
+        for (let i = 0; i < subarray.length; i++) {
+            if (buffer[index + i] !== subarray[i]) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    /**
+     * Converts bytes into higher-level data types.
+     * This method is meant to be overridden by subclasses.
+     * @param {Uint8Array} bytes 
+     * @returns 
+     */
+    convertBytes(bytes) {
+        return bytes;
+    }
+    
+}
+
+
 /**
  * A transformer class that waits for a specific number of bytes before processing them.
  */
@@ -77,9 +237,9 @@ class BytesWaitTransformer {
 /**
  * Represents an Image Data Transformer that converts bytes into image data.
  * See other example for PNGs here: https://github.com/mdn/dom-examples/blob/main/streams/png-transform-stream/png-transform-stream.js
- * @extends BytesWaitTransformer
+ * @extends StartStopSequenceTransformer
  */
-class ImageDataTransformer extends BytesWaitTransformer {
+class ImageDataTransformer extends StartStopSequenceTransformer {
     /**
      * Creates a new instance of the Transformer class.
      * @param {CanvasRenderingContext2D} context - The canvas rendering context.
@@ -110,7 +270,7 @@ class ImageDataTransformer extends BytesWaitTransformer {
         this.height = height;
         this.imageDataProcessor.setResolution(width, height);
         if(this.isConfigured()){
-            this.setBytesToWait(this.imageDataProcessor.getTotalBytes());
+            this.setExpectedBytes(this.imageDataProcessor.getTotalBytes());
         }
     }
 
