Show preview while printing (click on percentage)

README.md

@@ -47,10 +47,12 @@ For more info have a look at the [wiki](https://github.com/UnchartedBull/OctoDas
 
 ## Tips and Tricks
 
+-   OctoDash supports printing from your Raspberry and from the printers SD card, if configured in OctoPrint (v2.0.0 and up)
 -   OctoDash supports .ufp package preview images (v1.4.1 and up)
+-   You can also view the previews during print, if you press on the percentage inside the progress ring (v2.0.0 and up)
 -   You can press multiple arrows directly after another in the control view. All actions will be executed one after another, even if the prior didn't finish before pressing the button
 -   The six actions on the right in the control view can be customized. They can either send GCode commands to your printer, restart OctoPrint or your Pi and even open iFrames so you can view your camera
--   You can adjust the temperatures in the home screen, by pressing on their icons
+-   You can adjust the temperatures in the home screen, by pressing on their icons (v1.4.1 and up)
 
 ## Screenshots
 

src/app/job-status/job-status.component.html

@@ -1,13 +1,16 @@
 <div class="job-info" *ngIf="job && isPrinting()">
-    <div class="job-info__progress-ring">
+    <div class="job-info__progress-ring" (click)="showPreview = !showPreview">
         <round-progress [current]="job.progress" [max]="100" [stroke]="25" [rounded]="true" [responsive]="true"
             [color]="'#44bd32'"></round-progress>
-        <div class="job-info__progress-percentage">{{ job.progress }}<span style="font-size: 40%">%</span></div>
+        <div class="job-info__progress-percentage" *ngIf="!job.thumbnail || !showPreview()">{{ job.progress }}<span
+                style="font-size: 40%">%</span></div>
+        <img *ngIf="job.thumbnail && showPreview()" class="job-info__progress-preview" [src]="job.thumbnail" />
     </div>
     <span class="job-info__filename">{{ job.filename }}</span> <br />
-    <span class="job-info__filament" *ngIf="job.filamentAmount !== null">{{ job.filamentAmount }}g Filament</span> <br />
+    <span class="job-info__filament" *ngIf="job.filamentAmount !== null">{{ job.filamentAmount }}g Filament</span>
+    <br />
     <span class="job-info__time"><span *ngIf="job.timeLeft.value !== null"><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>
 </div>
 <div class="job-info__file-loaded" *ngIf="job && !isPrinting() && isFileLoaded()" (swipe)="cancelLoadedFile()">

src/app/job-status/job-status.component.scss

@@ -25,6 +25,13 @@
             text-align: center;
             width: 14vw;
         }
+
+        &-preview {
+            margin-top: -30.3vh;
+            width: 12.5vw;
+            margin-left: 4.7vw;
+            display: block;
+        }
     }
 
     &__filename {

src/app/job-status/job-status.component.ts

@@ -63,4 +63,8 @@ export class JobStatusComponent implements OnInit, OnDestroy {
     public isPrinting(): boolean {
         return this.jobService.isPrinting();
     }
+
+    public showPreview(): boolean {
+        return this.jobService.showPreviewWhilePrinting();
+    }
 }

src/app/job.service.ts

@@ -18,6 +18,7 @@ export class JobService {
     private observable: Observable<Job>;
     private observer: Observer<Job>;
     private printing = false;
+    private previewWhilePrinting = false;
 
     public constructor(
         private configService: ConfigService,
@@ -38,18 +39,33 @@ export class JobService {
                         async (data: OctoprintJobAPI): Promise<void> => {
                             let job: Job = null;
                             if (data.job && data.job.file.name) {
-                                this.printing = ['Printing', 'Pausing', 'Paused', 'Cancelling', 'Printing from SD'].includes(data.state);
+                                this.printing = [
+                                    'Printing',
+                                    'Pausing',
+                                    'Paused',
+                                    'Cancelling',
+                                    'Printing from SD',
+                                ].includes(data.state);
                                 try {
                                     job = {
                                         status: data.state,
                                         filename: data.job.file.display.replace('.gcode', '').replace('.ufp', ''),
-                                        thumbnail: (data.job.file.origin == 'sdcard') ? undefined : await this.fileService.getThumbnail(data.job.file.path),
+                                        thumbnail:
+                                            data.job.file.origin == 'sdcard'
+                                                ? undefined
+                                                : await this.fileService.getThumbnail(data.job.file.path),
                                         progress: Math.round((data.progress.filepos / data.job.file.size) * 100),
-                                        filamentAmount: (data.job.filament === null) ? null : this.service.convertFilamentLengthToAmount(
-                                            this.getTotalAmountOfFilament(data.job.filament),
-                                        ),
+                                        filamentAmount:
+                                            data.job.filament === null
+                                                ? null
+                                                : this.service.convertFilamentLengthToAmount(
+                                                      this.getTotalAmountOfFilament(data.job.filament),
+                                                  ),
                                         timeLeft: {
-                                            value: (data.progress.printTimeLeft === null) ? null : this.service.convertSecondsToHours(data.progress.printTimeLeft),
+                                            value:
+                                                data.progress.printTimeLeft === null
+                                                    ? null
+                                                    : this.service.convertSecondsToHours(data.progress.printTimeLeft),
                                             unit: 'h',
                                         },
                                         timePrinted: {
@@ -102,6 +118,14 @@ export class JobService {
         return this.printing;
     }
 
+    public togglePreviewWhilePrinting(): void {
+        this.previewWhilePrinting = !this.previewWhilePrinting;
+    }
+
+    public showPreviewWhilePrinting(): boolean {
+        return this.previewWhilePrinting;
+    }
+
     public cancelJob(): void {
         if (this.httpPOSTRequest) {
             this.httpPOSTRequest.unsubscribe();

src/app/print-control/print-control.component.scss

@@ -5,10 +5,10 @@
         right: 0;
         top: 0;
         bottom: 0;
-        background-color: rgba(0, 0, 0, .9);
+        background-color: rgba(0, 0, 0, 0.9);
         z-index: 50;
         opacity: 1;
-        transition: opacity .7s ease-in-out;
+        transition: opacity 0.7s ease-in-out;
     }
 
     &__hide {
@@ -41,7 +41,6 @@
         margin-top: 3vh;
     }
 
-
     &__center-icon {
         width: 22vw;
         display: block;
@@ -97,10 +96,10 @@
         }
 
         &__controller {
-            border: solid .6vw;
+            border: solid 0.6vw;
             border-radius: 3vw;
             width: 19.5vw;
-            margin-left: .9vw;
+            margin-left: 0.9vw;
 
             &-value {
                 font-size: 5vw;

src/app/print-control/print-control.component.ts

@@ -14,75 +14,93 @@ export class PrintControlComponent {
     public controlView = ControlView;
     public view = ControlView.MAIN;
 
-    public temperatureHotend;
-    public temperatureHeatbed;
-    public feedrate;
-    public flowrate;
+    public temperatureHotend: number;
+    public temperatureHeatbed: number;
+    public feedrate: number;
+    public flowrate: number;
 
     public constructor(private jobService: JobService, private printerService: PrinterService) {}
 
-    public cancel(event): void {
+    public isClickOnPreview(event: MouseEvent): boolean {
+        const previewSwitchMin = window.innerWidth * 0.08;
+        const previewSwitchMax = window.innerWidth * 0.25;
+
+        return (
+            previewSwitchMin < event.clientX &&
+            event.clientX < previewSwitchMax &&
+            previewSwitchMin < event.clientY &&
+            event.clientY < previewSwitchMax
+        );
+    }
+
+    public cancel(event: MouseEvent): void {
         if (this.showControls) {
             this.stopPropagation(event);
             this.view = ControlView.CANCEL;
         }
     }
 
-    public pause(event): void {
+    public pause(event: MouseEvent): void {
         if (this.showControls) {
             this.stopPropagation(event);
             this.jobService.pauseJob();
             this.view = ControlView.PAUSE;
         }
     }
 
-    public adjust(event): void {
+    public adjust(event: MouseEvent): void {
         if (this.showControls) {
             this.view = ControlView.ADJUST;
             this.stopPropagation(event);
         }
     }
 
-    public stopPropagation(event): void {
+    public stopPropagation(event: MouseEvent): void {
         if (this.showControls) {
             event.stopPropagation();
         }
     }
 
-    public showControlOverlay(event?): void {
-        this.stopPropagation(event);
-        this.loadData();
-        this.view = ControlView.MAIN;
-        this.showControls = true;
+    public showControlOverlay(event?: MouseEvent): void {
+        if (!this.isClickOnPreview(event) && !this.showControls) {
+            this.stopPropagation(event);
+            this.loadData();
+            this.view = ControlView.MAIN;
+            this.showControls = true;
+        } else {
+            this.jobService.togglePreviewWhilePrinting();
+        }
     }
 
-    public hideControlOverlay(event): void {
+    public hideControlOverlay(event: MouseEvent): void {
         this.stopPropagation(event);
         this.showControls = false;
     }
 
-    public cancelPrint(event): void {
+    public cancelPrint(event: MouseEvent): void {
         if (this.showControls && this.view === ControlView.CANCEL) {
             this.jobService.cancelJob();
             this.hideControlOverlay(event);
         }
     }
 
-    public resume(event): void {
+    public resume(event: MouseEvent): void {
         if (this.showControls && this.view === ControlView.PAUSE) {
             this.jobService.resumeJob();
             this.hideControlOverlay(event);
         }
     }
 
-    public backToControlScreen(event): void {
-        this.view = ControlView.MAIN;
-        this.stopPropagation(event);
+    public backToControlScreen(event: MouseEvent): void {
+        if (this.showControls) {
+            this.view = ControlView.MAIN;
+            this.stopPropagation(event);
+        }
     }
 
     private loadData(): void {
-        this.temperatureHotend = '?';
-        this.temperatureHeatbed = '?';
+        this.temperatureHotend = 0;
+        this.temperatureHeatbed = 0;
         this.flowrate = 100;
         this.feedrate = 100;
         this.printerService
@@ -95,51 +113,61 @@ export class PrintControlComponent {
     }
 
     public changeTemperatureHotend(value: number): void {
-        this.temperatureHotend += value;
-        if (this.temperatureHotend < 0) {
-            this.temperatureHotend = 0;
-        }
-        if (this.temperatureHotend > 999) {
-            this.temperatureHotend = 999;
+        if (this.showControls) {
+            this.temperatureHotend += value;
+            if (this.temperatureHotend < 0) {
+                this.temperatureHotend = 0;
+            }
+            if (this.temperatureHotend > 999) {
+                this.temperatureHotend = 999;
+            }
         }
     }
 
     public changeTemperatureHeatbed(value: number): void {
-        this.temperatureHeatbed += value;
-        if (this.temperatureHeatbed < 0) {
-            this.temperatureHeatbed = 0;
-        }
-        if (this.temperatureHeatbed > 999) {
-            this.temperatureHeatbed = 999;
+        if (this.showControls) {
+            this.temperatureHeatbed += value;
+            if (this.temperatureHeatbed < 0) {
+                this.temperatureHeatbed = 0;
+            }
+            if (this.temperatureHeatbed > 999) {
+                this.temperatureHeatbed = 999;
+            }
         }
     }
 
     public changeFeedrate(value: number): void {
-        this.feedrate += value;
-        if (this.feedrate < 50) {
-            this.feedrate = 50;
-        }
-        if (this.feedrate > 200) {
-            this.feedrate = 200;
+        if (this.showControls) {
+            this.feedrate += value;
+            if (this.feedrate < 50) {
+                this.feedrate = 50;
+            }
+            if (this.feedrate > 200) {
+                this.feedrate = 200;
+            }
         }
     }
 
     public changeFlowrate(value: number): void {
-        this.flowrate += value;
-        if (this.flowrate < 75) {
-            this.flowrate = 75;
-        }
-        if (this.flowrate > 125) {
-            this.flowrate = 125;
+        if (this.showControls) {
+            this.flowrate += value;
+            if (this.flowrate < 75) {
+                this.flowrate = 75;
+            }
+            if (this.flowrate > 125) {
+                this.flowrate = 125;
+            }
         }
     }
 
-    public setAdjustParameters(event): void {
-        this.printerService.setTemperatureHotend(this.temperatureHotend);
-        this.printerService.setTemperatureHeatbed(this.temperatureHeatbed);
-        this.printerService.setFeedrate(this.feedrate);
-        this.printerService.setFlowrate(this.flowrate);
-        this.hideControlOverlay(event);
+    public setAdjustParameters(event: MouseEvent): void {
+        if (this.showControls) {
+            this.printerService.setTemperatureHotend(this.temperatureHotend);
+            this.printerService.setTemperatureHeatbed(this.temperatureHeatbed);
+            this.printerService.setFeedrate(this.feedrate);
+            this.printerService.setFlowrate(this.flowrate);
+            this.hideControlOverlay(event);
+        }
     }
 }