Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/custom actions on sleep #1299

Merged
merged 3 commits into from
Jan 12, 2021
Merged

Feature/custom actions on sleep #1299

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3c3ba6e
UI Control on Sleep screen done
UnchartedBull Jan 12, 2021
edc6a10
custom actions on sleep screen
UnchartedBull Jan 12, 2021
b15b37c
fix codefactor issue
UnchartedBull Jan 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/app/app.module.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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