feature/adjust parameters during print (#220)

* First mockup * api connection
UnchartedBull · Oct 16, 2019 · 5114401 · 5114401
1 parent 0400294
commit 5114401
Show file tree

Hide file tree

Showing 6 changed files with 251 additions and 11 deletions.
diff --git a/screenshots/adjust_parameters_print.png b/screenshots/adjust_parameters_print.png
diff --git a/src/app/main-screen/main-screen.component.html b/src/app/main-screen/main-screen.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="printing || isFileLoaded()">
+<!-- <div *ngIf="printing || isFileLoaded()">
     <app-print-control *ngIf="printing"></app-print-control>
     <app-job-status></app-job-status>
     <app-printer-status></app-printer-status>
@@ -9,4 +9,11 @@
     <app-main-menu></app-main-menu>
     <app-printer-status></app-printer-status>
     <app-bottom-bar></app-bottom-bar>
+</div> -->
+<div>
+    <app-print-control></app-print-control>
+    <app-job-status></app-job-status>
+    <app-printer-status></app-printer-status>
+    <app-layer-progress></app-layer-progress>
+    <app-bottom-bar></app-bottom-bar>
 </div>
diff --git a/src/app/print-control/print-control.component.html b/src/app/print-control/print-control.component.html
@@ -50,12 +50,55 @@
                 <td class="top-bar__back"><img src="assets/back.svg" class="top-bar__back-icon" />back</td>
             </tr>
         </table>
-        <img src="assets/adjust.svg" class="print-control__center-icon print-control__pause__icon">
-        <span class="print-control__confirm">
-            :(
-        </span>
-        <span style="font-size: 3vw; margin: 4vh 3vw; text-align: center; display: block">
-            This feature has not been implemented yet. If you really, really want it before anything else - go to GitHub
-            and like issue #55.</span>
+        <img src="assets/adjust.svg" class="print-control__center-icon-small">
+        <table class="print-control__adjust__wrapper">
+            <tr>
+                <td class="print-control__adjust__change-parameter">
+                    <div class="print-control__adjust__controller">
+                        <div class="print-control__adjust__controller-increase" (click)="changeTemperatureHotend(1)">+
+                        </div>
+                        <div class="print-control__adjust__controller-value">
+                            {{ temperatureHotend }}<span class="print-control__adjust__controller-value-unit">°C</span>
+                        </div>
+                        <div class="print-control__adjust__controller-decrease" (click)="changeTemperatureHotend(-1)">-
+                        </div>
+                    </div>
+                    <span class="print-control__adjust__name">Hotend</span>
+                </td>
+                <td class="print-control__adjust__change-parameter">
+                    <div class="print-control__adjust__controller">
+                        <div class="print-control__adjust__controller-increase" (click)="changeTemperatureHeatbed(1)">+
+                        </div>
+                        <div class="print-control__adjust__controller-value">
+                            {{ temperatureHeatbed }}<span class="print-control__adjust__controller-value-unit">°C</span>
+                        </div>
+                        <div class="print-control__adjust__controller-decrease" (click)="changeTemperatureHeatbed(-1)">-
+                        </div>
+                    </div>
+                    <span class="print-control__adjust__name">Heatbed</span>
+                </td>
+                <td class="print-control__adjust__change-parameter">
+                    <div class="print-control__adjust__controller">
+                        <div class="print-control__adjust__controller-increase" (click)="changeFeedrate(1)">+</div>
+                        <div class="print-control__adjust__controller-value">
+                            {{ feedrate }}<span class="print-control__adjust__controller-value-unit">%</span>
+                        </div>
+                        <div class="print-control__adjust__controller-decrease" (click)="changeFeedrate(-1)">-</div>
+                    </div>
+                    <span class="print-control__adjust__name">Feedrate</span>
+                </td>
+                <td class="print-control__adjust__change-parameter">
+                    <div class="print-control__adjust__controller">
+                        <div class="print-control__adjust__controller-increase" (click)="changeFlowrate(1)">+</div>
+                        <div class="print-control__adjust__controller-value">
+                            {{ flowrate }}<span class="print-control__adjust__controller-value-unit">%</span>
+                        </div>
+                        <div class="print-control__adjust__controller-decrease" (click)="changeFlowrate(-1)">-</div>
+                    </div>
+                    <span class="print-control__adjust__name">Flowrate</span>
+                </td>
+            </tr>
+        </table>
+        <div class="print-control__adjust__save" (click)="setAdjustParameters()">save</div>
     </div>
 </div>
diff --git a/src/app/print-control/print-control.component.scss b/src/app/print-control/print-control.component.scss
@@ -48,7 +48,13 @@
         text-align: center;
         margin-top: 8vh;
         margin-bottom: 7vh;
-        margin-left: calc(50% - 11vw)
+        margin-left: calc(50% - 11vw);
+
+        &-small {
+            display: block;
+            width: 7.5vw;
+            margin: -9vw auto 0;
+        }
     }
 
     &__cancel {
@@ -77,4 +83,60 @@
             }
         }
     }
+
+    &__adjust {
+        &__wrapper {
+            display: block;
+            width: 90vw;
+            margin: 6vh 5vw;
+        }
+
+        &__change-parameter {
+            width: 27vw;
+            text-align: center;
+        }
+
+        &__controller {
+            border: solid .6vw;
+            border-radius: 3vw;
+            width: 19.5vw;
+            margin-left: .9vw;
+
+            &-value {
+                font-size: 5vw;
+                font-weight: 500;
+
+                &-unit {
+                    font-size: 2.5vw;
+                    font-weight: 400;
+                }
+            }
+
+            &-increase {
+                padding: 3vh 6vw;
+                font-weight: 500;
+            }
+
+            &-decrease {
+                padding: 3vh 6vw;
+                font-weight: 500;
+            }
+        }
+
+        &__name {
+            margin-top: 5vh;
+            display: block;
+            font-size: 3.5vw;
+        }
+
+        &__save {
+            display: block;
+            width: 15vw;
+            text-align: center;
+            margin: auto;
+            padding: 1.3vh 0;
+            border: 0.6vw solid;
+            border-radius: 2.5vw;
+        }
+    }
 }
diff --git a/src/app/print-control/print-control.component.ts b/src/app/print-control/print-control.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { JobService } from '../job.service';
+import { PrinterService, PrinterStatusAPI } from '../printer.service';
+import { take } from 'rxjs/operators';
 
 @Component({
   selector: 'app-print-control',
@@ -12,7 +14,12 @@ export class PrintControlComponent implements OnInit {
   public controlView = ControlView;
   public view = ControlView.MAIN;
 
-  constructor(private jobService: JobService) { }
+  public temperatureHotend;
+  public temperatureHeatbed;
+  public feedrate;
+  public flowrate;
+
+  constructor(private jobService: JobService, private printerService: PrinterService) { }
 
   ngOnInit() {
   }
@@ -47,6 +54,7 @@ export class PrintControlComponent implements OnInit {
 
   public showControlOverlay(event?) {
     this.stopPropagation(event);
+    this.loadData();
     this.view = ControlView.MAIN;
     this.showControls = true;
   }
@@ -75,6 +83,48 @@ export class PrintControlComponent implements OnInit {
     this.stopPropagation(event);
   }
 
+  private loadData() {
+    this.temperatureHotend = '?';
+    this.temperatureHeatbed = '?';
+    this.flowrate = 100;
+    this.feedrate = 100;
+    this.printerService.getObservable().pipe(take(1)).subscribe((printerStatus: PrinterStatusAPI) => {
+      this.temperatureHotend = printerStatus.nozzle.set;
+      this.temperatureHeatbed = printerStatus.heatbed.set;
+    });
+  }
+
+  public changeTemperatureHotend(value: number) {
+    this.temperatureHotend += value;
+    if (this.temperatureHotend < 0) { this.temperatureHotend = 0; }
+    if (this.temperatureHotend > 999) { this.temperatureHotend = 999; }
+  }
+
+  public changeTemperatureHeatbed(value: number) {
+    this.temperatureHeatbed += value;
+    if (this.temperatureHeatbed < 0) { this.temperatureHeatbed = 0; }
+    if (this.temperatureHeatbed > 999) { this.temperatureHeatbed = 999; }
+  }
+
+  public changeFeedrate(value: number) {
+    this.feedrate += value;
+    if (this.feedrate < 50) { this.feedrate = 50; }
+    if (this.feedrate > 200) { this.feedrate = 200; }
+  }
+
+  public changeFlowrate(value: number) {
+    this.flowrate += value;
+    if (this.flowrate < 75) { this.flowrate = 75; }
+    if (this.flowrate > 125) { this.flowrate = 125; }
+  }
+
+  public setAdjustParameters() {
+    this.printerService.setTemperatureHotend(this.temperatureHotend);
+    this.printerService.setTemperatureHeatbed(this.temperatureHeatbed);
+    this.printerService.setFeedrate(this.feedrate);
+    this.printerService.setFlowrate(this.flowrate);
+  }
+
 }
 
 

diff --git a/src/app/printer.service.ts b/src/app/printer.service.ts
@@ -17,7 +17,7 @@ export class PrinterService {
   observable: Observable<PrinterStatusAPI>;
 
   constructor(private http: HttpClient, private configService: ConfigService, private notificationService: NotificationService) {
-    this.observable = new Observable((observer: Observer<any>) => {
+    this.observable = new Observable((observer: Observer<PrinterStatusAPI>) => {
       timer(500, this.configService.getAPIInterval()).subscribe(_ => {
         if (this.httpGETRequest) {
           this.httpGETRequest.unsubscribe();
@@ -94,6 +94,66 @@ export class PrinterService {
       );
   }
 
+  public setTemperatureHotend(temperature: number) {
+    const temperatureHotendCommand: TemperatureHotendCommand = {
+      command: 'target',
+      targets: {
+        tool0: temperature
+      }
+    };
+    this.httpPOSTRequest = this.http.post(this.configService.getURL('printer/tool'), temperatureHotendCommand,
+      this.configService.getHTTPHeaders())
+      .subscribe(
+        () => null, (error: HttpErrorResponse) => {
+          this.notificationService.setError('Can\'t set Hotend Temperature!', error.message);
+        }
+      );
+  }
+
+  public setTemperatureHeatbed(temperature: number) {
+    const temperatureHeatbedCommand: TemperatureHeatbedCommand = {
+      command: 'target',
+      target: temperature
+    };
+    this.httpPOSTRequest = this.http.post(this.configService.getURL('printer/bed'), temperatureHeatbedCommand,
+      this.configService.getHTTPHeaders())
+      .subscribe(
+        () => null, (error: HttpErrorResponse) => {
+          this.notificationService.setError('Can\'t set Heatbed Temperature!', error.message);
+        }
+      );
+  }
+
+  public setFeedrate(feedrate: number) {
+    if (feedrate === 100) { return; }
+    const feedrateCommand: FeedrateCommand = {
+      command: 'feedrate',
+      factor: feedrate
+    };
+    this.httpPOSTRequest = this.http.post(this.configService.getURL('printer/printhead'), feedrateCommand,
+      this.configService.getHTTPHeaders())
+      .subscribe(
+        () => null, (error: HttpErrorResponse) => {
+          this.notificationService.setError('Can\'t set Feedrate!', error.message);
+        }
+      );
+  }
+
+  public setFlowrate(flowrate: number) {
+    if (flowrate === 100) { return; }
+    const flowrateCommand: FeedrateCommand = {
+      command: 'flowrate',
+      factor: flowrate
+    };
+    this.httpPOSTRequest = this.http.post(this.configService.getURL('printer/tool'), flowrateCommand,
+      this.configService.getHTTPHeaders())
+      .subscribe(
+        () => null, (error: HttpErrorResponse) => {
+          this.notificationService.setError('Can\'t set Flowrate!', error.message);
+        }
+      );
+  }
+
   public isPrinterOffline(): Promise<boolean> {
     return new Promise((resolve) => {
       this.http.get(this.configService.getURL('connection'), this.configService.getHTTPHeaders())
@@ -132,3 +192,21 @@ interface JogCommand {
 interface GCodeCommand {
   commands: string[];
 }
+
+interface FeedrateCommand {
+  command: string;
+  factor: number;
+}
+
+interface TemperatureHotendCommand {
+  command: string;
+  targets: {
+    tool0: number;
+    tool1?: number;
+  };
+}
+
+interface TemperatureHeatbedCommand {
+  command: string;
+  target: number;
+}