diff --git a/README.md b/README.md
index 0385530de..2d938e2e4 100644
--- a/README.md
+++ b/README.md
@@ -13,19 +13,19 @@
## Table of Contents
-- [Table of Contents](#table-of-contents)
-- [Installation](#installation)
-- [Update](#update)
-- [Tips and Tricks](#tips-and-tricks)
-- [Screenshots](#screenshots)
-- [Troubleshooting](#troubleshooting)
-- [Bugs and more](#bugs-and-more)
-- [Contributing](#contributing)
-- [License](#license)
+- [Table of Contents](#table-of-contents)
+- [Installation](#installation)
+- [Update](#update)
+- [Tips and Tricks](#tips-and-tricks)
+- [Screenshots](#screenshots)
+- [Troubleshooting](#troubleshooting)
+- [Bugs and more](#bugs-and-more)
+- [Contributing](#contributing)
+- [License](#license)
## Installation
-***Note: This script will install additional OctoPrint Plugins by default. If you want to know which visit the Wiki!***
+**_Note: This script will install additional OctoPrint Plugins by default. If you want to know which visit the Wiki!_**
```
wget -qO- https://github.com/UnchartedBull/OctoDash/raw/master/scripts/install.sh | bash -s -- --ptg
@@ -33,11 +33,12 @@ wget -qO- https://github.com/UnchartedBull/OctoDash/raw/master/scripts/install.s
For more options and information have a look at the [wiki](https://github.com/UnchartedBull/OctoDash/wiki/Installation).
-No Keyboard? [No Problem](https://github.com/UnchartedBull/OctoDash/wiki/Installation#setup-without-keyboard).
+No Keyboard? [No Problem](https://github.com/UnchartedBull/OctoDash/wiki/Installation#setup-without-keyboard).
Having issues during the installation? Please have a look at the [Troubleshooting Guide](https://github.com/UnchartedBull/OctoDash/wiki/Troubleshooting) first.
## Update
+
```
wget -qO- https://github.com/UnchartedBull/OctoDash/raw/master/scripts/update.sh | bash
```
@@ -46,13 +47,13 @@ For more info have a look at the [wiki](https://github.com/UnchartedBull/OctoDas
## Tips and Tricks
-- OctoDash supports .ufp package preview images (v1.4.1 and up)
-- If you loaded a file and want to unload it, just swipe left at the top portion of the screen
-- You can press multiple arrows directly after another in the control view. All actions will be executed one after another, even if the prior didn't finish before pressing the button
-- The six actions on the right in the control view can be customized. They can either send GCode commands to your printer, restart OctoPrint or your Pi and even open iFrames so you can view your camera
-
+- OctoDash supports .ufp package preview images (v1.4.1 and up)
+- You can press multiple arrows directly after another in the control view. All actions will be executed one after another, even if the prior didn't finish before pressing the button
+- The six actions on the right in the control view can be customized. They can either send GCode commands to your printer, restart OctoPrint or your Pi and even open iFrames so you can view your camera
+- You can adjust the temperatures in the home screen, by pressing on their icons
## Screenshots
+
@@ -60,6 +61,8 @@ For more info have a look at the [wiki](https://github.com/UnchartedBull/OctoDas
+ 
+ 
More Screenshots can be found [here](https://github.com/UnchartedBull/OctoDash/tree/master/screenshots).
diff --git a/package-lock.json b/package-lock.json
index 2e9dd9466..731241405 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6674,11 +6674,6 @@
"integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
"dev": true
},
- "hammerjs": {
- "version": "2.0.8",
- "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
- "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
- },
"handle-thing": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
diff --git a/package.json b/package.json
index 06cfabe23..058ea8a90 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,6 @@
"ajv": "^6.12.0",
"angular-svg-round-progressbar": "^3.0.1",
"electron-store": "^5.1.1",
- "hammerjs": "^2.0.8",
"lodash": "^4.17.15",
"ngx-spinner": "^9.0.1",
"rxjs": "~6.5.4",
diff --git a/screenshots/adjust-temperatures-main-screen.png b/screenshots/adjust-temperatures-main-screen.png
new file mode 100644
index 000000000..1d47aa086
Binary files /dev/null and b/screenshots/adjust-temperatures-main-screen.png differ
diff --git a/screenshots/control-confirmation.png b/screenshots/control-confirmation.png
new file mode 100644
index 000000000..bca95e0ea
Binary files /dev/null and b/screenshots/control-confirmation.png differ
diff --git a/screenshots/file_details.png b/screenshots/file_details.png
index 6aefb8ba4..88577ed0c 100644
Binary files a/screenshots/file_details.png and b/screenshots/file_details.png differ
diff --git a/screenshots/file_loaded.png b/screenshots/file_loaded.png
index 20e4a04fe..062e6981d 100644
Binary files a/screenshots/file_loaded.png and b/screenshots/file_loaded.png differ
diff --git a/screenshots/settings.png b/screenshots/settings.png
new file mode 100644
index 000000000..534bfe245
Binary files /dev/null and b/screenshots/settings.png differ
diff --git a/screenshots/sleeping.png b/screenshots/sleeping.png
index ee08a3f60..dbf804f4a 100644
Binary files a/screenshots/sleeping.png and b/screenshots/sleeping.png differ
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8b1882432..79d2c0999 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,13 +1,12 @@
import { HttpClientModule } from '@angular/common/http';
-import { Injectable, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatRippleModule } from '@angular/material/core';
-import { BrowserModule, HAMMER_GESTURE_CONFIG, HammerGestureConfig } from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { RoundProgressModule } from 'angular-svg-round-progressbar';
-import * as Hammer from 'hammerjs';
import { NgxSpinnerModule } from 'ngx-spinner';
import { AppComponent } from './app.component';
@@ -35,32 +34,6 @@ import { SettingsComponent } from './settings/settings.component';
import { StandbyComponent } from './standby/standby.component';
import { URLSafePipe } from './url.pipe';
-@Injectable()
-export class HammerConfig extends HammerGestureConfig {
- public overrides = {
- pan: {
- direction: 6,
- },
- pinch: {
- enable: false,
- },
- rotate: {
- enable: false,
- },
- press: {
- pointers: 1,
- time: 501,
- threshold: 15,
- },
- swipe: {
- pointers: 1,
- direction: Hammer.DIRECTION_LEFT,
- threshold: 20,
- velocity: 0.4,
- },
- };
-}
-
@NgModule({
declarations: [
AppComponent,
@@ -93,17 +66,7 @@ export class HammerConfig extends HammerGestureConfig {
BrowserAnimationsModule,
MatRippleModule,
],
- providers: [
- AppService,
- ConfigService,
- NotificationService,
- PrinterService,
- JobService,
- {
- provide: HAMMER_GESTURE_CONFIG,
- useClass: HammerConfig,
- },
- ],
+ providers: [AppService, ConfigService, NotificationService, PrinterService, JobService],
bootstrap: [AppComponent],
})
export class AppModule {
diff --git a/src/app/config/config.service.ts b/src/app/config/config.service.ts
index 8fa665b36..f3bf158af 100644
--- a/src/app/config/config.service.ts
+++ b/src/app/config/config.service.ts
@@ -232,6 +232,10 @@ export class ConfigService {
public getDefaultFanSpeed(): number {
return this.config.printer.defaultTemperatureFanSpeed.fan;
}
+
+ public isPreheatPluginEnabled(): boolean {
+ return this.config.plugins.preheatButton.enabled;
+ }
}
export interface Config {
diff --git a/src/app/files.service.ts b/src/app/files.service.ts
index 1dc253f45..b0105b041 100644
--- a/src/app/files.service.ts
+++ b/src/app/files.service.ts
@@ -136,6 +136,30 @@ export class FilesService {
});
}
+ public getThumbnail(filePath: string): Promise {
+ return new Promise((resolve, reject): void => {
+ if (this.httpGETRequest) {
+ this.httpGETRequest.unsubscribe();
+ }
+ this.httpGETRequest = this.http
+ .get(this.configService.getURL('files/local/' + filePath), this.configService.getHTTPHeaders())
+ .subscribe(
+ (data: OctoprintFilesAPI): void => {
+ let thumbnail = data.path.endsWith('.ufp.gcode')
+ ? this.configService
+ .getURL('plugin/UltimakerFormatPackage/thumbnail/')
+ .replace('/api/', '/') + data.path.replace('.ufp.gcode', '.png')
+ : undefined;
+ resolve(thumbnail);
+ },
+ (error: HttpErrorResponse): void => {
+ this.notificationService.setError("Can't load thumbnail!", error.message);
+ reject();
+ },
+ );
+ });
+ }
+
public loadFile(filePath: string): void {
if (this.httpPOSTRequest) {
this.httpPOSTRequest.unsubscribe();
diff --git a/src/app/files/files.component.ts b/src/app/files/files.component.ts
index c9f6ba4bc..72d91e565 100644
--- a/src/app/files/files.component.ts
+++ b/src/app/files/files.component.ts
@@ -77,9 +77,7 @@ export class FilesComponent {
case 'name': {
this.folderContent.sort((a, b): number =>
a.type === b.type
- ? (order === 'asc'
- ? a.name > b.name
- : a.name < b.name)
+ ? (order === 'asc' ? a.name > b.name : a.name < b.name)
? 1
: -1
: a.type === 'folder'
diff --git a/src/app/job-status/job-status.component.html b/src/app/job-status/job-status.component.html
index 880c6f7b8..f1ce26954 100644
--- a/src/app/job-status/job-status.component.html
+++ b/src/app/job-status/job-status.component.html
@@ -11,10 +11,17 @@
elapsed: {{ job.timePrinted.value }}{{ job.timePrinted.unit }}
-
+
+
+
discard
+
+
+
.job-info__filename {
+ &__file-loaded > .job-info__filename {
font-size: 5vw;
}
&__preview {
- width: 15vw;
- margin-top: 9vh;
- margin-left: 3vw;
- margin-right: 3vw;
- margin-bottom: 8vh;
+ width: 21vw;
float: left;
+
+ &-image {
+ width: 15vw;
+ margin: 4vh 3vw 0;
+ }
+
+ &-discard {
+ display: block;
+ font-size: 2vw;
+ background-color: rgba(194, 54, 22, 0.85);
+ width: 10vw;
+ text-align: center;
+ padding: 1.8vh 0;
+ border-radius: 0.8vw;
+ margin: 2vh auto;
+ }
}
&__actions {
@@ -74,6 +85,10 @@
float: right;
margin: -13vh 7vw 0 0;
+ &-disabled {
+ opacity: 0.4;
+ }
+
&-icon {
width: 5.5vw;
}
@@ -98,7 +113,7 @@
&-icon {
padding-right: 2vw;
font-size: 3vw;
- vertical-align: .8vh;
+ vertical-align: 0.8vh;
}
&-value {
diff --git a/src/app/job-status/job-status.component.ts b/src/app/job-status/job-status.component.ts
index 4049e630a..63181222c 100644
--- a/src/app/job-status/job-status.component.ts
+++ b/src/app/job-status/job-status.component.ts
@@ -2,7 +2,9 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { AppService } from '../app.service';
+import { ConfigService } from '../config/config.service';
import { Job, JobService } from '../job.service';
+import { NotificationService } from '../notification/notification.service';
@Component({
selector: 'app-job-status',
@@ -13,7 +15,12 @@ export class JobStatusComponent implements OnInit, OnDestroy {
private subscriptions: Subscription = new Subscription();
public job: Job;
- public constructor(private jobService: JobService, private service: AppService) {}
+ public constructor(
+ private jobService: JobService,
+ private service: AppService,
+ private notificationService: NotificationService,
+ private configService: ConfigService,
+ ) {}
public ngOnInit(): void {
this.subscriptions.add(this.jobService.getObservable().subscribe((job: Job): Job => (this.job = job)));
@@ -27,11 +34,22 @@ export class JobStatusComponent implements OnInit, OnDestroy {
return this.service.getLoadedFile();
}
+ public isPreheatEnabled(): boolean {
+ return this.configService.isPreheatPluginEnabled();
+ }
+
public preheat(): void {
this.jobService.preheat();
}
- public cancelLoadedFile(): void {
+ public preheatDisabled(): void {
+ this.notificationService.setWarning(
+ 'Preheat Plugin is not enabled!',
+ 'Please make sure to install and enable the Preheat Plugin to use this functionality.',
+ );
+ }
+
+ public discardLoadedFile(): void {
this.service.setLoadedFile(false);
}
diff --git a/src/app/job.service.ts b/src/app/job.service.ts
index 46f19b59a..883cfbedd 100644
--- a/src/app/job.service.ts
+++ b/src/app/job.service.ts
@@ -5,6 +5,7 @@ import { shareReplay } from 'rxjs/operators';
import { AppService } from './app.service';
import { ConfigService } from './config/config.service';
+import { FilesService } from './files.service';
import { NotificationService } from './notification/notification.service';
import { JobCommand, OctoprintFilament, OctoprintJobAPI } from './octoprint-api/jobAPI';
@@ -23,6 +24,7 @@ export class JobService {
private http: HttpClient,
private notificationService: NotificationService,
private service: AppService,
+ private fileService: FilesService,
) {
this.observable = new Observable((observer: Observer): void => {
this.observer = observer;
@@ -33,14 +35,15 @@ export class JobService {
this.httpGETRequest = this.http
.get(this.configService.getURL('job'), this.configService.getHTTPHeaders())
.subscribe(
- (data: OctoprintJobAPI): void => {
+ async (data: OctoprintJobAPI): Promise => {
let job: Job = null;
if (data.job && data.job.file.name) {
this.printing = ['Printing', 'Pausing', 'Paused', 'Cancelling'].includes(data.state);
try {
job = {
status: data.state,
- filename: data.job.file.display.replace('.gcode', ''),
+ filename: data.job.file.display.replace('.gcode', '').replace('.ufp', ''),
+ thumbnail: await this.fileService.getThumbnail(data.job.file.path),
progress: Math.round((data.progress.filepos / data.job.file.size) * 100),
filamentAmount: this.service.convertFilamentLengthToAmount(
this.getTotalAmountOfFilament(data.job.filament),
@@ -224,6 +227,7 @@ interface Duration {
export interface Job {
status: string;
filename: string;
+ thumbnail: string | undefined;
progress: number;
filamentAmount: number;
timeLeft: Duration;
diff --git a/src/main.ts b/src/main.ts
index b90ebbf39..7d55186e7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,3 @@
-import 'hammerjs';
-
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
diff --git a/src/styles.scss b/src/styles.scss
index fd8c1dc1c..448fc204a 100755
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -43,7 +43,7 @@ body {
app-root {
display: block;
background-color: #353b48;
- padding: .9vh .9vw;
+ padding: 0.9vh 0.9vw;
overflow: hidden;
}
@@ -96,7 +96,7 @@ app-root {
top: 0;
right: 0;
bottom: 0;
- background-color: rgba(0, 0, 0, .85);
+ background-color: rgba(0, 0, 0, 0.85);
z-index: 1000;
&__card {
@@ -128,7 +128,6 @@ app-root {
text-align: justify;
font-size: 3vw;
}
-
}
.splash-screen {
@@ -144,7 +143,7 @@ app-root {
display: block;
font-size: 1.8vw;
text-align: center;
- opacity: .8;
+ opacity: 0.8;
margin-top: 6vh;
}
@@ -161,26 +160,26 @@ app-root {
&-track {
background: transparent;
- border-radius: .85vw;
+ border-radius: 0.85vw;
box-shadow: none;
outline: none;
&-piece {
&:end {
background: transparent;
- margin-bottom: 5vh;
+ margin-bottom: 6vh;
}
&:start {
background: transparent;
- margin-top: 5vh;
+ margin-top: 4vh;
}
}
}
&-thumb {
- background: rgba(127, 143, 166, .8);
- border-radius: .85vw;
+ background: rgba(127, 143, 166, 0.8);
+ border-radius: 0.85vw;
box-shadow: none;
outline: none;
}
@@ -188,13 +187,13 @@ app-root {
.scroll__thumb-inactive {
display: block;
- background-color: rgba(127, 143, 166, .3);
+ background-color: rgba(127, 143, 166, 0.3);
width: 3vw;
height: 66.4vh;
position: fixed;
right: 2.5vw;
top: 28vh;
- border-radius: .89vw;
+ border-radius: 0.89vw;
z-index: 0;
pointer-events: none;
}