Ttimeout on config change to prevent serial busy

Author: fstasi

arduino-ide-extension/src/browser/serial/monitor/monitor-widget.tsx

@@ -57,7 +57,7 @@ export class MonitorWidget extends ReactWidget {
     this.scrollOptions = undefined;
     this.toDispose.push(this.clearOutputEmitter);
     this.toDispose.push(
-      Disposable.create(() => this.serialConnection.closeSerial())
+      Disposable.create(() => this.serialConnection.closeWStoBE())
     );
   }
 
@@ -81,7 +81,7 @@ export class MonitorWidget extends ReactWidget {
 
   protected onAfterAttach(msg: Message): void {
     super.onAfterAttach(msg);
-    this.serialConnection.openSerial();
+    this.serialConnection.openWSToBE();
   }
 
   onCloseRequest(msg: Message): void {
@@ -169,7 +169,7 @@ export class MonitorWidget extends ReactWidget {
         <div className="head">
           <div className="send">
             <SerialMonitorSendInput
-              serialConfig={this.serialConnection.serialConfig}
+              serialConnection={this.serialConnection}
               resolveFocus={this.onFocusResolved}
               onSend={this.onSend}
             />

arduino-ide-extension/src/browser/serial/monitor/serial-monitor-send-input.tsx

@@ -1,39 +1,66 @@
 import * as React from 'react';
 import { Key, KeyCode } from '@theia/core/lib/browser/keys';
 import { Board, Port } from '../../../common/protocol/boards-service';
-import { SerialConfig } from '../../../common/protocol/serial-service';
 import { isOSX } from '@theia/core/lib/common/os';
-import { nls } from '@theia/core/lib/common';
+import { DisposableCollection, nls } from '@theia/core/lib/common';
+import { SerialConnectionManager } from '../serial-connection-manager';
+import { SerialPlotter } from '../plotter/protocol';
 
 export namespace SerialMonitorSendInput {
   export interface Props {
-    readonly serialConfig?: SerialConfig;
+    readonly serialConnection: SerialConnectionManager;
     readonly onSend: (text: string) => void;
     readonly resolveFocus: (element: HTMLElement | undefined) => void;
   }
   export interface State {
     text: string;
+    connected: boolean;
   }
 }
 
 export class SerialMonitorSendInput extends React.Component<
   SerialMonitorSendInput.Props,
   SerialMonitorSendInput.State
 > {
+  protected toDisposeBeforeUnmount = new DisposableCollection();
+
   constructor(props: Readonly<SerialMonitorSendInput.Props>) {
     super(props);
-    this.state = { text: '' };
+    this.state = { text: '', connected: false };
     this.onChange = this.onChange.bind(this);
     this.onSend = this.onSend.bind(this);
     this.onKeyDown = this.onKeyDown.bind(this);
   }
 
+  componentDidMount(): void {
+    this.props.serialConnection.isBESerialConnected().then((connected) => {
+      this.setState({ connected });
+    });
+
+    this.toDisposeBeforeUnmount.pushAll([
+      this.props.serialConnection.onRead(({ messages }) => {
+        if (
+          messages.command ===
+            SerialPlotter.Protocol.Command.MIDDLEWARE_CONFIG_CHANGED &&
+          'connected' in messages.data
+        ) {
+          this.setState({ connected: messages.data.connected });
+        }
+      }),
+    ]);
+  }
+
+  componentWillUnmount(): void {
+    // TODO: "Your preferred browser's local storage is almost full." Discard `content` before saving layout?
+    this.toDisposeBeforeUnmount.dispose();
+  }
+
   render(): React.ReactNode {
     return (
       <input
         ref={this.setRef}
         type="text"
-        className={`theia-input ${this.props.serialConfig ? '' : 'warning'}`}
+        className={`theia-input ${this.state.connected ? '' : 'warning'}`}
         placeholder={this.placeholder}
         value={this.state.text}
         onChange={this.onChange}
@@ -43,8 +70,8 @@ export class SerialMonitorSendInput extends React.Component<
   }
 
   protected get placeholder(): string {
-    const { serialConfig } = this.props;
-    if (!serialConfig) {
+    const serialConfig = this.props.serialConnection.getConfig();
+    if (!this.state.connected || !serialConfig) {
       return nls.localize(
         'arduino/serial/notConnected',
         'Not connected. Select a board and a port to connect automatically.'
@@ -55,10 +82,12 @@ export class SerialMonitorSendInput extends React.Component<
       'arduino/serial/message',
       "Message ({0} + Enter to send message to '{1}' on '{2}'",
       isOSX ? '⌘' : nls.localize('vscode/keybindingLabels/ctrlKey', 'Ctrl'),
-      Board.toString(board, {
-        useFqbn: false,
-      }),
-      Port.toString(port)
+      board
+        ? Board.toString(board, {
+            useFqbn: false,
+          })
+        : 'unknown',
+      port ? Port.toString(port) : 'unknown'
     );
   }
 

arduino-ide-extension/src/browser/serial/serial-connection-manager.ts

@@ -116,8 +116,8 @@ export class SerialConnectionManager {
   }
 
   /**
-   * Set the config passing only the properties that has changed. If some has changed and the serial is open,
-   * we try to reconnect
+   * Updated the config in the BE passing only the properties that has changed.
+   * BE will create a new connection if needed.
    *
    * @param newConfig the porperties of the config that has changed
    */
@@ -150,10 +150,6 @@ export class SerialConnectionManager {
     return this.wsPort;
   }
 
-  isWebSocketConnected(): boolean {
-    return !!this.webSocket?.url;
-  }
-
   protected handleWebSocketChanged(wsPort: number): void {
     this.wsPort = wsPort;
   }
@@ -168,7 +164,7 @@ export class SerialConnectionManager {
     return await this.serialService.isSerialPortOpen();
   }
 
-  openSerial(): void {
+  openWSToBE(): void {
     if (!isSerialConfig(this.config)) {
       this.messageService.error(
         `Please select a board and a port to open the serial connection.`
@@ -189,7 +185,7 @@ export class SerialConnectionManager {
     }
   }
 
-  closeSerial(): void {
+  closeWStoBE(): void {
     if (this.webSocket) {
       try {
         this.webSocket.close();
@@ -297,28 +293,6 @@ export class SerialConnectionManager {
     }
   }
 
-  // async connect(): Promise<Status> {
-  //   if (await this.serialService.isSerialPortOpen())
-  //     return Status.ALREADY_CONNECTED;
-  //   if (!isSerialConfig(this.config)) return Status.NOT_CONNECTED;
-
-  //   console.info(
-  //     `>>> Creating serial connection for ${Board.toString(
-  //       this.config.board
-  //     )} on port ${Port.toString(this.config.port)}...`
-  //   );
-  //   const connectStatus = await this.serialService.connect(this.config);
-  //   if (Status.isOK(connectStatus)) {
-  //     console.info(
-  //       `<<< Serial connection created for ${Board.toString(this.config.board, {
-  //         useFqbn: false,
-  //       })} on port ${Port.toString(this.config.port)}.`
-  //     );
-  //   }
-
-  //   return Status.isOK(connectStatus);
-  // }
-
   async reconnectAfterUpload(): Promise<void> {
     try {
       if (isSerialConfig(this.config)) {
@@ -339,31 +313,6 @@ export class SerialConnectionManager {
     }
   }
 
-  async disconnectSerialPort(): Promise<Status> {
-    if (!(await this.serialService.isSerialPortOpen())) {
-      return Status.OK;
-    }
-
-    console.log('>>> Disposing existing serial connection...');
-    const status = await this.serialService.disconnect();
-    if (Status.isOK(status)) {
-      console.log(
-        `<<< Disposed serial connection. Was: ${Serial.Config.toString(
-          this.config
-        )}`
-      );
-      this.wsPort = undefined;
-    } else {
-      console.warn(
-        `<<< Could not dispose serial connection. Activate connection: ${Serial.Config.toString(
-          this.config
-        )}`
-      );
-    }
-
-    return status;
-  }
-
   /**
    * Sends the data to the connected serial port.
    * The desired EOL is appended to `data`, you do not have to add it.
@@ -384,7 +333,7 @@ export class SerialConnectionManager {
     return this.onConnectionChangedEmitter.event;
   }
 
-  get onRead(): Event<{ messages: string[] }> {
+  get onRead(): Event<{ messages: any }> {
     return this.onReadEmitter.event;
   }
 
@@ -399,18 +348,6 @@ export class SerialConnectionManager {
 }
 
 export namespace Serial {
-  export enum Type {
-    Monitor = 'Monitor',
-    Plotter = 'Plotter',
-  }
-
-  /**
-   * The state represents which types of connections are needed by the client, and it should match whether the Serial Monitor
-   * or the Serial Plotter are open or not in the GUI. It's an array cause it's possible to have both, none or only one of
-   * them open
-   */
-  export type State = Serial.Type[];
-
   export namespace Config {
     export function toString(config: Partial<SerialConfig>): string {
       if (!isSerialConfig(config)) return '';

arduino-ide-extension/src/node/serial/serial-service-impl.ts

@@ -176,15 +176,18 @@ export class SerialServiceImpl implements SerialService {
       'error',
       ((error: Error) => {
         const serialError = ErrorWithCode.toSerialError(error, serialConfig);
-        this.disconnect(serialError).then(() => {
-          if (this.theiaFEClient) {
-            this.theiaFEClient.notifyError(serialError);
-          }
-          if (serialError.code === undefined) {
-            // Log the original, unexpected error.
-            this.logger.error(error);
-          }
-        });
+        if (serialError.code !== SerialError.ErrorCodes.CLIENT_CANCEL) {
+          this.disconnect(serialError).then(() => {
+            if (this.theiaFEClient) {
+              this.theiaFEClient.notifyError(serialError);
+            }
+          });
+        }
+        if (serialError.code === undefined) {
+          // Log the original, unexpected error.
+          this.logger.error(error);
+        }
+        // });
       }).bind(this)
     );
 
@@ -231,27 +234,6 @@ export class SerialServiceImpl implements SerialService {
     // empty the queue every 32ms (~30fps)
     this.flushMessagesInterval = setInterval(flushMessagesToFrontend, 32);
 
-    // converts 'ab\nc\nd' => [ab\n,c\n,d]
-    const stringToArray = (string: string, separator = '\n') => {
-      const retArray: string[] = [];
-
-      let prevChar = separator;
-
-      for (let i = 0; i < string.length; i++) {
-        const currChar = string[i];
-
-        if (prevChar === separator) {
-          retArray.push(currChar);
-        } else {
-          const lastWord = retArray[retArray.length - 1];
-          retArray[retArray.length - 1] = lastWord + currChar;
-        }
-
-        prevChar = currChar;
-      }
-      return retArray;
-    };
-
     duplex.on(
       'data',
       ((resp: StreamingOpenResponse) => {
@@ -301,41 +283,48 @@ export class SerialServiceImpl implements SerialService {
   }
 
   public async disconnect(reason?: SerialError): Promise<Status> {
-    try {
-      if (this.onMessageReceived) {
-        this.onMessageReceived.dispose();
-        this.onMessageReceived = null;
-      }
-      if (this.flushMessagesInterval) {
-        clearInterval(this.flushMessagesInterval);
-        this.flushMessagesInterval = null;
-      }
+    return new Promise<Status>((resolve, reject) => {
+      try {
+        if (this.onMessageReceived) {
+          this.onMessageReceived.dispose();
+          this.onMessageReceived = null;
+        }
+        if (this.flushMessagesInterval) {
+          clearInterval(this.flushMessagesInterval);
+          this.flushMessagesInterval = null;
+        }
 
-      if (
-        !this.serialConnection &&
-        reason &&
-        reason.code === SerialError.ErrorCodes.CLIENT_CANCEL
-      ) {
-        return Status.OK;
-      }
-      this.logger.info('>>> Disposing serial connection...');
-      if (!this.serialConnection) {
-        this.logger.warn('<<< Not connected. Nothing to dispose.');
-        return Status.NOT_CONNECTED;
+        if (
+          !this.serialConnection &&
+          reason &&
+          reason.code === SerialError.ErrorCodes.CLIENT_CANCEL
+        ) {
+          return Status.OK;
+        }
+        this.logger.info('>>> Disposing serial connection...');
+        if (!this.serialConnection) {
+          this.logger.warn('<<< Not connected. Nothing to dispose.');
+          return Status.NOT_CONNECTED;
+        }
+        const { duplex, config } = this.serialConnection;
+
+        this.logger.info(
+          `<<< Disposed serial connection for ${Board.toString(config.board, {
+            useFqbn: false,
+          })} on port ${Port.toString(config.port)}.`
+        );
+
+        duplex.cancel();
+      } finally {
+        this.serialConnection = undefined;
+        this.updateWsConfigParam({ connected: !!this.serialConnection });
+        this.messages.length = 0;
+
+        setTimeout(() => {
+          resolve(Status.OK);
+        }, 200);
       }
-      const { duplex, config } = this.serialConnection;
-      duplex.cancel();
-      this.logger.info(
-        `<<< Disposed serial connection for ${Board.toString(config.board, {
-          useFqbn: false,
-        })} on port ${Port.toString(config.port)}.`
-      );
-      this.serialConnection = undefined;
-      return Status.OK;
-    } finally {
-      this.updateWsConfigParam({ connected: !!this.serialConnection });
-      this.messages.length = 0;
-    }
+    });
   }
 
   async sendMessageToSerial(message: string): Promise<Status> {
@@ -366,3 +355,24 @@ export class SerialServiceImpl implements SerialService {
     }
   }
 }
+
+// converts 'ab\nc\nd' => [ab\n,c\n,d]
+function stringToArray(string: string, separator = '\n') {
+  const retArray: string[] = [];
+
+  let prevChar = separator;
+
+  for (let i = 0; i < string.length; i++) {
+    const currChar = string[i];
+
+    if (prevChar === separator) {
+      retArray.push(currChar);
+    } else {
+      const lastWord = retArray[retArray.length - 1];
+      retArray[retArray.length - 1] = lastWord + currChar;
+    }
+
+    prevChar = currChar;
+  }
+  return retArray;
+}