Skip to content

Commit

Permalink
Add temperature controls to main menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@harleyg321
harleyg321 committed Mar 20, 2020
1 parent 60158a7 commit 7388624
Show file tree
Hide file tree
Showing 3 changed files with 207 additions and 3 deletions.
73 changes: 70 additions & 3 deletions src/app/printer-status/printer-status.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
<table class="printer-status" *ngIf="printerStatus">
<tr>
<td class="printer-status__value printer-status__value-1"
[ngClass]="{'printer-status__no-set-value': printerStatus.nozzle.set === 0}">
[ngClass]="{'printer-status__no-set-value': printerStatus.nozzle.set === 0}"
(click)="showQuickControlHotend()"
matRipple [matRippleUnbounded]="false">
<img src="assets/nozzle.svg">
<span class="printer-status__actual-value">{{ printerStatus.nozzle.current }}<span
class="printer-status__unit">°C</span></span>
<span class="printer-status__set-value"
*ngIf="printerStatus.nozzle.set">/{{ printerStatus.nozzle.set }}<span class="unit">°C</span></span>
</td>
<td class="printer-status__value printer-status__value-2"
[ngClass]="{'printer-status__no-set-value': printerStatus.heatbed.set === 0}">
[ngClass]="{'printer-status__no-set-value': printerStatus.heatbed.set === 0}"
(click)="showQuickControlHeatbed()"
matRipple [matRippleUnbounded]="false">
<img src="assets/heat-bed.svg">
<span class="printer-status__actual-value">{{ printerStatus.heatbed.current }}<span
class="printer-status__unit">°C</span></span>
Expand All @@ -22,4 +26,67 @@
class="printer-status__unit">%</span></span>
</td>
</tr>
</table>
</table>
<div class="quickControl" *ngIf="view !== QuickControlView.NONE">
<table class="top-bar" (click)="hideQuickControl()">
<tr>
<td class="top-bar__back"><img src="assets/back.svg" class="top-bar__back-icon" />back</td>
</tr>
</table>
<img src="assets/nozzle.svg" class="quickControl__center-icon-small" *ngIf="view === QuickControlView.HOTEND">
<img src="assets/heat-bed.svg" class="quickControl__center-icon-small" *ngIf="view === QuickControlView.HEATBED">
<div class="quickControl__controller" *ngIf="view === QuickControlView.HOTEND">
<div class="quickControl__controller-row">
<div class="quickControl__controller-increase" (click)="changeTemperatureHotend(1)"
matRipple [matRippleUnbounded]="false">+1
</div>
<div class="quickControl__controller-increase" (click)="changeTemperatureHotend(10)"
matRipple [matRippleUnbounded]="false">+10
</div>
</div>
<div class="quickControl__controller-value" colspan="2">
{{ this.newHotendTarget }}<span class="quickControl__controller-value-unit">°C</span>
</div>
<div class="quickControl__controller-row">
<div class="quickControl__controller-decrease" (click)="changeTemperatureHotend(-1)"
matRipple [matRippleUnbounded]="false">-1
</div>
<div class="quickControl__controller-decrease" (click)="changeTemperatureHotend(-10)"
matRipple [matRippleUnbounded]="false">-10
</div>
</div>
<div class="quickControl__controller-row">
<div class="quickControl__controller-set" colspan="2" (click)="setTemperatureHotend()"
matRipple [matRippleUnbounded]="false">
<span class="quickControl__controller-set-span">Set</span>
</div>
</div>
</div>
<div class="quickControl__controller" *ngIf="view === QuickControlView.HEATBED">
<div class="quickControl__controller-row">
<div class="quickControl__controller-increase" (click)="changeTemperatureHeatbed(1)"
matRipple [matRippleUnbounded]="false">+1
</div>
<div class="quickControl__controller-increase" (click)="changeTemperatureHeatbed(10)"
matRipple [matRippleUnbounded]="false">+10
</div>
</div>
<div class="quickControl__controller-value" colspan="2">
{{ this.newHeatbedTarget }}<span class="quickControl__controller-value-unit">°C</span>
</div>
<div class="quickControl__controller-row">
<div class="quickControl__controller-decrease" (click)="changeTemperatureHeatbed(-1)"
matRipple [matRippleUnbounded]="false">-1
</div>
<div class="quickControl__controller-decrease" (click)="changeTemperatureHeatbed(-10)"
matRipple [matRippleUnbounded]="false">-10
</div>
</div>
<div class="quickControl__controller-row">
<div class="quickControl__controller-set" colspan="2" (click)="setTemperatureHeatbed()"
matRipple [matRippleUnbounded]="false">
<span class="quickControl__controller-set-span">Set</span>
</div>
</div>
</div>
</div>
85 changes: 85 additions & 0 deletions src/app/printer-status/printer-status.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
}
52 changes: 52 additions & 0 deletions src/app/printer-status/printer-status.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -53,10 +57,58 @@ 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 {
nozzle: PrinterValue;
heatbed: PrinterValue;
fan: number | string;
}

enum QuickControlView {
NONE,
HOTEND,
HEATBED,
}

0 comments on commit 7388624

Please sign in to comment.