Custom CSS (#656)

* read file

* custom CSS working

* some refactoring

* custom css done

* update README

README.md

@@ -48,13 +48,15 @@ For more info have a look at the [wiki](https://github.com/UnchartedBull/OctoDas
 ## Tips and Tricks
 
 -   OctoDash supports printing from your Raspberry and from the printers SD card, if configured in OctoPrint (v1.5.0 and up)
+-   You can let OctoDash push out and pull in the filament during a filament change, if you setup your feed length correctly (v1.5.0 and up)
+    -   You can also use your printers filament change progress, just enable this in the settings (the printer needs to support M600)
+-   You can adjust the look of OctoDash by adjusting the `~/.config/octodash/custom-styles.css` file and adding your own CSS rules (v2.0.0 and up)
 -   OctoDash supports .ufp package and PrusaSlicer preview images (v1.5.0 and up)
     -   To get the best results, you should use a square aspect ration, like `256x256`
--   You can let OctoDash push out and pull in the filament during a filament change, if you setup your feed length correctly. (v1.5.0 and up)
--   You can also view the previews during print, if you press on the percentage inside the progress ring (v1.5.0 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
+-   You can also show the thumbnails during print, if you press on the percentage inside the progress ring (v1.5.0 and up)
+-   You can press multiple arrows directly after another in the control view. All actions will be executed in series, even if the prior didn't finish
 -   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 and fan speed in the home screen, by pressing on their icons, if you want to set them to zero, just tap the value once. (v1.4.1 and up)
+-   You can adjust the temperatures and fan speed in the home screen by pressing on their icons, if you want to set them to zero, just tap the value once. (v1.4.1 and up)
 
 ## Screenshots
 

main.js

@@ -5,6 +5,7 @@ const {
 } = require('electron');
 const url = require('url');
 const path = require('path');
+const fs = require('fs');
 const Store = require('electron-store');
 
 const store = new Store();
@@ -59,7 +60,8 @@ function createWindow() {
         window.setFullScreen(true);
     }
 
-    setTimeout(sendVersionInfo, 30 * 1000);
+    // setTimeout(sendVersionInfo, 30 * 1000);
+    activateAppInfoListener();
     activateScreenSleepListener();
     activateReloadListener();
 
@@ -92,6 +94,33 @@ function activateReloadListener() {
     });
 }
 
+function activateAppInfoListener() {
+    ipcMain.on('appInfo', () => {
+        sendCustomStyles();
+        sendVersionInfo();
+    })
+}
+
+function sendCustomStyles() {
+    fs.readFile(path.join(app.getPath('userData'), 'custom-styles.css'), 'utf-8', (err, data) => {
+        if (err) {
+            if (err.code === 'ENOENT') {
+                fs.writeFile(path.join(app.getPath('userData'), 'custom-styles.css'), '', (err) => {
+                    if (err) {
+                        window.webContents.send('customStylesError', err)
+                    } else {
+                        window.webContents.send('customStyles', '')
+                    }
+                })
+            } else {
+                window.webContents.send('customStylesError', err)
+            }
+        } else {
+            window.webContents.send('customStyles', data)
+        }
+    })
+}
+
 function sendVersionInfo() {
     window.webContents.send('versionInformation', {
         version: app.getVersion(),

src/app/app.service.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, OnInit } from '@angular/core';
 
 import { ConfigService } from './config/config.service';
 import { NotificationService } from './notification/notification.service';
@@ -13,6 +13,7 @@ export class AppService {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     private ipc: any;
     private version: string;
+    private latestVersion: string;
 
     public constructor(
         private configService: ConfigService,
@@ -22,18 +23,18 @@ export class AppService {
         if (window.require) {
             try {
                 this.ipc = window.require('electron').ipcRenderer;
-                this.ipc.on('versionInformation', ({}, versionInformation: VersionInformation): void => {
-                    this.version = versionInformation.version;
-                    this.checkUpdate();
-                });
+                this.enableVersionListener();
+                this.enableCustomCSSListener();
+                setTimeout(() => {
+                    this.ipc.send('appInfo');
+                }, 0);
             } catch (e) {
                 this.notificationService.setError(
                     "Can't retrieve version information",
                     "Please open an issue for GitHub as this shouldn't happen.",
                 );
             }
         }
-
         this.updateError = [
             ".filament should have required property 'feedSpeedSlow'",
             ".filament should have required property 'purgeDistance'",
@@ -52,6 +53,27 @@ export class AppService {
         return false;
     }
 
+    private enableVersionListener(): void {
+        this.ipc.on('versionInformation', ({}, versionInformation: VersionInformation): void => {
+            this.version = versionInformation.version;
+            this.checkUpdate();
+        });
+    }
+
+    private enableCustomCSSListener(): void {
+        this.ipc.on('customStyles', ({}, customCSS: string): void => {
+            console.log(customCSS);
+            let css = document.createElement('style');
+            css.type = 'text/css';
+            css.appendChild(document.createTextNode(customCSS));
+            document.head.append(css);
+        });
+
+        this.ipc.on('customStylesError', ({}, customCSSError: string): void => {
+            this.notificationService.setError("Can't get custom styles!", customCSSError);
+        });
+    }
+
     private checkUpdate(): void {
         this.http.get('https://api.github.com/repos/UnchartedBull/OctoDash/releases/latest').subscribe(
             (data: GitHubReleaseInformation): void => {
@@ -61,6 +83,7 @@ export class AppService {
                         `Version ${data.name} is available now, while you're on v${this.version}. Consider updating :)`,
                     );
                 }
+                this.latestVersion = data.name.replace('v', '');
             },
             (): void => null,
         );
@@ -71,6 +94,10 @@ export class AppService {
         return this.version;
     }
 
+    public getLatestVersion(): string {
+        return this.latestVersion;
+    }
+
     public turnDisplayOff(): void {
         if (this.ipc) {
             this.ipc.send('screenSleep', '');