Fix ui desync issue. Fix disconnection issue.

Author: raldone01

examples/device/webusb_serial/website/application.js

@@ -331,8 +331,11 @@
       uiStatusSpan.className = 'status status-' + level;
     }
 
-    updateUIConnectionState() {
-      if (this.currentPort && this.currentPort.isConnected) {
+    /// force_connected is used to instantly change the UI to the connected state while the device is still connecting
+    /// Otherwise we would have to wait for the connection to be established.
+    /// This can take until the device sends the first data packet.
+    updateUIConnectionState(force_connected = false) {
+      if (force_connected || (this.currentPort && this.currentPort.isConnected)) {
         uiConnectWebUsbSerialBtn.style.display = 'none';
         uiConnectSerialBtn.style.display = 'none';
         uiDisconnectBtn.style.display = 'block';
@@ -397,6 +400,7 @@
       try {
         this.setStatus('Requesting device...', 'info');
         this.currentPort = await serial.requestSerialPort();
+        this.updateUIConnectionState(true);
         this.currentPort.onReceiveError = error => this.onReceiveError(error);
         this.currentPort.onReceive = dataView => this.onReceive(dataView);
         await this.currentPort.connect();
@@ -449,6 +453,7 @@
         this.currentPort.onReceive = dataView => this.onReceive(dataView);
 
         try {
+          this.updateUIConnectionState(true);
           await this.currentPort.connect();
 
           // save the port to localStorage

examples/device/webusb_serial/website/serial.js

@@ -42,19 +42,9 @@ class SerialPort {
     }
   }
 
-  async _waitForReadLoopToFinish() {
-    if (this.readLoop) {
-      try {
-        await this.readLoop;
-      } catch (error) {}
-      this.readLoop = null;
-    }
-  }
-
   /// Stop reading and release port
   async disconnect() {
     this.isConnected = false;
-    await this._waitForReadLoopToFinish();
 
     if (this.reader) {
       try {
@@ -66,7 +56,8 @@ class SerialPort {
     if (this.writer) {
       try {
         await this.writer.close();
-      } catch (error) {}
+      } catch (error) { }
+      this.writer.releaseLock();
     }
 
     if (this.readableStreamClosed) {
@@ -160,15 +151,6 @@ class WebUsbSerialPort {
     this.readLoop = this._readLoop();
   }
 
-  async _waitForReadLoopToFinish() {
-    if (this.readLoop) {
-      try {
-        await this.readLoop;
-      } catch (error) {}
-      this.readLoop = null;
-    }
-  }
-
   /// Internal continuous read loop
   async _readLoop() {
     while (this.isConnected) {
@@ -189,7 +171,6 @@ class WebUsbSerialPort {
   /// Stop reading and release device
   async disconnect() {
     this.isConnected = false;
-    await this._waitForReadLoopToFinish();
     if (!this.device.opened) return;
     try {
       await this.device.controlTransferOut({
@@ -199,9 +180,7 @@ class WebUsbSerialPort {
         value: 0x00,
         index: this.interfaceNumber,
       });
-    } catch (error) {
-      console.log(error);
-    }
+    } catch (error) {}
     await this.device.close();
   }