restart + filament button added, improved script loading (#1080)

UnchartedBull · Oct 14, 2020 · 8acc468 · 8acc468
1 parent a570828
commit 8acc468
Show file tree

Hide file tree

Showing 12 changed files with 270 additions and 453 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,4 +1,8 @@
 <app-notification></app-notification>
 <div class="container">
-  <router-outlet></router-outlet>
-</div>
+  <div *ngIf="!activated">
+    <img src="assets/icon/icon-main-title.svg" class="splash-screen__icon" />
+    <span class="splash-screen__credits">by UnchartedBull</span>
+  </div>
+  <router-outlet (activate)="activated = true"></router-outlet>
+</div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, NgZone, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import _ from 'lodash';
 
@@ -28,9 +28,10 @@ export class AppComponent implements OnInit {
     private octoprintScriptService: OctoprintScriptService,
     private notificationService: NotificationService,
     private router: Router,
-    private zone: NgZone,
   ) {}
 
+  public activated = false;
+
   public ngOnInit(): void {
     this.initialize();
   }
@@ -39,22 +40,22 @@ export class AppComponent implements OnInit {
     if (this.configService && this.configService.isInitialized()) {
       if (this.configService.isLoaded()) {
         if (this.configService.isValid()) {
-          try {
-            await this.zone.run(async () => {
-              await this.octoprintScriptService.initialize(this.configService.getURL(''));
+          this.octoprintScriptService
+            .initialize(this.configService.getURL(''))
+            .then(() => {
               this.octoprintScriptService.authenticate(this.configService.getAccessKey());
+              if (this.configService.isTouchscreen()) {
+                this.router.navigate(['/main-screen']);
+              } else {
+                this.router.navigate(['/main-screen-no-touch']);
+              }
+            })
+            .catch(() => {
+              this.notificationService.setError(
+                "Can't get OctoPrint script!",
+                'Please restart your machine. If the error persists open a new issue on GitHub.',
+              );
             });
-          } catch {
-            this.notificationService.setError(
-              "Can't get OctoPrint script!",
-              'Please restart your machine. If the error persists open a new issue on GitHub.',
-            );
-          }
-          if (this.configService.isTouchscreen()) {
-            this.router.navigate(['/main-screen']);
-          } else {
-            this.router.navigate(['/main-screen-no-touch']);
-          }
         } else {
           if (_.isEqual(this.configService.getErrors(), this.service.getUpdateError())) {
             if (this.service.autoFixError()) {

diff --git a/src/app/config/no-config/no-config.component.html b/src/app/config/no-config/no-config.component.html
@@ -51,11 +51,8 @@
     </span>
     <div *ngIf="!manualURL">
       <div class="no-config__discovered-instances__wrapper">
-        <span
-          *ngFor="let node of octoprintNodes"
-          class="no-config__discovered-instances__node"
-          (click)="setOctoprintInstance(node)"
-        >
+        <span *ngFor="let node of octoprintNodes" class="no-config__discovered-instances__node"
+          (click)="setOctoprintInstance(node)">
           <div class="no-config__discovered-instances__node-name">
             {{ node.name }}
             <br />
@@ -72,25 +69,11 @@
     <div *ngIf="manualURL">
       <form class="no-config__form" style="margin-top: 5vh">
         <span class="no-config__input-prefix">http://</span>
-        <input
-          type="text"
-          id="octoprintURLName"
-          class="no-config__input"
-          [(ngModel)]="this.config.octoprint.urlSplit.url"
-          name="octoprintURLName"
-          required
-          style="width: 42.5vw"
-        />
+        <input type="text" id="octoprintURLName" class="no-config__input"
+          [(ngModel)]="this.config.octoprint.urlSplit.url" name="octoprintURLName" required style="width: 42.5vw" />
         :
-        <input
-          type="text"
-          id="octoprintURLPort"
-          class="no-config__input"
-          [(ngModel)]="this.config.octoprint.urlSplit.port"
-          name="octoprintURLPort"
-          required
-          style="width: 14vw"
-        />
+        <input type="text" id="octoprintURLPort" class="no-config__input"
+          [(ngModel)]="this.config.octoprint.urlSplit.port" name="octoprintURLPort" required style="width: 14vw" />
         <p class="no-config__input-prefix" style="margin-top: 8vh">
           Port 5000 for vanilla OctoPrint, Port 80 for OctoPi
         </p>
@@ -101,6 +84,10 @@
     </div>
   </div>
 
+  <div *ngIf="page === 1.5">
+    <span class="no-config__connecting">connecting ...</span>
+  </div>
+
   <div *ngIf="page === 2">
     <span class="no-config__text">
       Please authenticate me now. You can either click the button below and confirm the request in your OctoPrint
@@ -111,15 +98,8 @@
     </div>
     <form class="no-config__form">
       <label for="accessToken" class="no-config__input-label">API Key:</label>
-      <input
-        type="text"
-        id="accessToken"
-        class="no-config__input"
-        [(ngModel)]="this.config.octoprint.accessToken"
-        name="accessToken"
-        style="width: 67vw"
-        required
-      />
+      <input type="text" id="accessToken" class="no-config__input" [(ngModel)]="this.config.octoprint.accessToken"
+        name="accessToken" style="width: 67vw" required />
     </form>
   </div>
   <!-- TODO: remove page 3 once the OctoPrint client library is fully implemented -->
@@ -129,15 +109,8 @@
     </span>
     <form class="no-config__form">
       <label for="printerName" class="no-config__input-label">Printer Name:</label>
-      <input
-        type="text"
-        id="printerName"
-        class="no-config__input no-config__2-input"
-        maxlength="13"
-        [(ngModel)]="config.printer.name"
-        name="printerName"
-        required
-      />
+      <input type="text" id="printerName" class="no-config__input no-config__2-input" maxlength="13"
+        [(ngModel)]="config.printer.name" name="printerName" required />
     </form>
     <div class="no-config-explanation" style="margin-top: 7vh">
       If you're unsure about any values during setup, just stick with the defaults. You can change all values (and even
@@ -150,81 +123,33 @@
     <form class="no-config__form no-config__2-form">
       <label for="feedLength" class="no-config__input-label">Feed Length:</label>
       <div class="no-config__input__numeric-wrapper" style="width: 63vw">
-        <span
-          class="no-config__input__numeric-adjust"
-          matRipple
-          [matRippleUnbounded]="false"
-          [matRippleCentered]="false"
-          long-press
-          [duration]="650"
-          [frequency]="80"
-          (onShortPress)="changeFeedLength(-1)"
-          (onLongPressing)="changeFeedLength(-5)"
-        >
+        <span class="no-config__input__numeric-adjust" matRipple [matRippleUnbounded]="false"
+          [matRippleCentered]="false" long-press [duration]="650" [frequency]="80" (onShortPress)="changeFeedLength(-1)"
+          (onLongPressing)="changeFeedLength(-5)">
           -
         </span>
-        <input
-          type="number"
-          id="feedLength"
-          class="no-config__input no-config__input__numeric"
-          [(ngModel)]="config.filament.feedLength"
-          name="feedLength"
-          min="0"
-          style="width: 17vw"
-          required
-        />
-        <span
-          class="no-config__input__numeric-adjust no-config__input__numeric-adjust-increase"
-          matRipple
-          [matRippleUnbounded]="false"
-          [matRippleCentered]="false"
-          long-press
-          [duration]="650"
-          [frequency]="80"
-          (onShortPress)="changeFeedLength(1)"
-          (onLongPressing)="changeFeedLength(5)"
-        >
+        <input type="number" id="feedLength" class="no-config__input no-config__input__numeric"
+          [(ngModel)]="config.filament.feedLength" name="feedLength" min="0" style="width: 17vw" required />
+        <span class="no-config__input__numeric-adjust no-config__input__numeric-adjust-increase" matRipple
+          [matRippleUnbounded]="false" [matRippleCentered]="false" long-press [duration]="650" [frequency]="80"
+          (onShortPress)="changeFeedLength(1)" (onLongPressing)="changeFeedLength(5)">
           +
         </span>
         <span class="no-config__input-small-suffix" style="margin-left: -16.5vw">mm</span>
       </div>
       <br />
       <label for="feedSpeed" class="no-config__input-label-small">Feed Speed:</label>
       <div class="no-config__input__numeric-wrapper" style="width: 68.2vw">
-        <span
-          class="no-config__input__numeric-adjust"
-          matRipple
-          [matRippleUnbounded]="false"
-          [matRippleCentered]="false"
-          long-press
-          [duration]="650"
-          [frequency]="150"
-          (onShortPress)="changeFeedSpeed(-0.5)"
-          (onLongPressing)="changeFeedSpeed(-1)"
-        >
+        <span class="no-config__input__numeric-adjust" matRipple [matRippleUnbounded]="false"
+          [matRippleCentered]="false" long-press [duration]="650" [frequency]="150"
+          (onShortPress)="changeFeedSpeed(-0.5)" (onLongPressing)="changeFeedSpeed(-1)">
           -
         </span>
-        <input
-          type="number"
-          id="feedSpeed"
-          class="no-config__input no-config__input__numeric"
-          [(ngModel)]="config.filament.feedSpeed"
-          name="feedSpeed"
-          min="0"
-          style="width: 20vw"
-          required
-        />
-        <span
-          class="no-config__input__numeric-adjust no-config__input__numeric-adjust-increase"
-          matRipple
-          [matRippleUnbounded]="false"
-          [matRippleCentered]="false"
-          long-press
-          [duration]="650"
-          [frequency]="150"
-          (onShortPress)="changeFeedSpeed(0.5)"
-          (onLongPressing)="changeFeedSpeed(1)"
-        >
+        <input type="number" id="feedSpeed" class="no-config__input no-config__input__numeric"
+          [(ngModel)]="config.filament.feedSpeed" name="feedSpeed" min="0" style="width: 20vw" required />
+        <span class="no-config__input__numeric-adjust no-config__input__numeric-adjust-increase" matRipple
+          [matRippleUnbounded]="false" [matRippleCentered]="false" long-press [duration]="650" [frequency]="150"
+          (onShortPress)="changeFeedSpeed(0.5)" (onLongPressing)="changeFeedSpeed(1)">
           +
         </span>
         <span class="no-config__input-small-suffix" style="margin-left: -19vw">mm/s</span>
@@ -249,15 +174,8 @@
       <!-- TODO: remove page 3 once the OctoPrint client library is fully implemented and set value to 1500 by default -->
       <!-- Possible replacements: Screensaver once done / Anonymous Tracking (if that ever gets implemented) -->
       <label for="octodashPolling" class="no-config__input-label">Value Refresh Interval:</label>
-      <input
-        type="number"
-        id="octodashPolling"
-        class="no-config__input"
-        [(ngModel)]="this.config.octodash.pollingInterval"
-        name="octodashPolling"
-        required
-        style="width: 11vw"
-      />
+      <input type="number" id="octodashPolling" class="no-config__input"
+        [(ngModel)]="this.config.octodash.pollingInterval" name="octodashPolling" required style="width: 11vw" />
       ms
       <div class="no-config-explanation" style="margin-top: 7vh">
         Don't set your Value Refresh Interval too low (und 1000ms) as this may effect the performance of the Raspberry
@@ -270,53 +188,41 @@
     <div style="text-align: center">
       <div class="no-config__checkbox-container" (click)="config.plugins.displayLayerProgress.enabled = true">
         <span class="no-config__checkbox">
-          <span
-            class="no-config__checkbox-checked no-config__checkbox-checked-disabled"
-            *ngIf="config.plugins.displayLayerProgress.enabled"
-          ></span>
+          <span class="no-config__checkbox-checked no-config__checkbox-checked-disabled"
+            *ngIf="config.plugins.displayLayerProgress.enabled"></span>
         </span>
         Display Layer Progress&nbsp;&nbsp;
       </div>
-      <div
-        class="no-config__checkbox-container"
-        (click)="config.plugins.enclosure.enabled = !config.plugins.enclosure.enabled"
-      >
+      <div class="no-config__checkbox-container"
+        (click)="config.plugins.enclosure.enabled = !config.plugins.enclosure.enabled">
         <span class="no-config__checkbox">
           <span class="no-config__checkbox-checked" *ngIf="config.plugins.enclosure.enabled"></span>
         </span>
         Enclosure
       </div>
-      <div
-        class="no-config__checkbox-container"
-        (click)="config.plugins.filamentManager.enabled = !config.plugins.filamentManager.enabled"
-      >
+      <div class="no-config__checkbox-container"
+        (click)="config.plugins.filamentManager.enabled = !config.plugins.filamentManager.enabled">
         <span class="no-config__checkbox">
           <span class="no-config__checkbox-checked" *ngIf="config.plugins.filamentManager.enabled"></span>
         </span>
         Filament Manager&nbsp;&nbsp;
       </div>
-      <div
-        class="no-config__checkbox-container"
-        (click)="config.plugins.preheatButton.enabled = !config.plugins.preheatButton.enabled"
-      >
+      <div class="no-config__checkbox-container"
+        (click)="config.plugins.preheatButton.enabled = !config.plugins.preheatButton.enabled">
         <span class="no-config__checkbox">
           <span class="no-config__checkbox-checked" *ngIf="config.plugins.preheatButton.enabled"></span>
         </span>
         Preheat Button
       </div>
-      <div
-        class="no-config__checkbox-container"
-        (click)="config.plugins.printTimeGenius.enabled = !config.plugins.printTimeGenius.enabled"
-      >
+      <div class="no-config__checkbox-container"
+        (click)="config.plugins.printTimeGenius.enabled = !config.plugins.printTimeGenius.enabled">
         <span class="no-config__checkbox">
           <span class="no-config__checkbox-checked" *ngIf="config.plugins.printTimeGenius.enabled"></span>
         </span>
         Print Time Genius&nbsp;&nbsp;
       </div>
-      <div
-        class="no-config__checkbox-container"
-        (click)="config.plugins.psuControl.enabled = !config.plugins.psuControl.enabled"
-      >
+      <div class="no-config__checkbox-container"
+        (click)="config.plugins.psuControl.enabled = !config.plugins.psuControl.enabled">
         <span class="no-config__checkbox">
           <span class="no-config__checkbox-checked" *ngIf="config.plugins.psuControl.enabled"></span>
         </span>
@@ -351,4 +257,4 @@
       <span *ngIf="configValid && !configSaved" class="no-config__6-finish" (click)="finishWizard()">done</span>
     </div>
   </div>
-</div>
+</div>
diff --git a/src/app/config/no-config/no-config.component.scss b/src/app/config/no-config/no-config.component.scss
@@ -259,4 +259,11 @@
       box-shadow: 0 10px 19px -8px rgba(0, 0, 0, 0.75);
     }
   }
-}
+
+  &__connecting {
+    display: block;
+    text-align: center;
+    font-size: 140%;
+    margin-top: 20vh;
+  }
+}