Skip to content

Commit

Permalink
Feature/custom actions on sleep (#1299)
Browse files Browse the repository at this point in the history 
* UI Control on Sleep screen done

* custom actions on sleep screen

* fix codefactor issue
  • Loading branch information
@UnchartedBull
UnchartedBull committed Jan 12, 2021
1 parent 9d4efe4 commit 5336340
Show file tree
Hide file tree
Showing 10 changed files with 411 additions and 300 deletions.
2 changes: 2 additions & 0 deletions src/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ import { URLSafePipe } from './url.pipe';
import { MoveFilamentComponent } from './filament/move-filament/move-filament.component';
import { ChangeFilamentComponent } from './filament/change-filament/change-filament.component';
import { PurgeFilamentComponent } from './filament/purge-filament/purge-filament.component';
import { CustomActionsComponent } from './control/custom-actions/custom-actions.component';

@NgModule({
declarations: [
Expand Down Expand Up @@ -81,6 +82,7 @@ import { PurgeFilamentComponent } from './filament/purge-filament/purge-filament
MoveFilamentComponent,
ChangeFilamentComponent,
PurgeFilamentComponent,
CustomActionsComponent,
],
imports: [
AppRoutingModule,
Expand Down
40 changes: 1 addition & 39 deletions src/app/control/control.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,3 @@
<div class="i-frame" id="iFrame">
loading website ...
<iframe
class="i-frame__content"
[src]="iFrameURL | url"
onload="this.style.opacity=1;"
sandbox="allow-forms, allow-modals, allow-popups, allow-same-origin, allow-scripts, allow-top-navigation-by-user-activation"
>
That shouldn't happen ...
</iframe>
<img src="assets/error.svg" class="i-frame__close" (click)="hideIFrame()" />
</div>

<table class="top-bar">
<tr>
<td class="top-bar__back" routerLink="/main-screen">
Expand Down Expand Up @@ -104,22 +91,7 @@
</div>
<span class="control__heading">Z</span>
</div>
<div class="control__custom">
<div
class="control__custom-action"
*ngFor="let customAction of customActions"
[style.border-color]="customAction.color"
(click)="doAction(customAction.command, customAction.exit, customAction.confirm)"
matRipple
[matRippleUnbounded]="false"
>
<fa-icon
[icon]="['fas', customAction.icon]"
class="control__custom-action-icon"
[styles]="{ color: customAction.color }"
></fa-icon>
</div>
</div>
<app-custom-actions [redirectActive]="true"></app-custom-actions>
<table class="control__distance">
<tr>
<td
Expand Down Expand Up @@ -160,13 +132,3 @@
</tr>
</table>
</div>

<div class="confirm__wrapper" *ngIf="actionToConfirm">
<div class="confirm">
<h1>Are you sure?</h1>
<p class="confirm__sub-heading">Do you want to execute the following GCode?</p>
<p class="confirm__gcode">{{ actionToConfirm.command }}</p>
<img class="confirm__icon" src="assets/confirm.svg" (click)="doActionConfirm()" />
<img class="confirm__icon" src="assets/cancel.svg" (click)="doActionNoConfirm()" />
</div>
</div>
106 changes: 6 additions & 100 deletions src/app/control/control.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,3 @@
.i-frame {
display: none;
width: 100%;
height: 100%;
position: fixed;
left: 0;
right: 0;
z-index: 50;
transition: opacity ease-in-out 0.5s;
opacity: 0;
background: #2a2f39;
font-weight: 500;
font-size: 5vw;
text-align: center;
padding-top: 24vh;

&__content {
border: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
opacity: 0;
}

&__close {
width: 5vw;
position: fixed;
top: 3vh;
right: 3.5vw;
z-index: 51;
}
}

.control {
margin-top: 5vh;
display: block;
Expand Down Expand Up @@ -158,76 +122,18 @@
border-right: 0.25vw solid #f5f6fa;
}
}

&__custom {
height: 75vh;
width: 30vw;
display: block;
float: right;
overflow: scroll;

&::-webkit-scrollbar {
display: none;
}

&-action {
display: block;
float: left;
width: 10vw;
height: 10vw;
border: 0.8vw solid #f5f6fa;
border-radius: 1.5vw;
text-align: center;
opacity: 0.9;
margin: 0 1.4vw 3vh;

&-icon {
font-size: 5.5vw;
vertical-align: -3vw;
}
}
}
}

.top-bar__next-icon {
vertical-align: -3vh;
}

.confirm {
position: fixed;
top: 22vh;
width: 64vw;
margin-left: 15vw;
background-color: #5a6675;
border-radius: 2vw;
padding: 3vh 3vw;
z-index: 10;

&__sub-heading {
font-size: 2.4vw;
padding-top: 2vh;
}

&__gcode {
font-size: 2.2vw;
padding: 2vh 1.5vw;
font-family: 'Cousine', monospace;
}

&__icon {
height: 15vh;
margin-top: 5vh;
margin-left: 15vw;
}
app-custom-actions {
float: right;
height: 75vh;
overflow-y: scroll;

&__wrapper {
position: fixed;
z-index: 2;
background-color: rgba(0, 0, 0, 0.85);
// backdrop-filter: blur(8px);
left: 0;
top: 0;
right: 0;
bottom: 0;
&::-webkit-scrollbar {
display: none;
}
}
158 changes: 1 addition & 157 deletions src/app/control/control.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,6 @@
import { Component } from '@angular/core';
import { SafeResourceUrl } from '@angular/platform-browser';
import { Router } from '@angular/router';

import { ConfigService } from '../config/config.service';
import { OctoprintService } from '../octoprint.service';
import { OctoprintPrinterProfile } from '../octoprint/model/printerProfile';
import { EnclosureService } from '../plugins/enclosure.service';
import { PsuControlService } from '../plugins/psu-control.service';
import { TPLinkSmartPlugService } from '../plugins/tplink-smartplug.service';
import { PrinterService } from '../printer.service';
import { PrinterProfileService } from '../printerprofile.service';

Expand All @@ -20,21 +13,9 @@ export class ControlComponent {
public printerProfile: OctoprintPrinterProfile;

public jogDistance = 10;
public customActions = [];
public showHelp = false;
public iFrameURL: SafeResourceUrl = 'about:blank';
public actionToConfirm: ActionToConfirm;

public constructor(
private printerService: PrinterService,
private printerProfileService: PrinterProfileService,
private octoprintService: OctoprintService,
private configService: ConfigService,
private psuControlService: PsuControlService,
private enclosureService: EnclosureService,
private tplinkSmartPlugService: TPLinkSmartPlugService,
private router: Router,
) {
public constructor(private printerService: PrinterService, private printerProfileService: PrinterProfileService) {
this.printerProfile = {
name: '_default',
model: 'unknown',
Expand All @@ -46,8 +27,6 @@ export class ControlComponent {
},
};

this.customActions = this.configService.getCustomActions();

this.printerProfileService.getDefaultPrinterProfile().then(profile => {
this.printerProfile = profile;
});
Expand All @@ -66,139 +45,4 @@ export class ControlComponent {

this.printerService.jog(axis === 'x' ? distance : 0, axis === 'y' ? distance : 0, axis === 'z' ? distance : 0);
}

public doAction(command: string, exit: boolean, confirm: boolean): void {
if (confirm) {
this.actionToConfirm = {
command,
exit,
};
} else {
this.executeGCode(command);
if (exit) {
this.router.navigate(['/main-screen']);
}
}
}

public doActionConfirm(): void {
this.executeGCode(this.actionToConfirm.command);
if (this.actionToConfirm.exit) {
this.router.navigate(['/main-screen']);
} else {
this.actionToConfirm = null;
}
}

public doActionNoConfirm(): void {
this.actionToConfirm = null;
}

private executeGCode(command: string): void {
switch (command) {
case '[!DISCONNECT]':
this.disconnectPrinter();
break;
case '[!STOPDASHBOARD]':
this.stopOctoDash();
break;
case '[!RELOAD]':
this.reloadOctoPrint();
break;
case '[!REBOOT]':
this.rebootPi();
break;
case '[!SHUTDOWN]':
this.shutdownPi();
break;
case '[!KILL]':
this.kill();
break;
case '[!POWEROFF]':
this.psuControlService.changePSUState(false);
break;
case '[!POWERON]':
this.psuControlService.changePSUState(true);
break;
case '[!POWERTOGGLE]':
this.psuControlService.togglePSU();
break;
case '[!TPLINKOFF]':
this.tplinkSmartPlugService.changePowerState(false);
break;
case '[!TPLINKON]':
this.tplinkSmartPlugService.changePowerState(true);
break;
default: {
if (command.includes('[!WEB]')) {
this.openIFrame(command.replace('[!WEB]', ''));
} else if (command.includes('[!NEOPIXEL]')) {
const values = command.replace('[!NEOPIXEL]', '').split(',');
this.setLEDColor(values[0], values[1], values[2], values[3]);
} else {
this.printerService.executeGCode(command);
}
break;
}
}
}

// [!DISCONNECT]
public disconnectPrinter(): void {
this.octoprintService.disconnectPrinter();
}

// [!STOPDASHBOARD]
public stopOctoDash(): void {
window.close();
}

// [!RELOAD]
public reloadOctoPrint(): void {
this.octoprintService.sendSystemCommand('restart');
}

// [!REBOOT]
public rebootPi(): void {
this.octoprintService.sendSystemCommand('reboot');
}

// [!SHUTDOWN]
public shutdownPi(): void {
this.octoprintService.sendSystemCommand('shutdown');
}

// [!KILL]
public kill(): void {
this.shutdownPi();
setTimeout(this.stopOctoDash, 500);
}

// [!WEB]
public openIFrame(url: string): void {
this.iFrameURL = url;
const iFrameDOM = document.getElementById('iFrame');
iFrameDOM.style.display = 'block';
setTimeout((): void => {
iFrameDOM.style.opacity = '1';
}, 50);
}

public hideIFrame(): void {
const iFrameDOM = document.getElementById('iFrame');
iFrameDOM.style.opacity = '0';
setTimeout((): void => {
iFrameDOM.style.display = 'none';
this.iFrameURL = 'about:blank';
}, 500);
}

public setLEDColor(identifier: string, red: string, green: string, blue: string): void {
this.enclosureService.setLEDColor(Number(identifier), Number(red), Number(green), Number(blue));
}
}

interface ActionToConfirm {
command: string;
exit: boolean;
}
Loading

0 comments on commit 5336340

Please sign in to comment.