-
-|
@@ -104,22 +91,7 @@
Z
-
-
+
-
-
-
diff --git a/src/app/control/control.component.scss b/src/app/control/control.component.scss
index 18bdf2b35..f41919163 100644
--- a/src/app/control/control.component.scss
+++ b/src/app/control/control.component.scss
@@ -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;
@@ -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;
}
}
diff --git a/src/app/control/control.component.ts b/src/app/control/control.component.ts
index 09d713384..1109ccddb 100644
--- a/src/app/control/control.component.ts
+++ b/src/app/control/control.component.ts
@@ -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';
@@ -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',
@@ -46,8 +27,6 @@ export class ControlComponent {
},
};
- this.customActions = this.configService.getCustomActions();
-
this.printerProfileService.getDefaultPrinterProfile().then(profile => {
this.printerProfile = profile;
});
@@ -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;
}
diff --git a/src/app/control/custom-actions/custom-actions.component.html b/src/app/control/custom-actions/custom-actions.component.html
new file mode 100644
index 000000000..a8b475e96
--- /dev/null
+++ b/src/app/control/custom-actions/custom-actions.component.html
@@ -0,0 +1,34 @@
+
-
-Are you sure?-Do you want to execute the following GCode? -{{ actionToConfirm.command }} -
- 
-
+ loading website ...
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/control/custom-actions/custom-actions.component.scss b/src/app/control/custom-actions/custom-actions.component.scss
new file mode 100644
index 000000000..aa64b4b27
--- /dev/null
+++ b/src/app/control/custom-actions/custom-actions.component.scss
@@ -0,0 +1,100 @@
+.i-frame {
+ display: none;
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ left: 0;
+ top: 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;
+ }
+
+ &__close {
+ width: 5vw;
+ position: fixed;
+ top: 3vh;
+ right: 3.5vw;
+ z-index: 51;
+ }
+}
+
+.custom-actions {
+ // height: 75vh;
+ width: 30vw;
+ display: block;
+ 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;
+ }
+ }
+}
+
+.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;
+ }
+
+ &__wrapper {
+ position: fixed;
+ z-index: 2;
+ background-color: rgba(0, 0, 0, 0.85);
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+}
diff --git a/src/app/control/custom-actions/custom-actions.component.ts b/src/app/control/custom-actions/custom-actions.component.ts
new file mode 100644
index 000000000..25d0976b4
--- /dev/null
+++ b/src/app/control/custom-actions/custom-actions.component.ts
@@ -0,0 +1,167 @@
+import { Component, Input } from '@angular/core';
+import { SafeResourceUrl } from '@angular/platform-browser';
+import { Router } from '@angular/router';
+import { ConfigService } from 'src/app/config/config.service';
+import { OctoprintService } from 'src/app/octoprint.service';
+import { EnclosureService, PsuControlService, TPLinkSmartPlugService } from 'src/app/plugins';
+import { PrinterService } from 'src/app/printer.service';
+
+@Component({
+ selector: 'app-custom-actions',
+ templateUrl: './custom-actions.component.html',
+ styleUrls: ['./custom-actions.component.scss'],
+})
+export class CustomActionsComponent {
+ @Input() redirectActive = true;
+
+ public customActions = [];
+ public iFrameURL: SafeResourceUrl = 'about:blank';
+ public actionToConfirm: ActionToConfirm;
+
+ constructor(
+ private printerService: PrinterService,
+ private octoprintService: OctoprintService,
+ private configService: ConfigService,
+ private psuControlService: PsuControlService,
+ private enclosureService: EnclosureService,
+ private tplinkSmartPlugService: TPLinkSmartPlugService,
+ private router: Router,
+ ) {
+ this.customActions = this.configService.getCustomActions();
+ }
+
+ public doAction(command: string, exit: boolean, confirm: boolean): void {
+ if (confirm) {
+ this.actionToConfirm = {
+ command,
+ exit,
+ };
+ } else {
+ this.executeGCode(command);
+ if (exit && this.redirectActive) {
+ 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;
+}
diff --git a/src/app/standby/standby.component.html b/src/app/standby/standby.component.html
index 262bf4519..b58f751f7 100644
--- a/src/app/standby/standby.component.html
+++ b/src/app/standby/standby.component.html
@@ -1,7 +1,29 @@
-
+
+Are you sure?+Do you want to execute the following GCode? +{{ actionToConfirm.command }} +
+
+
- 
- Shhh! OctoDash is sleeping.
- Press on the screen to wake me up again.
+
+
+
+
+
+
+
+
+
+ Actions
+
diff --git a/src/app/standby/standby.component.scss b/src/app/standby/standby.component.scss
index 7a1cbdc2b..5ea2cde42 100644
--- a/src/app/standby/standby.component.scss
+++ b/src/app/standby/standby.component.scss
@@ -1,4 +1,47 @@
.standby {
+ display: flex;
+ height: 100%;
+
+ &__main-window {
+ order: 1;
+ transition: flex-basis 0.6s ease-out;
+ margin-left: 13vw;
+ margin-right: 8vw;
+ }
+
+ &__actions-toggle {
+ order: 2;
+ flex-basis: 6%;
+ box-shadow: 10px 0 12px -6px rgba(0, 0, 0, 0.75);
+
+ &-icon {
+ display: block;
+ font-size: 6vw;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%) rotate(0deg);
+ transition: transform 0.4s ease-out;
+
+ &__rotate {
+ transform: translateY(-50%) rotate(180deg);
+ }
+ }
+ }
+
+ &__actions {
+ order: 3;
+ transition: flex-basis 0.6s ease-out;
+
+ &-text {
+ width: 30vw;
+ position: relative;
+ top: 6vh;
+ float: right;
+ text-align: center;
+ font-size: 0.9rem;
+ }
+ }
+
&__icon {
height: 45vh;
display: block;
@@ -11,6 +54,7 @@
text-align: center;
margin-bottom: 5vh;
font-size: 4vw;
+ animation: fadeIn ease 0.6s;
}
&-small {
@@ -18,6 +62,7 @@
text-align: center;
margin-bottom: 5vh;
font-size: 2vw;
+ animation: fadeIn ease 0.6s;
}
}
@@ -42,3 +87,27 @@
}
}
}
+
+app-custom-actions {
+ float: right;
+ height: 78vh;
+ position: relative;
+ top: 13vh;
+ overflow-y: scroll;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+}
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 30% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
diff --git a/src/app/standby/standby.component.ts b/src/app/standby/standby.component.ts
index 2b4e5beec..508b3f201 100644
--- a/src/app/standby/standby.component.ts
+++ b/src/app/standby/standby.component.ts
@@ -17,6 +17,7 @@ import { TPLinkSmartPlugService } from '../plugins/tplink-smartplug.service';
export class StandbyComponent implements OnInit {
public connecting = false;
public error = '';
+ public actionsVisible = false;
private connectionRetries = 3;
private displaySleepTimeout: ReturnType |