Merge pull request #54 from bcmi-labs/monitor

Serial Monitor

Author: jbicker

arduino-ide-extension/package.json

@@ -23,7 +23,10 @@
     "@theia/search-in-workspace": "next",
     "@types/ps-tree": "^1.1.0",
     "@types/which": "^1.3.1",
+    "@types/react-select": "^3.0.0",
+    "@types/google-protobuf": "^3.7.1",
     "css-element-queries": "^1.2.0",
+    "react-select": "^3.0.4",
     "p-queue": "^5.0.0",
     "ps-tree": "^1.2.0",
     "tree-kill": "^1.2.1",

arduino-ide-extension/src/browser/arduino-commands.ts

@@ -42,15 +42,4 @@ export namespace ArduinoCommands {
     export const TOGGLE_PRO_MODE: Command = {
         id: "arduino-toggle-pro-mode"
     }
-
-    export const CONNECT_TODO: Command = {
-        id: 'connect-to-attached-board',
-        label: 'Connect to Attached Board'
-    }
-
-    export const SEND: Command = {
-        id: 'send',
-        label: 'Send a Message to the Connected Board'
-    }
-
 }

arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx

@@ -5,7 +5,7 @@ import { EditorWidget } from '@theia/editor/lib/browser/editor-widget';
 import { MessageService } from '@theia/core/lib/common/message-service';
 import { CommandContribution, CommandRegistry, Command } from '@theia/core/lib/common/command';
 import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
-import { BoardsService, AttachedSerialBoard } from '../common/protocol/boards-service';
+import { BoardsService } from '../common/protocol/boards-service';
 import { ArduinoCommands } from './arduino-commands';
 import { CoreService } from '../common/protocol/core-service';
 import { WorkspaceServiceExt } from './workspace-service-ext';
@@ -26,8 +26,6 @@ import {
     StatusBar,
     ShellLayoutRestorer,
     StatusBarAlignment,
-    QuickOpenItem,
-    QuickOpenMode,
     QuickOpenService,
     LabelProvider
 } from '@theia/core/lib/browser';
@@ -47,6 +45,8 @@ import { BoardsToolBarItem } from './boards/boards-toolbar-item';
 import { BoardsConfig } from './boards/boards-config';
 import { MonitorService } from '../common/protocol/monitor-service';
 import { ConfigService } from '../common/protocol/config-service';
+import { MonitorConnection } from './monitor/monitor-connection';
+import { MonitorViewContribution } from './monitor/monitor-view-contribution';
 
 export namespace ArduinoMenus {
     export const SKETCH = [...MAIN_MENU_BAR, '3_sketch'];
@@ -72,9 +72,6 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
     @inject(MonitorService)
     protected readonly monitorService: MonitorService;
 
-    // TODO: make this better!
-    protected connectionId: string | undefined;
-
     @inject(WorkspaceServiceExt)
     protected readonly workspaceServiceExt: WorkspaceServiceExt;
 
@@ -143,6 +140,8 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
 
     @inject(ConfigService)
     protected readonly configService: ConfigService;
+    @inject(MonitorConnection)
+    protected readonly monitorConnection: MonitorConnection;
 
     protected boardsToolbarItem: BoardsToolBarItem | null;
     protected wsSketchCount: number = 0;
@@ -197,13 +196,19 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
                 commands={this.commands}
                 boardsServiceClient={this.boardsServiceClient}
                 boardService={this.boardsService} />,
-            isVisible: widget => this.isArduinoToolbar(widget)
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left'
+        });
+        registry.registerItem({
+            id: 'toggle-serial-monitor',
+            command: MonitorViewContribution.OPEN_SERIAL_MONITOR,
+            tooltip: 'Toggle Serial Monitor',
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'right'
         })
     }
 
     registerCommands(registry: CommandRegistry): void {
         registry.registerCommand(ArduinoCommands.VERIFY, {
-            isVisible: widget => this.isArduinoToolbar(widget),
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
             isEnabled: widget => true,
             execute: async () => {
                 const widget = this.getCurrentWidget();
@@ -231,7 +236,7 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
             }
         });
         registry.registerCommand(ArduinoCommands.UPLOAD, {
-            isVisible: widget => this.isArduinoToolbar(widget),
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
             isEnabled: widget => true,
             execute: async () => {
                 const widget = this.getCurrentWidget();
@@ -244,6 +249,9 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
                     return;
                 }
 
+                const connectionConfig = this.monitorConnection.connectionConfig;
+                await this.monitorConnection.disconnect();
+
                 try {
                     const { boardsConfig } = this.boardsServiceClient;
                     if (!boardsConfig || !boardsConfig.selectedBoard) {
@@ -256,12 +264,16 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
                     await this.coreService.upload({ uri: uri.toString(), board: boardsConfig.selectedBoard, port: selectedPort });
                 } catch (e) {
                     await this.messageService.error(e.toString());
+                } finally {
+                    if (connectionConfig) {
+                        await this.monitorConnection.connect(connectionConfig);
+                    }
                 }
             }
         });
         registry.registerCommand(ArduinoCommands.SHOW_OPEN_CONTEXT_MENU, {
-            isVisible: widget => this.isArduinoToolbar(widget),
-            isEnabled: widget => this.isArduinoToolbar(widget),
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
+            isEnabled: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
             execute: async (widget: Widget, target: EventTarget) => {
                 if (this.wsSketchCount) {
                     const el = (target as HTMLElement).parentElement;
@@ -287,8 +299,8 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
             }
         })
         registry.registerCommand(ArduinoCommands.SAVE_SKETCH, {
-            isEnabled: widget => this.isArduinoToolbar(widget),
-            isVisible: widget => this.isArduinoToolbar(widget),
+            isEnabled: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
             execute: async (sketch: Sketch) => {
                 registry.executeCommand(CommonCommands.SAVE_ALL.id);
             }
@@ -324,65 +336,6 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
             },
             isToggled: () => ARDUINO_PRO_MODE
         });
-        registry.registerCommand(ArduinoCommands.CONNECT_TODO, {
-            execute: async () => {
-                const { boardsConfig } = this.boardsServiceClient;
-                const { selectedBoard, selectedPort } = boardsConfig;
-                if (!selectedBoard) {
-                    this.messageService.warn('No boards selected.');
-                    return;
-                }
-                const { name } = selectedBoard;
-                if (!selectedPort) {
-                    this.messageService.warn(`No ports selected for board: '${name}'.`);
-                    return;
-                }
-                const attachedBoards = await this.boardsService.getAttachedBoards();
-                const connectedBoard = attachedBoards.boards.filter(AttachedSerialBoard.is).find(board => BoardsConfig.Config.sameAs(boardsConfig, board));
-                if (!connectedBoard) {
-                    this.messageService.warn(`The selected '${name}' board is not connected on ${selectedPort}.`);
-                    return;
-                }
-                if (this.connectionId) {
-                    console.log('>>> Disposing existing monitor connection before establishing a new one...');
-                    const result = await this.monitorService.disconnect(this.connectionId);
-                    if (!result) {
-                        // TODO: better!!!
-                        console.error(`Could not close connection: ${this.connectionId}. Check the backend logs.`);
-                    } else {
-                        console.log(`<<< Disposed ${this.connectionId} connection.`)
-                    }
-                }
-                const { connectionId } = await this.monitorService.connect({ board: selectedBoard, port: selectedPort });
-                this.connectionId = connectionId;
-            }
-        });
-        registry.registerCommand(ArduinoCommands.SEND, {
-            isEnabled: () => !!this.connectionId,
-            execute: async () => {
-                const { monitorService, connectionId } = this;
-                const model = {
-                    onType(lookFor: string, acceptor: (items: QuickOpenItem[]) => void): void {
-                        acceptor([
-                            new QuickOpenItem({
-                                label: "Type your message and press 'Enter' to send it to the board. Escape to cancel.",
-                                run: (mode: QuickOpenMode): boolean => {
-                                    if (mode !== QuickOpenMode.OPEN) {
-                                        return false;
-                                    }
-                                    monitorService.send(connectionId!, lookFor + '\n');
-                                    return true;
-                                }
-                            })
-                        ]);
-                    }
-                };
-                const options = {
-                    placeholder: "Your message. The message will be suffixed with a LF ['\\n'].",
-                };
-                this.quickOpenService.open(model, options);
-            }
-        })
     }
 
     registerMenus(registry: MenuModelRegistry) {
@@ -555,13 +508,6 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
         return undefined;
     }
 
-    private isArduinoToolbar(maybeToolbarWidget: any): boolean {
-        if (maybeToolbarWidget instanceof ArduinoToolbar) {
-            return true;
-        }
-        return false;
-    }
-
     private toUri(arg: any): URI | undefined {
         if (arg instanceof URI) {
             return arg;

arduino-ide-extension/src/browser/arduino-frontend-module.ts

@@ -57,12 +57,12 @@ import { BoardItemRenderer } from './boards/boards-item-renderer';
 import { MonitorServiceClientImpl } from './monitor/monitor-service-client-impl';
 import { MonitorServicePath, MonitorService, MonitorServiceClient } from '../common/protocol/monitor-service';
 import { ConfigService, ConfigServicePath } from '../common/protocol/config-service';
+import { MonitorWidget } from './monitor/monitor-widget';
+import { MonitorViewContribution } from './monitor/monitor-view-contribution';
+import { MonitorConnection } from './monitor/monitor-connection';
+import { MonitorModel } from './monitor/monitor-model';
 const ElementQueries = require('css-element-queries/src/ElementQueries');
 
-if (!ARDUINO_PRO_MODE) {
-    require('../../src/browser/style/silent-bottom-panel-tabs.css');
-}
-
 export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Unbind, isBound: interfaces.IsBound, rebind: interfaces.Rebind) => {
     ElementQueries.listen();
     ElementQueries.init();
@@ -155,12 +155,23 @@ export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Un
         return workspaceServiceExt;
     });
 
+    // Serial Monitor
+    bind(MonitorModel).toSelf().inSingletonScope();
+    bind(MonitorWidget).toSelf();
+    bindViewContribution(bind, MonitorViewContribution);
+    bind(TabBarToolbarContribution).toService(MonitorViewContribution);
+    bind(WidgetFactory).toDynamicValue(context => ({
+        id: MonitorWidget.ID,
+        createWidget: () => context.container.get(MonitorWidget)
+    }));
     // Frontend binding for the monitor service.
     bind(MonitorService).toDynamicValue(context => {
         const connection = context.container.get(WebSocketConnectionProvider);
         const client = context.container.get(MonitorServiceClientImpl);
         return connection.createProxy(MonitorServicePath, client);
     }).inSingletonScope();
+    // MonitorConnection
+    bind(MonitorConnection).toSelf().inSingletonScope();
     // Monitor service client to receive and delegate notifications from the backend.
     bind(MonitorServiceClientImpl).toSelf().inSingletonScope();
     bind(MonitorServiceClient).toDynamicValue(context => {

arduino-ide-extension/src/browser/monitor/monitor-connection.ts

@@ -0,0 +1,53 @@
+import { injectable, inject } from "inversify";
+import { MonitorService, ConnectionConfig } from "../../common/protocol/monitor-service";
+import { Emitter, Event } from "@theia/core";
+
+@injectable()
+export class MonitorConnection {
+
+    @inject(MonitorService)
+    protected readonly monitorService: MonitorService;
+
+    connectionId: string | undefined;
+
+    protected _connectionConfig: ConnectionConfig | undefined;
+
+    protected readonly onConnectionChangedEmitter = new Emitter<string | undefined>();
+    readonly onConnectionChanged: Event<string | undefined> = this.onConnectionChangedEmitter.event;
+
+    get connectionConfig(): ConnectionConfig | undefined {
+        return this._connectionConfig;
+    }
+
+    async connect(config: ConnectionConfig): Promise<string | undefined> {
+        if (this.connectionId) {
+            await this.disconnect();
+        }
+        const { connectionId } = await this.monitorService.connect(config);
+        this.connectionId = connectionId;
+        this._connectionConfig = config;
+
+        this.onConnectionChangedEmitter.fire(this.connectionId);
+
+        return connectionId;
+    }
+
+    async disconnect(): Promise<boolean> {
+        let result = true;
+        const connections = await this.monitorService.getConnectionIds();
+        if (this.connectionId && connections.findIndex(id => id === this.connectionId) >= 0) {
+            console.log('>>> Disposing existing monitor connection before establishing a new one...');
+            result = await this.monitorService.disconnect(this.connectionId);
+            if (!result) {
+                // TODO: better!!!
+                console.error(`Could not close connection: ${this.connectionId}. Check the backend logs.`);
+            } else {
+                console.log(`<<< Disposed ${this.connectionId} connection.`);
+                this.connectionId = undefined;
+                this._connectionConfig = undefined;
+                this.onConnectionChangedEmitter.fire(this.connectionId);
+            }
+        }
+        return result;
+    }
+}

arduino-ide-extension/src/browser/monitor/monitor-model.ts

@@ -0,0 +1,58 @@
+import { injectable } from "inversify";
+import { Emitter } from "@theia/core";
+
+export namespace MonitorModel {
+    export interface Data {
+        autoscroll: boolean,
+        timestamp: boolean,
+        baudRate: number,
+        lineEnding: string
+    }
+}
+
+@injectable()
+export class MonitorModel {
+
+    protected readonly onChangeEmitter = new Emitter<void>();
+
+    readonly onChange = this.onChangeEmitter.event;
+
+    protected _autoscroll: boolean = true;
+    protected _timestamp: boolean = false;
+    baudRate: number;
+    lineEnding: string = '\n';
+
+    get autoscroll(): boolean {
+        return this._autoscroll;
+    }
+
+    get timestamp(): boolean {
+        return this._timestamp;
+    }
+
+    toggleAutoscroll(): void {
+        this._autoscroll = !this._autoscroll;
+        this.onChangeEmitter.fire(undefined);
+    }
+
+    toggleTimestamp(): void {
+        this._timestamp = !this._timestamp;
+        this.onChangeEmitter.fire(undefined);
+    }
+
+    restore(model: MonitorModel.Data) {
+        this._autoscroll = model.autoscroll;
+        this._timestamp = model.timestamp;
+        this.baudRate = model.baudRate;
+        this.lineEnding = model.lineEnding;
+    }
+
+    store(): MonitorModel.Data {
+        return {
+            autoscroll: this._autoscroll,
+            timestamp: this._timestamp,
+            baudRate: this.baudRate,
+            lineEnding: this.lineEnding
+        }
+    }
+}