From 7388624233832f369d7721608038b17b3116e137 Mon Sep 17 00:00:00 2001 From: Harley Glossop Date: Fri, 20 Mar 2020 21:01:42 +0000 Subject: [PATCH] Add temperature controls to main menu --- .../printer-status.component.html | 73 +++++++++++++++- .../printer-status.component.scss | 85 +++++++++++++++++++ .../printer-status.component.ts | 52 ++++++++++++ 3 files changed, 207 insertions(+), 3 deletions(-) diff --git a/src/app/printer-status/printer-status.component.html b/src/app/printer-status/printer-status.component.html index 393c75bf8..e735c7e96 100644 --- a/src/app/printer-status/printer-status.component.html +++ b/src/app/printer-status/printer-status.component.html @@ -1,7 +1,9 @@ -
+ [ngClass]="{'printer-status__no-set-value': printerStatus.nozzle.set === 0}" + (click)="showQuickControlHotend()" + matRipple [matRippleUnbounded]="false"> {{ printerStatus.nozzle.current }}°C @@ -9,7 +11,9 @@ *ngIf="printerStatus.nozzle.set">/{{ printerStatus.nozzle.set }}°C + [ngClass]="{'printer-status__no-set-value': printerStatus.heatbed.set === 0}" + (click)="showQuickControlHeatbed()" + matRipple [matRippleUnbounded]="false"> {{ printerStatus.heatbed.current }}°C @@ -22,4 +26,67 @@ class="printer-status__unit">%
\ No newline at end of file + +
+ + + + +
back
+ + +
+
+
+1 +
+
+10 +
+
+
+ {{ this.newHotendTarget }}°C +
+
+
-1 +
+
-10 +
+
+
+
+ Set +
+
+
+
+
+
+1 +
+
+10 +
+
+
+ {{ this.newHeatbedTarget }}°C +
+
+
-1 +
+
-10 +
+
+
+
+ Set +
+
+
+
diff --git a/src/app/printer-status/printer-status.component.scss b/src/app/printer-status/printer-status.component.scss index ce940a977..d89b8bb2c 100644 --- a/src/app/printer-status/printer-status.component.scss +++ b/src/app/printer-status/printer-status.component.scss @@ -75,3 +75,88 @@ } } } + +.quickControl { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, .85); + z-index: 1000; + + &__center-icon { + width: 22vw; + display: block; + text-align: center; + margin-top: 8vh; + margin-bottom: 7vh; + margin-left: calc(50% - 11vw); + + &-small { + display: block; + width: 7.5vw; + margin: -9vw auto 0; + } + } + + &__close { + display: block; + width: 6vw; + position: absolute; + right: 2vw; + top: 3vh; + } + + &__controller { + width: 35vw; + margin: 0 auto; + border: solid .6vw; + border-radius: 3vw; + margin-top: 5vh; + + &-row { + display: flex; + } + + &-value { + padding: 3vh 6vw; + font-size: 8vw; + font-weight: 500; + text-align: center; + + &-unit { + text-align: center; + font-size: 4vw; + font-weight: 400; + } + } + + &-increase { + padding: 3vh 6vw; + font-weight: 500; + //font-size: 4vw; + flex: 1; + } + + &-decrease { + padding: 3vh 6vw; + font-weight: 500; + //font-size: 4vw; + flex: 1; + } + + &-set { + height: 10vw; + border-top: solid .6vw; + flex: 1; + align-items: center; + display: flex; + + &-span { + text-align: center; + flex: 1; + } + } + } +} diff --git a/src/app/printer-status/printer-status.component.ts b/src/app/printer-status/printer-status.component.ts index 4ebba2e98..d5f7cd7a2 100644 --- a/src/app/printer-status/printer-status.component.ts +++ b/src/app/printer-status/printer-status.component.ts @@ -13,6 +13,10 @@ export class PrinterStatusComponent implements OnInit, OnDestroy { private subscriptions: Subscription = new Subscription(); public printerStatus: PrinterStatus; public status: string; + public QuickControlView = QuickControlView; + public view = QuickControlView.NONE; + public newHotendTarget = 200; + public newHeatbedTarget = 60; public constructor( private printerService: PrinterService, @@ -53,6 +57,48 @@ export class PrinterStatusComponent implements OnInit, OnDestroy { public ngOnDestroy(): void { this.subscriptions.unsubscribe(); } + + public showQuickControlHotend(): void { + this.view = QuickControlView.HOTEND; + } + + public showQuickControlHeatbed(): void { + this.view = QuickControlView.HEATBED; + } + + public hideQuickControl(): void { + this.view = QuickControlView.NONE; + } + + public changeTemperatureHotend(value: number): void { + this.newHotendTarget += value; + if (this.newHotendTarget < 0) { + this.newHotendTarget = 0; + } + if (this.newHotendTarget > 999) { + this.newHotendTarget = 999; + } + } + + public changeTemperatureHeatbed(value: number): void { + this.newHeatbedTarget += value; + if (this.newHeatbedTarget < 0) { + this.newHeatbedTarget = 0; + } + if (this.newHeatbedTarget > 999) { + this.newHeatbedTarget = 999; + } + } + + public setTemperatureHotend(): void { + this.printerService.setTemperatureHotend(this.newHotendTarget); + this.view = QuickControlView.NONE; + } + + public setTemperatureHeatbed(): void { + this.printerService.setTemperatureHeatbed(this.newHeatbedTarget); + this.view = QuickControlView.NONE; + } } export interface PrinterStatus { @@ -60,3 +106,9 @@ export interface PrinterStatus { heatbed: PrinterValue; fan: number | string; } + +enum QuickControlView { + NONE, + HOTEND, + HEATBED, +}