Update changelog and re-release v1.2.2

* feat: visualise disabled state of the 'Device name' input control

* fix: original value handling

.nvmrc

@@ -1 +1 @@
-8.9.4
+8.11.2

CHANGELOG.md

@@ -6,11 +6,36 @@ The format is loosely based on [Keep a Changelog](http://keepachangelog.com/en/1
 
 Every Agent version includes the most recent firmware version. See the [firmware changelog](https://github.com/UltimateHackingKeyboard/firmware/blob/master/CHANGELOG.md).
 
+## [1.2.2] - 2018-05-27
+
+Firmware: 8.2.**5** [[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.2.5)] | Device Protocol: 4.3.**1** | User Config: 4.0.**1** | Hardware Config: 1.0.0
+
+- Offer recovery for bricked right keyboard halfs.
+- Detect when the hardware configuration of a device is invalid and display a notification.
+- Check if the keyboard is in factory reset mode and if so, display a relevant instruction.
+- Only allow ASCII characters in type text macro actions.
+- Allow uploading the same file multiple times in a row.
+- Only send auto update notification when the user initiates the update.
+- Update the firmware versions on the firmware update page right after firmware updates.
+- Add a lot of useful instructions to the firmware page to help users update the firmware.
+- Add the operating system and initial device list to the firmware update log.
+- Add copy to clipboard button to the top right corner of the firmware update terminal widget.
+
+## [1.2.1] - 2018-05-12
+
+Firmware: 8.2.**2** [[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.2.2)] | Device Protocol: 4.3.0 | User Config: 4.0.**1** | Hardware Config: 1.0.0
+
+- Match for the new USB usage page and usage number. This is critical for UHKs flashed with firmware >=8.2.2 to be recognized by Agent on OSX.
+- Make the config serializer handle long media macro actions. `USERCONFIG:PATCH`
+- Add note on the macro page explaining that the macro engine of the firmware is not ready yet.
+- Add an example to the scancode tooltip to better explain users how to invoke non-US characters.
+
 ## [1.2.0] - 2018-04-20
 
 Firmware: 8.**2.0** [[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.2.0)] | Device Protocol: 4.**3.0** | User Config: 4.0.0 | Hardware Config: 1.0.0
 
 - Tweak the default mouse speed. This was necessary because the last firmware version adjusted speed multipliers. The mouse speed can be reset via the "Reset speeds to default" button of the "Mouse speed" page.
+- Make the newly added switch-keymap.js script utilize the new UsbCommandId_SwitchKeymap, allowing for programmatic keymap switching. `DEVICEPROTOCOL:MINOR`
 
 ## [1.1.5] - 2018-04-10
 

README.md

@@ -5,17 +5,8 @@
 
 Agent is the configuration application of the [Ultimate Hacking Keyboard](https://ultimatehackingkeyboard.com/).
 
-[Give it a whirl!](http://ultimatehackingkeyboard.github.io/agent/)
+* Try out the [web build of Agent](http://ultimatehackingkeyboard.github.io/agent/) in your browser. This is meant to be used for demonstration purposes.
-
+* Download the [desktop build of Agent](https://github.com/UltimateHackingKeyboard/agent/releases) from our releases page. Use this if you have an actual UHK at hand, or else you won't get past the opening screen!
-## Two builds to rule them all
-
-It's worth mentioning that Agent has two builds.
-
-The **electron build** is the desktop application which is meant to be used if you have an actual UHK at hand. It starts with an opening screen which detects your UHK. You cannot get past this screen without connecting a UHK via USB.
-
-The **web build** is meant to be used for demonstration purposes, so people who don't yet own a UHK can get a feel of Agent and its capabilities in their browser. Eventually, WebUSB support will be added to the web build, making it able to communicate with the UHK. Given the sandboxed nature of browsers, the web build will always lack features that the electron build offers, so this won't make the electron build obsolete.
-
-The two builds share code as much as possible.
 
 ## Building the electron application
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "uhk-agent",
-  "version": "1.1.4",
+  "version": "1.2.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -916,6 +916,12 @@
       "integrity": "sha512-dwVUVIXsBZXwTuwnXI9RK8sBmgq09NDHzyR9SAph9eqk76gKK2JSQmZARC2zRC81JC2QTtxD0ARU5qTS25gIGw==",
       "dev": true
     },
+    "base64url": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64url/-/base64url-2.0.0.tgz",
+      "integrity": "sha1-6sFuA+oUOO/5Qj1puqNiYu0fcLs=",
+      "dev": true
+    },
     "bcrypt-pbkdf": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
@@ -1494,6 +1500,58 @@
       "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=",
       "dev": true
     },
+    "check-node-version": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/check-node-version/-/check-node-version-3.2.0.tgz",
+      "integrity": "sha512-mJu4dADRf+NUeOyGgFTXaLtjyyffD3Eej2RA9IEk1CdHmoVurErLD++e/Ps6uKfsB273ky+0Z9NlOiuplxuNdw==",
+      "dev": true,
+      "requires": {
+        "chalk": "2.4.1",
+        "map-values": "1.0.1",
+        "minimist": "1.2.0",
+        "object-filter": "1.0.2",
+        "object.assign": "4.1.0",
+        "run-parallel": "1.1.9",
+        "semver": "5.4.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "1.9.1"
+          }
+        },
+        "chalk": {
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
+          "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.4.0"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.4.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
+          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
     "chokidar": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.3.tgz",
@@ -6384,6 +6442,72 @@
         "assert-plus": "1.0.0"
       }
     },
+    "gh-pages": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-1.1.0.tgz",
+      "integrity": "sha512-ZpDkeOVmIrN5mz+sBWDz5zmTqcbNJzI/updCwEv/7rrSdpTNlj1B5GhBqG7f4Q8p5sJOdnBV0SIqxJrxtZQ9FA==",
+      "dev": true,
+      "requires": {
+        "async": "2.6.0",
+        "base64url": "2.0.0",
+        "commander": "2.11.0",
+        "fs-extra": "4.0.3",
+        "globby": "6.1.0",
+        "graceful-fs": "4.1.11",
+        "rimraf": "2.6.2"
+      },
+      "dependencies": {
+        "async": {
+          "version": "2.6.0",
+          "resolved": "https://registry.npmjs.org/async/-/async-2.6.0.tgz",
+          "integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==",
+          "dev": true,
+          "requires": {
+            "lodash": "4.17.4"
+          }
+        },
+        "commander": {
+          "version": "2.11.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.11.0.tgz",
+          "integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ==",
+          "dev": true
+        },
+        "fs-extra": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
+          "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "4.1.11",
+            "jsonfile": "4.0.0",
+            "universalify": "0.1.1"
+          }
+        },
+        "glob": {
+          "version": "7.1.2",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
+          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "1.0.0",
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4",
+            "once": "1.4.0",
+            "path-is-absolute": "1.0.1"
+          }
+        },
+        "rimraf": {
+          "version": "2.6.2",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
+          "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
+          "dev": true,
+          "requires": {
+            "glob": "7.1.2"
+          }
+        }
+      }
+    },
     "git-raw-commits": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-1.2.0.tgz",
@@ -6692,6 +6816,12 @@
       "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
       "dev": true
     },
+    "has-symbols": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.0.tgz",
+      "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=",
+      "dev": true
+    },
     "has-unicode": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
@@ -8462,6 +8592,12 @@
       "integrity": "sha1-5WqpTEyAVaFkBKBnS3jyFffI4ZQ=",
       "dev": true
     },
+    "map-values": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/map-values/-/map-values-1.0.1.tgz",
+      "integrity": "sha1-douOecAJvytk/ugG4ip7HEGQyZA=",
+      "dev": true
+    },
     "map-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
@@ -9197,6 +9333,12 @@
         }
       }
     },
+    "object-filter": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/object-filter/-/object-filter-1.0.2.tgz",
+      "integrity": "sha1-rwt5f/6+r4pSxmN87b6IFs/sG8g=",
+      "dev": true
+    },
     "object-keys": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.4.0.tgz",
@@ -9220,6 +9362,26 @@
         }
       }
     },
+    "object.assign": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
+      "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
+      "dev": true,
+      "requires": {
+        "define-properties": "1.1.2",
+        "function-bind": "1.1.1",
+        "has-symbols": "1.0.0",
+        "object-keys": "1.0.11"
+      },
+      "dependencies": {
+        "object-keys": {
+          "version": "1.0.11",
+          "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.11.tgz",
+          "integrity": "sha1-xUYBd4rVYPEULODgG8yotW0TQm0=",
+          "dev": true
+        }
+      }
+    },
     "object.omit": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-2.0.1.tgz",
@@ -10567,6 +10729,12 @@
         "is-promise": "2.1.0"
       }
     },
+    "run-parallel": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.9.tgz",
+      "integrity": "sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==",
+      "dev": true
+    },
     "rx-lite": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",

package.json

@@ -3,10 +3,10 @@
   "private": true,
   "author": "Ultimate Gadget Laboratories",
   "main": "electron/dist/electron-main.js",
-  "version": "1.2.0",
+  "version": "1.2.2",
-  "firmwareVersion": "8.2.0",
+  "firmwareVersion": "8.2.5",
-  "deviceProtocolVersion": "4.3.0",
+  "deviceProtocolVersion": "4.3.1",
-  "userConfigVersion": "4.0.0",
+  "userConfigVersion": "4.0.1",
   "hardwareConfigVersion": "1.0.0",
   "description": "Agent is the configuration application of the Ultimate Hacking Keyboard.",
   "repository": {
@@ -23,16 +23,17 @@
     "@types/electron-settings": "3.0.0",
     "@types/fs-extra": "5.0.1",
     "@types/jasmine": "2.6.0",
-    "@types/jsonfile": "4.0.1",
     "@types/jquery": "3.3.1",
+    "@types/jsonfile": "4.0.1",
     "@types/node": "8.0.53",
     "@types/node-hid": "0.5.2",
     "@types/request": "2.0.8",
     "@types/usb": "1.1.3",
     "autoprefixer": "6.5.3",
     "buffer": "5.0.6",
-    "copyfiles": "^2.0.0",
+    "check-node-version": "^3.2.0",
     "copy-webpack-plugin": "4.0.1",
+    "copyfiles": "^2.0.0",
     "core-js": "2.4.1",
     "cross-env": "5.0.5",
     "decompress": "4.2.0",
@@ -49,6 +50,7 @@
     "exports-loader": "0.6.3",
     "file-loader": "0.10.0",
     "fs-extra": "5.0.0",
+    "gh-pages": "1.1.0",
     "jsonfile": "4.0.0",
     "lerna": "2.9.0",
     "mkdirp": "0.5.1",
@@ -84,6 +86,7 @@
     "lint:ts:test-serializer": "tslint --project ./packages/test-serializer/tsconfig.json",
     "lint:ts:uhk-usb": "tslint --project ./packages/uhk-usb/tsconfig.json",
     "lint:style": "stylelint \"packages/uhk-agent/src/**/*.scss\" \"packages/uhk-web/src/**/*.scss\" --syntax scss",
+    "prebuild": "check-node-version --package",
     "build": "run-s build:common build:usb build:web build:electron",
     "build:web": "lerna exec --scope uhk-web npm run build",
     "build:electron": "cross-env AOT_BUILD=true run-s -sn build:electron:renderer build:electron:main",
@@ -99,7 +102,9 @@
     "pack": "node ./scripts/release.js",
     "sprites": "node ./scripts/generate-svg-sprites",
     "release": "node ./scripts/release.js",
-    "clean": "lerna exec rimraf ./node_modules ./dist"
+    "clean": "lerna exec rimraf ./node_modules ./dist && rimraf ./node_modules ./dist",
+    "predeploy-gh-pages": "run-s build:web",
+    "deploy-gh-pages": "gh-pages -d packages/uhk-web/dist"
   },
   "dependencies": {}
 }

packages/uhk-agent/src/services/app-update.service.ts

@@ -9,6 +9,9 @@ import { IpcEvents, LogService } from 'uhk-common';
 import { MainServiceBase } from './main-service-base';
 
 export class AppUpdateService extends MainServiceBase {
+
+    private sendAutoUpdateNotification = false;
+
     constructor(protected logService: LogService,
                 protected win: Electron.BrowserWindow,
                 private app: Electron.App) {
@@ -24,16 +27,21 @@ export class AppUpdateService extends MainServiceBase {
 
     private initListeners() {
         autoUpdater.on('checking-for-update', () => {
+            this.logService.debug('[AppUpdateService] checking for update');
             this.sendIpcToWindow(IpcEvents.autoUpdater.checkingForUpdate);
         });
 
         autoUpdater.on('update-available', async (ev: any, info: UpdateInfo) => {
+            this.logService.debug('[AppUpdateService] update available. Downloading started');
             await autoUpdater.downloadUpdate();
             this.sendIpcToWindow(IpcEvents.autoUpdater.updateAvailable, info);
         });
 
         autoUpdater.on('update-not-available', (ev: any, info: UpdateInfo) => {
-            this.sendIpcToWindow(IpcEvents.autoUpdater.updateNotAvailable, info);
+            if (this.sendAutoUpdateNotification) {
+                this.logService.debug('[AppUpdateService] update not available');
+                this.sendIpcToWindow(IpcEvents.autoUpdater.updateNotAvailable, info);
+            }
         });
 
         autoUpdater.on('error', (ev: any, err: string) => {
@@ -51,6 +59,7 @@ export class AppUpdateService extends MainServiceBase {
         });
 
         autoUpdater.on('update-downloaded', (ev: any, info: UpdateInfo) => {
+            this.logService.debug('[AppUpdateService] update downloaded');
             this.sendIpcToWindow(IpcEvents.autoUpdater.autoUpdateDownloaded, info);
         });
 
@@ -61,12 +70,15 @@ export class AppUpdateService extends MainServiceBase {
 
         ipcMain.on(IpcEvents.app.appStarted, () => {
             if (this.checkForUpdateAtStartup()) {
+                this.sendAutoUpdateNotification = false;
+                this.logService.debug('[AppUpdateService] app started. Automatically check for update.');
                 this.checkForUpdate();
             }
         });
 
         ipcMain.on(IpcEvents.autoUpdater.checkForUpdate, () => {
             this.logService.debug('[AppUpdateService] checkForUpdate request from renderer process');
+            this.sendAutoUpdateNotification = true;
             this.checkForUpdate();
         });
     }
@@ -75,14 +87,22 @@ export class AppUpdateService extends MainServiceBase {
         if (isDev) {
             const msg = '[AppUpdateService] Application update is not working in dev mode.';
             this.logService.info(msg);
-            this.sendIpcToWindow(IpcEvents.autoUpdater.checkForUpdateNotAvailable, msg);
+
+            if (this.sendAutoUpdateNotification) {
+                this.sendIpcToWindow(IpcEvents.autoUpdater.checkForUpdateNotAvailable, msg);
+            }
+
             return;
         }
 
         if (this.isFirstRun()) {
             const msg = '[AppUpdateService] Application update is skipping at first run.';
             this.logService.info(msg);
-            this.sendIpcToWindow(IpcEvents.autoUpdater.checkForUpdateNotAvailable, msg);
+
+            if (this.sendAutoUpdateNotification) {
+                this.sendIpcToWindow(IpcEvents.autoUpdater.checkForUpdateNotAvailable, msg);
+            }
+
             return;
         }
 

packages/uhk-agent/src/services/app.service.ts

@@ -22,13 +22,14 @@ export class AppService extends MainServiceBase {
 
     private async handleAppStartInfo(event: Electron.Event) {
         this.logService.info('[AppService] getAppStartInfo');
-
+        const deviceConnectionState = this.uhkHidDeviceService.getDeviceConnectionState();
         const response: AppStartInfo = {
             commandLineArgs: {
                 addons: this.options.addons || false
             },
-            deviceConnected: this.uhkHidDeviceService.deviceConnected(),
+            deviceConnected: deviceConnectionState.connected,
-            hasPermission: this.uhkHidDeviceService.hasPermission()
+            hasPermission: deviceConnectionState.hasPermission,
+            bootloaderActive: deviceConnectionState.bootloaderActive
         };
         this.logService.info('[AppService] getAppStartInfo response:', response);
         return event.sender.send(IpcEvents.app.getAppStartInfoReply, response);

packages/uhk-agent/src/services/device.service.ts

@@ -2,6 +2,7 @@ import { ipcMain } from 'electron';
 import {
     ConfigurationReply,
     DeviceConnectionState,
+    FirmwareUpgradeIpcResponse,
     getHardwareConfigFromDeviceResponse,
     HardwareModules,
     IpcEvents,
@@ -10,7 +11,7 @@ import {
     mapObjectToUserConfigBinaryBuffer,
     SaveUserConfigurationData
 } from 'uhk-common';
-import { snooze, UhkHidDevice, UhkOperations } from 'uhk-usb';
+import { deviceConnectionStateComparer, snooze, UhkHidDevice, UhkOperations } from 'uhk-usb';
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 import { emptyDir } from 'fs-extra';
@@ -71,6 +72,15 @@ export class DeviceService {
 
         ipcMain.on(IpcEvents.device.startConnectionPoller, this.pollUhkDevice.bind(this));
 
+        ipcMain.on(IpcEvents.device.recoveryDevice, (...args: any[]) => {
+            this.queueManager.add({
+                method: this.recoveryDevice,
+                bind: this,
+                params: args,
+                asynchronous: true
+            });
+        });
+
         logService.debug('[DeviceService] init success');
     }
 
@@ -84,10 +94,7 @@ export class DeviceService {
         try {
             await this.device.waitUntilKeyboardBusy();
             const result = await this.operations.loadConfigurations();
-            const modules: HardwareModules = {
+            const modules: HardwareModules = await this.getHardwareModules(false);
-                leftModuleInfo: await this.operations.getLeftModuleVersionInfo(),
-                rightModuleInfo: await this.operations.getRightModuleVersionInfo()
-            };
 
             const hardwareConfig = getHardwareConfigFromDeviceResponse(result.hardwareConfiguration);
             const uniqueId = hardwareConfig.uniqueId;
@@ -110,16 +117,36 @@ export class DeviceService {
         event.sender.send(IpcEvents.device.loadConfigurationReply, JSON.stringify(response));
     }
 
+    public async getHardwareModules(catchError: boolean): Promise<HardwareModules> {
+        try {
+            await this.device.waitUntilKeyboardBusy();
+
+            return {
+                leftModuleInfo: await this.operations.getLeftModuleVersionInfo(),
+                rightModuleInfo: await this.operations.getRightModuleVersionInfo()
+            };
+        }
+        catch (err) {
+            if (!catchError) {
+                return err;
+            }
+
+            this.logService.error('[DeviceService] Read hardware modules information failed', err);
+        }
+    }
+
     public close(): void {
         this.stopPollTimer();
         this.logService.info('[DeviceService] Device connection checker stopped.');
     }
 
     public async updateFirmware(event: Electron.Event, args?: Array<string>): Promise<void> {
-        const response = new IpcResponse();
+        const response = new FirmwareUpgradeIpcResponse();
+
         let firmwarePathData: TmpFirmware;
 
         try {
+            this.device.resetDeviceCache();
             this.stopPollTimer();
 
             if (args && args.length > 0) {
@@ -133,10 +160,12 @@ export class DeviceService {
             }
 
             response.success = true;
+            response.modules = await this.getHardwareModules(false);
         } catch (error) {
             const err = {message: error.message, stack: error.stack};
             this.logService.error('[DeviceService] updateFirmware error', err);
 
+            response.modules = await this.getHardwareModules(true);
             response.error = err;
         }
 
@@ -144,6 +173,35 @@ export class DeviceService {
             await emptyDir(firmwarePathData.tmpDirectory.name);
         }
 
+        await snooze(500);
+
+        this.pollUhkDevice();
+
+        event.sender.send(IpcEvents.device.updateFirmwareReply, response);
+    }
+
+    public async recoveryDevice(event: Electron.Event): Promise<void> {
+        const response = new FirmwareUpgradeIpcResponse();
+
+        try {
+            this.stopPollTimer();
+
+            await this.operations.updateRightFirmware();
+
+            await snooze(500);
+
+            this.pollUhkDevice();
+
+            response.modules = await this.getHardwareModules(false);
+            response.success = true;
+        } catch (error) {
+            const err = {message: error.message, stack: error.stack};
+            this.logService.error('[DeviceService] updateFirmware error', err);
+
+            response.modules = await this.getHardwareModules(true);
+            response.error = err;
+        }
+
         await snooze(500);
         event.sender.send(IpcEvents.device.updateFirmwareReply, response);
     }
@@ -161,16 +219,11 @@ export class DeviceService {
 
         this.pollTimer$ = Observable.interval(1000)
             .startWith(0)
-            .map(() => this.device.deviceConnected())
+            .map(() => this.device.getDeviceConnectionState())
-            .distinctUntilChanged()
+            .distinctUntilChanged<DeviceConnectionState>(deviceConnectionStateComparer)
-            .do((connected: boolean) => {
+            .do((state: DeviceConnectionState) => {
-                const response: DeviceConnectionState = {
+                this.win.webContents.send(IpcEvents.device.deviceConnectionStateChanged, state);
-                    connected,
+                this.logService.info('[DeviceService] Device connection state changed to:', state);
-                    hasPermission: this.device.hasPermission()
-                };
-
-                this.win.webContents.send(IpcEvents.device.deviceConnectionStateChanged, response);
-                this.logService.info('[DeviceService] Device connection state changed to:', response);
             })
             .subscribe();
     }

packages/uhk-common/src/config-serializer/config-items/hardware-configuration.ts

@@ -41,16 +41,20 @@ export class HardwareConfiguration {
     }
 
     fromBinary(buffer: UhkBuffer): HardwareConfiguration {
-        this.signature = buffer.readString();
+        try {
-        this.majorVersion = buffer.readUInt8();
+            this.signature = buffer.readString();
-        this.minorVersion = buffer.readUInt8();
+            this.majorVersion = buffer.readUInt8();
-        this.patchVersion = buffer.readUInt8();
+            this.minorVersion = buffer.readUInt8();
-        this.brandId = buffer.readUInt8();
+            this.patchVersion = buffer.readUInt8();
-        this.deviceId = buffer.readUInt8();
+            this.brandId = buffer.readUInt8();
-        this.uniqueId = buffer.readUInt32();
+            this.deviceId = buffer.readUInt8();
-        this.isVendorModeOn = buffer.readBoolean();
+            this.uniqueId = buffer.readUInt32();
-        this.isIso = buffer.readBoolean();
+            this.isVendorModeOn = buffer.readBoolean();
-        return this;
+            this.isIso = buffer.readBoolean();
+            return this;
+        } catch (e) {
+            throw new Error('Please power cycle your keyboard (Invalid hardware configuration: Index out of bounds)');
+        }
     }
 
     toJsonObject(): any {

packages/uhk-common/src/config-serializer/config-items/macro-action/key-macro-action.ts

@@ -1,4 +1,4 @@
-import { assertEnum, assertUInt8 } from '../../assert';
+import { assertEnum, assertUInt8, assertUInt16 } from '../../assert';
 import { UhkBuffer } from '../../uhk-buffer';
 import { KeyModifiers } from '../key-modifiers';
 import { MacroAction, MacroActionId, MacroKeySubAction, macroActionType } from './macro-action';
@@ -20,12 +20,24 @@ export class KeyMacroAction extends MacroAction {
     @assertEnum(KeystrokeType)
     type: KeystrokeType;
 
-    @assertUInt8
-    scancode: number;
-
     @assertUInt8
     modifierMask: number;
 
+    @assertUInt16
+    private _scancode: number;
+
+    set scancode(scancode: number) {
+        this._scancode = scancode;
+        if (this.type !== KeystrokeType.shortMedia && this.type !== KeystrokeType.longMedia) {
+            return;
+        }
+        this.type = scancode < 256 ? KeystrokeType.shortMedia : KeystrokeType.longMedia;
+    }
+
+    get scancode() {
+        return this._scancode;
+    }
+
     constructor(other?: KeyMacroAction) {
         super();
         if (!other) {
@@ -33,7 +45,7 @@ export class KeyMacroAction extends MacroAction {
         }
         this.action = other.action;
         this.type = other.type;
-        this.scancode = other.scancode;
+        this._scancode = other._scancode;
         this.modifierMask = other.modifierMask;
     }
 
@@ -45,7 +57,7 @@ export class KeyMacroAction extends MacroAction {
         } else {
             this.type = KeystrokeType[jsObject.type];
         }
-        this.scancode = jsObject.scancode;
+        this._scancode = jsObject.scancode;
         this.modifierMask = jsObject.modifierMask;
         return this;
     }
@@ -58,7 +70,7 @@ export class KeyMacroAction extends MacroAction {
         this.type = keyMacroType & 0b11;
         keyMacroType >>= 2;
         if (keyMacroType & 0b10) {
-            this.scancode = buffer.readUInt8();
+            this._scancode = this.type === KeystrokeType.longMedia ? buffer.readUInt16() : buffer.readUInt8();
         }
         if (keyMacroType & 0b01) {
             this.modifierMask = buffer.readUInt8();
@@ -78,7 +90,7 @@ export class KeyMacroAction extends MacroAction {
             } else {
                 jsObject.type = KeystrokeType[this.type];
             }
-            jsObject.scancode = this.scancode;
+            jsObject.scancode = this._scancode;
         }
 
         if (this.hasModifiers()) {
@@ -98,7 +110,11 @@ export class KeyMacroAction extends MacroAction {
 
         buffer.writeUInt8(keyMacroType);
         if (this.hasScancode()) {
-            buffer.writeUInt8(this.scancode);
+            if (this.type === KeystrokeType.longMedia) {
+                buffer.writeUInt16(this.scancode);
+            } else {
+                buffer.writeUInt8(this.scancode);
+            }
         }
         if (this.hasModifiers()) {
             buffer.writeUInt8(this.modifierMask);
@@ -106,7 +122,7 @@ export class KeyMacroAction extends MacroAction {
     }
 
     toString(): string {
-        return `<KeyMacroAction action="${this.action}" scancode="${this.scancode}" modifierMask="${this.modifierMask}">`;
+        return `<KeyMacroAction action="${this.action}" scancode="${this._scancode}" modifierMask="${this.modifierMask}">`;
     }
 
     isModifierActive(modifier: KeyModifiers): boolean {
@@ -114,7 +130,7 @@ export class KeyMacroAction extends MacroAction {
     }
 
     hasScancode(): boolean {
-        return !!this.scancode;
+        return !!this._scancode;
     }
 
     hasModifiers(): boolean {

packages/uhk-common/src/models/app-start-info.ts

@@ -4,4 +4,5 @@ export interface AppStartInfo {
     commandLineArgs: CommandLineArgs;
     deviceConnected: boolean;
     hasPermission: boolean;
+    bootloaderActive: boolean;
 }

packages/uhk-common/src/models/device-connection-state.ts

@@ -1,4 +1,5 @@
 export interface DeviceConnectionState {
     connected: boolean;
     hasPermission: boolean;
+    bootloaderActive: boolean;
 }

packages/uhk-common/src/models/ipc-response.ts

@@ -1,4 +1,10 @@
+import { HardwareModules } from './hardware-modules';
+
 export class IpcResponse {
     success: boolean;
     error?: { message: string };
 }
+
+export class FirmwareUpgradeIpcResponse extends IpcResponse {
+    modules?: HardwareModules;
+}

packages/uhk-common/src/util/constants.ts

@@ -1,3 +1,4 @@
 export namespace Constants {
     export const AGENT_GITHUB_URL = 'https://github.com/UltimateHackingKeyboard/agent';
+    export const FIRMWARE_GITHUB_ISSUE_URL = 'https://github.com/UltimateHackingKeyboard/agent/issues/567';
 }

packages/uhk-common/src/util/helpers.ts

@@ -5,10 +5,15 @@ export const getHardwareConfigFromDeviceResponse = (json: string): HardwareConfi
     const hardwareConfig = new HardwareConfiguration();
     hardwareConfig.fromBinary(UhkBuffer.fromArray(data));
 
-    if (hardwareConfig.uniqueId > 0) {
+    if (hardwareConfig.signature === 'FTY') {
-        return hardwareConfig;
+        throw Error('The device is in factory reset mode. Power-cycle the device to use it with Agent!');
     }
-    return null;
+
+    if (hardwareConfig.signature !== 'UHK') {
+        throw Error('Please power cycle your keyboard (Invalid hardware configuration: Invalid signature)');
+    }
+
+    return hardwareConfig;
 };
 
 export const getUserConfigFromDeviceResponse = (json: string): UserConfiguration => {

packages/uhk-common/src/util/ipcEvents.ts

@@ -29,6 +29,7 @@ export class Device {
     public static readonly updateFirmware = 'device-update-firmware';
     public static readonly updateFirmwareReply = 'device-update-firmware-reply';
     public static readonly startConnectionPoller = 'device-start-connection-poller';
+    public static readonly recoveryDevice = 'device-recovery';
 }
 
 export class IpcEvents {

packages/uhk-usb/package-lock.json

@@ -144,6 +144,11 @@
 			"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
 			"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
 		},
+		"lodash-es": {
+			"version": "4.17.10",
+			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.10.tgz",
+			"integrity": "sha512-iesFYPmxYYGTcmQK0sL8bX3TGHyM6b2qREaB4kamHfQyfPJP0xgoGxp19nsH16nsfquLdiyKyX3mQkfiSGV8Rg=="
+		},
 		"mimic-response": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.0.tgz",

packages/uhk-usb/package.json

@@ -11,6 +11,7 @@
     "@types/node": "8.0.28"
   },
   "dependencies": {
+    "lodash-es": "^4.17.10",
     "node-hid": "0.5.7",
     "uhk-common": "1.0.0"
   }

packages/uhk-usb/src/constants.ts

@@ -1,6 +1,7 @@
 export namespace Constants {
     export const VENDOR_ID = 0x1D50;
     export const PRODUCT_ID = 0x6122;
+    export const BOOTLOADER_ID = 0x6120;
     export const MAX_PAYLOAD_SIZE = 64;
 }
 

packages/uhk-usb/src/uhk-hid-device.ts

@@ -1,5 +1,6 @@
+import { isEqual } from 'lodash';
 import { Device, devices, HID } from 'node-hid';
-import { CommandLineArgs, LogService } from 'uhk-common';
+import { CommandLineArgs, DeviceConnectionState, LogService } from 'uhk-common';
 
 import {
     ConfigBufferId,
@@ -12,7 +13,7 @@ import {
     ModuleSlotToId,
     UsbCommand
 } from './constants';
-import { bufferToString, getTransferData, retry, snooze } from './util';
+import { bufferToString, getTransferData, isUhkDevice, retry, snooze } from './util';
 
 export const BOOTLOADER_TIMEOUT_MS = 5000;
 
@@ -24,6 +25,7 @@ export class UhkHidDevice {
      * Internal variable that represent the USB UHK device
      * @private
      */
+    private _prevDevices = {};
     private _device: HID;
     private _hasPermission = false;
 
@@ -48,12 +50,16 @@ export class UhkHidDevice {
                 return true;
             }
 
-            if (!this.deviceConnected()) {
+            const dev = devices().find((x: Device) => isUhkDevice(x) || x.productId === Constants.BOOTLOADER_ID);
+
+            if (!dev) {
                 return true;
             }
 
-            this._hasPermission = this.getDevice() !== null;
+            const device = new HID(dev.path);
-            this.close();
+            device.close();
+
+            this._hasPermission = true;
 
             return this._hasPermission;
         } catch (err) {
@@ -67,15 +73,24 @@ export class UhkHidDevice {
      * Return with true is an UHK Device is connected to the computer.
      * @returns {boolean}
      */
-    public deviceConnected(): boolean {
+    public getDeviceConnectionState(): DeviceConnectionState {
-        const connected = devices().some((dev: Device) => dev.vendorId === Constants.VENDOR_ID &&
+        const devs = devices();
-            dev.productId === Constants.PRODUCT_ID);
+        const result: DeviceConnectionState = {
+            bootloaderActive: false,
+            connected: false,
+            hasPermission: this.hasPermission()
+        };
 
-        if (!connected) {
+        for (const dev of devs) {
-            this._hasPermission = false;
+            if (isUhkDevice(dev)) {
+                result.connected = true;
+            } else if (dev.vendorId === Constants.VENDOR_ID &&
+                dev.productId === Constants.BOOTLOADER_ID) {
+                result.bootloaderActive = true;
+            }
         }
 
-        return connected;
+        return result;
     }
 
     /**
@@ -142,6 +157,10 @@ export class UhkHidDevice {
         }
     }
 
+    public resetDeviceCache(): void {
+        this._prevDevices = {};
+    }
+
     async reenumerate(enumerationMode: EnumerationModes): Promise<void> {
         const reenumMode = EnumerationModes[enumerationMode].toString();
         this.logService.debug(`[UhkHidDevice] Start reenumeration, mode: ${reenumMode}`);
@@ -197,7 +216,7 @@ export class UhkHidDevice {
 
     async sendKbootCommandToModule(module: ModuleSlotToI2cAddress, command: KbootCommands, maxTry = 1): Promise<any> {
         let transfer;
-        const moduleName = kbootKommandName(module);
+        const moduleName = kbootCommandName(module);
         this.logService.debug(`[UhkHidDevice] USB[T]: Send KbootCommand ${moduleName} ${KbootCommands[command].toString()}`);
         if (command === KbootCommands.idle) {
             transfer = new Buffer([UsbCommand.SendKbootCommandToModule, command]);
@@ -233,12 +252,14 @@ export class UhkHidDevice {
     private connectToDevice(): HID {
         try {
             const devs = devices();
-            this.logService.debug('[UhkHidDevice] Available devices:', devs);
+            if (!isEqual(this._prevDevices, devs)) {
+                this.logService.debug('[UhkHidDevice] Available devices:', devs);
+                this._prevDevices = devs;
+            } else {
+                this.logService.debug('[UhkHidDevice] Available devices unchanged');
+            }
 
-            const dev = devs.find((x: Device) =>
+            const dev = devs.find(isUhkDevice);
-                x.vendorId === Constants.VENDOR_ID &&
-                x.productId === Constants.PRODUCT_ID &&
-                ((x.usagePage === 128 && x.usage === 129) || x.interface === 0));
 
             if (!dev) {
                 this.logService.debug('[UhkHidDevice] UHK Device not found:');
@@ -256,7 +277,7 @@ export class UhkHidDevice {
     }
 }
 
-function kbootKommandName(module: ModuleSlotToI2cAddress): string {
+function kbootCommandName(module: ModuleSlotToI2cAddress): string {
     switch (module) {
         case ModuleSlotToI2cAddress.leftHalf:
             return 'leftHalf';

packages/uhk-usb/src/uhk-operations.ts

@@ -9,6 +9,7 @@ import {
 } from './constants';
 import * as path from 'path';
 import * as fs from 'fs';
+import * as os from 'os';
 import { UhkBlhost } from './uhk-blhost';
 import { UhkHidDevice } from './uhk-hid-device';
 import { snooze } from './util';
@@ -29,6 +30,7 @@ export class UhkOperations {
     }
 
     public async updateRightFirmware(firmwarePath = this.getFirmwarePath()) {
+        this.logService.debug(`[UhkOperations] Operating system: ${os.type()} ${os.release()} ${os.arch()}`);
         this.logService.debug('[UhkOperations] Start flashing right firmware');
         const prefix = [`--usb 0x1d50,0x${EnumerationNameToProductId.bootloader.toString(16)}`];
 

packages/uhk-usb/src/util.ts

@@ -1,5 +1,7 @@
+import { Device } from 'node-hid';
+import { DeviceConnectionState, LogService } from 'uhk-common';
+
 import { Constants, UsbCommand } from './constants';
-import { LogService } from 'uhk-common';
 
 export const snooze = ms => new Promise(resolve => setTimeout(resolve, ms));
 
@@ -95,3 +97,18 @@ export async function retry(command: Function, maxTry = 3, logService?: LogServi
         }
     }
 }
+
+export const deviceConnectionStateComparer = (a: DeviceConnectionState, b: DeviceConnectionState): boolean => {
+    return a.hasPermission === b.hasPermission
+        && a.connected === b.connected
+        && a.bootloaderActive === b.bootloaderActive;
+};
+
+export const isUhkDevice = (dev: Device): boolean => {
+    return dev.vendorId === Constants.VENDOR_ID &&
+    dev.productId === Constants.PRODUCT_ID &&
+    // hidapi can not read the interface number on Mac, so check the usage page and usage
+    ((dev.usagePage === 128 && dev.usage === 129) || // Old firmware
+        (dev.usagePage === (0xFF00 | 0x00) && dev.usage === 0x01) || // New firmware
+        dev.interface === 0);
+};

packages/uhk-web/src/app/app.routes.ts

@@ -5,17 +5,19 @@ import { deviceRoutes } from './components/device';
 import { addOnRoutes } from './components/add-on';
 import { keymapRoutes } from './components/keymap';
 import { macroRoutes } from './components/macro';
-import { PrivilegeCheckerComponent } from './components/privilege-checker/privilege-checker.component';
+import { PrivilegeCheckerComponent } from './components/privilege-checker';
-import { MissingDeviceComponent } from './components/missing-device/missing-device.component';
+import { MissingDeviceComponent } from './components/missing-device';
 import { UhkDeviceDisconnectedGuard } from './services/uhk-device-disconnected.guard';
 import { UhkDeviceConnectedGuard } from './services/uhk-device-connected.guard';
 import { UhkDeviceUninitializedGuard } from './services/uhk-device-uninitialized.guard';
 import { UhkDeviceInitializedGuard } from './services/uhk-device-initialized.guard';
 import { MainPage } from './pages/main-page/main.page';
-import { agentRoutes } from './components/agent/agent.routes';
+import { agentRoutes } from './components/agent';
 import { LoadingDevicePageComponent } from './pages/loading-page/loading-device.page';
 import { UhkDeviceLoadingGuard } from './services/uhk-device-loading.guard';
 import { UhkDeviceLoadedGuard } from './services/uhk-device-loaded.guard';
+import { RecoveryModeComponent } from './components/device';
+import { UhkDeviceBootloaderNotActiveGuard } from './services/uhk-device-bootloader-not-active.guard';
 
 const appRoutes: Routes = [
     {
@@ -33,6 +35,11 @@ const appRoutes: Routes = [
         component: LoadingDevicePageComponent,
         canActivate: [UhkDeviceLoadedGuard]
     },
+    {
+        path: 'recovery-device',
+        component: RecoveryModeComponent,
+        canActivate: [UhkDeviceBootloaderNotActiveGuard]
+    },
     {
         path: '',
         component: MainPage,

packages/uhk-web/src/app/components/auto-grow-input/auto-grow-input.component.html

@@ -0,0 +1,10 @@
+<input #inputControl
+       cancelable
+       [class]="css"
+       type="text"
+       [disabled]="disabled"
+       [(ngModel)]="model"
+       (blur)="blur()"
+       (focus)="focus()"
+       (keyup.enter)="keyEnter($event)"
+       (keyup)="calculateTextWidth($event.target.value)">

packages/uhk-web/src/app/components/auto-grow-input/auto-grow-input.component.ts

@@ -0,0 +1,118 @@
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    ElementRef,
+    forwardRef, HostListener,
+    Input,
+    Renderer2,
+    ViewChild
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as util from '../../util';
+
+const noop = (_: any) => {
+};
+
+@Component({
+    selector: 'auto-grow-input',
+    templateUrl: './auto-grow-input.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => AutoGrowInputComponent),
+            multi: true
+        }
+    ]
+})
+export class AutoGrowInputComponent implements ControlValueAccessor {
+    @Input() maxParentWidthPercent = 1;
+    @Input() css: string;
+
+    @ViewChild('inputControl') inputControl: ElementRef;
+
+    disabled: boolean;
+
+    get model(): string {
+        return this._model;
+    }
+
+    set model(value: string) {
+        if (this._model === value) {
+            return;
+        }
+
+        this._model = value;
+    }
+
+    private _model: string;
+    private _originalModel: string;
+    private _onChanged = noop;
+    private _onTouched = noop;
+
+    constructor(private _cdRef: ChangeDetectorRef,
+                private _renderer: Renderer2) {
+    }
+
+    registerOnChange(fn: any): void {
+        this._onChanged = fn;
+    }
+
+    registerOnTouched(fn: any): void {
+        this._onTouched = fn;
+    }
+
+    setDisabledState(isDisabled: boolean): void {
+        if (this.disabled === isDisabled) {
+            return;
+        }
+
+        this.disabled = isDisabled;
+        this._cdRef.markForCheck();
+    }
+
+    @HostListener('window:resize')
+    windowResize(): void {
+        this.calculateTextWidth(this._model);
+    }
+
+    writeValue(obj: any): void {
+        console.log('write', new Date());
+        if (this.model === obj) {
+            return;
+        }
+
+        this._model = obj;
+        this._originalModel = obj;
+        this.calculateTextWidth(this._model);
+        this._cdRef.markForCheck();
+    }
+
+    focus(): void {
+        this._onTouched(this);
+    }
+
+    blur(): void {
+        if (!util.isValidName(this._model) || this._model.trim() === this._originalModel) {
+            this._model = this._originalModel;
+            this.calculateTextWidth(this._model);
+            this._cdRef.markForCheck();
+            return;
+        }
+
+        this._originalModel = this._model;
+        this._onChanged(this._model);
+    }
+
+    keyEnter(event): void {
+        event.target.blur();
+    }
+
+    calculateTextWidth(text: string): void {
+        const htmlInput = this.inputControl.nativeElement as HTMLInputElement;
+        const maxWidth = htmlInput.parentElement.parentElement.offsetWidth * this.maxParentWidthPercent;
+        const textWidth = util.getContentWidth(window.getComputedStyle(htmlInput), text);
+        this._renderer.setStyle(htmlInput, 'width', Math.min(maxWidth, textWidth) + 'px');
+    }
+}

packages/uhk-web/src/app/components/auto-grow-input/index.ts

@@ -0,0 +1 @@
+export * from './auto-grow-input.component';

packages/uhk-web/src/app/components/device/configuration/device-configuration.component.html

@@ -14,11 +14,9 @@
         </button>
     </li>
     <li>
-        <label class="btn btn-default btn-file">
+        <file-upload (fileChanged)="changeFile($event)"
-            Import device configuration
+                     label="Import device configuration">
-            <input type="file"
+        </file-upload>
-                   (change)="changeFile($event)">
-        </label>
     </li>
     <li>
         <button class="btn btn-danger"

packages/uhk-web/src/app/components/device/configuration/device-configuration.component.ts

@@ -8,6 +8,7 @@ import {
     SaveUserConfigInBinaryFileAction,
     SaveUserConfigInJsonFileAction
 } from '../../../store/actions/user-config';
+import { UploadFileData } from '../../../models/upload-file-data';
 
 @Component({
     selector: 'device-settings',
@@ -42,16 +43,7 @@ export class DeviceConfigurationComponent {
         }
     }
 
-    changeFile(event): void {
+    changeFile(data: UploadFileData): void {
-        const files = event.srcElement.files;
+        this.store.dispatch(new LoadUserConfigurationFromFileAction(data));
-        const fileReader = new FileReader();
-        fileReader.onloadend = function () {
-            const arrayBuffer = new Uint8Array(fileReader.result);
-            this.store.dispatch(new LoadUserConfigurationFromFileAction({
-                filename: event.srcElement.value,
-                data: Array.from(arrayBuffer)
-            }));
-        }.bind(this);
-        fileReader.readAsArrayBuffer(files[0]);
     }
 }

packages/uhk-web/src/app/components/device/device.routes.ts

@@ -5,6 +5,7 @@ import { DeviceFirmwareComponent } from './firmware/device-firmware.component';
 import { MouseSpeedComponent } from './mouse-speed/mouse-speed.component';
 import { LEDBrightnessComponent } from './led-brightness/led-brightness.component';
 import { RestoreConfigurationComponent } from './restore-configuration/restore-configuration.component';
+import { RecoveryModeComponent } from './recovery-mode/recovery-mode.component';
 
 export const deviceRoutes: Routes = [
     {
@@ -34,6 +35,10 @@ export const deviceRoutes: Routes = [
             {
                 path: 'restore-user-configuration',
                 component: RestoreConfigurationComponent
+            },
+            {
+                path: 'recovery-mode',
+                component: RecoveryModeComponent
             }
         ]
     }

packages/uhk-web/src/app/components/device/firmware/device-firmware.component.html

@@ -12,14 +12,17 @@
                 Firmware {{ hardwareModules.rightModuleInfo.firmwareVersion }} is running on the right keyboard half.
             </p>
 
-            <p>
+            If the update process fails, consider the following points:
-                <i>
+            <ol>
-                    Please note that the firmware update process may sometimes fail. If if fails then
+                <li>Windows 7, Windows Vista, and Windows XP are not supported. Use Linux, OSX, Windows 10, or Windows 8.</li>
-                    simply retry until it succeeds. If the left half becomes unresponsive after a failed
+                <li>Connect your UHK directly to the host computer. Don't use USB hubs or KVM switches.</li>
-                    update then retry and follow the instructions displayed during the update to fix it.
+                <li>Run Agent directly on the host operating system. Don't use VirtualBox or VMware Workstation.</li>
-                    We'll make the firmware update process more robust.
+                <li>Give a try to every USB port of your computer.</li>
-                </i>
+                <li>Remove every other USB device from your computer.</li>
-            </p>
+                <li>If the left half becomes unresponsive after a failed update then retry and follow the instructions displayed during the update to fix it.</li>
+                <li>If the above fails, retry a couple of times.</li>
+                <li>If everything else fails, please add a new comment to <a class="link-github" (click)="openFirmwareGitHubIssuePage($event)">the GitHub issue</a>, and attach the update log.</li>
+            </ol>
 
             <p>
                 <button class="btn btn-primary"
@@ -27,27 +30,17 @@
                         (click)="onUpdateFirmware()">
                     Flash firmware {{ (getAgentVersionInfo$ | async).firmwareVersion }} (bundled with Agent)
                 </button>
-                <label class="btn btn-primary btn-file"
+                <file-upload [disabled]="flashFirmwareButtonDisbabled$ | async"
-                       [class.disabled]="flashFirmwareButtonDisbabled$ | async">
+                             (fileChanged)="changeFile($event)"
-                    Choose firmware file and flash it
+                             accept=".tar.bz2"
-                    <input id="firmware-file-select"
+                             label="Choose firmware file and flash it"></file-upload>
-                           type="file"
-                           accept=".tar.bz2"
-                           [disabled]="flashFirmwareButtonDisbabled$ | async"
-                           (change)="changeFile($event)">
-                </label>
             </p>
         </div>
 
-        <div class="flex-grow" #scrollMe>
+        <div class="flex-grow">
             <xterm [logs]="xtermLog$ | async"></xterm>
         </div>
-        <div class="footer">
+        <div class="flex-footer">
-            <button type="button"
-                    class="btn btn-primary ok-button"
-                    [disabled]="firmwareOkButtonDisabled$ | async"
-                    (click)="onOkButtonClick()">OK
-            </button>
         </div>
     </div>
 </div>

packages/uhk-web/src/app/components/device/firmware/device-firmware.component.scss

@@ -6,24 +6,6 @@
     width: 100%;
 }
 
-.flex-container {
+.link-github {
-    height: 100%;
+    cursor: pointer;
-    max-height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
-.flex-grow {
-    background-color: black;
-    overflow: auto;
-    flex: 1;
-}
-
-.footer {
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-}
-
-.ok-button {
-    min-width: 100px;
 }

packages/uhk-web/src/app/components/device/firmware/device-firmware.component.ts

@@ -1,19 +1,21 @@
-import { Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 import { HardwareModules, VersionInformation } from 'uhk-common';
+import { Constants } from 'uhk-common';
+import { OpenUrlInNewWindowAction } from '../../../store/actions/app';
 
 import {
     AppState,
-    firmwareOkButtonDisabled,
     flashFirmwareButtonDisbabled,
     getAgentVersionInfo,
     getHardwareModules,
     xtermLog
 } from '../../../store';
-import { UpdateFirmwareAction, UpdateFirmwareOkButtonAction, UpdateFirmwareWithAction } from '../../../store/actions/device';
+import { UpdateFirmwareAction, UpdateFirmwareWithAction } from '../../../store/actions/device';
 import { XtermLog } from '../../../models/xterm-log';
+import { UploadFileData } from '../../../models/upload-file-data';
 
 @Component({
     selector: 'device-firmware',
@@ -26,33 +28,20 @@ import { XtermLog } from '../../../models/xterm-log';
 export class DeviceFirmwareComponent implements OnDestroy {
     flashFirmwareButtonDisbabled$: Observable<boolean>;
     xtermLog$: Observable<Array<XtermLog>>;
-    xtermLogSubscription: Subscription;
     getAgentVersionInfo$: Observable<VersionInformation>;
-    firmwareOkButtonDisabled$: Observable<boolean>;
     hardwareModulesSubscription: Subscription;
     hardwareModules: HardwareModules;
 
-    @ViewChild('scrollMe') divElement: ElementRef;
-
     constructor(private store: Store<AppState>) {
         this.flashFirmwareButtonDisbabled$ = store.select(flashFirmwareButtonDisbabled);
         this.xtermLog$ = store.select(xtermLog);
-        this.xtermLogSubscription = this.xtermLog$.subscribe(() => {
-            if (this.divElement && this.divElement.nativeElement) {
-                setTimeout(() => {
-                    this.divElement.nativeElement.scrollTop = this.divElement.nativeElement.scrollHeight;
-                });
-            }
-        });
         this.getAgentVersionInfo$ = store.select(getAgentVersionInfo);
-        this.firmwareOkButtonDisabled$ = store.select(firmwareOkButtonDisabled);
         this.hardwareModulesSubscription = store.select(getHardwareModules).subscribe(data => {
             this.hardwareModules = data;
         });
     }
 
     ngOnDestroy(): void {
-        this.xtermLogSubscription.unsubscribe();
         this.hardwareModulesSubscription.unsubscribe();
     }
 
@@ -60,22 +49,12 @@ export class DeviceFirmwareComponent implements OnDestroy {
         this.store.dispatch(new UpdateFirmwareAction());
     }
 
-    onOkButtonClick(): void {
+    changeFile(data: UploadFileData): void {
-        this.store.dispatch(new UpdateFirmwareOkButtonAction());
+        this.store.dispatch(new UpdateFirmwareWithAction(data.data));
     }
 
-    changeFile(event): void {
+    openFirmwareGitHubIssuePage(event): void {
-        const files = event.srcElement.files;
+        event.preventDefault();
-
+        this.store.dispatch(new OpenUrlInNewWindowAction(Constants.FIRMWARE_GITHUB_ISSUE_URL));
-        if (files.length === 0) {
-            return;
-        }
-
-        const fileReader = new FileReader();
-        fileReader.onloadend = function () {
-            const arrayBuffer = new Uint8Array(fileReader.result);
-            this.store.dispatch(new UpdateFirmwareWithAction(Array.prototype.slice.call(arrayBuffer)));
-        }.bind(this);
-        fileReader.readAsArrayBuffer(files[0]);
     }
 }

packages/uhk-web/src/app/components/device/index.ts

@@ -3,4 +3,5 @@ export * from './firmware/device-firmware.component';
 export * from './mouse-speed/mouse-speed.component';
 export * from './led-brightness/led-brightness.component';
 export * from './restore-configuration/restore-configuration.component';
+export * from './recovery-mode/recovery-mode.component';
 export * from './device.routes';

packages/uhk-web/src/app/components/device/recovery-mode/recovery-mode.component.html

@@ -0,0 +1,26 @@
+<div class="full-height">
+    <div class="flex-container">
+        <div>
+
+            <h1>
+                <i class="fa fa-wrench"></i>
+                <span>Fix device</span>
+            </h1>
+            <p>
+                Your device seems to be broken. No worries, Agent can fix it.
+            </p>
+            <p>
+                <button class="btn btn-primary"
+                        type="button"
+                        [disabled]="flashFirmwareButtonDisbabled$ | async"
+                        (click)="onRecoveryDevice()">Fix device
+                </button>
+            </p>
+        </div>
+        <div class="flex-grow">
+            <xterm [logs]="xtermLog$ | async"></xterm>
+        </div>
+        <div class="flex-footer">
+        </div>
+    </div>
+</div>

packages/uhk-web/src/app/components/device/recovery-mode/recovery-mode.component.scss

@@ -0,0 +1,10 @@
+:host {
+    overflow-y: auto;
+    display: block;
+    height: 100%;
+    width: 100%;
+
+    p {
+        margin: 1.5rem 0;
+    }
+}

packages/uhk-web/src/app/components/device/recovery-mode/recovery-mode.component.ts

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs/Observable';
+
+import { XtermLog } from '../../../models/xterm-log';
+import { AppState, flashFirmwareButtonDisbabled, xtermLog } from '../../../store';
+import { RecoveryDeviceAction } from '../../../store/actions/device';
+
+@Component({
+    selector: 'device-recovery-mode',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './recovery-mode.component.html',
+    styleUrls: ['./recovery-mode.component.scss'],
+    host: {
+        'class': 'container-fluid'
+    }
+})
+export class RecoveryModeComponent implements OnInit {
+    flashFirmwareButtonDisbabled$: Observable<boolean>;
+
+    xtermLog$: Observable<Array<XtermLog>>;
+
+    constructor(private store: Store<AppState>) {
+    }
+
+    ngOnInit(): void {
+        this.flashFirmwareButtonDisbabled$ = this.store.select(flashFirmwareButtonDisbabled);
+        this.xtermLog$ = this.store.select(xtermLog);
+    }
+
+    onRecoveryDevice(): void {
+        this.store.dispatch(new RecoveryDeviceAction());
+    }
+}

packages/uhk-web/src/app/components/file-upload/file-upload.component.html

@@ -0,0 +1,9 @@
+<label class="btn btn-primary btn-file"
+       [class.disabled]="disabled">
+    {{ label }}
+    <input #inputControl
+           type="file"
+           [accept]="accept"
+           [disabled]="disabled"
+           (change)="changeFile($event)">
+</label>

packages/uhk-web/src/app/components/file-upload/file-upload.component.ts

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { UploadFileData } from '../../models/upload-file-data';
+
+@Component({
+    selector: 'file-upload',
+    templateUrl: './file-upload.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FileUploadComponent {
+    @Input() label = 'Select file';
+    @Input() disabled: boolean;
+    @Input() accept: string;
+
+    @Output() fileChanged = new EventEmitter<UploadFileData>();
+
+    changeFile(event): void {
+        const files = event.srcElement.files;
+
+        if (files.length === 0) {
+            return;
+        }
+
+        const fileReader = new FileReader();
+        fileReader.onloadend = function () {
+            const arrayBuffer = new Uint8Array(fileReader.result);
+            const target = event.target || event.srcElement || event.currentTarget;
+            target.value = null;
+            this.fileChanged.emit({
+                filename: event.srcElement.value,
+                data: Array.from(arrayBuffer)
+            });
+        }.bind(this);
+        fileReader.readAsArrayBuffer(files[0]);
+    }
+}

packages/uhk-web/src/app/components/file-upload/index.ts

@@ -0,0 +1 @@
+export * from './file-upload.component';

packages/uhk-web/src/app/components/macro/action-editor/tab/key/macro-key.component.ts

@@ -67,7 +67,7 @@ export class MacroKeyTabComponent extends MacroBaseComponent implements OnInit {
     }
 
     getKeyMacroAction(): KeyMacroAction {
-        const keyMacroAction = Object.assign(new KeyMacroAction(), this.keypressTab.toKeyAction());
+        const keyMacroAction = new KeyMacroAction(this.keypressTab.toKeyAction() as any);
         keyMacroAction.action = this.getActionType(this.activeTab);
         return keyMacroAction;
     }

packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.html

@@ -1,5 +1,10 @@
 <div>
     <h4>Type text</h4>
-    <textarea #macroTextInput name="macro-text" (change)="onTextChange()"
+    <textarea #macroTextInput
-    (keyup)="validate()" class="macro__text-input">{{ macroAction?.text }}</textarea>
+              name="macro-text"
+              (keydown)="onKeydown($event)"
+              (change)="onTextChange()"
+              (keyup)="validate()"
+              (paste)="onPaste($event)"
+              class="macro__text-input">{{ macroAction?.text }}</textarea>
 </div>

packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.ts

@@ -11,6 +11,8 @@ import { TextMacroAction } from 'uhk-common';
 
 import { MacroBaseComponent } from '../macro-base.component';
 
+const NON_ASCII_REGEXP = /[^\x00-\x7F]/g;
+
 @Component({
     selector: 'macro-text-tab',
     templateUrl: './macro-text.component.html',
@@ -36,6 +38,41 @@ export class MacroTextTabComponent extends MacroBaseComponent implements OnInit,
         this.macroAction.text = this.input.nativeElement.value;
     }
 
+    /**
+     * Not allow non ascii character
+     * @param $event
+     */
+    onKeydown($event: KeyboardEvent): void {
+        if (new RegExp(NON_ASCII_REGEXP).test($event.key)) {
+            $event.preventDefault();
+            $event.stopPropagation();
+        }
+    }
+
+    /**
+     * Remove non ascii character from clipboard data
+     * @param $event
+     */
+    onPaste($event: ClipboardEvent): void {
+        $event.preventDefault();
+
+        const textarea: HTMLTextAreaElement = this.input.nativeElement;
+        const data = $event.clipboardData.getData('text/plain');
+        const text = data && data.replace(NON_ASCII_REGEXP, '') || '';
+        if (text.length === 0) {
+            return;
+        }
+
+        const value = textarea.value || '';
+        const prefix = value.substr(0, textarea.selectionStart);
+        const end = textarea.selectionEnd;
+        const suffix = value.substr(textarea.selectionEnd);
+        textarea.value = prefix + text + suffix;
+        const correction = end === 0 ? 0 : 1;
+        textarea.selectionStart = textarea.selectionEnd = end + text.length - correction;
+        this.macroAction.text = textarea.value;
+    }
+
     isMacroValid = () => !!this.input.nativeElement.value;
 
     private init = () => {

packages/uhk-web/src/app/components/macro/list/macro-list.component.html

@@ -1,5 +1,6 @@
 <div class="row list-container">
     <div class="col-xs-10 col-xs-offset-1 list-group">
+    <p><i>Please note that macro playback is not implemented yet. You can create macros, but they won't have any effect until firmware support is implemented. We're working on this.</i></p>
         <div class="macro-actions-container" [dragula]="'macroActions'" [dragulaModel]="macro.macroActions">
             <macro-item *ngFor="let macroAction of macro.macroActions; let macroActionIndex = index"
                         [macroAction]="macroAction"

packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html

@@ -9,7 +9,7 @@
     ></select2>
     <icon name="question-circle"
           data-toggle="tooltip"
-          title="Looking for a non-US character? Just pick the character of the desired key according to the US layout."
+          title="Looking for a non-US character? Just pick the character of the desired key according to the US layout. For example, on US keyboards next to Tab there is the Q key, but it's й on Russian keyboards, so in this case choose Q instead of й in Agent."
           data-placement="bottom"></icon>
     <capture-keystroke-button (capture)="onKeysCapture($event)" tabindex="0"></capture-keystroke-button>
 </div>

packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.ts

@@ -115,7 +115,7 @@ export class KeypressTabComponent extends Tab implements OnChanges {
         const scTypePair = this.toScancodeTypePair(this.selectedScancodeOption);
         keystrokeAction.scancode = scTypePair[0];
         if (scTypePair[1] === 'media') {
-            keystrokeAction.type = KeystrokeType.shortMedia;
+            keystrokeAction.type = keystrokeAction.scancode > 255 ? KeystrokeType.longMedia : KeystrokeType.shortMedia;
         } else {
             keystrokeAction.type = KeystrokeType[scTypePair[1]];
         }

packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.html

@@ -11,7 +11,7 @@
         </option>
     </select>
     <span [ngSwitch]="toggle">
-        <ng-template [ngSwitchCase]="true">layer by pressing this key.</ng-template>
+        <ng-template [ngSwitchCase]="true">layer by tapping this key.</ng-template>
         <ng-template ngSwitchDefault>layer by holding this key.</ng-template>
     </span>
 </ng-template>

packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.html

@@ -2,7 +2,7 @@
     <span> No macros are available to choose from. Create a macro first! </span>
 </ng-template>
 <ng-template [ngIf]="macroOptions.length > 0">
-    <p><i>Please note that macro playback is not implemented yet. You can bind macros, but they don't have any effect.</i></p>
+    <p><i>Please note that macro playback is not implemented yet. You can bind macros, but they won't have any effect until firmware support is implemented. We're working on this.</i></p>
     <div class="macro-selector">
         <b> Play macro: </b>
         <select2 [data]="macroOptions" [value]="macroOptions[selectedMacroIndex].id" (valueChanged)="onChange($event)" [width]="'100%'"></select2>

packages/uhk-web/src/app/components/side-menu/side-menu.component.html

@@ -2,13 +2,11 @@
     <li class="sidebar__level-0--item">
         <div class="sidebar__level-0">
             <i class="uhk-icon uhk-icon-0401-usb-stick rotate-right"></i>
-            <input #deviceName cancelable
+            <auto-grow-input [ngModel]="state.deviceName"
-                   class="pane-title__name"
+                             [maxParentWidthPercent]="0.65"
-                   type="text"
+                             [css]="'side-menu-pane-title__name'"
-                   [readonly]="state.restoreUserConfiguration"
+                             [disabled]="state.restoreUserConfiguration || state.updatingFirmware"
-                   (change)="editDeviceName($event.target.value)"
+                             (ngModelChange)="editDeviceName($event)"></auto-grow-input>
-                   (keyup.enter)="deviceName.blur()"
-                   (keyup)="calculateHeaderTextWidth($event.target.value)">
             <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'device')"></i>
         </div>
         <ul [@toggler]="animation['device']">

packages/uhk-web/src/app/components/side-menu/side-menu.component.scss

@@ -162,22 +162,3 @@ ul {
         }
     }
 }
-
-.pane-title {
-    margin-bottom: 1em;
-
-    &__name {
-        border: none;
-        border-bottom: 2px dotted #999;
-        padding: 0;
-        margin: 0 0.25rem;
-        text-overflow: ellipsis;
-        background-color: transparent;
-
-        &:focus {
-            box-shadow: 0 0 0 1px #ccc, 0 0 5px 0 #ccc;
-            border-color: transparent;
-            background-color: transparent;
-        }
-    }
-}

packages/uhk-web/src/app/components/side-menu/side-menu.component.ts

@@ -1,5 +1,4 @@
 import {
-    AfterContentInit,
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
@@ -19,7 +18,6 @@ import 'rxjs/add/operator/let';
 
 import { AppState, getSideMenuPageState } from '../../store';
 import { MacroActions } from '../../store/actions';
-import * as util from '../../util';
 import { RenameUserConfigurationAction } from '../../store/actions/user-config';
 import { SideMenuPageState } from '../../models/side-menu-page-state';
 
@@ -40,7 +38,7 @@ import { SideMenuPageState } from '../../models/side-menu-page-state';
     styleUrls: ['./side-menu.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SideMenuComponent implements AfterContentInit, OnInit, OnDestroy {
+export class SideMenuComponent implements OnInit, OnDestroy {
     state: SideMenuPageState;
     animation: { [key: string]: 'active' | 'inactive' };
     @ViewChild('deviceName') deviceName: ElementRef;
@@ -62,15 +60,10 @@ export class SideMenuComponent implements AfterContentInit, OnInit, OnDestroy {
     ngOnInit(): void {
         this.stateSubscription = this.store.select(getSideMenuPageState).subscribe(data => {
             this.state = data;
-            this.setDeviceName();
             this.cdRef.markForCheck();
         });
     }
 
-    ngAfterContentInit(): void {
-        this.setDeviceName();
-    }
-
     ngOnDestroy(): void {
         if (this.stateSubscription) {
             this.stateSubscription.unsubscribe();
@@ -106,24 +99,6 @@ export class SideMenuComponent implements AfterContentInit, OnInit, OnDestroy {
     }
 
     editDeviceName(name: string): void {
-        if (!util.isValidName(name) || name.trim() === this.state.deviceName) {
-            this.setDeviceName();
-            return;
-        }
         this.store.dispatch(new RenameUserConfigurationAction(name));
     }
-
-    calculateHeaderTextWidth(text): void {
-        const htmlInput = this.deviceName.nativeElement as HTMLInputElement;
-        const maxWidth = htmlInput.parentElement.offsetWidth * 0.66;
-        const textWidth = util.getContentWidth(window.getComputedStyle(htmlInput), text);
-        this.renderer.setStyle(htmlInput, 'width', Math.min(maxWidth, textWidth) + 'px');
-    }
-
-    private setDeviceName(): void {
-        if (this.deviceName) {
-            this.renderer.setProperty(this.deviceName.nativeElement, 'value', this.state.deviceName);
-            this.calculateHeaderTextWidth(this.deviceName.nativeElement.value);
-        }
-    }
 }

packages/uhk-web/src/app/components/xterm/xterm.component.html

@@ -1,5 +1,17 @@
-<div class="wrapper">
+<div class="x-term-container">
-    <ul class="list-unstyled">
+    <div class="x-term-wrapper" #scrollMe>
-        <li *ngFor="let log of logs" [ngClass]="log.cssClass"><span>{{ log.message }}</span></li>
+        <ul class="list-unstyled">
-    </ul>
+            <li *ngFor="let log of logs" [ngClass]="log.cssClass"><span>{{ log.message }}</span></li>
+        </ul>
+    </div>
+    <div class="copy-container-wrapper">
+        <div class="copy-container">
+            <span class="fa  fa-2x fa-copy"
+                  ngxClipboard
+                  [cbContent]="getClipboardContent()"
+                  title="Copy to clipboard"
+                  data-toggle="tooltip"
+                  data-placement="top"></span>
+        </div>
+    </div>
 </div>

packages/uhk-web/src/app/components/xterm/xterm.component.scss

@@ -1,9 +1,36 @@
+$scrollbar-color: #ffffff;
+$scrollbar-radius: 6px;
+
 :host {
-    background-color: yellow;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    height: 100%;
 }
 
-.wrapper {
+.x-term-container {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: stretch;
+    position: relative;
+}
+
+.x-term-wrapper {
     background-color: black;
+    overflow: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.copy-container-wrapper {
+    position: absolute;
+    top: 2px;
+    right: 14px;
 }
 
 .xterm-standard {

packages/uhk-web/src/app/components/xterm/xterm.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
 import { XtermLog } from '../../models/xterm-log';
 
 @Component({
@@ -7,6 +7,21 @@ import { XtermLog } from '../../models/xterm-log';
     styleUrls: ['./xterm.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class XtermComponent {
+export class XtermComponent implements OnChanges {
     @Input() logs: Array<XtermLog> = [];
+
+    @ViewChild('scrollMe') divElement: ElementRef;
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes.logs && this.divElement && this.divElement.nativeElement) {
+            setTimeout(() => {
+                this.divElement.nativeElement.scrollTop = this.divElement.nativeElement.scrollHeight;
+            });
+        }
+    }
+
+    getClipboardContent(): string {
+        return this.logs.reduce((value, line) => value + line.message + '\n', '');
+    }
+
 }

packages/uhk-web/src/app/models/firmware-upgrade-error.ts

@@ -0,0 +1,6 @@
+import { HardwareModules } from 'uhk-common';
+
+export interface FirmwareUpgradeError {
+    error: any;
+    modules?: HardwareModules;
+}

packages/uhk-web/src/app/services/device-renderer.service.ts

@@ -46,6 +46,10 @@ export class DeviceRendererService {
         this.ipcRenderer.send(IpcEvents.device.startConnectionPoller);
     }
 
+    recoveryDevice(): void {
+        this.ipcRenderer.send(IpcEvents.device.recoveryDevice);
+    }
+
     private registerEvents(): void {
         this.ipcRenderer.on(IpcEvents.device.deviceConnectionStateChanged, (event: string, arg: DeviceConnectionState) => {
             this.dispachStoreAction(new ConnectionStateChangedAction(arg));

packages/uhk-web/src/app/services/uhk-device-bootloader-not-active.guard.ts

@@ -0,0 +1,24 @@
+import { CanActivate, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { Injectable } from '@angular/core';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/map';
+
+import { AppState, bootloaderActive } from '../store';
+
+@Injectable()
+export class UhkDeviceBootloaderNotActiveGuard implements CanActivate {
+
+    constructor(private store: Store<AppState>, private router: Router) { }
+
+    canActivate(): Observable<boolean> {
+        return this.store.select(bootloaderActive)
+            .do(active => {
+                if (!active) {
+                    this.router.navigate(['/']);
+                }
+            });
+    }
+}

packages/uhk-web/src/app/shared.module.ts

@@ -17,7 +17,8 @@ import {
     DeviceFirmwareComponent,
     MouseSpeedComponent,
     LEDBrightnessComponent,
-    RestoreConfigurationComponent
+    RestoreConfigurationComponent,
+    RecoveryModeComponent
 } from './components/device';
 import { KeymapAddComponent, KeymapEditComponent, KeymapHeaderComponent } from './components/keymap';
 import { LayersComponent } from './components/layers';
@@ -105,6 +106,9 @@ import { XtermComponent } from './components/xterm/xterm.component';
 import { SliderWrapperComponent } from './components/slider-wrapper/slider-wrapper.component';
 import { EditableTextComponent } from './components/editable-text/editable-text.component';
 import { Autofocus } from './directives/autofocus/autofocus.directive';
+import { UhkDeviceBootloaderNotActiveGuard } from './services/uhk-device-bootloader-not-active.guard';
+import { FileUploadComponent } from './components/file-upload';
+import { AutoGrowInputComponent } from './components/auto-grow-input';
 
 @NgModule({
     declarations: [
@@ -176,7 +180,10 @@ import { Autofocus } from './directives/autofocus/autofocus.directive';
         SliderWrapperComponent,
         EditableTextComponent,
         Autofocus,
-        RestoreConfigurationComponent
+        RestoreConfigurationComponent,
+        RecoveryModeComponent,
+        FileUploadComponent,
+        AutoGrowInputComponent
     ],
     imports: [
         CommonModule,
@@ -211,7 +218,8 @@ import { Autofocus } from './directives/autofocus/autofocus.directive';
         UhkDeviceInitializedGuard,
         UhkDeviceUninitializedGuard,
         UhkDeviceLoadingGuard,
-        UhkDeviceLoadedGuard
+        UhkDeviceLoadedGuard,
+        UhkDeviceBootloaderNotActiveGuard
     ],
     exports: [
         UhkMessageComponent,

packages/uhk-web/src/app/store/actions/device.ts

@@ -1,5 +1,6 @@
 import { Action } from '@ngrx/store';
-import { DeviceConnectionState, HardwareModules, IpcResponse, type } from 'uhk-common';
+import { DeviceConnectionState, FirmwareUpgradeIpcResponse, HardwareModules, IpcResponse, type } from 'uhk-common';
+import { FirmwareUpgradeError } from '../../models/firmware-upgrade-error';
 
 const PREFIX = '[device] ';
 
@@ -26,7 +27,8 @@ export const ActionTypes = {
     MODULES_INFO_LOADED: type(PREFIX + 'module info loaded'),
     HAS_BACKUP_USER_CONFIGURATION: type(PREFIX + 'Store backup user configuration'),
     RESTORE_CONFIGURATION_FROM_BACKUP: type(PREFIX + 'Restore configuration from backup'),
-    RESTORE_CONFIGURATION_FROM_BACKUP_SUCCESS: type(PREFIX + 'Restore configuration from backup success')
+    RESTORE_CONFIGURATION_FROM_BACKUP_SUCCESS: type(PREFIX + 'Restore configuration from backup success'),
+    RECOVERY_DEVICE: type(PREFIX + 'Recovery device')
 };
 
 export class SetPrivilegeOnLinuxAction implements Action {
@@ -95,25 +97,23 @@ export class UpdateFirmwareWithAction implements Action {
 export class UpdateFirmwareReplyAction implements Action {
     type = ActionTypes.UPDATE_FIRMWARE_REPLY;
 
-    constructor(public payload: IpcResponse) {
+    constructor(public payload: FirmwareUpgradeIpcResponse) {
     }
 }
 
 export class UpdateFirmwareSuccessAction implements Action {
     type = ActionTypes.UPDATE_FIRMWARE_SUCCESS;
+    constructor(public payload: HardwareModules) {
+    }
 }
 
 export class UpdateFirmwareFailedAction implements Action {
     type = ActionTypes.UPDATE_FIRMWARE_FAILED;
 
-    constructor(public payload: any) {
+    constructor(public payload: FirmwareUpgradeError) {
     }
 }
 
-export class UpdateFirmwareOkButtonAction implements Action {
-    type = ActionTypes.UPDATE_FIRMWARE_OK_BUTTON;
-}
-
 export class ResetMouseSpeedSettingsAction implements Action {
     type = ActionTypes.RESET_MOUSE_SPEED_SETTINGS;
 }
@@ -140,6 +140,10 @@ export class RestoreUserConfigurationFromBackupSuccessAction implements Action {
     type = ActionTypes.RESTORE_CONFIGURATION_FROM_BACKUP_SUCCESS;
 }
 
+export class RecoveryDeviceAction implements Action {
+    type = ActionTypes.RECOVERY_DEVICE;
+}
+
 export type Actions
     = SetPrivilegeOnLinuxAction
     | SetPrivilegeOnLinuxReplyAction
@@ -157,9 +161,9 @@ export type Actions
     | UpdateFirmwareReplyAction
     | UpdateFirmwareSuccessAction
     | UpdateFirmwareFailedAction
-    | UpdateFirmwareOkButtonAction
     | HardwareModulesLoadedAction
     | RestoreUserConfigurationFromBackupAction
     | HasBackupUserConfigurationAction
     | RestoreUserConfigurationFromBackupSuccessAction
+    | RecoveryDeviceAction
     ;

packages/uhk-web/src/app/store/effects/app.ts

@@ -68,7 +68,8 @@ export class ApplicationEffects {
                 new ApplyCommandLineArgsAction(appInfo.commandLineArgs),
                 new ConnectionStateChangedAction({
                     connected: appInfo.deviceConnected,
-                    hasPermission: appInfo.hasPermission
+                    hasPermission: appInfo.hasPermission,
+                    bootloaderActive: appInfo.bootloaderActive
                 })
             ];
         });

packages/uhk-web/src/app/store/effects/device.ts

@@ -14,7 +14,7 @@ import 'rxjs/add/operator/withLatestFrom';
 import 'rxjs/add/operator/switchMap';
 
 import {
-    DeviceConnectionState,
+    FirmwareUpgradeIpcResponse,
     HardwareConfiguration,
     IpcResponse,
     NotificationType,
@@ -24,6 +24,7 @@ import {
     ActionTypes,
     ConnectionStateChangedAction,
     HideSaveToKeyboardButton,
+    RecoveryDeviceAction,
     ResetUserConfigurationAction,
     RestoreUserConfigurationFromBackupSuccessAction,
     SaveConfigurationAction,
@@ -33,14 +34,13 @@ import {
     SetPrivilegeOnLinuxReplyAction,
     UpdateFirmwareAction,
     UpdateFirmwareFailedAction,
-    UpdateFirmwareOkButtonAction,
     UpdateFirmwareReplyAction,
     UpdateFirmwareSuccessAction,
     UpdateFirmwareWithAction
 } from '../actions/device';
 import { DeviceRendererService } from '../../services/device-renderer.service';
 import { SetupPermissionErrorAction, ShowNotificationAction } from '../actions/app';
-import { AppState } from '../index';
+import { AppState, getRouterState } from '../index';
 import {
     ActionTypes as UserConfigActions,
     ApplyUserConfigurationFromFileAction,
@@ -55,11 +55,20 @@ export class DeviceEffects {
     @Effect()
     deviceConnectionStateChange$: Observable<Action> = this.actions$
         .ofType<ConnectionStateChangedAction>(ActionTypes.CONNECTION_STATE_CHANGED)
-        .map(action => action.payload)
+        .withLatestFrom(this.store.select(getRouterState))
-        .do((state: DeviceConnectionState) => {
+        .do(([action, route]) => {
+            const state = action.payload;
+
+            if (route.state && route.state.url.startsWith('/device/firmware')) {
+                return;
+            }
+
             if (!state.hasPermission) {
                 this.router.navigate(['/privilege']);
             }
+            else if (state.bootloaderActive) {
+                this.router.navigate(['/recovery-device']);
+            }
             else if (state.connected) {
                 this.router.navigate(['/']);
             }
@@ -67,7 +76,9 @@ export class DeviceEffects {
                 this.router.navigate(['/detection']);
             }
         })
-        .switchMap((state: DeviceConnectionState) => {
+        .switchMap(([action, route]) => {
+            const state = action.payload;
+
             if (state.connected && state.hasPermission) {
                 return Observable.of(new LoadConfigFromDeviceAction());
             }
@@ -90,7 +101,8 @@ export class DeviceEffects {
             if (response.success) {
                 return new ConnectionStateChangedAction({
                     connected: true,
-                    hasPermission: true
+                    hasPermission: true,
+                    bootloaderActive: false
                 });
             }
 
@@ -198,22 +210,26 @@ export class DeviceEffects {
     @Effect() updateFirmwareReply$ = this.actions$
         .ofType<UpdateFirmwareReplyAction>(ActionTypes.UPDATE_FIRMWARE_REPLY)
         .map(action => action.payload)
-        .switchMap((response: IpcResponse) => {
+        .switchMap((response: FirmwareUpgradeIpcResponse)
+            : Observable<UpdateFirmwareSuccessAction | UpdateFirmwareFailedAction> => {
             if (response.success) {
-                return Observable.of(new UpdateFirmwareSuccessAction());
+                return Observable.of(new UpdateFirmwareSuccessAction(response.modules));
             }
 
-            return Observable.of(new UpdateFirmwareFailedAction(response.error));
+            return Observable.of(new UpdateFirmwareFailedAction({
+                error: response.error,
+                modules: response.modules
+            }));
         });
 
-    @Effect({dispatch: false}) updateFirmwareOkButton$ = this.actions$
-        .ofType<UpdateFirmwareOkButtonAction>(ActionTypes.UPDATE_FIRMWARE_OK_BUTTON)
-        .do(() => this.deviceRendererService.startConnectionPoller());
-
     @Effect() restoreUserConfiguration$ = this.actions$
         .ofType<ResetUserConfigurationAction>(ActionTypes.RESTORE_CONFIGURATION_FROM_BACKUP)
         .map(() => new SaveConfigurationAction());
 
+    @Effect({dispatch: false}) recoveryDevice$ = this.actions$
+        .ofType<RecoveryDeviceAction>(ActionTypes.RECOVERY_DEVICE)
+        .do(() => this.deviceRendererService.recoveryDevice());
+
     constructor(private actions$: Actions,
                 private router: Router,
                 private deviceRendererService: DeviceRendererService,

packages/uhk-web/src/app/store/effects/user-config.ts

@@ -36,7 +36,7 @@ import {
 
 import { DataStorageRepositoryService } from '../../services/datastorage-repository.service';
 import { DefaultUserConfigurationService } from '../../services/default-user-configuration.service';
-import { AppState, getPrevUserConfiguration, getUserConfiguration } from '../index';
+import { AppState, getPrevUserConfiguration, getRouterState, getUserConfiguration } from '../index';
 import { KeymapAction, KeymapActions, MacroAction, MacroActions } from '../actions';
 import {
     DismissUndoNotificationAction,
@@ -118,8 +118,10 @@ export class UserConfigEffects {
 
     @Effect() loadConfigFromDeviceReply$ = this.actions$
         .ofType<LoadConfigFromDeviceReplyAction>(ActionTypes.LOAD_CONFIG_FROM_DEVICE_REPLY)
-        .map(action => action.payload)
+        .withLatestFrom(this.store.select(getRouterState))
-        .mergeMap((data: ConfigurationReply): any => {
+        .mergeMap(([action, route]): any => {
+            const data: ConfigurationReply = action.payload;
+
             if (!data.success) {
                 return [new ShowNotificationAction({
                     type: NotificationType.Error,
@@ -128,12 +130,16 @@ export class UserConfigEffects {
             }
 
             const result = [];
-            let newPageDestination = ['/'];
+            let newPageDestination: Array<string>;
 
             try {
                 const userConfig = getUserConfigFromDeviceResponse(data.userConfiguration);
                 result.push(new LoadUserConfigSuccessAction(userConfig));
 
+                if (route.state && !route.state.url.startsWith('/device/firmware')) {
+                    newPageDestination = ['/'];
+                }
+
             } catch (err) {
                 this.logService.error('Eeprom user-config parse error:', err);
                 const userConfig = new UserConfiguration().fromJsonObject(data.backupConfiguration);
@@ -158,7 +164,9 @@ export class UserConfigEffects {
 
             result.push(new HardwareModulesLoadedAction(data.modules));
 
-            this.router.navigate(newPageDestination);
+            if (newPageDestination) {
+                this.router.navigate(newPageDestination);
+            }
 
             return result;
         });

packages/uhk-web/src/app/store/index.ts

@@ -1,6 +1,6 @@
 import { createSelector } from 'reselect';
-import { MetaReducer } from '@ngrx/store';
+import { ActionReducerMap, MetaReducer } from '@ngrx/store';
-import { RouterReducerState } from '@ngrx/router-store';
+import { RouterReducerState, routerReducer } from '@ngrx/router-store';
 import { storeFreeze } from 'ngrx-store-freeze';
 import { Keymap, UserConfiguration } from 'uhk-common';
 
@@ -14,15 +14,6 @@ import { initProgressButtonState } from './reducers/progress-button-state';
 import { environment } from '../../environments/environment';
 import { RouterStateUrl } from './router-util';
 
-export const reducers = {
-    userConfiguration: fromUserConfig.reducer,
-    presetKeymaps: fromPreset.reducer,
-    autoUpdateSettings: autoUpdateSettings.reducer,
-    app: fromApp.reducer,
-    appUpdate: fromAppUpdate.reducer,
-    device: fromDevice.reducer
-};
-
 // State interface for the application
 export interface AppState {
     userConfiguration: UserConfiguration;
@@ -34,6 +25,16 @@ export interface AppState {
     device: fromDevice.State;
 }
 
+export const reducers: ActionReducerMap<AppState> = {
+    userConfiguration: fromUserConfig.reducer,
+    presetKeymaps: fromPreset.reducer,
+    autoUpdateSettings: autoUpdateSettings.reducer,
+    app: fromApp.reducer,
+    router: routerReducer,
+    appUpdate: fromAppUpdate.reducer,
+    device: fromDevice.reducer
+};
+
 export const metaReducers: MetaReducer<AppState>[] = environment.production
     ? []
     : [storeFreeze];
@@ -73,12 +74,12 @@ export const saveToKeyboardState = createSelector(runningInElectron, saveToKeybo
 });
 export const updatingFirmware = createSelector(deviceState, fromDevice.updatingFirmware);
 export const xtermLog = createSelector(deviceState, fromDevice.xtermLog);
-export const firmwareOkButtonDisabled = createSelector(deviceState, fromDevice.firmwareOkButtonDisabled);
 // tslint:disable-next-line: max-line-length
 export const flashFirmwareButtonDisbabled = createSelector(runningInElectron, deviceState, (electron, state: fromDevice.State) => !electron || state.updatingFirmware);
 export const getHardwareModules = createSelector(deviceState, fromDevice.getHardwareModules);
 export const getBackupUserConfigurationState = createSelector(deviceState, fromDevice.getBackupUserConfigurationState);
 export const getRestoreUserConfiguration = createSelector(deviceState, fromDevice.getHasBackupUserConfiguration);
+export const bootloaderActive = createSelector(deviceState, fromDevice.bootloaderActive);
 
 export const getSideMenuPageState = createSelector(
     showAddonMenu,
@@ -102,3 +103,5 @@ export const getSideMenuPageState = createSelector(
         };
     }
 );
+
+export const getRouterState = (state: AppState) => state.router;

packages/uhk-web/src/app/store/reducers/device.ts

@@ -7,7 +7,8 @@ import {
     HardwareModulesLoadedAction,
     SaveConfigurationAction,
     HasBackupUserConfigurationAction,
-    UpdateFirmwareFailedAction
+    UpdateFirmwareFailedAction,
+    UpdateFirmwareSuccessAction
 } from '../actions/device';
 import { ActionTypes as AppActions, ElectronMainLogReceivedAction } from '../actions/app';
 import { initProgressButtonState, ProgressButtonState } from './progress-button-state';
@@ -17,7 +18,9 @@ import { RestoreConfigurationState } from '../../models/restore-configuration-st
 export interface State {
     connected: boolean;
     hasPermission: boolean;
+    bootloaderActive: boolean;
     saveToKeyboard: ProgressButtonState;
+    savingToKeyboard: boolean;
     updatingFirmware: boolean;
     firmwareUpdateFinished: boolean;
     modules: HardwareModules;
@@ -29,7 +32,9 @@ export interface State {
 export const initialState: State = {
     connected: true,
     hasPermission: true,
+    bootloaderActive: false,
     saveToKeyboard: initProgressButtonState,
+    savingToKeyboard: false,
     updatingFirmware: false,
     firmwareUpdateFinished: false,
     modules: {
@@ -46,14 +51,15 @@ export const initialState: State = {
     hasBackupUserConfiguration: false
 };
 
-export function reducer(state = initialState, action: Action) {
+export function reducer(state = initialState, action: Action): State {
     switch (action.type) {
         case ActionTypes.CONNECTION_STATE_CHANGED: {
             const data = (<ConnectionStateChangedAction>action).payload;
             return {
                 ...state,
                 connected: data.connected,
-                hasPermission: data.hasPermission
+                hasPermission: data.hasPermission,
+                bootloaderActive: data.bootloaderActive
             };
         }
 
@@ -129,12 +135,14 @@ export function reducer(state = initialState, action: Action) {
             return {
                 ...state,
                 updatingFirmware: false,
-                firmwareUpdateFinished: true
+                firmwareUpdateFinished: true,
+                modules: (action as UpdateFirmwareSuccessAction).payload
             };
 
         case ActionTypes.UPDATE_FIRMWARE_FAILED: {
+            const data = (action as UpdateFirmwareFailedAction).payload;
             const logEntry = {
-                message: (action as UpdateFirmwareFailedAction).payload.message,
+                message: data.error.message,
                 cssClass: XtermCssClass.error
             };
 
@@ -142,6 +150,7 @@ export function reducer(state = initialState, action: Action) {
                 ...state,
                 updatingFirmware: false,
                 firmwareUpdateFinished: true,
+                modules: data.modules,
                 log: [...state.log, logEntry]
             };
         }
@@ -193,6 +202,13 @@ export function reducer(state = initialState, action: Action) {
                 hasBackupUserConfiguration: false
             };
 
+        case ActionTypes.RECOVERY_DEVICE: {
+            return {
+                ...state,
+                updatingFirmware: true,
+                log: [{message: '', cssClass: XtermCssClass.standard}]
+            };
+        }
         default:
             return state;
     }
@@ -203,7 +219,6 @@ export const isDeviceConnected = (state: State) => state.connected || state.upda
 export const hasDevicePermission = (state: State) => state.hasPermission;
 export const getSaveToKeyboardState = (state: State) => state.saveToKeyboard;
 export const xtermLog = (state: State) => state.log;
-export const firmwareOkButtonDisabled = (state: State) => !state.firmwareUpdateFinished;
 export const getHardwareModules = (state: State) => state.modules;
 export const getHasBackupUserConfiguration = (state: State) => state.hasBackupUserConfiguration;
 export const getBackupUserConfigurationState = (state: State): RestoreConfigurationState => {
@@ -212,3 +227,4 @@ export const getBackupUserConfigurationState = (state: State): RestoreConfigurat
         hasBackupUserConfiguration: state.hasBackupUserConfiguration
     };
 };
+export const bootloaderActive = (state: State) => state.bootloaderActive;

packages/uhk-web/src/app/store/reducers/progress-button-state.ts

@@ -3,7 +3,7 @@ import { Action } from '@ngrx/store';
 export interface ProgressButtonState {
     showButton: boolean;
     text: string;
-    showProgress: boolean;
+    showProgress?: boolean;
     action?: Action;
 }
 

packages/uhk-web/src/styles.scss

@@ -4,6 +4,7 @@
 @import '~font-awesome/scss/font-awesome';
 @import './styles/tooltip';
 @import './styles/uhk-icons/uhk-icon';
+@import './styles/side-menu';
 
 html, body {
     width: 100%;
@@ -155,3 +156,25 @@ pre {
         }
     }
 }
+
+.flex-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.flex-grow {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    flex: 1;
+}
+
+.flex-footer {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+.ok-button {
+    min-width: 100px;
+}

packages/uhk-web/src/styles/_side-menu.scss

@@ -0,0 +1,22 @@
+.side-menu-pane-title {
+    margin-bottom: 1em;
+
+    &__name {
+        border: none;
+        border-bottom: 2px dotted #999;
+        padding: 0;
+        margin: 0 0.25rem;
+        text-overflow: ellipsis;
+        background-color: transparent;
+
+        &:focus {
+            box-shadow: 0 0 0 1px #ccc, 0 0 5px 0 #ccc;
+            border-color: transparent;
+            background-color: transparent;
+        }
+
+        &:disabled {
+            border-bottom: none;
+        }
+    }
+}

packages/usb/erase-hardware-config.js

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+const uhk = require('./uhk');
+
+const device = uhk.getUhkDevice();
+uhk.eraseHca(device)
+    .catch((err)=>{
+        console.error(err);
+    });

packages/usb/erase-user-config.js

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const uhk = require('./uhk');
+
+(async function() {
+    const device = uhk.getUhkDevice();
+    const buffer = new Buffer(Array(2**15-64).fill(0xff));
+    await uhk.writeConfig(device, buffer, false);
+    await uhk.launchEepromTransfer(device, uhk.eepromOperations.write, uhk.configBufferIds.stagingUserConfig);
+})();

packages/usb/get-right-firmware-version.js

@@ -11,4 +11,24 @@ const firmwareMajorVersion = uhk.getUint16(response, 1);
 const firmwareMinorVersion = uhk.getUint16(response, 3);
 const firmwarePatchVersion = uhk.getUint16(response, 5);
 
+const deviceProtocolMajorVersion = uhk.getUint16(response, 7);
+const deviceProtocolMinorVersion = uhk.getUint16(response, 9);
+const deviceProtocolPatchVersion = uhk.getUint16(response, 11);
+
+const moduleProtocolMajorVersion = uhk.getUint16(response, 13);
+const moduleProtocolMinorVersion = uhk.getUint16(response, 15);
+const moduleProtocolPatchVersion = uhk.getUint16(response, 17);
+
+const userConfigMajorVersion = uhk.getUint16(response, 19);
+const userConfigMinorVersion = uhk.getUint16(response, 21);
+const userConfigPatchVersion = uhk.getUint16(response, 23);
+
+const hardwareConfigMajorVersion = uhk.getUint16(response, 25);
+const hardwareConfigMinorVersion = uhk.getUint16(response, 27);
+const hardwareConfigPatchVersion = uhk.getUint16(response, 29);
+
 console.log(`firmwareVersion: ${firmwareMajorVersion}.${firmwareMinorVersion}.${firmwarePatchVersion}`);
+console.log(`deviceProtocolVersion: ${deviceProtocolMajorVersion}.${deviceProtocolMinorVersion}.${deviceProtocolPatchVersion}`);
+console.log(`moduleProtocolVersion: ${moduleProtocolMajorVersion}.${moduleProtocolMinorVersion}.${moduleProtocolPatchVersion}`);
+console.log(`userConfigVersion: ${userConfigMajorVersion}.${userConfigMinorVersion}.${userConfigPatchVersion}`);
+console.log(`hardwareConfigVersion: ${hardwareConfigMajorVersion}.${hardwareConfigMinorVersion}.${hardwareConfigPatchVersion}`);

packages/usb/reenumerate.js

@@ -2,9 +2,12 @@
 const uhk = require('./uhk');
 const program = require('commander');
 
-program.parse(process.argv);
+program
+    .option('-t, --timeout <ms>', 'Bootloader timeout in ms', 5000)
+    .parse(process.argv);
+
 const enumerationMode = program.args[0];
 
 (async function() {
-    await uhk.reenumerate(enumerationMode);
+    await uhk.reenumerate(enumerationMode, program.timeout);
 })();

packages/usb/uhk.js

@@ -1,7 +1,5 @@
-const util = require('util');
 const HID = require('node-hid');
 const {HardwareConfiguration, UhkBuffer} = require('uhk-common');
-const {getTransferBuffers, ConfigBufferId, UhkHidDevice, UsbCommand} = require('uhk-usb');
 const Logger = require('./logger');
 const debug = process.env.DEBUG;
 
@@ -18,7 +16,7 @@ const kbootCommandIdToName = {
 const eepromOperationIdToName = {
     0: 'read',
     1: 'write',
-}
+};
 
 function bufferToString(buffer) {
     let str = '';
@@ -71,7 +69,10 @@ function writeDevice(device, data, options={}) {
 function getUhkDevice() {
     const foundDevice = HID.devices().find(device =>
         device.vendorId === 0x1d50 && device.productId === 0x6122 &&
-        ((device.usagePage === 128 && device.usage === 129) || device.interface === 0));
+        // hidapi can not read the interface number on Mac, so check the usage page and usage
+        ((device.usagePage === 128 && device.usage === 129) || // Old firmware
+        (device.usagePage === (0xFF00 | 0x00) && device.usage === 0x01) || // New firmware
+        device.interface === 0));
 
     if (!foundDevice) {
         return null;
@@ -188,8 +189,7 @@ async function updateDeviceFirmware(firmwareImage, extension) {
 
 // USB commands
 
-function reenumerate(enumerationMode) {
+function reenumerate(enumerationMode, bootloaderTimeoutMs=5000) {
-    const bootloaderTimeoutMs = 5000;
     const pollingIntervalMs = 100;
     let pollingTimeoutMs = 10000;
 
@@ -393,6 +393,12 @@ async function writeHca(device, isIso) {
     await uhk.launchEepromTransfer(device, uhk.eepromOperations.write, configBufferIds.hardwareConfig);
 }
 
+async function eraseHca(device) {
+    const buffer = new Buffer(Array(64).fill(0xff));
+    await uhk.writeConfig(device, buffer, true);
+    await uhk.launchEepromTransfer(device, uhk.eepromOperations.write, configBufferIds.hardwareConfig);
+}
+
 async function getModuleProperty(device, slotId, moduleProperty) {
     await writeDevice(device, [uhk.usbCommands.getModuleProperty, slotId, moduleProperty]);
 }
@@ -423,6 +429,7 @@ uhk = exports = module.exports = moduleExports = {
     launchEepromTransfer,
     writeUca,
     writeHca,
+    eraseHca,
     getModuleProperty,
     usbCommands: {
         getDeviceProperty       : 0x00,

packages/usb/write-config.js

@@ -1,26 +0,0 @@
-#!/usr/bin/env node
-const program = require('commander');
-const fs = require('fs');
-const uhk = require('./uhk');
-
-(async function() {
-    const device = uhk.getUhkDevice();
-    require('shelljs/global');
-
-    program
-        .usage(`config.bin`)
-        .option('-h, --hardware-config', 'Write the hardware config instead of the user config')
-        .parse(process.argv);
-
-    if (program.args.length == 0) {
-        console.error('No binary config file specified.');
-        exit(1);
-    }
-
-    const configBin = program.args[0];
-    const isHardwareConfig = program.hardwareConfig;
-    const configTypeString = isHardwareConfig ? 'hardware' : 'user';
-    const configBuffer = fs.readFileSync(configBin);
-
-    await uhk.writeUserConfig(device, configBuffer, isHardwareConfig);
-})();

packages/usb/write-hardware-config.js

@@ -2,7 +2,7 @@
 const uhk = require('./uhk');
 
 if (process.argv.length < 2) {
-    console.log(`use: write-hca {iso|ansi}`);
+    console.log(`use: write-hardware-config {iso|ansi}`);
     process.exit(1);
 }
 
@@ -12,7 +12,8 @@ if (layout !== 'iso' && layout !== 'ansi') {
     process.exit(1);
 }
 
-uhk.writeHca(layout === 'iso')
+const device = uhk.getUhkDevice();
+uhk.writeHca(device, layout === 'iso')
     .catch((err)=>{
         console.error(err);
     });

packages/usb/write-user-config.js

@@ -17,5 +17,6 @@ const uhk = require('./uhk');
     const device = uhk.getUhkDevice();
     const configBuffer = fs.readFileSync(configPath);
     await uhk.writeConfig(device, configBuffer, false);
-    await uhk.launchEepromTransfer(device, uhk.eepromOperations.write, uhk.configBufferIds.stagingUserConfig);
+    await uhk.applyConfig(device);
+    await uhk.launchEepromTransfer(device, uhk.eepromOperations.write, uhk.configBufferIds.validatedUserConfig);
 })();