Working version for RGB

Author: sebromero

libraries/Camera/extras/WebSerialCamera/app.js

@@ -8,14 +8,31 @@ const ctx = canvas.getContext('2d');
 const UserActionAbortError = 8;
 const ArduinoUSBVendorId = 0x2341;
 
+let config = {
+  "RGB565": {
+    "convert": convertRGB565ToRGB888,
+    "bytesPerPixel": 2
+  },
+  "GRAYSCALE": {
+    "convert": convertGrayScaleToRGB888,
+    "bytesPerPixel": 1
+  },
+  "RGB888": {
+    "convert": convertToRGB888,
+    "bytesPerPixel": 3
+  }
+};
+
 const imageWidth = 320; // Adjust this value based on your bitmap width
 const imageHeight = 240; // Adjust this value based on your bitmap height
-const bytesPerPixel = 1; // Adjust this value based on your bitmap format
+const bytesPerPixel = 2; // Adjust this value based on your bitmap format
 // const mode = 'RGB565'; // Adjust this value based on your bitmap format
-const totalBytes = imageWidth * imageHeight * bytesPerPixel;
+const mode = 'GRAYSCALE'; // Adjust this value based on your bitmap format
+const totalBytes = imageWidth * imageHeight * config[mode].bytesPerPixel;
 
 // Set the buffer size to the total bytes. This allows to read the entire bitmap in one go.
 const bufferSize = Math.min(totalBytes, 16 * 1024 * 1024); // Max buffer size is 16MB
+const flowControl = 'hardware';
 const baudRate = 115200; // Adjust this value based on your device's baud rate
 const dataBits = 8; // Adjust this value based on your device's data bits
 const stopBits = 2; // Adjust this value based on your device's stop bits
@@ -85,7 +102,7 @@ async function readBytes(port, numBytes, timeout = null){
     const reader = port.readable.getReader();
     currentReader = reader;
     let timeoutID = null;
-    let count = 0;
+    // let count = 0;
 
     try {      
       while (bytesReadIdx < numBytes) {
@@ -129,9 +146,26 @@ async function readBytes(port, numBytes, timeout = null){
   return bytesRead;
 }
 
+// Get the pixel value using big endian
+// Big-endian: the most significant byte comes first
+function getPixelValue(data, index, bytesPerPixel){
+  if(bytesPerPixel == 1){
+    return data[index];
+  } else if(bytesPerPixel == 2){
+    return (data[index] << 8) | data[index + 1];
+  } else if(bytesPerPixel == 3){
+    return (data[index] << 16) | (data[index + 1] << 8) | data[index + 2];
+  } else if(bytesPerPixel == 4){
+    return (data[index] << 24) | (data[index + 1] << 16) | (data[index + 2] << 8) | data[index + 3];
+  }
+
+  return 0;
+}
+
 function renderBitmap(bytes, width, height) {
   canvas.width = width;
   canvas.height = height;
+  const bytesPerPixel = config[mode].bytesPerPixel;
   const BYTES_PER_ROW = width * bytesPerPixel;
   const BYTES_PER_COL = height * bytesPerPixel;
 
@@ -140,13 +174,14 @@ function renderBitmap(bytes, width, height) {
 
   for (let row = 0; row < BYTES_PER_ROW; row++) {
     for (let col = 0; col < BYTES_PER_COL; col++) {
-      const byte = bytes[row * BYTES_PER_COL + col];
-      const grayscaleValue = byte;
-
-      const idx = (row * BYTES_PER_COL + col) * 4;
-      data[idx] = grayscaleValue; // Red channel
-      data[idx + 1] = grayscaleValue; // Green channel
-      data[idx + 2] = grayscaleValue; // Blue channel
+      const dataIndex = (row * BYTES_PER_ROW) + (col * bytesPerPixel);      
+      const pixelValue = getPixelValue(bytes, dataIndex, bytesPerPixel);
+      const [r, g, b] = config[mode].convert(pixelValue);
+
+      const idx = ((row * width) + col) * 4;
+      data[idx] = r; // Red channel
+      data[idx + 1] = g; // Green channel
+      data[idx + 2] = b; // Blue channel
       data[idx + 3] = 255; // Alpha channel (opacity)
     }
   }
@@ -205,7 +240,7 @@ async function disconnectSerial(port) {
 startButton.addEventListener('click', renderStream);
 connectButton.addEventListener('click', async () => { 
   currentPort = await requestSerialPort();
-  if(await connectSerial(currentPort, baudRate, dataBits, stopBits, bufferSize)){
+  if(await connectSerial(currentPort, baudRate, dataBits, stopBits, bufferSize, flowControl)){
     renderStream();
   }
 });

libraries/Camera/extras/WebSerialCamera/conversion.js

@@ -9,3 +9,11 @@ function convertRGB565ToRGB888(pixelValue) {
     b <<= 3;
     return [r, g, b];
 }
+
+function convertGrayScaleToRGB888(pixelValue) {
+    return [pixelValue, pixelValue, pixelValue];
+}
+
+function convertToRGB888(pixelValue){
+   return [pixelValue[0], pixelValue[1], pixelValue[2]];
+}

libraries/Camera/extras/WebSerialCamera/index.html

@@ -4,14 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Web Serial Bitmap Reader</title>
-  <style>
-    #main-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 1rem;
-    }
-  </style>
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
   <div id="main-container">
@@ -23,6 +16,7 @@
       <button id="start">Start</button>
     </div>
   </div>
+  <script src="conversion.js"></script>
   <script src="app.js"></script>
 </body>
 </html>

libraries/Camera/extras/WebSerialCamera/style.css

@@ -0,0 +1,67 @@
+:root {
+    --main-control-color: #008184;
+    --main-control-color-hover: #005c5f;
+    --main-flexbox-gap: 16px;
+    --secondary-text-color: #87898b;
+}
+
+html {
+    font-size: 14px;
+}
+
+body {
+    font-family: 'Open Sans', sans-serif;
+    text-align: center;
+}
+
+#main-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    margin-top: 20px;
+}
+
+#controls {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+    margin-top: 20px;
+}
+
+canvas {
+    border-radius: 5px;
+}
+
+button {
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 700;
+    font-size: 1rem;
+    justify-content: center;
+    background-color: var(--main-control-color);
+    color: #fff;
+    cursor: pointer;
+    letter-spacing: 1.28px;
+    line-height: normal;
+    outline: none;
+    padding: 8px 18px;
+    text-align: center;
+    text-decoration: none;
+    border: 2px solid transparent;
+    border-radius: 32px;
+    text-transform: uppercase;
+    box-sizing: border-box;
+}
+
+button:hover {
+    background-color: var(--main-control-color-hover);
+}
+
+#refresh {
+    display: none;
+}
+
+#start {
+    display: none;
+}