From 7889f40834216fca0ffc2a36bb8c8b846531b082 Mon Sep 17 00:00:00 2001 From: Silvano Cerza Date: Thu, 10 Mar 2022 17:04:07 +0100 Subject: [PATCH] Changed MonitorWidget and children to use new monitor proxy --- .../browser/serial/monitor/monitor-widget.tsx | 120 ++++++++++++------ .../monitor/serial-monitor-send-input.tsx | 28 ++-- .../monitor/serial-monitor-send-output.tsx | 19 ++- 3 files changed, 96 insertions(+), 71 deletions(-) diff --git a/arduino-ide-extension/src/browser/serial/monitor/monitor-widget.tsx b/arduino-ide-extension/src/browser/serial/monitor/monitor-widget.tsx index f5e68df5..a7e02cec 100644 --- a/arduino-ide-extension/src/browser/serial/monitor/monitor-widget.tsx +++ b/arduino-ide-extension/src/browser/serial/monitor/monitor-widget.tsx @@ -9,14 +9,16 @@ import { Widget, MessageLoop, } from '@theia/core/lib/browser/widgets'; -import { SerialConfig } from '../../../common/protocol/serial-service'; import { ArduinoSelect } from '../../widgets/arduino-select'; -import { SerialModel } from '../serial-model'; -import { SerialConnectionManager } from '../serial-connection-manager'; import { SerialMonitorSendInput } from './serial-monitor-send-input'; import { SerialMonitorOutput } from './serial-monitor-send-output'; import { BoardsServiceProvider } from '../../boards/boards-service-provider'; import { nls } from '@theia/core/lib/common'; +import { + MonitorManagerProxyClient, + MonitorSettings, +} from '../../../common/protocol'; +import { MonitorModel } from '../../monitor-model'; @injectable() export class MonitorWidget extends ReactWidget { @@ -26,11 +28,11 @@ export class MonitorWidget extends ReactWidget { ); static readonly ID = 'serial-monitor'; - @inject(SerialModel) - protected readonly serialModel: SerialModel; + @inject(MonitorModel) + protected readonly monitorModel: MonitorModel; - @inject(SerialConnectionManager) - protected readonly serialConnection: SerialConnectionManager; + @inject(MonitorManagerProxyClient) + protected readonly monitorManagerProxy: MonitorManagerProxyClient; @inject(BoardsServiceProvider) protected readonly boardsServiceProvider: BoardsServiceProvider; @@ -57,17 +59,27 @@ export class MonitorWidget extends ReactWidget { this.scrollOptions = undefined; this.toDispose.push(this.clearOutputEmitter); this.toDispose.push( - Disposable.create(() => this.serialConnection.closeWStoBE()) + Disposable.create(() => this.monitorManagerProxy.disconnect()) + ); + + this.toDispose.push( + this.boardsServiceProvider.onBoardsConfigChanged( + async ({ selectedBoard, selectedPort }) => { + if (selectedBoard && selectedBoard.fqbn && selectedPort) { + await this.monitorManagerProxy.startMonitor( + selectedBoard, + selectedPort + ); + } + } + ) ); } @postConstruct() protected init(): void { this.update(); - this.toDispose.push( - this.serialConnection.onConnectionChanged(() => this.clearConsole()) - ); - this.toDispose.push(this.serialModel.onChange(() => this.update())); + this.toDispose.push(this.monitorModel.onChange(() => this.update())); } clearConsole(): void { @@ -79,11 +91,6 @@ export class MonitorWidget extends ReactWidget { super.dispose(); } - protected onAfterAttach(msg: Message): void { - super.onAfterAttach(msg); - this.serialConnection.openWSToBE(); - } - onCloseRequest(msg: Message): void { this.closing = true; super.onCloseRequest(msg); @@ -119,7 +126,7 @@ export class MonitorWidget extends ReactWidget { }; protected get lineEndings(): OptionsType< - SerialMonitorOutput.SelectOption + SerialMonitorOutput.SelectOption > { return [ { @@ -144,32 +151,61 @@ export class MonitorWidget extends ReactWidget { ]; } - protected get baudRates(): OptionsType< - SerialMonitorOutput.SelectOption - > { - const baudRates: Array = [ - 300, 1200, 2400, 4800, 9600, 19200, 38400, 57600, 115200, - ]; - return baudRates.map((baudRate) => ({ - label: baudRate + ' baud', - value: baudRate, - })); + private getCurrentSettings(): MonitorSettings { + const board = this.boardsServiceProvider.boardsConfig.selectedBoard; + const port = this.boardsServiceProvider.boardsConfig.selectedPort; + if (!board || !port) { + return {}; + } + return this.monitorManagerProxy.getCurrentSettings(board, port); + } + + ////////////////////////////////////////////////// + ////////////////////IMPORTANT///////////////////// + ////////////////////////////////////////////////// + // baudRates and selectedBaudRates as of now are hardcoded + // like this to retrieve the baudrate settings from the ones + // received by the monitor. + // We're doing it like since the frontend as of now doesn't + // support a fully customizable list of options that would + // be require to support pluggable monitors completely. + // As soon as the frontend UI is updated to support + // any custom settings this methods MUST be removed and + // made generic. + // + // This breaks if the user tries to open a monitor that + // doesn't support the baudrate setting. + protected get baudRates(): string[] { + const settings = this.getCurrentSettings(); + const baudRateSettings = settings['baudrate']; + if (!baudRateSettings) { + return []; + } + return baudRateSettings.values; + } + + protected get selectedBaudRate(): string { + const settings = this.getCurrentSettings(); + const baudRateSettings = settings['baudrate']; + if (!baudRateSettings) { + return ''; + } + return baudRateSettings.selectedValue; } protected render(): React.ReactNode { const { baudRates, lineEndings } = this; const lineEnding = - lineEndings.find((item) => item.value === this.serialModel.lineEnding) || + lineEndings.find((item) => item.value === this.monitorModel.lineEnding) || lineEndings[1]; // Defaults to `\n`. - const baudRate = - baudRates.find((item) => item.value === this.serialModel.baudRate) || - baudRates[4]; // Defaults to `9600`. + const baudRate = baudRates.find((item) => item === this.selectedBaudRate); return (
@@ -196,8 +232,8 @@ export class MonitorWidget extends ReactWidget {
@@ -208,18 +244,18 @@ export class MonitorWidget extends ReactWidget { protected readonly onSend = (value: string) => this.doSend(value); protected async doSend(value: string): Promise { - this.serialConnection.send(value); + this.monitorManagerProxy.send(value); } protected readonly onChangeLineEnding = ( - option: SerialMonitorOutput.SelectOption + option: SerialMonitorOutput.SelectOption ) => { - this.serialModel.lineEnding = option.value; + this.monitorModel.lineEnding = option.value; }; - protected readonly onChangeBaudRate = ( - option: SerialMonitorOutput.SelectOption - ) => { - this.serialModel.baudRate = option.value; + protected readonly onChangeBaudRate = (value: string) => { + const settings = this.getCurrentSettings(); + settings['baudrate'].selectedValue = value; + this.monitorManagerProxy.changeSettings(settings); }; } diff --git a/arduino-ide-extension/src/browser/serial/monitor/serial-monitor-send-input.tsx b/arduino-ide-extension/src/browser/serial/monitor/serial-monitor-send-input.tsx index e15d55ea..ed545fc8 100644 --- a/arduino-ide-extension/src/browser/serial/monitor/serial-monitor-send-input.tsx +++ b/arduino-ide-extension/src/browser/serial/monitor/serial-monitor-send-input.tsx @@ -3,12 +3,13 @@ import { Key, KeyCode } from '@theia/core/lib/browser/keys'; import { Board } from '../../../common/protocol/boards-service'; import { isOSX } from '@theia/core/lib/common/os'; import { DisposableCollection, nls } from '@theia/core/lib/common'; -import { SerialConnectionManager } from '../serial-connection-manager'; -import { SerialPlotter } from '../plotter/protocol'; +import { MonitorManagerProxyClient } from '../../../common/protocol'; +import { BoardsServiceProvider } from '../../boards/boards-service-provider'; export namespace SerialMonitorSendInput { export interface Props { - readonly serialConnection: SerialConnectionManager; + readonly boardsServiceProvider: BoardsServiceProvider; + readonly monitorManagerProxy: MonitorManagerProxyClient; readonly onSend: (text: string) => void; readonly resolveFocus: (element: HTMLElement | undefined) => void; } @@ -33,21 +34,9 @@ export class SerialMonitorSendInput extends React.Component< } componentDidMount(): void { - this.props.serialConnection.isBESerialConnected().then((connected) => { + this.props.monitorManagerProxy.isWSConnected().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 { @@ -70,14 +59,15 @@ export class SerialMonitorSendInput extends React.Component< } protected get placeholder(): string { - const serialConfig = this.props.serialConnection.getConfig(); - if (!this.state.connected || !serialConfig) { + const board = this.props.boardsServiceProvider.boardsConfig.selectedBoard; + const port = this.props.boardsServiceProvider.boardsConfig.selectedPort; + if (!this.state.connected || !board || !port) { return nls.localize( 'arduino/serial/notConnected', 'Not connected. Select a board and a port to connect automatically.' ); } - const { board, port } = serialConfig; + return nls.localize( 'arduino/serial/message', "Message ({0} + Enter to send message to '{1}' on '{2}')", diff --git a/arduino-ide-extension/src/browser/serial/monitor/serial-monitor-send-output.tsx b/arduino-ide-extension/src/browser/serial/monitor/serial-monitor-send-output.tsx index 2c3df28f..38396512 100644 --- a/arduino-ide-extension/src/browser/serial/monitor/serial-monitor-send-output.tsx +++ b/arduino-ide-extension/src/browser/serial/monitor/serial-monitor-send-output.tsx @@ -2,10 +2,10 @@ import * as React from 'react'; import { Event } from '@theia/core/lib/common/event'; import { DisposableCollection } from '@theia/core/lib/common/disposable'; import { areEqual, FixedSizeList as List } from 'react-window'; -import { SerialModel } from '../serial-model'; -import { SerialConnectionManager } from '../serial-connection-manager'; import dateFormat = require('dateformat'); import { messagesToLines, truncateLines } from './monitor-utils'; +import { MonitorManagerProxyClient } from '../../../common/protocol'; +import { MonitorModel } from '../../monitor-model'; export type Line = { message: string; timestamp?: Date; lineLen: number }; @@ -24,7 +24,7 @@ export class SerialMonitorOutput extends React.Component< this.listRef = React.createRef(); this.state = { lines: [], - timestamp: this.props.serialModel.timestamp, + timestamp: this.props.monitorModel.timestamp, charCount: 0, }; } @@ -58,14 +58,13 @@ export class SerialMonitorOutput extends React.Component< componentDidMount(): void { this.scrollToBottom(); this.toDisposeBeforeUnmount.pushAll([ - this.props.serialConnection.onRead(({ messages }) => { + this.props.monitorManagerProxy.onMessagesReceived(({ messages }) => { const [newLines, totalCharCount] = messagesToLines( messages, this.state.lines, this.state.charCount ); const [lines, charCount] = truncateLines(newLines, totalCharCount); - this.setState({ lines, charCount, @@ -75,9 +74,9 @@ export class SerialMonitorOutput extends React.Component< this.props.clearConsoleEvent(() => this.setState({ lines: [], charCount: 0 }) ), - this.props.serialModel.onChange(({ property }) => { + this.props.monitorModel.onChange(({ property }) => { if (property === 'timestamp') { - const { timestamp } = this.props.serialModel; + const { timestamp } = this.props.monitorModel; this.setState({ timestamp }); } if (property === 'autoscroll') { @@ -93,7 +92,7 @@ export class SerialMonitorOutput extends React.Component< } scrollToBottom = ((): void => { - if (this.listRef.current && this.props.serialModel.autoscroll) { + if (this.listRef.current && this.props.monitorModel.autoscroll) { this.listRef.current.scrollToItem(this.state.lines.length, 'end'); } }).bind(this); @@ -128,8 +127,8 @@ const Row = React.memo(_Row, areEqual); export namespace SerialMonitorOutput { export interface Props { - readonly serialModel: SerialModel; - readonly serialConnection: SerialConnectionManager; + readonly monitorModel: MonitorModel; + readonly monitorManagerProxy: MonitorManagerProxyClient; readonly clearConsoleEvent: Event; readonly height: number; }