Merge pull request #40 from leaphy-robotics/development

enhancement: add debugging for uploading and more feedback for uploading

src/app/effects/backend.wired.effects.ts

@@ -16,6 +16,7 @@ import {VariableDialog} from "../modules/core/dialogs/variable/variable.dialog";
 import {UploadDialog} from "../modules/core/dialogs/upload/upload.dialog";
 import {Router} from "@angular/router";
 import {CodeEditorState} from "../state/code-editor.state";
+import {DebugInformationDialog} from "../modules/core/dialogs/debug-information/debug-information.dialog";
 
 declare var Blockly: any;
 
@@ -270,7 +271,10 @@ export class BackendWiredEffects {
 
         break;
       case 'open-log-file':
-        alert("To open the log, go to the console of your browser");
+        // Open a module to view the log file so .op
+        this.dialog.open(DebugInformationDialog, {
+          width: '450px', disableClose: false,
+        });
         break;
       case 'restore-workspace':
         var input = document.createElement('input');

src/app/modules/core/core.module.ts

@@ -16,6 +16,8 @@ import { LanguageSelectDialog } from './dialogs/language-select/language-select.
 import {NameFileDialog} from "./dialogs/name-file/name-file.dialog";
 import {VariableDialog} from "./dialogs/variable/variable.dialog";
 import {UploadDialog} from "./dialogs/upload/upload.dialog";
+import {DebugInformationDialog} from "./dialogs/debug-information/debug-information.dialog";
+import {DragDropModule} from "@angular/cdk/drag-drop";
 @NgModule({
   declarations: [
     ConnectWiredDialog,
@@ -30,12 +32,14 @@ import {UploadDialog} from "./dialogs/upload/upload.dialog";
     NameFileDialog,
     VariableDialog,
     UploadDialog,
+    DebugInformationDialog,
     InfoDialog
   ],
   imports: [
     CommonModule,
     SharedModule,
-    NgOptimizedImage
+    NgOptimizedImage,
+    DragDropModule
   ],
   entryComponents: [ConnectWiredDialog, ConnectCloudDialog, ConfirmEditorDialog, StatusMessageDialog, CreditsDialog, LanguageSelectDialog, InfoDialog],
   exports: [

src/app/modules/core/dialogs/debug-information/debug-information.dialog.html

@@ -0,0 +1,14 @@
+<div class="container">
+
+  <div id="header">
+    {{ "UPLOAD_OUTPUT" | translate}}
+    <button mat-stroked-button class="icon-button" (click)="onCloseClicked()">
+      <mat-icon>close</mat-icon>
+    </button>
+  </div>
+  <div class="upload-log">
+    <div class="upload-log-item" *ngFor="let item of (robotWiredState.uploadLog$ | async)">
+      <div class="upload-log-data">{{item}}</div>
+    </div>
+  </div>
+</div>

src/app/modules/core/dialogs/debug-information/debug-information.dialog.scss

@@ -0,0 +1,47 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.upload-log-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: right;
+  align-items: center;
+  max-width: 100%;
+  width: 100%;
+  height: fit-content;
+  border-bottom: 1px solid black;
+}
+
+.upload-log-data {
+  max-width: 99%;
+  flex: 1 0 auto;
+  padding-left: 5px;
+  color: black;
+  word-break: break-all;
+}
+
+.upload-log {
+  width: 100%;
+  height: 50vh;
+  margin: 0;
+  overflow-y: scroll;
+  background-color: lightgray;
+}
+
+#header:hover {
+  cursor: grab;
+}
+
+#header {
+  background-color: var(--leaphy-color-primary);
+  color: var(--leaphy-color-light);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 10px;
+  width: 100%;
+}

src/app/modules/core/dialogs/debug-information/debug-information.dialog.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { DebugInformationDialog } from './debug-information.dialog';
+
+describe('NameFileComponent', () => {
+  let component: DebugInformationDialog;
+  let fixture: ComponentFixture<DebugInformationDialog>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DebugInformationDialog ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DebugInformationDialog);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/core/dialogs/debug-information/debug-information.dialog.ts

@@ -0,0 +1,25 @@
+import {Component} from '@angular/core';
+import {MatDialogRef} from '@angular/material/dialog';
+import {RobotWiredState} from "../../../../state/robot.wired.state";
+
+@Component({
+  selector: 'debug-information',
+  templateUrl: './debug-information.dialog.html',
+  styleUrls: ['./debug-information.dialog.scss']
+})
+export class DebugInformationDialog {
+
+  constructor(
+    public dialogRef: MatDialogRef<DebugInformationDialog>,
+    public robotWiredState: RobotWiredState,
+  ) {
+
+  }
+
+  public onCloseClicked() {
+    this.dialogRef.close();
+  }
+
+
+  protected readonly document = document;
+}

src/app/modules/core/dialogs/upload/upload.dialog.html

@@ -6,6 +6,6 @@
   </pre>
   <div id="return-options" class="hidden">
     <button class="block-environment" (click)="returnBlockEnvironment()">{{ "LEAVE_UPLOADING" | translate }}</button>
-    <button class="help-environment" (click)="returnHelpEnvironment()">{{ "UPLOADING_ISSUE_HELP" | translate }}</button>
+    <button id="helpEnviroment" class="help-environment hidden" (click)="returnHelpEnvironment()">{{ "UPLOADING_ISSUE_HELP" | translate }}</button>
   </div>
 </div>

src/app/modules/core/dialogs/upload/upload.dialog.scss

@@ -59,3 +59,7 @@
   justify-content: center;
   height: 100%;
 }
+
+.failed-upload {
+  color: red;
+}

src/app/modules/core/dialogs/upload/upload.dialog.ts

@@ -11,10 +11,12 @@ import {RobotWiredState} from "../../../../state/robot.wired.state";
   styleUrls: ['./upload.dialog.scss']
 })
 export class UploadDialog {
-  private upload = new ArduinoUploader();
+  private upload = new ArduinoUploader(this.robotWiredState);
 
   statusMessage: string = '';
   progressBarWidth: number = 0;
+  uploadFailed: boolean = false;
+
   constructor(
     public dialogRef: MatDialogRef<UploadDialog>,
     private dialogState: DialogState,
@@ -32,7 +34,6 @@ export class UploadDialog {
   public async startUpload(source_code: string, board: string, libraries: string) {
     console.log("Starting upload");
     this.dialogState.setIsSerialOutputListening(false);
-    const uploader = new ArduinoUploader();
     function makeRequest(source_code, board, libraries) {
       return new Promise((resolve, reject) => {
         const xhr = new XMLHttpRequest();
@@ -101,10 +102,12 @@ export class UploadDialog {
         this.progressBarWidth += 25;
       } catch (error) {
         if (error.toString() === 'Error: No device selected') {
+          this.uploadFailed = true;
           this.onUpdate('NO_DEVICE_SELECTED')
           this.showReturnOptions();
           console.error(error);
         } else {
+          this.uploadFailed = true;
           this.onUpdate('DRIVER_ERROR')
           this.showReturnOptions();
           console.error(error);
@@ -116,6 +119,7 @@ export class UploadDialog {
         await this.upload.upload(hex, (message: string) => { this.onUpdate(message) });
       } catch (error) {
         // close dialog
+        this.uploadFailed = true;
         this.showReturnOptions();
         console.error(error);
 
@@ -142,7 +146,10 @@ export class UploadDialog {
     document.getElementById("return-options").classList.remove("hidden");
     document.getElementById("upload-progress-bar").classList.add("hidden");
     document.getElementById("return-options").classList.add("return-options");
-
+    if (this.uploadFailed) {
+      document.getElementById("upload-status").classList.add("failed-upload");
+      document.getElementById("helpEnviroment").classList.remove("hidden");
+    }
   }
 
   returnBlockEnvironment() {
@@ -158,6 +165,7 @@ export class UploadDialog {
     onError(error: string) {
       document.getElementById("error-message").innerText = error;
       document.getElementById("error-message").classList.remove("hidden");
+      this.uploadFailed = true;
     }
 
   protected readonly document = document;

src/app/services/webserial/ArduinoUploader.ts

@@ -2,20 +2,24 @@ import { Requests, Responses, Signature } from './stk500'
 import { convertArrayToHex, delay, includesAll } from './utils'
 import { parse } from 'intel-hex'
 import {Buffer} from "buffer";
+import {RobotWiredState} from "../../state/robot.wired.state";
 
 class Arduino {
   port = null
   isUploading = false
   serialOptions = null
   readStream = null
   writeStream = null
+  robotWiredState: RobotWiredState
 
   /**
    * Create a new Arduino instance.
    * @param serialOptions The options to use when opening the serial port.
+   * @param robotWiredState The appstate to use
    */
-  constructor(serialOptions = { baudRate: 115200 }) {
+  constructor(robotWiredState: RobotWiredState, serialOptions = { baudRate: 115200 }) {
     this.serialOptions = serialOptions
+    this.robotWiredState = robotWiredState
   }
 
   /**
@@ -26,15 +30,15 @@ class Arduino {
     try {
       port = await navigator.serial.requestPort({filters: [{usbVendorId: 0x1a86}, {usbVendorId: 9025}, {usbVendorId: 2341}, {usbVendorId: 0x0403}]});
     } catch (error) {
-      console.error(error)
+      console.log(error)
       throw new Error('No device selected')
     }
     if (port === this.port)
       return
     try {
       await port.open(this.serialOptions)
     } catch (error) {
-      console.error(error)
+      console.log(error)
       throw new Error('Connecting to device')
     }
     this.port = port
@@ -48,6 +52,7 @@ class Arduino {
   async upload(program: string, callback = (message: string) => {}) {
     if (this.isUploading)
       throw new Error('Arduino is already uploading')
+    this.robotWiredState.clearUploadLog()
     this.isUploading = true
 
     this.readStream = this.port.readable.getReader();
@@ -59,11 +64,11 @@ class Arduino {
     if (response === null) {
       response = await this.attemptOldBootloader();
       if (response !== null) {
-        console.log("Using old bootloader")
+        this.robotWiredState.addToUploadLog("Using old bootloader")
       }
     }
     else {
-      console.log("Using new bootloader")
+      this.robotWiredState.addToUploadLog("Using new bootloader")
     }
 
     if (response === null) {
@@ -129,7 +134,7 @@ class Arduino {
         response = await this.send([Requests.GET_SYNC], 500)
         break
       } catch (error) {
-        console.log(error)
+        this.robotWiredState.addToUploadLog(error.toString())
       }
     }
     if (response === null) {
@@ -154,6 +159,7 @@ class Arduino {
     try {
       await this.reset(this.serialOptions.baudRate);
     } catch (error) {
+      this.robotWiredState.addToUploadLog("Could not connect to Arduino: Reset failed (new bootloader)")
       callback("COULD_NOT_CONNECT")
       throw new Error('Could not connect to Arduino: Reset failed')
     }
@@ -162,7 +168,7 @@ class Arduino {
         response = await this.send([Requests.GET_SYNC], 500)
         break;
       } catch (error) {
-        console.log(error)
+        this.robotWiredState.addToUploadLog(error.toString())
       }
     }
     if (response === null) {
@@ -171,6 +177,7 @@ class Arduino {
       this.readStream = null;
       this.writeStream = null;
       callback("COULD_NOT_CONNECT")
+      this.robotWiredState.addToUploadLog("Could not connect to Arduino (new bootloader)")
       throw new Error('Could not connect to Arduino')
     }
     return response
@@ -185,7 +192,7 @@ class Arduino {
    */
   async send(command, timeoutMs = 1000) {
     const buffer = new Uint8Array([...command, Requests.CRC_EOP]);
-    console.log("Sending: " + convertArrayToHex(buffer).join(' '));
+    this.robotWiredState.addToUploadLog("Sending: " + convertArrayToHex(buffer).join(' '))
     await this.writeBuffer(buffer);
 
     const timeoutPromise = new Promise((resolve, _) => {
@@ -203,9 +210,10 @@ class Arduino {
 
       if (result instanceof Uint8Array) {
         const answer = Array.from(result);
-        if (answer.includes(Responses.NOT_IN_SYNC))
+        if (answer.includes(Responses.NOT_IN_SYNC)) {
+          this.robotWiredState.addToUploadLog("Arduino is not in sync")
           throw new Error('Arduino is not in sync');
-        else
+        } else
           returnBuffer = new Uint8Array([...returnBuffer, ...answer]);
         if (answer.includes(Responses.IN_SYNC))
           IN_SYNC = true;
@@ -238,7 +246,7 @@ class Arduino {
    */
   async receive() {
     const { value } = await this.readStream.read()
-    console.log("Received: " + convertArrayToHex(value).join(' '))
+    this.robotWiredState.addToUploadLog("Received: " + convertArrayToHex(value).join(' '))
     return value
   }
 
@@ -312,7 +320,7 @@ class Arduino {
    * @returns {Promise<void>}
    */
   async clearReadBuffer() {
-    console.log("Clearing read buffer");
+    this.robotWiredState.addToUploadLog("Clearing read buffer");
     const timeoutPromise = new Promise((resolve, _) => {
       setTimeout(() => {
         resolve("Timeout");
@@ -326,7 +334,7 @@ class Arduino {
 
     let i = 1;
     while (true) {
-      console.log("Attempt #" + i);
+      this.robotWiredState.addToUploadLog("Attempt #" + i);
       const promise = new Promise(async (resolve, _) => {
         while (true) {
           const result = await Promise.race([this.readStream.read(), timeoutPromise]);
@@ -343,7 +351,7 @@ class Arduino {
         throw new Error('Timeout');
       i++;
     }
-    console.log("Read buffer cleared");
+    this.robotWiredState.addToUploadLog("Read buffer cleared");
   }
 
   /**