Refactor main.js, enable custom screensize

.github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+    time: "10:00"
+  open-pull-requests-limit: 15
+  labels:
+  - dependencies

.github/workflows/approve-and-merge-dependency-updates.yaml

@@ -0,0 +1,31 @@
+name: Dependencies
+
+on:
+  pull_request_target:
+    branches:
+      - main
+
+jobs:
+  auto-approve:
+    name: Approve
+    runs-on: ubuntu-latest
+    steps:
+      - name: Auto Approve
+        uses: hmarr/auto-approve-action@v2
+        if: github.actor == 'dependabot[bot]'
+        with:
+          github-token: '${{ secrets.GITHUB_TOKEN }}'
+  auto-merge:
+    name: Merge
+    needs: auto-approve
+    runs-on: ubuntu-latest
+    steps:
+      - name: Auto Merge
+        uses: pascalgn/automerge-action@v0.13.1
+        if: github.actor == 'dependabot[bot]'
+        env:
+          GITHUB_TOKEN: '${{ secrets.GITHUB_TOKEN }}'
+          MERGE_METHOD: 'squash'
+          MERGE_LABELS: 'dependencies'
+          MERGE_RETRIES: 15
+          MERGE_RETRY_SLEEP: 60000

CONTRIBUTING.md

@@ -1,9 +1,86 @@
+# Contributing
+
 If you can think of something nice to add or want to change / extend some of the functionality, feel free to create a Pull Request or an Issue. Please make sure to follow the code style (.prettierrc is included in the GitHub) and not break any of the existing functionality. Any help is greatly appreciated!
+## Setting up the repository and build the package
+
+## Setting up the repository and build the package
+
+## Prerequisites
+
+- NodeJS v14
+- npm 7
+
+## Setup
 
 To setup a local environment you need to do the following steps:
+
 - Fork the repository to your GitHub account, so you can push your changes
 - Clone the repository
 - Install dependencies: `npm install`
 - Run the build `npm run build` (only required once to copy assets)
 - Start the Live Server: `npm run start` or `npm run start:big`
 - If you want to package OctoDash, so you can install it on your Raspberry Pi: `npm run pack`
+
+## Languages
+
+To launch the app in development mode in a specific locale instead of the source english locale, use
+
+```
+npm run start --serve="--configuration=<lang>"
+```
+
+For a list of available locales have a look at the `angular.json` (`projects.OctoDash.i18n.locales`) file.
+
+### Add a new language
+
+To add a language to the list of supported languages, follow these steps:
+
+- find your language code in [this list](https://github.com/angular/angular/tree/master/packages/common/locales) (angular country codes are not all standard)
+- in src/locale, duplicate an existing locale (or run `npm run locale:extract` to generate a new locale file)
+- rename the file to include your language code in the format `messages.<languageCode>.xlf`
+- in the `<file>` tag (second line of the xlf file) adapt `source-language="<languageCode>"` to your language code
+- add the translations for your language between `target` tags
+- add your language reference in `angular.json`
+
+  - `Projects.OctoDash.i18n.locales`
+
+    - add:
+
+      ```
+      "<lang>": {
+        "translation": "src/locale/messages.<lang>.xlf",
+        "baseHref": ""
+      }
+      ```
+
+  - `Projects.OctoDash.architect.build.configurations.production.localize`.
+
+    - add:
+
+      ```
+        "<lang>"
+      ```
+
+  - `Projects.OctoDash.architect.build.configurations`.
+
+    - add:
+
+      ```
+      "<lang>": {
+        "localize": ["<lang>"]
+      },
+      ```
+
+  - `Projects.OctoDash.architect.serve.configurations`.
+
+    - add:
+
+      ```
+        "<lang>": {
+          "browserTarget": "OctoDash:build:<lang>"
+        },
+      ```
+
+## Update translations IDs and sources
+
+To update translations with the latest codebase and IDs, run `npm run locale:update`. Only commit the files that do not have a date, these are only backups of the locale versions before the update.

README.md

@@ -1,11 +1,10 @@
 <p align="center">
     <img width="300" height="300" src="./src/assets/icon/icon-main-dark-title.svg">
     <br><br>
-    <img src="https://travis-ci.org/UnchartedBull/OctoDash.svg?branch=main">
-    <img src="https://www.codefactor.io/repository/github/unchartedbull/octodash/badge">
-    <img src="https://img.shields.io/github/issues/UnchartedBull/OctoDash.svg">
-    <img src="https://img.shields.io/github/package-json/v/UnchartedBull/OctoDash.svg">
-    <img src="https://img.shields.io/github/downloads/UnchartedBull/OctoDash/total.svg?color=brightgreen">
+    <img src="https://img.shields.io/github/workflow/status/UnchartedBull/OctoDash/build/main?style=for-the-badge">
+    <img src="https://img.shields.io/codefactor/grade/github/UnchartedBull/OctoDash/main?style=for-the-badge">
+    <img src="https://img.shields.io/github/package-json/v/UnchartedBull/OctoDash/main?style=for-the-badge">
+    <img src="https://img.shields.io/github/downloads/UnchartedBull/OctoDash/latest/total?color=lightgrey&style=for-the-badge">
     <br>
     <b>OctoDash is a simple, but beautiful dashboard for OctoPrint. Please read the instructions carefully!</b><br />
     OctoDash is a User Interface for OctoPrint, it utilizes the OctoPrint API but tries to use modern design principles in order to fully enable the power of your Raspberry Pi attached to your 3D Printer. OctoDash works best with a Touchscreen and will support almost all functions that OctoPrint offers just in a nicer format. Give it a try!
@@ -65,10 +64,11 @@ For more info have a look at the [wiki](https://github.com/UnchartedBull/OctoDas
 - 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)
+- OctoDash will start in your host's language if it is supported. You can start OctoDash in a different supported language by starting it with `LANG=fr_FR.UTF-8 octodash`. Currently supported languages are: `fr_FR.UTF-8`, english will be used if your requested language isn't available
 
 ## Demo
 
-If you want to see OctoDash in action, here is an awesome video from Nick on [YouTube](https://youtu.be/YI_c-DY6zU4)
+If you want to see OctoDash in action, here is an awesome video from Nick on [YouTube](https://youtu.be/YI_c-DY6zU4) there is also a video available from Chris Riley, which also shows the installation process on [YouTube](https://youtu.be/kwo3HMBnqC4)
 
 ## Screenshots
 
@@ -97,7 +97,7 @@ If you encounter an issue, while using OctoDash please have a look at the [wiki]
 
 ## Bugs and more
 
-If you find a bug, please open an issue, so I can have a look at it. Please also add the steps to reproduce and the .gcode file. Thank you!
+If you find a bug, please open an issue, so I can have a look at it. Please also add the steps to reproduce and the .gcode file (if applicable). Thank you!
 
 ## Contributing
 

angular.json

@@ -13,16 +13,28 @@
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
+      "i18n": {
+        "sourceLocale": {
+          "code": "en",
+          "baseHref": ""
+        },
+        "locales": {
+          "fr": {
+            "translation": "src/locale/messages.fr.xlf",
+            "baseHref": ""
+          }
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "allowedCommonJsDependencies": [
-              "lottie-web"
-            ],
+            "allowedCommonJsDependencies": ["lottie-web"],
             "aot": true,
             "outputPath": "dist",
             "index": "src/index.html",
+            "i18nMissingTranslation": "warning",
+            "localize": ["en"],
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
@@ -47,7 +59,11 @@
             "scripts": []
           },
           "configurations": {
+            "fr": {
+              "localize": ["fr"]
+            },
             "production": {
+              "localize": ["en", "fr"],
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -82,6 +98,9 @@
             "browserTarget": "OctoDash:build"
           },
           "configurations": {
+            "fr": {
+              "browserTarget": "OctoDash:build:fr"
+            },
             "production": {
               "browserTarget": "OctoDash:build:production"
             }

helper/config.js

@@ -8,14 +8,24 @@ let store;
 const ajv = new Ajv({ allErrors: true });
 const validate = ajv.compile(configSchema);
 
-function readConfig(window) {
+function fetchConfig() {
+  let config;
   try {
     if (!store) {
       store = new Store();
     }
-    const config = store.get('config');
+    config = store.get('config')
+  } catch (e) {
+    console.error(e.message);
+  }
+  return config;
+}
+
+function readConfig(window) {
+  const config = fetchConfig()
+  if (config) {
     window.webContents.send('configRead', config);
-  } catch {
+  } else {
     window.webContents.send('configError', "Can't read config file.");
   }
 }
@@ -53,4 +63,4 @@ function getConfigErrors() {
   return errors;
 }
 
-module.exports = { readConfig, saveConfig, checkConfig };
+module.exports = { fetchConfig, readConfig, saveConfig, checkConfig };

helper/config.schema.js

@@ -117,6 +117,8 @@ const configSchema = {
         'printTimeGenius',
         'psuControl',
         'tpLinkSmartPlug',
+        'tasmota',
+        'tasmotaMqtt',
       ],
       properties: {
         displayLayerProgress: {
@@ -215,6 +217,44 @@ const configSchema = {
             },
           },
         },
+        tasmota: {
+          $id: '#/properties/plugins/properties/tasmota',
+          type: 'object',
+          required: ['enabled', 'ip', 'index'],
+          properties: {
+            enabled: {
+              $id: '#/properties/plugins/properties/tasmota/properties/enabled',
+              type: 'boolean',
+            },
+            ip: {
+              $id: '#/properties/plugins/properties/tasmota/properties/ip',
+              type: 'string',
+            },
+            index: {
+              $id: '#/properties/plugins/properties/tasmota/properties/index',
+              type: ['number', 'null'],
+            },
+          },
+        },
+        tasmotaMqtt: {
+          $id: '#/properties/plugins/properties/tasmotaMqtt',
+          type: 'object',
+          required: ['enabled', 'topic', 'relayNumber'],
+          properties: {
+            enabled: {
+              $id: '#/properties/plugins/properties/tasmotaMqtt/properties/enabled',
+              type: 'boolean',
+            },
+            topic: {
+              $id: '#/properties/plugins/properties/tasmotaMqtt/properties/topic',
+              type: 'string',
+            },
+            relayNumber: {
+              $id: '#/properties/plugins/properties/tasmotaMqtt/properties/relayNumber',
+              type: ['number', 'null'],
+            },
+          },
+        },
       },
     },
     octodash: {
@@ -223,6 +263,7 @@ const configSchema = {
       required: [
         'customActions',
         'fileSorting',
+        'invertAxisControl',
         'pollingInterval',
         'touchscreen',
         'turnScreenOffWhileSleeping',
@@ -284,6 +325,25 @@ const configSchema = {
             },
           },
         },
+        invertAxisControl: {
+          $id: '#/properties/octodash/properties/invertAxisControl',
+          type: 'object',
+          required: ['x', 'y', 'z'],
+          properties: {
+            x: {
+              $id: '#/properties/octodash/properties/invertAxisControl/properties/x',
+              type: 'boolean',
+            },
+            y: {
+              $id: '#/properties/octodash/properties/invertAxisControl/properties/y',
+              type: 'boolean',
+            },
+            z: {
+              $id: '#/properties/octodash/properties/invertAxisControl/properties/z',
+              type: 'boolean',
+            },
+          },
+        },
         pollingInterval: {
           $id: '#/properties/octodash/properties/pollingInterval',
           type: 'integer',
@@ -318,6 +378,40 @@ const configSchema = {
           type: 'string',
           pattern: '^(.*)$',
         },
+        showExtruderControl: {
+          $id: '#/properties/octodash/properties/showExtruderControl',
+          type: 'boolean',
+        },
+        window: {
+          $id: '#/properties/octodash/properties/window',
+          type: 'object',
+          properties: {
+            width: {
+              $id: '#/properties/octodash/properties/window/width',
+              type: 'number',
+            },
+            height: {
+              $id: '#/properties/octodash/properties/window/height',
+              type: 'number',
+            },
+            x: {
+              $id: '#/properties/octodash/properties/window/x',
+              type: 'number',
+            },
+            y: {
+              $id: '#/properties/octodash/properties/window/y',
+              type: 'number',
+            },
+            fullscreen: {
+              $id: '#/properties/octodash/properties/window/fullscreen',
+              type: 'boolean',
+            },
+            backgroundColor: {
+              $id: '#/properties/octodash/properties/window/backgroundColor',
+              type: 'string',
+            },
+          },
+        },
       },
     },
   },