plotter communication

Author: fstasi

Diff for: arduino-ide-extension/package.json

@@ -19,7 +19,7 @@
     "test:watch": "mocha --watch --watch-files lib \"./lib/test/**/*.test.js\""
   },
   "dependencies": {
-    "arduino-serial-plotter-webapp": "0.0.2",
+    "arduino-serial-plotter-webapp": "0.0.3",
     "@grpc/grpc-js": "^1.3.7",
     "@theia/application-package": "1.18.0",
     "@theia/core": "1.18.0",

Diff for: arduino-ide-extension/src/browser/monitor/monitor-connection.ts

@@ -20,6 +20,7 @@ import {
 import { BoardsConfig } from '../boards/boards-config';
 import { MonitorModel } from './monitor-model';
 import { NotificationCenter } from '../notification-center';
+import { ThemeService } from '@theia/core/lib/browser/theming';
 
 export enum SerialType {
   Monitor = 'Monitor',
@@ -55,6 +56,9 @@ export class MonitorConnection {
   @inject(MonitorModel)
   protected readonly model: MonitorModel;
 
+  @inject(ThemeService)
+  protected readonly themeService: ThemeService;
+
   protected _state: MonitorConnection.State = [];
   protected _connected: boolean;
 
@@ -89,21 +93,27 @@ export class MonitorConnection {
   protected init(): void {
     this.monitorServiceClient.onWebSocketChanged(
       this.handleWebSocketChanged.bind(this)
-    ),
-      this.monitorServiceClient.onError(this.handleError.bind(this)),
-      this.boardsServiceProvider.onBoardsConfigChanged(
-        this.handleBoardConfigChange.bind(this)
-      ),
-      this.notificationCenter.onAttachedBoardsChanged(
-        this.handleAttachedBoardsChanged.bind(this)
-      );
+    );
+    this.monitorServiceClient.onError(this.handleError.bind(this));
+    this.boardsServiceProvider.onBoardsConfigChanged(
+      this.handleBoardConfigChange.bind(this)
+    );
+    this.notificationCenter.onAttachedBoardsChanged(
+      this.handleAttachedBoardsChanged.bind(this)
+    );
     // Handles the `baudRate` changes by reconnecting if required.
     this.monitorModel.onChange(({ property }) => {
       if (property === 'baudRate' && this.connected) {
         const { boardsConfig } = this.boardsServiceProvider;
         this.handleBoardConfigChange(boardsConfig);
       }
     });
+
+    this.themeService.onDidColorThemeChange((theme) => {
+      this.monitorService.updateWsConfigParam({
+        darkTheme: theme.newTheme.type === 'dark',
+      });
+    });
   }
 
   protected setConfig(newConfig: Partial<MonitorConfig>): void {
@@ -392,7 +402,7 @@ export class MonitorConnection {
     }
     return new Promise<Status>((resolve) => {
       this.monitorService
-        .send(data + this.monitorModel.lineEnding)
+        .sendMessageToSerial(data + this.monitorModel.lineEnding)
         .then(() => resolve(Status.OK));
     });
   }
@@ -419,6 +429,10 @@ export class MonitorConnection {
       if (ports.some((port) => Port.equals(port, boardsConfig.selectedPort))) {
         const { selectedBoard: board, selectedPort: port } = boardsConfig;
         const { baudRate } = this.monitorModel;
+        // update the baudrate on the config
+        this.monitorService.updateWsConfigParam({
+          currentBaudrate: baudRate,
+        });
         const newConfig: MonitorConfig = { board, port, baudRate };
         this.setConfig(newConfig);
       }

Diff for: arduino-ide-extension/src/browser/plotter/plotter-frontend-contribution.ts

@@ -1,3 +1,4 @@
+import { ThemeService } from '@theia/core/lib/browser/theming';
 import { injectable, inject } from 'inversify';
 import {
   Command,
@@ -37,6 +38,9 @@ export class PlotterFrontendContribution extends Contribution {
   @inject(MonitorModel)
   protected readonly model: MonitorModel;
 
+  @inject(ThemeService)
+  protected readonly themeService: ThemeService;
+
   @inject(MonitorConnection)
   protected readonly monitorConnection: MonitorConnection;
 
@@ -90,7 +94,8 @@ export class PlotterFrontendContribution extends Contribution {
     const initConfig: SerialPlotter.Config = {
       baudrates: MonitorConfig.BaudRates.map((b) => b),
       currentBaudrate: this.model.baudRate,
-      darkTheme: true,
+      currentLineEnding: this.model.lineEnding,
+      darkTheme: this.themeService.getCurrentTheme().type === 'dark',
       wsPort,
     };
     const urlWithParams = queryString.stringifyUrl(

Diff for: arduino-ide-extension/src/browser/plotter/protocol.ts

@@ -2,18 +2,17 @@ export namespace SerialPlotter {
   export type Config = {
     currentBaudrate: number;
     baudrates: number[];
+    currentLineEnding: string;
     darkTheme: boolean;
     wsPort: number;
     generate?: boolean;
   };
   export namespace Protocol {
     export enum Command {
-      PLOTTER_REQUEST_CONFIG = 'PLOTTER_REQUEST_CONFIG',
-      PLOTTER_READY = 'PLOTTER_READY',
       PLOTTER_SET_BAUDRATE = 'PLOTTER_SET_BAUDRATE',
       PLOTTER_SET_LINE_ENDING = 'PLOTTER_SET_LINE_ENDING',
       PLOTTER_SEND_MESSAGE = 'PLOTTER_SEND_MESSAGE',
-      PARENT_SET_CONFIG = 'PARENT_SET_CONFIG',
+      MIDDLEWARE_CONFIG_CHANGED = 'MIDDLEWARE_CONFIG_CHANGED',
     }
     export type Message = {
       command: SerialPlotter.Protocol.Command;

Diff for: arduino-ide-extension/src/common/protocol/monitor-service.ts

@@ -1,6 +1,7 @@
 import { JsonRpcServer } from '@theia/core/lib/common/messaging/proxy-factory';
 import { Board, Port } from './boards-service';
 import { Event } from '@theia/core/lib/common/event';
+import { SerialPlotter } from '../../browser/plotter/protocol';
 
 export interface Status {}
 export type OK = Status;
@@ -23,7 +24,8 @@ export const MonitorService = Symbol('MonitorService');
 export interface MonitorService extends JsonRpcServer<MonitorServiceClient> {
   connect(config: MonitorConfig): Promise<Status>;
   disconnect(): Promise<Status>;
-  send(message: string): Promise<Status>;
+  sendMessageToSerial(message: string): Promise<Status>;
+  updateWsConfigParam(config: Partial<SerialPlotter.Config>): Promise<void>;
 }
 
 export interface MonitorConfig {

Diff for: arduino-ide-extension/src/node/monitor/monitor-service-impl.ts

@@ -19,6 +19,7 @@ import {
 import { MonitorClientProvider } from './monitor-client-provider';
 import { Board, Port } from '../../common/protocol/boards-service';
 import { WebSocketService } from '../web-socket/web-socket-service';
+import { SerialPlotter } from '../../browser/plotter/protocol';
 
 interface ErrorWithCode extends Error {
   readonly code: number;
@@ -71,7 +72,7 @@ export class MonitorServiceImpl implements MonitorService {
   protected readonly webSocketService: WebSocketService;
 
   protected client?: MonitorServiceClient;
-  protected connection?: {
+  protected serialConnection?: {
     duplex: ClientDuplexStream<StreamingOpenRequest, StreamingOpenResponse>;
     config: MonitorConfig;
   };
@@ -84,20 +85,30 @@ export class MonitorServiceImpl implements MonitorService {
 
   dispose(): void {
     this.logger.info('>>> Disposing monitor service...');
-    if (this.connection) {
+    if (this.serialConnection) {
       this.disconnect();
     }
     this.logger.info('<<< Disposed monitor service.');
     this.client = undefined;
   }
 
+  async updateWsConfigParam(
+    config: Partial<SerialPlotter.Config>
+  ): Promise<void> {
+    const msg: SerialPlotter.Protocol.Message = {
+      command: SerialPlotter.Protocol.Command.MIDDLEWARE_CONFIG_CHANGED,
+      data: config,
+    };
+    this.webSocketService.sendMessage(JSON.stringify(msg));
+  }
+
   async connect(config: MonitorConfig): Promise<Status> {
     this.logger.info(
       `>>> Creating serial monitor connection for ${Board.toString(
         config.board
       )} on port ${Port.toString(config.port)}...`
     );
-    if (this.connection) {
+    if (this.serialConnection) {
       return Status.ALREADY_CONNECTED;
     }
     const client = await this.monitorClientProvider.client();
@@ -108,7 +119,7 @@ export class MonitorServiceImpl implements MonitorService {
       return { message: client.message };
     }
     const duplex = client.streamingOpen();
-    this.connection = { duplex, config };
+    this.serialConnection = { duplex, config };
 
     duplex.on(
       'error',
@@ -137,6 +148,27 @@ export class MonitorServiceImpl implements MonitorService {
       }
     };
 
+    this.webSocketService.onMessageReceived((msg: string) => {
+      try {
+        const message: SerialPlotter.Protocol.Message = JSON.parse(msg);
+
+        switch (message.command) {
+          case SerialPlotter.Protocol.Command.PLOTTER_SEND_MESSAGE:
+            this.sendMessageToSerial(message.data);
+            break;
+
+          case SerialPlotter.Protocol.Command.PLOTTER_SET_BAUDRATE:
+            break;
+
+          case SerialPlotter.Protocol.Command.PLOTTER_SET_LINE_ENDING:
+            break;
+
+          default:
+            break;
+        }
+      } catch (error) {}
+    });
+
     // empty the queue every 16ms (~60fps)
     setInterval(flushMessagesToFrontend, 32);
 
@@ -187,8 +219,8 @@ export class MonitorServiceImpl implements MonitorService {
     req.setConfig(monitorConfig);
 
     return new Promise<Status>((resolve) => {
-      if (this.connection) {
-        this.connection.duplex.write(req, () => {
+      if (this.serialConnection) {
+        this.serialConnection.duplex.write(req, () => {
           this.logger.info(
             `<<< Serial monitor connection created for ${Board.toString(
               config.board,
@@ -206,40 +238,40 @@ export class MonitorServiceImpl implements MonitorService {
   async disconnect(reason?: MonitorError): Promise<Status> {
     try {
       if (
-        !this.connection &&
+        !this.serialConnection &&
         reason &&
         reason.code === MonitorError.ErrorCodes.CLIENT_CANCEL
       ) {
         return Status.OK;
       }
       this.logger.info('>>> Disposing monitor connection...');
-      if (!this.connection) {
+      if (!this.serialConnection) {
         this.logger.warn('<<< Not connected. Nothing to dispose.');
         return Status.NOT_CONNECTED;
       }
-      const { duplex, config } = this.connection;
+      const { duplex, config } = this.serialConnection;
       duplex.cancel();
       this.logger.info(
         `<<< Disposed monitor connection for ${Board.toString(config.board, {
           useFqbn: false,
         })} on port ${Port.toString(config.port)}.`
       );
-      this.connection = undefined;
+      this.serialConnection = undefined;
       return Status.OK;
     } finally {
       this.messages.length = 0;
     }
   }
 
-  async send(message: string): Promise<Status> {
-    if (!this.connection) {
+  async sendMessageToSerial(message: string): Promise<Status> {
+    if (!this.serialConnection) {
       return Status.NOT_CONNECTED;
     }
     const req = new StreamingOpenRequest();
     req.setData(new TextEncoder().encode(message));
     return new Promise<Status>((resolve) => {
-      if (this.connection) {
-        this.connection.duplex.write(req, () => {
+      if (this.serialConnection) {
+        this.serialConnection.duplex.write(req, () => {
           resolve(Status.OK);
         });
         return;

Diff for: arduino-ide-extension/src/node/web-socket/web-socket-service-impl.ts

@@ -1,3 +1,4 @@
+import { Emitter } from '@theia/core';
 import { injectable } from 'inversify';
 import * as WebSocket from 'ws';
 import { WebSocketService } from './web-socket-service';
@@ -7,6 +8,9 @@ export default class WebSocketServiceImpl implements WebSocketService {
   protected wsClients: WebSocket[];
   protected server: WebSocket.Server;
 
+  protected readonly onMessage = new Emitter<string>();
+  public readonly onMessageReceived = this.onMessage.event;
+
   constructor() {
     this.server = new WebSocket.Server({ port: 0 });
     this.server.on('connection', this.addClient.bind(this));
@@ -18,6 +22,10 @@ export default class WebSocketServiceImpl implements WebSocketService {
     ws.onclose = () => {
       this.wsClients.splice(this.wsClients.indexOf(ws), 1);
     };
+
+    ws.onmessage = (res) => {
+      this.onMessage.fire(res.data.toString());
+    };
   }
 
   getAddress(): WebSocket.AddressInfo {

Diff for: arduino-ide-extension/src/node/web-socket/web-socket-service.ts

@@ -1,7 +1,9 @@
+import { Event } from '@theia/core/lib/common/event';
 import * as WebSocket from 'ws';
 
 export const WebSocketService = Symbol('WebSocketService');
 export interface WebSocketService {
   getAddress(): WebSocket.AddressInfo;
   sendMessage(message: string): void;
+  onMessageReceived: Event<string>;
 }

Diff for: yarn.lock

@@ -4012,10 +4012,10 @@ archive-type@^4.0.0:
   dependencies:
     file-type "^4.2.0"
 
-[email protected].2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/arduino-serial-plotter-webapp/-/arduino-serial-plotter-webapp-0.0.2.tgz#491950c30b5d29c0169e2b90047c9dcd6f90c5b3"
-  integrity sha512-nP1G8F+i2WeGzoNlkuEZiQnFvPfHfK1z5y5lEfa3rTXH18OGrpejmfK2SPBiBMuSirNOni9/FmTxGHIyxaxzDA==
+[email protected].3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/arduino-serial-plotter-webapp/-/arduino-serial-plotter-webapp-0.0.3.tgz#ff7136676fa1cf23950751ea6a675372b3d1eb25"
+  integrity sha512-qGxok+UQsuOVk5aOPxGjcXorQYHBNPA5fUgwMt/EbusqOnwphMHDeC3wJ3K82bNwcjg1Yf2xNJI4bRLRv+tNxw==
 
 are-we-there-yet@~1.1.2:
   version "1.1.5"