Add callbacks for connect / disconnect

Author: sebromero

libraries/Camera/extras/WebSerialCamera/app.js

@@ -1,7 +1,6 @@
 const connectButton = document.getElementById('connect');
 const refreshButton = document.getElementById('refresh');
 const startButton = document.getElementById('start');
-const disconnectButton = document.getElementById('disconnect');
 const saveImageButton = document.getElementById('save-image');
 const canvas = document.getElementById('bitmapCanvas');
 const ctx = canvas.getContext('2d');
@@ -40,6 +39,15 @@ const stopBits = 2; // Adjust this value based on your device's stop bits
 const imageDataProcessor = new ImageDataProcessor(ctx, mode, imageWidth, imageHeight);
 const connectionHandler = new SerialConnectionHandler(baudRate, dataBits, stopBits, "even", "hardware", bufferSize);
 
+connectionHandler.onConnect = () => {
+  connectButton.textContent = 'Disconnect';
+  renderStream();
+};
+
+connectionHandler.onDisconnect = () => {
+  connectButton.textContent = 'Connect';
+};
+
 function renderBitmap(bytes, width, height) {
   canvas.width = width;
   canvas.height = height;
@@ -65,12 +73,13 @@ async function renderFrame(){
 
 startButton.addEventListener('click', renderStream);
 connectButton.addEventListener('click', async () => { 
-  await connectionHandler.requestSerialPort();
-  if(await connectionHandler.connectSerial()){
-    renderStream();
+  if(connectionHandler.isConnected()){
+    connectionHandler.disconnectSerial();
+  } else {
+    await connectionHandler.requestSerialPort();
+    await connectionHandler.connectSerial();
   }
 });
-disconnectButton.addEventListener('click', () => connectionHandler.disconnectSerial());
 refreshButton.addEventListener('click', () => {
   renderFrame();
 });
@@ -83,31 +92,11 @@ saveImageButton.addEventListener('click', () => {
   link.remove();
 });
 
-navigator.serial.addEventListener("connect", (e) => {
-  // Connect to `e.target` or add it to a list of available ports.
-  console.log('🔌 Serial port became available. VID: 0x' + e.target.getInfo().usbVendorId.toString(16));
-  connectionHandler.autoConnect().then((connected) => {
-    if(connected){
-      renderStream();
-    };
-  });
-});
-
-navigator.serial.addEventListener("disconnect", (e) => {
-  // Remove `e.target` from the list of available ports.
-  console.log('❌ Serial port lost. VID: 0x' + e.target.getInfo().usbVendorId.toString(16));
-  currentPort = null;  
-});
-
 // On page load event, try to connect to the serial port
 window.addEventListener('load', async () => {
   console.log('🚀 Page loaded. Trying to connect to serial port...');
   setTimeout(() => {
-    connectionHandler.autoConnect().then((connected) => {
-      if (connected) {
-        renderStream();
-      };
-    });
+    connectionHandler.autoConnect();
   }, 1000);
 });
 

libraries/Camera/extras/WebSerialCamera/index.html

@@ -11,7 +11,6 @@
     <canvas id="bitmapCanvas"></canvas>
     <div id="controls">
       <button id="connect">Connect</button>
-      <button id="disconnect">Disconnect</button>
       <button id="save-image">Save Image</button>
       <button id="refresh">Refresh</button>
       <button id="start">Start</button>

libraries/Camera/extras/WebSerialCamera/serialConnectionHandler.js

@@ -12,6 +12,7 @@ class SerialConnectionHandler {
         this.timeout = timeout;
         this.currentPort = null;
         this.currentReader = null;
+        this.registerEvents();
     }
 
     async requestSerialPort() {
@@ -27,7 +28,7 @@ class SerialConnectionHandler {
         }
     }
 
-    isConnected(){
+    isConnected() {
         return this.currentPort?.readable != null;
     }
 
@@ -44,6 +45,7 @@ class SerialConnectionHandler {
                 flowControl: this.flowControl
             });
             console.log('✅ Connected to serial port.');
+            if(this.onConnect) this.onConnect();
             return true;
         } catch (error) {
             return false;
@@ -58,6 +60,7 @@ class SerialConnectionHandler {
             await this.currentReader?.cancel();
             await port.close();
             console.log('🔌 Disconnected from serial port.');
+            if(this.onDisconnect) this.onDisconnect();
         } catch (error) {
             console.error('💣 Error occurred while disconnecting: ' + error.message);
         };
@@ -106,7 +109,7 @@ class SerialConnectionHandler {
                     if (timeout) {
                         timeoutID = setTimeout(() => {
                             console.log('⌛️ Timeout occurred while reading.');
-                            if (this.currentPort.readable) reader?.cancel();
+                            if (this.currentPort?.readable) reader?.cancel();
                         }, timeout);
                     }
 
@@ -129,8 +132,7 @@ class SerialConnectionHandler {
                 }
 
             } catch (error) {
-                console.log('💣 Error occurred while reading: ');
-                console.log(error);
+                console.log('💣 Error occurred while reading: ' + error.message);
             } finally {
                 keepReading = false;
                 // console.log('🔓 Releasing reader lock...');
@@ -141,17 +143,17 @@ class SerialConnectionHandler {
         return bytesRead;
     }
 
-    async requestFrame(){
-        if(!this.currentPort?.writable) {
-          console.log('🚫 Port is not writable. Ignoring request...');
-          return;
+    async requestFrame() {
+        if (!this.currentPort?.writable) {
+            console.log('🚫 Port is not writable. Ignoring request...');
+            return;
         }
         // console.log('Writing 1 to the serial port...');
         // Write a 1 to the serial port
         const writer = this.currentPort.writable.getWriter();
         await writer.write(new Uint8Array([1]));
         await writer.close();
-      }
+    }
 
     async getFrame(totalBytes) {
         if (!this.currentPort) return;
@@ -161,4 +163,18 @@ class SerialConnectionHandler {
         // Read the given amount of bytes
         return await this.readBytes(totalBytes, this.timeout);
     }
+
+    registerEvents() {
+        navigator.serial.addEventListener("connect", (e) => {
+            // Connect to `e.target` or add it to a list of available ports.
+            console.log('🔌 Serial port became available. VID: 0x' + e.target.getInfo().usbVendorId.toString(16));
+            this.autoConnect();
+        });
+
+        navigator.serial.addEventListener("disconnect", (e) => {
+            console.log('❌ Serial port lost. VID: 0x' + e.target.getInfo().usbVendorId.toString(16));
+            this.currentPort = null;
+            if(this.onDisconnect) this.onDisconnect();
+        });
+    }
 }