New Preview design while printing (#1093)

* new view working * switchable design * use blur on background
UnchartedBull · Oct 19, 2020 · 2c4d623 · 2c4d623
1 parent 84f2842
commit 2c4d623
Show file tree

Hide file tree

Showing 19 changed files with 402 additions and 147 deletions.
diff --git a/src/app/app.service.ts b/src/app/app.service.ts
@@ -35,13 +35,17 @@ export class AppService {
         'Please restart your system. If the issue persists open an issue on GitHub.',
       );
     }
-    this.updateError = [".printer should have required property 'zBabystepGCode'"];
+    this.updateError = [
+      ".printer should have required property 'zBabystepGCode'",
+      ".octodash should have required property 'previewProgressCircle'",
+    ];
   }
 
   // If the errors can be automatically fixed return true here
   public autoFixError(): boolean {
     const config = this.configService.getCurrentConfig();
     config.printer.zBabystepGCode = 'M290 Z';
+    config.octodash.previewProgressCircle = false;
     this.configService.saveConfig(config);
     this.configService.updateConfig();
     return true;
@@ -57,7 +61,6 @@ export class AppService {
   private enableCustomCSSListener(): void {
     this.ipc.on('customStyles', (_, customCSS: string): void => {
       const css = document.createElement('style');
-      css.type = 'text/css';
       css.appendChild(document.createTextNode(customCSS));
       document.head.append(css);
     });

diff --git a/src/app/config/config.service.ts b/src/app/config/config.service.ts
@@ -262,6 +262,10 @@ export class ConfigService {
   public getZBabystepGCode(): string {
     return this.config.printer.zBabystepGCode;
   }
+
+  public getPreviewProgressCircle(): boolean {
+    return this.config.octodash.previewProgressCircle;
+  }
 }
 
 interface HttpHeader {
@@ -339,6 +343,7 @@ interface OctoDash {
   touchscreen: boolean;
   turnScreenOffWhileSleeping: boolean;
   preferPreviewWhilePrinting: boolean;
+  previewProgressCircle: boolean;
 }
 
 interface CustomAction {
@@ -566,6 +571,7 @@ const schema = {
         'touchscreen',
         'turnScreenOffWhileSleeping',
         'preferPreviewWhilePrinting',
+        'previewProgressCircle',
       ],
       properties: {
         customActions: {
@@ -635,6 +641,10 @@ const schema = {
           $id: '#/properties/octodash/properties/preferPreviewWhilePrinting',
           type: 'boolean',
         },
+        previewProgressCircle: {
+          $id: '#/properties/octodash/properties/previewProgressCircle',
+          type: 'boolean',
+        },
       },
     },
   },

diff --git a/src/app/config/no-config/no-config.component.ts b/src/app/config/no-config/no-config.component.ts
@@ -346,6 +346,7 @@ export class NoConfigComponent implements OnInit {
         touchscreen: true,
         turnScreenOffWhileSleeping: false,
         preferPreviewWhilePrinting: false,
+        previewProgressCircle: false,
       },
     };
   }

diff --git a/src/app/control/control.component.scss b/src/app/control/control.component.scss
@@ -206,7 +206,7 @@
   &__gcode {
     font-size: 2.2vw;
     padding: 2vh 1.5vw;
-    font-family: "Cousine", monospace;
+    font-family: 'Cousine', monospace;
   }
 
   &__icon {
@@ -218,7 +218,8 @@
   &__wrapper {
     position: fixed;
     z-index: 2;
-    background-color: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(8px);
+    background-color: rgba(0, 0, 0, 0.77);
     left: 0;
     top: 0;
     right: 0;

diff --git a/src/app/files/files.component.scss b/src/app/files/files.component.scss
@@ -128,14 +128,15 @@
 
 .file {
   opacity: 0;
-  transition: opacity ease-in-out 0.5s;
   position: fixed;
   display: none;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
-  background-color: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(8px);
+  background-color: rgba(0, 0, 0, 0.77);
+  transition: opacity 0.4s ease-in-out;
   z-index: 5;
 
   &__close {
@@ -269,14 +270,15 @@
 .sorting {
   display: block;
   position: fixed;
-  background-color: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(8px);
+  background-color: rgba(0, 0, 0, 0.77);
+  transition: opacity 0.4s ease-in-out;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
   opacity: 0;
   z-index: 10;
-  transition: opacity ease-in-out 0.5s;
 
   &-close {
     position: absolute;

diff --git a/src/app/job-status/job-status.component.html b/src/app/job-status/job-status.component.html
@@ -1,5 +1,5 @@
 <div class="job-info" *ngIf="job && isPrinting()">
-  <div class="job-info__progress-ring" (click)="showPreview = !showPreview">
+  <div class="job-info__progress" *ngIf="!showPreview() || (showPreview() && !job.thumbnail)">
     <round-progress
       [current]="job.progress"
       [max]="100"
@@ -8,14 +8,30 @@
       [responsive]="true"
       [color]="'#44bd32'"
     ></round-progress>
-    <div class="job-info__progress-percentage" [hidden]="!job.thumbnail || showPreview()">
+    <div class="job-info__progress-percentage">{{ job.progress }}<span style="font-size: 40%">%</span></div>
+  </div>
+  <div class="job-info__progress" *ngIf="showPreview() && job.thumbnail">
+    <div class="job-info__progress-percentage" [hidden]="true">
       {{ job.progress }}<span style="font-size: 40%">%</span>
     </div>
-    <div
-      class="job-info__progress-percentage job-info__progress-preview-container"
-      *ngIf="job.thumbnail && showPreview()"
-    >
+    <div *ngIf="!useCircularProgressBar()" style="height: 22vw; padding-top: -1.5vw">
       <img class="job-info__progress-preview" [src]="job.thumbnail" />
+      <div class="job-info__progress-bar__wrapper">
+        <div class="job-info__progress-bar" [style.width]="job.progress + '%'"></div>
+      </div>
+    </div>
+    <div *ngIf="useCircularProgressBar()" style="height: 23.5vw">
+      <round-progress
+        [current]="job.progress"
+        [max]="100"
+        [stroke]="25"
+        [rounded]="true"
+        [responsive]="true"
+        [color]="'#44bd32'"
+      ></round-progress>
+      <div class="job-info__progress-percentage job-info__progress-preview-image-container">
+        <img class="job-info__progress-preview-image" [src]="job.thumbnail" />
+      </div>
     </div>
   </div>
   <span class="job-info__filename">{{ job.filename }}</span>
@@ -24,8 +40,8 @@
   <br />
   <span class="job-info__time">
     <span *ngIf="hasProperty(job, 'timeLeft')">
-      <span class="job-info__time-left">{{ job.timeLeft.value }}</span>
-      {{ job.timeLeft.unit }} left,
+      <span class="job-info__time-left">{{ job.timeLeft.value }}</span
+      >{{ job.timeLeft.unit }} left,
     </span>
     elapsed: {{ job.timePrinted.value }}{{ job.timePrinted.unit }}
   </span>

diff --git a/src/app/job-status/job-status.component.scss b/src/app/job-status/job-status.component.scss
@@ -11,11 +11,13 @@
   }
 
   &__progress {
-    &-ring {
-      padding: 4.5vw 5vw 0 4.5vw;
-      width: 22vw;
-      height: 22vw;
-      float: left;
+    padding: 4.5vw 5vw 0 4.5vw;
+    width: 22vw;
+    height: 22vw;
+    float: left;
+
+    &-stretch {
+      padding: 3vw 5vw 0 4.5vw;
     }
 
     &-percentage {
@@ -27,10 +29,27 @@
     }
 
     &-preview {
-      width: 13vw;
+      width: 20vw;
+      margin-left: 1vw;
+
+      &-image {
+        width: 13vw;
+
+        &-container {
+          margin-top: -17vw;
+        }
+      }
+    }
+
+    &-bar {
+      height: 1vw;
+      border-radius: 1vw;
+      background-color: #44bd32;
 
-      &-container {
-        margin-top: -17vw;
+      &__wrapper {
+        width: 21vw;
+        margin: -0.5vw 1vw 0;
+        height: 1vw;
       }
     }
   }

diff --git a/src/app/job-status/job-status.component.ts b/src/app/job-status/job-status.component.ts
@@ -71,4 +71,8 @@ export class JobStatusComponent implements OnInit, OnDestroy {
   public hasProperty(object: Record<string, unknown>, name: string): boolean {
     return Object.hasOwnProperty.bind(object)(name);
   }
+
+  public useCircularProgressBar(): boolean {
+    return this.configService.getPreviewProgressCircle();
+  }
 }
diff --git a/src/app/main-menu/main-menu.component.ts b/src/app/main-menu/main-menu.component.ts
@@ -19,6 +19,6 @@ export class MainMenuComponent {
   public hideSettings(): void {
     setTimeout((): void => {
       this.settings = false;
-    }, 600);
+    }, 350);
   }
 }
diff --git a/src/app/print-control/print-control.component.html b/src/app/print-control/print-control.component.html
@@ -45,16 +45,12 @@
     <img src="assets/pause.svg" class="print-control__center-icon print-control__pause__icon" />
     <span class="print-control__confirm">print paused</span>
     <div class="print-control__pause__resume">
-      <div  (click)="restart($event)">
-        restart
-      </div>
+      <div (click)="restart($event)">restart</div>
       <div (click)="resume($event)">
         <img src="assets/resume.svg" class="print-control__pause__resume-icon" />
         resume
       </div>
-      <div (click)="changeFilament($event)">
-        filament
-      </div>
+      <div (click)="changeFilament($event)">filament</div>
     </div>
   </div>
   <div *ngIf="view === controlView.ADJUST" (click)="stopPropagation($event)">

diff --git a/src/app/print-control/print-control.component.scss b/src/app/print-control/print-control.component.scss
@@ -5,10 +5,11 @@
     right: 0;
     top: 0;
     bottom: 0;
-    background-color: rgba(0, 0, 0, 0.9);
+    backdrop-filter: blur(8px);
+    background-color: rgba(0, 0, 0, 0.77);
+    transition: opacity 0.4s ease-in-out;
     z-index: 50;
     opacity: 1;
-    transition: opacity 0.7s ease-in-out;
   }
 
   &__hide {
@@ -93,7 +94,7 @@
 
         &-small {
           width: 4vw;
-          vertical-align: -1vh
+          vertical-align: -1vh;
         }
       }
     }

diff --git a/src/app/print-control/print-control.component.ts b/src/app/print-control/print-control.component.ts
@@ -65,8 +65,8 @@ export class PrintControlComponent implements OnInit, OnDestroy {
   }
 
   public isClickOnPreview(event: MouseEvent): boolean {
-    const previewSwitchMin = window.innerWidth * 0.08;
-    const previewSwitchMax = window.innerWidth * 0.25;
+    const previewSwitchMin = window.innerWidth * 0.04;
+    const previewSwitchMax = window.innerWidth * 0.28;
 
     return (
       previewSwitchMin < event.clientX &&

diff --git a/src/app/printer-status/printer-status.component.scss b/src/app/printer-status/printer-status.component.scss
@@ -82,10 +82,11 @@
   top: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(8px);
+  background-color: rgba(0, 0, 0, 0.75);
+  transition: opacity 0.4s ease-in-out;
   z-index: 10;
   opacity: 0;
-  transition: opacity ease-in-out 0.5s;
 
   &__controller {
     width: 35vw;