i18n + FR

CONTRIBUTING.md

@@ -2,6 +2,8 @@
 
 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
+
 ## Prerequisites
 
 - NodeJS v14
@@ -17,3 +19,67 @@ To setup a local environment you need to do the following steps:
 - 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

@@ -64,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
 
@@ -96,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/listener.js

@@ -11,13 +11,9 @@ function activateScreenSleepListener(ipcMain) {
   ipcMain.on('screenControl', (_, screenCommand) => exec(screenCommand.command));
 }
 
-function activateReloadListener(ipcMain, window, dev) {
+function activateReloadListener(ipcMain, window, url) {
   ipcMain.on('reload', () => {
-    if (dev) {
-      window.loadURL('http://localhost:4200');
-    } else {
-      window.loadURL('app://.');
-    }
+    window.loadURL(url);
   });
 }
 
@@ -44,11 +40,11 @@ function activateConfigListener(ipcMain, window) {
   ipcMain.on('checkConfig', (_, config) => checkConfig(window, config));
 }
 
-function activateListeners(ipcMain, window, app, dev) {
+function activateListeners(ipcMain, window, app, url) {
   activateConfigListener(ipcMain, window);
   activateAppInfoListener(ipcMain, window, app);
   activateScreenSleepListener(ipcMain);
-  activateReloadListener(ipcMain, window, dev);
+  activateReloadListener(ipcMain, window, url);
   activateUpdateListener(ipcMain, window);
   activateDiscoverListener(ipcMain, window);
 }

helper/locale.js

@@ -0,0 +1,86 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+function getLocale() {
+  const i18n = require('../angular.json').projects.OctoDash.i18n;
+  let lang;
+  try {
+    // Detect if environment LANG is set
+    // if it is defined, convert LANG from ie 'en_US.UTF-8' to 'en-US'
+    // if not defined, set it to the source locale
+    lang = process.env['LANG'] ? process.env['LANG'].split('.')[0].replace('_', '-') : i18n.sourceLocale.code;
+  } catch (e) {
+    // LANG was populated with something else than a standard locale code
+    lang = i18n.sourceLocale.code;
+  }
+  // Check if exact LANG exists in our locales
+  const exactLocale = Object.keys(i18n.locales).includes(lang) && lang;
+  // Make the short version, convert ie 'en-US' to 'en'
+  const shortLang = lang.split('-')[0];
+  // This matches 'fr-CA' to 'fr' if 'fr-CA' is not defined but 'fr' is
+  const approximateLocale = Object.keys(i18n.locales).includes(shortLang) && shortLang;
+  // Define locale by either the exact, approximate, or source locale in this order
+  const locale = exactLocale || approximateLocale || i18n.sourceLocale.code;
+  console.info('selected language: ' + locale);
+  return locale;
+}
+
+// updates all supported locales consuming an updated messages.xlf
+function updateLocales() {
+  const fs = require('fs');
+  const xliff = require('xliff');
+
+  // list all existing locales
+  let translatedXLFs = [];
+  const filenames = fs.readdirSync('./src/locale');
+  for (let filename of filenames) {
+    const match = filename.match(/messages.(..|..-..).xlf/);
+    if (match) {
+      const lang = match[1];
+      translatedXLFs.push({ filename, lang });
+    }
+  }
+
+  // get extracted messages
+  const extractedXLF = fs.readFileSync('./src/locale/messages.xlf').toString();
+  xliff.xliff12ToJs(extractedXLF, (err, extracted) => {
+    if (err) throw new Error(err.message);
+
+    // for each supported locale
+    for (let translatedXLFRef of translatedXLFs) {
+      const translatedXLF = fs.readFileSync(`./src/locale/${translatedXLFRef.filename}`).toString();
+
+      // load this locale
+      xliff.xliff12ToJs(translatedXLF, (err, translated) => {
+        if (err) throw new Error(err.message);
+
+        // hard copy of messages.xlf
+        const newTranslation = JSON.parse(JSON.stringify(extracted));
+        newTranslation.targetLanguage = translated.targetLanguage;
+        // transfer the locale's translations to the copy of the extracted locale
+        for (let id in newTranslation.resources['ng2.template']) {
+          const source = translated.resources['ng2.template'];
+          const target = newTranslation.resources['ng2.template'];
+          // only copy if the translation has a target
+          if (source[id]) {
+            target[id].target = source[id]?.target || '';
+          }
+        }
+        // backup the previous version of the locale and write the new locale
+        xliff.jsToXliff12(newTranslation, (err, result) => {
+          if (err) throw new Error(err.message);
+          const now = new Date();
+          fs.renameSync(
+            `./src/locale/${translatedXLFRef.filename}`,
+            `./src/locale/messages.${translatedXLFRef.lang}-${now.toISOString()}.xlf`,
+          );
+          console.info(`updating ${translatedXLFRef.filename}...`);
+          fs.writeFileSync(`./src/locale/${translatedXLFRef.filename}`, result);
+        });
+      });
+    }
+    // remove extracted messages
+    fs.unlinkSync('./src/locale/messages.xlf');
+  });
+}
+
+module.exports = { getLocale, updateLocales };

main.js

@@ -13,18 +13,22 @@ const dev = args.some(val => val === '--serve');
 
 const activateListeners = require('./helper/listener');
 
+let window;
+let locale;
+let url;
+
 if (!dev) {
   const createProtocol = require('./helper/protocol');
   const scheme = 'app';
 
   protocol.registerSchemesAsPrivileged([{ scheme: scheme, privileges: { standard: true } }]);
   createProtocol(scheme, path.join(__dirname, 'dist'));
+
+  locale = require('./helper/locale.js').getLocale();
 }
 
 app.commandLine.appendSwitch('touch-events', 'enabled');
 
-let window;
-
 function createWindow() {
   const _store = new Store();
 
@@ -57,14 +61,15 @@ function createWindow() {
   });
 
   if (dev) {
-    window.loadURL('http://localhost:4200');
+    url = 'http://localhost:4200';
     window.webContents.openDevTools();
   } else {
-    window.loadURL('app://.');
+    url = `file://${__dirname}/dist/${locale}/index.html`;
     window.setFullScreen(true);
   }
 
-  activateListeners(ipcMain, window, app, dev);
+  window.loadURL(url);
+  activateListeners(ipcMain, window, app, url);
 
   window.on('closed', () => {
     window = null;