Bump Agent version to 1.1.3 and update changelog.

Reference firmware 8.1.5
Make the Fn+Backspace shortcut of the QWERTY for PC keymap switch to the TES keymap for testing purposes.
2018-04-06 16:26:21 +02:00 · 2018-04-04 15:51:04 +02:00 · 2018-04-03 23:25:30 +02:00 · 2018-04-03 21:04:47 +02:00 · 2018-04-03 00:49:51 +02:00 · 2018-04-02 23:54:48 +02:00
165 changed files with 10335 additions and 9900 deletions
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-8.9.1
+8.9.4
--- a/.travis.yml
+++ b/.travis.yml
@@ -11,7 +11,7 @@ matrix:
  fast_finish: true
  include:
    - os: osx
-      osx_image: xcode8.3
+      osx_image: xcode9.3beta
    - os: linux
      env: CC=clang CXX=clang++ npm_config_clang=1
      compiler: clang
@@ -45,7 +45,6 @@ addons:

 install:
  - nvm install
-  - npm i -g npm@5.6.0
  - npm install

 before_script:
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,20 +4,84 @@ All notable changes to this project will be documented in this file.

 The format is loosely based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/).

+Every Agent version includes the most recent firmware version. See the [firmware changelog](https://github.com/UltimateHackingKeyboard/firmware/blob/master/CHANGELOG.md).
+
+## [1.1.3] - 2018-04-06
+
+Firmware: 8.1.**5** [[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.1.5)] | Device Protocol: 4.2.0 | User Config: 4.0.0 | Hardware Config: 1.0.0
+
+- Show the firmware versions of the left and right keyboard halves on the firmware page.
+- Fix menu scancode.
+- Make the tooltip text regarding non-US characters easier to understand.
+- On the Device Configuration page change terminology from download/upload to export/import for greater clarity.
+
+## [1.1.2] - 2018-03-09
+
+Firmware: 8.1.**4** [[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.1.4)] | Device Protocol: 4.2.0 | User Config: 4.0.0 | Hardware Config: 1.0.0
+
+- Fix the configuration serializer so that the correct key actions get serialized, and the save button always appears when needed.
+- Add instructions to the firmware page to aid users.
+- Fix code signing on OSX.
+- Sign Agent on Windows.
+
+## [1.1.1] - 2018-02-13
+
+Firmware: 8.1.**2** [[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.1.2)] | Device Protocol: 4.2.0 | User Config: 4.0.0 | Hardware Config: 1.0.0
+
+- Sign Agent on OSX resulting in easier installation.
+- Add per-keymap description field.
+- Sort keymaps and macros alphabetically within the key action popover.
+- Add tooltip regarding non-US scancodes.
+- When deleting a macro, also delete the relevant play macro actions.
+- Make the reset configuration button persist the reset configuration in Agent-web.
+- Make Agent able to unbrick bricked modules.
+- Assign "switch to test keymap" action on all keymaps in the default configuration.
+- Add keymap descriptions in the default configuration.
+
+## [1.1.0] - 2018-01-15
+
+Firmware: 8.**1**.0 [[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.1.0)] | Device Protocol: 4.2.0 | User Config: 4.0.0 | Hardware Config: 1.0.0
+
+- Only accept device, keymap, and macro names upon editing if their trimmed length is non-zero.
+- Add diagnostics USB scripts, most notably /packages/usb/{get-i2c-health,set-i2c-baud-rate}.js, some utilizing new device protocol commands and properties. `DEVICEPROTOCOL:MINOR`
+- Implement the Device -> Upload device configuration feature.
+- Make update-module-firmware.js more robust and able to recover bricked modules (including the left half) by utilizing the newly added wait-for-kboot-idle.js. `DEVICEPROTOCOL:MINOR`
+- Add the Agent -> About page containing the version number of Agent.
+- On the mouse speed section of the key action popover, remove the now incorrect bottom sentence and slightly rephrase the top sentence.
+- Remove --buspal speed specification argument because it gets disrespected by the firmware anyways.
+- Fix get-left-firmware-version.js to display the correct firmware version.
+
+## [1.0.4] - 2017-12-30
+
+Firmware: 8.0.0 [[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.0.0)] | Device Protocol: 4.0.0 | User Config: 4.0.0 | Hardware Config: 1.0.0
+
+- Add mouse speed settings.
+
+## [1.0.3] - 2017-12-28
+
+Firmware: 8.0.**0** [[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.0.0)] | Device Protocol: 4.0.0 | User Config: 4.0.0 | Hardware Config: 1.0.0
+
+- Add LED brightness settings.
+- Some key actions, for example Left Arrow were displayed as text with modifiers and as icon without modifires. Now, they're always displayed as icons.
+- Clean up firmware update console messages a bit.
+- Remove the add keymap button because this feature is not only useless but confusing until it gets reimplemented.
+- Explicitly mention on the macro tab of the key action popover that macro playback is not implemented yet.
+- Downgrade to firmware 8.0.0 because the left I2C watchdog of firmware 8.0.1 is not proven yet.
+
 ## [1.0.2] - 2017-12-25

-Firmware: [**8.0.1**](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/8.0.1) | Device Protocol: 4.0.0 | User Config: 4.0.0 | Hardware Config: 1.0.0
+Firmware: **8.0.1**[[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.0.1)] | Device Protocol: 4.0.0 | User Config: 4.0.0 | Hardware Config: 1.0.0

 - Fix firmware upgrade on Linux.

 ## [1.0.1] - 2017-12-22

-Firmware: [7.0.0](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/7.0.0) | Device Protocol: 4.0.0 | User Config: 4.0.0 | Hardware Config: 1.0.0
+Firmware: 7.0.0[[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v7.0.0)] | Device Protocol: 4.0.0 | User Config: 4.0.0 | Hardware Config: 1.0.0

 - Fix Linux privilege escalation when udev rules aren't set up.

 ## [1.0.0] - 2017-12-14

-Firmware: [**7**.0.0](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/7.0.0) | Device Protocol: 4.0.0 | User Config: 4.0.0 | Hardware Config: 1.0.0
+Firmware: **7**.0.0[[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v7.0.0)] | Device Protocol: 4.0.0 | User Config: 4.0.0 | Hardware Config: 1.0.0

 - First release
--- a/README.md
+++ b/README.md
@@ -13,23 +13,29 @@ It's worth mentioning that Agent has two builds.

 The **electron build** is the desktop application which is meant to be used if you have an actual UHK at hand. It starts with an opening screen which detects your UHK. You cannot get past this screen without connecting a UHK via USB.

-The **web build** is meant to be used for demonstation purposes, so people who don't yet own a UHK can get a feel of Agent and its capabilities in their browser. Eventually, WebUSB support will be added to the web build, making it able to communicate with the UHK. Given the sandboxed nature of browers, the web build will always lack features that the electron build offers, so this won't make the electron build obsolete.
+The **web build** is meant to be used for demonstration purposes, so people who don't yet own a UHK can get a feel of Agent and its capabilities in their browser. Eventually, WebUSB support will be added to the web build, making it able to communicate with the UHK. Given the sandboxed nature of browsers, the web build will always lack features that the electron build offers, so this won't make the electron build obsolete.

 The two builds share code as much as possible.

 ## Building the electron application

-First up, make sure that node >=8.1.x and npm >=5.1.x are installed on your system. Next up:
+### Step 1: Build Dependencies
+
+You'll need Node.js LTS. Use your OS package manager to install it. [Check the NodeJS site for more info.](https://nodejs.org/en/download/package-manager/ "Installing Node.js via package manager") Mac OS users can simply `brew install node` to get both. Should you need multiple Node.js versions on the same computer, use Node Version Manager for [Mac/Linux](https://github.com/creationix/nvm) or for [Windows](https://github.com/coreybutler/nvm-windows)
+
+You'll also need `libusb`.
+On debian-based linux distros, `apt-get install libusb-dev libudev-dev g++` is sufficient.
+On Mac OS, use `brew install libusb libusb-compat`.
+For everyone else, use the appropriate package manager for your OS.
+
+### Step 2: Build Environment

 ```
-# Execute the following line on Linux. Use relevant package manager and package names on non-Debian based distros.
-apt-get install libusb-dev libudev-dev g++
-
 git clone git@github.com:UltimateHackingKeyboard/agent.git
 cd agent
-npm install
-npm run build:electron
-npm run electron
+npm install             # to install Node dependencies
+npm run build:electron  # to build the agent
+npm run electron        # to run the newly built agent
 ```

 At this point, Agent should be running on your machine.
--- a/appveyor.yml
+++ b/appveyor.yml
@@ -1,8 +1,11 @@
 os: unstable

+clone_folder: c:\projects\uhk-agent
+
 environment:
  GH_TOKEN:
    secure: 3IebpEKmC39codi1wT6dXx8mql4/mCL1JzZ7lir7GQ5MWRnCxlED2OXbiKHHigDV
+  CSC_LINK: c:\projects\uhk-agent\scripts\certs\windows-cert.p12
  matrix:
    - nodejs_version: "8"

@@ -18,7 +21,6 @@ shallow_clone: true

 install:
  - ps: Install-Product node $env:nodejs_version
-  - npm i -g npm@5.6.0
  - choco install chromium
  - set CI=true
  - set PATH=%APPDATA%\npm;%PATH%
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -3,7 +3,11 @@
  "private": true,
  "author": "Ultimate Gadget Laboratories",
  "main": "electron/dist/electron-main.js",
-  "version": "1.0.2",
+  "version": "1.1.3",
+  "firmwareVersion": "8.1.5",
+  "deviceProtocolVersion": "4.2.0",
+  "userConfigVersion": "4.0.0",
+  "hardwareConfigVersion": "1.0.0",
  "description": "Agent is the configuration application of the Ultimate Hacking Keyboard.",
  "repository": {
    "type": "git",
@@ -26,24 +30,26 @@
    "@types/usb": "1.1.3",
    "autoprefixer": "6.5.3",
    "buffer": "5.0.6",
+    "copyfiles": "^2.0.0",
    "copy-webpack-plugin": "4.0.1",
    "core-js": "2.4.1",
    "cross-env": "5.0.5",
    "decompress": "4.2.0",
    "decompress-tarbz2": "^4.1.1",
    "devtron": "1.4.0",
-    "electron": "1.7.5",
-    "electron-builder": "19.45.5",
-    "electron-debug": "1.4.0",
-    "electron-devtools-installer": "2.2.0",
-    "electron-log": "2.2.9",
-    "electron-rebuild": "1.6.0",
-    "electron-settings": "3.1.2",
+    "electron": "1.8.4",
+    "electron-builder": "20.8.1",
+    "electron-debug": "1.5.0",
+    "electron-devtools-installer": "2.2.3",
+    "electron-log": "2.2.14",
+    "electron-rebuild": "1.7.3",
+    "electron-settings": "3.1.4",
+    "electron-updater": "2.21.4",
    "exports-loader": "0.6.3",
    "file-loader": "0.10.0",
    "fs-extra": "4.0.2",
    "jsonfile": "4.0.0",
-    "lerna": "2.0.0",
+    "lerna": "2.9.0",
    "mkdirp": "0.5.1",
    "npm-run-all": "4.0.2",
    "pre-commit": "1.2.2",
@@ -86,7 +92,6 @@
    "server:web": "lerna exec --scope uhk-web npm start",
    "server:electron": "lerna exec --scope uhk-web npm run server:renderer",
    "electron": "lerna exec --scope uhk-agent npm start",
-    "electron:auto-write-config": "lerna exec --scope uhk-agent npm run auto-write-config",
    "standard-version": "standard-version",
    "pack": "node ./scripts/release.js",
    "sprites": "node ./scripts/generate-svg-sprites",
--- a/packages/uhk-agent/package-lock.json
+++ b/packages/uhk-agent/package-lock.json
--- a/packages/uhk-agent/package.json
+++ b/packages/uhk-agent/package.json
@@ -17,12 +17,6 @@
    "command-line-args": "4.0.7",
    "decompress": "4.2.0",
    "decompress-bzip2": "4.0.0",
-    "electron": "1.7.9",
-    "electron-is-dev": "0.1.2",
-    "electron-log": "2.2.9",
-    "electron-rebuild": "1.6.0",
-    "electron-settings": "3.1.2",
-    "electron-updater": "2.15.0",
    "node-hid": "0.5.4",
    "sudo-prompt": "7.0.0",
    "tmp": "0.0.33",
@@ -36,7 +30,6 @@
  },
  "scripts": {
    "start": "electron ./dist/electron-main.js",
-    "auto-write-config": "electron ./dist/electron-main.js --auto-write-config",
    "build": "webpack && npm run install:build-deps && npm run build:usb && npm run download-firmware && npm run copy-blhost",
    "build:usb": "electron-rebuild -w node-hid -p -m ./dist",
    "install:build-deps": "cd ./dist && npm i",
--- a/packages/uhk-agent/src/electron-main.ts
+++ b/packages/uhk-agent/src/electron-main.ts
@@ -21,8 +21,7 @@ import * as isDev from 'electron-is-dev';
 import { CommandLineInputs } from './models/command-line-inputs';

 const optionDefinitions = [
-    {name: 'addons', type: Boolean},
-    {name: 'auto-write-config', type: Boolean}
+    {name: 'addons', type: Boolean}
 ];

 const options: CommandLineInputs = commandLineArgs(optionDefinitions);
--- a/packages/uhk-agent/src/models/command-line-inputs.ts
+++ b/packages/uhk-agent/src/models/command-line-inputs.ts
@@ -1,4 +1,3 @@
 export interface CommandLineInputs {
    addons?: boolean;
-    'auto-write-config'?: boolean;
 }
--- a/packages/uhk-agent/src/package.json
+++ b/packages/uhk-agent/src/package.json
@@ -15,9 +15,5 @@
  },
  "dependencies": {
    "node-hid": "0.5.7"
-  },
-  "firmwareVersion": "8.0.1",
-  "deviceProtocolVersion": "4.0.0",
-  "userConfigVersion": "4.0.0",
-  "hardwareConfigVersion": "1.0.0"
+  }
 }
--- a/packages/uhk-agent/src/services/app.service.ts
+++ b/packages/uhk-agent/src/services/app.service.ts
@@ -1,7 +1,5 @@
-import { BrowserWindow, ipcMain } from 'electron';
+import { BrowserWindow, ipcMain, shell } from 'electron';
 import { UhkHidDevice } from 'uhk-usb';
-import { readFile } from 'fs';
-import { join } from 'path';

 import { AppStartInfo, IpcEvents, LogService } from 'uhk-common';
 import { MainServiceBase } from './main-service-base';
@@ -18,53 +16,30 @@ export class AppService extends MainServiceBase {

        ipcMain.on(IpcEvents.app.getAppStartInfo, this.handleAppStartInfo.bind(this));
        ipcMain.on(IpcEvents.app.exit, this.exit.bind(this));
+        ipcMain.on(IpcEvents.app.openUrl, this.openUrl.bind(this));
        logService.info('[AppService] init success');
    }

    private async handleAppStartInfo(event: Electron.Event) {
        this.logService.info('[AppService] getAppStartInfo');

-        const packageJson = await this.getPackageJson();
-
        const response: AppStartInfo = {
            commandLineArgs: {
-                addons: this.options.addons || false,
-                autoWriteConfig: this.options['auto-write-config'] || false
+                addons: this.options.addons || false
            },
            deviceConnected: this.uhkHidDeviceService.deviceConnected(),
-            hasPermission: this.uhkHidDeviceService.hasPermission(),
-            agentVersionInfo: {
-                version: packageJson.version,
-                firmwareVersion: packageJson.firmwareVersion,
-                deviceProtocolVersion: packageJson.deviceProtocolVersion,
-                moduleProtocolVersion: packageJson.moduleProtocolVersion,
-                userConfigVersion: packageJson.userConfigVersion,
-                hardwareConfigVersion: packageJson.hardwareConfigVersion
-            }
+            hasPermission: this.uhkHidDeviceService.hasPermission()
        };
        this.logService.info('[AppService] getAppStartInfo response:', response);
        return event.sender.send(IpcEvents.app.getAppStartInfoReply, response);
    }

-    /**
-     * Read the package.json that delivered with the bundle. Do not use require('package.json')
-     * because the deploy process change the package.json after the build
-     * @returns {Promise<any>}
-     */
-    private async getPackageJson(): Promise<any> {
-        return new Promise((resolve, reject) => {
-            readFile(join(__dirname, 'package.json'), {encoding: 'utf-8'}, (err, data) => {
-                if (err) {
-                    return reject(err);
-                }
-
-                resolve(JSON.parse(data));
-            });
-        });
-    }
-
    private exit() {
        this.logService.info('[AppService] exit');
        this.win.close();
    }
+
+    private openUrl(event: Electron.Event, urls: Array<string>) {
+        shell.openExternal(urls[0]);
+    }
 }
--- a/packages/uhk-agent/src/services/device.service.ts
+++ b/packages/uhk-agent/src/services/device.service.ts
@@ -1,5 +1,5 @@
 import { ipcMain } from 'electron';
-import { ConfigurationReply, DeviceConnectionState, IpcEvents, IpcResponse, LogService } from 'uhk-common';
+import { ConfigurationReply, DeviceConnectionState, HardwareModules, IpcEvents, IpcResponse, LogService } from 'uhk-common';
 import { snooze, UhkHidDevice, UhkOperations } from 'uhk-usb';
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
@@ -73,10 +73,15 @@ export class DeviceService {
        try {
            await this.device.waitUntilKeyboardBusy();
            const result = await this.operations.loadConfigurations();
+            const modules: HardwareModules = {
+                leftModuleInfo: await this.operations.getLeftModuleVersionInfo(),
+                rightModuleInfo: await this.operations.getRightModuleVersionInfo()
+            };

            response = {
                success: true,
-                ...result
+                ...result,
+                modules
            };
        } catch (error) {
            response = {
--- a/packages/uhk-common/package.json
+++ b/packages/uhk-common/package.json
@@ -10,7 +10,10 @@
    "url": "git@github.com:UltimateHackingKeyboard/agent.git"
  },
  "scripts": {
-    "build": "tsc",
+    "build": "run-s tsc copy:*",
+    "tsc": "tsc",
+    "copy:scancodes": "copyfiles ./src/config-serializer/config-items/scancodes.json dist",
+    "copy:secondary-roles": "copyfiles ./src/config-serializer/config-items/secondaryRole.json dist",
    "test": "jasmine-ts --config=jasmine.json",
    "coverage": "nyc jasmine-ts --config=jasmine.json"
  },
--- a/packages/uhk-common/src/config-serializer/config-items/index.ts
+++ b/packages/uhk-common/src/config-serializer/config-items/index.ts
@@ -9,3 +9,6 @@ export * from './macro';
 export * from './module';
 export * from './module-configuration';
 export * from './user-configuration';
+
+export const SCANCODES = require('./scancodes.json');
+export const SECONDARY_ROLES = require('./secondaryRole.json');
--- a/packages/uhk-common/src/config-serializer/config-items/key-action/helper.ts
+++ b/packages/uhk-common/src/config-serializer/config-items/key-action/helper.ts
@@ -7,6 +7,8 @@ import { SwitchLayerAction } from './switch-layer-action';
 import { SwitchKeymapAction, UnresolvedSwitchKeymapAction } from './switch-keymap-action';
 import { MouseAction } from './mouse-action';
 import { PlayMacroAction } from './play-macro-action';
+import { NoneAction } from './none-action';
+import { isScancodeExists } from '../scancode-checker';

 export class Helper {

@@ -25,7 +27,12 @@ export class Helper {
        buffer.backtrack();

        if (keyActionFirstByte >= KeyActionId.KeystrokeAction && keyActionFirstByte < KeyActionId.LastKeystrokeAction) {
-            return new KeystrokeAction().fromBinary(buffer);
+            const keystrokeAction = new KeystrokeAction().fromBinary(buffer);
+            if (isValidKeystrokeAction(keystrokeAction)) {
+                return keystrokeAction;
+            }
+
+            return new NoneAction();
        }

        switch (keyActionFirstByte) {
@@ -67,8 +74,14 @@ export class Helper {
        }

        switch (keyAction.keyActionType) {
-            case keyActionType.KeystrokeAction:
-                return new KeystrokeAction().fromJsonObject(keyAction);
+            case keyActionType.KeystrokeAction: {
+                const keystrokeAction = new KeystrokeAction().fromJsonObject(keyAction);
+                if (isValidKeystrokeAction(keystrokeAction)) {
+                    return keystrokeAction;
+                }
+
+                return new NoneAction();
+            }
            case keyActionType.SwitchLayerAction:
                return new SwitchLayerAction().fromJsonObject(keyAction);
            case keyActionType.SwitchKeymapAction:
@@ -77,8 +90,16 @@ export class Helper {
                return new MouseAction().fromJsonObject(keyAction);
            case keyActionType.PlayMacroAction:
                return new PlayMacroAction().fromJsonObject(keyAction, macros);
+            case keyActionType.NoneAction:
+                return new NoneAction();
            default:
                throw `Invalid KeyAction.keyActionType: "${keyAction.keyActionType}"`;
        }
    }
 }
+
+function isValidKeystrokeAction(keystrokeAction: KeystrokeAction): boolean {
+    return keystrokeAction.hasSecondaryRoleAction() ||
+        keystrokeAction.hasActiveModifier() ||
+        keystrokeAction.hasScancode() && isScancodeExists(keystrokeAction.scancode);
+}
--- a/packages/uhk-common/src/config-serializer/config-items/module.ts
+++ b/packages/uhk-common/src/config-serializer/config-items/module.ts
@@ -54,15 +54,12 @@ export class Module {

        const noneAction = new NoneAction();

-        const keyActions: KeyAction[] = this.keyActions.map(keyAction => {
+        buffer.writeArray(this.keyActions, (uhkBuffer: UhkBuffer, keyAction: KeyAction) => {
            if (keyAction) {
-                return keyAction;
+                keyAction.toBinary(uhkBuffer, userConfiguration);
+            } else {
+                noneAction.toBinary(uhkBuffer);
            }
-            return noneAction;
-        });
-
-        buffer.writeArray(keyActions, (uhkBuffer: UhkBuffer, keyAction: KeyAction) => {
-            keyAction.toBinary(uhkBuffer, userConfiguration);
        });
    }

--- a/packages/uhk-common/src/config-serializer/config-items/scancode-checker.ts
+++ b/packages/uhk-common/src/config-serializer/config-items/scancode-checker.ts
@@ -0,0 +1,26 @@
+import { SCANCODES } from './';
+
+let scancodeMap: Map<number, any>;
+
+export function isScancodeExists(scancode: number): boolean {
+    if (!scancodeMap) {
+        fillScancodeMap();
+    }
+
+    return scancodeMap.has(scancode);
+}
+
+function fillScancodeMap(): void {
+    scancodeMap = new Map<number, any>();
+
+    for (const scanGroup of SCANCODES) {
+        for (const child of scanGroup.children) {
+            if (child.additional && child.additional.scancode) {
+                scancodeMap.set(child.additional.scancode, child);
+            }
+            else {
+                scancodeMap.set(Number.parseInt(child.id), child);
+            }
+        }
+    }
+}
--- a/packages/uhk-web/src/app/components/popover/tab/keypress/scancodes.json
+++ b/packages/uhk-web/src/app/components/popover/tab/keypress/scancodes.json
@@ -242,7 +242,7 @@
                "text": "Delete"
            },
            {
-                "id": "118",
+                "id": "101",
                "text": "Menu"
            },
            {
--- a/packages/uhk-web/src/app/components/popover/tab/keypress/secondaryRole.json
+++ b/packages/uhk-web/src/app/components/popover/tab/keypress/secondaryRole.json
--- a/packages/uhk-common/src/models/app-start-info.ts
+++ b/packages/uhk-common/src/models/app-start-info.ts
@@ -1,12 +1,7 @@
 import { CommandLineArgs } from './command-line-args';
-import { VersionInformation } from './version-information';

 export interface AppStartInfo {
    commandLineArgs: CommandLineArgs;
    deviceConnected: boolean;
    hasPermission: boolean;
-    /**
-     * This property contains the version information of the deployed agent components
-     */
-    agentVersionInfo: VersionInformation;
 }
--- a/packages/uhk-common/src/models/command-line-args.ts
+++ b/packages/uhk-common/src/models/command-line-args.ts
@@ -1,4 +1,3 @@
 export interface CommandLineArgs {
    addons: boolean;
-    autoWriteConfig: boolean;
 }
--- a/packages/uhk-common/src/models/configuration-reply.ts
+++ b/packages/uhk-common/src/models/configuration-reply.ts
@@ -1,6 +1,9 @@
+import { HardwareModules } from './hardware-modules';
+
 export interface ConfigurationReply {
    success: boolean;
    userConfiguration?: string;
    hardwareConfiguration?: string;
+    modules?: HardwareModules;
    error?: string;
 }
--- a/packages/uhk-common/src/models/hardware-module-info.ts
+++ b/packages/uhk-common/src/models/hardware-module-info.ts
@@ -0,0 +1,4 @@
+export interface HardwareModuleInfo {
+    firmwareVersion?: string;
+    moduleProtocolVersion?: string;
+}
--- a/packages/uhk-common/src/models/hardware-modules.ts
+++ b/packages/uhk-common/src/models/hardware-modules.ts
@@ -0,0 +1,6 @@
+import { HardwareModuleInfo } from './hardware-module-info';
+
+export interface HardwareModules {
+    leftModuleInfo?: HardwareModuleInfo;
+    rightModuleInfo?: HardwareModuleInfo;
+}
--- a/packages/uhk-common/src/models/index.ts
+++ b/packages/uhk-common/src/models/index.ts
@@ -5,3 +5,5 @@ export * from './app-start-info';
 export * from './configuration-reply';
 export * from './version-information';
 export * from './device-connection-state';
+export * from './hardware-modules';
+export * from './hardware-module-info';
--- a/packages/uhk-common/src/util/constants.ts
+++ b/packages/uhk-common/src/util/constants.ts
@@ -1,5 +1,3 @@
 export namespace Constants {
-    export const VENDOR_ID = 0x1D50;
-    export const PRODUCT_ID = 0x6122;
-    export const MAX_PAYLOAD_SIZE = 64;
+    export const AGENT_GITHUB_URL = 'https://github.com/UltimateHackingKeyboard/agent';
 }
--- a/packages/uhk-common/src/util/index.ts
+++ b/packages/uhk-common/src/util/index.ts
@@ -1,5 +1,6 @@
 export { IpcEvents } from './ipcEvents';
 export * from './log';
+export * from './constants';

 // Source: http://stackoverflow.com/questions/13720256/javascript-regex-camelcase-to-sentence
 export function camelCaseToSentence(camelCasedText: string): string {
--- a/packages/uhk-common/src/util/ipcEvents.ts
+++ b/packages/uhk-common/src/util/ipcEvents.ts
@@ -3,6 +3,7 @@ class App {
    public static readonly getAppStartInfo = 'app-get-start-info';
    public static readonly getAppStartInfoReply = 'app-get-start-info-reply';
    public static readonly exit = 'app-exit';
+    public static readonly openUrl = 'open-url';
 }

 class AutoUpdate {
--- a/packages/uhk-usb/src/constants.ts
+++ b/packages/uhk-usb/src/constants.ts
@@ -22,7 +22,7 @@ export enum UsbCommand {
    GetDebugBuffer           = 0x0b,
    GetAdcValue              = 0x0c,
    SetLedPwmBrightness      = 0x0d,
-    GetModuleProperties      = 0x0e
+    GetModuleProperty        = 0x0e
 }

 export enum EepromOperation {
@@ -39,7 +39,8 @@ export enum ConfigBufferId {
 export enum DevicePropertyIds {
    DeviceProtocolVersion = 0,
    ProtocolVersions = 1,
-    ConfigSizes = 2
+    ConfigSizes = 2,
+    CurrentKbootCommand = 3
 }

 export enum EnumerationModes {
@@ -80,3 +81,7 @@ export enum KbootCommands {
    ping = 1,
    reset = 2
 }
+
+export enum ModulePropertyId {
+    protocolVersions = 0
+}
--- a/packages/uhk-usb/src/uhk-operations.ts
+++ b/packages/uhk-usb/src/uhk-operations.ts
@@ -1,12 +1,24 @@
-import { LogService } from 'uhk-common';
-import { EnumerationModes, EnumerationNameToProductId, KbootCommands, ModuleSlotToI2cAddress, ModuleSlotToId } from './constants';
+import { HardwareModuleInfo, LogService, UhkBuffer } from 'uhk-common';
+import {
+    EnumerationModes,
+    EnumerationNameToProductId,
+    KbootCommands,
+    ModulePropertyId,
+    ModuleSlotToI2cAddress,
+    ModuleSlotToId
+} from './constants';
 import * as path from 'path';
 import * as fs from 'fs';
 import { UhkBlhost } from './uhk-blhost';
 import { UhkHidDevice } from './uhk-hid-device';
 import { snooze } from './util';
-import { convertBufferToIntArray, getTransferBuffers, DevicePropertyIds, UsbCommand, ConfigBufferId
-       } from '../index';
+import {
+    convertBufferToIntArray,
+    getTransferBuffers,
+    DevicePropertyIds,
+    UsbCommand,
+    ConfigBufferId
+} from '../index';
 import { LoadConfigurationsResult } from './models/load-configurations-result';

 export class UhkOperations {
@@ -26,14 +38,14 @@ export class UhkOperations {
        await this.blhost.runBlhostCommand([...prefix, 'flash-erase-region', '0xc000', '475136']);
        await this.blhost.runBlhostCommand([...prefix, 'flash-image', `"${firmwarePath}"`]);
        await this.blhost.runBlhostCommand([...prefix, 'reset']);
-        this.logService.debug('[UhkOperations] End flashing right firmware');
+        this.logService.debug('[UhkOperations] Right firmware successfully flashed');
    }

    public async updateLeftModule(firmwarePath = this.getLeftModuleFirmwarePath()) {
        this.logService.debug('[UhkOperations] Start flashing left module firmware');

        const prefix = [`--usb 0x1d50,0x${EnumerationNameToProductId.buspal.toString(16)}`];
-        const buspalPrefix = [...prefix, `--buspal i2c,${ModuleSlotToI2cAddress.leftHalf},100k`];
+        const buspalPrefix = [...prefix, `--buspal i2c,${ModuleSlotToI2cAddress.leftHalf}`];

        await this.device.reenumerate(EnumerationModes.NormalKeyboard);
        this.device.close();
@@ -42,6 +54,13 @@ export class UhkOperations {
        await snooze(1000);
        await this.device.jumpToBootloaderModule(ModuleSlotToId.leftHalf);
        this.device.close();
+
+        const leftModuleBricked = await this.waitForKbootIdle();
+        if (!leftModuleBricked) {
+            this.logService.error('[UhkOperations] Couldn\'t connect to the left keyboard half.');
+            return;
+        }
+
        await this.device.reenumerate(EnumerationModes.Buspal);
        this.device.close();
        await this.blhost.runBlhostCommandRetry([...buspalPrefix, 'get-property', '1']);
@@ -58,7 +77,8 @@ export class UhkOperations {
        await this.device.sendKbootCommandToModule(ModuleSlotToI2cAddress.leftHalf, KbootCommands.idle);
        this.device.close();

-        this.logService.debug('[UhkOperations] End flashing left module firmware');
+        this.logService.debug('[UhkOperations] Left firmware successfully flashed');
+        this.logService.debug('[UhkOperations] Both left and right firmwares successfully flashed');
    }

    /**
@@ -160,6 +180,70 @@ export class UhkOperations {
        }
    }

+    public async waitForKbootIdle(): Promise<boolean> {
+        const timeoutTime = new Date(new Date().getTime() + 30000);
+
+        while (new Date() < timeoutTime) {
+            const buffer = await this.device.write(new Buffer([UsbCommand.GetProperty, DevicePropertyIds.CurrentKbootCommand]));
+            this.device.close();
+
+            if (buffer[1] === 0) {
+                return true;
+            }
+
+            // tslint:disable-next-line: max-line-length
+            this.logService.info('[DeviceOperation] Cannot ping the bootloader. Please reconnect the left keyboard half. It probably needs several tries, so keep reconnecting until you see this message.');
+
+            await snooze(1000);
+        }
+
+        return false;
+    }
+
+    public async getLeftModuleVersionInfo(): Promise<HardwareModuleInfo> {
+        try {
+            this.logService.debug('[DeviceOperation] USB[T]: Read left module version information');
+
+            const command = new Buffer([
+                UsbCommand.GetModuleProperty,
+                ModuleSlotToId.leftHalf,
+                ModulePropertyId.protocolVersions
+            ]);
+
+            const buffer = await this.device.write(command);
+            const uhkBuffer = UhkBuffer.fromArray(convertBufferToIntArray(buffer));
+            // skip the first 2 byte
+            uhkBuffer.readUInt16();
+
+            return {
+                moduleProtocolVersion: `${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}`,
+                firmwareVersion: `${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}`
+            };
+        }
+        catch (error) {
+            this.logService.error('[DeviceOperation] Could not read left module version information', error);
+        }
+
+        return {
+            moduleProtocolVersion: '',
+            firmwareVersion: ''
+        };
+    }
+
+    public async getRightModuleVersionInfo(): Promise<HardwareModuleInfo> {
+        this.logService.debug('[DeviceOperation] USB[T]: Read right module version information');
+
+        const command = new Buffer([UsbCommand.GetProperty, DevicePropertyIds.ProtocolVersions]);
+        const buffer = await this.device.write(command);
+        const uhkBuffer = UhkBuffer.fromArray(convertBufferToIntArray(buffer));
+        // skip the first byte
+        uhkBuffer.readUInt8();
+
+        return {
+            firmwareVersion: `${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}`
+        };
+    }
+
    /**
     * IpcMain handler. Send the UserConfiguration to the UHK Device and send a response with the result.
     * @param {string} json - UserConfiguration in JSON format
--- a/packages/uhk-usb/src/util.ts
+++ b/packages/uhk-usb/src/util.ts
@@ -89,7 +89,7 @@ export async function retry(command: Function, maxTry = 3, logService?: LogServi
                throw err;
            } else {
                if (logService) {
-                    logService.error(`[retry] failed, but try run FUNCTION:\n ${command}, \n retry: ${retryCount}`);
+                    logService.info(`[retry] failed, but try run FUNCTION:\n ${command}, \n retry: ${retryCount}`);
                }
            }
        }
--- a/packages/uhk-web/.angular-cli.json
+++ b/packages/uhk-web/.angular-cli.json
@@ -21,11 +21,13 @@
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
+        "../node_modules/nouislider/distribute/nouislider.min.css",
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/bootstrap/dist/js/bootstrap.js",
-        "../node_modules/select2/dist/js/select2.full.js"
+        "../node_modules/select2/dist/js/select2.full.js",
+        "../node_modules/nouislider/distribute/nouislider.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
--- a/packages/uhk-web/package-lock.json
+++ b/packages/uhk-web/package-lock.json
--- a/packages/uhk-web/package.json
+++ b/packages/uhk-web/package.json
@@ -37,6 +37,7 @@
    "@types/jasmine": "2.5.53",
    "@types/jasminewd2": "2.0.2",
    "@types/jquery": "3.2.9",
+    "@types/lodash-es": "4.17.0",
    "@types/node-hid": "0.5.2",
    "@types/usb": "1.1.3",
    "angular-confirmation-popover": "3.2.0",
@@ -67,11 +68,13 @@
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "less-loader": "4.0.5",
-    "lodash": "4.17.4",
+    "lodash-es": "4.17.4",
    "ng2-dragula": "1.5.0",
+    "ng2-nouislider": "^1.7.6",
    "ng2-select2": "1.0.0-beta.10",
    "ngrx-store-freeze": "0.1.9",
    "node-hid": "0.5.4",
+    "nouislider": "^10.1.0",
    "postcss-loader": "1.3.3",
    "postcss-url": "5.1.2",
    "protractor": "5.1.2",
--- a/packages/uhk-web/src/app/app.component.html
+++ b/packages/uhk-web/src/app/app.component.html
@@ -7,9 +7,6 @@
 <div id="main-content" class="main-content">
    <router-outlet></router-outlet>
 </div>
-<div class="github-fork-ribbon" *ngIf="!(runningInElectron$ | async)">
-    <a class="" href="https://github.com/UltimateHackingKeyboard/agent" title="Fork me on GitHub">Fork me on GitHub</a>
-</div>
 <notifier-container></notifier-container>
 <progress-button class="save-to-keyboard-button"
                 *ngIf="(saveToKeyboardState$ | async).showButton"
--- a/packages/uhk-web/src/app/app.component.scss
+++ b/packages/uhk-web/src/app/app.component.scss
@@ -1,36 +1,3 @@
-/* GitHub ribbon */
-.github-fork-ribbon {
-    background-color: #a00;
-    overflow: hidden;
-    white-space: nowrap;
-    position: fixed;
-    right: -50px;
-    bottom: 40px;
-    z-index: 2000;
-    /* stylelint-disable indentation */
-    -webkit-transform: rotate(-45deg);
-    -moz-transform: rotate(-45deg);
-    -ms-transform: rotate(-45deg);
-    -o-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-    -webkit-box-shadow: 0 0 10px #888;
-    -moz-box-shadow: 0 0 10px #888;
-    box-shadow: 0 0 10px #888;
-    /* stylelint-enable indentation */
-
-    a {
-        border: 1px solid #faa;
-        color: #fff;
-        display: block;
-        font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;
-        margin: 1px 0;
-        padding: 10px 50px;
-        text-align: center;
-        text-decoration: none;
-        text-shadow: 0 0 5px #444;
-    }
-}
-
 main-app {
    min-height: 100%;
    height: 100%;
--- a/packages/uhk-web/src/app/app.routes.ts
+++ b/packages/uhk-web/src/app/app.routes.ts
@@ -12,7 +12,7 @@ import { UhkDeviceConnectedGuard } from './services/uhk-device-connected.guard';
 import { UhkDeviceUninitializedGuard } from './services/uhk-device-uninitialized.guard';
 import { UhkDeviceInitializedGuard } from './services/uhk-device-initialized.guard';
 import { MainPage } from './pages/main-page/main.page';
-import { settingsRoutes } from './components/settings/settings.routes';
+import { agentRoutes } from './components/agent/agent.routes';
 import { LoadingDevicePageComponent } from './pages/loading-page/loading-device.page';
 import { UhkDeviceLoadingGuard } from './services/uhk-device-loading.guard';
 import { UhkDeviceLoadedGuard } from './services/uhk-device-loaded.guard';
@@ -42,7 +42,7 @@ const appRoutes: Routes = [
            ...keymapRoutes,
            ...macroRoutes,
            ...addOnRoutes,
-            ...settingsRoutes
+            ...agentRoutes
        ]
    }
 ];
--- a/packages/uhk-web/src/app/components/agent/about/about.component.html
+++ b/packages/uhk-web/src/app/components/agent/about/about.component.html
@@ -0,0 +1,10 @@
+<div class="row">
+    <h1 class="col-xs-12 pane-title">
+        <i class="uhk-icon uhk-icon-agent-icon"></i>
+        <span>About</span>
+    </h1>
+    <div class="col-xs-12">
+        <div class="agent-version">Agent version: <span class="text-bold">{{version}}</span></div>
+        <div><a class="link-github" (click)="openAgentGitHubPage($event)">Agent on GitHub</a></div>
+    </div>
+</div>
--- a/packages/uhk-web/src/app/components/agent/about/about.component.scss
+++ b/packages/uhk-web/src/app/components/agent/about/about.component.scss
@@ -0,0 +1,20 @@
+:host {
+    overflow-y: auto;
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+
+.agent {
+    &-version {
+        margin-bottom: 1rem;
+
+        span {
+            font-weight: bold;
+        }
+    }
+}
+
+.link-github {
+    cursor: pointer;
+}
--- a/packages/uhk-web/src/app/components/agent/about/about.component.ts
+++ b/packages/uhk-web/src/app/components/agent/about/about.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Constants } from 'uhk-common';
+
+import { AppState } from '../../../store';
+import { getVersions } from '../../../util';
+import { OpenUrlInNewWindowAction } from '../../../store/actions/app';
+
+@Component({
+    selector: 'about-page',
+    templateUrl: './about.component.html',
+    styleUrls: ['./about.component.scss'],
+    host: {
+        'class': 'container-fluid'
+    }
+})
+export class AboutComponent {
+    version: string = getVersions().version;
+
+    constructor(private store: Store<AppState>) {
+    }
+
+    openAgentGitHubPage(event) {
+        event.preventDefault();
+        this.store.dispatch(new OpenUrlInNewWindowAction(Constants.AGENT_GITHUB_URL));
+    }
+}
--- a/packages/uhk-web/src/app/components/agent/agent.routes.ts
+++ b/packages/uhk-web/src/app/components/agent/agent.routes.ts
@@ -0,0 +1,15 @@
+import { Routes } from '@angular/router';
+
+import { SettingsComponent } from './settings/settings.component';
+import { AboutComponent } from './about/about.component';
+
+export const agentRoutes: Routes = [
+    {
+        path: 'settings',
+        component: SettingsComponent
+    },
+    {
+        path: 'about',
+        component: AboutComponent
+    }
+];
--- a/packages/uhk-web/src/app/components/agent/index.ts
+++ b/packages/uhk-web/src/app/components/agent/index.ts
@@ -0,0 +1,3 @@
+export * from './agent.routes';
+export * from './about/about.component';
+export * from './settings/settings.component';
--- a/packages/uhk-web/src/app/components/agent/settings/settings.component.html
+++ b/packages/uhk-web/src/app/components/agent/settings/settings.component.html
--- a/packages/uhk-web/src/app/components/agent/settings/settings.component.scss
+++ b/packages/uhk-web/src/app/components/agent/settings/settings.component.scss
--- a/packages/uhk-web/src/app/components/agent/settings/settings.component.ts
+++ b/packages/uhk-web/src/app/components/agent/settings/settings.component.ts
@@ -2,13 +2,14 @@ import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';

-import { AppState, getAutoUpdateSettings, getCheckingForUpdate } from '../../store';
+import { AppState, getAutoUpdateSettings, getCheckingForUpdate } from '../../../store';
 import {
    CheckForUpdateNowAction,
    ToggleCheckForUpdateOnStartupAction,
    TogglePreReleaseFlagAction
-} from '../../store/actions/auto-update-settings';
-import { AutoUpdateSettings } from '../../models/auto-update-settings';
+} from '../../../store/actions/auto-update-settings';
+import { AutoUpdateSettings } from '../../../models/auto-update-settings';
+import { getVersions } from '../../../util';

@Component({
    selector: 'settings',
@@ -19,8 +20,7 @@ import { AutoUpdateSettings } from '../../models/auto-update-settings';
    }
 })
 export class SettingsComponent {
-    // TODO: From where do we get the version number? The electron gives back in main process, but the web...
-    version = '1.0.0';
+    version: string = getVersions().version;
    autoUpdateSettings$: Observable<AutoUpdateSettings>;
    checkingForUpdate$: Observable<boolean>;

--- a/packages/uhk-web/src/app/components/auto-update-settings/auto-update-settings.html
+++ b/packages/uhk-web/src/app/components/auto-update-settings/auto-update-settings.html
@@ -19,7 +19,7 @@
        <div class="form-group">
            <label class="col-sm-2 control-label">Version:</label>
            <div class="col-sm-10">
-                <p class="form-control-static">{{version}}</p>
+                <p>{{version}}</p>
            </div>
        </div>

--- a/packages/uhk-web/src/app/components/device/configuration/device-configuration.component.html
+++ b/packages/uhk-web/src/app/components/device/configuration/device-configuration.component.html
@@ -9,14 +9,16 @@

 <ul class="list-unstyled btn-list">
    <li>
-        Download device configuration in
-        <span role="button" class="btn-link" (click)="saveConfigurationInJSONFormat()">JSON</span> or
-        <span role="button" class="btn-link" (click)="saveConfigurationInBINFormat()">binary</span> format.
+        <button class="btn btn-default"
+                (click)="exportUserConfiguration($event)">Export device configuration
+        </button>
    </li>
    <li>
-        <button class="btn btn-default"
-                >Upload device configuration
-        </button>
+        <label class="btn btn-default btn-file">
+            Import device configuration
+            <input type="file"
+                   (change)="changeFile($event)">
+        </label>
    </li>
    <li>
        <button class="btn btn-danger"
--- a/packages/uhk-web/src/app/components/device/configuration/device-configuration.component.ts
+++ b/packages/uhk-web/src/app/components/device/configuration/device-configuration.component.ts
@@ -3,7 +3,11 @@ import { Store } from '@ngrx/store';

 import { AppState } from '../../../store';
 import { ResetUserConfigurationAction } from '../../../store/actions/device';
-import { SaveUserConfigInBinaryFileAction, SaveUserConfigInJsonFileAction } from '../../../store/actions/user-config';
+import {
+    LoadUserConfigurationFromFileAction,
+    SaveUserConfigInBinaryFileAction,
+    SaveUserConfigInJsonFileAction
+} from '../../../store/actions/user-config';

@Component({
    selector: 'device-settings',
@@ -29,4 +33,25 @@ export class DeviceConfigurationComponent {
    saveConfigurationInBINFormat() {
        this.store.dispatch(new SaveUserConfigInBinaryFileAction());
    }
+
+    exportUserConfiguration(event: MouseEvent) {
+        if (event.shiftKey) {
+            this.saveConfigurationInBINFormat();
+        } else {
+            this.saveConfigurationInJSONFormat();
+        }
+    }
+
+    changeFile(event): void {
+        const files = event.srcElement.files;
+        const fileReader = new FileReader();
+        fileReader.onloadend = function () {
+            const arrayBuffer = new Uint8Array(fileReader.result);
+            this.store.dispatch(new LoadUserConfigurationFromFileAction({
+                filename: event.srcElement.value,
+                data: Array.from(arrayBuffer)
+            }));
+        }.bind(this);
+        fileReader.readAsArrayBuffer(files[0]);
+    }
 }
--- a/packages/uhk-web/src/app/components/device/device.routes.ts
+++ b/packages/uhk-web/src/app/components/device/device.routes.ts
@@ -3,6 +3,7 @@ import { Routes } from '@angular/router';
 import { DeviceConfigurationComponent } from './configuration/device-configuration.component';
 import { DeviceFirmwareComponent } from './firmware/device-firmware.component';
 import { MouseSpeedComponent } from './mouse-speed/mouse-speed.component';
+import { LEDBrightnessComponent } from './led-brightness/led-brightness.component';

 export const deviceRoutes: Routes = [
    {
@@ -21,6 +22,10 @@ export const deviceRoutes: Routes = [
                path: 'mouse-speed',
                component: MouseSpeedComponent
            },
+            {
+                path: 'led-brightness',
+                component: LEDBrightnessComponent
+            },
            {
                path: 'firmware',
                component: DeviceFirmwareComponent
--- a/packages/uhk-web/src/app/components/device/firmware/device-firmware.component.html
+++ b/packages/uhk-web/src/app/components/device/firmware/device-firmware.component.html
@@ -6,23 +6,36 @@
                <i class="fa fa-sliders"></i>
                <span>Firmware</span>
            </h1>
+
            <p>
-                Flash firmware {{ (getAgentVersionInfo$ | async).firmwareVersion }} (bundled with Agent)
-                <button class="btn btn-primary"
-                        [disabled]="flashFirmwareButtonDisbabled$ | async"
-                        (click)="onUpdateFirmware()">Flash firmware
-                </button>
+                Firmware {{ hardwareModules.leftModuleInfo.firmwareVersion }} is running on the left keyboard half.<br>
+                Firmware {{ hardwareModules.rightModuleInfo.firmwareVersion }} is running on the right keyboard half.
+            </p>
+
+            <p>
+                <i>
+                    Please note that the firmware update process may sometimes fail. If if fails then
+                    simply retry until it succeeds. If the left half becomes unresponsive after a failed
+                    update then retry and follow the instructions displayed during the update to fix it.
+                    We'll make the firmware update process more robust.
+                </i>
            </p>

            <p>
-                Flash firmware file <input id="firmware-file-select"
-                                           type="file"
-                                           [disabled]="flashFirmwareButtonDisbabled$ | async"
-                                           (change)="changeFile($event)">
                <button class="btn btn-primary"
                        [disabled]="flashFirmwareButtonDisbabled$ | async"
-                        (click)="onUpdateFirmwareWithFile()">Flash firmware
+                        (click)="onUpdateFirmware()">
+                    Flash firmware {{ (getAgentVersionInfo$ | async).firmwareVersion }} (bundled with Agent)
                </button>
+                <label class="btn btn-primary btn-file"
+                       [class.disabled]="flashFirmwareButtonDisbabled$ | async">
+                    Choose firmware file and flash it
+                    <input id="firmware-file-select"
+                           type="file"
+                           accept=".tar.bz2"
+                           [disabled]="flashFirmwareButtonDisbabled$ | async"
+                           (change)="changeFile($event)">
+                </label>
            </p>
        </div>

--- a/packages/uhk-web/src/app/components/device/firmware/device-firmware.component.ts
+++ b/packages/uhk-web/src/app/components/device/firmware/device-firmware.component.ts
@@ -2,9 +2,16 @@ import { Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
-import { VersionInformation } from 'uhk-common';
+import { HardwareModules, VersionInformation } from 'uhk-common';

-import { AppState, firmwareOkButtonDisabled, flashFirmwareButtonDisbabled, getAgentVersionInfo, xtermLog } from '../../../store';
+import {
+    AppState,
+    firmwareOkButtonDisabled,
+    flashFirmwareButtonDisbabled,
+    getAgentVersionInfo,
+    getHardwareModules,
+    xtermLog
+} from '../../../store';
 import { UpdateFirmwareAction, UpdateFirmwareOkButtonAction, UpdateFirmwareWithAction } from '../../../store/actions/device';
 import { XtermLog } from '../../../models/xterm-log';

@@ -22,8 +29,9 @@ export class DeviceFirmwareComponent implements OnDestroy {
    xtermLogSubscription: Subscription;
    getAgentVersionInfo$: Observable<VersionInformation>;
    firmwareOkButtonDisabled$: Observable<boolean>;
+    hardwareModulesSubscription: Subscription;
+    hardwareModules: HardwareModules;

-    arrayBuffer: Uint8Array;
    @ViewChild('scrollMe') divElement: ElementRef;

    constructor(private store: Store<AppState>) {
@@ -38,24 +46,20 @@ export class DeviceFirmwareComponent implements OnDestroy {
        });
        this.getAgentVersionInfo$ = store.select(getAgentVersionInfo);
        this.firmwareOkButtonDisabled$ = store.select(firmwareOkButtonDisabled);
+        this.hardwareModulesSubscription = store.select(getHardwareModules).subscribe(data => {
+            this.hardwareModules = data;
+        });
    }

    ngOnDestroy(): void {
        this.xtermLogSubscription.unsubscribe();
+        this.hardwareModulesSubscription.unsubscribe();
    }

    onUpdateFirmware(): void {
        this.store.dispatch(new UpdateFirmwareAction());
    }

-    onUpdateFirmwareWithFile(): void {
-        if (!this.arrayBuffer) {
-            return;
-        }
-
-        this.store.dispatch(new UpdateFirmwareWithAction(Array.prototype.slice.call(this.arrayBuffer)));
-    }
-
    onOkButtonClick(): void {
        this.store.dispatch(new UpdateFirmwareOkButtonAction());
    }
@@ -64,14 +68,13 @@ export class DeviceFirmwareComponent implements OnDestroy {
        const files = event.srcElement.files;

        if (files.length === 0) {
-            this.arrayBuffer = null;
-
            return;
        }

        const fileReader = new FileReader();
        fileReader.onloadend = function () {
-            this.arrayBuffer = new Uint8Array(fileReader.result);
+            const arrayBuffer = new Uint8Array(fileReader.result);
+            this.store.dispatch(new UpdateFirmwareWithAction(Array.prototype.slice.call(arrayBuffer)));
        }.bind(this);
        fileReader.readAsArrayBuffer(files[0]);
    }
--- a/packages/uhk-web/src/app/components/device/index.ts
+++ b/packages/uhk-web/src/app/components/device/index.ts
@@ -1,4 +1,5 @@
 export * from './configuration/device-configuration.component';
 export * from './firmware/device-firmware.component';
 export * from './mouse-speed/mouse-speed.component';
+export * from './led-brightness/led-brightness.component';
 export * from './device.routes';
--- a/packages/uhk-web/src/app/components/device/led-brightness/led-brightness.component.html
+++ b/packages/uhk-web/src/app/components/device/led-brightness/led-brightness.component.html
@@ -0,0 +1,40 @@
+<h1>
+    <i class="fa fa-sliders"></i>
+    <span>LED brightness</span>
+</h1>
+<div class="row led-setting">
+    <div class="col-xs-12 col-md-6">
+        <slider-wrapper
+            label="LED display icon and layer texts brightness"
+            [min]="0"
+            [max]="255"
+            [step]="1"
+            [pips]="sliderPips"
+            [(ngModel)]="iconsAndLayerTextsBrightness"
+            (ngModelChange)="onSetPropertyValue('iconsAndLayerTextsBrightness', $event)"></slider-wrapper>
+    </div>
+</div>
+<div class="row led-setting">
+    <div class="col-xs-12 col-md-6">
+        <slider-wrapper
+            label="LED display alphanumeric segments brightness"
+            [min]="0"
+            [max]="255"
+            [step]="1"
+            [pips]="sliderPips"
+            [(ngModel)]="alphanumericSegmentsBrightness"
+            (ngModelChange)="onSetPropertyValue('alphanumericSegmentsBrightness', $event)"></slider-wrapper>
+    </div>
+</div>
+<div class="row led-setting">
+    <div class="col-xs-12 col-md-6">
+        <slider-wrapper
+            label="Key backlight brightness"
+            [min]="0"
+            [max]="255"
+            [step]="1"
+            [pips]="sliderPips"
+            [(ngModel)]="keyBacklightBrightness"
+            (ngModelChange)="onSetPropertyValue('keyBacklightBrightness', $event)"></slider-wrapper>
+    </div>
+</div>
--- a/packages/uhk-web/src/app/components/device/led-brightness/led-brightness.component.scss
+++ b/packages/uhk-web/src/app/components/device/led-brightness/led-brightness.component.scss
@@ -0,0 +1,15 @@
+:host {
+    overflow-y: auto;
+    display: block;
+    height: 100%;
+    width: 100%;
+
+    label {
+        display: block;
+        font-weight: normal;
+    }
+
+    .led-setting {
+        margin-bottom: 6rem;
+    }
+}
--- a/packages/uhk-web/src/app/components/device/led-brightness/led-brightness.component.ts
+++ b/packages/uhk-web/src/app/components/device/led-brightness/led-brightness.component.ts
@@ -0,0 +1,53 @@
+import { AfterViewInit, Component, OnInit, OnDestroy, ViewChildren, QueryList } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppState, getUserConfiguration } from '../../../store';
+import { SetUserConfigurationValueAction } from '../../../store/actions/user-config';
+import { SliderPips } from '../../slider-wrapper/slider-wrapper.component';
+import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
+import { UserConfiguration } from 'uhk-common';
+
+@Component({
+    selector: 'device-led-brightness',
+    templateUrl: './led-brightness.component.html',
+    styleUrls: ['./led-brightness.component.scss'],
+    host: {
+        'class': 'container-fluid'
+    }
+})
+export class LEDBrightnessComponent implements OnInit, OnDestroy {
+    public iconsAndLayerTextsBrightness: number = 0;
+    public alphanumericSegmentsBrightness: number = 0;
+    public keyBacklightBrightness: number = 0;
+    public sliderPips: SliderPips = {
+        mode: 'positions',
+        values: [0, 50, 100],
+        density: 6,
+        stepped: true
+    };
+
+    private userConfig$: Store<UserConfiguration>;
+    private userConfigSubscription: Subscription;
+
+    constructor(private store: Store<AppState>) {}
+
+    ngOnInit() {
+        this.userConfig$ = this.store.select(getUserConfiguration);
+        this.userConfigSubscription = this.userConfig$.subscribe(config => {
+            this.iconsAndLayerTextsBrightness = config.iconsAndLayerTextsBrightness;
+            this.alphanumericSegmentsBrightness = config.alphanumericSegmentsBrightness;
+            this.keyBacklightBrightness = config.keyBacklightBrightness;
+        });
+    }
+
+    ngOnDestroy() {
+        this.userConfigSubscription.unsubscribe();
+    }
+
+    onSetPropertyValue(propertyName: string, value: number): void {
+        this.store.dispatch(new SetUserConfigurationValueAction({
+            propertyName,
+            value
+        }));
+    }
+}
--- a/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.html
+++ b/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.html
@@ -2,6 +2,41 @@
    <i class="fa fa-sliders"></i>
    <span>Mouse speed</span>
 </h1>
-<p>
-    Coming soon ...
-</p>
+<h3>Mouse pointer speed</h3>
+<div class="row mouse-speed-setting" *ngFor="let prop of moveProps">
+    <div class="col-xs-12 col-md-6">
+        <slider-wrapper
+            [label]="prop.title"
+            [tooltip]="prop.tooltip"
+            [min]="moveSettings.min"
+            [max]="moveSettings.max"
+            [step]="moveSettings.step"
+            [pips]="sliderPips"
+            [valueUnit]="prop.valueUnit"
+            [(ngModel)]="prop.value"
+            (ngModelChange)="onSetPropertyValue(prop.prop, $event)"></slider-wrapper>
+    </div>
+</div>
+<h3>Mouse scroll speed</h3>
+<div class="row mouse-speed-setting" *ngFor="let prop of scrollProps">
+    <div class="col-xs-12 col-md-6">
+        <slider-wrapper
+            [label]="prop.title"
+            [tooltip]="prop.tooltip"
+            [min]="scrollSettings.min"
+            [max]="scrollSettings.max"
+            [step]="scrollSettings.step"
+            [pips]="sliderPips"
+            [valueUnit]="prop.valueUnit"
+            [(ngModel)]="prop.value"
+            (ngModelChange)="onSetPropertyValue(prop.prop, $event)"></slider-wrapper>
+    </div>
+</div>
+<button class="btn btn-danger mouse-speed-reset-button"
+        mwlConfirmationPopover
+        title="Are you sure?"
+        placement="top"
+        confirmText="Yes"
+        cancelText="No"
+        (confirm)="resetToDefault()">Reset speeds to default
+</button>
--- a/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.scss
+++ b/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.scss
@@ -4,4 +4,25 @@
    height: 100%;
    width: 100%;

+    label {
+        display: block;
+        font-weight: normal;
+
+        icon {
+            display: inline-block;
+        }
+    }
+
+    .mouse-speed-reset-button {
+        display: block;
+        margin-bottom: 4rem;
+    }
+
+    .mouse-speed-setting {
+        margin-bottom: 6rem;
+
+        + h3 {
+            margin-top: 2rem;
+        }
+    }
 }
--- a/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.ts
+++ b/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.ts
@@ -1,4 +1,14 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppState, getUserConfiguration } from '../../../store';
+import { SetUserConfigurationValueAction } from '../../../store/actions/user-config';
+import { DefaultUserConfigurationService } from '../../../services/default-user-configuration.service';
+import { SliderPips, SliderProps } from '../../slider-wrapper/slider-wrapper.component';
+import { Subscription } from 'rxjs/Subscription';
+import { UserConfiguration } from 'uhk-common';
+import { ResetMouseSpeedSettingsAction } from '../../../store/actions/device';
+
+const MOUSE_MOVE_VALUE_MULTIPLIER = 25;

@Component({
    selector: 'device-mouse-speed',
@@ -8,5 +18,131 @@ import { Component } from '@angular/core';
        'class': 'container-fluid'
    }
 })
-export class MouseSpeedComponent {
+export class MouseSpeedComponent implements OnInit, OnDestroy {
+    public moveProps = [
+        {
+            prop: 'mouseMoveInitialSpeed',
+            title: 'Initial speed',
+            tooltip: 'When mouse movement begins, this is the starting speed.',
+            valueUnit: 'px/s',
+            value: 0
+        },
+        {
+            prop: 'mouseMoveBaseSpeed',
+            title: 'Base speed',
+            tooltip: 'This speed is reached after the initial moving speed sufficiently ramps up.',
+            valueUnit: 'px/s',
+            value: 0
+        },
+        {
+            prop: 'mouseMoveAcceleration',
+            title: 'Acceleration',
+            tooltip: 'The rate of acceleration from the initial movement speed to the base speed.',
+            valueUnit: 'px/s²',
+            value: 0
+        },
+        {
+            prop: 'mouseMoveDeceleratedSpeed',
+            title: 'Decelerated speed',
+            tooltip: 'This speed is used while moving with the <i>decelerate key</i> pressed.',
+            valueUnit: 'px/s',
+            value: 0
+        },
+        {
+            prop: 'mouseMoveAcceleratedSpeed',
+            title: 'Accelerated speed',
+            tooltip: 'This speed is used while moving with the <i>accelerate key</i> pressed.',
+            valueUnit: 'px/s',
+            value: 0
+        }
+    ];
+
+    public scrollProps = [
+        {
+            prop: 'mouseScrollInitialSpeed',
+            title: 'Initial speed',
+            tooltip: 'When mouse scrolling begins, this is the starting speed.',
+            valueUnit: 'pulse/s',
+            value: 0
+        },
+        {
+            prop: 'mouseScrollBaseSpeed',
+            title: 'Base speed',
+            tooltip: 'This speed is reached after the initial scrolling speed sufficiently ramps up.',
+            valueUnit: 'pulse/s',
+            value: 0
+        },
+        {
+            prop: 'mouseScrollAcceleration',
+            title: 'Acceleration',
+            tooltip: 'The rate of acceleration from the initial scrolling speed to the base speed.',
+            valueUnit: 'pulse/s²',
+            value: 0
+        },
+        {
+            prop: 'mouseScrollDeceleratedSpeed',
+            title: 'Decelerated speed',
+            tooltip: 'This speed is used while scrolling with the <i>decelerate key</i> pressed.',
+            valueUnit: 'pulse/s',
+            value: 0
+        },
+        {
+            prop: 'mouseScrollAcceleratedSpeed',
+            title: 'Accelerated speed',
+            tooltip: 'This speed is used while scrolling with the <i>accelerate key</i> pressed.',
+            valueUnit: 'pulse/s',
+            value: 0
+        }
+    ];
+
+    public sliderPips: SliderPips = {
+        mode: 'positions',
+        values: [0, 50, 100],
+        density: 6,
+        stepped: true
+    };
+
+    public moveSettings: SliderProps = {
+        min: MOUSE_MOVE_VALUE_MULTIPLIER,
+        max: 6375,
+        step: MOUSE_MOVE_VALUE_MULTIPLIER
+    };
+
+    public scrollSettings: SliderProps = {
+        min: 1,
+        max: 255,
+        step: 1
+    };
+
+    private userConfig$: Store<UserConfiguration>;
+    private userConfigSubscription: Subscription;
+
+    constructor(private store: Store<AppState>, private defaultUserConfigurationService: DefaultUserConfigurationService) {}
+
+    ngOnInit(): void {
+        this.userConfig$ = this.store.select(getUserConfiguration);
+        this.userConfigSubscription = this.userConfig$.subscribe(config => {
+            this.moveProps.forEach(moveProp => {
+                moveProp.value = config[moveProp.prop] * MOUSE_MOVE_VALUE_MULTIPLIER || 0;
+            });
+            this.scrollProps.forEach(scrollProp => {
+                scrollProp.value = config[scrollProp.prop] || 0;
+            });
+        });
+    }
+
+    ngOnDestroy(): void {
+        this.userConfigSubscription.unsubscribe();
+    }
+
+    onSetPropertyValue(propertyName: string, value: number): void {
+        this.store.dispatch(new SetUserConfigurationValueAction({
+            propertyName,
+            value: propertyName.indexOf('mouseMove') !== -1 ? value / MOUSE_MOVE_VALUE_MULTIPLIER : value
+        }));
+    }
+
+    resetToDefault() {
+       this.store.dispatch(new ResetMouseSpeedSettingsAction());
+    }
 }
--- a/packages/uhk-web/src/app/components/editable-text/editable-text.component.html
+++ b/packages/uhk-web/src/app/components/editable-text/editable-text.component.html
@@ -0,0 +1,31 @@
+<div class="text-center">
+    <span *ngIf="showPlaceholder"
+          class="placeholder">
+        <span (click)="editText()">{{ placeholder }}</span>
+    </span>
+
+    <span *ngIf="showText"
+          class="editable">
+        <span (click)="editText()"
+              [innerHtml]="displayText"></span>
+    </span>
+</div>
+
+<div *ngIf="editing">
+    <textarea class="text-editor"
+              [(ngModel)]="text"
+              autofocus
+              (keydown.control.enter)="keydownEnter()"
+              (keydown.alt.enter)="keydownEnter()"></textarea>
+    <div class="pull-right buttons">
+        <button class="btn btn-danger"
+                (click)="cancelEditText()">
+            Cancel
+        </button>
+        <button class="btn btn-primary"
+                (click)="saveText()"
+                [disabled]="isSaveDisabled">
+            Update description
+        </button>
+    </div>
+</div>
--- a/packages/uhk-web/src/app/components/editable-text/editable-text.component.scss
+++ b/packages/uhk-web/src/app/components/editable-text/editable-text.component.scss
@@ -0,0 +1,26 @@
+:host {
+    margin-top: 0.5em;
+
+    span.placeholder {
+        color: gray;
+        display: inline-block;
+
+        .glyphicon {
+            color: black;
+        }
+    }
+
+    span.editable,
+    span.placeholder {
+        cursor: pointer;
+    }
+
+    textarea.text-editor {
+        display: block;
+        width: 100%;
+    }
+
+    .buttons {
+        margin-top: 0.5em;
+    }
+}
--- a/packages/uhk-web/src/app/components/editable-text/editable-text.component.ts
+++ b/packages/uhk-web/src/app/components/editable-text/editable-text.component.ts
@@ -0,0 +1,82 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+    selector: 'editable-text',
+    templateUrl: './editable-text.component.html',
+    styleUrls: ['./editable-text.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EditableTextComponent), multi: true}
+    ]
+})
+export class EditableTextComponent implements ControlValueAccessor {
+
+    @Input() placeholder = 'No editable content';
+    text: string;
+    originalText: string;
+    editing = false;
+
+    get isSaveDisabled(): boolean {
+        return !this.text || this.text.trim().length === 0;
+    }
+
+    get displayText(): string {
+        return this.text && this.text.replace(/\n/g, '<br>');
+    }
+
+    constructor(private cdr: ChangeDetectorRef) {
+
+    }
+
+    writeValue(obj: any): void {
+        if (this.text === obj) {
+            return;
+        }
+
+        this.text = obj;
+        this.cdr.markForCheck();
+    }
+
+    registerOnChange(fn: any): void {
+        this.textChange = fn;
+    }
+
+    registerOnTouched(fn: any): void {
+    }
+
+    saveText(): void {
+        this.originalText = null;
+        this.editing = false;
+        this.textChange(this.text);
+    }
+
+    editText(): void {
+        this.originalText = this.text;
+        this.editing = true;
+    }
+
+    cancelEditText(): void {
+        this.text = this.originalText;
+        this.editing = false;
+    }
+
+    keydownEnter(): void {
+        if (this.isSaveDisabled) {
+            return;
+        }
+
+        this.saveText();
+    }
+
+    get showPlaceholder(): boolean {
+        return !this.editing && !this.text;
+    }
+
+    get showText(): boolean {
+        return !this.editing && !!this.text;
+    }
+
+    private textChange: any = () => {
+    }
+}
--- a/packages/uhk-web/src/app/components/keyboard/slider/keyboard-slider.component.html
+++ b/packages/uhk-web/src/app/components/keyboard/slider/keyboard-slider.component.html
@@ -7,8 +7,11 @@
              [selectedKey]="selectedKey"
              [selected]="selectedKey?.layerId === index"
              [keyboardLayout]="keyboardLayout"
+              [description]="description"
+              [showDescription]="true"
              (keyClick)="keyClick.emit($event)"
              (keyHover)="keyHover.emit($event)"
              (capture)="capture.emit($event)"
+              (descriptionChanged)="descriptionChanged.emit($event)"
 >
 </svg-keyboard>
--- a/packages/uhk-web/src/app/components/keyboard/slider/keyboard-slider.component.ts
+++ b/packages/uhk-web/src/app/components/keyboard/slider/keyboard-slider.component.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
 import { Layer } from 'uhk-common';

@@ -81,11 +81,14 @@ export class KeyboardSliderComponent implements OnChanges {
    @Input() halvesSplit: boolean;
    @Input() selectedKey: { layerId: number, moduleId: number, keyId: number };
    @Input() keyboardLayout = KeyboardLayout.ANSI;
+    @Input() description: string;
    @Output() keyClick = new EventEmitter();
    @Output() keyHover = new EventEmitter();
    @Output() capture = new EventEmitter();
+    @Output() descriptionChanged = new EventEmitter<string>();

    layerAnimationState: AnimationKeyboard[];
+
    ngOnChanges(changes: SimpleChanges) {
        if (changes['layers']) {
            this.layerAnimationState = this.layers.map<AnimationKeyboard>(() => 'initOut');
--- a/packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.html
+++ b/packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.html
@@ -4,7 +4,8 @@
                   (downloadClick)="downloadKeymap()"></keymap-header>
    <svg-keyboard-wrap [keymap]="keymap$ | async"
                       [halvesSplit]="keyboardSplit"
-                       [keyboardLayout]="keyboardLayout$ | async"></svg-keyboard-wrap>
+                       [keyboardLayout]="keyboardLayout$ | async"
+                       (descriptionChanged)="descriptionChanged($event)"></svg-keyboard-wrap>
 </ng-template>

 <div *ngIf="!(keymap$ | async)" class="not-found">
--- a/packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.ts
+++ b/packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.ts
@@ -18,6 +18,8 @@ import { AppState, getKeyboardLayout } from '../../../store';
 import { getKeymap, getKeymaps, getUserConfiguration } from '../../../store/reducers/user-configuration';
 import { SvgKeyboardWrapComponent } from '../../svg/wrap';
 import { KeyboardLayout } from '../../../keyboard/keyboard-layout.enum';
+import { KeymapActions } from '../../../store/actions';
+import { ChangeKeymapDescription } from '../../../models/ChangeKeymapDescription';

@Component({
    selector: 'keymap-edit',
@@ -64,7 +66,7 @@ export class KeymapEditComponent {
                const keymap = latest[0];
                const exportableJSON = latest[1];
                const fileName = keymap.name + '_keymap.json';
-                saveAs(new Blob([exportableJSON], { type: 'application/json' }), fileName);
+                saveAs(new Blob([exportableJSON], {type: 'application/json'}), fileName);
            });
    }

@@ -73,6 +75,10 @@ export class KeymapEditComponent {
        this.keyboardSplit = !this.keyboardSplit;
    }

+    descriptionChanged(event: ChangeKeymapDescription): void {
+        this.store.dispatch(new KeymapActions.EditDescriptionAction(event));
+    }
+
    private toExportableJSON(keymap: Keymap): Observable<any> {
        return this.store
            .let(getUserConfiguration())
--- a/packages/uhk-web/src/app/components/keymap/header/keymap-header.component.ts
+++ b/packages/uhk-web/src/app/components/keymap/header/keymap-header.component.ts
@@ -74,7 +74,7 @@ export class KeymapHeaderComponent implements OnChanges {
    }

    editKeymapName(name: string) {
-        if (name.length === 0) {
+        if (!util.isValidName(name)) {
            this.setName();
            return;
        }
--- a/packages/uhk-web/src/app/components/macro/edit/macro-edit.component.html
+++ b/packages/uhk-web/src/app/components/macro/edit/macro-edit.component.html
@@ -13,5 +13,5 @@
 </ng-template>

 <div *ngIf="!macro" class="not-found">
-    There is no macro with id {{ route.params.select('id') | async }}.
+    There is no macro with id {{ macroId }}.
 </div>
--- a/packages/uhk-web/src/app/components/macro/edit/macro-edit.component.ts
+++ b/packages/uhk-web/src/app/components/macro/edit/macro-edit.component.ts
@@ -7,7 +7,7 @@ import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/operator/pluck';

 import { MacroActions } from '../../../store/actions';
-import { AppState } from '../../../store/index';
+import { AppState } from '../../../store';
 import { getMacro } from '../../../store/reducers/user-configuration';

@Component({
@@ -21,13 +21,17 @@ import { getMacro } from '../../../store/reducers/user-configuration';
 export class MacroEditComponent implements OnDestroy {
    macro: Macro;
    isNew: boolean;
+    macroId: number;

    private subscription: Subscription;
    constructor(private store: Store<AppState>, public route: ActivatedRoute) {
        this.subscription = route
            .params
            .pluck<{}, string>('id')
-            .switchMap((id: string) => store.let(getMacro(+id)))
+            .switchMap((id: string) => {
+                this.macroId = +id;
+                return store.let(getMacro(this.macroId));
+            })
            .subscribe((macro: Macro) => {
                this.macro = macro;
            });
--- a/packages/uhk-web/src/app/components/macro/header/macro-header.component.ts
+++ b/packages/uhk-web/src/app/components/macro/header/macro-header.component.ts
@@ -59,7 +59,7 @@ export class MacroHeaderComponent implements AfterViewInit, OnChanges {
    }

    editMacroName(name: string) {
-        if (name.length === 0) {
+        if (!util.isValidName(name)) {
            this.setName();
            return;
        }
--- a/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html
+++ b/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html
@@ -7,6 +7,10 @@
            [width]="200"
            [options]="options"
    ></select2>
+    <icon name="question-circle"
+          data-toggle="tooltip"
+          title="Looking for a non-US character? Just pick the character of the desired key according to the US layout."
+          data-placement="bottom"></icon>
    <capture-keystroke-button (capture)="onKeysCapture($event)" tabindex="0"></capture-keystroke-button>
 </div>
 <div class="modifier-options">
--- a/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.scss
+++ b/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.scss
@@ -10,6 +10,10 @@
            position: relative;
            top: 2px;
        }
+
+        icon {
+            display: inline-block;
+        };
    }

    .modifier-options {
--- a/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.ts
+++ b/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnChanges } from '@angular/core';
 import { Select2OptionData, Select2TemplateFunction } from 'ng2-select2';
-import { KeyAction, KeystrokeAction, KeystrokeType } from 'uhk-common';
+import { KeyAction, KeystrokeAction, KeystrokeType, SCANCODES, SECONDARY_ROLES } from 'uhk-common';

 import { Tab } from '../tab';
 import { MapperService } from '../../../../services/mapper.service';
@@ -35,8 +35,8 @@ export class KeypressTabComponent extends Tab implements OnChanges {
            id: '0',
            text: 'None'
        }];
-        this.scanCodeGroups = this.scanCodeGroups.concat(require('./scancodes.json'));
-        this.secondaryRoleGroups = require('./secondaryRole.json');
+        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];
--- a/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.html
+++ b/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.html
@@ -2,6 +2,7 @@
    <span> No macros are available to choose from. Create a macro first! </span>
 </ng-template>
 <ng-template [ngIf]="macroOptions.length > 0">
+    <p><i>Please note that macro playback is not implemented yet. You can bind macros, but they don't have any effect.</i></p>
    <div class="macro-selector">
        <b> Play macro: </b>
        <select2 [data]="macroOptions" [value]="macroOptions[selectedMacroIndex].id" (valueChanged)="onChange($event)" [width]="'100%'"></select2>
--- a/packages/uhk-web/src/app/components/popover/tab/mouse/mouse-tab.component.html
+++ b/packages/uhk-web/src/app/components/popover/tab/mouse/mouse-tab.component.html
@@ -83,7 +83,7 @@
    </div>
    <div *ngSwitchCase="3" class="mouse__config mouse__config--speed text-center">
        <div class="help-text--mouse-speed text-left">
-            <p>Press this key along with mouse movement/scrolling to accelerate/decelerate the speed of the action.</p>
+            <p>Press this key along with mouse movement/scrolling to accelerate/decelerate its speed.</p>
        </div>
        <div class="btn-group btn-group-lg" role="group">
            <button class="btn btn-default"
@@ -101,9 +101,6 @@
                <span>Accelerate</span>
            </button>
        </div>
-        <div class="help-text--mouse-speed last-help  text-left">
-            <p>You can set the multiplier in the <a [routerLink]="['/settings']" title="Settings">settings</a>.</p>
-        </div>
    </div>
    <div *ngSwitchDefault>
    </div>
--- a/packages/uhk-web/src/app/components/popover/tab/mouse/mouse-tab.component.scss
+++ b/packages/uhk-web/src/app/components/popover/tab/mouse/mouse-tab.component.scss
@@ -47,16 +47,6 @@
        }
    }

-    .help-text--mouse-speed {
-        margin-bottom: 2rem;
-        font-size: 0.9em;
-        color: #666;
-
-        p {
-            margin: 0;
-        }
-    }
-
    .details {
        .btn-placeholder {
            visibility: hidden;
@@ -78,8 +68,3 @@
        }
    }
 }
-
-.help-text--mouse-speed.last-help {
-    margin-bottom: 0;
-    margin-top: 2rem;
-}
--- a/packages/uhk-web/src/app/components/settings/index.ts
+++ b/packages/uhk-web/src/app/components/settings/index.ts
@@ -1,2 +0,0 @@
-export * from './settings.component';
-export * from './settings.routes';
--- a/packages/uhk-web/src/app/components/settings/settings.routes.ts
+++ b/packages/uhk-web/src/app/components/settings/settings.routes.ts
@@ -1,10 +0,0 @@
-import { Routes } from '@angular/router';
-
-import { SettingsComponent } from './settings.component';
-
-export const settingsRoutes: Routes = [
-    {
-        path: 'settings',
-        component: SettingsComponent
-    }
-];
--- a/packages/uhk-web/src/app/components/side-menu/side-menu.component.html
+++ b/packages/uhk-web/src/app/components/side-menu/side-menu.component.html
@@ -23,6 +23,12 @@
                               [class.disabled]="updatingFirmware$ | async">Mouse speed</a>
                        </div>
                    </li>
+                    <li class="sidebar__level-2--item">
+                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                            <a [routerLink]="['/device/led-brightness']"
+                               [class.disabled]="updatingFirmware$ | async">LED brightness</a>
+                        </div>
+                    </li>
                    <li class="sidebar__level-2--item">
                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
                            <a [routerLink]="['/device/configuration']"
@@ -40,11 +46,11 @@
            <li class="sidebar__level-1--item">
                <div class="sidebar__level-1">
                    <i class="fa fa-keyboard-o"></i> Keymaps
-                    <a [routerLink]="['/keymap/add']"
+                    <!--a [routerLink]="['/keymap/add']"
                       class="btn btn-default pull-right btn-sm"
                       [class.disabled]="updatingFirmware$ | async">
                        <i class="fa fa-plus"></i>
-                    </a>
+                    </a-->
                    <i class="fa fa-chevron-up pull-right"
                       (click)="toggleHide($event, 'keymap')"></i>
                </div>
@@ -111,14 +117,27 @@
                    </li>
                </ul>
            </li>
-
+        </ul>
+    </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="fa fa-chevron-up pull-right"
+                (click)="toggleHide($event, 'agent')"></i>
+        </div>
+        <ul [@toggler]="animation['agent']">
+            <li class="sidebar__level-2--item">
+                <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                    <a [routerLink]="['/settings']"
+                       [class.disabled]="updatingFirmware$ | async">Settings</a>
+                </div>
+            </li>
+            <li class="sidebar__level-2--item">
+                <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                    <a [routerLink]="['/about']"
+                       [class.disabled]="updatingFirmware$ | async">About</a>
+                </div>
+            </li>
        </ul>
    </li>
 </ul>
-<ul class="menu--bottom" *ngIf="runInElectron$ | async">
-    <li class="sidebar__level-1--item" [routerLinkActive]="['active']">
-        <a class="sidebar__level-1" [routerLink]="['/settings']">
-            <i class="fa fa-gear"></i> Settings
-        </a>
-    </li>
-</ul>
--- a/packages/uhk-web/src/app/components/side-menu/side-menu.component.scss
+++ b/packages/uhk-web/src/app/components/side-menu/side-menu.component.scss
@@ -9,6 +9,10 @@

 a {
    color: #333;
+
+    &.disabled {
+        opacity: 0.65;
+    }
 }

 // General list styles for the sidebar-menu.
@@ -64,6 +68,10 @@ ul {
            display: none;
            cursor: pointer;
        }
+
+        .uhk-icon-agent-icon {
+            margin-left: -3px;
+        }
    }

    &__level-2 {
@@ -108,6 +116,10 @@ ul {
                &:focus {
                    text-decoration: none;
                }
+
+                &.disabled {
+                    opacity: 0.65;
+                }
            }
        }
    }
@@ -160,12 +172,12 @@ ul {
        padding: 0;
        margin: 0 0.25rem;
        text-overflow: ellipsis;
-        background-color: inherit;
+        background-color: transparent;

        &:focus {
            box-shadow: 0 0 0 1px #ccc, 0 0 5px 0 #ccc;
            border-color: transparent;
-            background-color: inherit;
+            background-color: transparent;
        }
    }
 }
--- a/packages/uhk-web/src/app/components/side-menu/side-menu.component.ts
+++ b/packages/uhk-web/src/app/components/side-menu/side-menu.component.ts
@@ -56,17 +56,8 @@ export class SideMenuComponent implements AfterContentInit, OnDestroy {
            addon: 'active'
        };

-        this.keymaps$ = store.let(getKeymaps())
-            .map(keymaps => keymaps.slice()) // Creating a new array reference, because the sort is working in place
-            .do((keymaps: Keymap[]) => {
-                keymaps.sort((first: Keymap, second: Keymap) => first.name.localeCompare(second.name));
-            });
-
-        this.macros$ = store.let(getMacros())
-            .map(macros => macros.slice()) // Creating a new array reference, because the sort is working in place
-            .do((macros: Macro[]) => {
-                macros.sort((first: Macro, second: Macro) => first.name.localeCompare(second.name));
-            });
+        this.keymaps$ = store.let(getKeymaps());
+        this.macros$ = store.let(getMacros());

        this.showAddonMenu$ = this.store.select(showAddonMenu);
        this.runInElectron$ = this.store.select(runningInElectron);
@@ -118,7 +109,11 @@ export class SideMenuComponent implements AfterContentInit, OnDestroy {
        this.store.dispatch(MacroActions.addMacro());
    }

-    editDeviceName(name): void {
+    editDeviceName(name: string): void {
+        if (!util.isValidName(name) || name.trim() === this.deviceNameValue) {
+            this.setDeviceName();
+            return;
+        }
        this.store.dispatch(new RenameUserConfigurationAction(name));
    }

--- a/packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.html
+++ b/packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.html
@@ -0,0 +1,24 @@
+<label *ngIf="label">
+    <span>{{label}}</span>
+    <icon name="question-circle"
+            data-toggle="tooltip"
+            [title]="tooltip"
+            html="true"
+            data-placement="bottom"
+            *ngIf="tooltip"></icon>
+</label>
+<div class="slider-wrapper">
+    <div class="slider-container">
+        <nouislider
+            [min]="min"
+            [max]="max"
+            [step]="step"
+            [keyboard]="true"
+            [tooltips]="true"
+            [(ngModel)]="value"
+            (ngModelChange)="onSliderChange($event)"></nouislider>
+    </div>
+    <div class="slider-value">
+        <div class="value-indicator">{{value}} {{valueUnit}}</div>
+    </div>
+</div>
--- a/packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.scss
+++ b/packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.scss
@@ -0,0 +1,29 @@
+:host {
+    label {
+        display: block;
+        font-weight: normal;
+
+        icon {
+            display: inline-block;
+        }
+    }
+
+    .slider-wrapper {
+        display: flex;
+        flex-direction: row;
+        padding-left: 1.6rem;
+    }
+
+    .slider-container {
+        width: 80%;
+    }
+
+    .slider-value {
+        width: 20%;
+    }
+
+    .value-indicator {
+        margin: 1rem 1rem 1rem 3rem;
+        vertical-align: middle;
+    }
+}
--- a/packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.ts
+++ b/packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.ts
@@ -0,0 +1,93 @@
+import { AfterViewInit, Component, EventEmitter, forwardRef, Input, Output, OnDestroy, ViewChild } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NouisliderComponent } from 'ng2-nouislider/src/nouislider';
+import { Observable } from 'rxjs/Observable';
+import { Observer } from 'rxjs/Observer';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
+
+export interface SliderPips {
+    mode: string;
+    values: number[];
+    density: number;
+    stepped?: boolean;
+}
+
+export interface SliderProps {
+    min: number;
+    max: number;
+    step?: number;
+    pips?: SliderPips;
+    valueUnit?: string;
+}
+
+@Component({
+    selector: 'slider-wrapper',
+    templateUrl: './slider-wrapper.component.html',
+    styleUrls: ['./slider-wrapper.component.scss'],
+    providers: [
+        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderWrapperComponent), multi: true }
+    ]
+})
+export class SliderWrapperComponent implements AfterViewInit, ControlValueAccessor, OnDestroy {
+    @ViewChild(NouisliderComponent) slider: NouisliderComponent;
+    @Input() label: string;
+    @Input() tooltip: string;
+    @Input() min: number;
+    @Input() max: number;
+    @Input() step: number;
+    @Input() pips: SliderPips;
+    @Input() valueUnit: string;
+    @Output() onChange = new EventEmitter<number>();
+
+    public value: number;
+    private changeObserver$: Observer<number>;
+    private changeDebounceTime: number = 300;
+
+    ngAfterViewInit(): void {
+        if (this.pips) {
+            this.slider.slider.pips(this.pips);
+        }
+
+        // Hide tooltips and show them when dragging slider handle
+        this.slider.slider.target.querySelector('.noUi-tooltip').style.display = 'none';
+
+        this.slider.slider.on('start', function() {
+            this.target.querySelector('.noUi-tooltip').style.display = 'block';
+        });
+        this.slider.slider.on('end', function() {
+            this.target.querySelector('.noUi-tooltip').style.display = 'none';
+        });
+    }
+
+    ngOnDestroy() {
+        if (this.changeObserver$) {
+            this.changeObserver$.complete();
+        }
+    }
+
+    writeValue(value: number): void {
+        this.value = value || this.min;
+    }
+
+    registerOnChange(fn: any): void {
+        this.propagateChange = fn;
+    }
+
+    registerOnTouched() {}
+
+    onSliderChange(value: number): void {
+        if (!this.changeObserver$) {
+            Observable.create(observer => {
+                this.changeObserver$ = observer;
+            }).debounceTime(this.changeDebounceTime)
+            .distinctUntilChanged()
+            .subscribe(this.propagateChange);
+
+            return; // No change event on first change as the value is just being set
+        }
+        this.changeObserver$.next(value);
+    }
+
+    private propagateChange: any = () => {};
+}
--- a/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.html
+++ b/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.html
@@ -1,16 +1,20 @@
 <svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="viewBox" height="100%" width="100%">
    <svg:g svg-module *ngFor="let module of modules; let i = index"
-            [coverages]="module.coverages"
-            [keyboardKeys]="module.keyboardKeys"
-            [keybindAnimationEnabled]="keybindAnimationEnabled"
-            [capturingEnabled]="capturingEnabled"
-            [attr.transform]="module.attributes.transform"
-            [keyActions]="moduleConfig[i].keyActions"
-            [selectedKey]="selectedKey"
-            [@split]="moduleAnimationStates[i]"
-            [selected]="selectedKey?.moduleId === i"
-            (keyClick)="onKeyClick(i, $event.index, $event.keyTarget)"
-            (keyHover)="onKeyHover($event.index, $event.event, $event.over, i)"
-            (capture)="onCapture(i, $event.index, $event.captured)"
+           [coverages]="module.coverages"
+           [keyboardKeys]="module.keyboardKeys"
+           [keybindAnimationEnabled]="keybindAnimationEnabled"
+           [capturingEnabled]="capturingEnabled"
+           [attr.transform]="module.attributes.transform"
+           [keyActions]="moduleConfig[i].keyActions"
+           [selectedKey]="selectedKey"
+           [@split]="moduleAnimationStates[i]"
+           [selected]="selectedKey?.moduleId === i"
+           (keyClick)="onKeyClick(i, $event.index, $event.keyTarget)"
+           (keyHover)="onKeyHover($event.index, $event.event, $event.over, i)"
+           (capture)="onCapture(i, $event.index, $event.captured)"
    />
 </svg>
+<editable-text *ngIf="showDescription"
+               [ngModel]="description"
+               (ngModelChange)="descriptionChanged.emit($event)"
+               placeholder="No description provided for this keymap."></editable-text>
--- a/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.scss
+++ b/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.scss
@@ -1,5 +1,10 @@
 :host {
-    display: flex;
+    display: block;
    width: 100%;
    position: relative;
 }
+editable-text {
+    padding-left: 2em;
+    padding-right: 2em;
+    display: block;
+}
--- a/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts
+++ b/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts
@@ -31,9 +31,12 @@ export class SvgKeyboardComponent implements OnInit {
    @Input() selected: boolean;
    @Input() halvesSplit: boolean;
    @Input() keyboardLayout = KeyboardLayout.ANSI;
+    @Input() description: string;
+    @Input() showDescription = false;
    @Output() keyClick = new EventEmitter();
    @Output() keyHover = new EventEmitter();
    @Output() capture = new EventEmitter();
+    @Output() descriptionChanged = new EventEmitter<string>();

    modules: SvgModule[];
    viewBox: string;
--- a/packages/uhk-web/src/app/components/svg/keys/svg-keystroke-key/svg-keystroke-key.component.html
+++ b/packages/uhk-web/src/app/components/svg/keys/svg-keystroke-key/svg-keystroke-key.component.html
@@ -1,5 +1,10 @@
 <svg [attr.viewBox]="viewBox" [attr.width]="textContainer.width" [attr.height]="textContainer.height"
    [attr.x]="textContainer.x" [attr.y]="textContainer.y" [ngSwitch]="labelType">
+    <svg:g svg-single-icon-key *ngSwitchCase="'icon'"
+            [height]="height"
+            [width]="width"
+            [icon]="labelSource">
+    </svg:g>
    <svg:g svg-one-line-text-key *ngSwitchCase="'one-line'"
            [height]="height"
            [width]="width"
--- a/packages/uhk-web/src/app/components/svg/keys/svg-keystroke-key/svg-keystroke-key.component.ts
+++ b/packages/uhk-web/src/app/components/svg/keys/svg-keystroke-key/svg-keystroke-key.component.ts
@@ -127,21 +127,23 @@ export class SvgKeystrokeKeyComponent implements OnInit, OnChanges {
    }

    ngOnChanges() {
-        let newLabelSource: string[];
        if (this.keystrokeAction.hasScancode()) {
            const scancode: number = this.keystrokeAction.scancode;
-            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.labelSource = this.mapper.scanCodeToSvgImagePath(scancode, this.keystrokeAction.type);
+            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';
--- a/packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.html
+++ b/packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.html
@@ -7,9 +7,11 @@
                     [selectedKey]="selectedKey"
                     [halvesSplit]="halvesSplit"
                     [keyboardLayout]="keyboardLayout"
+                     [description]="keymap.description"
                     (keyClick)="onKeyClick($event.moduleId, $event.keyId, $event.keyTarget)"
                     (keyHover)="onKeyHover($event.moduleId, $event.event, $event.over, $event.keyId)"
                     (capture)="onCapture($event.moduleId, $event.keyId, $event.captured)"
+                     (descriptionChanged)="onDescriptionChanged($event)"
    ></keyboard-slider>
    <popover tabindex="0" [visible]="popoverShown" [keyPosition]="keyPosition" [wrapPosition]="wrapPosition" [defaultKeyAction]="popoverInitKeyAction"
             [currentKeymap]="keymap" [currentLayer]="currentLayer" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>
--- a/packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.ts
+++ b/packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.ts
@@ -2,14 +2,16 @@ import {
    ChangeDetectionStrategy,
    Component,
    ElementRef,
-    Renderer,
+    EventEmitter,
    HostBinding,
    HostListener,
    Input,
    OnChanges,
    OnInit,
-    ViewChild,
-    SimpleChanges
+    Output,
+    Renderer,
+    SimpleChanges,
+    ViewChild
 } from '@angular/core';

 import { Observable } from 'rxjs/Observable';
@@ -25,10 +27,10 @@ import {
    KeystrokeAction,
    Layer,
    LayerName,
-    SecondaryRoleAction,
    MouseAction,
    MouseActionParam,
    PlayMacroAction,
+    SecondaryRoleAction,
    SwitchKeymapAction,
    SwitchLayerAction
 } from 'uhk-common';
@@ -38,6 +40,7 @@ import { AppState } from '../../../store';
 import { KeymapActions } from '../../../store/actions';
 import { PopoverComponent } from '../../popover';
 import { KeyboardLayout } from '../../../keyboard/keyboard-layout.enum';
+import { ChangeKeymapDescription } from '../../../models/ChangeKeymapDescription';

 interface NameValuePair {
    name: string;
@@ -56,6 +59,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
    @Input() tooltipEnabled: boolean = false;
    @Input() halvesSplit: boolean;
    @Input() keyboardLayout: KeyboardLayout.ANSI;
+    @Output() descriptionChanged = new EventEmitter<ChangeKeymapDescription>();

    @ViewChild(PopoverComponent, { read: ElementRef }) popover: ElementRef;

@@ -237,6 +241,13 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
        return this.currentLayer;
    }

+    onDescriptionChanged(description: string): void {
+        this.descriptionChanged.emit({
+            description,
+            abbr: this.keymap.abbreviation
+        });
+    }
+
    private getKeyActionContent(keyAction: KeyAction): Observable<NameValuePair[]> {
        if (keyAction instanceof KeystrokeAction) {
            const keystrokeAction: KeystrokeAction = keyAction;
--- a/packages/uhk-web/src/app/components/uhk-header/uhk-header.ts
+++ b/packages/uhk-web/src/app/components/uhk-header/uhk-header.ts
@@ -3,7 +3,7 @@ import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';

 import { Notification } from 'uhk-common';
-import { AppState, getUndoableNotification } from '../../store/index';
+import { AppState, getUndoableNotification } from '../../store';
 import { DismissUndoNotificationAction, UndoLastAction } from '../../store/actions/app';

@Component({
--- a/packages/uhk-web/src/app/directives/autofocus/autofocus.directive.ts
+++ b/packages/uhk-web/src/app/directives/autofocus/autofocus.directive.ts
@@ -0,0 +1,16 @@
+import { AfterViewInit, Directive, ElementRef } from '@angular/core';
+
+@Directive({
+    selector: '[autofocus]'
+})
+export class Autofocus implements AfterViewInit {
+    constructor(private el: ElementRef) {
+    }
+
+    ngOnInit() {
+    }
+
+    ngAfterViewInit() {
+        this.el.nativeElement.focus();
+    }
+}
--- a/packages/uhk-web/src/app/models/ChangeKeymapDescription.ts
+++ b/packages/uhk-web/src/app/models/ChangeKeymapDescription.ts
@@ -0,0 +1,4 @@
+export interface ChangeKeymapDescription {
+    abbr: string;
+    description: string;
+}
--- a/packages/uhk-web/src/app/models/upload-file-data.ts
+++ b/packages/uhk-web/src/app/models/upload-file-data.ts
@@ -0,0 +1,4 @@
+export interface UploadFileData {
+    filename: string;
+    data: Array<number>;
+}
--- a/packages/uhk-web/src/app/models/user-configuration-value.ts
+++ b/packages/uhk-web/src/app/models/user-configuration-value.ts
@@ -0,0 +1,4 @@
+export interface UserConfigurationValue {
+    propertyName: string;
+    value: number;
+}
--- a/packages/uhk-web/src/app/pages/main-page/main.page.ts
+++ b/packages/uhk-web/src/app/pages/main-page/main.page.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
@Component({
    selector: 'main-page',
    templateUrl: './main.page.html',
-    styles: [':host{height:100%; display: inline-block; width: 100%}']
+    styles: [':host{height:100%; width:100%}']
 })
 export class MainPage {

--- a/packages/uhk-web/src/app/services/app-renderer.service.ts
+++ b/packages/uhk-web/src/app/services/app-renderer.service.ts
@@ -26,6 +26,11 @@ export class AppRendererService {
        this.ipcRenderer.send(IpcEvents.app.exit);
    }

+    openUrl(url: string): void {
+        this.logService.info(`[AppRendererService] open url: ${url}`);
+        this.ipcRenderer.send(IpcEvents.app.openUrl, url);
+    }
+
    private registerEvents() {
        this.ipcRenderer.on(IpcEvents.app.getAppStartInfoReply, (event: string, arg: AppStartInfo) => {
            this.dispachStoreAction(new ProcessAppStartInfoAction(arg));
--- a/packages/uhk-web/src/app/services/capture.service.ts
+++ b/packages/uhk-web/src/app/services/capture.service.ts
@@ -94,7 +94,7 @@ export class CaptureService {
        this.mapping.set(88, 27);  // X
        this.mapping.set(89, 28);  // Y
        this.mapping.set(90, 29);  // Z
-        this.mapping.set(93, 118);  // Menu
+        this.mapping.set(93, 101);  // Menu
        this.mapping.set(96, 98);  // Num pad 0
        this.mapping.set(97, 89);  // Num pad 1
        this.mapping.set(98, 90);  // Num pad 2
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .9.1
 .9.4