Print controls

README.md

@@ -1,24 +1,29 @@
 # OctoDash
 
-![build status](https://travis-ci.org/UnchartedBull/OctoDash.svg?branch=master)  
+![build status](https://travis-ci.org/UnchartedBull/OctoDash.svg?branch=master)
+![issues](https://img.shields.io/github/issues/UnchartedBull/OctoDash.svg)
+![version](https://img.shields.io/github/package-json/v/UnchartedBull/OctoDash.svg)
+![downloads](https://img.shields.io/github/downloads/UnchartedBull/OctoDash/total.svg?color=brightgreen)
+<!-- [![Beerpay](https://beerpay.io/UnchartedBull/OctoDash/badge.svg?style=flat)](https://beerpay.io/UnchartedBull/OctoDash)  -->
 OctoDash is a simple, but beautiful dashboard for OctoPrint. Please read the instructions carefully!
 
 ## Table of Contents
 
-- [OctoDash](#OctoDash)
-  - [Table of Contents](#Table-of-Contents)
-  - [Installation](#Installation)
-    - [Electron App (recommended)](#Electron-App-recommended)
-      - [Creating Config manually](#Creating-Config-manually)
-      - [Start on boot](#Start-on-boot)
-    - [Website](#Website)
-  - [Supported Devices](#Supported-Devices)
-  - [Screenshots](#Screenshots)
-  - [Troubleshooting](#Troubleshooting)
-  - [Bugs and more](#Bugs-and-more)
-  - [Contributing](#Contributing)
-  - [License](#License)
-  - [Special Thanks](#Special-Thanks)
+- [OctoDash](#octodash)
+  - [Table of Contents](#table-of-contents)
+  - [Installation](#installation)
+    - [Electron App (recommended)](#electron-app-recommended)
+      - [Creating Config manually](#creating-config-manually)
+      - [Start on boot](#start-on-boot)
+    - [Website (deprecated)](#website-deprecated)
+  - [Update](#update)
+  - [Supported Devices](#supported-devices)
+  - [Screenshots](#screenshots)
+  - [Troubleshooting](#troubleshooting)
+  - [Bugs and more](#bugs-and-more)
+  - [Contributing](#contributing)
+  - [License](#license)
+  - [Special Thanks](#special-thanks)
 
 ## Installation
 
@@ -29,7 +34,7 @@ You need to install the DisplayLayerProgress Plugin by OllisGit to enable the fu
 *Note: This tutorial is for the Raspberry Pi only (2 and higher). If you have running OctoPrint on something different please adjust the links*
 
 - Download the latest release *Check for newer version (Releases)*  
-`wget -O https://github.com/UnchartedBull/OctoDash/releases/download/v1.0.0/octodash_1.0.0_armv7l.deb octodash.deb   `
+`wget -O https://github.com/UnchartedBull/OctoDash/releases/download/v1.0.1/octodash_1.0.1_armv7l.deb octodash.deb   `
 - Install the app  
 `sudo dpkg -i octodash.deb`
 - If you get an error while installing you may need to install the missing dependencies.  
@@ -73,16 +78,14 @@ fi
 
 If you get the `Cannot open virtual console 2 (Permission denied)` error run `sudo chmod ug+s /usr/lib/xorg/Xorg` and reboot.
 
+### Website (deprecated)
 
-### Website
+The OctoDash Website Support was dropped in v1.1.0. It is still possible, you need to figure out some things yourself, though. The app will automatically detect a normal Browser Environment and will try to load `assets/config.json`.  
+The Project can be build using the Angular CLI and can be served via any WebServer.
 
-This option does not allow you to change your config via the UI and the styling may be a little off for you, due to your browser engine. It may improve performance slightly if you use a very lightweight browser.
-
-- Clone the repository - `git clone https://github.com/UnchartedBull/OctoDash && cd OctoDash`
-- Install all the dependencies - `npm install`
-- Adjust `src/assets/config.json` accordingly to your installation
-- Build the app - `ng build --prod`
-- The final website is located at `/dist`, which can be served by any web server and viewed by any web browser, that does support angular. A chromium-based web browser is recommended
+## Update
+To update OctoDash to the latest version just follow the Installation instruction. The package manager will update the app, if there is an older version installed.  
+Your config will not be touched during this process!
 
 ## Supported Devices
 
@@ -95,7 +98,8 @@ All other SoCs that are using an armv7, or arm64 compatible, processer are suppo
 ## Screenshots
 <p float="left">
     <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/no_job.png" width="49.5%"           alt-text="No Job Running">
+    <img src="https://raw.githubusercontent.com/TimonGaebelein/OctoprintDash/master/screenshots/no_job_no_touchscreen.png" width="49.5%"           alt-text="No Job Running">
+    <img src="https://raw.githubusercontent.com/TimonGaebelein/OctoprintDash/master/screenshots/print_controls.png" width="49.5%"           alt-text="Print Controls">
 </p>
 
 ## Troubleshooting

icons.txt

@@ -5,4 +5,9 @@
 "back" by Dwiky Setiawan from thenounproject.com
 "next" by Dwiky Setiawan from thenounproject.com
 "checkmark" by Muhammad Faizal Rahman Hakim from thenounproject.com
-"delete" by Muhammad Faizal Rahman Hakim from thenounproject.com
+"delete" by Muhammad Faizal Rahman Hakim from thenounproject.com
+"Sliders" by Danny Lelieveld from thenounproject.com
+"Close" by Danny Lelieveld from thenounproject.com
+"Pause" by Danny Lelieveld from thenounproject.com
+"Play" by Danny Lelieveld from the Noun Project
+"Thermometer" by Andrejs Kirma from the Noun Project

main.js

@@ -11,7 +11,7 @@ const store = new Store();
 
 const args = process.argv.slice(1);
 const dev = args.some(val => val === '--serve');
-const big = args.some(val => val === '--big-screen')
+const big = args.some(val => val === '--big')
 
 let window;
 let config;
@@ -26,7 +26,7 @@ function createWindow() {
     } = require('electron')
     const mainScreen = screen.getPrimaryDisplay();
     window = new BrowserWindow({
-        width: dev ? big ? 1000 : 1400 : mainScreen.size.width,
+        width: dev ? big ? 1080 : 1400 : mainScreen.size.width,
         height: dev ? big ? 342 : 502 : mainScreen.size.height,
         frame: dev ? true : false,
         fullscreen: dev ? false : true,

package.json

@@ -32,21 +32,19 @@
             "output": "package"
         },
         "linux": {
-            "target": [
-                {
-                    "target": "deb",
-                    "arch": [
-                        "armv7l",
-                        "arm64"
-                    ]
-                }
-            ],
+            "target": [{
+                "target": "deb",
+                "arch": [
+                    "armv7l",
+                    "arm64"
+                ]
+            }],
             "category": "Utility"
         }
     },
     "scripts": {
         "ng": "ng",
-        "start": "npm-run-all -p ng:serve electron:serve",
+        "start": "npm-run-all -p ng:serve electron:serve electron:serve:big",
         "start:big": "npm-run-all -p ng:serve electron:serve:big",
         "build": "npm run ng:build && electron .",
         "test": "",
@@ -56,6 +54,7 @@
         "electron:serve": "wait-on http-get://localhost:4200/ && electron . --serve",
         "electron:serve:big": "wait-on http-get://localhost:4200/ && electron . --serve --big",
         "pack": "npm run ng:build && electron-builder build -l",
+        "pack:mac": "npm run ng:build && electron-builder build -m",
         "ng:serve": "ng serve",
         "ng:build": "ng build --prod"
     },

src/app/app.component.html

@@ -1,9 +1,21 @@
 <div *ngIf="configService.config" class="container">
     <div *ngIf="configService.valid">
-        <app-job-status></app-job-status>
-        <app-printer-status></app-printer-status>
-        <app-layer-progress></app-layer-progress>
-        <app-bottom-bar></app-bottom-bar>
+        <div *ngIf="!configService.config.octodash.touchscreen">
+            <app-job-status></app-job-status>
+            <app-printer-status></app-printer-status>
+            <app-layer-progress></app-layer-progress>
+            <app-bottom-bar></app-bottom-bar>
+        </div>
+        <div *ngIf="configService.config.octodash.touchscreen">
+            <app-error></app-error>
+            <!-- <div *ngIf="printing"> -->
+            <app-print-control></app-print-control>
+            <app-job-status></app-job-status>
+            <app-printer-status></app-printer-status>
+            <app-layer-progress></app-layer-progress>
+            <app-bottom-bar></app-bottom-bar>
+            <!-- </div> -->
+        </div>
     </div>
     <div *ngIf="!configService.valid">
         <app-invalid-config></app-invalid-config>

src/app/app.component.ts

@@ -1,13 +1,30 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ConfigService } from './config/config.service';
+import { JobService, Job } from './job.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 
-export class AppComponent {
-  constructor(public configService: ConfigService) {
+export class AppComponent implements OnInit, OnDestroy {
+
+  private subscriptions: Subscription = new Subscription();
+  public printing = false;
+
+  constructor(public configService: ConfigService, private jobService: JobService) {
+  }
+
+  ngOnInit() {
+    // FIXME: Adds second subscription
+    if (this.configService.valid && this.configService.config.octodash.touchscreen) {
+      this.subscriptions.add(this.jobService.getObservable().subscribe((job: Job) => this.printing = job !== null));
+    }
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe();
   }
 }

src/app/app.module.ts

@@ -13,6 +13,10 @@ import { ConfigService } from './config/config.service';
 import { LayerProgressComponent } from './layer-progress/layer-progress.component';
 import { InvalidConfigComponent } from './config/invalid-config/invalid-config.component';
 import { NoConfigComponent } from './config/no-config/no-config.component';
+import { PrintControlComponent } from './print-control/print-control.component';
+import { ErrorComponent } from './error/error.component';
+import { ErrorService } from './error/error.service';
+import { PrinterService } from './printer.service';
 
 @NgModule({
   declarations: [
@@ -22,15 +26,17 @@ import { NoConfigComponent } from './config/no-config/no-config.component';
     JobStatusComponent,
     LayerProgressComponent,
     InvalidConfigComponent,
-    NoConfigComponent
+    NoConfigComponent,
+    PrintControlComponent,
+    ErrorComponent
   ],
   imports: [
     BrowserModule,
     HttpClientModule,
     RoundProgressModule,
     FormsModule
   ],
-  providers: [AppService, ConfigService],
+  providers: [AppService, ConfigService, ErrorService, PrinterService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/bottom-bar/bottom-bar.component.html

@@ -2,6 +2,7 @@
     <tr>
         <td class="bottom-bar__printer-name"> {{ printer.name }} </td>
         <td class="bottom-bar__enclosure-temperature" *ngIf="enclosureTemperature !== 0.0">
+            <img src="assets/thermometer.svg" class="bottom-bar__enclosure-temperature-icon" />
             {{ enclosureTemperature }}°C
         </td>
         <td class="bottom-bar__current-status" [ngClass]="{'bottom-bar__error': printer.status.includes('error')}">

src/app/bottom-bar/bottom-bar.component.scss

@@ -7,21 +7,29 @@
     td {
         width: 33.3%;
     }
-}
 
-.bottom-bar__enclosure-temperature {
-    text-align: center;
-}
+    &__enclosure-temperature {
+        text-align: center;
 
-.bottom-bar__current-status {
-    text-align: right;
-}
+        &-icon {
+            width: 2.5vw;
+            display: inline-block;
+            margin-bottom: -.8vh;
+            margin-right: 1vw;
+        }
+    }
 
-.bottom-bar__error {
-    color: #c23616;
-    animation: blinker 2s linear infinite;
+    &__current-status {
+        text-align: right;
+    }
+
+    &__error {
+        color: #c23616;
+        animation: blinker 2s linear infinite;
+    }
 }
 
+
 @keyframes blinker {
     20% {
         opacity: 1;

src/app/bottom-bar/bottom-bar.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ConfigService } from '../config/config.service';
-import { PrinterStatusService, PrinterStatusAPI } from '../printer-status/printer-status.service';
+import { PrinterService, PrinterStatusAPI } from '../printer.service';
 import { Subscription } from 'rxjs';
 
 @Component({
@@ -15,7 +15,7 @@ export class BottomBarComponent implements OnInit, OnDestroy {
   public enclosureTemperature: number;
   private ipc: any;
 
-  constructor(private printerStatusService: PrinterStatusService, private configService: ConfigService) {
+  constructor(private printerService: PrinterService, private configService: ConfigService) {
     if (window.require && configService.config.octodash.temperatureSensor !== null) {
       try {
         this.ipc = window.require('electron').ipcRenderer;
@@ -35,7 +35,7 @@ export class BottomBarComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.subscriptions.add(this.printerStatusService.getObservable().subscribe((printerStatus: PrinterStatusAPI) => {
+    this.subscriptions.add(this.printerService.getObservable().subscribe((printerStatus: PrinterStatusAPI) => {
       this.printer.status = printerStatus.status;
     }));
   }

src/app/config/config.service.ts

@@ -1,5 +1,5 @@
-import { Injectable, Input } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { environment } from '../../environments/environment';
 import Ajv from 'ajv';
 
@@ -14,9 +14,10 @@ declare global {
   providedIn: 'root'
 })
 export class ConfigService {
-  public config: Config;
   private store: any | undefined;
   private validator: Ajv.ValidateFunction;
+  private httpHeaders: object;
+  public config: Config;
   public valid: boolean;
   public update = false;
 
@@ -26,17 +27,27 @@ export class ConfigService {
     if (window && window.process && window.process.type) {
       const Store = window.require('electron-store');
       this.store = new Store();
-      this.config = this.store.get('config');
-      this.valid = this.validate();
+      this.initialize(this.store.get('config'));
     } else {
       console.warn('Detected non-electron environment. Fallback to assets/config.json. Any changes are non-persistent!');
       this.http.get(environment.config).subscribe((config: Config) => {
-        this.config = config;
-        this.valid = this.validate();
+        this.initialize(config);
       });
     }
   }
 
+  private initialize(config: Config) {
+    this.config = config;
+    this.valid = this.validate();
+    if (this.valid) {
+      this.httpHeaders = {
+        headers: new HttpHeaders({
+          'x-api-key': this.config.octoprint.accessToken
+        })
+      };
+    }
+  }
+
   public getRemoteConfig(): Config {
     return this.store.get('config');
   }
@@ -80,10 +91,21 @@ export class ConfigService {
 
   public updateConfig() {
     if (window && window.process && window.process.type) {
-      this.config = this.store.get('config');
-      this.valid = this.validate();
+      this.initialize(this.store.get('config'));
     }
   }
+
+  public getHTTPHeaders(): object {
+    return this.httpHeaders;
+  }
+
+  public getURL(path: string) {
+    return this.config.octoprint.url + path;
+  }
+
+  public getAPIInterval() {
+    return this.config.octoprint.apiInterval;
+  }
 }
 
 export interface Config {