build: set publisherName for win release

This reverts commit 1a14ac020e.

.nvmrc

@@ -1 +1 @@
-8.11.2
+8.12.0

CHANGELOG.md

@@ -6,6 +6,57 @@ 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.12] - 2018-11-14
+
+Firmware: 8.**5.3** [[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.5.3)] | Device Protocol: 4.4.0 | User Config: 4.0.1 | Hardware Config: 1.0.0
+
+- When the firmware of the right keyboard half is larger or equal than 8.4.3 then display the "Lock layer when double tapping this key" checkbox and remove "... macro playback is not implemented yet..." notices.
+- Upgrade to node-hid 0.7.3 which utilizes the hidraw USB driver on Linux instead of libusb.
+- Update udev rules for the new hidraw based node-hid.
+- Improve the "Cannot find your UHK" and the privilege escalation screens to show more relevant messages when transitioning from the libusb based node-hid to the hidraw based node-hid.
+- Fix the rendering of macro actions, so that their text doesn't overlap.
+- Add "International {1,2,3}" and "Language {1,2}" keypress actions.
+- Add icon for the Play/Pause keypress action.
+- Remove the Stop/Eject keypress action.
+- Make the "Type text" macro action accept clipboard data on Mac.
+- Display "You can't change this mapping because on the base layer a layer switcher key targets this key." in the key action popover whenever it applies.
+- Fix UI bug which could be triggered by tapping Tab in the keymap abbreviation input.
+- Don't trigger Agent shortcuts when capturing keypresses.
+- Log USB device list before checking permissions.
+- Show OS-specific modifiers in the title bar of macro actions.
+- Only show the device list on Linux when the list actually changes.
+
+## [1.2.11] - 2018-10-03
+
+Firmware: 8.2.5 [[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.2.5)] | Device Protocol: 4.4.0 | User Config: 4.0.1 | Hardware Config: 1.0.0
+
+- Add backspace and caps lock icons which avoids the overlap of their old texts.
+- Fix right and middle mouse click macro actions which were exchanged.
+- Include Agent version to the firmware update log.
+
+## [1.2.10] - 2018-09-24
+
+Firmware: 8.2.5 [[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.2.5)] | Device Protocol: 4.4.0 | User Config: 4.0.1 | Hardware Config: 1.0.0
+
+- Add History Back and History Forward scancodes.
+- Save the actual decelerated scroll speed instead of using the accelerated scroll speed by accident.
+- Allow layer switcher secondary roles only on the base layer.
+- When remapping modifiers, display a warning suggesting to remap them on all layers.
+- Display more exact instructions on the permission setup screen.
+- Set the decelerated scroll speed of the default configuration from 20 to 10.
+- Map Caps Lock without Ctrl on default keymaps.
+- Rename "Scroll Lock" to "ScrLk" and "Num Lock" to "NumLk" on keys to avoid text overlap.
+- In the scancode select2, display "Print Screen SysRq" and add SysRq above PrtScn when rendering the key.
+- Fix left and right direction titles for mouse movement macro actions.
+
+## [1.2.9] - 2018-09-13
+
+Firmware: 8.2.5 [[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.2.5)] | Device Protocol: 4.4.0 | User Config: 4.0.1 | Hardware Config: 1.0.0
+
+- Display OS-specific modifiers.
+- Display secondary roles.
+- Don't trigger "Remap on all layers" after leaving Agent with Alt+Tab.
+
 ## [1.2.8] - 2018-08-26
 
 Firmware: 8.**2.5** [[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.2.5)] | Device Protocol: 4.4.0 | User Config: 4.0.1 | Hardware Config: 1.0.0

ISSUE_TEMPLATE

@@ -0,0 +1,8 @@
+Before submitting a new issue, make sure to do the following:
+
+1. If you're using Karabiner Elements on your Mac, close it!
+2. Install the latest Agent:
+   https://github.com/UltimateHackingKeyboard/agent/releases/latest
+3. Use Agent to update to the latest firmware:
+   https://github.com/UltimateHackingKeyboard/firmware/releases/latest
+4. Try to reproduce the issue, and only report it if it still persists.

package.json

@@ -3,8 +3,8 @@
   "private": true,
   "author": "Ultimate Gadget Laboratories",
   "main": "electron/dist/electron-main.js",
-  "version": "1.2.8",
-  "firmwareVersion": "8.2.5",
+  "version": "1.2.12",
+  "firmwareVersion": "8.5.3",
   "deviceProtocolVersion": "4.4.0",
   "userConfigVersion": "4.0.1",
   "hardwareConfigVersion": "1.0.0",
@@ -15,8 +15,8 @@
   },
   "license": "GPL-3.0",
   "engines": {
-    "node": ">=8.9.1 <9.0.0",
-    "npm": ">=5.6.0 <6.0.0"
+    "node": ">=8.12.0 <9.0.0",
+    "npm": ">=6.4.0 <7.0.0"
   },
   "devDependencies": {
     "@types/electron-devtools-installer": "2.0.2",
@@ -27,8 +27,9 @@
     "@types/jsonfile": "4.0.1",
     "@types/lodash-es": "4.17.0",
     "@types/node": "8.0.53",
-    "@types/node-hid": "0.5.2",
+    "@types/node-hid": "0.7.0",
     "@types/request": "2.0.8",
+    "@types/semver": "5.5.0",
     "@types/usb": "1.1.3",
     "autoprefixer": "6.5.3",
     "buffer": "5.0.6",
@@ -41,7 +42,7 @@
     "decompress-tarbz2": "4.1.1",
     "devtron": "1.4.0",
     "electron": "1.8.7",
-    "electron-builder": "20.8.1",
+    "electron-builder": "20.34.0",
     "electron-debug": "1.5.0",
     "electron-devtools-installer": "2.2.3",
     "electron-log": "2.2.16",
@@ -57,17 +58,17 @@
     "jasmine-node": "2.0.1",
     "jasmine-ts": "0.2.1",
     "jsonfile": "4.0.0",
-    "lerna": "3.1.4",
+    "lerna": "3.2.0",
     "lodash-es": "4.17.4",
     "mkdirp": "0.5.1",
-    "node-hid": "0.5.7",
+    "node-hid": "0.7.3",
     "npm-run-all": "4.0.2",
     "pre-commit": "1.2.2",
     "request": "2.88.0",
     "rimraf": "2.6.1",
-    "standard-version": "4.2.0",
-    "stylelint": "9.5.0",
-    "svg-sprite": "1.4.0",
+    "standard-version": "4.4.0",
+    "stylelint": "9.6.0",
+    "svg-sprite": "1.5.0",
     "ts-loader": "2.3.1",
     "ts-node": "7.0.1",
     "tslint": "5.9.1",

packages/uhk-agent/package.json

@@ -17,7 +17,7 @@
     "command-line-args": "4.0.7",
     "decompress": "4.2.0",
     "decompress-bzip2": "4.0.0",
-    "node-hid": "0.5.7",
+    "node-hid": "0.7.3",
     "sudo-prompt": "7.0.0",
     "tmp": "0.0.33",
     "uhk-common": "^1.0.0",
@@ -31,10 +31,10 @@
   "scripts": {
     "start": "electron ./dist/electron-main.js",
     "electron:spe": "electron ./dist/electron-main.js --spe",
-    "build": "webpack && npm run install:build-deps && npm run build:usb && npm run download-firmware && npm run copy-blhost",
+    "build": "webpack && npm run install:build-deps && npm run build:usb && npm run download-firmware && npm run copy-to-tmp-folder",
     "build:usb": "electron-rebuild -w node-hid -p -m ./dist",
     "install:build-deps": "cd ./dist && npm i",
     "download-firmware": "node ../../scripts/download-firmware.js",
-    "copy-blhost": "node ../../scripts/copy-blhost.js"
+    "copy-to-tmp-folder": "node ../../scripts/copy-to-tmp-folder.js"
   }
 }

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

@@ -18,12 +18,11 @@ import { AppService } from './services/app.service';
 import { SudoService } from './services/sudo.service';
 import { UhkBlhost } from '../../uhk-usb/src';
 import * as isDev from 'electron-is-dev';
+import { setMenu } from './electron-menu';
 
 const optionDefinitions = [
     {name: 'addons', type: Boolean},
-    {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}
+    {name: 'spe', type: Boolean} // simulate privilege escalation error
 ];
 
 const options: CommandLineArgs = commandLineArgs(optionDefinitions);
@@ -101,9 +100,9 @@ function createWindow() {
         },
         icon: path.join(__dirname, 'renderer/assets/images/agent-app-icon.png')
     });
-    win.setMenuBarVisibility(false);
+    setMenu(win);
     win.maximize();
-    uhkHidDeviceService = new UhkHidDevice(logger, options);
+    uhkHidDeviceService = new UhkHidDevice(logger, options, packagesDir);
     uhkBlhost = new UhkBlhost(logger, packagesDir);
     uhkOperations = new UhkOperations(logger, uhkBlhost, uhkHidDeviceService, packagesDir);
     deviceService = new DeviceService(logger, win, uhkHidDeviceService, uhkOperations, packagesDir);

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

@@ -0,0 +1,37 @@
+import { app, BrowserWindow, Menu, systemPreferences } from 'electron';
+import * as isDev from 'electron-is-dev';
+
+export const setMenu = (win: BrowserWindow): void => {
+    if (process.platform !== 'darwin' || isDev) {
+        win.setMenuBarVisibility(false);
+
+        return;
+    }
+
+    const template = [
+        {
+            label: app.getName(),
+            submenu: [
+                {role: 'quit'}
+            ]
+        },
+        {
+            label: 'Edit',
+            submenu: [
+                {role: 'cut'},
+                {role: 'copy'},
+                {role: 'paste'},
+                {role: 'delete'},
+                {role: 'selectall'}
+            ]
+        }
+    ];
+
+    // hide "Start Dictation" submenu item in Edit menu
+    systemPreferences.setUserDefault('NSDisabledDictationMenuItem', 'boolean', true as any);
+    // hide "Emoji & Symbols" submenu item in Edit menu
+    systemPreferences.setUserDefault('NSDisabledCharacterPaletteMenuItem', 'boolean', false as any);
+
+    const menu = Menu.buildFromTemplate(template);
+    Menu.setApplicationMenu(menu);
+};

packages/uhk-agent/src/package.json

@@ -14,6 +14,6 @@
     "npm": ">=5.1.0 <6.0.0"
   },
   "dependencies": {
-    "node-hid": "0.5.7"
+    "node-hid": "0.7.3"
   }
 }

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

@@ -23,15 +23,12 @@ export class AppService extends MainServiceBase {
 
     private async handleAppStartInfo(event: Electron.Event) {
         this.logService.info('[AppService] getAppStartInfo');
-        const deviceConnectionState = this.uhkHidDeviceService.getDeviceConnectionState();
+        const deviceConnectionState = await this.uhkHidDeviceService.getDeviceConnectionStateAsync();
         const response: AppStartInfo = {
+            deviceConnectionState,
             commandLineArgs: {
-                addons: this.options.addons || false,
-                layerDoubleTap: this.options['layer-double-tap'] || false
+                addons: this.options.addons || false
             },
-            deviceConnected: deviceConnectionState.connected,
-            hasPermission: deviceConnectionState.hasPermission,
-            bootloaderActive: deviceConnectionState.bootloaderActive,
             platform: process.platform as string,
             osVersion: os.release()
         };

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

@@ -1,4 +1,5 @@
 import { ipcMain } from 'electron';
+import { isEqual } from 'lodash';
 import {
     ConfigurationReply,
     DeviceConnectionState,
@@ -9,17 +10,19 @@ import {
     IpcResponse,
     LogService,
     mapObjectToUserConfigBinaryBuffer,
-    SaveUserConfigurationData
+    SaveUserConfigurationData,
+    UpdateFirmwareData
 } from 'uhk-common';
-import { deviceConnectionStateComparer, snooze, UhkHidDevice, UhkOperations } from 'uhk-usb';
+import { snooze, UhkHidDevice, UhkOperations } from 'uhk-usb';
 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/observable/fromPromise';
+import 'rxjs/add/operator/switchMap';
 import 'rxjs/add/operator/startWith';
-import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/distinctUntilChanged';
 
@@ -157,10 +160,12 @@ export class DeviceService {
 
     public async updateFirmware(event: Electron.Event, args?: Array<string>): Promise<void> {
         const response = new FirmwareUpgradeIpcResponse();
+        const data: UpdateFirmwareData = JSON.parse(args[0]);
 
         let firmwarePathData: TmpFirmware;
 
         try {
+            this.logService.debug('Agent version:', data.versionInformation.version);
             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);
@@ -168,8 +173,8 @@ export class DeviceService {
             this.device.resetDeviceCache();
             this.stopPollTimer();
 
-            if (args && args.length > 0) {
-                firmwarePathData = await saveTmpFirmware(args[0]);
+            if (data.firmware) {
+                firmwarePathData = await saveTmpFirmware(data.firmware);
 
                 const packageJson = await getPackageJsonFromPathAsync(firmwarePathData.packageJsonPath);
                 this.logService.debug('New firmware version:', packageJson.firmwareVersion);
@@ -250,8 +255,8 @@ export class DeviceService {
 
         this.pollTimer$ = Observable.interval(1000)
             .startWith(0)
-            .map(() => this.device.getDeviceConnectionState())
-            .distinctUntilChanged<DeviceConnectionState>(deviceConnectionStateComparer)
+            .switchMap(() => Observable.fromPromise(this.device.getDeviceConnectionStateAsync()))
+            .distinctUntilChanged<DeviceConnectionState>(isEqual)
             .do((state: DeviceConnectionState) => {
                 this.win.webContents.send(IpcEvents.device.deviceConnectionStateChanged, state);
                 this.logService.info('[DeviceService] Device connection state changed to:', state);

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

@@ -6,7 +6,7 @@ import * as decompressTarbz from 'decompress-tarbz2';
 
 import { TmpFirmware } from '../models/tmp-firmware';
 
-export async function saveTmpFirmware(data: string): Promise<TmpFirmware> {
+export async function saveTmpFirmware(data: Array<number>): Promise<TmpFirmware> {
     const tmpDirectory = dirSync();
     const zipFilePath = path.join(tmpDirectory.name, 'firmware.bz2');
 
@@ -21,10 +21,9 @@ export async function saveTmpFirmware(data: string): Promise<TmpFirmware> {
     };
 }
 
-function writeDataToFile(data: string, filePath: string): Promise<void> {
+function writeDataToFile(data: Array<number>, filePath: string): Promise<void> {
     return new Promise((resolve, reject) => {
-        const array: Array<number> = JSON.parse(data);
-        const buffer = new Buffer(array);
+        const buffer = new Buffer(data);
 
         fs.writeFile(filePath, buffer, err => {
             if (err) {

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

@@ -3,9 +3,9 @@ import { UhkBuffer } from '../../uhk-buffer';
 import { MacroAction, MacroActionId, MacroMouseSubAction, macroActionType } from './macro-action';
 
 export enum MouseButtons {
-    Left = 1 << 0,
-    Middle = 1 << 1,
-    Right = 1 << 2
+    Left = 0,
+    Right = 1,
+    Middle = 2
 }
 
 export interface JsObjectMouseButtonMacroAction {

packages/uhk-common/src/config-serializer/config-items/scancodes.json

@@ -259,7 +259,7 @@
             },
             {
                 "id": "70",
-                "text": "Print Screen"
+                "text": "Print Screen SysRq"
             },
             {
                 "id": "72",
@@ -454,14 +454,6 @@
                     "scancode": 182
                 }
             },
-            {
-                "id": "132",
-                "text": "Stop/Eject",
-                "additional": {
-                    "type": "media",
-                    "scancode": 204
-                }
-            },
             {
                 "id": "133",
                 "text": "Play/Pause",
@@ -503,11 +495,19 @@
                 }
             },
             {
-                "id": "138",
-                "text": "WWW",
+                "id": "145",
+                "text": "History Back",
                 "additional": {
                     "type": "media",
-                    "scancode": 138
+                    "scancode": 548
+                }
+            },
+            {
+                "id": "146",
+                "text": "History Forward",
+                "additional": {
+                    "type": "media",
+                    "scancode": 549
                 }
             }
         ]
@@ -515,14 +515,6 @@
     {
         "text": "Launch application",
         "children": [
-            {
-                "id": "142",
-                "text": "Launch Web Browser",
-                "additional": {
-                    "type": "media",
-                    "scancode": 406
-                }
-            },
             {
                 "id": "143",
                 "text": "Launch Email Client",
@@ -687,5 +679,50 @@
                 "text": "."
             }
         ]
+    },
+    {
+        "text": "International",
+        "children": [
+            {
+                "id": "235",
+                "text": "International 1",
+                "additional": {
+                    "type": "basic",
+                    "scancode": 135
+                }
+            },
+            {
+                "id": "236",
+                "text": "International 2",
+                "additional": {
+                    "type": "basic",
+                    "scancode": 136
+                }
+            },
+            {
+                "id": "237",
+                "text": "International 3",
+                "additional": {
+                    "type": "basic",
+                    "scancode": 137
+                }
+            },
+            {
+                "id": "244",
+                "text": "Language 1",
+                "additional": {
+                    "type": "basic",
+                    "scancode": 144
+                }
+            },
+            {
+                "id": "245",
+                "text": "Language 2",
+                "additional": {
+                    "type": "basic",
+                    "scancode": 145
+                }
+            }
+        ]
     }
 ]

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

@@ -1,9 +1,12 @@
-import { assertUInt8, assertUInt16 } from '../assert';
+import { assertUInt16, assertUInt8 } from '../assert';
 import { UhkBuffer } from '../uhk-buffer';
 import { Keymap } from './keymap';
 import { Macro } from './macro';
 import { ModuleConfiguration } from './module-configuration';
 import { ConfigSerializer } from '../config-serializer';
+import { KeystrokeAction, NoneAction } from './key-action';
+import { SecondaryRoleAction } from './secondary-role-action';
+import { isScancodeExists } from './scancode-checker';
 
 export class UserConfiguration {
 
@@ -90,7 +93,7 @@ export class UserConfiguration {
         this.mouseMoveAcceleratedSpeed = jsonObject.mouseMoveAcceleratedSpeed;
         this.mouseScrollInitialSpeed = jsonObject.mouseScrollInitialSpeed;
         this.mouseScrollAcceleration = jsonObject.mouseScrollAcceleration;
-        this.mouseScrollDeceleratedSpeed = jsonObject.mouseScrollAcceleration;
+        this.mouseScrollDeceleratedSpeed = jsonObject.mouseScrollDeceleratedSpeed;
         this.mouseScrollBaseSpeed = jsonObject.mouseScrollBaseSpeed;
         this.mouseScrollAcceleratedSpeed = jsonObject.mouseScrollAcceleratedSpeed;
         this.moduleConfigurations = jsonObject.moduleConfigurations.map((moduleConfiguration: any) => {
@@ -102,7 +105,9 @@ export class UserConfiguration {
             return macro;
         });
         this.keymaps = jsonObject.keymaps.map((keymap: any) => new Keymap().fromJsonObject(keymap, this.macros));
+        this.clean();
         this.recalculateConfigurationLength();
+
         return this;
     }
 
@@ -138,6 +143,8 @@ export class UserConfiguration {
         this.keymaps = buffer.readArray<Keymap>(uhkBuffer => new Keymap().fromBinary(uhkBuffer, this.macros));
         ConfigSerializer.resolveSwitchKeymapActions(this.keymaps);
 
+        this.clean();
+
         if (this.userConfigurationLength === 0) {
             this.recalculateConfigurationLength();
         }
@@ -222,4 +229,34 @@ export class UserConfiguration {
             this.deviceName = 'My UHK';
         }
     }
+
+    /* Remove not allowed settings/bugs
+     * 1. Layer Switcher secondary roles allowed only on base layers
+     */
+    private clean(): void {
+        for (const keymap of this.keymaps) {
+            for (let layerId = 1; layerId < keymap.layers.length; layerId++) {
+                const layer = keymap.layers[layerId];
+
+                for (const module of layer.modules) {
+                    for (let keyActionId = 0; keyActionId < module.keyActions.length; keyActionId++) {
+                        const keyAction = module.keyActions[keyActionId];
+                        if (!keyAction || !(keyAction instanceof KeystrokeAction)) {
+                            continue;
+                        }
+
+                        if (keyAction.secondaryRoleAction === SecondaryRoleAction.fn ||
+                            keyAction.secondaryRoleAction === SecondaryRoleAction.mod ||
+                            keyAction.secondaryRoleAction === SecondaryRoleAction.mouse) {
+                            (keyAction as any)._secondaryRoleAction = undefined;
+                        }
+
+                        if (keyAction.hasScancode() && !isScancodeExists(keyAction.scancode)) {
+                            module.keyActions[keyActionId] = new NoneAction();
+                        }
+                    }
+                }
+            }
+        }
+    }
 }

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

@@ -1,10 +1,9 @@
 import { CommandLineArgs } from './command-line-args';
+import { DeviceConnectionState } from './device-connection-state';
 
 export interface AppStartInfo {
     commandLineArgs: CommandLineArgs;
-    deviceConnected: boolean;
-    hasPermission: boolean;
-    bootloaderActive: boolean;
+    deviceConnectionState: DeviceConnectionState;
     platform: string;
     osVersion: string;
 }

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

@@ -7,9 +7,4 @@ 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/models/device-connection-state.ts

@@ -1,5 +1,9 @@
+import { UdevRulesInfo } from './udev-rules-info';
+
 export interface DeviceConnectionState {
     connected: boolean;
     hasPermission: boolean;
     bootloaderActive: boolean;
+    zeroInterfaceAvailable: boolean;
+    udevRulesInfo: UdevRulesInfo;
 }

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

@@ -8,3 +8,5 @@ export * from './device-connection-state';
 export * from './hardware-modules';
 export * from './hardware-module-info';
 export * from './save-user-configuration-data';
+export * from './udev-rules-info';
+export * from './update-firmware-data';

packages/uhk-common/src/models/udev-rules-info.ts

@@ -0,0 +1,16 @@
+/**
+ * What is the state of the udev rules.
+ * Only on Linux need extra udev rules.
+ */
+export enum UdevRulesInfo {
+    Unkonwn,
+    Ok,
+    /**
+     * Udev rules not exists need to setup on Linux
+     */
+    NeedToSetup,
+    /**
+     * Udev rules exist but different than expected on Linux
+     */
+    Different
+}

packages/uhk-common/src/models/update-firmware-data.ts

@@ -0,0 +1,6 @@
+import { VersionInformation } from './version-information';
+
+export interface UpdateFirmwareData {
+    versionInformation: VersionInformation;
+    firmware?: Array<number>;
+}

packages/uhk-usb/package-lock.json

@@ -21,12 +21,12 @@
 			"integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
 		},
 		"are-we-there-yet": {
-			"version": "1.1.4",
-			"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
-			"integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
+			"version": "1.1.5",
+			"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+			"integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
 			"requires": {
-				"delegates": "1.0.0",
-				"readable-stream": "2.3.6"
+				"delegates": "^1.0.0",
+				"readable-stream": "^2.0.6"
 			}
 		},
 		"bindings": {
@@ -36,17 +36,36 @@
 		},
 		"bl": {
 			"version": "1.2.2",
-			"resolved": "https://registry.npmjs.org/bl/-/bl-1.2.2.tgz",
+			"resolved": "http://registry.npmjs.org/bl/-/bl-1.2.2.tgz",
 			"integrity": "sha512-e8tQYnZodmebYDWGH7KMRvtzKXaJHx3BbilrgZCfvyLUYdKpK1t5PSPmpkny/SgiTSCnjfLW7v5rlONXVFkQEA==",
 			"requires": {
-				"readable-stream": "2.3.6",
-				"safe-buffer": "5.1.1"
+				"readable-stream": "^2.3.5",
+				"safe-buffer": "^5.1.1"
 			}
 		},
+		"buffer-alloc": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
+			"integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==",
+			"requires": {
+				"buffer-alloc-unsafe": "^1.1.0",
+				"buffer-fill": "^1.0.0"
+			}
+		},
+		"buffer-alloc-unsafe": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
+			"integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg=="
+		},
+		"buffer-fill": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
+			"integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw="
+		},
 		"chownr": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/chownr/-/chownr-1.0.1.tgz",
-			"integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE="
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.1.tgz",
+			"integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g=="
 		},
 		"code-point-at": {
 			"version": "1.1.0",
@@ -68,13 +87,13 @@
 			"resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
 			"integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
 			"requires": {
-				"mimic-response": "1.0.0"
+				"mimic-response": "^1.0.0"
 			}
 		},
 		"deep-extend": {
-			"version": "0.4.2",
-			"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.2.tgz",
-			"integrity": "sha1-SLaZwn4zS/ifEIkr5DL25MfTSn8="
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+			"integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
 		},
 		"delegates": {
 			"version": "1.0.0",
@@ -91,27 +110,32 @@
 			"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
 			"integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==",
 			"requires": {
-				"once": "1.4.0"
+				"once": "^1.4.0"
 			}
 		},
 		"expand-template": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/expand-template/-/expand-template-1.1.0.tgz",
-			"integrity": "sha512-kkjwkMqj0h4w/sb32ERCDxCQkREMCAgS39DscDnSwDsbxnwwM1BTZySdC3Bn1lhY7vL08n9GoO/fVTynjDgRyQ=="
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/expand-template/-/expand-template-1.1.1.tgz",
+			"integrity": "sha512-cebqLtV8KOZfw0UI8TEFWxtczxxC1jvyUvx6H4fyp1K1FN7A4Q+uggVUlOsI1K8AGU0rwOGqP8nCapdrw8CYQg=="
+		},
+		"fs-constants": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+			"integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="
 		},
 		"gauge": {
 			"version": "2.7.4",
 			"resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
 			"integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
 			"requires": {
-				"aproba": "1.2.0",
-				"console-control-strings": "1.1.0",
-				"has-unicode": "2.0.1",
-				"object-assign": "4.1.1",
-				"signal-exit": "3.0.2",
-				"string-width": "1.0.2",
-				"strip-ansi": "3.0.1",
-				"wide-align": "1.1.2"
+				"aproba": "^1.0.3",
+				"console-control-strings": "^1.0.0",
+				"has-unicode": "^2.0.0",
+				"object-assign": "^4.1.0",
+				"signal-exit": "^3.0.0",
+				"string-width": "^1.0.1",
+				"strip-ansi": "^3.0.1",
+				"wide-align": "^1.1.0"
 			}
 		},
 		"github-from-package": {
@@ -139,7 +163,7 @@
 			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
 			"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
 			"requires": {
-				"number-is-nan": "1.0.1"
+				"number-is-nan": "^1.0.0"
 			}
 		},
 		"isarray": {
@@ -148,18 +172,18 @@
 			"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
 		},
 		"mimic-response": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.0.tgz",
-			"integrity": "sha1-3z02Uqc/3ta5sLJBRub9BSNTRY4="
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+			"integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
 		},
 		"minimist": {
 			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+			"resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
 			"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
 		},
 		"mkdirp": {
 			"version": "0.5.1",
-			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+			"resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
 			"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
 			"requires": {
 				"minimist": "0.0.8"
@@ -167,32 +191,32 @@
 			"dependencies": {
 				"minimist": {
 					"version": "0.0.8",
-					"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+					"resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
 					"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
 				}
 			}
 		},
 		"nan": {
-			"version": "2.10.0",
-			"resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz",
-			"integrity": "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA=="
+			"version": "2.11.1",
+			"resolved": "https://registry.npmjs.org/nan/-/nan-2.11.1.tgz",
+			"integrity": "sha512-iji6k87OSXa0CcrLl9z+ZiYSuR2o+c0bGuNmXdrhTQTakxytAFsC56SArGYoiHlJlFoHSnvmhpceZJaXkVuOtA=="
 		},
 		"node-abi": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.3.0.tgz",
-			"integrity": "sha512-zwm6vU3SsVgw3e9fu48JBaRBCJGIvAgysDsqtf5+vEexFE71bEOtaMWb5zr/zODZNzTPtQlqUUpC79k68Hspow==",
+			"version": "2.4.5",
+			"resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.4.5.tgz",
+			"integrity": "sha512-aa/UC6Nr3+tqhHGRsAuw/edz7/q9nnetBrKWxj6rpTtm+0X9T1qU7lIEHMS3yN9JwAbRiKUbRRFy1PLz/y3aaA==",
 			"requires": {
-				"semver": "5.5.0"
+				"semver": "^5.4.1"
 			}
 		},
 		"node-hid": {
-			"version": "0.5.7",
-			"resolved": "https://registry.npmjs.org/node-hid/-/node-hid-0.5.7.tgz",
-			"integrity": "sha512-dwwpOetL2+MGYgivbO22ML+45ieCGbueWv1rYxRgBoEc2QMp6UF6ZucEkYts1IA3YPWJNkmpGh6dqQ85n19szw==",
+			"version": "0.7.3",
+			"resolved": "https://registry.npmjs.org/node-hid/-/node-hid-0.7.3.tgz",
+			"integrity": "sha512-LOCqWqcOlng+Kn1Qj/54zrPVfCagg1O7RlSgMmugykBcoYvUud6BswTrJM2aXuBac+bCCm3lA2srRG8YfmyXZQ==",
 			"requires": {
-				"bindings": "1.3.0",
-				"nan": "2.10.0",
-				"prebuild-install": "2.5.1"
+				"bindings": "^1.3.0",
+				"nan": "^2.10.0",
+				"prebuild-install": "^4.0.0"
 			}
 		},
 		"noop-logger": {
@@ -205,10 +229,10 @@
 			"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
 			"integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
 			"requires": {
-				"are-we-there-yet": "1.1.4",
-				"console-control-strings": "1.1.0",
-				"gauge": "2.7.4",
-				"set-blocking": "2.0.0"
+				"are-we-there-yet": "~1.1.2",
+				"console-control-strings": "~1.1.0",
+				"gauge": "~2.7.3",
+				"set-blocking": "~2.0.0"
 			}
 		},
 		"number-is-nan": {
@@ -226,7 +250,7 @@
 			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
 			"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
 			"requires": {
-				"wrappy": "1.0.2"
+				"wrappy": "1"
 			}
 		},
 		"os-homedir": {
@@ -235,25 +259,25 @@
 			"integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
 		},
 		"prebuild-install": {
-			"version": "2.5.1",
-			"resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-2.5.1.tgz",
-			"integrity": "sha512-3DX9L6pzwc1m1ksMkW3Ky2WLgPQUBiySOfXVl3WZyAeJSyJb4wtoH9OmeRGcubAWsMlLiL8BTHbwfm/jPQE9Ag==",
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-4.0.0.tgz",
+			"integrity": "sha512-7tayxeYboJX0RbVzdnKyGl2vhQRWr6qfClEXDhOkXjuaOKCw2q8aiuFhONRYVsG/czia7KhpykIlI2S2VaPunA==",
 			"requires": {
-				"detect-libc": "1.0.3",
-				"expand-template": "1.1.0",
+				"detect-libc": "^1.0.3",
+				"expand-template": "^1.0.2",
 				"github-from-package": "0.0.0",
-				"minimist": "1.2.0",
-				"mkdirp": "0.5.1",
-				"node-abi": "2.3.0",
-				"noop-logger": "0.1.1",
-				"npmlog": "4.1.2",
-				"os-homedir": "1.0.2",
-				"pump": "2.0.1",
-				"rc": "1.2.6",
-				"simple-get": "2.7.0",
-				"tar-fs": "1.16.0",
-				"tunnel-agent": "0.6.0",
-				"which-pm-runs": "1.0.0"
+				"minimist": "^1.2.0",
+				"mkdirp": "^0.5.1",
+				"node-abi": "^2.2.0",
+				"noop-logger": "^0.1.1",
+				"npmlog": "^4.0.1",
+				"os-homedir": "^1.0.1",
+				"pump": "^2.0.1",
+				"rc": "^1.1.6",
+				"simple-get": "^2.7.0",
+				"tar-fs": "^1.13.0",
+				"tunnel-agent": "^0.6.0",
+				"which-pm-runs": "^1.0.0"
 			}
 		},
 		"process-nextick-args": {
@@ -266,44 +290,44 @@
 			"resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
 			"integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
 			"requires": {
-				"end-of-stream": "1.4.1",
-				"once": "1.4.0"
+				"end-of-stream": "^1.1.0",
+				"once": "^1.3.1"
 			}
 		},
 		"rc": {
-			"version": "1.2.6",
-			"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.6.tgz",
-			"integrity": "sha1-6xiYnG1PTxYsOZ953dKfODVWgJI=",
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+			"integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
 			"requires": {
-				"deep-extend": "0.4.2",
-				"ini": "1.3.5",
-				"minimist": "1.2.0",
-				"strip-json-comments": "2.0.1"
+				"deep-extend": "^0.6.0",
+				"ini": "~1.3.0",
+				"minimist": "^1.2.0",
+				"strip-json-comments": "~2.0.1"
 			}
 		},
 		"readable-stream": {
 			"version": "2.3.6",
-			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+			"resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
 			"integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
 			"requires": {
-				"core-util-is": "1.0.2",
-				"inherits": "2.0.3",
-				"isarray": "1.0.0",
-				"process-nextick-args": "2.0.0",
-				"safe-buffer": "5.1.1",
-				"string_decoder": "1.1.1",
-				"util-deprecate": "1.0.2"
+				"core-util-is": "~1.0.0",
+				"inherits": "~2.0.3",
+				"isarray": "~1.0.0",
+				"process-nextick-args": "~2.0.0",
+				"safe-buffer": "~5.1.1",
+				"string_decoder": "~1.1.1",
+				"util-deprecate": "~1.0.1"
 			}
 		},
 		"safe-buffer": {
-			"version": "5.1.1",
-			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
-			"integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+			"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
 		},
 		"semver": {
-			"version": "5.5.0",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
-			"integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA=="
+			"version": "5.5.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-5.5.1.tgz",
+			"integrity": "sha512-PqpAxfrEhlSUWge8dwIp4tZnQ25DIOthpiaHNIthsjEFQD6EvqUKUDM7L8O2rShkFccYo1VjJR0coWfNkCubRw=="
 		},
 		"set-blocking": {
 			"version": "2.0.0",
@@ -321,13 +345,13 @@
 			"integrity": "sha1-c0TLuLbib7J9ZrL8hvn21Zl1IcY="
 		},
 		"simple-get": {
-			"version": "2.7.0",
-			"resolved": "https://registry.npmjs.org/simple-get/-/simple-get-2.7.0.tgz",
-			"integrity": "sha512-RkE9rGPHcxYZ/baYmgJtOSM63vH0Vyq+ma5TijBcLla41SWlh8t6XYIGMR/oeZcmr+/G8k+zrClkkVrtnQ0esg==",
+			"version": "2.8.1",
+			"resolved": "https://registry.npmjs.org/simple-get/-/simple-get-2.8.1.tgz",
+			"integrity": "sha512-lSSHRSw3mQNUGPAYRqo7xy9dhKmxFXIjLjp4KHpf99GEH2VH7C3AM+Qfx6du6jhfUi6Vm7XnbEVEf7Wb6N8jRw==",
 			"requires": {
-				"decompress-response": "3.3.0",
-				"once": "1.4.0",
-				"simple-concat": "1.0.0"
+				"decompress-response": "^3.3.0",
+				"once": "^1.3.1",
+				"simple-concat": "^1.0.0"
 			}
 		},
 		"string-width": {
@@ -335,9 +359,9 @@
 			"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
 			"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
 			"requires": {
-				"code-point-at": "1.1.0",
-				"is-fullwidth-code-point": "1.0.0",
-				"strip-ansi": "3.0.1"
+				"code-point-at": "^1.0.0",
+				"is-fullwidth-code-point": "^1.0.0",
+				"strip-ansi": "^3.0.0"
 			}
 		},
 		"string_decoder": {
@@ -345,15 +369,15 @@
 			"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
 			"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
 			"requires": {
-				"safe-buffer": "5.1.1"
+				"safe-buffer": "~5.1.0"
 			}
 		},
 		"strip-ansi": {
 			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+			"resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
 			"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
 			"requires": {
-				"ansi-regex": "2.1.1"
+				"ansi-regex": "^2.0.0"
 			}
 		},
 		"strip-json-comments": {
@@ -362,14 +386,14 @@
 			"integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
 		},
 		"tar-fs": {
-			"version": "1.16.0",
-			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-1.16.0.tgz",
-			"integrity": "sha512-I9rb6v7mjWLtOfCau9eH5L7sLJyU2BnxtEZRQ5Mt+eRKmf1F0ohXmT/Jc3fr52kDvjJ/HV5MH3soQfPL5bQ0Yg==",
+			"version": "1.16.3",
+			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-1.16.3.tgz",
+			"integrity": "sha512-NvCeXpYx7OsmOh8zIOP/ebG55zZmxLE0etfWRbWok+q2Qo8x/vOR/IJT1taADXPe+jsiu9axDb3X4B+iIgNlKw==",
 			"requires": {
-				"chownr": "1.0.1",
-				"mkdirp": "0.5.1",
-				"pump": "1.0.3",
-				"tar-stream": "1.5.5"
+				"chownr": "^1.0.1",
+				"mkdirp": "^0.5.1",
+				"pump": "^1.0.0",
+				"tar-stream": "^1.1.2"
 			},
 			"dependencies": {
 				"pump": {
@@ -377,29 +401,37 @@
 					"resolved": "https://registry.npmjs.org/pump/-/pump-1.0.3.tgz",
 					"integrity": "sha512-8k0JupWme55+9tCVE+FS5ULT3K6AbgqrGa58lTT49RpyfwwcGedHqaC5LlQNdEAumn/wFsu6aPwkuPMioy8kqw==",
 					"requires": {
-						"end-of-stream": "1.4.1",
-						"once": "1.4.0"
+						"end-of-stream": "^1.1.0",
+						"once": "^1.3.1"
 					}
 				}
 			}
 		},
 		"tar-stream": {
-			"version": "1.5.5",
-			"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.5.5.tgz",
-			"integrity": "sha512-mQdgLPc/Vjfr3VWqWbfxW8yQNiJCbAZ+Gf6GDu1Cy0bdb33ofyiNGBtAY96jHFhDuivCwgW1H9DgTON+INiXgg==",
+			"version": "1.6.2",
+			"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.6.2.tgz",
+			"integrity": "sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A==",
 			"requires": {
-				"bl": "1.2.2",
-				"end-of-stream": "1.4.1",
-				"readable-stream": "2.3.6",
-				"xtend": "4.0.1"
+				"bl": "^1.0.0",
+				"buffer-alloc": "^1.2.0",
+				"end-of-stream": "^1.0.0",
+				"fs-constants": "^1.0.0",
+				"readable-stream": "^2.3.0",
+				"to-buffer": "^1.1.1",
+				"xtend": "^4.0.0"
 			}
 		},
+		"to-buffer": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/to-buffer/-/to-buffer-1.1.1.tgz",
+			"integrity": "sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg=="
+		},
 		"tunnel-agent": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
 			"integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
 			"requires": {
-				"safe-buffer": "5.1.1"
+				"safe-buffer": "^5.0.1"
 			}
 		},
 		"util-deprecate": {
@@ -413,11 +445,11 @@
 			"integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs="
 		},
 		"wide-align": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
-			"integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+			"integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
 			"requires": {
-				"string-width": "1.0.2"
+				"string-width": "^1.0.2 || 2"
 			}
 		},
 		"wrappy": {

packages/uhk-usb/package.json

@@ -11,7 +11,7 @@
     "@types/node": "8.0.28"
   },
   "dependencies": {
-    "node-hid": "0.5.7",
+    "node-hid": "0.7.3",
     "uhk-common": "1.0.0"
   }
 }

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

@@ -1,5 +1,8 @@
 import { Device, devices, HID } from 'node-hid';
-import { CommandLineArgs, DeviceConnectionState, isEqualArray, LogService } from 'uhk-common';
+import { pathExists } from 'fs-extra';
+import * as path from 'path';
+import { platform } from 'os';
+import { CommandLineArgs, DeviceConnectionState, isEqualArray, LogService, UdevRulesInfo } from 'uhk-common';
 
 import {
     ConfigBufferId,
@@ -13,7 +16,7 @@ import {
     UsbCommand,
     UsbVariables
 } from './constants';
-import { bufferToString, getTransferData, isUhkDevice, retry, snooze } from './util';
+import { bufferToString, getFileContentAsync, getTransferData, isUhkDevice, isUhkZeroInterface, retry, snooze } from './util';
 
 export const BOOTLOADER_TIMEOUT_MS = 5000;
 
@@ -28,9 +31,11 @@ export class UhkHidDevice {
     private _prevDevices = [];
     private _device: HID;
     private _hasPermission = false;
+    private _udevRulesInfo = UdevRulesInfo.Unkonwn;
 
     constructor(private logService: LogService,
-                private options: CommandLineArgs) {
+                private options: CommandLineArgs,
+                private rootDir: string) {
     }
 
     /**
@@ -50,7 +55,11 @@ export class UhkHidDevice {
                 return true;
             }
 
-            const dev = devices().find((x: Device) => isUhkDevice(x) || x.productId === Constants.BOOTLOADER_ID);
+            this.logService.debug('[UhkHidDevice] Devices before check permission:');
+            const devs = devices();
+            this.logDevices(devs);
+
+            const dev = devs.find((x: Device) => isUhkZeroInterface(x) || x.productId === Constants.BOOTLOADER_ID);
 
             if (!dev) {
                 return true;
@@ -70,20 +79,26 @@ export class UhkHidDevice {
     }
 
     /**
-     * Return with true is an UHK Device is connected to the computer.
-     * @returns {boolean}
+     * Return with the USB device communication sate.
+     * @returns {DeviceConnectionState}
      */
-    public getDeviceConnectionState(): DeviceConnectionState {
+    public async getDeviceConnectionStateAsync(): Promise<DeviceConnectionState> {
         const devs = devices();
         const result: DeviceConnectionState = {
             bootloaderActive: false,
             connected: false,
-            hasPermission: this.hasPermission()
+            zeroInterfaceAvailable: false,
+            hasPermission: this.hasPermission(),
+            udevRulesInfo: await this.getUdevInfoAsync()
         };
 
         for (const dev of devs) {
             if (isUhkDevice(dev)) {
                 result.connected = true;
+            }
+
+            if (isUhkZeroInterface(dev)) {
+                result.zeroInterfaceAvailable = true;
             } else if (dev.vendorId === Constants.VENDOR_ID &&
                 dev.productId === Constants.BOOTLOADER_ID) {
                 result.bootloaderActive = true;
@@ -258,17 +273,25 @@ export class UhkHidDevice {
     private connectToDevice(): HID {
         try {
             const devs = devices();
-            if (!isEqualArray(this._prevDevices, devs)) {
+            let compareDevices = devs as any;
+
+            if (platform() === 'linux') {
+                compareDevices = devs.map(x => ({
+                    productId: x.productId,
+                    vendorId: x.vendorId,
+                    interface: x.interface
+                }));
+            }
+
+            if (!isEqualArray(this._prevDevices, compareDevices)) {
                 this.logService.debug('[UhkHidDevice] Available devices:');
-                for (const logDevice of devs) {
-                    this.logService.debug(JSON.stringify(logDevice));
-                }
-                this._prevDevices = devs;
+                this.logDevices(devs);
+                this._prevDevices = compareDevices;
             } else {
                 this.logService.debug('[UhkHidDevice] Available devices unchanged');
             }
 
-            const dev = devs.find(isUhkDevice);
+            const dev = devs.find(isUhkZeroInterface);
 
             if (!dev) {
                 this.logService.debug('[UhkHidDevice] UHK Device not found:');
@@ -277,13 +300,43 @@ export class UhkHidDevice {
             const device = new HID(dev.path);
             this.logService.debug('[UhkHidDevice] Used device:', JSON.stringify(dev));
             return device;
-        }
-        catch (err) {
+        } catch (err) {
             this.logService.error('[UhkHidDevice] Can not create device:', err);
         }
 
         return null;
     }
+
+    private logDevices(devs: Array<Device>): void {
+        for (const logDevice of devs) {
+            this.logService.debug(JSON.stringify(logDevice));
+        }
+    }
+
+    private async getUdevInfoAsync(): Promise<UdevRulesInfo> {
+        if (this._udevRulesInfo === UdevRulesInfo.Ok) {
+            return UdevRulesInfo.Ok;
+        }
+
+        if (process.platform === 'win32' || process.platform === 'darwin') {
+            this._udevRulesInfo = UdevRulesInfo.Ok;
+            return UdevRulesInfo.Ok;
+        }
+
+        if (!(await pathExists('/etc/udev/rules.d/50-uhk60.rules'))) {
+            return UdevRulesInfo.NeedToSetup;
+        }
+
+        const expectedUdevSettings = await getFileContentAsync(path.join(this.rootDir, 'rules/50-uhk60.rules'));
+        const currentUdevSettings = await getFileContentAsync('/etc/udev/rules.d/50-uhk60.rules');
+
+        if (isEqualArray(expectedUdevSettings, currentUdevSettings)) {
+            this._udevRulesInfo = UdevRulesInfo.Ok;
+            return UdevRulesInfo.Ok;
+        }
+
+        return UdevRulesInfo.Different;
+    }
 }
 
 function kbootCommandName(module: ModuleSlotToI2cAddress): string {

packages/uhk-usb/src/util.ts

@@ -1,5 +1,7 @@
 import { Device } from 'node-hid';
-import { DeviceConnectionState, LogService } from 'uhk-common';
+import { readFile } from 'fs-extra';
+import { EOL } from 'os';
+import { LogService } from 'uhk-common';
 
 import { Constants, UsbCommand } from './constants';
 
@@ -98,13 +100,7 @@ export async function retry(command: Function, maxTry = 3, logService?: LogServi
     }
 }
 
-export const deviceConnectionStateComparer = (a: DeviceConnectionState, b: DeviceConnectionState): boolean => {
-    return a.hasPermission === b.hasPermission
-        && a.connected === b.connected
-        && a.bootloaderActive === b.bootloaderActive;
-};
-
-export const isUhkDevice = (dev: Device): boolean => {
+export const isUhkZeroInterface = (dev: Device): boolean => {
     return dev.vendorId === Constants.VENDOR_ID &&
     dev.productId === Constants.PRODUCT_ID &&
     // hidapi can not read the interface number on Mac, so check the usage page and usage
@@ -112,3 +108,17 @@ export const isUhkDevice = (dev: Device): boolean => {
         (dev.usagePage === (0xFF00 | 0x00) && dev.usage === 0x01) || // New firmware
         dev.interface === 0);
 };
+
+export const isUhkDevice = (dev: Device): boolean => {
+    return dev.vendorId === Constants.VENDOR_ID &&
+        (dev.productId === Constants.PRODUCT_ID || dev.productId === Constants.BOOTLOADER_ID);
+};
+
+export const getFileContentAsync = async (filePath: string): Promise<Array<string>> => {
+    const fileContent = await readFile(filePath, {encoding: 'utf-8'});
+
+    return fileContent
+        .split(EOL)
+        .map(x => x.trim())
+        .filter(x => !x.startsWith('#') && x.length > 0);
+};

packages/uhk-web/.gitignore

@@ -0,0 +1 @@
+out-tsc/

packages/uhk-web/package.json

@@ -70,6 +70,7 @@
     "reselect": "3.0.1",
     "rxjs": "5.5.8",
     "typescript": "2.6.2",
+    "semver": "5.6.0",
     "uhk-common": "1.0.0",
     "xml-loader": "1.2.1",
     "zone.js": "0.8.26",

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

@@ -13,7 +13,8 @@ import {
     getShowAppUpdateAvailable,
     deviceConfigurationLoaded,
     runningInElectron,
-    saveToKeyboardState
+    saveToKeyboardState,
+    keypressCapturing
 } from './store';
 import { ProgressButtonState } from './store/reducers/progress-button-state';
 
@@ -42,7 +43,9 @@ export class MainAppComponent implements OnDestroy {
     runningInElectron$: Observable<boolean>;
     saveToKeyboardState: ProgressButtonState;
 
+    private keypressCapturing: boolean;
     private saveToKeyboardStateSubscription: Subscription;
+    private keypressCapturingSubscription: Subscription;
 
     constructor(private store: Store<AppState>) {
         this.showUpdateAvailable$ = store.select(getShowAppUpdateAvailable);
@@ -50,10 +53,13 @@ export class MainAppComponent implements OnDestroy {
         this.runningInElectron$ = store.select(runningInElectron);
         this.saveToKeyboardStateSubscription = store.select(saveToKeyboardState)
             .subscribe(data => this.saveToKeyboardState = data);
+        this.keypressCapturingSubscription = store.select(keypressCapturing)
+            .subscribe(data => this.keypressCapturing = data);
     }
 
     ngOnDestroy(): void {
         this.saveToKeyboardStateSubscription.unsubscribe();
+        this.keypressCapturingSubscription.unsubscribe();
     }
 
     @HostListener('document:keydown', ['$event'])
@@ -61,7 +67,8 @@ export class MainAppComponent implements OnDestroy {
         if (this.saveToKeyboardState.showButton &&
             event.ctrlKey &&
             event.key === 's' &&
-            !event.defaultPrevented) {
+            !event.defaultPrevented &&
+            !this.keypressCapturing) {
             this.clickedOnProgressButton(this.saveToKeyboardState.action);
             event.preventDefault();
         }

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

@@ -1,6 +1,6 @@
 <div class="row">
     <h1 class="col-xs-12 pane-title">
-        <i class="uhk-icon uhk-icon-agent-icon"></i>
+        <i class="uhk-icon uhk-icon-pure-agent-icon"></i>
         <span>About</span>
     </h1>
     <div class="col-xs-12">

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

@@ -8,4 +8,3 @@
     font-size: 16px;
     text-align: center;
 }
-

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

@@ -14,7 +14,7 @@ import 'rxjs/add/operator/combineLatest';
 
 import { saveAs } from 'file-saver';
 
-import { allowLayerDoubleTap, AppState, getKeyboardLayout } from '../../../store';
+import { layerDoubleTapSupported, AppState, getKeyboardLayout } from '../../../store';
 import { getKeymap, getKeymaps, getUserConfiguration } from '../../../store/reducers/user-configuration';
 import { KeyboardLayout } from '../../../keyboard/keyboard-layout.enum';
 import { KeymapActions } from '../../../store/actions';
@@ -51,7 +51,7 @@ export class KeymapEditComponent {
             .map((keymaps: Keymap[]) => keymaps.length > 1);
 
         this.keyboardLayout$ = store.select(getKeyboardLayout);
-        this.allowLayerDoubleTap$ = store.select(allowLayerDoubleTap);
+        this.allowLayerDoubleTap$ = store.select(layerDoubleTapSupported);
     }
 
     downloadKeymap() {

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

@@ -43,4 +43,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>

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

@@ -93,10 +93,17 @@
             <h4 *ngIf="activeTab === TabName.Hold">Hold mouse button</h4>
             <h4 *ngIf="activeTab === TabName.Release">Release mouse button</h4>
             <div class="btn-group">
-                <button *ngFor="let buttonLabel of buttonLabels; let buttonIndex = index"
-                        class="btn btn-default"
-                        [class.btn-primary]="hasButton(buttonIndex)"
-                        (click)="setMouseClick(buttonIndex)">{{buttonLabel}}
+                <button class="btn btn-default"
+                        [class.btn-primary]="hasButton(MouseButtons.Left)"
+                        (click)="setMouseClick(MouseButtons.Left)">Left
+                </button>
+                <button class="btn btn-default"
+                        [class.btn-primary]="hasButton(MouseButtons.Middle)"
+                        (click)="setMouseClick(MouseButtons.Middle)">Middle
+                </button>
+                <button class="btn btn-default"
+                        [class.btn-primary]="hasButton(MouseButtons.Right)"
+                        (click)="setMouseClick(MouseButtons.Right)">Right
                 </button>
             </div>
         </div>

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

@@ -1,10 +1,11 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 
 import {
+    MacroMouseSubAction,
+    MouseButtons,
     MouseButtonMacroAction,
     MoveMouseMacroAction,
-    ScrollMouseMacroAction,
-    MacroMouseSubAction
+    ScrollMouseMacroAction
 } from 'uhk-common';
 import { Tab } from '../../../../popover/tab';
 import { MacroBaseComponent } from '../macro-base.component';
@@ -33,6 +34,7 @@ export class MacroMouseTabComponent extends MacroBaseComponent implements OnInit
     @ViewChild('tab') selectedTab: Tab;
 
     /* tslint:disable:variable-name: It is an enum type. So it can start with uppercase. */
+    MouseButtons = MouseButtons;
     TabName = TabName;
     /* tslint:enable:variable-name */
     activeTab: TabName;

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

@@ -4,7 +4,6 @@ import {
     Component,
     ElementRef,
     Input,
-    Renderer,
     ViewChild
 } from '@angular/core';
 import { TextMacroAction } from 'uhk-common';
@@ -23,14 +22,14 @@ export class MacroTextTabComponent extends MacroBaseComponent implements OnInit,
     @Input() macroAction: TextMacroAction;
     @ViewChild('macroTextInput') input: ElementRef;
 
-    constructor(private renderer: Renderer) { super(); }
+    constructor() { super(); }
 
     ngOnInit() {
         this.init();
     }
 
     ngAfterViewInit() {
-        this.renderer.invokeElementMethod(this.input.nativeElement, 'focus');
+        this.input.nativeElement.focus();
     }
 
     onTextChange() {

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

@@ -5,6 +5,7 @@
     ></macro-header>
     <macro-list
         [macro]="macro"
+        [macroPlaybackSupported]="macroPlaybackSupported$ | async"
         (add)="addAction($event.macroId, $event.action)"
         (edit)="editAction($event.macroId, $event.index, $event.action)"
         (delete)="deleteAction($event.macroId, $event.index, $event.action)"

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

@@ -3,11 +3,12 @@ import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Macro, MacroAction } from 'uhk-common';
 
+import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/operator/pluck';
 
 import { MacroActions } from '../../../store/actions';
-import { AppState } from '../../../store';
+import { AppState, macroPlaybackSupported } from '../../../store';
 import { getMacro } from '../../../store/reducers/user-configuration';
 
 @Component({
@@ -22,6 +23,7 @@ export class MacroEditComponent implements OnDestroy {
     macro: Macro;
     isNew: boolean;
     macroId: number;
+    macroPlaybackSupported$: Observable<boolean>;
 
     private subscription: Subscription;
     constructor(private store: Store<AppState>, public route: ActivatedRoute) {
@@ -37,6 +39,7 @@ export class MacroEditComponent implements OnDestroy {
             });
 
         this.isNew = this.route.snapshot.params['empty'] === 'new';
+        this.macroPlaybackSupported$ = this.store.select(macroPlaybackSupported);
     }
 
     ngOnDestroy() {

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

@@ -5,6 +5,7 @@ import {
     KeyMacroAction,
     KeyModifiers,
     MacroAction,
+    MouseButtons,
     MouseButtonMacroAction,
     MoveMouseMacroAction,
     ScrollMouseMacroAction,
@@ -154,7 +155,7 @@ export class MacroItemComponent implements OnInit, OnChanges {
             // Tap/press/release modifiers
             for (let i = KeyModifiers.leftCtrl; i <= KeyModifiers.rightGui; i <<= 1) {
                 if (action.isModifierActive(i)) {
-                    this.title += ' ' + KeyModifiers[i];
+                    this.title += ' ' + this.mapper.getOsSpecificModifierTextByValue(i);
                 }
             }
         }
@@ -176,7 +177,7 @@ export class MacroItemComponent implements OnInit, OnChanges {
 
         let needAnd: boolean;
         if (Math.abs(typedAction.x) !== 0) {
-            this.title += ` by ${Math.abs(typedAction.x)}px ${typedAction.x > 0 ? 'leftward' : 'rightward'}`;
+            this.title += ` by ${Math.abs(typedAction.x)}px ${typedAction.x > 0 ? 'rightward' : 'leftward'}`;
             needAnd = true;
         }
         if (Math.abs(typedAction.y) !== 0) {
@@ -197,12 +198,11 @@ export class MacroItemComponent implements OnInit, OnChanges {
             this.title = 'Release mouse button: ';
         }
 
-        const buttonLabels: string[] = ['Left', 'Middle', 'Right'];
         const selectedButtons: boolean[] = action.getMouseButtons();
         const selectedButtonLabels: string[] = [];
         selectedButtons.forEach((isSelected, idx) => {
-            if (isSelected && buttonLabels[idx]) {
-                selectedButtonLabels.push(buttonLabels[idx]);
+            if (isSelected && MouseButtons[idx]) {
+                selectedButtonLabels.push(MouseButtons[idx]);
             }
         });
         this.title += selectedButtonLabels.join(', ');

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

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

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

@@ -35,6 +35,7 @@ import { MacroItemComponent } from '../item';
 })
 export class MacroListComponent {
     @Input() macro: Macro;
+    @Input() macroPlaybackSupported: boolean;
     @ViewChildren(forwardRef(() => MacroItemComponent)) macroItems: QueryList<MacroItemComponent>;
 
     @Output() add = new EventEmitter();

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

@@ -1 +1 @@
-<uhk-message header="Cannot find your UHK" subtitle="Please plug it in!"></uhk-message>
+<uhk-message [header]="state.header" [subtitle]="state.subtitle"></uhk-message>

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

@@ -1,14 +1,27 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Subscription } from 'rxjs/Subscription';
 
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/operator/ignoreElements';
-import 'rxjs/add/operator/takeWhile';
+import { AppState, getMissingDeviceState } from '../../store';
+import { MissingDeviceState } from '../../models/missing-device-state';
 
 @Component({
     selector: 'missing-device',
     templateUrl: './missing-device.component.html'
 })
-export class MissingDeviceComponent {
+export class MissingDeviceComponent implements OnDestroy {
 
-    constructor() {}
+    state: MissingDeviceState;
+
+    private stateSubscription: Subscription;
+
+    constructor(private store: Store<AppState>) {
+        this.stateSubscription = this.store
+            .select(getMissingDeviceState)
+            .subscribe(state => this.state = state);
+    }
+
+    ngOnDestroy(): void {
+        this.stateSubscription.unsubscribe();
+    }
 }

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

@@ -8,71 +8,50 @@
     <div class="arrowCustom"></div>
     <div class="popover-title menu-tabs">
         <ul class="nav nav-tabs popover-menu">
-            <li #keypress [class.active]="activeTab === tabName.Keypress" (click)="selectTab(tabName.Keypress)">
+            <li *ngFor="let tab of tabHeaders; trackBy:trackTabHeader"
+                [class.active]="activeTab === tab.tabName"
+                [class.disabled]="tab.disabled"
+                (click)="selectTab(tab)">
                 <a class="menu-tabs--item">
-                    <i class="fa fa-keyboard-o"></i>
-                    <span>Keypress</span>
-                </a>
-            </li>
-            <li #layer [class.active]="activeTab === tabName.Layer" (click)="selectTab(tabName.Layer)">
-                <a class="menu-tabs--item">
-                    <i class="fa fa-clone"></i>
-                    <span>Layer</span>
-                </a>
-            </li>
-            <li #mouse [class.active]="activeTab === tabName.Mouse" (click)="selectTab(tabName.Mouse)">
-                <a class="menu-tabs--item">
-                    <i class="fa fa-mouse-pointer"></i>
-                    <span>Mouse</span>
-                </a>
-            </li>
-            <li #macro [class.active]="activeTab === tabName.Macro" (click)="selectTab(tabName.Macro)">
-                <a class="menu-tabs--item">
-                    <i class="fa fa-play"></i>
-                    <span>Macro</span>
-                </a>
-            </li>
-            <li #keymap [class.active]="activeTab === tabName.Keymap" (click)="selectTab(tabName.Keymap)">
-                <a class="menu-tabs--item">
-                    <i class="fa fa-keyboard-o"></i>
-                    <span>Keymap</span>
-                </a>
-            </li>
-            <li #none [class.active]="activeTab === tabName.None" (click)="selectTab(tabName.None)">
-                <a class="menu-tabs--item">
-                    <i class="fa fa-ban"></i>
-                    <span>None</span>
+                    <i class="fa"
+                       [ngClass]="tab.icon"></i>
+                    <span>{{ tab.text }}</span>
                 </a>
             </li>
         </ul>
     </div>
     <div [ngSwitch]="activeTab">
-        <keypress-tab #tab *ngSwitchCase="tabName.Keypress" class="popover-content"
-                      [defaultKeyAction]="defaultKeyAction"
+        <keypress-tab #tab *ngSwitchCase="tabName.Keypress" class="popover-content pr-10"
+                      [defaultKeyAction]="shadowKeyAction"
                       [secondaryRoleEnabled]="true"
-                      (validAction)="keyActionValid=$event"
+                      [allowRemapOnAllKeymapWarning]="true"
+                      [remapInfo]="remapInfo"
+                      [showLayerSwitcherInSecondaryRoles]="currentLayer === 0"
+                      (validAction)="setKeyActionValidState($event)"
+                      (keyActionChange)="keystrokeActionChange($event)"
         ></keypress-tab>
         <layer-tab #tab *ngSwitchCase="tabName.Layer" class="popover-content"
                    [defaultKeyAction]="defaultKeyAction"
                    [currentLayer]="currentLayer"
                    [allowLayerDoubleTap]="allowLayerDoubleTap"
-                   (validAction)="keyActionValid=$event"
+                   (validAction)="setKeyActionValidState($event)"
         ></layer-tab>
         <mouse-tab #tab *ngSwitchCase="tabName.Mouse" class="popover-content"
                    [defaultKeyAction]="defaultKeyAction"
-                   (validAction)="keyActionValid=$event"
+                   (validAction)="setKeyActionValidState($event)"
         ></mouse-tab>
         <macro-tab #tab *ngSwitchCase="tabName.Macro" class="popover-content"
                    [defaultKeyAction]="defaultKeyAction"
-                   (validAction)="keyActionValid=$event"
+                   [macroPlaybackSupported]="macroPlaybackSupported$ | async"
+                   (validAction)="setKeyActionValidState($event)"
         ></macro-tab>
         <keymap-tab #tab *ngSwitchCase="tabName.Keymap" class="popover-content"
                     [defaultKeyAction]="defaultKeyAction"
                     [keymaps]="keymaps$ | async"
-                    (validAction)="keyActionValid=$event"
+                    (validAction)="setKeyActionValidState($event)"
         ></keymap-tab>
         <none-tab #tab *ngSwitchCase="tabName.None" class="popover-content"
-                  (validAction)="keyActionValid=$event"
+                  (validAction)="setKeyActionValidState($event)"
         ></none-tab>
     </div>
     <div class="popover-action">
@@ -85,10 +64,12 @@
                 </label>
             </div>
             <div class="checkbox">
-                <label>
+                <label [ngClass]="{ disabled: disableRemapOnAllLayer }">
                     <input type="checkbox"
                            name="remapOnAllLayer"
-                           [(ngModel)]="remapInfo.remapOnAllLayer"> Remap on all layers
+                           [(ngModel)]="remapInfo.remapOnAllLayer"
+                           [disabled]="disableRemapOnAllLayer"
+                           (ngModelChange)="remapInfoChange()"> Remap on all layers
                 </label>
             </div>
             <div class="d-inline-block">

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

@@ -28,6 +28,11 @@
 
 .nav-tabs > li {
     overflow: hidden;
+    cursor: pointer;
+
+    &.disabled {
+        cursor: not-allowed;
+    }
 }
 
 .arrowCustom {
@@ -85,7 +90,6 @@
             .menu-tabs--item {
                 display: flex;
                 align-items: center;
-                cursor: pointer;
 
                 i {
                     margin-right: 0.25em;
@@ -99,6 +103,10 @@
     padding: 10px 24px;
 }
 
+.pr-10 {
+    padding-right: 10px;
+}
+
 .popover-overlay {
     position: fixed;
     width: 100%;
@@ -121,5 +129,10 @@
 
     label {
         margin-right: 5px;
+
+        &.disabled {
+            cursor: not-allowed;
+            color: #959595;
+        }
     }
 }

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

@@ -1,5 +1,6 @@
 import {
     ChangeDetectionStrategy,
+    ChangeDetectorRef,
     Component,
     ElementRef,
     EventEmitter,
@@ -24,13 +25,14 @@ import {
     KeystrokeAction,
     MouseAction,
     PlayMacroAction,
+    SecondaryRoleAction,
     SwitchKeymapAction,
     SwitchLayerAction
 } from 'uhk-common';
 
 import { Tab } from './tab';
 
-import { AppState } from '../../store';
+import { AppState, macroPlaybackSupported } from '../../store';
 import { getKeymaps } from '../../store/reducers/user-configuration';
 import { KeyActionRemap } from '../../models/key-action-remap';
 import { RemapInfo } from '../../models/remap-info';
@@ -44,6 +46,13 @@ enum TabName {
     None
 }
 
+export interface TabHeader {
+    text: string;
+    icon: string;
+    tabName: TabName;
+    disabled?: boolean;
+}
+
 @Component({
     selector: 'popover',
     templateUrl: './popover.component.html',
@@ -104,16 +113,53 @@ export class PopoverComponent implements OnChanges {
     topPosition: number = 0;
     leftPosition: number = 0;
     animationState: string;
+    shadowKeyAction: KeyAction;
+    disableRemapOnAllLayer = false;
+    tabHeaders: TabHeader[] = [
+        {
+            tabName: TabName.Keypress,
+            icon: 'fa-keyboard-o',
+            text: 'Keypress'
+        },
+        {
+            tabName: TabName.Layer,
+            icon: 'fa-clone',
+            text: 'Layer'
+        },
+        {
+            tabName: TabName.Mouse,
+            icon: 'fa-mouse-pointer',
+            text: 'Mouse'
+        },
+        {
+            tabName: TabName.Macro,
+            icon: 'fa-play',
+            text: 'Macro'
+        },
+        {
+            tabName: TabName.Keymap,
+            icon: 'fa-keyboard-o',
+            text: 'Keymap'
+        },
+        {
+            tabName: TabName.None,
+            icon: 'fa-ban',
+            text: 'None'
+        }
+    ];
+    macroPlaybackSupported$: Observable<boolean>;
 
     private readonly currentKeymap$ = new BehaviorSubject<Keymap>(undefined);
 
-    constructor(store: Store<AppState>) {
+    constructor(private store: Store<AppState>,
+                private cdRef: ChangeDetectorRef) {
         this.animationState = 'closed';
         this.keymaps$ = store.let(getKeymaps())
             .combineLatest(this.currentKeymap$)
             .map(([keymaps, currentKeymap]: [Keymap[], Keymap]) =>
                 keymaps.filter((keymap: Keymap) => currentKeymap.abbreviation !== keymap.abbreviation)
             );
+        this.macroPlaybackSupported$ = store.select(macroPlaybackSupported);
     }
 
     ngOnChanges(change: SimpleChanges) {
@@ -122,22 +168,30 @@ export class PopoverComponent implements OnChanges {
         }
 
         if (change['defaultKeyAction']) {
-            let tab: TabName;
+            let tab: TabHeader;
+            this.disableRemapOnAllLayer = false;
 
             if (this.defaultKeyAction instanceof KeystrokeAction) {
-                tab = TabName.Keypress;
+                this.keystrokeActionChange(this.defaultKeyAction);
+                tab = this.tabHeaders[0];
             } else if (this.defaultKeyAction instanceof SwitchLayerAction) {
-                tab = TabName.Layer;
+                tab = this.tabHeaders[1];
             } else if (this.defaultKeyAction instanceof MouseAction) {
-                tab = TabName.Mouse;
+                tab = this.tabHeaders[2];
             } else if (this.defaultKeyAction instanceof PlayMacroAction) {
-                tab = TabName.Macro;
+                tab = this.tabHeaders[3];
             } else if (this.defaultKeyAction instanceof SwitchKeymapAction) {
-                tab = TabName.Keymap;
+                tab = this.tabHeaders[4];
             } else {
-                tab = TabName.None;
+                tab = this.tabHeaders[5];
             }
 
+            for (const tabHeader of this.tabHeaders) {
+                const allowOnlyLayerTab = tab.tabName === TabName.Layer && this.currentLayer !== 0;
+
+                tabHeader.disabled = allowOnlyLayerTab && tabHeader.tabName !== TabName.Layer;
+                console.log(tabHeader);
+            }
             this.selectTab(tab);
         }
 
@@ -186,14 +240,54 @@ export class PopoverComponent implements OnChanges {
         }
     }
 
-    selectTab(tab: TabName): void {
-        this.activeTab = tab;
+    selectTab(tab: TabHeader): void {
+        if (tab.disabled) {
+            return;
+        }
+
+        this.activeTab = tab.tabName;
+        if (tab.tabName === TabName.Keypress) {
+            this.keystrokeActionChange(this.defaultKeyAction as KeystrokeAction);
+        }
     }
 
     onOverlay() {
         this.cancel.emit(undefined);
     }
 
+    remapInfoChange(): void {
+        this.selectedTab.remapInfoChanged(this.remapInfo);
+    }
+
+    keystrokeActionChange(keystrokeAction: KeystrokeAction): void {
+        this.shadowKeyAction = keystrokeAction;
+        const disableRemapOnAllLayer =
+            keystrokeAction &&
+            this.currentLayer === 0 &&
+            (keystrokeAction.secondaryRoleAction === SecondaryRoleAction.fn ||
+                keystrokeAction.secondaryRoleAction === SecondaryRoleAction.mod ||
+                keystrokeAction.secondaryRoleAction === SecondaryRoleAction.mouse);
+
+        if (this.disableRemapOnAllLayer !== disableRemapOnAllLayer) {
+            this.disableRemapOnAllLayer = disableRemapOnAllLayer;
+
+            if (disableRemapOnAllLayer) {
+                this.remapInfo.remapOnAllLayer = false;
+            }
+
+            this.cdRef.markForCheck();
+        }
+    }
+
+    setKeyActionValidState($event: boolean): void {
+        this.keyActionValid = $event;
+        this.cdRef.markForCheck();
+    }
+
+    trackTabHeader(index: number, tabItem: TabHeader): string {
+        return tabItem.tabName.toString();
+    }
+
     private calculatePosition() {
         const offsetLeft: number = this.wrapPosition.left + 265; // 265 is a width of the side menu with a margin
         const popover: HTMLElement = this.popoverHost.nativeElement;

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

@@ -36,20 +36,20 @@
     <div class="btn-toolbar modifiers">
         <div class="btn-group btn-group-sm modifiers__left">
             <button type="button" class="btn btn-default"
-                    *ngFor="let modifier of leftModifiers; let index = index"
-                    [class.btn-primary]="leftModifierSelects[index]"
-                    (click)="toggleModifier(false, index)"
+                    *ngFor="let modifier of leftModifiers; trackBy:modifiersTrackBy"
+                    [class.btn-primary]="modifier.checked"
+                    (click)="toggleModifier(modifier)"
             >
-                {{modifier}}
+                {{ modifier.text }}
             </button>
         </div>
         <div class="btn-group btn-group-sm modifiers__right">
             <button type="button" class="btn btn-default"
-                    *ngFor="let modifier of rightModifiers; let index = index"
-                    [class.btn-primary]="rightModifierSelects[index]"
-                    (click)="toggleModifier(true, index)"
+                    *ngFor="let modifier of rightModifiers; trackBy:modifiersTrackBy"
+                    [class.btn-primary]="modifier.checked"
+                    (click)="toggleModifier(modifier)"
             >
-                {{modifier}}
+                {{ modifier.text }}
             </button>
         </div>
     </div>
@@ -92,6 +92,11 @@
           data-placement="bottom"></icon>
 </div>
 
+<div *ngIf="warningVisible" class="alert alert-warning remap-warning" role="alert">
+    You're about to remap a modifier key only on this layer. You probably want to remap it on all layers. If so, check
+    the <strong>Remap on all layers</strong> checkbox below.
+</div>
+
 <div class="disabled-state--text">
     <i class="fa fa-info-circle"></i>
     When a key is configured as layer switcher key, you can't assign other functions to it.

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

@@ -89,4 +89,11 @@
         display: inline-block;
         width: 140px;
     }
+
+    .remap-warning {
+        margin-top: 10px;
+        margin-bottom: 0;
+        padding-top: 5px;
+        padding-bottom: 5px;
+    }
 }

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

@@ -1,9 +1,31 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    EventEmitter,
+    Input,
+    OnChanges,
+    Output,
+    SimpleChanges
+} 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';
+import { KeyModifierModel } from '../../../../models/key-modifier-model';
+import { mapLeftRigthModifierToKeyActionModifier } from '../../../../util';
+import { RemapInfo } from '../../../../models/remap-info';
+
+export const secondaryRoleFilter = (showLayerSwitchers: boolean) => {
+    return (data): boolean => {
+        if (showLayerSwitchers) {
+            return data;
+        }
+
+        return data.text !== 'Layer switcher';
+    };
+};
 
 @Component({
     selector: 'keypress-tab',
@@ -14,38 +36,43 @@ import { SelectOptionData } from '../../../../models/select-option-data';
 export class KeypressTabComponent extends Tab implements OnChanges {
     @Input() defaultKeyAction: KeyAction;
     @Input() secondaryRoleEnabled: boolean;
+    @Input() allowRemapOnAllKeymapWarning: boolean;
+    @Input() remapInfo: RemapInfo;
+    @Input() showLayerSwitcherInSecondaryRoles: boolean;
 
-    leftModifiers: string[];
-    rightModifiers: string[];
+    @Output() keyActionChange = new EventEmitter<KeystrokeAction>();
 
-    leftModifierSelects: boolean[];
-    rightModifierSelects: boolean[];
+    leftModifiers: KeyModifierModel[];
+    rightModifiers: KeyModifierModel[];
 
     scanCodeGroups: Array<SelectOptionData>;
-    secondaryRoleGroups: Array<SelectOptionData>;
+    secondaryRoleGroups: Array<SelectOptionData> = [];
 
     selectedScancodeOption: SelectOptionData;
     selectedSecondaryRoleIndex: number;
+    warningVisible: boolean;
 
-    constructor(private mapper: MapperService) {
+    constructor(private mapper: MapperService,
+                private cdRef: ChangeDetectorRef) {
         super();
-        this.leftModifiers = ['LShift', 'LCtrl', 'LSuper', 'LAlt'];
-        this.rightModifiers = ['RShift', 'RCtrl', 'RSuper', 'RAlt'];
+        this.leftModifiers = mapper.getLeftKeyModifiers();
+        this.rightModifiers = mapper.getRightKeyModifiers();
+
         this.scanCodeGroups = [{
             id: '0',
             text: 'None'
         }];
         this.scanCodeGroups = this.scanCodeGroups.concat(SCANCODES);
-        this.secondaryRoleGroups = SECONDARY_ROLES;
-        this.leftModifierSelects = Array(this.leftModifiers.length).fill(false);
-        this.rightModifierSelects = Array(this.rightModifiers.length).fill(false);
         this.selectedScancodeOption = this.scanCodeGroups[0];
         this.selectedSecondaryRoleIndex = -1;
     }
 
-    ngOnChanges() {
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes.showLayerSwitcherInSecondaryRoles) {
+            this.fillSecondaryRoles();
+        }
         this.fromKeyAction(this.defaultKeyAction);
-        this.validAction.emit(this.keyActionValid());
+        this.keyActionChanged(false);
     }
 
     keyActionValid(keystrokeAction?: KeystrokeAction): boolean {
@@ -56,16 +83,16 @@ export class KeypressTabComponent extends Tab implements OnChanges {
         return (keystrokeAction) ? (keystrokeAction.scancode > 0 || keystrokeAction.modifierMask > 0) : false;
     }
 
-    onKeysCapture(event: { code: number, left: boolean[], right: boolean[] }) {
+    onKeysCapture(event: { code: number, left: KeyModifierModel[], right: KeyModifierModel[] }) {
         if (event.code) {
             this.selectedScancodeOption = this.findScancodeOptionByScancode(event.code, KeystrokeType.basic);
         } else {
             this.selectedScancodeOption = this.scanCodeGroups[0];
         }
 
-        this.leftModifierSelects = event.left;
-        this.rightModifierSelects = event.right;
-        this.validAction.emit(this.keyActionValid());
+        this.leftModifiers = event.left;
+        this.rightModifiers = event.right;
+        this.keyActionChanged();
     }
 
     fromKeyAction(keyAction: KeyAction): boolean {
@@ -76,16 +103,12 @@ export class KeypressTabComponent extends Tab implements OnChanges {
         // Restore selectedScancodeOption
         this.selectedScancodeOption = this.findScancodeOptionByScancode(keystrokeAction.scancode || 0, keystrokeAction.type);
 
-        const leftModifiersLength: number = this.leftModifiers.length;
-
-        // Restore modifiers
-        for (let i = 0; i < leftModifiersLength; ++i) {
-            this.leftModifierSelects[this.mapper.modifierMapper(i)] = ((keystrokeAction.modifierMask >> i) & 1) === 1;
+        for (const modifier of this.leftModifiers) {
+            modifier.checked = (keystrokeAction.modifierMask & modifier.value) > 0;
         }
 
-        for (let i = leftModifiersLength; i < leftModifiersLength + this.rightModifierSelects.length; ++i) {
-            const index: number = this.mapper.modifierMapper(i) - leftModifiersLength;
-            this.rightModifierSelects[index] = ((keystrokeAction.modifierMask >> i) & 1) === 1;
+        for (const modifier of this.rightModifiers) {
+            modifier.checked = (keystrokeAction.modifierMask & modifier.value) > 0;
         }
 
         // Restore secondaryRoleAction
@@ -107,11 +130,7 @@ export class KeypressTabComponent extends Tab implements OnChanges {
         } else {
             keystrokeAction.type = KeystrokeType[scTypePair[1]];
         }
-        keystrokeAction.modifierMask = 0;
-        const modifiers = this.leftModifierSelects.concat(this.rightModifierSelects).map(x => x ? 1 : 0);
-        for (let i = 0; i < modifiers.length; ++i) {
-            keystrokeAction.modifierMask |= modifiers[i] << this.mapper.modifierMapper(i);
-        }
+        keystrokeAction.modifierMask = mapLeftRigthModifierToKeyActionModifier(this.leftModifiers, this.rightModifiers);
 
         keystrokeAction.secondaryRoleAction = this.selectedSecondaryRoleIndex === -1
             ? undefined
@@ -122,21 +141,31 @@ export class KeypressTabComponent extends Tab implements OnChanges {
         }
     }
 
-    toggleModifier(right: boolean, index: number) {
-        const modifierSelects: boolean[] = right ? this.rightModifierSelects : this.leftModifierSelects;
-        modifierSelects[index] = !modifierSelects[index];
-
-        this.validAction.emit(this.keyActionValid());
+    toggleModifier(modifier: KeyModifierModel): void {
+        modifier.checked = !modifier.checked;
+        this.keyActionChanged();
     }
 
     onSecondaryRoleChange(id: string) {
         this.selectedSecondaryRoleIndex = +id;
+        this.keyActionChanged();
     }
 
     onScancodeChange(id: string) {
         this.selectedScancodeOption = this.findScancodeOptionById(id);
 
-        this.validAction.emit(this.keyActionValid());
+        this.keyActionChanged();
+    }
+
+    modifiersTrackBy(index: number, modifier: KeyModifierModel): string {
+        return `${modifier.value}${modifier.checked}`;
+    }
+
+    remapInfoChanged(remapInfo: RemapInfo): void {
+        this.remapInfo = remapInfo;
+        const keystrokeAction = this.toKeyAction();
+        this.calculateRemapOnAllLayerWarningVisibility(keystrokeAction);
+        this.cdRef.markForCheck();
     }
 
     private findScancodeOptionBy(predicate: (option: SelectOptionData) => boolean): SelectOptionData {
@@ -196,4 +225,27 @@ export class KeypressTabComponent extends Tab implements OnChanges {
         return [scanCode, type];
     }
 
+    private keyActionChanged(dispatch = true): void {
+        const keystrokeAction = this.toKeyAction();
+        this.validAction.emit(this.keyActionValid(keystrokeAction));
+        this.calculateRemapOnAllLayerWarningVisibility(keystrokeAction);
+
+        if (dispatch) {
+            this.keyActionChange.emit(keystrokeAction);
+        }
+    }
+
+    private calculateRemapOnAllLayerWarningVisibility(keystrokeAction: KeystrokeAction): void {
+        this.warningVisible = this.allowRemapOnAllKeymapWarning &&
+            this.remapInfo &&
+            !this.remapInfo.remapOnAllLayer &&
+            keystrokeAction &&
+            !keystrokeAction.hasScancode() &&
+            keystrokeAction.hasOnlyOneActiveModifier();
+    }
+
+    private fillSecondaryRoles(): void {
+        this.secondaryRoleGroups = SECONDARY_ROLES
+            .filter(secondaryRoleFilter(this.showLayerSwitcherInSecondaryRoles));
+    }
 }

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

@@ -63,7 +63,7 @@ export class LayerTabComponent extends Tab implements OnChanges {
             this.isNotBase = this.currentLayer > 0;
         }
 
-        this.validAction.emit(true);
+        this.validAction.emit(!this.isNotBase);
     }
 
     keyActionValid(): boolean {

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

@@ -2,7 +2,7 @@
     <span> No macros are available to choose from. Create a macro first! </span>
 </ng-template>
 <ng-template [ngIf]="macroOptions.length > 0">
-    <p><i>Please note that macro playback is not implemented yet. You can bind macros, but they won't have any effect until firmware support is implemented. We're working on this.</i></p>
+    <p *ngIf="!macroPlaybackSupported"><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>
         <ngx-select [items]="macroOptions"

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

@@ -17,6 +17,7 @@ import { SelectOptionData } from '../../../../models/select-option-data';
 })
 export class MacroTabComponent extends Tab implements OnInit, OnChanges, OnDestroy {
     @Input() defaultKeyAction: KeyAction;
+    @Input() macroPlaybackSupported: boolean;
 
     macros: Macro[];
     macroOptions: Array<SelectOptionData>;

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

@@ -1,10 +1,13 @@
 import { EventEmitter, Output } from '@angular/core';
 import { KeyAction } from 'uhk-common';
 
+import { RemapInfo } from '../../../models/remap-info';
+
 export abstract class Tab {
     @Output() validAction = new EventEmitter<boolean>();
 
     abstract keyActionValid(): boolean;
     abstract fromKeyAction(keyAction: KeyAction): boolean;
     abstract toKeyAction(): KeyAction;
+    remapInfoChanged(remapInfo: RemapInfo): void {}
 }

packages/uhk-web/src/app/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.ts

@@ -1,5 +1,10 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
+import { Store } from '@ngrx/store';
+
 import { CaptureService } from '../../../../services/capture.service';
+import { KeyModifierModel } from '../../../../models/key-modifier-model';
+import { AppState } from '../../../../store';
+import { StartKeypressCapturingAction, StopKeypressCapturingAction } from '../../../../store/actions/app';
 
 @Component({
     selector: 'capture-keystroke-button',
@@ -16,7 +21,8 @@ export class CaptureKeystrokeButtonComponent {
     private first: boolean; // enable usage of Enter to start capturing
     private scanCodePressed: boolean;
 
-    constructor(private captureService: CaptureService) {
+    constructor(private captureService: CaptureService,
+                private store: Store<AppState>) {
         this.record = false;
         this.captureService.initModifiers();
         this.captureService.populateMapping();
@@ -27,9 +33,11 @@ export class CaptureKeystrokeButtonComponent {
     onKeyUp(e: KeyboardEvent) {
         if (this.scanCodePressed) {
             e.preventDefault();
+            e.stopPropagation();
             this.scanCodePressed = false;
         } else if (this.record && !this.first) {
             e.preventDefault();
+            e.stopPropagation();
             this.saveScanCode();
         }
     }
@@ -53,6 +61,7 @@ export class CaptureKeystrokeButtonComponent {
         } else if (code === enter) {
             this.record = true;
             this.first = true;
+            this.store.dispatch(new StartKeypressCapturingAction());
         }
     }
 
@@ -64,12 +73,13 @@ export class CaptureKeystrokeButtonComponent {
 
     start(): void {
         this.record = true;
+        this.store.dispatch(new StartKeypressCapturingAction());
     }
 
     private saveScanCode(code?: number) {
         this.record = false;
-        const left: boolean[] = this.captureService.getModifiers(true);
-        const right: boolean[] = this.captureService.getModifiers(false);
+        const left: KeyModifierModel[] = this.captureService.getModifiers(true);
+        const right: KeyModifierModel[] = this.captureService.getModifiers(false);
 
         this.capture.emit({
             code,
@@ -83,5 +93,6 @@ export class CaptureKeystrokeButtonComponent {
     private reset() {
         this.first = false;
         this.captureService.initModifiers();
+        this.store.dispatch(new StopKeypressCapturingAction());
     }
 }

packages/uhk-web/src/app/components/privilege-checker/privilege-checker.component.html

@@ -2,8 +2,14 @@
     <uhk-message header="Cannot talk to your UHK"
                  subtitle="Your UHK has been detected, but its permissions are not set up yet, so Agent can't talk to it."></uhk-message>
 
-    <button class="btn btn-default btn-lg btn-primary"
-            (click)="setUpPermissions()"> Set up permissions
+    <div *ngIf="state.updateUdevRules">
+        You seem to have an old udev rule file installed. New Agent versions require and updated udev rule file to find your UHK.
+    </div>
+
+    <button class="btn btn-default btn-lg btn-primary mt-10"
+            (click)="setUpPermissions()">
+        <span *ngIf="!state.updateUdevRules">Set up permissions</span>
+        <span *ngIf="state.updateUdevRules">Update udev rule file</span>
     </button>
 
     <div class="mt-10">
@@ -21,18 +27,8 @@
             </p>
 
             <div *ngIf="state.showWhatWillThisDoContent">
-                Agent uses the following script to set up permissions. You can run it manually as root, then
-                <a class="link-inline"
-                   (click)="retry()">retry</a>.
-                <div class="copy-container">
-                    <span class="fa  fa-2x fa-copy"
-                          ngxClipboard
-                          [cbContent]="command"
-                          title="Copy to clipboard"
-                          data-toggle="tooltip"
-                          data-placement="top"></span>
-                    <pre><code>{{ command }}</code></pre>
-                </div>
+                If you want to set up permissions manually:
+                <udev-rules></udev-rules>
             </div>
         </div>
     </div>

packages/uhk-web/src/app/components/privilege-checker/privilege-checker.component.ts

@@ -18,15 +18,6 @@ export class PrivilegeCheckerComponent implements OnInit, OnDestroy {
 
     state: PrivilagePageSate;
 
-    command = `cat <<EOF >/etc/udev/rules.d/50-uhk60.rules
-# Ultimate Hacking Keyboard rules
-# These are the udev rules for accessing the USB interfaces of the UHK as non-root users.
-# Copy this file to /etc/udev/rules.d and physically reconnect the UHK afterwards.
-SUBSYSTEMS=="usb", ATTRS{idVendor}=="1d50", ATTRS{idProduct}=="612[0-7]", MODE:="0666"
-EOF
-udevadm trigger
-udevadm settle`;
-
     private stateSubscription: Subscription;
 
     constructor(private store: Store<AppState>,

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

@@ -131,7 +131,7 @@
     </li>
     <li class="sidebar__level-0--item" [routerLinkActive]="['active']">
         <div class="sidebar__level-0">
-            <i class="uhk-icon uhk-icon-agent-icon"></i> Agent
+            <i class="uhk-icon uhk-icon-pure-agent-icon"></i> Agent
             <i class="fa fa-chevron-up pull-right"
                (click)="toggleHide($event, 'agent')"></i>
         </div>

packages/uhk-web/src/app/components/svg/constants.ts

@@ -0,0 +1 @@
+export const SECONDARY_ROLE_BOTTOM_MARGIN = 1;

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

@@ -11,3 +11,4 @@ export { SvgSingleIconKeyComponent } from './svg-single-icon-key';
 export { SvgSwitchKeymapKeyComponent } from './svg-switch-keymap-key';
 export { SvgTextIconKeyComponent } from './svg-text-icon-key';
 export { SvgTwoLineTextKeyComponent } from './svg-two-line-text-key';
+export { SvgSecondaryRoleComponent } from './svg-secondary-role';

packages/uhk-web/src/app/components/svg/keys/svg-icon-text-key/svg-icon-text-key.component.html

@@ -8,6 +8,14 @@
     [attr.x]="0"
     [attr.y]="textY"
     [attr.text-anchor]="'middle'"
-    [attr.font-size]="11">
-        <tspan [attr.x]="spanX">{{ text }}</tspan>
-</svg:text>
+    [attr.font-size]="fontSize">
+        <tspan [attr.x]="spanX" [attr.dy]="text1Y">{{ text1 }}</tspan>
+        <tspan [attr.x]="spanX" [attr.dy]="text2Y">{{ text2 }}</tspan>
+</svg:text>
+<svg:g svg-secondary-role
+       *ngIf="secondaryText"
+       [height]="20"
+       [width]="width"
+       [y]="secondaryTextY"
+       [text]="secondaryText">
+</svg:g>

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

@@ -1,15 +1,20 @@
-import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, OnChanges, SimpleChanges } from '@angular/core';
+
+import { isRectangleAsSecondaryRoleKey } from '../util';
+import { SECONDARY_ROLE_BOTTOM_MARGIN } from '../../constants';
+import { getContentWidth } from '../../../../util';
 
 @Component({
     selector: 'g[svg-icon-text-key]',
     templateUrl: './svg-icon-text-key.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SvgIconTextKeyComponent implements OnInit {
+export class SvgIconTextKeyComponent implements OnChanges {
     @Input() width: number;
     @Input() height: number;
     @Input() icon: string;
     @Input() text: string;
+    @Input() secondaryText: string;
 
     useWidth: number;
     useHeight: number;
@@ -17,16 +22,137 @@ export class SvgIconTextKeyComponent implements OnInit {
     useY: number;
     textY: number;
     spanX: number;
+    textWidth: number;
+    secondaryTextY: number;
+    secondaryHeight: number;
+    fontSize: number;
+    text1: string;
+    text1Y: number;
+    text2: string;
+    text2Y: number;
 
     constructor() {
     }
 
-    ngOnInit() {
+    ngOnChanges(changes: SimpleChanges): void {
+        this.calculatePositions();
+    }
+
+    private calculatePositions(): void {
+        let secondaryYModifier = 0;
+
+        if (this.secondaryText && isRectangleAsSecondaryRoleKey(this.width, this.height)) {
+            secondaryYModifier = 5;
+        }
+
+        const isRectangle = this.width > this.height * 1.8;
+
         this.useWidth = this.width / 3;
         this.useHeight = this.height / 3;
-        this.useX = (this.width > 2 * this.height) ? 0 : this.width / 3;
-        this.useY = (this.width > 2 * this.height) ? this.height / 3 : this.height / 10;
-        this.textY = (this.width > 2 * this.height) ? this.height / 2 : this.height * 0.6;
-        this.spanX = (this.width > 2 * this.height) ? this.width * 0.6 : this.width / 2;
+
+        if (isRectangle) {
+            this.textWidth = this.width * 0.65;
+            this.useX = 0;
+            this.useY = this.height / 3;
+            this.spanX = this.width * 0.6;
+        } else {
+            this.textWidth = this.width * 0.95;
+            this.useX = this.width / 3;
+            this.useY = this.height / 10;
+            this.spanX = this.width / 2;
+        }
+
+        if (this.secondaryText) {
+            this.secondaryHeight = this.height / 4;
+            this.secondaryTextY = this.height - this.secondaryHeight - SECONDARY_ROLE_BOTTOM_MARGIN - secondaryYModifier;
+        } else {
+            this.secondaryHeight = 0;
+            this.secondaryTextY = 0;
+        }
+        this.fontSize = 19;
+        this.text1 = '';
+        this.text2 = '';
+        while (this.fontSize > 10 && !this.isFullTextVisible()) {
+            this.calculateTexts(isRectangle);
+            this.fontSize--;
+        }
+    }
+
+    private calculateTexts(isRectangle: boolean): void {
+        if (!this.text) {
+            return;
+        }
+
+        this.text1 = this.getText(0);
+
+        this.text2 = this.getText(this.text1.length);
+
+        const lineHeight = this.fontSize;
+        const lines = this.text2 ? 1 : 0;
+
+        if (isRectangle) {
+            const textboxHeight = this.height - this.secondaryHeight;
+            this.textY = textboxHeight / 2 - 0.5 * lines * lineHeight;
+        } else {
+            const textboxHeight = this.height - this.secondaryHeight + this.useHeight;
+            this.textY = textboxHeight / 2 - 0.5 * lines * lineHeight;
+        }
+        this.text1Y = 0;
+        this.text2Y = this.text1Y + 1.2 * lines * lineHeight;
+    }
+
+    private getText(startPosition: number): string {
+        const style: CSSStyleDeclaration = {
+            font: `${this.fontSize}px Helvetica`
+        } as any;
+
+        let result = '';
+        let lastSpacePosition = 0;
+
+        for (let i = startPosition; i < this.text.length; i++) {
+            const char = this.text[i];
+
+            // skip space if result start with space
+            if (char === ' ' && result === '') {
+                continue;
+            }
+
+            const newText = result += char;
+            const textWidth = getContentWidth(style, newText);
+
+            if (char === ' ') {
+                lastSpacePosition = i;
+            }
+
+            if (textWidth > this.textWidth) {
+                break;
+            }
+
+            result = newText;
+        }
+
+        if (lastSpacePosition > 0 && lastSpacePosition < result.length) {
+            result = result.substr(0, lastSpacePosition);
+        } else if (this.fontSize === 11) {
+            const cleanResult = result.replace(/ /g, '');
+            const cleanText = this.text.substr(startPosition).replace(/ /g, '');
+            if (cleanResult.length < cleanText.length) {
+                result = result.substring(0, result.length - 3) + '...';
+            }
+        }
+
+        return result;
+    }
+
+    private isFullTextVisible(): boolean {
+        const visibleText = (this.text1 + this.text2).replace(/ /g, '');
+
+        if (this.text2.endsWith('...')) {
+            return true;
+        }
+
+        const textLength = this.text.replace(/ /g, '').length;
+
+        return visibleText.length === textLength;
     }
 }

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

@@ -25,34 +25,40 @@
         <svg:g svg-keystroke-key *ngSwitchCase="enumLabelTypes.KeystrokeKey"
                [height]="height"
                [width]="width"
-               [keystrokeAction]="labelSource">
+               [keystrokeAction]="labelSource"
+               [secondaryText]="secondaryText">
         </svg:g>
         <svg:g svg-one-line-text-key *ngSwitchCase="enumLabelTypes.OneLineText"
                [height]="height"
                [width]="width"
-               [text]="labelSource">
+               [text]="labelSource"
+               [secondaryText]="secondaryText">
         </svg:g>
         <svg:g svg-two-line-text-key *ngSwitchCase="enumLabelTypes.TwoLineText"
                [height]="height"
                [width]="width"
-               [texts]="labelSource">
+               [texts]="labelSource"
+               [secondaryText]="secondaryText">
         </svg:g>
         <svg:g svg-text-icon-key *ngSwitchCase="enumLabelTypes.TextIcon"
                [height]="height"
                [width]="width"
                [text]="labelSource.text"
-               [icon]="labelSource.icon">
+               [icon]="labelSource.icon"
+               [secondaryText]="secondaryText">
         </svg:g>
         <svg:g svg-icon-text-key *ngSwitchCase="enumLabelTypes.IconText"
                [height]="height"
                [width]="width"
                [icon]="labelSource.icon"
-               [text]="labelSource.text">
+               [text]="labelSource.text"
+               [secondaryText]="secondaryText">
         </svg:g>
         <svg:g svg-single-icon-key *ngSwitchCase="enumLabelTypes.SingleIcon"
                [height]="height"
                [width]="width"
-               [icon]="labelSource">
+               [icon]="labelSource"
+               [secondaryText]="secondaryText">
         </svg:g>
         <svg:g svg-switch-keymap-key *ngSwitchCase="enumLabelTypes.SwitchKeymap"
                [height]="height"

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

@@ -1,5 +1,5 @@
 import {
-    Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, Renderer,
+    Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnDestroy, OnInit, Output,
     SimpleChange, ChangeDetectionStrategy
 } from '@angular/core';
 import { animate, group, state, style, transition, trigger } from '@angular/animations';
@@ -27,6 +27,9 @@ import { MapperService } from '../../../../services/mapper.service';
 import { AppState } from '../../../../store';
 import { getMacros } from '../../../../store/reducers/user-configuration';
 import { SvgKeyCaptureEvent, SvgKeyClickEvent } from '../../../../models/svg-key-events';
+import { OperatingSystem } from '../../../../models/operating-system';
+import { KeyModifierModel } from '../../../../models/key-modifier-model';
+import { StartKeypressCapturingAction, StopKeypressCapturingAction } from '../../../../store/actions/app';
 
 enum LabelTypes {
     KeystrokeKey,
@@ -94,6 +97,7 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
     labelType: LabelTypes;
 
     labelSource: any;
+    secondaryText: string;
     macros: Macro[];
     private subscription: Subscription;
     private scanCodePressed: boolean;
@@ -104,10 +108,9 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
 
     constructor(
         private mapper: MapperService,
-        store: Store<AppState>,
+        private store: Store<AppState>,
         private element: ElementRef,
-        private captureService: CaptureService,
-        private renderer: Renderer
+        private captureService: CaptureService
     ) {
         this.subscription = store.let(getMacros())
             .subscribe((macros: Macro[]) => this.macros = macros);
@@ -117,13 +120,13 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
         this.scanCodePressed = false;
     }
 
-    @HostListener('click')
-    onClick() {
+    @HostListener('click', ['$event'])
+    onClick(e: MouseEvent) {
         this.reset();
         this.keyClick.emit({
             keyTarget: this.element.nativeElement,
-            shiftPressed: this.pressedShiftLocation > -1,
-            altPressed: this.pressedAltLocation > -1
+            shiftPressed: e.shiftKey,
+            altPressed: e.altKey
         });
         this.pressedShiftLocation = -1;
         this.pressedAltLocation = -1;
@@ -133,21 +136,16 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
     onMouseDown(e: MouseEvent) {
         if ((e.which === 2 || e.button === 2) && this.capturingEnabled) {
             e.preventDefault();
-            this.renderer.invokeElementMethod(this.element.nativeElement, 'focus');
+            this.element.nativeElement.focus();
 
             if (this.recording) {
                 this.reset();
             } else {
                 this.recording = true;
                 this.recordAnimation = 'active';
-
-                if (this.pressedShiftLocation > -1) {
-                    this.shiftPressed = true;
-                }
-
-                if (this.pressedAltLocation > -1) {
-                    this.altPressed = true;
-                }
+                this.shiftPressed = e.shiftKey;
+                this.altPressed = e.altKey;
+                this.store.dispatch(new StartKeypressCapturingAction());
             }
         }
     }
@@ -245,11 +243,12 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
         this.captureService.initModifiers();
         this.shiftPressed = false;
         this.altPressed = false;
+        this.store.dispatch(new StopKeypressCapturingAction());
     }
 
     private saveScanCode(code = 0) {
-        const left: boolean[] = this.captureService.getModifiers(true);
-        const right: boolean[] = this.captureService.getModifiers(false);
+        const left: KeyModifierModel[] = this.captureService.getModifiers(true);
+        const right: KeyModifierModel[] = this.captureService.getModifiers(false);
 
         this.capture.emit({
             captured: {
@@ -265,17 +264,18 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     private setLabels(): void {
+        this.labelType = LabelTypes.OneLineText;
+        this.labelSource = undefined;
+        this.secondaryText = undefined;
+
         if (!this.keyAction) {
-            this.labelSource = undefined;
-            this.labelType = LabelTypes.OneLineText;
             return;
         }
 
-        this.labelType = LabelTypes.OneLineText;
-
         if (this.keyAction instanceof KeystrokeAction) {
             const keyAction: KeystrokeAction = this.keyAction as KeystrokeAction;
             let newLabelSource: string[];
+            this.secondaryText = this.mapper.getSecondaryRoleText(keyAction.secondaryRoleAction);
 
             if (!keyAction.hasActiveModifier() && keyAction.hasScancode()) {
                 const scancode: number = keyAction.scancode;
@@ -293,29 +293,32 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
                     }
                 }
             } else if (keyAction.hasOnlyOneActiveModifier() && !keyAction.hasScancode()) {
-                newLabelSource = [];
                 switch (keyAction.modifierMask) {
                     case KeyModifiers.leftCtrl:
                     case KeyModifiers.rightCtrl:
-                        newLabelSource.push('Ctrl');
+                        this.labelSource = ['Ctrl'];
                         break;
                     case KeyModifiers.leftShift:
                     case KeyModifiers.rightShift:
-                        newLabelSource.push('Shift');
+                        this.labelSource = ['Shift'];
                         break;
                     case KeyModifiers.leftAlt:
                     case KeyModifiers.rightAlt:
-                        newLabelSource.push('Alt');
+                        this.labelSource = [this.mapper.getOsSpecificText('Alt')];
                         break;
                     case KeyModifiers.leftGui:
                     case KeyModifiers.rightGui:
-                        newLabelSource.push('Super');
+                        if (this.mapper.getOperatingSystem() === OperatingSystem.Windows) {
+                            this.labelSource = this.mapper.getIcon('command');
+                            this.labelType = LabelTypes.SingleIcon;
+                        } else {
+                            this.labelSource = [this.mapper.getOsSpecificText('Super')];
+                        }
                         break;
                     default:
-                        newLabelSource.push('Undefined');
+                        this.labelSource = ['Undefined'];
                         break;
                 }
-                this.labelSource = newLabelSource;
             } else {
                 this.labelType = LabelTypes.KeystrokeKey;
                 this.labelSource = this.keyAction;

packages/uhk-web/src/app/components/svg/keys/svg-keystroke-key/svg-keystroke-key.component.html

@@ -13,7 +13,8 @@
     <svg:g svg-two-line-text-key *ngSwitchCase="'two-line'"
             [height]="height"
             [width]="width"
-            [texts]="labelSource">
+            [texts]="labelSource"
+            [secondaryText]="subComponentSecondaryRoleText">
     </svg:g>
 </svg>
 <svg [attr.viewBox]="viewBox" [attr.width]="modifierContainer.width" [attr.height]="modifierContainer.height" [attr.x]="modifierContainer.x"
@@ -28,10 +29,19 @@
     </svg>
     <svg viewBox="0 0 100 100" [attr.width]="option.width" [attr.height]="option.height" [attr.x]="option.x" [attr.y]="option.y"
         preserveAspectRatio="none" [class.disabled]="option.disabled">
-        <svg:use [attr.xlink:href]="modifierIconNames.option" />
+        <svg:use *ngIf="modifierIconNames.option" [attr.xlink:href]="modifierIconNames.option" />
+        <svg:text *ngIf="!modifierIconNames.option" [attr.text-anchor]="'middle'" [attr.x]="50" [attr.y]="50">A</svg:text>
     </svg>
     <svg viewBox="0 0 100 100" [attr.width]="command.width" [attr.height]="command.height" [attr.x]="command.x" [attr.y]="command.y"
         preserveAspectRatio="none" [class.disabled]="command.disabled">
-        <svg:use [attr.xlink:href]="modifierIconNames.command" />
+        <svg:use *ngIf="modifierIconNames.command" [attr.xlink:href]="modifierIconNames.command" />
+        <svg:text *ngIf="!modifierIconNames.command" [attr.text-anchor]="'middle'" [attr.x]="50" [attr.y]="50">S</svg:text>
     </svg>
 </svg>
+<svg:g svg-secondary-role
+       *ngIf="thisSecondaryRoleText"
+       [height]="20"
+       [width]="secondaryTextWidth"
+       [y]="secondaryTextY"
+       [text]="thisSecondaryRoleText">
+</svg:g>

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

@@ -1,7 +1,9 @@
-import { Component, Input, OnChanges, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input, OnChanges, ChangeDetectionStrategy } from '@angular/core';
 import { KeyModifiers, KeystrokeAction } from 'uhk-common';
 
 import { MapperService } from '../../../../services/mapper.service';
+import { isRectangleAsSecondaryRoleKey } from '../util';
+import { SECONDARY_ROLE_BOTTOM_MARGIN } from '../../constants';
 
 class SvgAttributes {
     width: number;
@@ -25,10 +27,11 @@ class SvgAttributes {
     styleUrls: ['./svg-keystroke-key.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SvgKeystrokeKeyComponent implements OnInit, OnChanges {
+export class SvgKeystrokeKeyComponent implements OnChanges {
     @Input() height: number;
     @Input() width: number;
     @Input() keystrokeAction: KeystrokeAction;
+    @Input() secondaryText: string;
 
     viewBox: string;
     textContainer: SvgAttributes;
@@ -46,6 +49,11 @@ export class SvgKeystrokeKeyComponent implements OnInit, OnChanges {
         option?: string,
         command?: string
     };
+    secondaryTextY: number;
+    secondaryTextWidth: number;
+    secondaryHeight: number;
+    thisSecondaryRoleText: string;
+    subComponentSecondaryRoleText: string;
 
     constructor(private mapper: MapperService) {
         this.modifierIconNames = {};
@@ -57,15 +65,75 @@ export class SvgKeystrokeKeyComponent implements OnInit, OnChanges {
         this.command = new SvgAttributes();
     }
 
-    ngOnInit() {
+    ngOnChanges() {
+        this.calculatePositions();
+    }
+
+    private calculatePositions(): void {
+        let textYModifier = 0;
+        let secondaryYModifier = 0;
+        this.thisSecondaryRoleText = this.secondaryText;
+        this.subComponentSecondaryRoleText = null;
+
+        const bottomSideMode: boolean = this.width < this.height * 1.8;
+        const isRectangleAsSecondaryRole = isRectangleAsSecondaryRoleKey(this.width, this.height);
+
+        if (this.secondaryText && isRectangleAsSecondaryRole) {
+            textYModifier = this.height / 5;
+            secondaryYModifier = 5;
+        }
+
+        if (this.keystrokeAction.hasScancode()) {
+            const scancode: number = this.keystrokeAction.scancode;
+            this.labelSource = this.mapper.scanCodeToSvgImagePath(scancode, this.keystrokeAction.type);
+            if (this.labelSource) {
+                this.labelType = 'icon';
+            } else {
+                let newLabelSource: string[];
+                newLabelSource = this.mapper.scanCodeToText(scancode, this.keystrokeAction.type);
+                if (newLabelSource) {
+                    if (this.secondaryText && newLabelSource.length === 2) {
+                        if (isRectangleAsSecondaryRole || bottomSideMode) {
+                            this.labelSource = newLabelSource[0];
+                            this.labelType = 'one-line';
+                        } else {
+                            this.labelSource = newLabelSource;
+                            this.labelType = 'two-line';
+                            this.thisSecondaryRoleText = null;
+                            this.subComponentSecondaryRoleText = this.secondaryText;
+                        }
+                    }
+                    else {
+                        if (newLabelSource.length === 1) {
+                            this.labelSource = newLabelSource[0];
+                            this.labelType = 'one-line';
+                        } else {
+                            this.labelSource = newLabelSource;
+                            this.labelType = 'two-line';
+                        }
+                    }
+                }
+            }
+        } else {
+            this.labelType = 'empty';
+        }
+
+        this.shift.disabled = !this.keystrokeAction.isActive(KeyModifiers.leftShift | KeyModifiers.rightShift);
+        this.control.disabled = !this.keystrokeAction.isActive(KeyModifiers.leftCtrl | KeyModifiers.rightCtrl);
+        this.option.disabled = !this.keystrokeAction.isActive(KeyModifiers.leftAlt | KeyModifiers.rightAlt);
+        this.command.disabled = !this.keystrokeAction.isActive(KeyModifiers.leftGui | KeyModifiers.rightGui);
+
+        this.secondaryHeight = this.secondaryText ? this.height / 4 : 0;
+        this.secondaryTextY = this.height - this.secondaryHeight - SECONDARY_ROLE_BOTTOM_MARGIN - secondaryYModifier;
+
         this.viewBox = [0, 0, this.width, this.height].join(' ');
         this.modifierIconNames.shift = this.mapper.getIcon('shift');
         this.modifierIconNames.option = this.mapper.getIcon('option');
         this.modifierIconNames.command = this.mapper.getIcon('command');
-
-        const bottomSideMode: boolean = this.width < this.height * 1.8;
+        this.textContainer.y = 0;
 
         const heightWidthRatio = this.height / this.width;
+        this.secondaryTextWidth = this.width;
 
         if (bottomSideMode) {
             const maxIconWidth = this.width / 4;
@@ -75,7 +143,7 @@ export class SvgKeystrokeKeyComponent implements OnInit, OnChanges {
             const iconHeight = iconScalingFactor * maxIconHeight;
             this.modifierContainer.width = this.width;
             this.modifierContainer.height = this.height / 5;
-            this.modifierContainer.y = this.height - this.modifierContainer.height;
+            this.modifierContainer.y = this.height - this.modifierContainer.height - this.secondaryHeight;
             this.shift.width = iconWidth;
             this.shift.height = iconHeight;
             this.shift.x = (maxIconWidth - iconWidth) / 2;
@@ -92,7 +160,7 @@ export class SvgKeystrokeKeyComponent implements OnInit, OnChanges {
             this.command.height = iconHeight;
             this.command.x = this.option.x + maxIconWidth;
             this.command.y = this.shift.y;
-            this.textContainer.y = -this.modifierContainer.height / 2;
+            this.textContainer.y = -this.modifierContainer.height / 2 - this.secondaryHeight / 2;
         } else {
             this.modifierContainer.width = this.width / 4;
             this.modifierContainer.height = this.height;
@@ -120,40 +188,11 @@ export class SvgKeystrokeKeyComponent implements OnInit, OnChanges {
             this.command.x = this.option.x + this.width / 2;
             this.command.y = this.option.y;
             this.textContainer.x = -this.modifierContainer.width / 2;
+            this.secondaryTextWidth = this.width - this.modifierContainer.width;
         }
 
+        this.textContainer.y -= textYModifier;
         this.textContainer.width = this.width;
         this.textContainer.height = this.height;
     }
-
-    ngOnChanges() {
-        if (this.keystrokeAction.hasScancode()) {
-            const scancode: number = this.keystrokeAction.scancode;
-            this.labelSource = this.mapper.scanCodeToSvgImagePath(scancode, this.keystrokeAction.type);
-            if (this.labelSource) {
-                this.labelType = 'icon';
-            } else {
-                let newLabelSource: string[];
-                newLabelSource = this.mapper.scanCodeToText(scancode, this.keystrokeAction.type);
-                if (newLabelSource) {
-                    if (newLabelSource.length === 1) {
-                        this.labelSource = newLabelSource[0];
-                        this.labelType = 'one-line';
-                    } else {
-                        this.labelSource = newLabelSource;
-                        this.labelType = 'two-line';
-                    }
-                }
-            }
-        } else {
-            this.labelType = 'empty';
-        }
-
-        this.shift.disabled = !this.keystrokeAction.isActive(KeyModifiers.leftShift | KeyModifiers.rightShift);
-        this.control.disabled = !this.keystrokeAction.isActive(KeyModifiers.leftCtrl | KeyModifiers.rightCtrl);
-        this.option.disabled = !this.keystrokeAction.isActive(KeyModifiers.leftAlt | KeyModifiers.rightAlt);
-        this.command.disabled = !this.keystrokeAction.isActive(KeyModifiers.leftGui | KeyModifiers.rightGui);
-
-    }
-
 }

packages/uhk-web/src/app/components/svg/keys/svg-one-line-text-key/svg-one-line-text-key.component.html

@@ -1,6 +1,13 @@
- <svg:text
+<svg:text
     [attr.x]="0"
     [attr.y]="textY"
     [attr.text-anchor]="'middle'">
-        <tspan [attr.x]="spanX" dy="0">{{ text }}</tspan>
- </svg:text>
+    <tspan [attr.x]="spanX" dy="0">{{ text }}</tspan>
+</svg:text>
+<svg:g svg-secondary-role
+       *ngIf="secondaryText"
+       [height]="20"
+       [width]="width"
+       [y]="secondaryTextY"
+       [text]="secondaryText">
+</svg:g>

packages/uhk-web/src/app/components/svg/keys/svg-one-line-text-key/svg-one-line-text-key.component.ts

@@ -1,22 +1,43 @@
-import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, OnChanges, SimpleChanges } from '@angular/core';
+
+import { isRectangleAsSecondaryRoleKey } from '../util';
+import { SECONDARY_ROLE_BOTTOM_MARGIN } from '../../constants';
 
 @Component({
     selector: 'g[svg-one-line-text-key]',
     templateUrl: './svg-one-line-text-key.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SvgOneLineTextKeyComponent implements OnInit {
+export class SvgOneLineTextKeyComponent implements OnChanges {
     @Input() height: number;
     @Input() width: number;
     @Input() text: string;
+    @Input() secondaryText: string;
 
     textY: number;
     spanX: number;
+    secondaryTextY: number;
+    secondaryHeight: number;
 
     constructor() { }
 
-    ngOnInit() {
-        this.textY = this.height / 2;
+    ngOnChanges(changes: SimpleChanges): void {
+        this.calculatePositions();
+    }
+
+    calculatePositions() {
+        let textYModifier = 0;
+        let secondaryYModifier = 0;
+
+        if (this.secondaryText && isRectangleAsSecondaryRoleKey(this.width, this.height)) {
+            textYModifier = this.height / 5;
+            secondaryYModifier = 5;
+        }
+
+        this.textY = this.height / 2 - textYModifier;
         this.spanX = this.width / 2;
+
+        this.secondaryHeight = this.height / 4;
+        this.secondaryTextY = this.height - this.secondaryHeight - SECONDARY_ROLE_BOTTOM_MARGIN - secondaryYModifier;
     }
 }

packages/uhk-web/src/app/components/svg/keys/svg-secondary-role/index.ts

@@ -0,0 +1 @@
+export * from './svg-secondary-role.component';

packages/uhk-web/src/app/components/svg/keys/svg-secondary-role/svg-secondary-role.component.html

@@ -0,0 +1,15 @@
+<svg [attr.viewBox]="viewBox" [attr.width]="width" [attr.height]="height" [attr.y]="y">
+    <g id="secondaryContent" [attr.transform]="transform">
+        <svg viewBox="0 0 14 14" width="12" height="12" x="2" [attr.y]="textY / 3.5">
+            <ellipse stroke="#fff" rx="6.5" ry="6.5" cy="7" cx="7" stroke-width="1" fill-opacity="0"/>
+            <text text-anchor="start" font-family="Helvetica" font-size="12" y="7.8" x="4" stroke-width="0">2
+            </text>
+        </svg>
+        <text [attr.y]="textY"
+              [attr.x]="textIndent"
+              font-size="12"
+              text-anchor="start">
+            {{ text }}
+        </text>
+    </g>
+</svg>

packages/uhk-web/src/app/components/svg/keys/svg-secondary-role/svg-secondary-role.component.ts

@@ -0,0 +1,52 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    Input,
+    OnChanges,
+    OnInit,
+    SimpleChanges,
+    ViewChild
+} from '@angular/core';
+
+import { getContentWidth } from '../../../../util';
+
+const SECONDARY_STYLE: CSSStyleDeclaration = {
+    font: '12px Helvetica'
+} as any;
+
+@Component({
+    selector: 'g[svg-secondary-role]',
+    templateUrl: './svg-secondary-role.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SvgSecondaryRoleComponent implements OnInit, OnChanges {
+    @Input() height: number;
+    @Input() width: number;
+    @Input() y: number;
+    @Input() text: string;
+
+    @ViewChild('secondary') svgElement: ElementRef;
+
+    viewBox: string;
+    textY: number;
+    transform: string;
+    textIndent = 16;
+
+    ngOnInit(): void {
+        this.viewBox = [0, 0, this.width, this.height].join(' ');
+        this.textY = this.height / 2 - 2;
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes.text) {
+            this.calculateTextPosition();
+        }
+    }
+
+    private calculateTextPosition(): void {
+        const textWidth = getContentWidth(SECONDARY_STYLE, this.text) + this.textIndent;
+        const translateValue = Math.max(0, (this.width - textWidth) / 2);
+        this.transform = `translate(${ translateValue },0)`;
+    }
+}

packages/uhk-web/src/app/components/svg/keys/svg-single-icon-key/svg-single-icon-key.component.html

@@ -1,6 +1,13 @@
 <svg:use [attr.xlink:href]="icon"
          [attr.width]="svgWidth"
          [attr.height]="svgHeight"
-         [attr.x]="svgWidth"
+         [attr.x]="svgX"
          [attr.y]="svgHeight">
 </svg:use>
+<svg:g svg-secondary-role
+       *ngIf="secondaryText"
+       [height]="20"
+       [width]="width"
+       [y]="secondaryTextY"
+       [text]="secondaryText">
+</svg:g>

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

@@ -1,22 +1,44 @@
-import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, OnChanges, SimpleChanges } from '@angular/core';
+
+import { isRectangleAsSecondaryRoleKey } from '../util';
+import { SECONDARY_ROLE_BOTTOM_MARGIN } from '../../constants';
 
 @Component({
     selector: 'g[svg-single-icon-key]',
     templateUrl: './svg-single-icon-key.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SvgSingleIconKeyComponent implements OnInit {
+export class SvgSingleIconKeyComponent implements OnChanges {
     @Input() width: number;
     @Input() height: number;
     @Input() icon: string;
+    @Input() secondaryText: string;
 
     svgHeight: number;
     svgWidth: number;
+    svgX: number;
+    secondaryTextY: number;
+    secondaryHeight: number;
 
     constructor() { }
 
-    ngOnInit() {
-        this.svgWidth = this.width / 3;
+    ngOnChanges(changes: SimpleChanges): void {
+        this.calculatePositions();
+    }
+
+    calculatePositions(): void {
+        let textYModifier = 0;
+        let secondaryYModifier = 0;
+
+        if (this.secondaryText && isRectangleAsSecondaryRoleKey(this.width, this.height)) {
+            textYModifier = this.height / 5;
+            secondaryYModifier = 5;
+        }
+
+        this.svgWidth = this.width / 2.075;
         this.svgHeight = this.height / 3;
+        this.svgX = (this.width - this.svgWidth) / 2;
+        this.secondaryHeight = this.height / 4;
+        this.secondaryTextY = this.height - this.secondaryHeight - SECONDARY_ROLE_BOTTOM_MARGIN - secondaryYModifier;
     }
 }

packages/uhk-web/src/app/components/svg/keys/svg-text-icon-key/svg-text-icon-key.component.html

@@ -9,4 +9,11 @@
         [attr.height]="useHeight"
         [attr.x]="useX"
         [attr.y]="useY">
-</svg:use>
+</svg:use>
+ <svg:g svg-secondary-role
+        *ngIf="secondaryText"
+        [height]="20"
+        [width]="width"
+        [y]="secondaryTextY"
+        [text]="secondaryText">
+ </svg:g>

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

@@ -1,15 +1,19 @@
-import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, OnChanges, SimpleChanges } from '@angular/core';
+
+import { isRectangleAsSecondaryRoleKey } from '../util';
+import { SECONDARY_ROLE_BOTTOM_MARGIN } from '../../constants';
 
 @Component({
     selector: 'g[svg-text-icon-key]',
     templateUrl: './svg-text-icon-key.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SvgTextIconKeyComponent implements OnInit {
+export class SvgTextIconKeyComponent implements OnChanges {
     @Input() width: number;
     @Input() height: number;
     @Input() text: string;
     @Input() icon: string;
+    @Input() secondaryText: string;
 
     useWidth: number;
     useHeight: number;
@@ -18,16 +22,33 @@ export class SvgTextIconKeyComponent implements OnInit {
     textY: number;
     textAnchor: string;
     spanX: number;
+    secondaryTextY: number;
+    secondaryHeight: number;
 
     constructor() { }
 
-    ngOnInit() {
+    ngOnChanges(changes: SimpleChanges): void {
+        this.calculatePositions();
+    }
+
+    calculatePositions(): void {
+        let textYModifier = 0;
+        let secondaryYModifier = 0;
+
+        if (this.secondaryText && isRectangleAsSecondaryRoleKey(this.width, this.height)) {
+            textYModifier =  this.height / 5;
+            secondaryYModifier = 5;
+        }
+
         this.useWidth = this.width / 3;
         this.useHeight = this.height / 3;
         this.useX = (this.width > 2 * this.height) ? this.width * 0.6 : this.width / 3;
         this.useY = (this.width > 2 * this.height) ? this.height / 3 : this.height / 2;
-        this.textY = (this.width > 2 * this.height) ? this.height / 2 : this.height / 3;
+        this.textY = ((this.width > 2 * this.height) ? this.height / 2 : this.height / 3) - textYModifier;
         this.textAnchor = (this.width > 2 * this.height) ? 'end' : 'middle';
         this.spanX = (this.width > 2 * this.height) ? 0.6 * this.width : this.width / 2;
+
+        this.secondaryHeight = this.height / 4;
+        this.secondaryTextY = this.height - this.secondaryHeight - SECONDARY_ROLE_BOTTOM_MARGIN - secondaryYModifier;
     }
 }

packages/uhk-web/src/app/components/svg/keys/svg-two-line-text-key/svg-two-line-text-key.component.html

@@ -8,4 +8,11 @@
                 [attr.y]="spanYs[index]"
                 dy="0"
                 >{{ text }}</tspan>
- </svg:text>
+ </svg:text>
+<svg:g svg-secondary-role
+       *ngIf="secondaryText"
+       [height]="20"
+       [width]="width"
+       [y]="secondaryTextY"
+       [text]="secondaryText">
+</svg:g>

packages/uhk-web/src/app/components/svg/keys/svg-two-line-text-key/svg-two-line-text-key.component.ts

@@ -1,28 +1,51 @@
-import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, SimpleChanges, OnChanges } from '@angular/core';
+import { SECONDARY_ROLE_BOTTOM_MARGIN } from '../../constants';
 
 @Component({
     selector: 'g[svg-two-line-text-key]',
     templateUrl: './svg-two-line-text-key.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SvgTwoLineTextKeyComponent implements OnInit {
+export class SvgTwoLineTextKeyComponent implements OnChanges {
     @Input() height: number;
     @Input() width: number;
     @Input() texts: string[];
+    @Input() secondaryText: string;
 
     textY: number;
     spanX: number;
     spanYs: number[];
+    secondaryTextY: number;
+    secondaryHeight: number;
 
     constructor() {
         this.spanYs = [];
     }
 
-    ngOnInit() {
-        this.textY = this.height / 2;
-        this.spanX = this.width / 2;
-        for (let i = 0; i < this.texts.length; ++i) {
-            this.spanYs.push((0.75 - i * 0.5) * this.height);
+    ngOnChanges(changes: SimpleChanges): void {
+        this.calculatePositions();
+    }
+
+    calculatePositions(): void {
+        let textYModifier = 0;
+        let secondaryYModifier = 0;
+        this.secondaryHeight = 0;
+        let textContainerHeight = this.height;
+
+        if (this.secondaryText) {
+            textYModifier =  this.height / 5;
+            secondaryYModifier = 0;
+            this.secondaryHeight = this.height / 4;
+            textContainerHeight -= this.secondaryHeight;
         }
+
+        this.textY = textContainerHeight / 2;
+        this.spanX = this.width / 2;
+        this.spanYs = [];
+        for (let i = 0; i < this.texts.length; ++i) {
+            this.spanYs.push((0.75 - i * 0.5) * textContainerHeight);
+        }
+
+        this.secondaryTextY = this.height - this.secondaryHeight - SECONDARY_ROLE_BOTTOM_MARGIN - secondaryYModifier;
     }
 }

packages/uhk-web/src/app/components/svg/keys/util.ts

@@ -0,0 +1,3 @@
+export const isRectangleAsSecondaryRoleKey = (width: number, height: number): boolean => {
+    return width > height * 2.4;
+};

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

@@ -9,7 +9,6 @@ import {
     OnChanges,
     OnInit,
     Output,
-    Renderer,
     SimpleChanges,
     ViewChild
 } from '@angular/core';
@@ -49,6 +48,7 @@ import {
     SvgKeyHoverEvent
 } from '../../../models/svg-key-events';
 import { RemapInfo } from '../../../models/remap-info';
+import { mapLeftRigthModifierToKeyActionModifier } from '../../../util';
 
 interface NameValuePair {
     name: string;
@@ -99,8 +99,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
     constructor(
         private store: Store<AppState>,
         private mapper: MapperService,
-        private element: ElementRef,
-        private renderer: Renderer
+        private element: ElementRef
     ) {
         this.keyEditConfig = {
             moduleId: undefined,
@@ -181,14 +180,9 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
 
     onCapture(event: SvgKeyboardCaptureEvent): void {
         const keystrokeAction: KeystrokeAction = new KeystrokeAction();
-        const modifiers = event.captured.left.concat(event.captured.right).map(x => x ? 1 : 0);
 
         keystrokeAction.scancode = event.captured.code;
-        keystrokeAction.modifierMask = 0;
-
-        for (let i = 0; i < modifiers.length; ++i) {
-            keystrokeAction.modifierMask |= modifiers[i] << this.mapper.modifierMapper(i);
-        }
+        keystrokeAction.modifierMask = mapLeftRigthModifierToKeyActionModifier(event.captured.left, event.captured.right);
 
         this.store.dispatch(
             KeymapActions.saveKey(
@@ -220,7 +214,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
         this.keyPosition = this.keyElement.getBoundingClientRect();
         this.popoverInitKeyAction = keyAction;
         this.popoverShown = true;
-        this.renderer.invokeElementMethod(this.popover.nativeElement, 'focus');
+        this.popover.nativeElement.focus();
     }
 
     showTooltip(keyAction: KeyAction, event: MouseEvent): void {

packages/uhk-web/src/app/components/udev-rules/udev-rules.component.html

@@ -0,0 +1,15 @@
+<ol>
+    <li>Open a terminal.</li>
+    <li>Run <code>su</code> to become root.</li>
+    <li>Paste the following script:</li>
+</ol>
+
+<div class="copy-container">
+                    <span class="fa  fa-2x fa-copy"
+                          ngxClipboard
+                          [cbContent]="command"
+                          title="Copy to clipboard"
+                          data-toggle="tooltip"
+                          data-placement="top"></span>
+    <pre><code>{{ command }}</code></pre>
+</div>

packages/uhk-web/src/app/components/udev-rules/udev-rules.component.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    selector: 'udev-rules',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './udev-rules.component.html'
+})
+export class UdevRulesComponent {
+    command = `cat <<EOF >/etc/udev/rules.d/50-uhk60.rules
+# Ultimate Hacking Keyboard rules
+# These are the udev rules for accessing the USB interfaces of the UHK as non-root users.
+# Copy this file to /etc/udev/rules.d and physically reconnect the UHK afterwards.
+SUBSYSTEM=="input", GROUP="input", MODE="0666"
+SUBSYSTEMS=="usb", ATTRS{idVendor}=="1d50", ATTRS{idProduct}=="612[0-7]", MODE:="0666", GROUP="plugdev"
+KERNEL=="hidraw*", ATTRS{idVendor}=="1d50", ATTRS{idProduct}=="612[0-7]", MODE="0666", GROUP="plugdev"
+EOF
+udevadm trigger
+udevadm settle`;
+}

packages/uhk-web/src/app/components/undoable-notifier/undoable-notifier.component.html

@@ -1,5 +1,8 @@
 <div class="pull-right">
-    <div class="alert alert-warning alert-dismissible" role="alert" [@slideInOut]="slideInOut">
+    <div *ngIf="text"
+         [@slideInOut]
+         class="alert alert-warning alert-dismissible"
+         role="alert">
         <button type="button"
                 class="close"
                 aria-label="Close"

packages/uhk-web/src/app/components/undoable-notifier/undoable-notifier.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
-import { animate, state, style, transition, trigger } from '@angular/animations';
+import { animate, style, transition, trigger } from '@angular/animations';
 
 import { Notification } from 'uhk-common';
 
@@ -9,16 +9,17 @@ import { Notification } from 'uhk-common';
     styleUrls: ['./undoable-notifier.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     animations: [
-        trigger('slideInOut', [
-            state('in', style({
-                transform: 'translate3d(0, 0, 0)'
-            })),
-            state('out', style({
-                transform: 'translate3d(200%, 0, 0)'
-            })),
-            transition('in => out', animate('400ms ease-in-out')),
-            transition('out => in', animate('400ms ease-in-out'))
-        ])
+        trigger(
+            'slideInOut', [
+                transition(':enter', [
+                    style({transform: 'translateX(100%)'}),
+                    animate('400ms ease-in-out', style({transform: 'translateX(0)'}))
+                ]),
+                transition(':leave', [
+                    style({transform: 'translateX(0)'}),
+                    animate('400ms ease-in-out', style({transform: 'translateX(100%)'}))
+                ])
+            ])
     ]
 })
 export class UndoableNotifierComponent implements OnChanges {
@@ -28,16 +29,14 @@ export class UndoableNotifierComponent implements OnChanges {
     @Output() close = new EventEmitter();
     @Output() undo = new EventEmitter();
 
-    get slideInOut() {
-        return this.notification ? 'in' : 'out';
-    }
-
     ngOnChanges(changes: SimpleChanges): void {
         if (changes['notification']) {
             const not: Notification = changes['notification'].currentValue;
             if (not) {
                 this.text = not.message;
                 this.undoable = !!not.extra;
+            } else {
+                this.text = null;
             }
         }
     }

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

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener, Renderer } from '@angular/core';
+import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
 
 @Directive({
     selector: '[cancelable]'
@@ -7,15 +7,15 @@ export class CancelableDirective {
 
     private originalValue: string;
 
-    constructor(private elementRef: ElementRef, private renderer: Renderer) { }
+    constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
 
     @HostListener('focus') onFocus(): void {
         this.originalValue = this.elementRef.nativeElement.value;
     }
 
     @HostListener('keyup.escape') onEscape(): void {
-        this.renderer.setElementProperty(this.elementRef.nativeElement, 'value', this.originalValue);
-        this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'blur');
+        this.renderer.setProperty(this.elementRef.nativeElement, 'value', this.originalValue);
+        this.elementRef.nativeElement.blur();
     }
 
 }

packages/uhk-web/src/app/models/key-modifier-model.ts

@@ -0,0 +1,7 @@
+import { KeyModifiers } from 'uhk-common';
+
+export interface KeyModifierModel {
+    text: string;
+    value: KeyModifiers;
+    checked: boolean;
+}

packages/uhk-web/src/app/models/missing-device-state.ts

@@ -0,0 +1,4 @@
+export interface MissingDeviceState {
+    header: string;
+    subtitle: string;
+}

packages/uhk-web/src/app/models/operating-system.ts

@@ -0,0 +1,5 @@
+export enum OperatingSystem {
+    Linux,
+    Mac,
+    Windows
+}

packages/uhk-web/src/app/models/privilage-page-sate.ts

@@ -2,4 +2,5 @@ export interface PrivilagePageSate {
     showWhatWillThisDo: boolean;
     showWhatWillThisDoContent: boolean;
     permissionSetupFailed: boolean;
+    updateUdevRules: boolean;
 }

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

@@ -1,3 +1,5 @@
+import { KeyModifierModel } from './key-modifier-model';
+
 export interface SvgKeyClickEvent {
     keyTarget: HTMLElement;
     shiftPressed?: boolean;
@@ -14,8 +16,8 @@ export interface SvgKeyboardKeyClickEvent extends SvgModuleKeyClickEvent {
 
 export interface KeyCaptureData {
     code: number;
-    left: boolean[];
-    right: boolean[];
+    left: KeyModifierModel[];
+    right: KeyModifierModel[];
 }
 
 export interface SvgKeyCaptureEvent {

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

@@ -1,14 +1,18 @@
 import { Injectable } from '@angular/core';
 
+import { MapperService } from './mapper.service';
+import { KeyModifiers } from 'uhk-common';
+import { KeyModifierModel } from '../models/key-modifier-model';
+
 @Injectable()
 export class CaptureService {
     private mapping: Map<number, number>;
-    private leftModifiers: Map<number, boolean>;
-    private rightModifiers: Map<number, boolean>;
+    private readonly leftModifiers: Map<number, KeyModifierModel>;
+    private readonly rightModifiers: Map<number, KeyModifierModel>;
 
-    constructor() {
-        this.leftModifiers = new Map<number, boolean>();
-        this.rightModifiers = new Map<number, boolean>();
+    constructor(private mapper: MapperService) {
+        this.leftModifiers = new Map<number, KeyModifierModel>();
+        this.rightModifiers = new Map<number, KeyModifierModel>();
         this.mapping = new Map<number, number>();
     }
 
@@ -21,26 +25,61 @@ export class CaptureService {
     }
 
     public setModifier(left: boolean, code: number) {
-        return left ? this.leftModifiers.set(code, true) : this.rightModifiers.set(code, true);
+        const map = left ? this.leftModifiers : this.rightModifiers;
+        map.get(code).checked = true;
     }
 
     public getModifiers(left: boolean) {
-        return left ? this.reMap(this.leftModifiers) : this.reMap(this.rightModifiers);
+        const map = left ? this.leftModifiers : this.rightModifiers;
+
+        return Array.from(map.values());
     }
 
     public initModifiers() {
-        this.leftModifiers.set(16, false); // Shift
-        this.leftModifiers.set(17, false); // Ctrl
-        this.leftModifiers.set(18, false); // Alt
-        this.leftModifiers.set(91, false); // Super
+        this.leftModifiers.set(16, {
+            text: 'LShift',
+            value: KeyModifiers.leftShift,
+            checked: false
+        });
+        this.leftModifiers.set(17, {
+            text: 'LCtrl',
+            value: KeyModifiers.leftCtrl,
+            checked: false
+        });
+        this.leftModifiers.set(18, {
+            text: this.mapper.getOsSpecificText('LAlt'),
+            value: KeyModifiers.leftAlt,
+            checked: false
+        });
+        this.leftModifiers.set(91, {
+            text: this.mapper.getOsSpecificText('LSuper'),
+            value: KeyModifiers.leftGui,
+            checked: false
+        });
 
-        this.rightModifiers.set(16, false); // Shift
-        this.rightModifiers.set(17, false); // Ctrl
-        this.rightModifiers.set(18, false); // Alt
-        this.rightModifiers.set(91, false); // Super
+        this.rightModifiers.set(16, {
+            text: 'RShift',
+            value: KeyModifiers.rightShift,
+            checked: false
+        });
+        this.rightModifiers.set(17, {
+            text: 'RCtrl',
+            value: KeyModifiers.rightCtrl,
+            checked: false
+        });
+        this.rightModifiers.set(18, {
+            text: this.mapper.getOsSpecificText('RAlt'),
+            value: KeyModifiers.rightAlt,
+            checked: false
+        });
+        this.rightModifiers.set(91, {
+            text: this.mapper.getOsSpecificText('RSuper'),
+            value: KeyModifiers.rightGui,
+            checked: false
+        });
     }
 
-    public populateMapping () {
+    public populateMapping() {
         this.mapping.set(8, 42);   // Backspace
         this.mapping.set(9, 43);   // Tab
         this.mapping.set(13, 40);  // Enter
@@ -136,8 +175,4 @@ export class CaptureService {
         this.mapping.set(221, 48); // Close bracket
         this.mapping.set(222, 52); // Single quote
     }
-
-    private reMap(value: Map<number, boolean>): boolean[] {
-        return [value.get(16), value.get(17), value.get(91), value.get(18)];
-    }
 }

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

@@ -1,7 +1,14 @@
 import { Injectable, NgZone } from '@angular/core';
 import { Action, Store } from '@ngrx/store';
 
-import { DeviceConnectionState, IpcEvents, IpcResponse, LogService, SaveUserConfigurationData } from 'uhk-common';
+import {
+    DeviceConnectionState,
+    IpcEvents,
+    IpcResponse,
+    LogService,
+    SaveUserConfigurationData,
+    UpdateFirmwareData
+} from 'uhk-common';
 import { AppState } from '../store';
 import { IpcCommonRenderer } from './ipc-common-renderer';
 import {
@@ -34,12 +41,8 @@ export class DeviceRendererService {
         this.ipcRenderer.send(IpcEvents.device.loadConfigurations);
     }
 
-    updateFirmware(data?: Array<number>): void {
-        if (data) {
-            this.ipcRenderer.send(IpcEvents.device.updateFirmware, JSON.stringify(data));
-        } else {
-            this.ipcRenderer.send(IpcEvents.device.updateFirmware);
-        }
+    updateFirmware(data: UpdateFirmwareData): void {
+        this.ipcRenderer.send(IpcEvents.device.updateFirmware, JSON.stringify(data));
     }
 
     startConnectionPoller(): void {

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

@@ -1,22 +1,40 @@
 import { Injectable } from '@angular/core';
-import { KeystrokeType } from 'uhk-common';
+import { Store } from '@ngrx/store';
+import { KeyModifiers, KeystrokeType, SecondaryRoleAction } from 'uhk-common';
+import { Subscription } from 'rxjs/Subscription';
+
+import { AppState, getOperatingSystem } from '../store';
+import { OperatingSystem } from '../models/operating-system';
+import { KeyModifierModel } from '../models/key-modifier-model';
 
 @Injectable()
 export class MapperService {
 
     private basicScanCodeTextMap: Map<number, string[]>;
     private mediaScanCodeTextMap: Map<number, string[]>;
-    private sytemScanCodeTextMap: Map<number, string[]>;
+    private systemScanCodeTextMap: Map<number, string[]>;
 
     private basicScancodeIcons: Map<number, string>;
     private mediaScancodeIcons: Map<number, string>;
     private systemScancodeIcons: Map<number, string>;
     private nameToFileName: Map<string, string>;
+    private osSpecificTexts: Map<string, string>;
+    private secondaryRoleTexts: Map<number, string>;
 
-    constructor() {
-        this.initScanCodeTextMap();
-        this.initScancodeIcons();
-        this.initNameToFileNames();
+    private operatingSystem: OperatingSystem;
+    private osSubscription: Subscription;
+
+    constructor(private store: Store<AppState>) {
+        this.osSubscription = store
+            .select(getOperatingSystem)
+            .subscribe(os => {
+                this.operatingSystem = os;
+                this.initOsSpecificText();
+                this.initScanCodeTextMap();
+                this.initScancodeIcons();
+                this.initNameToFileNames();
+                this.initSecondaryRoleTexts();
+            });
     }
 
     public scanCodeToText(scanCode: number, type: KeystrokeType = KeystrokeType.basic): string[] {
@@ -27,7 +45,7 @@ export class MapperService {
                 map = this.mediaScanCodeTextMap;
                 break;
             case KeystrokeType.system:
-                map = this.sytemScanCodeTextMap;
+                map = this.systemScanCodeTextMap;
                 break;
             default:
                 map = this.basicScanCodeTextMap;
@@ -79,7 +97,10 @@ export class MapperService {
     }
 
     public getIcon(iconName: string): string {
-        return 'assets/compiled_sprite.svg#' + this.nameToFileName.get(iconName);
+        const mappedIconName = this.nameToFileName.get(iconName);
+        if (mappedIconName) {
+            return 'assets/compiled_sprite.svg#' + mappedIconName;
+        }
     }
 
     public modifierMapper(x: number) {
@@ -90,6 +111,94 @@ export class MapperService {
         }
     }
 
+    public getOperatingSystem(): OperatingSystem {
+        return this.operatingSystem;
+    }
+
+    public getOsSpecificText(key: string): string {
+        const text = this.osSpecificTexts.get(key);
+
+        return text ? text : key;
+    }
+
+    public getSecondaryRoleText(secondaryRoleAction: SecondaryRoleAction): string {
+        return this.secondaryRoleTexts.get(secondaryRoleAction);
+    }
+
+    public getLeftKeyModifiers(): KeyModifierModel[] {
+        return [
+            {
+                text: 'LShift',
+                value: KeyModifiers.leftShift,
+                checked: false
+            },
+            {
+                text: 'LCtrl',
+                value: KeyModifiers.leftCtrl,
+                checked: false
+            },
+            {
+                text: this.getOsSpecificText('LAlt'),
+                value: KeyModifiers.leftAlt,
+                checked: false
+            },
+            {
+                text: this.getOsSpecificText('LSuper'),
+                value: KeyModifiers.leftGui,
+                checked: false
+            }
+        ];
+    }
+
+    public getRightKeyModifiers(): KeyModifierModel[] {
+        return [
+            {
+                text: 'RShift',
+                value: KeyModifiers.rightShift,
+                checked: false
+            },
+            {
+                text: 'RCtrl',
+                value: KeyModifiers.rightCtrl,
+                checked: false
+            },
+            {
+                text: this.getOsSpecificText('RAlt'),
+                value: KeyModifiers.rightAlt,
+                checked: false
+            },
+            {
+                text: this.getOsSpecificText('RSuper'),
+                value: KeyModifiers.rightGui,
+                checked: false
+            }
+        ];
+    }
+
+    public getOsSpecificModifierTextByValue(value: KeyModifiers): string {
+        const keyModifier = [...this.getLeftKeyModifiers(), ...this.getRightKeyModifiers()]
+            .find(modifier => modifier.value === value);
+
+        return (keyModifier || {text: ''}).text;
+    }
+
+    private initOsSpecificText(): void {
+        this.osSpecificTexts = new Map<string, string>();
+
+        if (this.operatingSystem === OperatingSystem.Mac) {
+            this.osSpecificTexts.set('Enter', 'Return');
+            this.osSpecificTexts.set('Alt', 'Option');
+            this.osSpecificTexts.set('Super', 'Cmd');
+            this.osSpecificTexts.set('LSuper', 'LCmd');
+            this.osSpecificTexts.set('RSuper', 'RCmd');
+            this.osSpecificTexts.set('LAlt', 'LOption');
+            this.osSpecificTexts.set('RAlt', 'ROption');
+        } else if (this.operatingSystem === OperatingSystem.Windows) {
+            this.osSpecificTexts.set('LSuper', 'LWindows');
+            this.osSpecificTexts.set('RSuper', 'RWindows');
+        }
+    }
+
     // TODO: read the mapping from JSON
     private initScanCodeTextMap(): void {
         this.basicScanCodeTextMap = new Map<number, string[]>();
@@ -129,7 +238,7 @@ export class MapperService {
         this.basicScanCodeTextMap.set(37, ['8', '*']);
         this.basicScanCodeTextMap.set(38, ['9', '(']);
         this.basicScanCodeTextMap.set(39, ['0', ')']);
-        this.basicScanCodeTextMap.set(40, ['Enter']);
+        this.basicScanCodeTextMap.set(40, [this.getOsSpecificText('Enter')]);
         this.basicScanCodeTextMap.set(41, ['Esc']);
         this.basicScanCodeTextMap.set(42, ['Backspace']);
         this.basicScanCodeTextMap.set(43, ['Tab']);
@@ -159,8 +268,8 @@ export class MapperService {
         this.basicScanCodeTextMap.set(67, ['F10']);
         this.basicScanCodeTextMap.set(68, ['F11']);
         this.basicScanCodeTextMap.set(69, ['F12']);
-        this.basicScanCodeTextMap.set(70, ['PrtScn']);
-        this.basicScanCodeTextMap.set(71, ['Scroll Lock']);
+        this.basicScanCodeTextMap.set(70, ['PrtScn', 'SysRq']);
+        this.basicScanCodeTextMap.set(71, ['ScrLk']);
         this.basicScanCodeTextMap.set(72, ['Pause']);
         this.basicScanCodeTextMap.set(73, ['Insert']);
         this.basicScanCodeTextMap.set(74, ['Home']);
@@ -172,12 +281,12 @@ export class MapperService {
         this.basicScanCodeTextMap.set(80, ['Left Arrow']);
         this.basicScanCodeTextMap.set(81, ['Down Arrow']);
         this.basicScanCodeTextMap.set(82, ['Up Arrow']);
-        this.basicScanCodeTextMap.set(83, ['Num Lock']);
+        this.basicScanCodeTextMap.set(83, ['NumLk']);
         this.basicScanCodeTextMap.set(84, ['/']);
         this.basicScanCodeTextMap.set(85, ['*']);
         this.basicScanCodeTextMap.set(86, ['-']);
         this.basicScanCodeTextMap.set(87, ['+']);
-        this.basicScanCodeTextMap.set(88, ['Enter']);
+        this.basicScanCodeTextMap.set(88, [this.getOsSpecificText('Enter')]);
         this.basicScanCodeTextMap.set(89, ['end', '1']);
         this.basicScanCodeTextMap.set(90, ['2']);
         this.basicScanCodeTextMap.set(91, ['pgdn', '3']);
@@ -203,35 +312,42 @@ export class MapperService {
         this.basicScanCodeTextMap.set(113, ['F22']);
         this.basicScanCodeTextMap.set(114, ['F23']);
         this.basicScanCodeTextMap.set(115, ['F24']);
+        this.basicScanCodeTextMap.set(135, ['Int1']);
+        this.basicScanCodeTextMap.set(136, ['Int2']);
+        this.basicScanCodeTextMap.set(137, ['Int3']);
+        this.basicScanCodeTextMap.set(144, ['Lang1']);
+        this.basicScanCodeTextMap.set(145, ['Lang2']);
         this.basicScanCodeTextMap.set(176, ['00']);
         this.basicScanCodeTextMap.set(177, ['000']);
 
         this.mediaScanCodeTextMap = new Map<number, string[]>();
-        this.mediaScanCodeTextMap.set(138, ['WWW']);
         this.mediaScanCodeTextMap.set(176, ['Play']);
         this.mediaScanCodeTextMap.set(177, ['Pause']);
         this.mediaScanCodeTextMap.set(181, ['Next']);
         this.mediaScanCodeTextMap.set(182, ['Prev']);
         this.mediaScanCodeTextMap.set(183, ['Stop']);
         this.mediaScanCodeTextMap.set(184, ['Eject']);
-        this.mediaScanCodeTextMap.set(204, ['Eject', 'Stop']);
         this.mediaScanCodeTextMap.set(205, ['Pause', 'Play']);
         this.mediaScanCodeTextMap.set(226, ['Mute']);
         this.mediaScanCodeTextMap.set(233, ['Vol +']);
         this.mediaScanCodeTextMap.set(234, ['Vol -']);
 
-        this.mediaScanCodeTextMap.set(406, ['Launch Web Browser']);
         this.mediaScanCodeTextMap.set(394, ['Launch Email Client']);
         this.mediaScanCodeTextMap.set(402, ['Launch Calculator']);
 
-        this.sytemScanCodeTextMap = new Map<number, string[]>();
-        this.sytemScanCodeTextMap.set(129, ['Power Down']);
-        this.sytemScanCodeTextMap.set(130, ['Sleep']);
-        this.sytemScanCodeTextMap.set(131, ['Wake Up']);
+        this.mediaScanCodeTextMap.set(548, ['Hist -']);
+        this.mediaScanCodeTextMap.set(549, ['Hist +']);
+
+        this.systemScanCodeTextMap = new Map<number, string[]>();
+        this.systemScanCodeTextMap.set(129, ['Power Down']);
+        this.systemScanCodeTextMap.set(130, ['Sleep']);
+        this.systemScanCodeTextMap.set(131, ['Wake Up']);
     }
 
     private initScancodeIcons(): void {
         this.basicScancodeIcons = new Map<number, string>();
+        this.basicScancodeIcons.set(42, 'icon-kbd__backspace');
+        this.basicScancodeIcons.set(57, 'icon-kbd__caps-lock');
         this.basicScancodeIcons.set(79, 'icon-kbd__mod--arrow-right');
         this.basicScancodeIcons.set(80, 'icon-kbd__mod--arrow-left');
         this.basicScancodeIcons.set(81, 'icon-kbd__mod--arrow-down');
@@ -239,17 +355,16 @@ export class MapperService {
         this.basicScancodeIcons.set(101, 'icon-kbd__mod--menu');
 
         this.mediaScancodeIcons = new Map<number, string>();
-        this.mediaScancodeIcons.set(138, 'icon-kbd__fn--browser');
         this.mediaScancodeIcons.set(176, 'icon-kbd__media--play');
         this.mediaScancodeIcons.set(177, 'icon-kbd__media--pause');
         this.mediaScancodeIcons.set(181, 'icon-kbd__media--next');
         this.mediaScancodeIcons.set(182, 'icon-kbd__media--prev');
         this.mediaScancodeIcons.set(184, 'icon-kbd__fn--eject');
+        this.mediaScancodeIcons.set(205, 'icon-kbd__play-pause');
         this.mediaScancodeIcons.set(226, 'icon-kbd__media--mute');
         this.mediaScancodeIcons.set(233, 'icon-kbd__media--vol-up');
         this.mediaScancodeIcons.set(234, 'icon-kbd__media--vol-down');
 
-        this.mediaScancodeIcons.set(406, 'icon-kbd__media--web-browser');
         this.mediaScancodeIcons.set(394, 'icon-kbd__media--email-client');
         this.mediaScancodeIcons.set(402, 'icon-kbd__media--calculator');
 
@@ -266,8 +381,12 @@ export class MapperService {
         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');
-        this.nameToFileName.set('option', 'icon-kbd__default--modifier-option');
-        this.nameToFileName.set('command', 'icon-kbd__default--modifier-command');
+        if (this.operatingSystem === OperatingSystem.Mac) {
+            this.nameToFileName.set('option', 'icon-kbd__default--modifier-option');
+            this.nameToFileName.set('command', 'icon-kbd__default--modifier-command');
+        } else if (this.operatingSystem === OperatingSystem.Windows) {
+            this.nameToFileName.set('command', 'icon-kbd__default--modifier-windows');
+        }
         this.nameToFileName.set('mouse', 'icon-kbd__mouse');
         this.nameToFileName.set('left-arrow', 'icon-kbd__mod--arrow-left');
         this.nameToFileName.set('right-arrow', 'icon-kbd__mod--arrow-right');
@@ -279,4 +398,18 @@ export class MapperService {
         this.nameToFileName.set('scroll-up', 'icon-kbd__mouse--scroll-up');
     }
 
+    private initSecondaryRoleTexts(): void {
+        this.secondaryRoleTexts = new Map<number, string>();
+        this.secondaryRoleTexts.set(0, 'LCtrl');
+        this.secondaryRoleTexts.set(1, 'LShift');
+        this.secondaryRoleTexts.set(2, 'LAlt');
+        this.secondaryRoleTexts.set(3, 'LSuper');
+        this.secondaryRoleTexts.set(4, 'RCtrl');
+        this.secondaryRoleTexts.set(5, 'RShift');
+        this.secondaryRoleTexts.set(6, 'RAlt');
+        this.secondaryRoleTexts.set(7, 'RSuper');
+        this.secondaryRoleTexts.set(8, 'Mod');
+        this.secondaryRoleTexts.set(9, 'Fn');
+        this.secondaryRoleTexts.set(10, 'Mouse');
+    }
 }

packages/uhk-web/src/app/services/user-config.json

@@ -14,7 +14,7 @@
   "mouseMoveAcceleratedSpeed": 64,
   "mouseScrollInitialSpeed": 20,
   "mouseScrollAcceleration": 20,
-  "mouseScrollDeceleratedSpeed": 20,
+  "mouseScrollDeceleratedSpeed": 10,
   "mouseScrollBaseSpeed": 20,
   "mouseScrollAcceleratedSpeed": 50,
   "moduleConfigurations": [],
@@ -595,8 +595,7 @@
                 {
                   "keyActionType": "keystroke",
                   "type": "basic",
-                  "scancode": 57,
-                  "modifierMask": 1
+                  "scancode": 57
                 },
                 {
                   "keyActionType": "keystroke",
@@ -1581,8 +1580,7 @@
                 {
                   "keyActionType": "keystroke",
                   "type": "basic",
-                  "scancode": 57,
-                  "modifierMask": 1
+                  "scancode": 57
                 },
                 {
                   "keyActionType": "keystroke",
@@ -2576,8 +2574,7 @@
                 {
                   "keyActionType": "keystroke",
                   "type": "basic",
-                  "scancode": 57,
-                  "modifierMask": 1
+                  "scancode": 57
                 },
                 {
                   "keyActionType": "keystroke",
@@ -3559,8 +3556,7 @@
                 {
                   "keyActionType": "keystroke",
                   "type": "basic",
-                  "scancode": 57,
-                  "modifierMask": 1
+                  "scancode": 57
                 },
                 {
                   "keyActionType": "keystroke",
@@ -4551,8 +4547,7 @@
                 {
                   "keyActionType": "keystroke",
                   "type": "basic",
-                  "scancode": 57,
-                  "modifierMask": 1
+                  "scancode": 57
                 },
                 {
                   "keyActionType": "keystroke",
@@ -5528,8 +5523,7 @@
                 {
                   "keyActionType": "keystroke",
                   "type": "basic",
-                  "scancode": 57,
-                  "modifierMask": 1
+                  "scancode": 57
                 },
                 {
                   "keyActionType": "keystroke",
@@ -6513,8 +6507,7 @@
                 {
                   "keyActionType": "keystroke",
                   "type": "basic",
-                  "scancode": 57,
-                  "modifierMask": 1
+                  "scancode": 57
                 },
                 {
                   "keyActionType": "keystroke",

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

@@ -59,6 +59,7 @@ import {
     SvgMouseScrollKeyComponent,
     SvgMouseSpeedKeyComponent,
     SvgOneLineTextKeyComponent,
+    SvgSecondaryRoleComponent,
     SvgSingleIconKeyComponent,
     SvgSwitchKeymapKeyComponent,
     SvgTextIconKeyComponent,
@@ -110,6 +111,7 @@ import { UhkDeviceBootloaderNotActiveGuard } from './services/uhk-device-bootloa
 import { FileUploadComponent } from './components/file-upload';
 import { AutoGrowInputComponent } from './components/auto-grow-input';
 import { HelpPageComponent } from './components/agent/help-page/help-page.component';
+import { UdevRulesComponent } from './components/udev-rules/udev-rules.component';
 
 @NgModule({
     declarations: [
@@ -186,7 +188,9 @@ import { HelpPageComponent } from './components/agent/help-page/help-page.compon
         FileUploadComponent,
         AutoGrowInputComponent,
         HelpPageComponent,
-        ExternalUrlDirective
+        ExternalUrlDirective,
+        SvgSecondaryRoleComponent,
+        UdevRulesComponent
     ],
     imports: [
         CommonModule,

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

@@ -20,7 +20,9 @@ export const ActionTypes = {
     OPEN_URL_IN_NEW_WINDOW: type(PREFIX + 'Open URL in new Window'),
     PRIVILEGE_WHAT_WILL_THIS_DO: type(PREFIX + 'What will this do clicked'),
     SETUP_PERMISSION_ERROR: type(PREFIX + 'Setup permission error'),
-    LOAD_APP_START_INFO: type(PREFIX + 'Load app start info')
+    LOAD_APP_START_INFO: type(PREFIX + 'Load app start info'),
+    START_KEYPRESS_CAPTURING: type(PREFIX + 'Start keypress capturing'),
+    STOP_KEYPRESS_CAPTURING: type(PREFIX + 'Stop keypress capturing')
 };
 
 export class AppBootsrappedAction implements Action {
@@ -103,6 +105,14 @@ export class LoadAppStartInfoAction implements Action {
     type = ActionTypes.LOAD_APP_START_INFO;
 }
 
+export class StartKeypressCapturingAction implements Action {
+    type = ActionTypes.START_KEYPRESS_CAPTURING;
+}
+
+export class StopKeypressCapturingAction implements Action {
+    type = ActionTypes.STOP_KEYPRESS_CAPTURING;
+}
+
 export type Actions
     = AppStartedAction
     | AppBootsrappedAction
@@ -118,4 +128,6 @@ export type Actions
     | PrivilegeWhatWillThisDoAction
     | SetupPermissionErrorAction
     | LoadAppStartInfoAction
+    | StartKeypressCapturingAction
+    | StopKeypressCapturingAction
     ;

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

@@ -66,11 +66,7 @@ export class ApplicationEffects {
             this.logService.debug('[AppEffect][processStartInfo] payload:', appInfo);
             return [
                 new ApplyAppStartInfoAction(appInfo),
-                new ConnectionStateChangedAction({
-                    connected: appInfo.deviceConnected,
-                    hasPermission: appInfo.hasPermission,
-                    bootloaderActive: appInfo.bootloaderActive
-                })
+                new ConnectionStateChangedAction(appInfo.deviceConnectionState)
             ];
         });
 

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

@@ -18,6 +18,7 @@ import {
     HardwareConfiguration,
     IpcResponse,
     NotificationType,
+    UdevRulesInfo,
     UserConfiguration
 } from 'uhk-common';
 import {
@@ -39,9 +40,10 @@ import {
     UpdateFirmwareSuccessAction,
     UpdateFirmwareWithAction
 } from '../actions/device';
+import { AppRendererService } from '../../services/app-renderer.service';
 import { DeviceRendererService } from '../../services/device-renderer.service';
 import { SetupPermissionErrorAction, ShowNotificationAction } from '../actions/app';
-import { AppState, getRouterState } from '../index';
+import { AppState, deviceConnected, getRouterState } from '../index';
 import {
     ActionTypes as UserConfigActions,
     ApplyUserConfigurationFromFileAction,
@@ -50,13 +52,14 @@ import {
 } from '../actions/user-config';
 import { DefaultUserConfigurationService } from '../../services/default-user-configuration.service';
 import { DataStorageRepositoryService } from '../../services/datastorage-repository.service';
+import { getVersions } from '../../util';
 
 @Injectable()
 export class DeviceEffects {
     @Effect()
     deviceConnectionStateChange$: Observable<Action> = this.actions$
         .ofType<ConnectionStateChangedAction>(ActionTypes.CONNECTION_STATE_CHANGED)
-        .withLatestFrom(this.store.select(getRouterState))
+        .withLatestFrom(this.store.select(getRouterState), this.store.select(deviceConnected))
         .do(([action, route]) => {
             const state = action.payload;
 
@@ -64,23 +67,24 @@ export class DeviceEffects {
                 return;
             }
 
-            if (!state.hasPermission) {
-                this.router.navigate(['/privilege']);
+            if (!state.hasPermission || !state.zeroInterfaceAvailable) {
+                return this.router.navigate(['/privilege']);
             }
-            else if (state.bootloaderActive) {
-                this.router.navigate(['/recovery-device']);
-            }
-            else if (state.connected) {
-                this.router.navigate(['/']);
-            }
-            else {
-                this.router.navigate(['/detection']);
-            }
-        })
-        .switchMap(([action, route]) => {
-            const state = action.payload;
 
-            if (state.connected && state.hasPermission) {
+            if (state.bootloaderActive) {
+                return this.router.navigate(['/recovery-device']);
+            }
+
+            if (state.connected && state.zeroInterfaceAvailable) {
+                return this.router.navigate(['/']);
+            }
+
+            return this.router.navigate(['/detection']);
+        })
+        .switchMap(([action, route, connected]) => {
+            const payload = action.payload;
+
+            if (connected && payload.hasPermission && payload.zeroInterfaceAvailable) {
                 return Observable.of(new LoadConfigFromDeviceAction());
             }
 
@@ -98,16 +102,13 @@ export class DeviceEffects {
     setPrivilegeOnLinuxReply$: Observable<Action> = this.actions$
         .ofType<SetPrivilegeOnLinuxReplyAction>(ActionTypes.SET_PRIVILEGE_ON_LINUX_REPLY)
         .map(action => action.payload)
-        .map((response: any): any => {
+        .switchMap((response: any): any => {
             if (response.success) {
-                return new ConnectionStateChangedAction({
-                    connected: true,
-                    hasPermission: true,
-                    bootloaderActive: false
-                });
+                this.appRendererService.getAppStartInfo();
+                return Observable.empty();
             }
 
-            return new SetupPermissionErrorAction(response.error);
+            return Observable.of(new SetupPermissionErrorAction(response.error));
         });
 
     @Effect({dispatch: false})
@@ -201,12 +202,17 @@ export class DeviceEffects {
 
     @Effect({dispatch: false}) updateFirmware$ = this.actions$
         .ofType<UpdateFirmwareAction>(ActionTypes.UPDATE_FIRMWARE)
-        .do(() => this.deviceRendererService.updateFirmware());
+        .do(() => this.deviceRendererService.updateFirmware({
+            versionInformation: getVersions()
+        }));
 
     @Effect({dispatch: false}) updateFirmwareWith$ = this.actions$
         .ofType<UpdateFirmwareWithAction>(ActionTypes.UPDATE_FIRMWARE_WITH)
         .map(action => action.payload)
-        .do(data => this.deviceRendererService.updateFirmware(data));
+        .do(data => this.deviceRendererService.updateFirmware({
+            versionInformation: getVersions(),
+            firmware: data
+        }));
 
     @Effect() updateFirmwareReply$ = this.actions$
         .ofType<UpdateFirmwareReplyAction>(ActionTypes.UPDATE_FIRMWARE_REPLY)
@@ -237,6 +243,7 @@ export class DeviceEffects {
 
     constructor(private actions$: Actions,
                 private router: Router,
+                private appRendererService: AppRendererService,
                 private deviceRendererService: DeviceRendererService,
                 private store: Store<AppState>,
                 private dataStorageRepository: DataStorageRepositoryService,

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

@@ -1,8 +1,8 @@
 import { createSelector } from 'reselect';
 import { ActionReducerMap, MetaReducer } from '@ngrx/store';
-import { RouterReducerState, routerReducer } from '@ngrx/router-store';
+import { routerReducer, RouterReducerState } from '@ngrx/router-store';
 import { storeFreeze } from 'ngrx-store-freeze';
-import { Keymap, UserConfiguration } from 'uhk-common';
+import { HardwareModules, Keymap, UserConfiguration } from 'uhk-common';
 
 import * as fromUserConfig from './reducers/user-configuration';
 import * as fromPreset from './reducers/preset';
@@ -10,9 +10,12 @@ import * as fromAppUpdate from './reducers/app-update.reducer';
 import * as autoUpdateSettings from './reducers/auto-update-settings';
 import * as fromApp from './reducers/app.reducer';
 import * as fromDevice from './reducers/device';
+import * as fromSelectors from './reducers/selectors';
 import { initProgressButtonState } from './reducers/progress-button-state';
 import { environment } from '../../environments/environment';
 import { RouterStateUrl } from './router-util';
+import { PrivilagePageSate } from '../models/privilage-page-sate';
+import { isVersionGte } from '../util';
 
 // State interface for the application
 export interface AppState {
@@ -44,14 +47,14 @@ 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);
 export const getKeyboardLayout = createSelector(appState, fromApp.getKeyboardLayout);
 export const deviceConfigurationLoaded = createSelector(appState, fromApp.deviceConfigurationLoaded);
 export const getAgentVersionInfo = createSelector(appState, fromApp.getAgentVersionInfo);
-export const getPrivilegePageState = createSelector(appState, fromApp.getPrivilagePageState);
+export const getOperatingSystem = createSelector(appState, fromSelectors.getOperatingSystem);
+export const keypressCapturing = createSelector(appState, fromApp.keypressCapturing);
 export const runningOnNotSupportedWindows = createSelector(appState, fromApp.runningOnNotSupportedWindows);
 export const firmwareUpgradeAllowed = createSelector(runningOnNotSupportedWindows, notSupportedOs => !notSupportedOs);
 
@@ -63,14 +66,21 @@ export const getAutoUpdateSettings = createSelector(appUpdateSettingsState, auto
 export const getCheckingForUpdate = createSelector(appUpdateSettingsState, autoUpdateSettings.checkingForUpdate);
 
 export const deviceState = (state: AppState) => state.device;
-export const isDeviceConnected = createSelector(deviceState, fromDevice.isDeviceConnected);
-export const deviceConnected = createSelector(runningInElectron, isDeviceConnected, (electron, connected) => {
-    return !electron ? true : connected;
-});
-export const devicePermission = createSelector(deviceState, fromDevice.hasDevicePermission);
-export const hasDevicePermission = createSelector(runningInElectron, devicePermission, (electron, permission) => {
-    return !electron ? true : permission;
-});
+export const deviceConnected = createSelector(
+    runningInElectron, deviceState, appState,
+    (electron, device, app) => {
+        if (!electron) {
+            return true;
+        }
+
+        if (app.platform === 'linux') {
+            return device.connected && (device.zeroInterfaceAvailable || device.updatingFirmware);
+        }
+
+        return device.connected;
+    });
+export const hasDevicePermission = createSelector(deviceState, fromDevice.hasDevicePermission);
+export const getMissingDeviceState = createSelector(deviceState, fromDevice.getMissingDeviceState);
 export const saveToKeyboardStateSelector = createSelector(deviceState, fromDevice.getSaveToKeyboardState);
 export const saveToKeyboardState = createSelector(runningInElectron, saveToKeyboardStateSelector, (electron, state) => {
     return electron ? state : initProgressButtonState;
@@ -85,6 +95,18 @@ export const getRestoreUserConfiguration = createSelector(deviceState, fromDevic
 export const bootloaderActive = createSelector(deviceState, fromDevice.bootloaderActive);
 export const firmwareUpgradeFailed = createSelector(deviceState, fromDevice.firmwareUpgradeFailed);
 export const firmwareUpgradeSuccess = createSelector(deviceState, fromDevice.firmwareUpgradeSuccess);
+export const getUpdateUdevRules = createSelector(deviceState, fromDevice.updateUdevRules);
+
+export const getPrivilegePageState = createSelector(appState, getUpdateUdevRules, (app, updateUdevRules): PrivilagePageSate => {
+    const permissionSetupFailed = !!app.permissionError;
+
+    return {
+        permissionSetupFailed,
+        updateUdevRules,
+        showWhatWillThisDo: !app.privilegeWhatWillThisDoClicked && !permissionSetupFailed,
+        showWhatWillThisDoContent: app.privilegeWhatWillThisDoClicked || permissionSetupFailed
+    };
+});
 
 export const getSideMenuPageState = createSelector(
     showAddonMenu,
@@ -110,3 +132,13 @@ export const getSideMenuPageState = createSelector(
 );
 
 export const getRouterState = (state: AppState) => state.router;
+
+export const macroPlaybackSupported = createSelector(getHardwareModules, (hardwareModules: HardwareModules): boolean => {
+    return isVersionGte(hardwareModules.rightModuleInfo.firmwareVersion, '8.4.3');
+});
+export const layerDoubleTapSupported = createSelector(
+    getHardwareModules,
+    (hardwareModules: HardwareModules): boolean => {
+        return isVersionGte(hardwareModules.rightModuleInfo.firmwareVersion, '8.4.3');
+    }
+);

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

@@ -32,6 +32,7 @@ export interface State {
     permissionError?: any;
     platform?: string;
     osVersion?: string;
+    keypressCapturing: boolean;
 }
 
 export const initialState: State = {
@@ -41,7 +42,8 @@ export const initialState: State = {
     runningInElectron: runInElectron(),
     configLoading: true,
     agentVersionInfo: getVersions(),
-    privilegeWhatWillThisDoClicked: false
+    privilegeWhatWillThisDoClicked: false,
+    keypressCapturing: false
 };
 
 export function reducer(state = initialState, action: Action & { payload: any }) {
@@ -151,13 +153,24 @@ export function reducer(state = initialState, action: Action & { payload: any })
                 permissionError: null
             };
 
+        case ActionTypes.START_KEYPRESS_CAPTURING:
+            return {
+                ...state,
+                keypressCapturing: true
+            };
+
+        case ActionTypes.STOP_KEYPRESS_CAPTURING:
+            return {
+                ...state,
+                keypressCapturing: false
+            };
+
         default:
             return state;
     }
 }
 
 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,15 +183,6 @@ export const getKeyboardLayout = (state: State): KeyboardLayout => {
 };
 export const deviceConfigurationLoaded = (state: State) => !state.runningInElectron ? true : !!state.hardwareConfig;
 export const getAgentVersionInfo = (state: State) => state.agentVersionInfo || {} as VersionInformation;
-export const getPrivilagePageState = (state: State): PrivilagePageSate => {
-    const permissionSetupFailed = !!state.permissionError;
-
-    return {
-        permissionSetupFailed,
-        showWhatWillThisDo: !state.privilegeWhatWillThisDoClicked && !permissionSetupFailed,
-        showWhatWillThisDoContent: state.privilegeWhatWillThisDoClicked || permissionSetupFailed
-    };
-};
 
 export const runningOnNotSupportedWindows = (state: State): boolean => {
     if (!state.osVersion || state.platform !== 'win32') {
@@ -191,3 +195,5 @@ export const runningOnNotSupportedWindows = (state: State): boolean => {
 
     return osMajor < 6 || (osMajor === 6 && osMinor < 2);
 };
+
+export const keypressCapturing = (state: State): boolean => state.keypressCapturing;

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

@@ -1,12 +1,12 @@
 import { Action } from '@ngrx/store';
-import { HardwareModules } from 'uhk-common';
+import { HardwareModules, UdevRulesInfo } from 'uhk-common';
 
 import {
     ActionTypes,
     ConnectionStateChangedAction,
     HardwareModulesLoadedAction,
-    SaveConfigurationAction,
     HasBackupUserConfigurationAction,
+    SaveConfigurationAction,
     UpdateFirmwareFailedAction,
     UpdateFirmwareSuccessAction
 } from '../actions/device';
@@ -14,11 +14,14 @@ import { ActionTypes as AppActions, ElectronMainLogReceivedAction } from '../act
 import { initProgressButtonState, ProgressButtonState } from './progress-button-state';
 import { XtermCssClass, XtermLog } from '../../models/xterm-log';
 import { RestoreConfigurationState } from '../../models/restore-configuration-state';
+import { MissingDeviceState } from '../../models/missing-device-state';
 
 export interface State {
     connected: boolean;
     hasPermission: boolean;
     bootloaderActive: boolean;
+    zeroInterfaceAvailable: boolean;
+    udevRuleInfo: UdevRulesInfo;
     saveToKeyboard: ProgressButtonState;
     savingToKeyboard: boolean;
     updatingFirmware: boolean;
@@ -35,6 +38,8 @@ export const initialState: State = {
     connected: true,
     hasPermission: true,
     bootloaderActive: false,
+    zeroInterfaceAvailable: true,
+    udevRuleInfo: UdevRulesInfo.Unkonwn,
     saveToKeyboard: initProgressButtonState,
     savingToKeyboard: false,
     updatingFirmware: false,
@@ -61,7 +66,9 @@ export function reducer(state = initialState, action: Action): State {
                 ...state,
                 connected: data.connected,
                 hasPermission: data.hasPermission,
-                bootloaderActive: data.bootloaderActive
+                zeroInterfaceAvailable: data.zeroInterfaceAvailable,
+                bootloaderActive: data.bootloaderActive,
+                udevRuleInfo: data.udevRulesInfo
             };
         }
 
@@ -222,7 +229,20 @@ export function reducer(state = initialState, action: Action): State {
 
 export const updatingFirmware = (state: State) => state.updatingFirmware;
 export const isDeviceConnected = (state: State) => state.connected || state.updatingFirmware;
-export const hasDevicePermission = (state: State) => state.hasPermission;
+export const hasDevicePermission = (state: State) => state.udevRuleInfo === UdevRulesInfo.Ok;
+export const getMissingDeviceState = (state: State): MissingDeviceState => {
+    if (state.connected && !state.zeroInterfaceAvailable) {
+        return {
+            header: 'Cannot find your UHK',
+            subtitle: 'Please reconnect it!'
+        };
+    }
+
+    return {
+        header: 'Cannot find your UHK',
+        subtitle: 'Please plug it in!'
+    };
+};
 export const getSaveToKeyboardState = (state: State) => state.saveToKeyboard;
 export const xtermLog = (state: State) => state.log;
 export const getHardwareModules = (state: State) => state.modules;
@@ -236,3 +256,4 @@ 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;
+export const updateUdevRules = (state: State) => state.udevRuleInfo === UdevRulesInfo.Different;