Bump Agent version to 1.2.6 and firmware version to 8.4.0. Update changelog.

* fix: popover components use OnPush change detection

* fix: select2 selection bug

* chore: upgrade @ert78gb/ngx-select-ex => 3.7.0

CHANGELOG.md

@@ -6,12 +6,64 @@ 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.6] - 2018-07-26
+
+Firmware: 8.**4.0** [[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.4.0)] | Device Protocol: 4.**4.0** | User Config: 4.0.1 | Hardware Config: 1.0.0
+
+- Replace the Linux blhost binary with a statically compiled version that doesn't use special instructions and shouldn't segfault.
+- Keep the current layer when changing keymaps.
+- Fix the sleep key of Mac keymaps.
+- Add help page.
+- Add "save to keyboard" and "remap key" shortcuts.
+- Build only AppImages for Linux.
+- Replace ng2-select2 widgets with ngx-select-ex that always shows up in the correct position.
+- Improve the phrasing of the firmware update error message.
+- Tweak unsupported Windows firmware update notification.
+- Hide the Settings menu until auto update is implemented.
+- Don't scroll when the macro tab of the key action popover gets selected.
+- Add keyboard shortcut for enabling the USB stack test mode of the firmware. `DEVICEPROTOCOL:MINOR`
+- Tone down the color of the separator line.
+
+## [1.2.5] - 2018-06-26
+
+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
+
+- When remapping a switch keymap action on all keymaps, don't set it on its own keymap.
+- Make the key action popover always contain the action of the current key, even after cancelled.
+- Include the firmware version to be updated to the firmware update log.
+- Update the Agent icon of the side menu and the about page.
+- When remapping a key, only flash the affected key instead of all keys.
+- Fade in/out the keyboard separator line only when splitting the keyboard.
+- Only show the unsupported OS message of the firmware page on relevant Windows versions.
+- Close and reopen USB device when an error occurs.
+- Temporarily remove the export keymap feature because it's useless until import is implemented.
+
+## [1.2.4] - 2018-06-21
+
+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
+
+- Replace Linux x86-64 blhost with a statically linked version which should make firmware updates work on every Linux distro.
+
+## [1.2.3] - 2018-06-19
+
+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
+
+- Add checkboxes for remapping keys on all layers and/or all keymaps.
+- Add separator line between the keyboard halves.
+- Add double tap icon for switch layer actions.
+- Improve the looks and content of the tooltips of the key action popover.
+- Make the left keyboard half less likely to timeout during firmware update.
+- Terminate the firmware update process if blhost segfaults.
+- Replace the Linux x86-64 version of the blhost binary which should not make it segfault anymore.
+- Make the firmware update log shorter by listing one device per line and not repeating the list of available USB devices.
+- Make the firmware update help text shorter.
+
 ## [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
+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.
+- Detect when the hardware configuration of a device is invalid and display a notification. `DEVICEPROTOCOL:PATCH`
 - 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.

package.json

@@ -3,9 +3,9 @@
   "private": true,
   "author": "Ultimate Gadget Laboratories",
   "main": "electron/dist/electron-main.js",
-  "version": "1.2.2",
-  "firmwareVersion": "8.2.5",
-  "deviceProtocolVersion": "4.3.1",
+  "version": "1.2.6",
+  "firmwareVersion": "8.4.0",
+  "deviceProtocolVersion": "4.4.0",
   "userConfigVersion": "4.0.1",
   "hardwareConfigVersion": "1.0.0",
   "description": "Agent is the configuration application of the Ultimate Hacking Keyboard.",
@@ -25,6 +25,7 @@
     "@types/jasmine": "2.6.0",
     "@types/jquery": "3.3.1",
     "@types/jsonfile": "4.0.1",
+    "@types/lodash-es": "4.17.0",
     "@types/node": "8.0.53",
     "@types/node-hid": "0.5.2",
     "@types/request": "2.0.8",
@@ -37,14 +38,14 @@
     "core-js": "2.4.1",
     "cross-env": "5.0.5",
     "decompress": "4.2.0",
-    "decompress-tarbz2": "^4.1.1",
+    "decompress-tarbz2": "4.1.1",
     "devtron": "1.4.0",
     "electron": "1.8.4",
-    "electron-builder": "20.8.1",
+    "electron-builder": "20.15.0",
     "electron-debug": "1.5.0",
     "electron-devtools-installer": "2.2.3",
-    "electron-log": "2.2.14",
-    "electron-rebuild": "1.7.3",
+    "electron-log": "2.2.16",
+    "electron-rebuild": "1.8.1",
     "electron-settings": "3.1.4",
     "electron-updater": "2.21.4",
     "exports-loader": "0.6.3",
@@ -53,6 +54,7 @@
     "gh-pages": "1.1.0",
     "jsonfile": "4.0.0",
     "lerna": "2.9.0",
+    "lodash-es": "4.17.4",
     "mkdirp": "0.5.1",
     "node-hid": "0.5.7",
     "npm-run-all": "4.0.2",

packages/uhk-agent/src/electron-main.ts

@@ -21,7 +21,9 @@ import * as isDev from 'electron-is-dev';
 
 const optionDefinitions = [
     {name: 'addons', type: Boolean},
-    {name: 'spe', type: Boolean} // simulate privilege escalation error
+    {name: 'spe', type: Boolean}, // simulate privilege escalation error
+    // show 'Lock layer when double tapping this key' checkbox on 'Layer' tab of the config popover
+    {name: 'layer-double-tap', type: Boolean}
 ];
 
 const options: CommandLineArgs = commandLineArgs(optionDefinitions);
@@ -104,7 +106,7 @@ function createWindow() {
     uhkHidDeviceService = new UhkHidDevice(logger, options);
     uhkBlhost = new UhkBlhost(logger, packagesDir);
     uhkOperations = new UhkOperations(logger, uhkBlhost, uhkHidDeviceService, packagesDir);
-    deviceService = new DeviceService(logger, win, uhkHidDeviceService, uhkOperations);
+    deviceService = new DeviceService(logger, win, uhkHidDeviceService, uhkOperations, packagesDir);
     appUpdateService = new AppUpdateService(logger, win, app);
     appService = new AppService(logger, win, deviceService, options, uhkHidDeviceService);
     sudoService = new SudoService(logger, options);

packages/uhk-agent/src/models/tmp-firmware.ts

@@ -3,5 +3,6 @@ import { SynchrounousResult } from 'tmp';
 export interface TmpFirmware {
     rightFirmwarePath: string;
     leftFirmwarePath: string;
+    packageJsonPath: string;
     tmpDirectory: SynchrounousResult;
 }

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

@@ -1,5 +1,6 @@
-import { BrowserWindow, ipcMain, shell } from 'electron';
+import { ipcMain, shell } from 'electron';
 import { UhkHidDevice } from 'uhk-usb';
+import * as os from 'os';
 
 import { AppStartInfo, IpcEvents, LogService } from 'uhk-common';
 import { MainServiceBase } from './main-service-base';
@@ -25,11 +26,14 @@ export class AppService extends MainServiceBase {
         const deviceConnectionState = this.uhkHidDeviceService.getDeviceConnectionState();
         const response: AppStartInfo = {
             commandLineArgs: {
-                addons: this.options.addons || false
+                addons: this.options.addons || false,
+                layerDoubleTap: this.options['layer-double-tap'] || false
             },
             deviceConnected: deviceConnectionState.connected,
             hasPermission: deviceConnectionState.hasPermission,
-            bootloaderActive: deviceConnectionState.bootloaderActive
+            bootloaderActive: deviceConnectionState.bootloaderActive,
+            platform: process.platform as string,
+            osVersion: os.release()
         };
         this.logService.info('[AppService] getAppStartInfo response:', response);
         return event.sender.send(IpcEvents.app.getAppStartInfoReply, response);

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

@@ -15,6 +15,7 @@ import { deviceConnectionStateComparer, snooze, UhkHidDevice, UhkOperations } fr
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 import { emptyDir } from 'fs-extra';
+import * as path from 'path';
 
 import 'rxjs/add/observable/interval';
 import 'rxjs/add/operator/startWith';
@@ -22,10 +23,14 @@ import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/distinctUntilChanged';
 
-import { saveTmpFirmware } from '../util/save-extract-firmware';
 import { TmpFirmware } from '../models/tmp-firmware';
 import { QueueManager } from './queue-manager';
-import { backupUserConfiguration, getBackupUserConfigurationContent } from '../util/backup-user-confoguration';
+import {
+    backupUserConfiguration,
+    getBackupUserConfigurationContent,
+    getPackageJsonFromPathAsync,
+    saveTmpFirmware
+} from '../util';
 
 /**
  * IpcMain pair of the UHK Communication
@@ -40,7 +45,8 @@ export class DeviceService {
     constructor(private logService: LogService,
                 private win: Electron.BrowserWindow,
                 private device: UhkHidDevice,
-                private operations: UhkOperations) {
+                private operations: UhkOperations,
+                private rootDir: string) {
         this.pollUhkDevice();
 
         ipcMain.on(IpcEvents.device.saveUserConfiguration, (...args: any[]) => {
@@ -81,6 +87,15 @@ export class DeviceService {
             });
         });
 
+        ipcMain.on(IpcEvents.device.enableUsbStackTest, (...args: any[]) => {
+            this.queueManager.add({
+                method: this.enableUsbStackTest,
+                bind: this,
+                params: args,
+                asynchronous: true
+            });
+        });
+
         logService.debug('[DeviceService] init success');
     }
 
@@ -146,15 +161,27 @@ export class DeviceService {
         let firmwarePathData: TmpFirmware;
 
         try {
+            const hardwareModules = await this.getHardwareModules(false);
+            this.logService.debug('Device right firmware version:', hardwareModules.rightModuleInfo.firmwareVersion);
+            this.logService.debug('Device left firmware version:', hardwareModules.leftModuleInfo.firmwareVersion);
+
             this.device.resetDeviceCache();
             this.stopPollTimer();
 
             if (args && args.length > 0) {
                 firmwarePathData = await saveTmpFirmware(args[0]);
+
+                const packageJson = await getPackageJsonFromPathAsync(firmwarePathData.packageJsonPath);
+                this.logService.debug('New firmware version:', packageJson.firmwareVersion);
+
                 await this.operations.updateRightFirmware(firmwarePathData.rightFirmwarePath);
                 await this.operations.updateLeftModule(firmwarePathData.leftFirmwarePath);
             }
             else {
+                const packageJsonPath = path.join(this.rootDir, 'packages/firmware/package.json');
+                const packageJson = await getPackageJsonFromPathAsync(packageJsonPath);
+                this.logService.debug('New firmware version:', packageJson.firmwareVersion);
+
                 await this.operations.updateRightFirmware();
                 await this.operations.updateLeftModule();
             }
@@ -206,6 +233,10 @@ export class DeviceService {
         event.sender.send(IpcEvents.device.updateFirmwareReply, response);
     }
 
+    public async enableUsbStackTest(event: Electron.Event) {
+        await this.device.enableUsbStackTest();
+    }
+
     /**
      * HID API not support device attached and detached event.
      * This method check the keyboard is attached to the computer or not.

packages/uhk-agent/src/util/get-package-json-from-path-async.ts

@@ -0,0 +1,13 @@
+import * as fs from 'fs';
+
+export const getPackageJsonFromPathAsync = async (filePath: string): Promise<any> => {
+    return new Promise((resolve, reject) => {
+        fs.readFile(filePath, {encoding: 'utf-8'}, (err, data) => {
+            if (err) {
+                return reject(err);
+            }
+
+            resolve(JSON.parse(data));
+        });
+    });
+};

packages/uhk-agent/src/util/index.ts

@@ -0,0 +1,3 @@
+export * from './backup-user-confoguration';
+export * from './get-package-json-from-path-async';
+export * from './save-extract-firmware';

packages/uhk-agent/src/util/save-extract-firmware.ts

@@ -16,8 +16,8 @@ export async function saveTmpFirmware(data: string): Promise<TmpFirmware> {
     return {
         tmpDirectory,
         rightFirmwarePath: path.join(tmpDirectory.name, 'devices/uhk60-right/firmware.hex'),
-        leftFirmwarePath: path.join(tmpDirectory.name, 'modules/uhk60-left.bin')
-
+        leftFirmwarePath: path.join(tmpDirectory.name, 'modules/uhk60-left.bin'),
+        packageJsonPath: path.join(tmpDirectory.name, 'package.json')
     };
 }
 

packages/uhk-common/src/config-serializer/config-items/key-action/switch-layer-action.spec.ts

@@ -1,17 +1,18 @@
 import { binaryDefaultHelper, jsonDefaultHelper } from '../../../../test/serializer-test-helper';
-import { SwitchLayerAction } from './switch-layer-action';
+import { SwitchLayerAction, SwitchLayerMode } from './switch-layer-action';
+import { keyActionType } from './key-action';
 
 // TODO: Add null, undefined, empty object, empty buffer test cases
 describe('switch-layer-action', () => {
-    const action = new SwitchLayerAction(<SwitchLayerAction>{layer: 0, isLayerToggleable: false});
+    const action = new SwitchLayerAction(<SwitchLayerAction>{layer: 0, switchLayerMode: SwitchLayerMode.hold});
 
     it('should be instantiate', () => {
         expect(new SwitchLayerAction()).toBeTruthy();
     });
 
     describe('toString', () => {
-        it('should return <SwitchLayerAction layer="0" toggle="false">', () => {
-            expect(action.toString()).toEqual('<SwitchLayerAction layer="0" toggle="false">');
+        it('should return <SwitchLayerAction layer="0" switchLayerMode="hold">', () => {
+            expect(action.toString()).toEqual('<SwitchLayerAction layer="0" switchLayerMode="hold">');
         });
     });
 
@@ -30,4 +31,20 @@ describe('switch-layer-action', () => {
             binaryDefaultHelper(action);
         });
     });
+
+    describe('backward compatibility of the "toggle" property ', () => {
+        it('should map toggle=false to SwitchLayerMode.holdAndDoubleTapToggle', () => {
+            const oldAction = new SwitchLayerAction();
+            oldAction.fromJsonObject({keyActionType: keyActionType.SwitchLayerAction, layer: 0, toggle: false});
+
+            expect(oldAction.switchLayerMode).toEqual(SwitchLayerMode.holdAndDoubleTapToggle);
+        });
+
+        it('should map toggle=true to SwitchLayerMode.toggle', () => {
+            const oldAction = new SwitchLayerAction();
+            oldAction.fromJsonObject({keyActionType: keyActionType.SwitchLayerAction, layer: 0, toggle: true});
+
+            expect(oldAction.switchLayerMode).toEqual(SwitchLayerMode.toggle);
+        });
+    });
 });

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

@@ -8,9 +8,48 @@ export enum LayerName {
     mouse
 }
 
+export enum SwitchLayerMode {
+    holdAndDoubleTapToggle = 'holdAndDoubleTapToggle',
+    toggle = 'toggle',
+    hold = 'hold'
+}
+
+export const mapSwitchLayerModeToNumber = (switchLayerMode: SwitchLayerMode): number => {
+    switch (switchLayerMode) {
+        case SwitchLayerMode.holdAndDoubleTapToggle:
+            return 0;
+
+        case SwitchLayerMode.toggle:
+            return 1;
+
+        case SwitchLayerMode.hold:
+            return 2;
+
+        default:
+            throw new Error(`Can not map ${switchLayerMode} to number`);
+    }
+};
+
+export const mapNumberToSwitchLayerMode = (value: number): SwitchLayerMode => {
+    switch (value) {
+        case 0:
+            return SwitchLayerMode.holdAndDoubleTapToggle;
+
+        case 1:
+            return SwitchLayerMode.toggle;
+
+        case 2:
+            return SwitchLayerMode.hold;
+
+        default:
+            throw new Error(`Can not map "${value}" to SwitchLayerMode`);
+    }
+};
+
 export class SwitchLayerAction extends KeyAction {
 
-    isLayerToggleable: boolean;
+    @assertEnum(SwitchLayerMode)
+    switchLayerMode: SwitchLayerMode;
 
     @assertEnum(LayerName)
     layer: LayerName;
@@ -20,21 +59,29 @@ export class SwitchLayerAction extends KeyAction {
         if (!other) {
             return;
         }
-        this.isLayerToggleable = other.isLayerToggleable;
+        this.switchLayerMode = other.switchLayerMode;
         this.layer = other.layer;
     }
 
     fromJsonObject(jsonObject: any): SwitchLayerAction {
         this.assertKeyActionType(jsonObject);
         this.layer = LayerName[<string>jsonObject.layer];
-        this.isLayerToggleable = jsonObject.toggle;
+
+        // Backward compatibility when "switchLayerMode" was a boolean type as "toggle"
+        if (typeof jsonObject.toggle === 'boolean') {
+            this.switchLayerMode = jsonObject.toggle ? SwitchLayerMode.toggle : SwitchLayerMode.holdAndDoubleTapToggle;
+        }
+        else {
+            this.switchLayerMode = jsonObject.switchLayerMode;
+        }
+
         return this;
     }
 
     fromBinary(buffer: UhkBuffer): SwitchLayerAction {
         this.readAndAssertKeyActionId(buffer);
         this.layer = buffer.readUInt8();
-        this.isLayerToggleable = buffer.readBoolean();
+        this.switchLayerMode = mapNumberToSwitchLayerMode(buffer.readUInt8());
         return this;
     }
 
@@ -42,18 +89,18 @@ export class SwitchLayerAction extends KeyAction {
         return {
             keyActionType: keyActionType.SwitchLayerAction,
             layer: LayerName[this.layer],
-            toggle: this.isLayerToggleable
+            switchLayerMode: this.switchLayerMode
         };
     }
 
     toBinary(buffer: UhkBuffer) {
         buffer.writeUInt8(KeyActionId.SwitchLayerAction);
         buffer.writeUInt8(this.layer);
-        buffer.writeBoolean(this.isLayerToggleable);
+        buffer.writeUInt8(mapSwitchLayerModeToNumber(this.switchLayerMode));
     }
 
     toString(): string {
-        return `<SwitchLayerAction layer="${this.layer}" toggle="${this.isLayerToggleable}">`;
+        return `<SwitchLayerAction layer="${this.layer}" switchLayerMode="${this.switchLayerMode}">`;
     }
 
     public getName(): string {

packages/uhk-common/src/config-serializer/config-items/keymap.ts

@@ -127,7 +127,7 @@ export class Keymap {
                         if (currentLayerId - 1 === baseKeyAction.layer) {
                             if (currentKeyAction instanceof SwitchLayerAction) {
                                 if (currentKeyAction.layer === baseKeyAction.layer &&
-                                    currentKeyAction.isLayerToggleable === baseKeyAction.isLayerToggleable) {
+                                    currentKeyAction.switchLayerMode === baseKeyAction.switchLayerMode) {
                                     continue;
                                 }
                                 // tslint:disable-next-line: max-line-length

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

@@ -109,7 +109,7 @@ describe('keymap', () => {
                                     {
                                         keyActionType: 'switchLayer',
                                         layer: 'mod',
-                                        toggle: false
+                                        switchLayerMode: 'holdAndDoubleTapToggle'
                                     }
                                 ]
                             }]
@@ -121,7 +121,7 @@ describe('keymap', () => {
                                     {
                                         keyActionType: 'switchLayer',
                                         layer: 'mod',
-                                        toggle: false
+                                        switchLayerMode: 'holdAndDoubleTapToggle'
                                     }
                                 ]
                             }]
@@ -151,7 +151,7 @@ describe('keymap', () => {
 
         expect(inputUserConfig.toJsonObject()).toEqual(expectedJsonConfig);
         // tslint:disable-next-line: max-line-length
-        expect(console.warn).toHaveBeenCalledWith('QWERTY.layers[1]modules[0].keyActions[0] is not switch layer. <KeystrokeAction type="basic" scancode="44"> will be override with <SwitchLayerAction layer="0" toggle="false">');
+        expect(console.warn).toHaveBeenCalledWith('QWERTY.layers[1]modules[0].keyActions[0] is not switch layer. <KeystrokeAction type="basic" scancode="44"> will be override with <SwitchLayerAction layer="0" switchLayerMode="holdAndDoubleTapToggle">');
     });
 
     it('should normalize SwitchLayerAction if non base layer action is other SwitchLayerAction', () => {
@@ -262,7 +262,7 @@ describe('keymap', () => {
                                     {
                                         keyActionType: 'switchLayer',
                                         layer: 'mod',
-                                        toggle: false
+                                        switchLayerMode: 'holdAndDoubleTapToggle'
                                     }
                                 ]
                             }]
@@ -274,7 +274,7 @@ describe('keymap', () => {
                                     {
                                         keyActionType: 'switchLayer',
                                         layer: 'mod',
-                                        toggle: false
+                                        switchLayerMode: 'holdAndDoubleTapToggle'
                                     }
                                 ]
                             }]
@@ -304,6 +304,6 @@ describe('keymap', () => {
 
         expect(inputUserConfig.toJsonObject()).toEqual(expectedJsonConfig);
         // tslint:disable-next-line: max-line-length
-        expect(console.warn).toHaveBeenCalledWith('QWERTY.layers[1]modules[0].keyActions[0] is different switch layer. <SwitchLayerAction layer="1" toggle="false"> will be override with <SwitchLayerAction layer="0" toggle="false">');
+        expect(console.warn).toHaveBeenCalledWith('QWERTY.layers[1]modules[0].keyActions[0] is different switch layer. <SwitchLayerAction layer="1" switchLayerMode="holdAndDoubleTapToggle"> will be override with <SwitchLayerAction layer="0" switchLayerMode="holdAndDoubleTapToggle">');
     });
 });

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

@@ -5,4 +5,6 @@ export interface AppStartInfo {
     deviceConnected: boolean;
     hasPermission: boolean;
     bootloaderActive: boolean;
+    platform: string;
+    osVersion: string;
 }

packages/uhk-common/src/models/command-line-args.ts

@@ -7,4 +7,9 @@ export interface CommandLineArgs {
      * simulate privilege escalation error
      */
     spe?: boolean;
+    /**
+     * show 'Lock layer when double tapping this key' checkbox on 'Layer' tab of the config popover
+     * if it false the checkbox invisible and the value of the checkbox = true
+     */
+    layerDoubleTap?: boolean;
 }

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

@@ -1,4 +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';
+    export const FIRMWARE_GITHUB_ISSUE_URL = 'https://github.com/UltimateHackingKeyboard/agent/issues/new';
 }

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

@@ -2,6 +2,7 @@ export { IpcEvents } from './ipcEvents';
 export * from './log';
 export * from './constants';
 export * from './helpers';
+export * from './is-equal-array';
 
 // Source: http://stackoverflow.com/questions/13720256/javascript-regex-camelcase-to-sentence
 export function camelCaseToSentence(camelCasedText: string): string {

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

@@ -30,6 +30,7 @@ export class Device {
     public static readonly updateFirmwareReply = 'device-update-firmware-reply';
     public static readonly startConnectionPoller = 'device-start-connection-poller';
     public static readonly recoveryDevice = 'device-recovery';
+    public static readonly enableUsbStackTest = 'enable-usb-stack-test';
 }
 
 export class IpcEvents {

packages/uhk-common/src/util/is-equal-array.ts

@@ -0,0 +1,15 @@
+import { isEqual } from 'lodash';
+
+export const isEqualArray = (arr1: Array<any>, arr2: Array<any>): boolean => {
+    if (arr1.length !== arr2.length) {
+        return false;
+    }
+
+    for (const a of arr1) {
+        if (!arr2.some(b => isEqual(a, b))) {
+            return false;
+        }
+    }
+
+    return true;
+};

packages/uhk-usb/package-lock.json

@@ -144,11 +144,6 @@
 			"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,7 +11,6 @@
     "@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

@@ -23,7 +23,12 @@ export enum UsbCommand {
     GetDebugBuffer           = 0x0b,
     GetAdcValue              = 0x0c,
     SetLedPwmBrightness      = 0x0d,
-    GetModuleProperty        = 0x0e
+    GetModuleProperty        = 0x0e,
+    GetSlaveI2cErrors        = 0x0f,
+    SetI2cBaudRate           = 0x10,
+    SwitchKeymap             = 0x11,
+    GetVariable              = 0x12,
+    SetVariable              = 0x13
 }
 
 export enum EepromOperation {
@@ -86,3 +91,10 @@ export enum KbootCommands {
 export enum ModulePropertyId {
     protocolVersions = 0
 }
+
+export enum UsbVariables {
+    testSwitches = 0,
+    testUsbStack = 1,
+    debounceTimePress = 2,
+    debounceTimeRelease = 3
+}

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

@@ -49,7 +49,7 @@ export class UhkBlhost {
 
                 self.logService.debug(`[blhost] FINISHED: ${code}`);
 
-                if (code !== null && code !== 0) {
+                if (code !== 0) {
                     return reject(new Error(`blhost error code:${code}`));
                 }
 

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

@@ -1,6 +1,5 @@
-import { isEqual } from 'lodash';
 import { Device, devices, HID } from 'node-hid';
-import { CommandLineArgs, DeviceConnectionState, LogService } from 'uhk-common';
+import { CommandLineArgs, DeviceConnectionState, isEqualArray, LogService } from 'uhk-common';
 
 import {
     ConfigBufferId,
@@ -11,7 +10,8 @@ import {
     KbootCommands,
     ModuleSlotToI2cAddress,
     ModuleSlotToId,
-    UsbCommand
+    UsbCommand,
+    UsbVariables
 } from './constants';
 import { bufferToString, getTransferData, isUhkDevice, retry, snooze } from './util';
 
@@ -25,7 +25,7 @@ export class UhkHidDevice {
      * Internal variable that represent the USB UHK device
      * @private
      */
-    private _prevDevices = {};
+    private _prevDevices = [];
     private _device: HID;
     private _hasPermission = false;
 
@@ -110,6 +110,7 @@ export class UhkHidDevice {
             device.read((err: any, receivedData: Array<number>) => {
                 if (err) {
                     this.logService.error('[UhkHidDevice] Transfer error: ', err);
+                    this.close();
                     return reject(err);
                 }
                 const logString = bufferToString(receivedData);
@@ -133,6 +134,11 @@ export class UhkHidDevice {
         await this.waitUntilKeyboardBusy();
     }
 
+    public async enableUsbStackTest(): Promise<void> {
+        await this.write(new Buffer([UsbCommand.SetVariable, UsbVariables.testUsbStack, 1]));
+        await this.waitUntilKeyboardBusy();
+    }
+
     /**
      * Close the communication chanel with UHK Device
      */
@@ -158,7 +164,7 @@ export class UhkHidDevice {
     }
 
     public resetDeviceCache(): void {
-        this._prevDevices = {};
+        this._prevDevices = [];
     }
 
     async reenumerate(enumerationMode: EnumerationModes): Promise<void> {
@@ -252,8 +258,11 @@ export class UhkHidDevice {
     private connectToDevice(): HID {
         try {
             const devs = devices();
-            if (!isEqual(this._prevDevices, devs)) {
-                this.logService.debug('[UhkHidDevice] Available devices:', devs);
+            if (!isEqualArray(this._prevDevices, devs)) {
+                this.logService.debug('[UhkHidDevice] Available devices:');
+                for (const logDevice of devs) {
+                    this.logService.debug(JSON.stringify(logDevice));
+                }
                 this._prevDevices = devs;
             } else {
                 this.logService.debug('[UhkHidDevice] Available devices unchanged');
@@ -266,7 +275,7 @@ export class UhkHidDevice {
                 return null;
             }
             const device = new HID(dev.path);
-            this.logService.debug('[UhkHidDevice] Used device:', dev);
+            this.logService.debug('[UhkHidDevice] Used device:', JSON.stringify(dev));
             return device;
         }
         catch (err) {
@@ -288,7 +297,7 @@ function kbootCommandName(module: ModuleSlotToI2cAddress): string {
         case ModuleSlotToI2cAddress.rightAddon:
             return 'rightAddon';
 
-        default :
+        default:
             return 'Unknown';
     }
 }

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

@@ -59,8 +59,9 @@ export class UhkOperations {
 
         const leftModuleBricked = await this.waitForKbootIdle();
         if (!leftModuleBricked) {
-            this.logService.error('[UhkOperations] Couldn\'t connect to the left keyboard half.');
-            return;
+            const msg = '[UhkOperations] Couldn\'t connect to the left keyboard half.';
+            this.logService.error(msg);
+            throw new Error(msg);
         }
 
         await this.device.reenumerate(EnumerationModes.Buspal);

packages/uhk-usb/src/util.ts

@@ -77,7 +77,6 @@ export async function retry(command: Function, maxTry = 3, logService?: LogServi
         try {
             // logService.debug(`[retry] try to run FUNCTION:\n ${command}, \n retry: ${retryCount}`);
             await command();
-            await snooze(100);
             // logService.debug(`[retry] success FUNCTION:\n ${command}, \n retry: ${retryCount}`);
             return;
         } catch (err) {
@@ -93,6 +92,7 @@ export async function retry(command: Function, maxTry = 3, logService?: LogServi
                 if (logService) {
                     logService.info(`[retry] failed, but try run FUNCTION:\n ${command}, \n retry: ${retryCount}`);
                 }
+                await snooze(100);
             }
         }
     }

packages/uhk-web/.angular-cli.json

@@ -26,7 +26,6 @@
       ],
       "scripts": [
         "../node_modules/bootstrap/dist/js/bootstrap.js",
-        "../node_modules/select2/dist/js/select2.full.js",
         "../node_modules/nouislider/distribute/nouislider.js"
       ],
       "environmentSource": "environments/environment.ts",

packages/uhk-web/package-lock.json

@@ -1154,6 +1154,14 @@
 				"tslib": "1.9.0"
 			}
 		},
+		"@ert78gb/ngx-select-ex": {
+			"version": "3.7.0",
+			"resolved": "https://registry.npmjs.org/@ert78gb/ngx-select-ex/-/ngx-select-ex-3.7.0.tgz",
+			"integrity": "sha512-m3DyGB1VZrxsItgc/NjBt5ZfW1DuQrxLz82ekw/ur79DZHG89EYohKWbx68lonfu8wM+AT4IHUDVqF1gFhyK0g==",
+			"requires": {
+				"tslib": "1.9.0"
+			}
+		},
 		"@ngrx/effects": {
 			"version": "4.0.5",
 			"resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-4.0.5.tgz",
@@ -1260,19 +1268,6 @@
 			"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.2.9.tgz",
 			"integrity": "sha512-AmYGadmTv+Xh6re2CH5ruyvV3znvtJbhxyT00JQAGFP2U+xgqhf+C2xfjdP/GgK5d9YmSif/UYs2ssMl4gW6fw=="
 		},
-		"@types/lodash": {
-			"version": "4.14.106",
-			"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.106.tgz",
-			"integrity": "sha512-tOSvCVrvSqFZ4A/qrqqm6p37GZoawsZtoR0SJhlF7EonNZUgrn8FfT+RNQ11h+NUpMt6QVe36033f3qEKBwfWA=="
-		},
-		"@types/lodash-es": {
-			"version": "4.17.0",
-			"resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.0.tgz",
-			"integrity": "sha512-h8lkWQSgT4qjs9PcIhcL2nWubZeXRVzjZxYlRFmcX9BW1PIk5qRc0djtRWZqtM+GDDFhwBt0ztRu72D/YxIcEw==",
-			"requires": {
-				"@types/lodash": "4.14.106"
-			}
-		},
 		"@types/node": {
 			"version": "9.6.2",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-9.6.2.tgz",
@@ -1283,14 +1278,6 @@
 			"resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz",
 			"integrity": "sha1-vShOV8hPEyXacCur/IKlMoGQwMU="
 		},
-		"@types/select2": {
-			"version": "4.0.44",
-			"resolved": "https://registry.npmjs.org/@types/select2/-/select2-4.0.44.tgz",
-			"integrity": "sha512-aunlkCCVG3uQZns+uAvxmYlWwvv8DuVLS+rKN9Az4ENylcIvwNHDfg7oJPeGlSYSZ9vacHQ91HoRGWnhZo7jHQ==",
-			"requires": {
-				"@types/jquery": "3.2.9"
-			}
-		},
 		"@types/selenium-webdriver": {
 			"version": "2.53.43",
 			"resolved": "https://registry.npmjs.org/@types/selenium-webdriver/-/selenium-webdriver-2.53.43.tgz",
@@ -1390,11 +1377,6 @@
 				"repeat-string": "1.6.1"
 			}
 		},
-		"almond": {
-			"version": "0.3.3",
-			"resolved": "https://registry.npmjs.org/almond/-/almond-0.3.3.tgz",
-			"integrity": "sha1-oOfJWsdiTWQXtElLHmi/9pMWiiA="
-		},
 		"amdefine": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
@@ -5771,11 +5753,6 @@
 			"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.2.1.tgz",
 			"integrity": "sha1-XE2d5lKvbNCncBVKYxu6ErAVx4c="
 		},
-		"jquery-mousewheel": {
-			"version": "3.1.13",
-			"resolved": "https://registry.npmjs.org/jquery-mousewheel/-/jquery-mousewheel-3.1.13.tgz",
-			"integrity": "sha1-BvAzXxbjU6aV5yBr9QUDy1I6buU="
-		},
 		"js-base64": {
 			"version": "2.4.3",
 			"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz",
@@ -6075,11 +6052,6 @@
 			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
 			"integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
 		},
-		"lodash-es": {
-			"version": "4.17.4",
-			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.4.tgz",
-			"integrity": "sha1-3MHXVS4VCgZABzupyzHXDwMpUOc="
-		},
 		"lodash.assign": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
@@ -6527,22 +6499,6 @@
 			"resolved": "https://registry.npmjs.org/ng2-nouislider/-/ng2-nouislider-1.7.7.tgz",
 			"integrity": "sha1-uEH0sxPIycinY8gPOlnVqkw6cMg="
 		},
-		"ng2-select2": {
-			"version": "1.0.0-beta.10",
-			"resolved": "https://registry.npmjs.org/ng2-select2/-/ng2-select2-1.0.0-beta.10.tgz",
-			"integrity": "sha1-kIsLip+M0Gc287yhax41ofaWoUU=",
-			"requires": {
-				"@types/jquery": "2.0.49",
-				"@types/select2": "4.0.44"
-			},
-			"dependencies": {
-				"@types/jquery": {
-					"version": "2.0.49",
-					"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-2.0.49.tgz",
-					"integrity": "sha512-/9xLnYmohN/vD2gDnLS4cym8TUmrJu7DvZa/LELKzZjdPsvWVJiedsdu2SXNtb/DA7FGimqL2g0IoyhbNKLl8g=="
-				}
-			}
-		},
 		"ngrx-store-freeze": {
 			"version": "0.1.9",
 			"resolved": "https://registry.npmjs.org/ngrx-store-freeze/-/ngrx-store-freeze-0.1.9.tgz",
@@ -8108,15 +8064,6 @@
 			"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
 			"integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo="
 		},
-		"select2": {
-			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/select2/-/select2-4.0.3.tgz",
-			"integrity": "sha1-IHcz/pHqy5yxoT8SRjQB9HJEng8=",
-			"requires": {
-				"almond": "0.3.3",
-				"jquery-mousewheel": "3.1.13"
-			}
-		},
 		"selenium-webdriver": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-3.0.1.tgz",

packages/uhk-web/package.json

@@ -39,7 +39,6 @@
     "@types/jasmine": "2.5.53",
     "@types/jasminewd2": "2.0.2",
     "@types/jquery": "3.2.9",
-    "@types/lodash-es": "4.17.0",
     "@types/usb": "1.1.3",
     "angular-confirmation-popover": "3.2.0",
     "angular-notifier": "2.0.0",
@@ -60,18 +59,16 @@
     "karma-coverage-istanbul-reporter": "1.2.1",
     "karma-jasmine": "1.1.0",
     "karma-jasmine-html-reporter": "0.2.2",
-    "lodash-es": "4.17.4",
     "ng2-dragula": "1.5.0",
     "ng2-nouislider": "^1.7.7",
-    "ng2-select2": "1.0.0-beta.10",
     "ngx-clipboard": "10.0.0",
+    "@ert78gb/ngx-select-ex": "3.7.0",
     "ngrx-store-freeze": "0.1.9",
     "nouislider": "^11.1.0",
     "postcss-url": "^7.1.2",
     "protractor": "5.1.2",
     "reselect": "3.0.1",
     "rxjs": "5.5.8",
-    "select2": "4.0.3",
     "typescript": "2.6.2",
     "uhk-common": "1.0.0",
     "xml-loader": "1.2.1",

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

@@ -9,7 +9,7 @@
 </div>
 <notifier-container></notifier-container>
 <progress-button class="save-to-keyboard-button"
-                 *ngIf="(saveToKeyboardState$ | async).showButton"
+                 *ngIf="saveToKeyboardState.showButton"
                  [@showSaveToKeyboardButton]
-                 [state]="saveToKeyboardState$ | async"
+                 [state]="saveToKeyboardState"
                  (clicked)="clickedOnProgressButton($event)"></progress-button>

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

@@ -1,11 +1,13 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, HostListener, ViewEncapsulation, OnDestroy } from '@angular/core';
 import { animate, style, transition, trigger } from '@angular/animations';
 import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
 import { Action, Store } from '@ngrx/store';
 
 import 'rxjs/add/operator/last';
 
 import { DoNotUpdateAppAction, UpdateAppAction } from './store/actions/app-update.action';
+import { EnableUsbStackTestAction } from './store/actions/device';
 import {
     AppState,
     getShowAppUpdateAvailable,
@@ -34,17 +36,45 @@ import { ProgressButtonState } from './store/reducers/progress-button-state';
             ])
     ]
 })
-export class MainAppComponent {
+export class MainAppComponent implements OnDestroy {
     showUpdateAvailable$: Observable<boolean>;
     deviceConfigurationLoaded$: Observable<boolean>;
     runningInElectron$: Observable<boolean>;
-    saveToKeyboardState$: Observable<ProgressButtonState>;
+    saveToKeyboardState: ProgressButtonState;
+
+    private saveToKeyboardStateSubscription: Subscription;
 
     constructor(private store: Store<AppState>) {
         this.showUpdateAvailable$ = store.select(getShowAppUpdateAvailable);
         this.deviceConfigurationLoaded$ = store.select(deviceConfigurationLoaded);
         this.runningInElectron$ = store.select(runningInElectron);
-        this.saveToKeyboardState$ = store.select(saveToKeyboardState);
+        this.saveToKeyboardStateSubscription = store.select(saveToKeyboardState)
+            .subscribe(data => this.saveToKeyboardState = data);
+    }
+
+    ngOnDestroy(): void {
+        this.saveToKeyboardStateSubscription.unsubscribe();
+    }
+
+    @HostListener('document:keydown', ['$event'])
+    onKeyDown(event: KeyboardEvent) {
+        if (this.saveToKeyboardState.showButton &&
+            event.ctrlKey &&
+            event.key === 's' &&
+            !event.defaultPrevented) {
+            this.clickedOnProgressButton(this.saveToKeyboardState.action);
+            event.preventDefault();
+        }
+
+        if (event.shiftKey &&
+            event.ctrlKey &&
+            event.altKey &&
+            event.metaKey &&
+            event.key === '|' &&
+            !event.defaultPrevented) {
+            this.enableUsbStackTest();
+            event.preventDefault();
+        }
     }
 
     updateApp() {
@@ -58,4 +88,8 @@ export class MainAppComponent {
     clickedOnProgressButton(action: Action) {
         return this.store.dispatch(action);
     }
+
+    enableUsbStackTest() {
+        this.store.dispatch(new EnableUsbStackTestAction());
+    }
 }

packages/uhk-web/src/app/components/agent/about/about.component.html

@@ -4,7 +4,7 @@
         <span>About</span>
     </h1>
     <div class="col-xs-12">
-        <div class="agent-version">Agent version: <span class="text-bold">{{version}}</span></div>
-        <div><a class="link-github" (click)="openAgentGitHubPage($event)">Agent on GitHub</a></div>
+        <div class="agent-version">Agent version: <span class="text-bold">{{ version }}</span></div>
+        <div><a class="link-github" [href]="agentGithubUrl" externalUrl>Agent on GitHub</a></div>
     </div>
 </div>

packages/uhk-web/src/app/components/agent/about/about.component.ts

@@ -1,10 +1,7 @@
 import { Component } from '@angular/core';
-import { Store } from '@ngrx/store';
 import { Constants } from 'uhk-common';
 
-import { AppState } from '../../../store';
 import { getVersions } from '../../../util';
-import { OpenUrlInNewWindowAction } from '../../../store/actions/app';
 
 @Component({
     selector: 'about-page',
@@ -16,12 +13,5 @@ import { OpenUrlInNewWindowAction } from '../../../store/actions/app';
 })
 export class AboutComponent {
     version: string = getVersions().version;
-
-    constructor(private store: Store<AppState>) {
-    }
-
-    openAgentGitHubPage(event) {
-        event.preventDefault();
-        this.store.dispatch(new OpenUrlInNewWindowAction(Constants.AGENT_GITHUB_URL));
-    }
+    agentGithubUrl = Constants.AGENT_GITHUB_URL;
 }

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

@@ -2,12 +2,17 @@ import { Routes } from '@angular/router';
 
 import { SettingsComponent } from './settings/settings.component';
 import { AboutComponent } from './about/about.component';
+import { HelpPageComponent } from './help-page/help-page.component';
 
 export const agentRoutes: Routes = [
     {
         path: 'settings',
         component: SettingsComponent
     },
+    {
+        path: 'help',
+        component: HelpPageComponent
+    },
     {
         path: 'about',
         component: AboutComponent

packages/uhk-web/src/app/components/agent/help-page/help-page.component.html

@@ -0,0 +1,28 @@
+<div class="row">
+    <h1 class="col-xs-12 pane-title">
+        <i class="fa fa-question-circle"></i>
+        <span class="macro__name pane-title__name">Help</span>
+    </h1>
+</div>
+
+<div class="row">
+    <div class="col-xs-12">
+        Frequently asked questions
+        <ul>
+            <li><a href="https://ultimatehackingkeyboard.com/blog/2018/06/23/how-can-i-type-accented-characters-with-my-uhk" externalUrl>How can I type accented characters with my UHK?</a></li>
+        </ul>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-12">
+        Keyboard shortcuts
+        <ul>
+            <li><kbd>CTRL</kbd> + <kbd>Enter</kbd> = Remap key</li>
+            <li><kbd>CTRL</kbd> + <kbd>S</kbd> = Save to keyboard</li>
+            <li>Right click on a key = Capture key</li>
+            <li>Hold Shift while clicking on a key = Remap on all keymaps</li>
+            <li>Hold Alt while clicking on a key = Remap on all layers</li>
+        </ul>
+    </div>
+</div>

packages/uhk-web/src/app/components/agent/help-page/help-page.component.scss

@@ -0,0 +1,5 @@
+:host {
+    width: 100%;
+    height: 100%;
+    display: block;
+}

packages/uhk-web/src/app/components/agent/help-page/help-page.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    selector: 'help-page',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './help-page.component.html',
+    styleUrls: ['./help-page.component.scss'],
+    host: {
+        'class': 'container-fluid'
+    }
+})
+export class HelpPageComponent {
+}

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

@@ -9,7 +9,7 @@
 
 <ul class="list-unstyled btn-list">
     <li>
-        <button class="btn btn-default"
+        <button class="btn btn-primary"
                 (click)="exportUserConfiguration($event)">Export device configuration
         </button>
     </li>

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

@@ -12,19 +12,10 @@
                 Firmware {{ hardwareModules.rightModuleInfo.firmwareVersion }} is running on the right keyboard half.
             </p>
 
-            If the update process fails, consider the following points:
-            <ol>
-                <li>Windows 7, Windows Vista, and Windows XP are not supported. Use Linux, OSX, Windows 10, or Windows 8.</li>
-                <li>Connect your UHK directly to the host computer. Don't use USB hubs or KVM switches.</li>
-                <li>Run Agent directly on the host operating system. Don't use VirtualBox or VMware Workstation.</li>
-                <li>Give a try to every USB port of your computer.</li>
-                <li>Remove every other USB device from your computer.</li>
-                <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 *ngIf="runningOnNotSupportedWindows$ | async">Firmware update doesn't work on Windows 7, Windows Vista,
+                and Windows XP. Use Windows 10, Windows 8, Linux, or OSX instead.</p>
 
-            <p>
+            <p *ngIf="firmwareUpgradeAllowed$ | async">
                 <button class="btn btn-primary"
                         [disabled]="flashFirmwareButtonDisbabled$ | async"
                         (click)="onUpdateFirmware()">
@@ -35,9 +26,23 @@
                              accept=".tar.bz2"
                              label="Choose firmware file and flash it"></file-upload>
             </p>
+
+            <div *ngIf="firmwareUpgradeFailed$ | async"
+                 class="alert alert-danger"
+                 role="alert">
+                <p>Firmware update failed. Disconnect every USB device from your computer (including USB hubs, KVM switches, USB dongles, and everything else), then connect only your UHK and retry.</p>
+
+                <p>If you've tried the above and the update still keeps failing, please <a class="link-github" (click)="openFirmwareGitHubIssuePage($event)">create a GitHub issue</a>, and attach the update log.</p>
+            </div>
+
+            <div *ngIf="firmwareUpgradeSuccess$ | async"
+                 class="alert alert-success"
+                 role="alert">
+                <p>Firmware update succeeded.</p>
+            </div>
         </div>
 
-        <div class="flex-grow">
+        <div class="flex-grow" *ngIf="firmwareUpgradeAllowed$ | async">
             <xterm [logs]="xtermLog$ | async"></xterm>
         </div>
         <div class="flex-footer">

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

@@ -2,15 +2,18 @@ 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 { Constants, HardwareModules, VersionInformation } from 'uhk-common';
 
+import { OpenUrlInNewWindowAction } from '../../../store/actions/app';
 import {
     AppState,
+    firmwareUpgradeAllowed,
+    firmwareUpgradeFailed,
+    firmwareUpgradeSuccess,
     flashFirmwareButtonDisbabled,
     getAgentVersionInfo,
     getHardwareModules,
+    runningOnNotSupportedWindows,
     xtermLog
 } from '../../../store';
 import { UpdateFirmwareAction, UpdateFirmwareWithAction } from '../../../store/actions/device';
@@ -31,6 +34,10 @@ export class DeviceFirmwareComponent implements OnDestroy {
     getAgentVersionInfo$: Observable<VersionInformation>;
     hardwareModulesSubscription: Subscription;
     hardwareModules: HardwareModules;
+    runningOnNotSupportedWindows$: Observable<boolean>;
+    firmwareUpgradeAllowed$: Observable<boolean>;
+    firmwareUpgradeFailed$: Observable<boolean>;
+    firmwareUpgradeSuccess$: Observable<boolean>;
 
     constructor(private store: Store<AppState>) {
         this.flashFirmwareButtonDisbabled$ = store.select(flashFirmwareButtonDisbabled);
@@ -39,6 +46,10 @@ export class DeviceFirmwareComponent implements OnDestroy {
         this.hardwareModulesSubscription = store.select(getHardwareModules).subscribe(data => {
             this.hardwareModules = data;
         });
+        this.runningOnNotSupportedWindows$ = store.select(runningOnNotSupportedWindows);
+        this.firmwareUpgradeAllowed$ = store.select(firmwareUpgradeAllowed);
+        this.firmwareUpgradeFailed$ = store.select(firmwareUpgradeFailed);
+        this.firmwareUpgradeSuccess$ = store.select(firmwareUpgradeSuccess);
     }
 
     ngOnDestroy(): void {

packages/uhk-web/src/app/components/keyboard/slider/keyboard-slider.component.html

@@ -9,6 +9,7 @@
               [keyboardLayout]="keyboardLayout"
               [description]="description"
               [showDescription]="true"
+              oncontextmenu="return false;"
               (keyClick)="keyClick.emit($event)"
               (keyHover)="keyHover.emit($event)"
               (capture)="capture.emit($event)"

packages/uhk-web/src/app/components/keyboard/slider/keyboard-slider.component.ts

@@ -3,6 +3,11 @@ import { animate, keyframes, state, style, transition, trigger } from '@angular/
 import { Layer } from 'uhk-common';
 
 import { KeyboardLayout } from '../../../keyboard/keyboard-layout.enum';
+import {
+    SvgKeyboardCaptureEvent,
+    SvgKeyboardKeyClickEvent,
+    SvgKeyHoverEvent
+} from '../../../models/svg-key-events';
 
 type AnimationKeyboard =
     'init' |
@@ -82,9 +87,9 @@ export class KeyboardSliderComponent implements OnChanges {
     @Input() selectedKey: { layerId: number, moduleId: number, keyId: number };
     @Input() keyboardLayout = KeyboardLayout.ANSI;
     @Input() description: string;
-    @Output() keyClick = new EventEmitter();
-    @Output() keyHover = new EventEmitter();
-    @Output() capture = new EventEmitter();
+    @Output() keyClick = new EventEmitter<SvgKeyboardKeyClickEvent>();
+    @Output() keyHover = new EventEmitter<SvgKeyHoverEvent>();
+    @Output() capture = new EventEmitter<SvgKeyboardCaptureEvent>();
     @Output() descriptionChanged = new EventEmitter<string>();
 
     layerAnimationState: AnimationKeyboard[];

packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.html

@@ -5,6 +5,7 @@
     <svg-keyboard-wrap [keymap]="keymap$ | async"
                        [halvesSplit]="keyboardSplit"
                        [keyboardLayout]="keyboardLayout$ | async"
+                       [allowLayerDoubleTap]="allowLayerDoubleTap$ | async"
                        (descriptionChanged)="descriptionChanged($event)"></svg-keyboard-wrap>
 </ng-template>
 

packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostListener, ViewChild } from '@angular/core';
+import { Component, HostListener } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Keymap } from 'uhk-common';
@@ -14,9 +14,8 @@ import 'rxjs/add/operator/combineLatest';
 
 import { saveAs } from 'file-saver';
 
-import { AppState, getKeyboardLayout } from '../../../store';
+import { allowLayerDoubleTap, AppState, getKeyboardLayout } from '../../../store';
 import { getKeymap, getKeymaps, getUserConfiguration } from '../../../store/reducers/user-configuration';
-import { SvgKeyboardWrapComponent } from '../../svg/wrap';
 import { KeyboardLayout } from '../../../keyboard/keyboard-layout.enum';
 import { KeymapActions } from '../../../store/actions';
 import { ChangeKeymapDescription } from '../../../models/ChangeKeymapDescription';
@@ -31,13 +30,12 @@ import { ChangeKeymapDescription } from '../../../models/ChangeKeymapDescription
 })
 export class KeymapEditComponent {
 
-    @ViewChild(SvgKeyboardWrapComponent) wrap: SvgKeyboardWrapComponent;
-
     keyboardSplit: boolean;
 
     deletable$: Observable<boolean>;
     keymap$: Observable<Keymap>;
     keyboardLayout$: Observable<KeyboardLayout>;
+    allowLayerDoubleTap$: Observable<boolean>;
 
     constructor(protected store: Store<AppState>,
                 route: ActivatedRoute) {
@@ -52,6 +50,7 @@ export class KeymapEditComponent {
             .map((keymaps: Keymap[]) => keymaps.length > 1);
 
         this.keyboardLayout$ = store.select(getKeyboardLayout);
+        this.allowLayerDoubleTap$ = store.select(allowLayerDoubleTap);
     }
 
     downloadKeymap() {

packages/uhk-web/src/app/components/keymap/header/keymap-header.component.html

@@ -37,12 +37,12 @@
                data-placement="bottom"
                (click)="duplicateKeymap()"
             ></i>
-            <i class="fa fa-download keymap__download pull-right"
+            <!--i class="fa fa-download keymap__download pull-right"
                title="Download keymap"
                [html]="true"
                data-toggle="tooltip"
                data-placement="bottom"
-               (click)="onDownloadIconClick()"></i>
+               (click)="onDownloadIconClick()"></i-->
         </h1>
     </div>
 </uhk-header>

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

@@ -8,10 +8,12 @@
     <icon *ngIf="deletable" name="trash" (click)="deleteAction()"></icon>
 </div>
 <div class="list-group-item macro-action-editor__container"
-     [@toggler]="((editable && editing) || newItem) ? 'active' : 'inactive'">
-  <macro-action-editor
-      [macroAction]="macroAction"
-      (cancel)="cancelEdit()"
-      (save)="saveEditedAction($event)">
-  </macro-action-editor>
-</div>
+     [@toggler]="((editable && editing) || newItem) ? 'active' : 'inactive'"
+     [style.overflow]="overflow">
+    <macro-action-editor
+        *ngIf="editable || newItem"
+        [macroAction]="macroAction"
+        (cancel)="cancelEdit()"
+        (save)="saveEditedAction($event)">
+    </macro-action-editor>
+</div>

packages/uhk-web/src/app/components/macro/item/macro-item.component.scss

@@ -1,7 +1,7 @@
 @import '../../../../styles/variables';
 
 :host {
-    overflow: hidden;
+    overflow: visible;
     display: block;
 
     &.macro-item:first-of-type {

packages/uhk-web/src/app/components/macro/item/macro-item.component.ts

@@ -45,6 +45,7 @@ export class MacroItemComponent implements OnInit, OnChanges {
     iconName: string;
     editing: boolean;
     newItem: boolean = false;
+    overflow = 'hidden';
 
     constructor(private mapper: MapperService) { }
 
@@ -53,6 +54,7 @@ export class MacroItemComponent implements OnInit, OnChanges {
         if (!this.macroAction) {
             this.editing = true;
             this.newItem = true;
+            this.overflow = 'visible';
         }
     }
 
@@ -65,6 +67,7 @@ export class MacroItemComponent implements OnInit, OnChanges {
     saveEditedAction(editedAction: MacroAction): void {
         this.macroAction = editedAction;
         this.editing = false;
+        this.overflow = 'hidden';
         this.updateView();
         this.save.emit(editedAction);
     }
@@ -77,10 +80,12 @@ export class MacroItemComponent implements OnInit, OnChanges {
 
         this.editing = true;
         this.edit.emit();
+        this.setOverflow('visible');
     }
 
     cancelEdit(): void {
         this.editing = false;
+        this.overflow = 'hidden';
         this.cancel.emit();
     }
 
@@ -202,4 +207,12 @@ export class MacroItemComponent implements OnInit, OnChanges {
         });
         this.title += selectedButtonLabels.join(', ');
     }
+
+    private setOverflow(value: string): void {
+        // tslint:disable: align
+        setTimeout(() => {
+            this.overflow = value;
+        }, 600);
+        // tslint:enable: align
+    }
 }

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

@@ -55,6 +55,7 @@
         <layer-tab #tab *ngSwitchCase="tabName.Layer" class="popover-content"
                    [defaultKeyAction]="defaultKeyAction"
                    [currentLayer]="currentLayer"
+                   [allowLayerDoubleTap]="allowLayerDoubleTap"
                    (validAction)="keyActionValid=$event"
         ></layer-tab>
         <mouse-tab #tab *ngSwitchCase="tabName.Mouse" class="popover-content"
@@ -75,8 +76,42 @@
         ></none-tab>
     </div>
     <div class="popover-action">
-        <button class="btn btn-sm btn-default" type="button" (click)="onCancelClick()"> Cancel </button>
-        <button class="btn btn-sm btn-primary" [class.disabled]="!keyActionValid" type="button" (click)="onRemapKey()"> Remap Key </button>
+        <form class="form-inline d-inline-block popover-action-form">
+            <div class="checkbox">
+                <label>
+                    <input type="checkbox"
+                           name="remapOnAllKeymap"
+                           [(ngModel)]="remapOnAllKeymap"> Remap on all keymaps
+                </label>
+            </div>
+            <div class="checkbox">
+                <label>
+                    <input type="checkbox"
+                           name="remapOnAllLayer"
+                           [(ngModel)]="remapOnAllLayer"> Remap on all layers
+                </label>
+            </div>
+            <div class="d-inline-block">
+                <icon name="question-circle"
+                      data-toggle="tooltip"
+                      html="true"
+                      maxWidth="525"
+                      title="<ul class='no-indent text-left'>
+                <li><strong>Default behavior</strong>: Remap the key on the the current layer of the current keymap.</li>
+                <li><strong>Remap on all keymaps</strong>: Remap key on the current layer of all keymaps.</li>
+                <li><strong>Remap on all layers</strong>: Remap key on all layers of the current keymap.</li>
+                <li><strong>Remap on all keymaps + Remap on all layers</strong>: Remap key on all layers of all keymaps.</li>
+              </ul>"
+                      data-placement="bottom"></icon>
+            </div>
+        </form>
+
+        <div class="d-inline-block pull-right">
+            <button class="btn btn-sm btn-default" type="button" (click)="onCancelClick()"> Cancel</button>
+            <button class="btn btn-sm btn-primary" [class.disabled]="!keyActionValid" type="button"
+                    (click)="onRemapKey()"> Remap key
+            </button>
+        </div>
     </div>
 </div>
 <div class="popover-overlay" [class.display]="visible" (click)="onOverlay()"></div>

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

@@ -70,7 +70,6 @@
     background-color: #f7f7f7;
     border-top: 1px solid #ebebeb;
     border-radius: 0 0 5px 5px;
-    text-align: right;
 }
 
 .popover-title {
@@ -117,19 +116,10 @@
     }
 }
 
-.select2-item {
-    position: relative;
-    font-size: 1.5rem;
+.popover-action-form {
+    margin-top: 4px;
 
-    &.keymap-name--wrapper {
-        padding-left: 50px;
-    }
-
-    .layout-segment-code {
-        height: 2rem;
-        position: absolute;
-        left: 0;
-        top: 50%;
-        margin-top: -1rem;
+    label {
+        margin-right: 5px;
     }
 }

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

@@ -27,10 +27,11 @@ import {
     SwitchLayerAction
 } from 'uhk-common';
 
-import { Tab } from './tab/tab';
+import { Tab } from './tab';
 
 import { AppState } from '../../store';
 import { getKeymaps } from '../../store/reducers/user-configuration';
+import { KeyActionRemap } from '../../models/key-action-remap';
 
 enum TabName {
     Keypress,
@@ -59,8 +60,8 @@ enum TabName {
             })),
             transition('opened => closed', [
                 animate('200ms ease-out', keyframes([
-                    style({ transform: 'translateY(0)', visibility: 'visible', opacity: 1, offset: 0 }),
-                    style({ transform: 'translateY(30px)', visibility: 'hidden', opacity: 0, offset: 1 })
+                    style({transform: 'translateY(0)', visibility: 'visible', opacity: 1, offset: 0}),
+                    style({transform: 'translateY(30px)', visibility: 'hidden', opacity: 0, offset: 1})
                 ]))
             ]),
             transition('closed => opened', [
@@ -68,8 +69,8 @@ enum TabName {
                     visibility: 'visible'
                 }),
                 animate('200ms ease-out', keyframes([
-                    style({ transform: 'translateY(30px)', opacity: 0, offset: 0 }),
-                    style({ transform: 'translateY(0)', opacity: 1, offset: 1 })
+                    style({transform: 'translateY(30px)', opacity: 0, offset: 0}),
+                    style({transform: 'translateY(0)', opacity: 1, offset: 1})
                 ]))
             ])
         ])
@@ -82,9 +83,12 @@ export class PopoverComponent implements OnChanges {
     @Input() keyPosition: any;
     @Input() wrapPosition: any;
     @Input() visible: boolean;
+    @Input() allowLayerDoubleTap: boolean;
+    @Input() remapOnAllKeymap: boolean;
+    @Input() remapOnAllLayer: boolean;
 
     @Output() cancel = new EventEmitter<any>();
-    @Output() remap = new EventEmitter<KeyAction>();
+    @Output() remap = new EventEmitter<KeyActionRemap>();
 
     @ViewChild('tab') selectedTab: Tab;
     @ViewChild('popover') popoverHost: ElementRef;
@@ -155,8 +159,11 @@ export class PopoverComponent implements OnChanges {
     onRemapKey(): void {
         if (this.keyActionValid) {
             try {
-                const keyAction = this.selectedTab.toKeyAction();
-                this.remap.emit(keyAction);
+                this.remap.emit({
+                    remapOnAllKeymap: this.remapOnAllKeymap,
+                    remapOnAllLayer: this.remapOnAllLayer,
+                    action: this.selectedTab.toKeyAction()
+                });
             } catch (e) {
                 // TODO: show error dialog
                 console.error(e);
@@ -169,6 +176,14 @@ export class PopoverComponent implements OnChanges {
         this.cancel.emit();
     }
 
+    @HostListener('document:keydown.control.enter', ['$event'])
+    onKeyDown(event: KeyboardEvent) {
+        if (this.visible) {
+            this.onRemapKey();
+            event.preventDefault();
+        }
+    }
+
     selectTab(tab: TabName): void {
         this.activeTab = tab;
     }

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

@@ -4,12 +4,23 @@
 <ng-template [ngIf]="keymapOptions.length > 0">
     <div>
         <b>Switch to keymap:</b>
-        <select2
-                [data]="keymapOptions"
-                [value]="selectedKeymap?.abbreviation || -1"
-                (valueChanged)="onChange($event)"
-                [width]="'100%'"
-        ></select2>
+        <ngx-select [items]="keymapOptions"
+                    [ngModel]="selectedKeymap?.abbreviation || -1"
+                    [autoActiveOnMouseEnter]="false"
+                    size="small"
+                    optionValueField="id"
+                    optionTextField="text"
+                    (select)="onChange($event)">
+
+            <ng-template ngx-select-option let-option>
+                <span [ngClass]="{'indent-dropdown-item':option.data.id !== '-1'}">
+                    <span>{{ option.text }}</span>
+                    <span class="scancode--searchterm">
+                        {{ option.data.additional?.explanation}}
+                    </span>
+                </span>
+            </ng-template>
+        </ngx-select>
     </div>
     <div>
         <div class="empty" *ngIf="!selectedKeymap?.abbreviation">

packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.scss

@@ -16,7 +16,7 @@
             margin-right: 7px;
         }
 
-        select2 {
+        ngx-select {
             flex: 1;
         }
     }

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

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { Select2OptionData } from 'ng2-select2/ng2-select2';
 import { Keymap, KeyAction, SwitchKeymapAction } from 'uhk-common';
 
 import { Tab } from '../tab';
+import { SelectOptionData } from '../../../../models/select-option-data';
 
 @Component({
     selector: 'keymap-tab',
@@ -14,7 +14,7 @@ export class KeymapTabComponent extends Tab implements OnChanges {
     @Input() defaultKeyAction: KeyAction;
     @Input() keymaps: Keymap[];
 
-    keymapOptions: Array<Select2OptionData>;
+    keymapOptions: Array<SelectOptionData>;
     selectedKeymap: Keymap;
 
     constructor() {
@@ -25,7 +25,7 @@ export class KeymapTabComponent extends Tab implements OnChanges {
     ngOnChanges(changes: SimpleChanges) {
         if (changes.keymaps) {
             this.keymapOptions = this.keymaps
-                .map((keymap: Keymap): Select2OptionData => {
+                .map((keymap: Keymap): SelectOptionData => {
                     return {
                         id: keymap.abbreviation,
                         text: keymap.name
@@ -40,12 +40,11 @@ export class KeymapTabComponent extends Tab implements OnChanges {
         this.validAction.emit(true);
     }
 
-    // TODO: change to the correct type when the wrapper has added it.
-    onChange(event: any) {
-        if (event.value === '-1') {
+    onChange(event: string) {
+        if (event === '-1') {
             this.selectedKeymap = undefined;
         } else {
-            this.selectedKeymap = this.keymaps.find((keymap: Keymap) => keymap.abbreviation === event.value);
+            this.selectedKeymap = this.keymaps.find((keymap: Keymap) => keymap.abbreviation === event);
         }
     }
 

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

@@ -1,15 +1,33 @@
 <div class="scancode-options">
     <b class="setting-label">Scancode:</b>
-    <select2
-            [data]="scanCodeGroups"
-            [value]="selectedScancodeOption.id"
-            (valueChanged)="onScancodeChange($event)"
-            [width]="200"
-            [options]="options"
-    ></select2>
+    <div class="scancode-container">
+        <ngx-select [items]="scanCodeGroups"
+                    [ngModel]="selectedScancodeOption?.id"
+                    [autoActiveOnMouseEnter]="false"
+                    size="small"
+                    optionValueField="id"
+                    optionTextField="text"
+                    optGroupLabelField="text"
+                    optGroupOptionsField="children"
+                    (select)="onScancodeChange($event)">
+
+            <ng-template ngx-select-option let-option>
+                <span [ngClass]="{'indent-dropdown-item':option.data.id !== '0'}">
+                    <span>{{ option.text }}</span>
+                    <span class="scancode--searchterm">
+                        {{ option.data.additional?.explanation}}
+                    </span>
+                </span>
+            </ng-template>
+
+        </ngx-select>
+    </div>
     <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. 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."
+          html="true"
+          maxWidth="330"
+          title="<p>Looking for a non-US character? Just pick the character of the desired key according to the US layout.</p>
+                 <p>Let's say you're a German user and want to map the Ö character. You can see that on US keyboards this is the semicolon key, so choose semicolon in this dropdown.</p>"
           data-placement="bottom"></icon>
     <capture-keystroke-button (capture)="onKeysCapture($event)" tabindex="0"></capture-keystroke-button>
 </div>
@@ -38,15 +56,39 @@
 </div>
 <div class="long-press-container" *ngIf="secondaryRoleEnabled">
     <b class="setting-label">Secondary role:</b>
-    <select2 #secondaryRoleSelect
-             [data]="secondaryRoleGroups"
-             [value]="selectedSecondaryRoleIndex.toString()"
-             (valueChanged)="onSecondaryRoleChange($event)"
-             [width]="140"
-    ></select2>
+    <div class="secondary-role-groups-container">
+        <ngx-select [items]="secondaryRoleGroups"
+                    [ngModel]="selectedSecondaryRoleIndex.toString()"
+                    [autoActiveOnMouseEnter]="false"
+                    size="small"
+                    optionValueField="id"
+                    optionTextField="text"
+                    optGroupLabelField="text"
+                    optGroupOptionsField="children"
+                    (select)="onSecondaryRoleChange($event)">
+
+            <ng-template ngx-select-option let-option>
+                <span [ngClass]="{'indent-dropdown-item':option.data.id !== '-1'}">
+                    <span>{{ option.text }}</span>
+                    <span class="scancode--searchterm">
+                        {{ option.data.additional?.explanation}}
+                    </span>
+                </span>
+            </ng-template>
+
+        </ngx-select>
+    </div>
     <icon name="question-circle"
           data-toggle="tooltip"
-          title="The secondary role activates when another key gets pressed while holding this key."
+          html="true"
+          maxWidth="620"
+          title="<p class='text-left'>The secondary role activates when another key gets pressed while holding this key.</p>
+                 <p class='text-left'>Let's say that the scancode is Escape and the secondary role is Mouse. Then:</p>
+                 <ul class='text-left'>
+                     <li>Tap this key to trigger Escape. <i>(Primary role)</i></li>
+                     <li>Hold this key and press another key to activate the relevant key of the Mouse layer. <i>(Secondary role)</i></li>
+                 </ul>
+                 <p class='text-left pt-3'>The secondary role can be any layer or modifier.</p>"
           data-placement="bottom"></icon>
 </div>
 

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

@@ -79,4 +79,14 @@
             display: block;
         }
     }
+
+    .scancode-container {
+        display: inline-block;
+        width: 200px;
+    }
+
+    .secondary-role-groups-container {
+        display: inline-block;
+        width: 140px;
+    }
 }

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

@@ -1,12 +1,13 @@
-import { Component, Input, OnChanges } from '@angular/core';
-import { Select2OptionData, Select2TemplateFunction } from 'ng2-select2';
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
 import { KeyAction, KeystrokeAction, KeystrokeType, SCANCODES, SECONDARY_ROLES } from 'uhk-common';
 
 import { Tab } from '../tab';
 import { MapperService } from '../../../../services/mapper.service';
+import { SelectOptionData } from '../../../../models/select-option-data';
 
 @Component({
     selector: 'keypress-tab',
+    changeDetection: ChangeDetectionStrategy.OnPush,
     templateUrl: './keypress-tab.component.html',
     styleUrls: ['./keypress-tab.component.scss']
 })
@@ -20,11 +21,10 @@ export class KeypressTabComponent extends Tab implements OnChanges {
     leftModifierSelects: boolean[];
     rightModifierSelects: boolean[];
 
-    scanCodeGroups: Array<Select2OptionData>;
-    secondaryRoleGroups: Array<Select2OptionData>;
-    options: Select2Options;
+    scanCodeGroups: Array<SelectOptionData>;
+    secondaryRoleGroups: Array<SelectOptionData>;
 
-    selectedScancodeOption: Select2OptionData;
+    selectedScancodeOption: SelectOptionData;
     selectedSecondaryRoleIndex: number;
 
     constructor(private mapper: MapperService) {
@@ -41,18 +41,6 @@ export class KeypressTabComponent extends Tab implements OnChanges {
         this.rightModifierSelects = Array(this.rightModifiers.length).fill(false);
         this.selectedScancodeOption = this.scanCodeGroups[0];
         this.selectedSecondaryRoleIndex = -1;
-        this.options = {
-            templateResult: this.scanCodeTemplateResult,
-            matcher: (term: string, text: string, data: Select2OptionData) => {
-                let found = text.toUpperCase().indexOf(term.toUpperCase()) > -1;
-
-                if (!found && data.additional && data.additional.explanation) {
-                    found = data.additional.explanation.toUpperCase().indexOf(term.toUpperCase()) > -1;
-                }
-
-                return found;
-            }
-        };
     }
 
     ngOnChanges() {
@@ -134,25 +122,6 @@ export class KeypressTabComponent extends Tab implements OnChanges {
         }
     }
 
-    scanCodeTemplateResult: Select2TemplateFunction = (state: Select2OptionData): JQuery | string => {
-        if (!state.id) {
-            return state.text;
-        }
-
-        if (state.additional && state.additional.explanation) {
-            return jQuery(
-                '<span class="select2-item">'
-                + '<span>' + state.text + '</span>'
-                + '<span class="scancode--searchterm"> '
-                + state.additional.explanation
-                + '</span>' +
-                '</span>'
-            );
-        } else {
-            return jQuery('<span class="select2-item">' + state.text + '</span>');
-        }
-    }
-
     toggleModifier(right: boolean, index: number) {
         const modifierSelects: boolean[] = right ? this.rightModifierSelects : this.leftModifierSelects;
         modifierSelects[index] = !modifierSelects[index];
@@ -160,24 +129,20 @@ export class KeypressTabComponent extends Tab implements OnChanges {
         this.validAction.emit(this.keyActionValid());
     }
 
-    onSecondaryRoleChange(event: { value: string }) {
-        this.selectedSecondaryRoleIndex = +event.value;
+    onSecondaryRoleChange(id: string) {
+        this.selectedSecondaryRoleIndex = +id;
     }
 
-    onScancodeChange(event: { value: string }) {
-        const id: string = event.value;
-
-        // ng2-select2 should provide the selectedOption in an upcoming release
-        // TODO: change this when it has become available
+    onScancodeChange(id: string) {
         this.selectedScancodeOption = this.findScancodeOptionById(id);
 
         this.validAction.emit(this.keyActionValid());
     }
 
-    private findScancodeOptionBy(predicate: (option: Select2OptionData) => boolean): Select2OptionData {
-        let selectedOption: Select2OptionData;
+    private findScancodeOptionBy(predicate: (option: SelectOptionData) => boolean): SelectOptionData {
+        let selectedOption: SelectOptionData;
 
-        const scanCodeGroups: Select2OptionData[] = [...this.scanCodeGroups];
+        const scanCodeGroups: SelectOptionData[] = [...this.scanCodeGroups];
         while (scanCodeGroups.length > 0) {
             const scanCodeGroup = scanCodeGroups.shift();
             if (predicate(scanCodeGroup)) {
@@ -192,14 +157,14 @@ export class KeypressTabComponent extends Tab implements OnChanges {
         return selectedOption;
     }
 
-    private findScancodeOptionById(id: string): Select2OptionData {
+    private findScancodeOptionById(id: string): SelectOptionData {
         return this.findScancodeOptionBy(option => option.id === id);
     }
 
-    private findScancodeOptionByScancode(scancode: number, type: KeystrokeType): Select2OptionData {
+    private findScancodeOptionByScancode(scancode: number, type: KeystrokeType): SelectOptionData {
         const typeToFind: string =
             (type === KeystrokeType.shortMedia || type === KeystrokeType.longMedia) ? 'media' : KeystrokeType[type];
-        return this.findScancodeOptionBy((option: Select2OptionData) => {
+        return this.findScancodeOptionBy((option: SelectOptionData) => {
             const additional = option.additional;
             if (additional && additional.scancode === scancode && additional.type === typeToFind) {
                 return true;
@@ -211,7 +176,11 @@ export class KeypressTabComponent extends Tab implements OnChanges {
         });
     }
 
-    private toScancodeTypePair(option: Select2OptionData): [number, string] {
+    private toScancodeTypePair(option: SelectOptionData): [number, string] {
+        if (!option) {
+            return [0, 'basic'];
+        }
+
         let scanCode: number;
         let type: string;
         if (option.additional) {

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

@@ -1,20 +1,32 @@
 <ng-template [ngIf]="!isNotBase">
-    <select (change)="toggleChanged($event.target.value)">
-        <option *ngFor="let item of toggleData" [value]="item.id" [selected]="toggle === item.id">
-            {{ item.text }}
-        </option>
-    </select>
-    <span>the</span>
-    <select (change)="layerChanged($event.target.value)">
-        <option *ngFor="let item of layerData" [value]="item.id" [selected]="layer === item.id">
-            {{ item.text }}
-        </option>
-    </select>
-    <span [ngSwitch]="toggle">
-        <ng-template [ngSwitchCase]="true">layer by tapping this key.</ng-template>
-        <ng-template ngSwitchDefault>layer by holding this key.</ng-template>
-    </span>
+    <div>
+        <div>
+            <select (change)="toggleChanged($event.target.value)">
+                <option *ngFor="let item of toggleData" [value]="item.id" [selected]="toggle === item.id">
+                    {{ item.text }}
+                </option>
+            </select>
+            <span>the</span>
+            <select (change)="layerChanged($event.target.value)">
+                <option *ngFor="let item of layerData" [value]="item.id" [selected]="layer === item.id">
+                    {{ item.text }}
+                </option>
+            </select>
+            <span [ngSwitch]="toggle">
+            <ng-template [ngSwitchCase]="'toggle'">layer by tapping this key.</ng-template>
+            <ng-template ngSwitchDefault>layer by holding this key.</ng-template>
+        </span>
+        </div>
+        <div *ngIf="toggle === 'active' && allowLayerDoubleTap">
+            <div class="checkbox">
+                <label>
+                    <input type="checkbox"
+                           [(ngModel)]="lockLayerWhenDoubleTapping"> Lock layer when double tapping this key.
+                </label>
+            </div>
+        </div>
+    </div>
 </ng-template>
 <ng-template [ngIf]="isNotBase">
     <span> Layer switching is only possible from the base layer. </span>
-</ng-template>
+</ng-template>

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

@@ -1,26 +1,30 @@
-import { Component, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { KeyAction, LayerName, SwitchLayerAction } from 'uhk-common';
+import { ChangeDetectionStrategy, Component, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { KeyAction, LayerName, SwitchLayerAction, SwitchLayerMode } from 'uhk-common';
 
 import { Tab } from '../tab';
 
+export type toggleType = 'active' | 'toggle';
+
 @Component({
     selector: 'layer-tab',
+    changeDetection: ChangeDetectionStrategy.OnPush,
     templateUrl: './layer-tab.component.html',
     styleUrls: ['./layer-tab.component.scss']
 })
 export class LayerTabComponent extends Tab implements OnChanges {
     @Input() defaultKeyAction: KeyAction;
     @Input() currentLayer: number;
+    @Input() allowLayerDoubleTap: boolean;
 
     @HostBinding('class.no-base') isNotBase: boolean;
 
-    toggleData: { id: boolean, text: string }[] = [
+    toggleData: { id: toggleType, text: string }[] = [
         {
-            id: false,
+            id: 'active',
             text: 'Activate'
         },
         {
-            id: true,
+            id: 'toggle',
             text: 'Toggle'
         }
     ];
@@ -40,12 +44,13 @@ export class LayerTabComponent extends Tab implements OnChanges {
         }
     ];
 
-    toggle: boolean;
+    toggle: toggleType;
     layer: LayerName;
+    lockLayerWhenDoubleTapping: boolean;
 
     constructor() {
         super();
-        this.toggle = false;
+        this.toggle = 'active';
         this.layer = LayerName.mod;
     }
 
@@ -71,14 +76,39 @@ export class LayerTabComponent extends Tab implements OnChanges {
         }
 
         const switchLayerAction: SwitchLayerAction = <SwitchLayerAction>keyAction;
-        this.toggle = switchLayerAction.isLayerToggleable;
+        switch (switchLayerAction.switchLayerMode) {
+            case SwitchLayerMode.holdAndDoubleTapToggle: {
+                this.toggle = 'active';
+                this.lockLayerWhenDoubleTapping = true;
+                break;
+            }
+
+            case SwitchLayerMode.hold: {
+                this.toggle = 'active';
+                this.lockLayerWhenDoubleTapping = false;
+                break;
+            }
+
+            default: {
+                this.toggle = 'toggle';
+                this.lockLayerWhenDoubleTapping = false;
+            }
+        }
+
         this.layer = switchLayerAction.layer;
         return true;
     }
 
     toKeyAction(): SwitchLayerAction {
         const keyAction = new SwitchLayerAction();
-        keyAction.isLayerToggleable = this.toggle;
+        if (this.toggle === 'toggle') {
+            keyAction.switchLayerMode = SwitchLayerMode.toggle;
+        } else if (!this.allowLayerDoubleTap || this.lockLayerWhenDoubleTapping) {
+            keyAction.switchLayerMode = SwitchLayerMode.holdAndDoubleTapToggle;
+        } else {
+            keyAction.switchLayerMode = SwitchLayerMode.hold;
+        }
+
         keyAction.layer = this.layer;
         if (!this.keyActionValid()) {
             throw new Error('KeyAction is invalid!');
@@ -86,8 +116,8 @@ export class LayerTabComponent extends Tab implements OnChanges {
         return keyAction;
     }
 
-    toggleChanged(value: string) {
-        this.toggle = value === 'true';
+    toggleChanged(value: toggleType) {
+        this.toggle = value;
     }
 
     layerChanged(value: number) {

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

@@ -5,7 +5,23 @@
     <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>
+        <ngx-select [items]="macroOptions"
+                    [ngModel]="macroOptions[selectedMacroIndex]?.id"
+                    [autoActiveOnMouseEnter]="false"
+                    size="small"
+                    optionValueField="id"
+                    optionTextField="text"
+                    (select)="onChange($event)">
+
+            <ng-template ngx-select-option let-option>
+                <span [ngClass]="{'indent-dropdown-item':option.data.id !== '-1'}">
+                    <span>{{ option.text }}</span>
+                    <span class="scancode--searchterm">
+                        {{ option.data.additional?.explanation}}
+                    </span>
+                </span>
+            </ng-template>
+        </ngx-select>
     </div>
     <div class="macro-action-container">
         <div class="list-group">
@@ -14,4 +30,4 @@
             </macro-item>
         </div>
     </div>
-</ng-template>
+</ng-template>

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

@@ -16,7 +16,7 @@
             margin-right: 7px;
         }
 
-        select2 {
+        ngx-select {
             flex: 1;
         }
     }

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

@@ -1,16 +1,17 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Subscription } from 'rxjs/Subscription';
-import { Select2OptionData } from 'ng2-select2/ng2-select2';
 import { KeyAction, Macro, PlayMacroAction } from 'uhk-common';
 
 import { Tab } from '../tab';
 
-import { AppState } from '../../../../store/index';
+import { AppState } from '../../../../store';
 import { getMacros } from '../../../../store/reducers/user-configuration';
+import { SelectOptionData } from '../../../../models/select-option-data';
 
 @Component({
     selector: 'macro-tab',
+    changeDetection: ChangeDetectionStrategy.OnPush,
     templateUrl: './macro-tab.component.html',
     styleUrls: ['./macro-tab.component.scss']
 })
@@ -18,7 +19,7 @@ export class MacroTabComponent extends Tab implements OnInit, OnChanges, OnDestr
     @Input() defaultKeyAction: KeyAction;
 
     macros: Macro[];
-    macroOptions: Array<Select2OptionData>;
+    macroOptions: Array<SelectOptionData>;
     selectedMacroIndex: number;
     private subscription: Subscription;
 
@@ -31,7 +32,7 @@ export class MacroTabComponent extends Tab implements OnInit, OnChanges, OnDestr
     }
 
     ngOnInit() {
-        this.macroOptions = this.macros.map(function (macro: Macro, index: number): Select2OptionData {
+        this.macroOptions = this.macros.map(function (macro: Macro, index: number): SelectOptionData {
             return {
                 id: index.toString(),
                 text: macro.name
@@ -44,9 +45,8 @@ export class MacroTabComponent extends Tab implements OnInit, OnChanges, OnDestr
         this.validAction.emit(true);
     }
 
-    // TODO: change to the correct type when the wrapper has added it.
-    onChange(event: any) {
-        this.selectedMacroIndex = +event.value;
+    onChange(id: string) {
+        this.selectedMacroIndex = +id;
     }
 
     keyActionValid(): boolean {

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

@@ -1,10 +1,11 @@
-import { Component, Input, OnChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
 import { KeyAction, MouseAction, MouseActionParam } from 'uhk-common';
 
 import { Tab } from '../tab';
 
 @Component({
     selector: 'mouse-tab',
+    changeDetection: ChangeDetectionStrategy.OnPush,
     templateUrl: './mouse-tab.component.html',
     styleUrls: ['./mouse-tab.component.scss']
 })

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

@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 
 import { Tab } from '../tab';
 
 @Component({
     selector: 'none-tab',
+    changeDetection: ChangeDetectionStrategy.OnPush,
     templateUrl: './none-tab.component.html',
     styleUrls: ['./none-tab.component.scss']
 })

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

@@ -136,11 +136,17 @@
                (click)="toggleHide($event, 'agent')"></i>
         </div>
         <ul [@toggler]="animation['agent']">
-            <li class="sidebar__level-2--item">
+            <!--li class="sidebar__level-2--item">
                 <div class="sidebar__level-2" [routerLinkActive]="['active']">
                     <a [routerLink]="['/settings']"
                        [class.disabled]="state.updatingFirmware">Settings</a>
                 </div>
+            </li-->
+            <li class="sidebar__level-2--item">
+                <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                    <a [routerLink]="['/help']"
+                       [class.disabled]="state.updatingFirmware">Help</a>
+                </div>
             </li>
             <li class="sidebar__level-2--item">
                 <div class="sidebar__level-2" [routerLinkActive]="['active']">

packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.html

@@ -1,5 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="viewBox" height="100%" width="100%">
-    <svg:g svg-module *ngFor="let module of modules; let i = index"
+<svg xmlns="http://www.w3.org/2000/svg"
+     [attr.viewBox]="viewBox"
+     height="100%"
+     width="100%">
+    <svg:g svg-module
+           *ngFor="let module of modules; let i = index"
            [coverages]="module.coverages"
            [keyboardKeys]="module.keyboardKeys"
            [keybindAnimationEnabled]="keybindAnimationEnabled"
@@ -9,10 +13,13 @@
            [selectedKey]="selectedKey"
            [@split]="moduleAnimationStates[i]"
            [selected]="selectedKey?.moduleId === i"
-           (keyClick)="onKeyClick(i, $event.index, $event.keyTarget)"
+           (keyClick)="onKeyClick(i, $event)"
            (keyHover)="onKeyHover($event.index, $event.event, $event.over, i)"
-           (capture)="onCapture(i, $event.index, $event.captured)"
-    />
+           (capture)="onCapture(i, $event)" />
+
+    <svg:path [@fadeSeparator]="separatorAnimation"
+              [attr.d]="separator.d"
+              [attr.style]="separatorStyle" />
 </svg>
 <editable-text *ngIf="showDescription"
                [ngModel]="description"

packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts

@@ -1,10 +1,18 @@
 import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges, ChangeDetectionStrategy } from '@angular/core';
 import { animate, state, trigger, style, transition } from '@angular/animations';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 import { Module } from 'uhk-common';
 
 import { SvgModule } from '../module';
 import { SvgModuleProviderService } from '../../../services/svg-module-provider.service';
 import { KeyboardLayout } from '../../../keyboard/keyboard-layout.enum';
+import { SvgSeparator } from '../separator';
+import {
+    SvgKeyHoverEvent,
+    SvgKeyboardKeyClickEvent,
+    SvgKeyboardCaptureEvent,
+    SvgModuleKeyClickEvent
+} from '../../../models/svg-key-events';
 
 @Component({
     selector: 'svg-keyboard',
@@ -20,6 +28,16 @@ import { KeyboardLayout } from '../../../keyboard/keyboard-layout.enum';
                 transform: 'translate(3%, 15%) rotate(-4deg) scale(0.92, 0.92)'
             })),
             transition('* <=> *', animate(500))
+        ]),
+        trigger('fadeSeparator', [
+            state('visible', style({
+                opacity: 1
+            })),
+            state('invisible', style({
+                opacity: 0
+            })),
+            transition('visible => invisible', animate(500)),
+            transition('invisible => visible', animate(1500))
         ])
     ]
 })
@@ -33,16 +51,20 @@ export class SvgKeyboardComponent implements OnInit {
     @Input() keyboardLayout = KeyboardLayout.ANSI;
     @Input() description: string;
     @Input() showDescription = false;
-    @Output() keyClick = new EventEmitter();
-    @Output() keyHover = new EventEmitter();
-    @Output() capture = new EventEmitter();
+    @Output() keyClick = new EventEmitter<SvgKeyboardKeyClickEvent>();
+    @Output() keyHover = new EventEmitter<SvgKeyHoverEvent>();
+    @Output() capture = new EventEmitter<SvgKeyboardCaptureEvent>();
     @Output() descriptionChanged = new EventEmitter<string>();
 
     modules: SvgModule[];
     viewBox: string;
     moduleAnimationStates: string[];
+    separator: SvgSeparator;
+    separatorStyle: SafeStyle;
+    separatorAnimation = 'visible';
 
-    constructor(private svgModuleProvider: SvgModuleProviderService) {
+    constructor(private svgModuleProvider: SvgModuleProviderService,
+                private sanitizer: DomSanitizer) {
         this.modules = [];
         this.viewBox = '-520 582 1100 470';
         this.halvesSplit = false;
@@ -63,19 +85,17 @@ export class SvgKeyboardComponent implements OnInit {
         }
     }
 
-    onKeyClick(moduleId: number, keyId: number, keyTarget: HTMLElement): void {
+    onKeyClick(moduleId: number, event: SvgModuleKeyClickEvent): void {
         this.keyClick.emit({
-            moduleId,
-            keyId,
-            keyTarget
+            ...event,
+            moduleId
         });
     }
 
-    onCapture(moduleId: number, keyId: number, captured: { code: number, left: boolean[], right: boolean[] }): void {
+    onCapture(moduleId: number, event: SvgKeyboardCaptureEvent): void {
         this.capture.emit({
-            moduleId,
-            keyId,
-            captured
+            ...event,
+            moduleId
         });
     }
 
@@ -91,12 +111,16 @@ export class SvgKeyboardComponent implements OnInit {
     private updateModuleAnimationStates() {
         if (this.halvesSplit) {
             this.moduleAnimationStates = ['rotateRight', 'rotateLeft'];
+            this.separatorAnimation = 'invisible';
         } else {
             this.moduleAnimationStates = [];
+            this.separatorAnimation = 'visible';
         }
     }
 
     private setModules() {
         this.modules = this.svgModuleProvider.getSvgModules(this.keyboardLayout);
+        this.separator = this.svgModuleProvider.getSvgSeparator();
+        this.separatorStyle = this.sanitizer.bypassSecurityTrustStyle(this.separator.style);
     }
 }

packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts

@@ -17,14 +17,16 @@ import {
     MouseAction,
     PlayMacroAction,
     SwitchKeymapAction,
-    SwitchLayerAction
+    SwitchLayerAction,
+    SwitchLayerMode
 } from 'uhk-common';
 
 import { CaptureService } from '../../../../services/capture.service';
 import { MapperService } from '../../../../services/mapper.service';
 
-import { AppState } from '../../../../store/index';
+import { AppState } from '../../../../store';
 import { getMacros } from '../../../../store/reducers/user-configuration';
+import { SvgKeyCaptureEvent, SvgKeyClickEvent } from '../../../../models/svg-key-events';
 
 enum LabelTypes {
     KeystrokeKey,
@@ -81,8 +83,8 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
     @Input() capturingEnabled: boolean;
     @Input() active: boolean;
 
-    @Output() keyClick = new EventEmitter();
-    @Output() capture = new EventEmitter();
+    @Output() keyClick = new EventEmitter<SvgKeyClickEvent>();
+    @Output() capture = new EventEmitter<SvgKeyCaptureEvent>();
 
     enumLabelTypes = LabelTypes;
 
@@ -95,6 +97,10 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
     macros: Macro[];
     private subscription: Subscription;
     private scanCodePressed: boolean;
+    private pressedShiftLocation = -1;
+    private pressedAltLocation = -1;
+    private altPressed = false;
+    private shiftPressed = false;
 
     constructor(
         private mapper: MapperService,
@@ -114,12 +120,16 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
     @HostListener('click')
     onClick() {
         this.reset();
-        this.keyClick.emit(this.element.nativeElement);
+        this.keyClick.emit({
+            keyTarget: this.element.nativeElement,
+            shiftPressed: this.pressedShiftLocation > -1,
+            altPressed: this.pressedAltLocation > -1
+        });
     }
 
     @HostListener('mousedown', ['$event'])
     onMouseDown(e: MouseEvent) {
-        if ((e.which === 2 || e.button === 1) && this.capturingEnabled) {
+        if ((e.which === 2 || e.button === 2) && this.capturingEnabled) {
             e.preventDefault();
             this.renderer.invokeElementMethod(this.element.nativeElement, 'focus');
 
@@ -128,13 +138,29 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
             } else {
                 this.recording = true;
                 this.recordAnimation = 'active';
+
+                if (this.pressedShiftLocation > -1) {
+                    this.shiftPressed = true;
+                }
+
+                if (this.pressedAltLocation > -1) {
+                    this.altPressed = true;
+                }
             }
         }
     }
 
-    @HostListener('keyup', ['$event'])
+    @HostListener('document:keyup', ['$event'])
     onKeyUp(e: KeyboardEvent) {
-        if (this.scanCodePressed) {
+        if (e.keyCode === 18 && this.pressedAltLocation > -1) {
+            this.pressedAltLocation = -1;
+            e.preventDefault();
+        }
+        else if (e.keyCode === 16 && this.pressedShiftLocation > -1) {
+            this.pressedShiftLocation = -1;
+            e.preventDefault();
+        }
+        else if (this.scanCodePressed) {
             e.preventDefault();
             this.scanCodePressed = false;
         } else if (this.recording) {
@@ -143,7 +169,7 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
         }
     }
 
-    @HostListener('keydown', ['$event'])
+    @HostListener('document:keydown', ['$event'])
     onKeyDown(e: KeyboardEvent) {
         const code: number = e.keyCode;
 
@@ -151,11 +177,29 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
             e.preventDefault();
 
             if (this.captureService.hasMap(code)) {
+                // If the Alt or Shift key not released after start the capturing
+                // then add them as a modifier
+                if (this.pressedShiftLocation > -1) {
+                    this.captureService.setModifier((this.pressedShiftLocation === 1), 16);
+                }
+
+                if (this.pressedAltLocation > -1) {
+                    this.captureService.setModifier((this.pressedAltLocation === 1), 18);
+                }
+
                 this.saveScanCode(this.captureService.getMap(code));
                 this.scanCodePressed = true;
             } else {
                 this.captureService.setModifier((e.location === 1), code);
             }
+        } else {
+            if (e.keyCode === 16) {
+                this.pressedShiftLocation = e.location;
+            }
+
+            if (e.keyCode === 18) {
+                this.pressedAltLocation = e.location;
+            }
         }
     }
 
@@ -197,22 +241,25 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
         this.recording = false;
         this.changeAnimation = 'inactive';
         this.captureService.initModifiers();
+        this.shiftPressed = false;
+        this.altPressed = false;
     }
 
     private saveScanCode(code = 0) {
-        this.recording = false;
-        this.changeAnimation = 'inactive';
-
         const left: boolean[] = this.captureService.getModifiers(true);
         const right: boolean[] = this.captureService.getModifiers(false);
 
         this.capture.emit({
-            code,
-            left,
-            right
+            captured: {
+                code,
+                left,
+                right
+            },
+            shiftPressed: this.shiftPressed,
+            altPressed: this.altPressed
         });
 
-        this.captureService.initModifiers();
+        this.reset();
     }
 
     private setLabels(): void {
@@ -288,12 +335,18 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
                     break;
             }
 
-            if (keyAction.isLayerToggleable) {
+            if (keyAction.switchLayerMode === SwitchLayerMode.toggle) {
                 this.labelType = LabelTypes.TextIcon;
                 this.labelSource = {
                     text: newLabelSource,
                     icon: this.mapper.getIcon('toggle')
                 };
+            } else if (keyAction.switchLayerMode === SwitchLayerMode.holdAndDoubleTapToggle) {
+                this.labelType = LabelTypes.TextIcon;
+                this.labelSource = {
+                    text: newLabelSource,
+                    icon: this.mapper.getIcon('double-tap')
+                };
             } else {
                 this.labelType = LabelTypes.OneLineText;
                 this.labelSource = newLabelSource;

packages/uhk-web/src/app/components/svg/module/svg-module.component.ts

@@ -2,6 +2,12 @@ import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from
 import { KeyAction } from 'uhk-common';
 
 import { SvgKeyboardKey } from '../keys';
+import {
+    SvgKeyCaptureEvent,
+    SvgKeyClickEvent,
+    SvgModuleCaptureEvent,
+    SvgModuleKeyClickEvent
+} from '../../../models/svg-key-events';
 
 @Component({
     selector: 'g[svg-module]',
@@ -17,18 +23,18 @@ export class SvgModuleComponent {
     @Input() selected: boolean;
     @Input() keybindAnimationEnabled: boolean;
     @Input() capturingEnabled: boolean;
-    @Output() keyClick = new EventEmitter();
+    @Output() keyClick = new EventEmitter<SvgModuleKeyClickEvent>();
     @Output() keyHover = new EventEmitter();
-    @Output() capture = new EventEmitter();
+    @Output() capture = new EventEmitter<SvgModuleCaptureEvent>();
 
     constructor() {
         this.keyboardKeys = [];
     }
 
-    onKeyClick(index: number, keyTarget: HTMLElement): void {
+    onKeyClick(keyId: number, event: SvgKeyClickEvent): void {
         this.keyClick.emit({
-            index,
-            keyTarget
+            ...event,
+            keyId
         });
     }
 
@@ -40,10 +46,10 @@ export class SvgModuleComponent {
         });
     }
 
-    onCapture(index: number, captured: {code: number, left: boolean[], right: boolean[]}) {
+    onCapture(keyId: number, event: SvgKeyCaptureEvent) {
         this.capture.emit({
-            index,
-            captured
+            ...event,
+            keyId
         });
     }
 }

packages/uhk-web/src/app/components/svg/separator/convert-xml-to-svg-separator.ts

@@ -0,0 +1,5 @@
+import { SvgSeparator } from './svg-separator.model';
+
+export const convertXmlToSvgSeparator = (obj: { path: any[], $: Object }): SvgSeparator => {
+    return obj.path[0].$;
+};

packages/uhk-web/src/app/components/svg/separator/index.ts

@@ -0,0 +1,2 @@
+export * from './svg-separator.model';
+export * from './convert-xml-to-svg-separator';

packages/uhk-web/src/app/components/svg/separator/svg-separator.model.ts

@@ -0,0 +1,4 @@
+export interface SvgSeparator {
+    style: string;
+    d: string;
+}

packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.html

@@ -8,13 +8,25 @@
                      [halvesSplit]="halvesSplit"
                      [keyboardLayout]="keyboardLayout"
                      [description]="keymap.description"
-                     (keyClick)="onKeyClick($event.moduleId, $event.keyId, $event.keyTarget)"
-                     (keyHover)="onKeyHover($event.moduleId, $event.event, $event.over, $event.keyId)"
-                     (capture)="onCapture($event.moduleId, $event.keyId, $event.captured)"
+                     (keyClick)="onKeyClick($event)"
+                     (keyHover)="onKeyHover($event)"
+                     (capture)="onCapture($event)"
                      (descriptionChanged)="onDescriptionChanged($event)"
     ></keyboard-slider>
-    <popover tabindex="0" [visible]="popoverShown" [keyPosition]="keyPosition" [wrapPosition]="wrapPosition" [defaultKeyAction]="popoverInitKeyAction"
-             [currentKeymap]="keymap" [currentLayer]="currentLayer" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>
+
+    <popover tabindex="0"
+             [visible]="popoverShown"
+             [keyPosition]="keyPosition"
+             [wrapPosition]="wrapPosition"
+             [defaultKeyAction]="popoverInitKeyAction"
+             [currentKeymap]="keymap"
+             [currentLayer]="currentLayer"
+             [allowLayerDoubleTap]="allowLayerDoubleTap"
+             [remapOnAllKeymap]="remapOnAllKeymap"
+             [remapOnAllLayer]="remapOnAllLayer"
+             (cancel)="hidePopover()"
+             (remap)="onRemap($event)"></popover>
+
     <div class="tooltip bottom"
          [class.in]="tooltipData.show"
          [style.top.px]="tooltipData.posTop"

packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.ts

@@ -32,7 +32,8 @@ import {
     PlayMacroAction,
     SecondaryRoleAction,
     SwitchKeymapAction,
-    SwitchLayerAction
+    SwitchLayerAction,
+    SwitchLayerMode
 } from 'uhk-common';
 
 import { MapperService } from '../../../services/mapper.service';
@@ -41,6 +42,12 @@ import { KeymapActions } from '../../../store/actions';
 import { PopoverComponent } from '../../popover';
 import { KeyboardLayout } from '../../../keyboard/keyboard-layout.enum';
 import { ChangeKeymapDescription } from '../../../models/ChangeKeymapDescription';
+import { KeyActionRemap } from '../../../models/key-action-remap';
+import {
+    SvgKeyboardCaptureEvent,
+    SvgKeyboardKeyClickEvent,
+    SvgKeyHoverEvent
+} from '../../../models/svg-key-events';
 
 interface NameValuePair {
     name: string;
@@ -59,9 +66,11 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
     @Input() tooltipEnabled: boolean = false;
     @Input() halvesSplit: boolean;
     @Input() keyboardLayout: KeyboardLayout.ANSI;
+    @Input() allowLayerDoubleTap: boolean;
+
     @Output() descriptionChanged = new EventEmitter<ChangeKeymapDescription>();
 
-    @ViewChild(PopoverComponent, { read: ElementRef }) popover: ElementRef;
+    @ViewChild(PopoverComponent, {read: ElementRef}) popover: ElementRef;
 
     popoverShown: boolean;
     keyEditConfig: { moduleId: number, keyId: number };
@@ -78,6 +87,9 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
     layers: Layer[];
     keyPosition: ClientRect;
     wrapPosition: ClientRect;
+    remapOnAllKeymap: boolean;
+    remapOnAllLayer: boolean;
+
     private wrapHost: HTMLElement;
     private keyElement: HTMLElement;
 
@@ -127,7 +139,6 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
             this.layers = this.keymap.layers;
             if (keymapChanges.isFirstChange() ||
                 keymapChanges.previousValue.abbreviation !== keymapChanges.currentValue.abbreviation) {
-                this.currentLayer = 0;
                 this.keybindAnimationEnabled = keymapChanges.isFirstChange();
             } else {
                 this.keybindAnimationEnabled = true;
@@ -136,36 +147,38 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
 
     }
 
-    onKeyClick(moduleId: number, keyId: number, keyTarget: HTMLElement): void {
+    onKeyClick(event: SvgKeyboardKeyClickEvent): void {
         if (!this.popoverShown && this.popoverEnabled) {
             this.keyEditConfig = {
-                moduleId,
-                keyId
+                moduleId: event.moduleId,
+                keyId: event.keyId
             };
-            this.selectedKey = { layerId: this.currentLayer, moduleId, keyId };
-            const keyActionToEdit: KeyAction = this.layers[this.currentLayer].modules[moduleId].keyActions[keyId];
-            this.keyElement = keyTarget;
+            this.selectedKey = {layerId: this.currentLayer, moduleId: event.moduleId, keyId: event.keyId};
+            const keyActionToEdit: KeyAction = this.layers[this.currentLayer].modules[event.moduleId].keyActions[event.keyId];
+            this.keyElement = event.keyTarget;
+            this.remapOnAllKeymap = event.shiftPressed;
+            this.remapOnAllLayer = event.altPressed;
             this.showPopover(keyActionToEdit);
         }
     }
 
-    onKeyHover(moduleId: number, event: MouseEvent, over: boolean, keyId: number): void {
+    onKeyHover(event: SvgKeyHoverEvent): void {
         if (this.tooltipEnabled) {
-            const keyActionToEdit: KeyAction = this.layers[this.currentLayer].modules[moduleId].keyActions[keyId];
+            const keyActionToEdit: KeyAction = this.layers[this.currentLayer].modules[event.moduleId].keyActions[event.keyId];
 
-            if (over) {
-                this.showTooltip(keyActionToEdit, event);
+            if (event.over) {
+                this.showTooltip(keyActionToEdit, event.event);
             } else {
                 this.hideTooltip();
             }
         }
     }
 
-    onCapture(moduleId: number, keyId: number, captured: { code: number, left: boolean[], right: boolean[] }): void {
+    onCapture(event: SvgKeyboardCaptureEvent): void {
         const keystrokeAction: KeystrokeAction = new KeystrokeAction();
-        const modifiers = captured.left.concat(captured.right).map(x => x ? 1 : 0);
+        const modifiers = event.captured.left.concat(event.captured.right).map(x => x ? 1 : 0);
 
-        keystrokeAction.scancode = captured.code;
+        keystrokeAction.scancode = event.captured.code;
         keystrokeAction.modifierMask = 0;
 
         for (let i = 0; i < modifiers.length; ++i) {
@@ -176,13 +189,17 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
             KeymapActions.saveKey(
                 this.keymap,
                 this.currentLayer,
-                moduleId,
-                keyId,
-                keystrokeAction)
+                event.moduleId,
+                event.keyId,
+                {
+                    remapOnAllKeymap: event.shiftPressed,
+                    remapOnAllLayer: event.altPressed,
+                    action: keystrokeAction
+                })
         );
     }
 
-    onRemap(keyAction: KeyAction): void {
+    onRemap(keyAction: KeyActionRemap): void {
         this.store.dispatch(
             KeymapActions.saveKey(
                 this.keymap,
@@ -231,6 +248,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
     hidePopover(): void {
         this.popoverShown = false;
         this.selectedKey = undefined;
+        this.popoverInitKeyAction = null;
     }
 
     selectLayer(index: number): void {
@@ -350,7 +368,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
                     },
                     {
                         name: 'Toogle',
-                        value: switchLayerAction.isLayerToggleable ? 'On' : 'Off'
+                        value: switchLayerAction.switchLayerMode === SwitchLayerMode.toggle ? 'On' : 'Off'
                     }
                 ];
             return Observable.of(content);

packages/uhk-web/src/app/directives/external-url/external-url.directive.ts

@@ -0,0 +1,25 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+import { AppState } from '../../store';
+import { OpenUrlInNewWindowAction } from '../../store/actions/app';
+
+@Directive({
+    selector: 'a[externalUrl]'
+})
+export class ExternalUrlDirective {
+    constructor(private el: ElementRef,
+                private store: Store<AppState>) {
+    }
+
+    @HostListener('click', ['$event'])
+    onClick($event: MouseEvent): void {
+        $event.preventDefault();
+        $event.stopPropagation();
+
+        const anchor = this.el.nativeElement as HTMLAnchorElement;
+        if (anchor.href) {
+            this.store.dispatch(new OpenUrlInNewWindowAction(anchor.href));
+        }
+    }
+}

packages/uhk-web/src/app/directives/external-url/index.ts

@@ -0,0 +1 @@
+export * from './external-url.directive';

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

@@ -1,2 +1,3 @@
 export * from './cancelable';
 export * from './tooltip';
+export * from './external-url';

packages/uhk-web/src/app/directives/tooltip/tooltip.directive.ts

@@ -1,3 +1,4 @@
+///<reference path="../../../../node_modules/@types/jquery/index.d.ts"/>
 import { AfterContentInit, Directive, ElementRef, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
@@ -9,15 +10,10 @@ export class TooltipDirective implements AfterContentInit, OnChanges {
     @HostBinding('attr.data-placement') placement: string;
     @Input('title') title: string;
     @Input('html') html: boolean;
+    @Input() maxWidth: number;
 
-    private customTooltipTemplate = `
-        <div class="tooltip">
-            <div class="tooltip-arrow"></div>
-            <div class="tooltip-inner"></div>
-        </div>
-    `;
-
-    constructor(private elementRef: ElementRef, private sanitizer: DomSanitizer) { }
+    constructor(private elementRef: ElementRef, private sanitizer: DomSanitizer) {
+    }
 
     ngAfterContentInit() {
         this.init();
@@ -33,7 +29,7 @@ export class TooltipDirective implements AfterContentInit, OnChanges {
         (<any>jQuery(this.elementRef.nativeElement)).tooltip({
             placement: this.placement,
             html: this.html,
-            template: this.customTooltipTemplate,
+            template: this.getCustomTemplate(),
             title: this.title
         });
     }
@@ -42,7 +38,7 @@ export class TooltipDirective implements AfterContentInit, OnChanges {
         (<any>jQuery(this.elementRef.nativeElement)).tooltip({
             placement: this.placement,
             html: this.html,
-            template: this.customTooltipTemplate,
+            template: this.getCustomTemplate(),
             title: this.title
         });
 
@@ -50,4 +46,19 @@ export class TooltipDirective implements AfterContentInit, OnChanges {
             .attr('title', this.title))
             .tooltip('fixTitle');
     }
+
+    private getCustomTemplate(): string {
+        let tooltipStyle = '';
+        let innerStyle = '';
+
+        if (this.maxWidth) {
+            tooltipStyle = `style="width: ${this.maxWidth}px;"`;
+            innerStyle = `style="max-width: ${this.maxWidth}px;"`;
+        }
+
+        return `<div class="tooltip" ${tooltipStyle}>
+            <div class="tooltip-arrow"></div>
+            <div class="tooltip-inner" ${innerStyle}></div>
+        </div>`;
+    }
 }

packages/uhk-web/src/app/models/key-action-remap.ts

@@ -0,0 +1,7 @@
+import { KeyAction } from 'uhk-common';
+
+export interface KeyActionRemap {
+    remapOnAllKeymap: boolean;
+    remapOnAllLayer: boolean;
+    action: KeyAction;
+}

packages/uhk-web/src/app/models/select-option-data.ts

@@ -0,0 +1,7 @@
+export interface SelectOptionData {
+    id: string;
+    text: string;
+    disabled?: boolean;
+    children?: Array<SelectOptionData>;
+    additional?: any;
+}

packages/uhk-web/src/app/models/svg-key-events.ts

@@ -0,0 +1,42 @@
+export interface SvgKeyClickEvent {
+    keyTarget: HTMLElement;
+    shiftPressed?: boolean;
+    altPressed?: boolean;
+}
+
+export interface SvgModuleKeyClickEvent extends SvgKeyClickEvent {
+    keyId: number;
+}
+
+export interface SvgKeyboardKeyClickEvent extends SvgModuleKeyClickEvent {
+    moduleId: number;
+}
+
+export interface KeyCaptureData {
+    code: number;
+    left: boolean[];
+    right: boolean[];
+}
+
+export interface SvgKeyCaptureEvent {
+    captured: KeyCaptureData;
+    shiftPressed?: boolean;
+    altPressed?: boolean;
+}
+
+export interface SvgModuleCaptureEvent extends SvgKeyCaptureEvent {
+    keyId: number;
+}
+
+export interface SvgKeyboardCaptureEvent extends SvgModuleCaptureEvent {
+    moduleId: number;
+}
+
+export interface SvgKeyHoverEvent {
+    keyId: number;
+    event: MouseEvent;
+    over: boolean;
+    moduleId: number;
+    shiftPressed?: boolean;
+    altPressed?: boolean;
+}

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

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

packages/uhk-web/src/app/services/mapper.service.ts

@@ -262,6 +262,7 @@ export class MapperService {
     private initNameToFileNames(): void {
         this.nameToFileName = new Map<string, string>();
         this.nameToFileName.set('toggle', 'icon-kbd__fn--toggle');
+        this.nameToFileName.set('double-tap', 'icon-kbd__fn--double-tap');
         this.nameToFileName.set('switch-keymap', 'icon-kbd__mod--switch-keymap');
         this.nameToFileName.set('macro', 'icon-icon__macro');
         this.nameToFileName.set('shift', 'icon-kbd__default--modifier-shift');

packages/uhk-web/src/app/services/svg-module-provider.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 
 import { SvgModule } from '../components/svg/module';
 import { KeyboardLayout } from '../keyboard/keyboard-layout.enum';
+import { convertXmlToSvgSeparator, SvgSeparator } from '../components/svg/separator';
 
 @Injectable()
 export class SvgModuleProviderService {
@@ -9,11 +10,20 @@ export class SvgModuleProviderService {
     private ansiLeft: SvgModule;
     private isoLeft: SvgModule;
     private right: SvgModule;
+    private separator: SvgSeparator;
 
     getSvgModules(layout = KeyboardLayout.ANSI): SvgModule[] {
         return [this.getRightModule(), this.getLeftModule(layout)];
     }
 
+    getSvgSeparator(): SvgSeparator {
+        if (!this.separator) {
+            this.separator = convertXmlToSvgSeparator(require('xml-loader!../../devices/uhk60-right/separator.xml').svg);
+        }
+
+        return this.separator;
+    }
+
     private getLeftModule(layout = KeyboardLayout.ANSI): SvgModule {
         if (layout === KeyboardLayout.ISO) {
             if (!this.isoLeft) {

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

@@ -6,7 +6,7 @@ import { NotifierModule } from 'angular-notifier';
 import { ConfirmationPopoverModule } from 'angular-confirmation-popover';
 
 import { DragulaModule } from 'ng2-dragula/ng2-dragula';
-import { Select2Module } from 'ng2-select2/ng2-select2';
+import { NgxSelectModule } from '@ert78gb/ngx-select-ex';
 import { NouisliderModule } from 'ng2-nouislider';
 import { ClipboardModule } from 'ngx-clipboard';
 
@@ -68,7 +68,7 @@ import { SvgModuleComponent } from './components/svg/module';
 import { SvgKeyboardWrapComponent } from './components/svg/wrap';
 import { appRoutingProviders, routing } from './app.routes';
 
-import { CancelableDirective, TooltipDirective } from './directives';
+import { CancelableDirective, ExternalUrlDirective, TooltipDirective } from './directives';
 import { SafeStylePipe } from './pipes';
 
 import { CaptureService } from './services/capture.service';
@@ -109,6 +109,7 @@ 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';
+import { HelpPageComponent } from './components/agent/help-page/help-page.component';
 
 @NgModule({
     declarations: [
@@ -183,7 +184,9 @@ import { AutoGrowInputComponent } from './components/auto-grow-input';
         RestoreConfigurationComponent,
         RecoveryModeComponent,
         FileUploadComponent,
-        AutoGrowInputComponent
+        AutoGrowInputComponent,
+        HelpPageComponent,
+        ExternalUrlDirective
     ],
     imports: [
         CommonModule,
@@ -191,7 +194,7 @@ import { AutoGrowInputComponent } from './components/auto-grow-input';
         FormsModule,
         DragulaModule,
         routing,
-        Select2Module,
+        NgxSelectModule,
         NouisliderModule,
         NotifierModule.withConfig(angularNotifierConfig),
         ConfirmationPopoverModule.forRoot({

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

@@ -1,6 +1,6 @@
 import { Action } from '@ngrx/store';
 
-import { AppStartInfo, CommandLineArgs, HardwareConfiguration, Notification, type } from 'uhk-common';
+import { AppStartInfo, HardwareConfiguration, Notification, type } from 'uhk-common';
 import { ElectronLogEntry } from '../../models/xterm-log';
 
 const PREFIX = '[app] ';
@@ -10,7 +10,7 @@ export const ActionTypes = {
     APP_BOOTSRAPPED: type(PREFIX + 'bootstrapped'),
     APP_STARTED: type(PREFIX + 'started'),
     APP_SHOW_NOTIFICATION: type(PREFIX + 'show notification'),
-    APPLY_COMMAND_LINE_ARGS: type(PREFIX + 'apply command line args'),
+    APPLY_APP_START_INFO: type(PREFIX + 'apply command line args'),
     APP_PROCESS_START_INFO: type(PREFIX + 'process start info'),
     UNDO_LAST: type(PREFIX + 'undo last action'),
     UNDO_LAST_SUCCESS: type(PREFIX + 'undo last action success'),
@@ -38,10 +38,10 @@ export class ShowNotificationAction implements Action {
     }
 }
 
-export class ApplyCommandLineArgsAction implements Action {
-    type = ActionTypes.APPLY_COMMAND_LINE_ARGS;
+export class ApplyAppStartInfoAction implements Action {
+    type = ActionTypes.APPLY_APP_START_INFO;
 
-    constructor(public payload: CommandLineArgs) {
+    constructor(public payload: AppStartInfo) {
     }
 }
 
@@ -107,7 +107,7 @@ export type Actions
     = AppStartedAction
     | AppBootsrappedAction
     | ShowNotificationAction
-    | ApplyCommandLineArgsAction
+    | ApplyAppStartInfoAction
     | ProcessAppStartInfoAction
     | UndoLastAction
     | UndoLastSuccessAction

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

@@ -28,7 +28,8 @@ export const ActionTypes = {
     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'),
-    RECOVERY_DEVICE: type(PREFIX + 'Recovery device')
+    RECOVERY_DEVICE: type(PREFIX + 'Recovery device'),
+    ENABLE_USB_STACK_TEST: type(PREFIX + 'USB stack test')
 };
 
 export class SetPrivilegeOnLinuxAction implements Action {
@@ -144,6 +145,10 @@ export class RecoveryDeviceAction implements Action {
     type = ActionTypes.RECOVERY_DEVICE;
 }
 
+export class EnableUsbStackTestAction implements Action {
+    type = ActionTypes.ENABLE_USB_STACK_TEST;
+}
+
 export type Actions
     = SetPrivilegeOnLinuxAction
     | SetPrivilegeOnLinuxReplyAction
@@ -166,4 +171,5 @@ export type Actions
     | HasBackupUserConfigurationAction
     | RestoreUserConfigurationFromBackupSuccessAction
     | RecoveryDeviceAction
+    | EnableUsbStackTestAction
     ;

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

@@ -1,7 +1,8 @@
 import { Action } from '@ngrx/store';
-import { KeyAction, Keymap, Macro } from 'uhk-common';
+import { Keymap, Macro } from 'uhk-common';
 import { UndoUserConfigData } from '../../models/undo-user-config-data';
 import { ChangeKeymapDescription } from '../../models/ChangeKeymapDescription';
+import { KeyActionRemap } from '../../models/key-action-remap';
 
 export type KeymapAction =
     KeymapActions.AddKeymapAction |
@@ -60,7 +61,7 @@ export namespace KeymapActions {
             layer: number;
             module: number;
             key: number;
-            keyAction: KeyAction;
+            keyAction: KeyActionRemap;
         }
     };
 
@@ -172,7 +173,11 @@ export namespace KeymapActions {
         };
     }
 
-    export function saveKey(keymap: Keymap, layer: number, module: number, key: number, keyAction: KeyAction): SaveKeyAction {
+    export function saveKey(keymap: Keymap,
+                            layer: number,
+                            module: number,
+                            key: number,
+                            keyAction: KeyActionRemap): SaveKeyAction {
         return {
             type: KeymapActions.SAVE_KEY,
             payload: {

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

@@ -13,7 +13,7 @@ import 'rxjs/add/operator/catch';
 import { AppStartInfo, LogService, Notification, NotificationType } from 'uhk-common';
 import {
     ActionTypes,
-    ApplyCommandLineArgsAction,
+    ApplyAppStartInfoAction,
     AppStartedAction,
     DismissUndoNotificationAction,
     OpenUrlInNewWindowAction,
@@ -65,7 +65,7 @@ export class ApplicationEffects {
         .mergeMap((appInfo: AppStartInfo) => {
             this.logService.debug('[AppEffect][processStartInfo] payload:', appInfo);
             return [
-                new ApplyCommandLineArgsAction(appInfo.commandLineArgs),
+                new ApplyAppStartInfoAction(appInfo),
                 new ConnectionStateChangedAction({
                     connected: appInfo.deviceConnected,
                     hasPermission: appInfo.hasPermission,

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

@@ -23,6 +23,7 @@ import {
 import {
     ActionTypes,
     ConnectionStateChangedAction,
+    EnableUsbStackTestAction,
     HideSaveToKeyboardButton,
     RecoveryDeviceAction,
     ResetUserConfigurationAction,
@@ -230,6 +231,10 @@ export class DeviceEffects {
         .ofType<RecoveryDeviceAction>(ActionTypes.RECOVERY_DEVICE)
         .do(() => this.deviceRendererService.recoveryDevice());
 
+    @Effect({dispatch: false}) enableUsbStackTest$ = this.actions$
+        .ofType<EnableUsbStackTestAction>(ActionTypes.ENABLE_USB_STACK_TEST)
+        .do(() => this.deviceRendererService.enableUsbStackTest());
+
     constructor(private actions$: Actions,
                 private router: Router,
                 private deviceRendererService: DeviceRendererService,

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

@@ -44,6 +44,7 @@ export const getUserConfiguration = (state: AppState) => state.userConfiguration
 export const appState = (state: AppState) => state.app;
 
 export const showAddonMenu = createSelector(appState, fromApp.showAddonMenu);
+export const allowLayerDoubleTap = createSelector(appState, fromApp.allowLayerDoubleTap);
 export const getUndoableNotification = createSelector(appState, fromApp.getUndoableNotification);
 export const getPrevUserConfiguration = createSelector(appState, fromApp.getPrevUserConfiguration);
 export const runningInElectron = createSelector(appState, fromApp.runningInElectron);
@@ -51,6 +52,8 @@ export const getKeyboardLayout = createSelector(appState, fromApp.getKeyboardLay
 export const deviceConfigurationLoaded = createSelector(appState, fromApp.deviceConfigurationLoaded);
 export const getAgentVersionInfo = createSelector(appState, fromApp.getAgentVersionInfo);
 export const getPrivilegePageState = createSelector(appState, fromApp.getPrivilagePageState);
+export const runningOnNotSupportedWindows = createSelector(appState, fromApp.runningOnNotSupportedWindows);
+export const firmwareUpgradeAllowed = createSelector(runningOnNotSupportedWindows, notSupportedOs => !notSupportedOs);
 
 export const appUpdateState = (state: AppState) => state.appUpdate;
 export const getShowAppUpdateAvailable = createSelector(appUpdateState, fromAppUpdate.getShowAppUpdateAvailable);
@@ -80,6 +83,8 @@ export const getHardwareModules = createSelector(deviceState, fromDevice.getHard
 export const getBackupUserConfigurationState = createSelector(deviceState, fromDevice.getBackupUserConfigurationState);
 export const getRestoreUserConfiguration = createSelector(deviceState, fromDevice.getHasBackupUserConfiguration);
 export const bootloaderActive = createSelector(deviceState, fromDevice.bootloaderActive);
+export const firmwareUpgradeFailed = createSelector(deviceState, fromDevice.firmwareUpgradeFailed);
+export const firmwareUpgradeSuccess = createSelector(deviceState, fromDevice.firmwareUpgradeSuccess);
 
 export const getSideMenuPageState = createSelector(
     showAddonMenu,

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

@@ -1,6 +1,8 @@
 import { ROUTER_NAVIGATION } from '@ngrx/router-store';
 import { Action } from '@ngrx/store';
 import {
+    AppStartInfo,
+    CommandLineArgs,
     HardwareConfiguration,
     Notification,
     NotificationType,
@@ -18,7 +20,7 @@ import { PrivilagePageSate } from '../../models/privilage-page-sate';
 
 export interface State {
     started: boolean;
-    showAddonMenu: boolean;
+    commandLineArgs: CommandLineArgs;
     undoableNotification?: Notification;
     navigationCountAfterNotification: number;
     prevUserConfig?: UserConfiguration;
@@ -28,11 +30,13 @@ export interface State {
     agentVersionInfo?: VersionInformation;
     privilegeWhatWillThisDoClicked: boolean;
     permissionError?: any;
+    platform?: string;
+    osVersion?: string;
 }
 
 export const initialState: State = {
     started: false,
-    showAddonMenu: false,
+    commandLineArgs: {},
     navigationCountAfterNotification: 0,
     runningInElectron: runInElectron(),
     configLoading: true,
@@ -49,10 +53,14 @@ export function reducer(state = initialState, action: Action & { payload: any })
             };
         }
 
-        case ActionTypes.APPLY_COMMAND_LINE_ARGS: {
+        case ActionTypes.APPLY_APP_START_INFO: {
+            const payload = action.payload as AppStartInfo;
+
             return {
                 ...state,
-                showAddonMenu: action.payload.addons
+                commandLineArgs: payload.commandLineArgs,
+                platform: payload.platform,
+                osVersion: payload.osVersion
             };
         }
 
@@ -148,7 +156,8 @@ export function reducer(state = initialState, action: Action & { payload: any })
     }
 }
 
-export const showAddonMenu = (state: State) => state.showAddonMenu;
+export const showAddonMenu = (state: State) => state.commandLineArgs.addons;
+export const allowLayerDoubleTap = (state: State) => state.commandLineArgs.layerDoubleTap;
 export const getUndoableNotification = (state: State) => state.undoableNotification;
 export const getPrevUserConfiguration = (state: State) => state.prevUserConfig;
 export const runningInElectron = (state: State) => state.runningInElectron;
@@ -170,3 +179,15 @@ export const getPrivilagePageState = (state: State): PrivilagePageSate => {
         showWhatWillThisDoContent: state.privilegeWhatWillThisDoClicked || permissionSetupFailed
     };
 };
+
+export const runningOnNotSupportedWindows = (state: State): boolean => {
+    if (!state.osVersion || state.platform !== 'win32') {
+        return false;
+    }
+
+    const version = state.osVersion.split('.');
+    const osMajor = +version[0];
+    const osMinor = +version[1];
+
+    return osMajor < 6 || (osMajor === 6 && osMinor < 2);
+};

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

@@ -23,6 +23,8 @@ export interface State {
     savingToKeyboard: boolean;
     updatingFirmware: boolean;
     firmwareUpdateFinished: boolean;
+    firmwareUpdateFailed?: boolean;
+    firmwareUpdateSuccess?: boolean;
     modules: HardwareModules;
     log: Array<XtermLog>;
     restoringUserConfiguration: boolean;
@@ -128,6 +130,8 @@ export function reducer(state = initialState, action: Action): State {
                 ...state,
                 updatingFirmware: true,
                 firmwareUpdateFinished: false,
+                firmwareUpdateFailed: false,
+                firmwareUpdateSuccess: false,
                 log: [{message: 'Start flashing firmware', cssClass: XtermCssClass.standard}]
             };
 
@@ -136,6 +140,7 @@ export function reducer(state = initialState, action: Action): State {
                 ...state,
                 updatingFirmware: false,
                 firmwareUpdateFinished: true,
+                firmwareUpdateSuccess: true,
                 modules: (action as UpdateFirmwareSuccessAction).payload
             };
 
@@ -150,6 +155,7 @@ export function reducer(state = initialState, action: Action): State {
                 ...state,
                 updatingFirmware: false,
                 firmwareUpdateFinished: true,
+                firmwareUpdateFailed: true,
                 modules: data.modules,
                 log: [...state.log, logEntry]
             };
@@ -228,3 +234,5 @@ export const getBackupUserConfigurationState = (state: State): RestoreConfigurat
     };
 };
 export const bootloaderActive = (state: State) => state.bootloaderActive;
+export const firmwareUpgradeFailed = (state: State) => state.firmwareUpdateFailed;
+export const firmwareUpgradeSuccess = (state: State) => state.firmwareUpdateSuccess;

packages/uhk-web/src/app/store/reducers/user-configuration.spec.ts

@@ -1,5 +1,13 @@
 import { reducer, initialState } from './user-configuration';
-import { KeystrokeAction, KeystrokeType, SwitchLayerAction, UserConfiguration, LayerName, Keymap } from 'uhk-common';
+import {
+    KeystrokeAction,
+    KeystrokeType,
+    SwitchLayerAction,
+    UserConfiguration,
+    LayerName,
+    Keymap,
+    SwitchLayerMode
+} from 'uhk-common';
 
 import { getDefaultUserConfig } from '../../../../test/user-config-helper';
 import { KeymapActions } from '../actions';
@@ -22,7 +30,11 @@ describe('user-configuration reducer', () => {
                     layer: 0,
                     module: 0,
                     key: 0,
-                    keyAction: keystrokeAction
+                    keyAction: {
+                        remapOnAllKeymap: false,
+                        remapOnAllLayer: false,
+                        action: keystrokeAction
+                    }
                 }
             };
             const result = reducer(state, saveKeyAction);
@@ -42,7 +54,11 @@ describe('user-configuration reducer', () => {
             const defaultUserConfig = new UserConfiguration().fromJsonObject(getDefaultUserConfig());
             const state = new UserConfiguration().fromJsonObject(getDefaultUserConfig());
             const destinationLayerId = LayerName.mod;
-            const switchLayerAction = new SwitchLayerAction({isLayerToggleable: false, layer: destinationLayerId} as any);
+            const switchLayerAction = new SwitchLayerAction({
+                switchLayerMode: SwitchLayerMode.toggle,
+                layer: destinationLayerId
+            } as any);
+
             const saveKeyAction: KeymapActions.SaveKeyAction = {
                 type: KeymapActions.SAVE_KEY,
                 payload: {
@@ -50,7 +66,12 @@ describe('user-configuration reducer', () => {
                     layer: 0,
                     module: 0,
                     key: 0,
-                    keyAction: switchLayerAction
+                    keyAction: {
+                        remapOnAllKeymap: false,
+                        remapOnAllLayer: false,
+                        action: switchLayerAction
+                    }
+
                 }
             };
             const result = reducer(state, saveKeyAction);
@@ -81,7 +102,7 @@ describe('user-configuration reducer', () => {
                                             {
                                                 keyActionType: 'switchLayer',
                                                 layer: 'mod',
-                                                toggle: false
+                                                switchLayerMode: 1
                                             },
                                             {
                                                 keyActionType: 'keystroke',
@@ -89,9 +110,9 @@ describe('user-configuration reducer', () => {
                                                 scancode: 37
                                             },
                                             {
-                                                'keyActionType': 'switchLayer',
-                                                'layer': 'mod',
-                                                'toggle': false
+                                                keyActionType: 'switchLayer',
+                                                layer: 'mod',
+                                                switchLayerMode: 1
                                             }
                                         ]
                                     },
@@ -128,7 +149,7 @@ describe('user-configuration reducer', () => {
                                             {
                                                 keyActionType: 'switchLayer',
                                                 layer: 'mod',
-                                                toggle: false
+                                                switchLayerMode: 1
                                             },
                                             {
                                                 keyActionType: 'keystroke',
@@ -136,9 +157,9 @@ describe('user-configuration reducer', () => {
                                                 scancode: 65
                                             },
                                             {
-                                                'keyActionType': 'switchLayer',
-                                                'layer': 'mod',
-                                                'toggle': false
+                                                keyActionType: 'switchLayer',
+                                                layer: 'mod',
+                                                switchLayerMode: 1
                                             }
                                         ]
                                     },
@@ -219,7 +240,11 @@ describe('user-configuration reducer', () => {
             const defaultUserConfig = new UserConfiguration().fromJsonObject(getDefaultUserConfig());
             const state = new UserConfiguration().fromJsonObject(getDefaultUserConfig());
             const destinationLayerId = LayerName.fn;
-            const switchLayerAction = new SwitchLayerAction({isLayerToggleable: false, layer: destinationLayerId} as any);
+            const switchLayerAction = new SwitchLayerAction({
+                switchLayerMode: SwitchLayerMode.toggle,
+                layer: destinationLayerId
+            } as any);
+
             const saveKeyAction: KeymapActions.SaveKeyAction = {
                 type: KeymapActions.SAVE_KEY,
                 payload: {
@@ -227,7 +252,12 @@ describe('user-configuration reducer', () => {
                     layer: 0,
                     module: 0,
                     key: 2,
-                    keyAction: switchLayerAction
+                    keyAction: {
+                        remapOnAllKeymap: false,
+                        remapOnAllLayer: false,
+                        action: switchLayerAction
+                    }
+
                 }
             };
             const result = reducer(state, saveKeyAction);
@@ -266,9 +296,9 @@ describe('user-configuration reducer', () => {
                                                 scancode: 37
                                             },
                                             {
-                                                'keyActionType': 'switchLayer',
-                                                'layer': 'fn',
-                                                'toggle': false
+                                                keyActionType: 'switchLayer',
+                                                layer: 'fn',
+                                                switchLayerMode: 1
                                             }
                                         ]
                                     },
@@ -345,7 +375,7 @@ describe('user-configuration reducer', () => {
                                             {
                                                 keyActionType: 'switchLayer',
                                                 layer: 'fn',
-                                                toggle: false
+                                                switchLayerMode: 1
                                             }
                                         ]
                                     },

packages/uhk-web/src/app/store/reducers/user-configuration.ts

@@ -13,6 +13,7 @@ import {
     Module,
     NoneAction,
     PlayMacroAction,
+    SwitchKeymapAction,
     SwitchLayerAction,
     UserConfiguration
 } from 'uhk-common';
@@ -68,7 +69,7 @@ export function reducer(state = initialState, action: Action & { payload?: any }
                 break;
             }
 
-            const newKeymap = Object.assign(new Keymap(), keymapToRename, { name });
+            const newKeymap = Object.assign(new Keymap(), keymapToRename, {name});
 
             changedUserConfiguration.keymaps = insertItemInNameOrder(
                 state.keymaps,
@@ -139,38 +140,49 @@ export function reducer(state = initialState, action: Action & { payload?: any }
             const keyIndex: number = action.payload.key;
             const layerIndex: number = action.payload.layer;
             const moduleIndex: number = action.payload.module;
-            const newKeyAction = KeyActionHelper.createKeyAction(action.payload.keyAction);
-            const newKeymap: Keymap = Object.assign(new Keymap(), action.payload.keymap);
-            newKeymap.layers = newKeymap.layers.slice();
-
-            newKeymap.layers = newKeymap.layers.map((layer, index) => {
-                const newLayer = Object.assign(new Layer(), layer);
-
-                if (index === layerIndex) {
-                    setKeyActionToLayer(newLayer, moduleIndex, keyIndex, newKeyAction);
-                }
-                // If the key action is a SwitchLayerAction then set the same SwitchLayerAction
-                // on the target layer
-                else if (newKeyAction instanceof SwitchLayerAction) {
-                    if (index - 1 === newKeyAction.layer) {
-                        const clonedAction = KeyActionHelper.createKeyAction(action.payload.keyAction);
-                        setKeyActionToLayer(newLayer, moduleIndex, keyIndex, clonedAction);
-                    } else {
-                        setKeyActionToLayer(newLayer, moduleIndex, keyIndex, null);
-                    }
-                }
-                return newLayer;
-            });
+            const keyActionRemap = action.payload.keyAction;
+            const newKeyAction = keyActionRemap.action;
+            const newKeymap: Keymap = action.payload.keymap;
+            const isSwitchLayerAction = newKeyAction instanceof SwitchLayerAction;
+            const isSwitchKeymapAction = newKeyAction instanceof SwitchKeymapAction;
 
             changedUserConfiguration.keymaps = state.keymaps.map(keymap => {
-                if (keymap.abbreviation === newKeymap.abbreviation) {
-                    keymap = newKeymap;
+                // SwitchKeymapAction not allow to refer to itself
+                if (isSwitchKeymapAction && keymap.abbreviation === newKeyAction.keymapAbbreviation) {
+                    return keymap;
+                }
+
+                if (keyActionRemap.remapOnAllKeymap || keymap.abbreviation === newKeymap.abbreviation) {
+                    keymap.layers = keymap.layers.map((layer, index) => {
+                        if (keyActionRemap.remapOnAllLayer || index === layerIndex || isSwitchLayerAction) {
+                            const clonedAction = KeyActionHelper.createKeyAction(newKeyAction);
+
+                            // If the key action is a SwitchLayerAction then set the same SwitchLayerAction
+                            // on the target layer and remove SwitchLayerAction from other layers
+                            if (isSwitchLayerAction) {
+                                if (index === 0 || index - 1 === (newKeyAction as SwitchLayerAction).layer) {
+                                    setKeyActionToLayer(layer, moduleIndex, keyIndex, clonedAction);
+                                } else {
+                                    const actionOnLayer = layer.modules[moduleIndex].keyActions[keyIndex];
+                                    if (actionOnLayer && actionOnLayer instanceof SwitchLayerAction) {
+                                        setKeyActionToLayer(layer, moduleIndex, keyIndex, null);
+                                    }
+                                }
+                            }
+                            else {
+                                setKeyActionToLayer(layer, moduleIndex, keyIndex, clonedAction);
+                            }
+                        }
+
+                        return layer;
+                    });
                 }
 
                 return keymap;
             });
             break;
         }
+
         case KeymapActions.CHECK_MACRO:
             changedUserConfiguration.keymaps = state.keymaps.map(keymap => {
                 keymap = Object.assign(new Keymap(), keymap);

packages/uhk-web/src/assets/images/agent-logo-with-text.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg2"
+   viewBox="-5 -5 49.822906 12.159602"
+   height="18.239403"
+   width="74.73436">
+  <path
+     id="path4"
+     style="fill:#000000"
+     d="M -3,-5 C -4.108,-5 -5,-4.108 -5,-3 L -5,3 C -5,4.108 -4.108,5 -3,5 L 3,5 C 4.108,5 5,4.108 5,3 L 5,-3 C 5,-4.108 4.108,-5 3,-5 L -3,-5 Z M -4.0833333,-2.5 C -4.0364583,-2.5078125 -4,-2.5 -4,-2.5 L -0.99999998,-2.5 C -0.74999998,-2.5 -0.49999998,-2.25 -0.49999998,-2.25 -0.49999998,-2.25 -0.24999998,-2 2.4999999e-8,-2 0.25000003,-2 0.50000003,-2.25 0.50000003,-2.25 0.50000003,-2.25 0.75000003,-2.5 1,-2.5 L 4,-2.5 C 4.5,-2.5 4.5,-2 4.5,-2 L 4.5,-0.99999998 C 4.5,0.50000003 3.5,0.50000003 3.5,0.50000003 L 1,0.50000003 C 0.75000003,0.50000003 0.50000003,-0.24999998 0.50000003,-0.24999998 0.50000003,-0.24999998 0.25000003,-0.99999998 2.4999999e-8,-0.99999998 -0.24999998,-0.99999998 -0.49999998,-0.24999998 -0.49999998,-0.24999998 -0.49999998,-0.24999998 -0.74999998,0.50000003 -0.99999998,0.50000003 L -3.5,0.50000003 C -3.5,0.50000003 -4.5,0.50000003 -4.5,-0.99999998 L -4.5,-2 C -4.5,-2.375 -4.2239583,-2.4765625 -4.0833333,-2.5 Z" />
+  <g
+     id="text3338"
+     style="font-style:normal;font-weight:normal;font-size:13.33333302px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">
+    <path
+       id="path3343"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10.83333302px;font-family:Zekton;-inkscape-font-specification:'Zekton Bold'"
+       d="M 13.8736,1.4179352 16.1811,1.4179352 14.740267,-2.297898 11.8911,4.9929351 10.3636,4.9929351 14.155267,-4.5403979 15.3361,-4.5403979 19.149433,4.9929351 17.6111,4.9929351 16.744433,2.8262685 13.310267,2.8262685 13.8736,1.4179352 Z" />
+    <path
+       id="path3345"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10.83333302px;font-family:Zekton;-inkscape-font-specification:'Zekton Bold'"
+       d="M 24.13886,5.7512684 Q 24.78886,5.7512684 24.78886,5.1012684 L 24.78886,0.22626858 Q 24.78886,-0.4237314 24.13886,-0.4237314 L 21.972193,-0.4237314 Q 21.322193,-0.4237314 21.322193,0.22626858 L 21.322193,2.9346018 Q 21.322193,3.5846018 21.972193,3.5846018 L 24.355527,3.5846018 24.355527,4.9929351 21.972193,4.9929351 Q 19.91386,4.9929351 19.91386,2.9346018 L 19.91386,0.22626858 Q 19.91386,-1.8320647 21.972193,-1.8320647 L 24.13886,-1.8320647 Q 26.197193,-1.8320647 26.197193,0.22626858 L 26.197193,5.1012684 Q 26.197193,7.1596017 24.13886,7.1596017 L 21.53886,7.1596017 21.53886,5.7512684 24.13886,5.7512684 Z" />
+    <path
+       id="path3347"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10.83333302px;font-family:Zekton;-inkscape-font-specification:'Zekton Bold'"
+       d="M 33.018808,3.5846018 33.018808,4.9929351 29.335475,4.9929351 Q 27.277141,4.9929351 27.277141,2.9346018 L 27.277141,0.22626858 Q 27.277141,-1.8320647 29.335475,-1.8320647 L 31.502141,-1.8320647 Q 33.560474,-1.8320647 33.560474,0.22626858 L 33.560474,0.24793524 Q 33.560474,2.2846019 31.502141,2.2846019 L 29.118808,2.2846019 29.118808,0.87626856 31.502141,0.87626856 Q 32.152141,0.87626856 32.152141,0.24793524 L 32.152141,0.22626858 Q 32.152141,-0.4237314 31.502141,-0.4237314 L 29.335475,-0.4237314 Q 28.685475,-0.4237314 28.685475,0.22626858 L 28.685475,2.9346018 Q 28.685475,3.5846018 29.335475,3.5846018 L 33.018808,3.5846018 Z" />
+    <path
+       id="path3349"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10.83333302px;font-family:Zekton;-inkscape-font-specification:'Zekton Bold'"
+       d="M 40.817961,4.9929351 39.409627,4.9929351 39.409627,0.22626858 Q 39.409627,-0.4237314 38.759627,-0.4237314 L 35.942961,-0.4237314 35.942961,4.9929351 34.534628,4.9929351 34.534628,-1.8320647 38.759627,-1.8320647 Q 40.817961,-1.8320647 40.817961,0.22626858 L 40.817961,4.9929351 Z" />
+    <path
+       id="path3351"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10.83333302px;font-family:Zekton;-inkscape-font-specification:'Zekton Bold'"
+       d="M 41.789576,-1.8320647 42.331242,-1.8320647 42.331242,-4.5403979 43.663742,-4.5403979 43.663742,-1.8320647 44.822909,-1.8320647 44.822909,-0.4237314 43.663742,-0.4237314 43.663742,4.9929351 42.331242,4.9929351 42.331242,-0.4237314 41.789576,-0.4237314 41.789576,-1.8320647 Z" />
+  </g>
+</svg>

packages/uhk-web/src/devices/uhk60-right/separator.xml

@@ -2,6 +2,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="210mm" height="297mm">
 <path
     id="separator"
-    style="fill:none;stroke:#f00;stroke-width:3.6496063;stroke-linecap:round"
-    d="M 16.455118,651.55037 16.455118,737.88305 C 16.455118,737.88305 16.419979,743.14568 11.278346,743.14568 L -10.998425,743.14568 C -10.998425,743.14568 -16.174,743.39316 -16.174,748.40667 L -16.174,804.39801 C -16.174,807.0217 -14.110808,809.66218 -10.998425,809.66218 L -4.719685,809.66218 C -4.719685,809.66218 0.315,809.66109 0.315,814.92517 L 0.315,870.91651 C 0.315,870.91651 0.31884203,876.17868 5.3503937,876.17868 L 28.187008,876.17868 C 28.187008,876.17868 33.311,876.17121 33.311,881.44014 L 33.311,937.43147 C 33.311,937.43147 33.306776,942.69568 28.187008,942.69568 L 4.719685,942.69568 C 4.719685,942.69568 -0.01,942.67983 -0.01,947.95864 L -0.01,1050.5905">
+    style="fill:none;stroke:#c00;stroke-width:3.6496063;stroke-linecap:round"
+    d="M 16.455118,651.55037 16.455118,737.88305 C 16.455118,737.88305 16.419979,743.14568 11.278346,743.14568 L -10.998425,743.14568 C -10.998425,743.14568 -16.174,743.39316 -16.174,748.40667 L -16.174,804.39801 C -16.174,807.0217 -14.110808,809.66218 -10.998425,809.66218 L -4.719685,809.66218 C -4.719685,809.66218 0.315,809.66109 0.315,814.92517 L 0.315,870.91651 C 0.315,870.91651 0.31884203,876.17868 5.3503937,876.17868 L 28.187008,876.17868 C 28.187008,876.17868 33.311,876.17121 33.311,881.44014 L 33.311,937.43147 C 33.311,937.43147 33.306776,942.69568 28.187008,942.69568 L 4.719685,942.69568 C 4.719685,942.69568 -0.01,942.67983 -0.01,947.95864 L -0.01,1050.5905" />
 </svg>