Update Loaded File Screen (#533)

* add ufp image to loaded file as well

* Preheat plugin disabled in config respected

* add discard

* update screenshots

* update README

README.md

@@ -13,31 +13,32 @@
 
 ## 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
 ```
 
 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,20 +47,22 @@ 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
+
 <p float="left">
     <img src="https://raw.githubusercontent.com/TimonGaebelein/OctoprintDash/master/screenshots/main-screen.png" width="49.5%" alt-text="Main Screen"/>
     <img src="https://raw.githubusercontent.com/TimonGaebelein/OctoprintDash/master/screenshots/job.png" width="49.5%" alt-text="Job Running">
     <img src="https://raw.githubusercontent.com/TimonGaebelein/OctoprintDash/master/screenshots/control.png" width="49.5%" alt-text="Printer Controls">
     <img src="https://raw.githubusercontent.com/TimonGaebelein/OctoprintDash/master/screenshots/print_controls.png" width="49.5%" alt-text="In Print">
     <img src="https://raw.githubusercontent.com/TimonGaebelein/OctoprintDash/master/screenshots/files_view.png" width="49.5%" alt-text="List Files">
     <img src="https://raw.githubusercontent.com/TimonGaebelein/OctoprintDash/master/screenshots/file_details.png" width="49.5%" alt-text="Details about Files">
+    <img src="https://raw.githubusercontent.com/TimonGaebelein/OctoprintDash/master/screenshots/file_loaded.png" width="49.5%" alt-text="Loaded Files">
+    <img src="https://raw.githubusercontent.com/TimonGaebelein/OctoprintDash/master/screenshots/settings.png" width="49.5%" alt-text="Settings">
 </p>
 
 More Screenshots can be found [here](https://github.com/UnchartedBull/OctoDash/tree/master/screenshots).

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",

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 {

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 {

src/app/files.service.ts

@@ -136,6 +136,30 @@ export class FilesService {
         });
     }
 
+    public getThumbnail(filePath: string): Promise<string | undefined> {
+        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();

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'

src/app/job-status/job-status.component.html

@@ -11,10 +11,17 @@
         elapsed: {{ job.timePrinted.value }}{{ job.timePrinted.unit }}</span>
 </div>
 <div class="job-info__file-loaded" *ngIf="job && !isPrinting() && isFileLoaded()" (swipe)="cancelLoadedFile()">
-    <img src="assets/object.svg" class="job-info__preview" />
+    <div class="job-info__preview">
+        <img src="{{job.thumbnail ? job.thumbnail : 'assets/object.svg'}}" class="job-info__preview-image" />
+        <span class="job-info__preview-discard" (click)="discardLoadedFile()">discard</span>
+    </div>
     <span class="job-info__filename">{{ job.filename }}</span> <br />
     <span (click)="preheat()" matRipple [matRippleUnbounded]="true" [matRippleCentered]="true"
-        class="job-info__actions-item-heat">
+        class="job-info__actions-item-heat" *ngIf="isPreheatEnabled()">
+        <img src="assets/heat.svg" class="job-info__actions-item-heat-icon" />
+    </span>
+    <span (click)="preheatDisabled()" matRipple [matRippleUnbounded]="true" [matRippleCentered]="true"
+        class="job-info__actions-item-heat job-info__actions-item-heat-disabled" *ngIf="!isPreheatEnabled()">
         <img src="assets/heat.svg" class="job-info__actions-item-heat-icon" />
     </span> <br />
     <span (click)="startJob()" matRipple [matRippleUnbounded]="true" [matRippleCentered]="true"

src/app/job-status/job-status.component.scss

@@ -27,7 +27,6 @@
         }
     }
 
-
     &__filename {
         font-size: 6vw;
         padding-top: 6.5vh;
@@ -55,17 +54,29 @@
         }
     }
 
-    &__file-loaded>.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 {

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);
     }
 

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<Job>): 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<void> => {
                             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),
@@ -226,6 +229,7 @@ interface Duration {
 export interface Job {
     status: string;
     filename: string;
+    thumbnail: string | undefined;
     progress: number;
     filamentAmount: number;
     timeLeft: Duration;

src/main.ts

@@ -1,5 +1,3 @@
-import 'hammerjs';
-
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';