Bump version to 1.1.1 and update changelog.

* fix(config): delete KeyAction binding of deleted macro

* refactor: use sorter import

* fix(macro): read the macro id from route params

* fix(keyAction): use NoneAction in keyAction mapping

.nvmrc

@@ -1 +1 @@
-8.9.1
+8.9.4

.travis.yml

@@ -45,7 +45,6 @@ addons:
 
 install:
   - nvm install
-  - npm i -g npm@5.6.0
   - npm install
 
 before_script:

CHANGELOG.md

@@ -4,15 +4,44 @@ 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.1] - 2017-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] - 2017-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](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/8.0.0) | Device Protocol: 4.0.0 | User Config: 4.0.0 | Hardware Config: 1.0.0
+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**](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/8.0.**0**) | Device Protocol: 4.0.0 | User Config: 4.0.0 | Hardware Config: 1.0.0
+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.
@@ -23,18 +52,18 @@ Firmware: [8.0.**0**](https://github.com/UltimateHackingKeyboard/firmware/releas
 
 ## [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

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.

appveyor.yml

@@ -18,7 +18,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%

package.json

@@ -3,7 +3,11 @@
   "private": true,
   "author": "Ultimate Gadget Laboratories",
   "main": "electron/dist/electron-main.js",
-  "version": "1.0.4",
+  "version": "1.1.1",
+  "firmwareVersion": "8.1.2",
+  "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",
@@ -32,7 +36,7 @@
     "decompress": "4.2.0",
     "decompress-tarbz2": "^4.1.1",
     "devtron": "1.4.0",
-    "electron": "1.7.5",
+    "electron": "1.7.11",
     "electron-builder": "19.45.5",
     "electron-debug": "1.4.0",
     "electron-devtools-installer": "2.2.0",
@@ -86,7 +90,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",

packages/uhk-agent/package.json

@@ -36,7 +36,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",

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);

packages/uhk-agent/src/models/command-line-inputs.ts

@@ -1,4 +1,3 @@
 export interface CommandLineInputs {
     addons?: boolean;
-    'auto-write-config'?: boolean;
 }

packages/uhk-agent/src/package.json

@@ -15,9 +15,5 @@
   },
   "dependencies": {
     "node-hid": "0.5.7"
-  },
-  "firmwareVersion": "8.0.0",
-  "deviceProtocolVersion": "4.0.0",
-  "userConfigVersion": "4.0.0",
-  "hardwareConfigVersion": "1.0.0"
+  }
 }

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]);
+    }
 }

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

@@ -7,6 +7,7 @@ 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';
 
 export class Helper {
 
@@ -77,6 +78,8 @@ 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}"`;
         }

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;
 }

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

@@ -1,4 +1,3 @@
 export interface CommandLineArgs {
     addons: boolean;
-    autoWriteConfig: boolean;
 }

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';
 }

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 {

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 {

packages/uhk-usb/src/constants.ts

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

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

@@ -5,8 +5,13 @@ 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 {
@@ -33,7 +38,7 @@ export class UhkOperations {
         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 +47,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']);
@@ -161,6 +173,26 @@ 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;
+    }
+
     /**
      * IpcMain handler. Send the UserConfiguration to the UHK Device and send a response with the result.
      * @param {string} json - UserConfiguration in JSON format

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,7 +68,7 @@
     "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",

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"

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%;

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
         ]
     }
 ];

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>

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;
+}

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));
+    }
+}

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
+    }
+];

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';

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>;
 

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>
 

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

@@ -14,9 +14,11 @@
         <span role="button" class="btn-link" (click)="saveConfigurationInBINFormat()">binary</span> format.
     </li>
     <li>
-        <button class="btn btn-default"
-                >Upload device configuration
-        </button>
+        <label class="btn btn-default btn-file">
+            Upload device configuration
+            <input type="file"
+                   (change)="changeFile($event)">
+        </label>
     </li>
     <li>
         <button class="btn btn-danger"

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,17 @@ export class DeviceConfigurationComponent {
     saveConfigurationInBINFormat() {
         this.store.dispatch(new SaveUserConfigInBinaryFileAction());
     }
+
+    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]);
+    }
 }

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>

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;
+    }
+}

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 = () => {
+    }
+}

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>

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');

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">

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())

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;
         }

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>

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;
             });

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;
         }

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, but can't find it? Please note that USB keyboards send scancodes, not characters to your computer. Then your operating system translates the scancodes to characters according to your current OS keyboard layout. This means that you have to select the US-equivalent character of the desired key in Agent."
+          data-placement="bottom"></icon>
     <capture-keystroke-button (capture)="onKeysCapture($event)" tabindex="0"></capture-keystroke-button>
 </div>
 <div class="modifier-options">

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 {

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>

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;
-}

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

@@ -1,2 +0,0 @@
-export * from './settings.component';
-export * from './settings.routes';

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
-    }
-];

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

@@ -117,14 +117,25 @@
                     </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']">Settings</a>
+                </div>
+            </li>
+            <li class="sidebar__level-2--item">
+                <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                    <a [routerLink]="['/about']">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>

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

@@ -64,6 +64,10 @@ ul {
             display: none;
             cursor: pointer;
         }
+
+        .uhk-icon-agent-icon {
+            margin-left: -3px;
+        }
     }
 
     &__level-2 {
@@ -160,12 +164,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;
         }
     }
 }

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));
     }
 

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>

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;
+}

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;

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>

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;

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({

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();
+    }
+}

packages/uhk-web/src/app/models/ChangeKeymapDescription.ts

@@ -0,0 +1,4 @@
+export interface ChangeKeymapDescription {
+    abbr: string;
+    description: string;
+}

packages/uhk-web/src/app/models/upload-file-data.ts

@@ -0,0 +1,4 @@
+export interface UploadFileData {
+    filename: string;
+    data: Array<number>;
+}

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));

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

@@ -43,7 +43,7 @@ import {
 } from './components/popover/tab';
 import { CaptureKeystrokeButtonComponent } from './components/popover/widgets/capture-keystroke';
 import { IconComponent } from './components/popover/widgets/icon';
-import { SettingsComponent } from './components/settings';
+import { AboutComponent, SettingsComponent } from './components/agent';
 import { SideMenuComponent } from './components/side-menu';
 import { SvgKeyboardComponent } from './components/svg/keyboard';
 import {
@@ -101,6 +101,8 @@ import { UhkDeviceLoadingGuard } from './services/uhk-device-loading.guard';
 import { UhkDeviceLoadedGuard } from './services/uhk-device-loaded.guard';
 import { XtermComponent } from './components/xterm/xterm.component';
 import { SliderWrapperComponent } from './components/slider-wrapper/slider-wrapper.component';
+import { EditableTextComponent } from './components/editable-text/editable-text.component';
+import { Autofocus } from './directives/autofocus/autofocus.directive';
 
 @NgModule({
     declarations: [
@@ -152,6 +154,7 @@ import { SliderWrapperComponent } from './components/slider-wrapper/slider-wrapp
         MacroTextTabComponent,
         MacroNotFoundComponent,
         AddOnComponent,
+        AboutComponent,
         SettingsComponent,
         KeyboardSliderComponent,
         CancelableDirective,
@@ -168,7 +171,9 @@ import { SliderWrapperComponent } from './components/slider-wrapper/slider-wrapp
         ProgressButtonComponent,
         LoadingDevicePageComponent,
         XtermComponent,
-        SliderWrapperComponent
+        SliderWrapperComponent,
+        EditableTextComponent,
+        Autofocus
     ],
     imports: [
         CommonModule,

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

@@ -1,6 +1,6 @@
 import { Action } from '@ngrx/store';
 
-import { AppStartInfo, CommandLineArgs, HardwareConfiguration, Notification, type, VersionInformation } from 'uhk-common';
+import { AppStartInfo, CommandLineArgs, HardwareConfiguration, Notification, type } from 'uhk-common';
 import { ElectronLogEntry } from '../../models/xterm-log';
 
 const PREFIX = '[app] ';
@@ -16,8 +16,8 @@ export const ActionTypes = {
     UNDO_LAST_SUCCESS: type(PREFIX + 'undo last action success'),
     DISMISS_UNDO_NOTIFICATION: type(PREFIX + 'dismiss notification action'),
     LOAD_HARDWARE_CONFIGURATION_SUCCESS: type(PREFIX + 'load hardware configuration success'),
-    UPDATE_AGENT_VERSION_INFORMATION: type(PREFIX + 'update agent version information'),
-    ELECTRON_MAIN_LOG_RECEIVED: type(PREFIX + 'Electron main log received')
+    ELECTRON_MAIN_LOG_RECEIVED: type(PREFIX + 'Electron main log received'),
+    OPEN_URL_IN_NEW_WINDOW: type(PREFIX + 'Open URL in new Window')
 };
 
 export class AppBootsrappedAction implements Action {
@@ -66,18 +66,18 @@ export class LoadHardwareConfigurationSuccessAction implements Action {
     constructor(public payload: HardwareConfiguration) {}
 }
 
-export class UpdateAgentVersionInformationAction implements Action {
-    type = ActionTypes.UPDATE_AGENT_VERSION_INFORMATION;
-
-    constructor(public payload: VersionInformation) {}
-}
-
 export class ElectronMainLogReceivedAction implements Action {
     type = ActionTypes.ELECTRON_MAIN_LOG_RECEIVED;
 
     constructor(public payload: ElectronLogEntry) {}
 }
 
+export class OpenUrlInNewWindowAction implements Action {
+    type = ActionTypes.OPEN_URL_IN_NEW_WINDOW;
+
+    constructor(public payload: string) {}
+}
+
 export type Actions
     = AppStartedAction
     | AppBootsrappedAction
@@ -88,6 +88,6 @@ export type Actions
     | UndoLastSuccessAction
     | DismissUndoNotificationAction
     | LoadHardwareConfigurationSuccessAction
-    | UpdateAgentVersionInformationAction
     | ElectronMainLogReceivedAction
+    | OpenUrlInNewWindowAction
     ;

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

@@ -1,6 +1,7 @@
 import { Action } from '@ngrx/store';
 import { KeyAction, Keymap, Macro } from 'uhk-common';
 import { UndoUserConfigData } from '../../models/undo-user-config-data';
+import { ChangeKeymapDescription } from '../../models/ChangeKeymapDescription';
 
 export type KeymapAction =
     KeymapActions.AddKeymapAction |
@@ -11,7 +12,8 @@ export type KeymapAction =
     KeymapActions.SetDefaultAction |
     KeymapActions.RemoveKeymapAction |
     KeymapActions.SaveKeyAction |
-    KeymapActions.CheckMacroAction;
+    KeymapActions.CheckMacroAction |
+    KeymapActions.EditDescriptionAction;
 
 export namespace KeymapActions {
     export const ADD = '[Keymap] Add keymap';
@@ -98,6 +100,16 @@ export namespace KeymapActions {
         payload: UndoUserConfigData
     };
 
+    export const EDIT_DESCRIPTION = '[Keymap] Edit description';
+
+    export class EditDescriptionAction {
+        type = EDIT_DESCRIPTION;
+
+        constructor(public payload: ChangeKeymapDescription) {
+
+        }
+    }
+
     export function loadKeymaps(): Action {
         return {
             type: KeymapActions.LOAD_KEYMAPS

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

@@ -1,6 +1,7 @@
 import { Action } from '@ngrx/store';
 import { type, UserConfiguration, ConfigurationReply } from 'uhk-common';
 import { UserConfigurationValue } from '../../models/user-configuration-value';
+import { UploadFileData } from '../../models/upload-file-data';
 
 const PREFIX = '[user-config] ';
 
@@ -15,7 +16,9 @@ export const ActionTypes = {
     SAVE_USER_CONFIG_IN_BIN_FILE: type(PREFIX + 'Save User Config in binary file'),
     LOAD_RESET_USER_CONFIGURATION: type(PREFIX + 'Load reset user configuration'),
     RENAME_USER_CONFIGURATION: type(PREFIX + 'Rename user configuration'),
-    SET_USER_CONFIGURATION_VALUE: type(PREFIX + 'Set user configuration value')
+    SET_USER_CONFIGURATION_VALUE: type(PREFIX + 'Set user configuration value'),
+    LOAD_USER_CONFIGURATION_FROM_FILE: type(PREFIX + 'Load user configuration from file'),
+    APPLY_USER_CONFIGURATION_FROM_FILE: type(PREFIX + 'Apply user configuration from file')
 };
 
 export class LoadUserConfigAction implements Action {
@@ -76,6 +79,20 @@ export class SetUserConfigurationValueAction implements Action {
     }
 }
 
+export class LoadUserConfigurationFromFileAction implements Action {
+    type = ActionTypes.LOAD_USER_CONFIGURATION_FROM_FILE;
+
+    constructor(public payload: UploadFileData) {
+    }
+}
+
+export class ApplyUserConfigurationFromFileAction implements Action {
+    type = ActionTypes.APPLY_USER_CONFIGURATION_FROM_FILE;
+
+    constructor(public payload: UserConfiguration) {
+    }
+}
+
 export type Actions
     = LoadUserConfigAction
     | LoadUserConfigSuccessAction
@@ -87,4 +104,6 @@ export type Actions
     | LoadResetUserConfigurationAction
     | RenameUserConfigurationAction
     | SetUserConfigurationValueAction
+    | LoadUserConfigurationFromFileAction
+    | ApplyUserConfigurationFromFileAction
     ;

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

@@ -16,19 +16,15 @@ import {
     ApplyCommandLineArgsAction,
     AppStartedAction,
     DismissUndoNotificationAction,
+    OpenUrlInNewWindowAction,
     ProcessAppStartInfoAction,
     ShowNotificationAction,
-    UndoLastAction,
-    UpdateAgentVersionInformationAction
+    UndoLastAction
 } from '../actions/app';
 import { AppRendererService } from '../../services/app-renderer.service';
 import { AppUpdateRendererService } from '../../services/app-update-renderer.service';
-import {
-    ActionTypes as DeviceActions,
-    ConnectionStateChangedAction,
-    SaveToKeyboardSuccessAction
-} from '../actions/device';
-import { AppState, autoWriteUserConfiguration } from '../index';
+import { ConnectionStateChangedAction } from '../actions/device';
+import { AppState, runningInElectron } from '../index';
 
 @Injectable()
 export class ApplicationEffects {
@@ -66,8 +62,7 @@ export class ApplicationEffects {
                 new ConnectionStateChangedAction({
                     connected: appInfo.deviceConnected,
                     hasPermission: appInfo.hasPermission
-                }),
-                new UpdateAgentVersionInformationAction(appInfo.agentVersionInfo)
+                })
             ];
         });
 
@@ -76,12 +71,16 @@ export class ApplicationEffects {
         .map(action => action.payload)
         .mergeMap((action: Action) => [action, new DismissUndoNotificationAction()]);
 
-    @Effect({dispatch: false}) saveToKeyboardSuccess$ = this.actions$
-        .ofType<SaveToKeyboardSuccessAction>(DeviceActions.SAVE_TO_KEYBOARD_SUCCESS)
-        .withLatestFrom(this.store.select(autoWriteUserConfiguration))
-        .do(([action, autoWriteUserConfig]) => {
-            if (autoWriteUserConfig) {
-                this.appRendererService.exit();
+    @Effect({dispatch: false}) openUrlInNewWindow$ = this.actions$
+        .ofType<OpenUrlInNewWindowAction>(ActionTypes.OPEN_URL_IN_NEW_WINDOW)
+        .withLatestFrom(this.store.select(runningInElectron))
+        .do(([action, inElectron]) => {
+            const url = action.payload;
+
+            if (inElectron) {
+                this.appRendererService.openUrl(url);
+            } else {
+                window.open(url, '_blank');
             }
         });
 

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

@@ -35,10 +35,12 @@ import { ShowNotificationAction } from '../actions/app';
 import { AppState } from '../index';
 import {
     ActionTypes as UserConfigActions,
+    ApplyUserConfigurationFromFileAction,
     LoadConfigFromDeviceAction,
     LoadResetUserConfigurationAction
 } from '../actions/user-config';
 import { DefaultUserConfigurationService } from '../../services/default-user-configuration.service';
+import { DataStorageRepositoryService } from '../../services/datastorage-repository.service';
 
 @Injectable()
 export class DeviceEffects {
@@ -162,8 +164,16 @@ export class DeviceEffects {
         });
 
     @Effect() saveResetUserConfigurationToDevice$ = this.actions$
-        .ofType(UserConfigActions.LOAD_RESET_USER_CONFIGURATION)
-        .switchMap(() => Observable.of(new SaveConfigurationAction()));
+        .ofType<ApplyUserConfigurationFromFileAction
+            | LoadResetUserConfigurationAction>(
+                UserConfigActions.LOAD_RESET_USER_CONFIGURATION,
+                UserConfigActions.APPLY_USER_CONFIGURATION_FROM_FILE)
+        .map(action => action.payload)
+        .switchMap((config: UserConfiguration) => {
+            this.dataStorageRepository.saveConfig(config);
+
+            return Observable.of(new SaveConfigurationAction());
+        });
 
     @Effect({dispatch: false}) updateFirmware$ = this.actions$
         .ofType<UpdateFirmwareAction>(ActionTypes.UPDATE_FIRMWARE)
@@ -193,6 +203,7 @@ export class DeviceEffects {
                 private router: Router,
                 private deviceRendererService: DeviceRendererService,
                 private store: Store<AppState>,
+                private dataStorageRepository: DataStorageRepositoryService,
                 private defaultUserConfigurationService: DefaultUserConfigurationService) {
     }
 

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

@@ -7,14 +7,17 @@ import { Observable } from 'rxjs/Observable';
 
 import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/pairwise';
 import 'rxjs/add/operator/startWith';
 import 'rxjs/add/operator/switchMap';
 import 'rxjs/add/operator/withLatestFrom';
 import 'rxjs/add/observable/of';
 
 import { Keymap } from 'uhk-common';
+import { findNewItem } from '../../util';
 import { KeymapActions } from '../actions';
 import { AppState } from '../index';
+import { getKeymaps } from '../reducers/user-configuration';
 
 @Injectable()
 export class KeymapEffects {
@@ -32,10 +35,10 @@ export class KeymapEffects {
 
     @Effect({ dispatch: false }) addOrDuplicate$: any = this.actions$
         .ofType(KeymapActions.ADD, KeymapActions.DUPLICATE)
-        .withLatestFrom(this.store)
-        .map(latest => latest[1].userConfiguration.keymaps)
-        .do(keymaps => {
-            this.router.navigate(['/keymap', keymaps[keymaps.length - 1].abbreviation]);
+        .withLatestFrom(this.store.let(getKeymaps()).pairwise(), (action, latest) => latest)
+        .do(([prevKeymaps, newKeymaps]) => {
+            const newKeymap = findNewItem(prevKeymaps, newKeymaps);
+            this.router.navigate(['/keymap', newKeymap.abbreviation]);
         });
 
     @Effect({ dispatch: false }) remove$: any = this.actions$

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

@@ -2,14 +2,18 @@ import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 
 import { Actions, Effect } from '@ngrx/effects';
-import { Store } from '@ngrx/store';
+import { Store, Action } from '@ngrx/store';
 
 import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/pairwise';
 import 'rxjs/add/operator/withLatestFrom';
 
+import { Macro } from 'uhk-common';
 import { KeymapActions, MacroActions } from '../actions';
 import { AppState } from '../index';
+import { getMacros } from '../reducers/user-configuration';
+import { findNewItem } from '../../util';
 
 @Injectable()
 export class MacroEffects {
@@ -27,23 +31,17 @@ export class MacroEffects {
             }
         });
 
-    @Effect({ dispatch: false }) add$: any = this.actions$
-        .ofType(MacroActions.ADD)
-        .withLatestFrom(this.store)
-        .map(([action, state]) => state.userConfiguration.macros)
-        .map(macros => macros[macros.length - 1])
-        .do(lastMacro => {
-            this.router.navigate(['/macro', lastMacro.id, 'new']);
+    @Effect({ dispatch: false }) addOrDuplicate$: any = this.actions$
+        .ofType(MacroActions.ADD, MacroActions.DUPLICATE)
+        .withLatestFrom(this.store.let(getMacros()).pairwise(), (action, latest) => ([action, latest[0], latest[1]]))
+        .do(([action, prevMacros, newMacros]: [Action, Macro[], Macro[]]) => {
+            const newMacro = findNewItem(prevMacros, newMacros);
+            const commands = ['/macro', newMacro.id];
+            if (action.type === MacroActions.ADD) {
+                commands.push('new');
+            }
+            this.router.navigate(commands);
         });
 
-    @Effect({ dispatch: false }) duplicate: any = this.actions$
-        .ofType(MacroActions.DUPLICATE)
-        .withLatestFrom(this.store)
-        .map(([action, state]) => state.userConfiguration.macros)
-        .map(macros => macros[macros.length - 1])
-        .do(lastMacro => {
-            this.router.navigate(['/macro', lastMacro.id]);
-        });
-
-    constructor(private actions$: Actions, private router: Router, private store: Store<AppState>) {}
+    constructor(private actions$: Actions, private router: Router, private store: Store<AppState>) { }
 }

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

@@ -15,26 +15,38 @@ import 'rxjs/add/observable/of';
 import 'rxjs/add/observable/empty';
 
 import {
-    ConfigurationReply, HardwareConfiguration, LogService, NotificationType, UhkBuffer,
+    ConfigurationReply,
+    HardwareConfiguration,
+    LogService,
+    NotificationType,
+    UhkBuffer,
     UserConfiguration
 } from 'uhk-common';
 
 import {
-    ActionTypes, LoadConfigFromDeviceReplyAction, LoadUserConfigSuccessAction, RenameUserConfigurationAction,
+    ActionTypes,
+    ApplyUserConfigurationFromFileAction,
+    LoadConfigFromDeviceReplyAction,
+    LoadUserConfigSuccessAction,
+    LoadUserConfigurationFromFileAction,
+    RenameUserConfigurationAction,
     SaveUserConfigSuccessAction
 } from '../actions/user-config';
 
 import { DataStorageRepositoryService } from '../../services/datastorage-repository.service';
 import { DefaultUserConfigurationService } from '../../services/default-user-configuration.service';
-import { AppState, autoWriteUserConfiguration, getPrevUserConfiguration, getUserConfiguration } from '../index';
+import { AppState, getPrevUserConfiguration, getUserConfiguration } from '../index';
 import { KeymapAction, KeymapActions, MacroAction, MacroActions } from '../actions';
 import {
-    DismissUndoNotificationAction, LoadHardwareConfigurationSuccessAction, ShowNotificationAction,
+    DismissUndoNotificationAction,
+    LoadHardwareConfigurationSuccessAction,
+    ShowNotificationAction,
     UndoLastAction
 } from '../actions/app';
-import { SaveConfigurationAction, ShowSaveToKeyboardButtonAction } from '../actions/device';
+import { ShowSaveToKeyboardButtonAction } from '../actions/device';
 import { DeviceRendererService } from '../../services/device-renderer.service';
 import { UndoUserConfigData } from '../../models/undo-user-config-data';
+import { UploadFileData } from '../../models/upload-file-data';
 
 @Injectable()
 export class UserConfigEffects {
@@ -69,7 +81,7 @@ export class UserConfigEffects {
     @Effect() saveUserConfig$: Observable<Action> = (this.actions$
         .ofType(
             KeymapActions.ADD, KeymapActions.DUPLICATE, KeymapActions.EDIT_NAME, KeymapActions.EDIT_ABBR,
-            KeymapActions.SET_DEFAULT, KeymapActions.REMOVE, KeymapActions.SAVE_KEY,
+            KeymapActions.SET_DEFAULT, KeymapActions.REMOVE, KeymapActions.SAVE_KEY, KeymapActions.EDIT_DESCRIPTION,
             MacroActions.ADD, MacroActions.DUPLICATE, MacroActions.EDIT_NAME, MacroActions.REMOVE, MacroActions.ADD_ACTION,
             MacroActions.SAVE_ACTION, MacroActions.DELETE_ACTION, MacroActions.REORDER_ACTION,
             ActionTypes.RENAME_USER_CONFIGURATION, ActionTypes.SET_USER_CONFIGURATION_VALUE) as
@@ -185,16 +197,34 @@ export class UserConfigEffects {
             saveAs(blob, 'UserConfiguration.bin');
         });
 
-    @Effect() loadUserConfigurationSuccess$ = this.actions$
-        .ofType(ActionTypes.LOAD_USER_CONFIG_SUCCESS)
-        .withLatestFrom(this.store.select(autoWriteUserConfiguration))
-        .switchMap(([action, autoWriteUserConfig]) => {
-            this.logService.debug('[UserConfigEffect] LOAD_USER_CONFIG_SUCCESS', {autoWriteUserConfig});
-            if (autoWriteUserConfig) {
-                return Observable.of(new SaveConfigurationAction());
-            }
-            else {
-                return Observable.empty();
+    @Effect() loadUserConfigurationFromFile$ = this.actions$
+        .ofType<LoadUserConfigurationFromFileAction>(ActionTypes.LOAD_USER_CONFIGURATION_FROM_FILE)
+        .map(action => action.payload)
+        .map((info: UploadFileData) => {
+            try {
+                const userConfig = new UserConfiguration();
+
+                if (info.filename.endsWith('.bin')) {
+                    userConfig.fromBinary(UhkBuffer.fromArray(info.data));
+                } else {
+                    const buffer = new Buffer(info.data);
+                    const json = buffer.toString();
+                    userConfig.fromJsonObject(JSON.parse(json));
+                }
+
+                if (userConfig.userConfigMajorVersion) {
+                    return new ApplyUserConfigurationFromFileAction(userConfig);
+                }
+
+                return new ShowNotificationAction({
+                    type: NotificationType.Error,
+                    message: 'Invalid configuration specified.'
+                });
+            } catch (err) {
+                return new ShowNotificationAction({
+                    type: NotificationType.Error,
+                    message: 'Invalid configuration specified.'
+                });
             }
         });
 

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

@@ -39,11 +39,11 @@ export const metaReducers: MetaReducer<AppState>[] = environment.production
     : [storeFreeze];
 
 export const getUserConfiguration = (state: AppState) => state.userConfiguration;
-export const getDeviceName = (state: AppState) => state.userConfiguration.deviceName;
+export const getDeviceName = createSelector(getUserConfiguration, fromUserConfig.getDeviceName);
 
 export const appState = (state: AppState) => state.app;
+
 export const showAddonMenu = createSelector(appState, fromApp.showAddonMenu);
-export const autoWriteUserConfiguration = createSelector(appState, fromApp.autoWriteUserConfiguration);
 export const getUndoableNotification = createSelector(appState, fromApp.getUndoableNotification);
 export const getPrevUserConfiguration = createSelector(appState, fromApp.getPrevUserConfiguration);
 export const runningInElectron = createSelector(appState, fromApp.runningInElectron);

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

@@ -7,11 +7,11 @@ import { ActionTypes, ShowNotificationAction } from '../actions/app';
 import { ActionTypes as UserConfigActionTypes } from '../actions/user-config';
 import { ActionTypes as DeviceActionTypes } from '../actions/device';
 import { KeyboardLayout } from '../../keyboard/keyboard-layout.enum';
+import { getVersions } from '../../util';
 
 export interface State {
     started: boolean;
     showAddonMenu: boolean;
-    autoWriteUserConfiguration: boolean;
     undoableNotification?: Notification;
     navigationCountAfterNotification: number;
     prevUserConfig?: UserConfiguration;
@@ -24,10 +24,10 @@ export interface State {
 export const initialState: State = {
     started: false,
     showAddonMenu: false,
-    autoWriteUserConfiguration: false,
     navigationCountAfterNotification: 0,
     runningInElectron: runInElectron(),
-    configLoading: true
+    configLoading: true,
+    agentVersionInfo: getVersions()
 };
 
 export function reducer(state = initialState, action: Action & { payload: any }) {
@@ -42,8 +42,7 @@ export function reducer(state = initialState, action: Action & { payload: any })
         case ActionTypes.APPLY_COMMAND_LINE_ARGS: {
             return {
                 ...state,
-                showAddonMenu: action.payload.addons,
-                autoWriteUserConfiguration: action.payload.autoWriteConfig
+                showAddonMenu: action.payload.addons
             };
         }
 
@@ -116,18 +115,12 @@ export function reducer(state = initialState, action: Action & { payload: any })
             };
         }
 
-        case ActionTypes.UPDATE_AGENT_VERSION_INFORMATION:
-            return {
-                ...state,
-                agentVersionInfo: action.payload
-            };
         default:
             return state;
     }
 }
 
 export const showAddonMenu = (state: State) => state.showAddonMenu;
-export const autoWriteUserConfiguration = (state: State) => state.autoWriteUserConfiguration;
 export const getUndoableNotification = (state: State) => state.undoableNotification;
 export const getPrevUserConfiguration = (state: State) => state.prevUserConfig;
 export const runningInElectron = (state: State) => state.runningInElectron;

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

@@ -7,7 +7,7 @@ export const initialState: Keymap[] = [];
 export function reducer(state = initialState, action: KeymapAction): Keymap[] {
     switch (action.type) {
         case KeymapActions.LOAD_KEYMAPS_SUCCESS: {
-            return action.payload;
+            return (action as KeymapActions.LoadKeymapSuccessAction).payload ;
         }
 
         default:

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

@@ -4,10 +4,22 @@ import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/map';
 
-import { KeyAction, Keymap, KeyActionHelper, Layer, Macro, Module, SwitchLayerAction, UserConfiguration } from 'uhk-common';
+import {
+    KeyAction,
+    KeyActionHelper,
+    Keymap,
+    Layer,
+    Macro,
+    Module,
+    NoneAction,
+    PlayMacroAction,
+    SwitchLayerAction,
+    UserConfiguration
+} from 'uhk-common';
 import { KeymapActions, MacroActions } from '../actions';
 import { AppState } from '../index';
 import { ActionTypes } from '../actions/user-config';
+import { isValidName } from '../../util';
 
 export const initialState: UserConfiguration = new UserConfiguration();
 
@@ -15,9 +27,15 @@ export function reducer(state = initialState, action: Action & { payload?: any }
     const changedUserConfiguration: UserConfiguration = Object.assign(new UserConfiguration(), state);
 
     switch (action.type) {
+        case ActionTypes.APPLY_USER_CONFIGURATION_FROM_FILE:
         case ActionTypes.LOAD_RESET_USER_CONFIGURATION:
         case ActionTypes.LOAD_USER_CONFIG_SUCCESS: {
-            return Object.assign(changedUserConfiguration, action.payload);
+            Object.assign(changedUserConfiguration, action.payload);
+            changedUserConfiguration.keymaps = [...changedUserConfiguration.keymaps];
+            changedUserConfiguration.keymaps.sort((first: Keymap, second: Keymap) => first.name.localeCompare(second.name));
+            changedUserConfiguration.macros = [...changedUserConfiguration.macros];
+            changedUserConfiguration.macros.sort((first: Macro, second: Macro) => first.name.localeCompare(second.name));
+            return changedUserConfiguration;
         }
 
         case KeymapActions.ADD:
@@ -27,25 +45,36 @@ export function reducer(state = initialState, action: Action & { payload?: any }
             newKeymap.name = generateName(state.keymaps, newKeymap.name);
             newKeymap.isDefault = (state.keymaps.length === 0);
 
-            changedUserConfiguration.keymaps = state.keymaps.concat(newKeymap);
+            changedUserConfiguration.keymaps = insertItemInNameOrder(state.keymaps, newKeymap);
             break;
         }
         case KeymapActions.EDIT_NAME: {
-            const name: string = action.payload.name;
+            if (!isValidName(action.payload.name)) {
+                break;
+            }
+
+            const name: string = action.payload.name.trim();
+            let keymapToRename: Keymap = null;
 
             const duplicate = state.keymaps.some((keymap: Keymap) => {
+                if (keymap.abbreviation === action.payload.abbr) {
+                    keymapToRename = keymap;
+                }
+
                 return keymap.name === name && keymap.abbreviation !== action.payload.abbr;
             });
 
-            changedUserConfiguration.keymaps = state.keymaps.map((keymap: Keymap) => {
-                keymap = Object.assign(new Keymap(), keymap);
+            if (duplicate) {
+                break;
+            }
 
-                if (!duplicate && keymap.abbreviation === action.payload.abbr) {
-                    keymap.name = name;
-                }
-                return keymap;
-            });
+            const newKeymap = Object.assign(new Keymap(), keymapToRename, { name });
 
+            changedUserConfiguration.keymaps = insertItemInNameOrder(
+                state.keymaps,
+                newKeymap,
+                keymap => keymap.abbreviation !== newKeymap.abbreviation
+            );
             break;
         }
         case KeymapActions.EDIT_ABBR: {
@@ -157,7 +186,7 @@ export function reducer(state = initialState, action: Action & { payload?: any }
             newMacro.isPrivate = true;
             newMacro.macroActions = [];
 
-            changedUserConfiguration.macros = state.macros.concat(newMacro);
+            changedUserConfiguration.macros = insertItemInNameOrder(state.macros, newMacro);
             break;
         }
         case MacroActions.DUPLICATE: {
@@ -165,30 +194,61 @@ export function reducer(state = initialState, action: Action & { payload?: any }
             newMacro.name = generateName(state.macros, newMacro.name);
             newMacro.id = generateMacroId(state.macros);
 
-            changedUserConfiguration.macros = state.macros.concat(newMacro);
+            changedUserConfiguration.macros = insertItemInNameOrder(state.macros, newMacro);
             break;
         }
         case MacroActions.EDIT_NAME: {
-            const name: string = action.payload.name;
+            if (!isValidName(action.payload.name)) {
+                break;
+            }
+
+            const name: string = action.payload.name.trim();
+            let macroToRename: Macro = null;
 
             const duplicate = state.macros.some((macro: Macro) => {
+                if (macro.id === action.payload.id) {
+                   macroToRename = macro;
+                }
+
                 return macro.id !== action.payload.id && macro.name === name;
             });
 
-            changedUserConfiguration.macros = state.macros.map((macro: Macro) => {
-                macro = Object.assign(new Macro(), macro);
-                if (!duplicate && macro.id === action.payload.id) {
-                    macro.name = name;
-                }
-
-                return macro;
-            });
+            if (duplicate) {
+                break;
+            }
 
+            const newMacro = Object.assign(new Macro(), macroToRename, { name });
+            changedUserConfiguration.macros = insertItemInNameOrder(state.macros, newMacro, macro => macro.id !== newMacro.id);
             break;
         }
+
         case MacroActions.REMOVE:
-            changedUserConfiguration.macros = state.macros.filter((macro: Macro) => macro.id !== action.payload);
+            const macroId = action.payload;
+            changedUserConfiguration.macros = state.macros.filter((macro: Macro) => macro.id !== macroId);
+
+            for (let k = 0; k < changedUserConfiguration.keymaps.length; k++) {
+                const keymap = changedUserConfiguration.keymaps[k];
+                let hasChanges = false;
+
+                for (const layer of  keymap.layers) {
+                    for (const module of layer.modules) {
+                        for (let ka = 0; ka < module.keyActions.length; ka++) {
+                            const keyAction = module.keyActions[ka];
+
+                            if (keyAction instanceof PlayMacroAction && keyAction.macroId === macroId) {
+                                hasChanges = true;
+                                module.keyActions[ka] = new NoneAction();
+                            }
+                        }
+                    }
+                }
+
+                if (hasChanges) {
+                    changedUserConfiguration.keymaps[k] = new Keymap(keymap);
+                }
+            }
             break;
+
         case MacroActions.ADD_ACTION:
             changedUserConfiguration.macros = state.macros.map((macro: Macro) => {
                 if (macro.id === action.payload.id) {
@@ -242,7 +302,9 @@ export function reducer(state = initialState, action: Action & { payload?: any }
             break;
 
         case ActionTypes.RENAME_USER_CONFIGURATION: {
-            changedUserConfiguration.deviceName = action.payload;
+            if (isValidName(action.payload)) {
+                changedUserConfiguration.deviceName = action.payload.trim();
+            }
             break;
         }
 
@@ -251,6 +313,18 @@ export function reducer(state = initialState, action: Action & { payload?: any }
             break;
         }
 
+        case KeymapActions.EDIT_DESCRIPTION: {
+            const data = (action as KeymapActions.EditDescriptionAction).payload;
+
+            changedUserConfiguration.keymaps = state.keymaps.map(keymap => {
+                if (keymap.abbreviation === data.abbr) {
+                    keymap.description = data.description;
+                }
+                return keymap;
+            });
+            break;
+        }
+
         default:
             break;
     }
@@ -348,6 +422,27 @@ function generateMacroId(macros: Macro[]) {
     return newId + 1;
 }
 
+function insertItemInNameOrder<T extends { name: string }>(
+    items: T[], newItem: T, keepItem: (item: T) => boolean = () => true
+): T[] {
+    const newItems: T[] = [];
+    let added = false;
+    for (const item of items) {
+        if (!added && item.name.localeCompare(newItem.name) > 0) {
+            newItems.push(newItem);
+            added = true;
+        }
+        if (keepItem(item)) {
+            newItems.push(item);
+        }
+    }
+    if (!added) {
+        newItems.push(newItem);
+    }
+
+    return newItems;
+}
+
 function checkExistence(layers: Layer[], property: string, value: any): Layer[] {
     const keyActionsToClear: {
         layerIdx: number,
@@ -399,3 +494,5 @@ function setKeyActionToLayer(newLayer: Layer, moduleIndex: number, keyIndex: num
     newModule.keyActions = newModule.keyActions.slice();
     newModule.keyActions[keyIndex] = newKeyAction;
 }
+
+export const getDeviceName = (state: UserConfiguration) => state.deviceName;

packages/uhk-web/src/app/util/find-new-item.ts

@@ -0,0 +1,9 @@
+export function findNewItem<T>(oldItems: T[], newItems: T[]): T {
+    for (let i = 0; i < oldItems.length; ++i) {
+        if (oldItems[i] !== newItems[i]) {
+            return newItems[i];
+        }
+    }
+
+    return newItems[newItems.length - 1];
+}

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

@@ -1 +1,4 @@
+export * from './find-new-item';
 export * from './html-helper';
+export * from './validators';
+export * from './version-helper';

packages/uhk-web/src/app/util/validators.ts

@@ -0,0 +1,3 @@
+export function isValidName(name: string): boolean {
+    return name && name.trim().length > 0;
+}

packages/uhk-web/src/app/util/version-helper.ts

@@ -0,0 +1,22 @@
+import { VersionInformation } from 'uhk-common';
+
+const collectVersions = (): VersionInformation => {
+    const pkgJson = require('../../../../../package.json');
+    return {
+        version: pkgJson['version'],
+        firmwareVersion: pkgJson['firmwareVersion'],
+        deviceProtocolVersion: pkgJson['deviceProtocolVersion'],
+        moduleProtocolVersion: pkgJson['moduleProtocolVersion'],
+        userConfigVersion: pkgJson['userConfigVersion'],
+        hardwareConfigVersion: pkgJson['hardwareConfigVersion']
+    };
+};
+
+let versions: VersionInformation;
+
+export const getVersions = (): VersionInformation => {
+    if (!versions) {
+        versions = collectVersions();
+    }
+    return versions;
+};

packages/uhk-web/src/devices/uhk60-right/device.json

@@ -4,5 +4,72 @@
     "description": "Right UHK60 keyboard half",
     "slot": "right-half",
     "keyCount": 35,
-    "pointerCount": 0
+    "pointerCount": 0,
+    "keyAssignmentOrder": [
+        [1, 2],
+        [1, 3],
+        [1, 4],
+        [1, 5],
+        [1, 6],
+        [1, 7],
+        [0, 1],
+        [0, 2],
+        [0, 3],
+        [0, 4],
+        [0, 5],
+        [0, 6],
+        [0, 7],
+        [1, 1],
+        [1, 8],
+        [1, 9],
+        [1, 10],
+        [1, 11],
+        [1, 12],
+        [1, 14],
+        [0, 15],
+        [0, 8],
+        [0, 9],
+        [0, 10],
+        [0, 11],
+        [0, 12],
+        [0, 13],
+        [0, 14],
+        [1, 15],
+        [1, 16],
+        [1, 17],
+        [1, 18],
+        [1, 19],
+        [1, 21],
+        [0, 22],
+        [0, 16],
+        [0, 17],
+        [0, 18],
+        [0, 19],
+        [0, 20],
+        [0, 21],
+        [1, 22],
+        [1, 24],
+        [1, 25],
+        [1, 26],
+        [1, 27],
+        [1, 28],
+        [0, 23],
+        [0, 24],
+        [0, 25],
+        [0, 26],
+        [0, 27],
+        [0, 28],
+        [1, 29],
+        [1, 30],
+        [1, 31],
+        [1, 32],
+        [1, 34],
+        [0, 30],
+        [0, 32],
+        [0, 33],
+        [0, 34],
+        [0, 35],
+        [1, 33],
+        [0, 31]
+    ]
 }

packages/uhk-web/src/styles.scss

@@ -94,3 +94,24 @@ a.disabled {
 .noUi-value {
     top: 2rem;
 }
+
+.btn-file {
+    position: relative;
+    overflow: hidden;
+
+    input[type=file] {
+        position: absolute;
+        top: 0;
+        right: 0;
+        min-width: 100%;
+        min-height: 100%;
+        font-size: 100px;
+        text-align: right;
+        filter: alpha(opacity=0);
+        opacity: 0;
+        outline: none;
+        background: white;
+        cursor: inherit;
+        display: block;
+    }
+}

packages/uhk-web/src/styles/uhk-icons/uhk-css.svg

@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><svg width="16" height="16" viewBox="0 0 16 16" id="icon-0401-usb-stick" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 2a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-.5-.5zM8.5 2a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-.5-.5z"/><path d="M11.5 5H11V.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0-.5.5V5h-.5a.5.5 0 0 0-.5.5v9.375c1 1.5 8 1.5 9 0V5.5a.5.5 0 0 0-.5-.5zM5 13.5a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 1 0v6zM10 5H5V1h5v4z"/></svg></svg>
+<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="31" height="16" viewBox="0 0 31 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><svg width="16" height="16" viewBox="0 0 16 16" id="icon-0401-usb-stick" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 2a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-.5-.5zM8.5 2a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-.5-.5z"/><path d="M11.5 5H11V.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0-.5.5V5h-.5a.5.5 0 0 0-.5.5v9.375c1 1.5 8 1.5 9 0V5.5a.5.5 0 0 0-.5-.5zM5 13.5a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 1 0v6zM10 5H5V1h5v4z"/></svg><svg width="15" height="15" viewBox="0 0 15 15" id="icon-agent-icon" x="16" xmlns="http://www.w3.org/2000/svg"><path fill="#333" d="M3 0C1.338 0 0 1.338 0 3v9c0 1.662 1.338 3 3 3h9c1.662 0 3-1.338 3-3V3c0-1.662-1.338-3-3-3H3zM1.375 3.75a.36.36 0 0 1 .125 0H6c.375 0 .75.375.75.375s.375.375.75.375.75-.375.75-.375.375-.375.75-.375h4.5c.75 0 .75.75.75.75V6c0 2.25-1.5 2.25-1.5 2.25H9c-.375 0-.75-1.125-.75-1.125S7.875 6 7.5 6s-.75 1.125-.75 1.125S6.375 8.25 6 8.25H2.25S.75 8.25.75 6V4.5c0-.562.414-.715.625-.75z"/></svg></svg>

packages/uhk-web/src/styles/uhk-icons/uhk-icon.scss

@@ -6,3 +6,8 @@
     @extend %svg-common;
     background-position: 0 0;
 }
+
+.uhk-icon-agent-icon {
+    @extend %svg-common;
+    background-position: 100% 0;
+}

packages/uhk-web/src/svgs/icons/agent-icon.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="15px" height="15px" viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve">
+<path fill="#333333" d="M3,0C1.338,0,0,1.338,0,3v9c0,1.662,1.338,3,3,3h9c1.662,0,3-1.338,3-3V3c0-1.662-1.338-3-3-3H3z
+	 M1.375,3.75c0.07-0.012,0.125,0,0.125,0H6c0.375,0,0.75,0.375,0.75,0.375S7.125,4.5,7.5,4.5s0.75-0.375,0.75-0.375
+	S8.625,3.75,9,3.75h4.5c0.75,0,0.75,0.75,0.75,0.75V6c0,2.25-1.5,2.25-1.5,2.25H9c-0.375,0-0.75-1.125-0.75-1.125S7.875,6,7.5,6
+	S6.75,7.125,6.75,7.125S6.375,8.25,6,8.25H2.25c0,0-1.5,0-1.5-2.25V4.5C0.75,3.938,1.164,3.785,1.375,3.75z"/>
+</svg>

packages/uhk-web/test/user-config-helper.ts

@@ -1,4 +1,4 @@
-import { cloneDeep } from 'lodash';
+import cloneDeep from 'lodash-es/cloneDeep';
 
 const defaultUserConfig = {
     userConfigMajorVersion: 3,

packages/usb/get-i2c-baud-rate.js

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+const uhk = require('./uhk');
+const device = uhk.getUhkDevice();
+
+(async function() {
+    let response = await uhk.writeDevice(device, [uhk.usbCommands.getDeviceProperty, uhk.devicePropertyIds.i2cBaudRate]);
+    let requestedBaudRate = uhk.getUint32(response, 2);
+    let actualBaudRate = uhk.getUint32(response, 6);
+    let i2c0F = response[1].toString(2).padStart(8, '0');
+    console.log(`requestedBaudRate:${requestedBaudRate} | actualBaudRate:${actualBaudRate} | I2C0_F:0b${i2c0F}`)
+})();

packages/usb/get-i2c-health.js

@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+const process = require('process');
+const uhk = require('./uhk');
+
+function slaveI2cErrorBufferToString(buffer, slaveId) {
+    let statusCount = buffer[1];
+
+    const slaveIdToName = [
+        'leftHalf',
+        'leftAddon',
+        'rightAddon',
+        'rightLedDriver',
+        'leftLedDriver',
+        'kboot',
+    ];
+
+    let str = `${slaveIdToName[slaveId].padEnd(14)}: `;
+
+    const statusCodesToStrings = {
+        0: 'nak',
+        1: 'failure',
+        1100: 'busy',
+        1101: 'idle',
+        1102: 'nak',
+        1103: 'arbitrationLost',
+        1104: 'timeout',
+        20000: 'idleSlave',
+        20001: 'idleCycle',
+    };
+
+    for (let i=0; i<statusCount; i++) {
+        let status = uhk.getUint32(buffer, i*8+2);
+        let count = uhk.getUint32(buffer, i*8+4+2);
+        str += `${statusCodesToStrings[status]}:${count} `;
+    }
+
+    return str;
+}
+
+function convertMs(milliseconds) {
+    let days, hours, minutes, seconds;
+    seconds = Math.floor(milliseconds / 1000);
+    minutes = Math.floor(seconds / 60);
+    seconds = seconds % 60;
+    hours = Math.floor(minutes / 60);
+    minutes = minutes % 60;
+    days = Math.floor(hours / 24);
+    hours = hours % 24;
+    return {days, hours, minutes, seconds};
+}
+
+const device = uhk.getUhkDevice();
+
+device.write(uhk.getTransferData(new Buffer([uhk.usbCommands.getDeviceProperty, uhk.devicePropertyIds.uptime])));
+let response = device.readSync();
+let uptimeMs = uhk.getUint32(response, 1);
+let uptime = convertMs(uptimeMs);
+console.log(`uptime: ${uptime.days}d ${String(uptime.hours).padStart(2, '0')}:${String(uptime.minutes).padStart(2, '0')}:${String(uptime.seconds).padStart(2, '0')}`)
+
+device.write(uhk.getTransferData(new Buffer([uhk.usbCommands.getDeviceProperty, uhk.devicePropertyIds.i2cBaudRate])));
+response = device.readSync();
+let requestedBaudRate = uhk.getUint32(response, 2);
+let actualBaudRate = uhk.getUint32(response, 6);
+console.log(`requestedBaudRate:${requestedBaudRate} | actualBaudRate:${actualBaudRate} | I2C0_F:0b${response[1].toString(2).padStart(8, '0')}`)
+
+for (let slaveId=0; slaveId<6; slaveId++) {
+    device.write(uhk.getTransferData(new Buffer([uhk.usbCommands.getSlaveI2cErrors, slaveId])));
+    let response = Buffer.from(device.readSync());
+    let str = slaveI2cErrorBufferToString(response, slaveId);
+    console.log(str);
+}

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

@@ -2,15 +2,17 @@
 const uhk = require('./uhk');
 
 const device = uhk.getUhkDevice();
-const sendData = new Buffer([uhk.usbCommands.getModuleProperty, uhk.modulePropertyIds.protocolVersions]);
-console.log(sendData)
+const sendData = new Buffer([uhk.usbCommands.getModuleProperty, uhk.moduleSlotToId.leftHalf, uhk.modulePropertyIds.protocolVersions]);
+//console.log(sendData)
 device.write(uhk.getTransferData(sendData));
 const response = Buffer.from(device.readSync());
-console.log(response)
-const firmwareMajorVersion = response[7] + (response[8]<<8);
-const firmwareMinorVersion = response[9] + (response[10]<<8);
-const firmwarePatchVersion = response[11] + (response[12]<<8);
+//console.log(response)
+const moduleProtocolMajorVersion = uhk.getUint16(response, 2);
+const moduleProtocolMinorVersion = uhk.getUint16(response, 4);
+const moduleProtocolPatchVersion = uhk.getUint16(response, 6);
+const firmwareMajorVersion = uhk.getUint16(response, 8);
+const firmwareMinorVersion = uhk.getUint16(response, 10);
+const firmwarePatchVersion = uhk.getUint16(response, 12);
 
-console.log(`firmwareMajorVersion: ${firmwareMajorVersion}`);
-console.log(`firmwareMinorVersion: ${firmwareMinorVersion}`);
-console.log(`firmwarePatchVersion: ${firmwarePatchVersion}`);
+console.log(`moduleProtocolVersion: ${moduleProtocolMajorVersion}.${moduleProtocolMinorVersion}.${moduleProtocolPatchVersion}`);
+console.log(`firmwareVersion: ${firmwareMajorVersion}.${firmwareMinorVersion}.${firmwarePatchVersion}`);

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

@@ -3,13 +3,12 @@ const uhk = require('./uhk');
 
 const device = uhk.getUhkDevice();
 const sendData = new Buffer([uhk.usbCommands.getDeviceProperty, uhk.devicePropertyIds.protocolVersions]);
+//console.log(sendData)
 device.write(uhk.getTransferData(sendData));
 const response = Buffer.from(device.readSync());
+//console.log(response)
+const firmwareMajorVersion = uhk.getUint16(response, 1);
+const firmwareMinorVersion = uhk.getUint16(response, 3);
+const firmwarePatchVersion = uhk.getUint16(response, 5);
 
-const firmwareMajorVersion = response[1] + (response[2]<<8);
-const firmwareMinorVersion = response[3] + (response[4]<<8);
-const firmwarePatchVersion = response[5] + (response[6]<<8);
-
-console.log(`firmwareMajorVersion: ${firmwareMajorVersion}`);
-console.log(`firmwareMinorVersion: ${firmwareMinorVersion}`);
-console.log(`firmwarePatchVersion: ${firmwarePatchVersion}`);
+console.log(`firmwareVersion: ${firmwareMajorVersion}.${firmwareMinorVersion}.${firmwarePatchVersion}`);

packages/usb/get-slave-i2c-errors.js

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+const process = require('process');
+const uhk = require('./uhk');
+
+const slaveId = parseInt(process.argv[2]);
+
+const device = uhk.getUhkDevice();
+const sendData = new Buffer([uhk.usbCommands.getSlaveI2cErrors, slaveId]);
+device.write(uhk.getTransferData(sendData));
+const response = Buffer.from(device.readSync());
+
+//console.log(response);
+let status = response[0];
+
+if (status != 0) {
+    console.log('Invalid slave id');
+    process.exit(1);
+}
+
+function slaveI2cErrorBufferToString(buffer) {
+    let statusCount = buffer[1];
+
+    const slaveIdToName = [
+        'leftHalf',
+        'leftAddon',
+        'rightAddon',
+        'rightLedDriver',
+        'leftLedDriver',
+        'kboot',
+    ];
+
+    let str = `${slaveIdToName[slaveId].padEnd(14)}: `;
+
+    const statusCodesToStrings = {
+        0: 'nak',
+        1: 'failure',
+        1100: 'busy',
+        1101: 'idle',
+        1102: 'nak',
+        1103: 'arbitrationLost',
+        1104: 'timeout',
+        20000: 'idleSlave',
+        20001: 'idleCycle',
+    };
+
+    for (let i=0; i<statusCount; i++) {
+        let status = uhk.getUint32(buffer, i*8+2);
+        let count = uhk.getUint32(buffer, i*8+4+2);
+        str += `${statusCodesToStrings[status]}:${count} `;
+    }
+
+    return str;
+}
+
+let str = slaveI2cErrorBufferToString(response);
+console.log(str);

packages/usb/get-uptime.js

@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+const path = require('path');
+const uhk = require('./uhk');
+const device = uhk.getUhkDevice();
+
+function convertMs(milliseconds) {
+    let days, hours, minutes, seconds;
+    seconds = Math.floor(milliseconds / 1000);
+    minutes = Math.floor(seconds / 60);
+    seconds = seconds % 60;
+    hours = Math.floor(minutes / 60);
+    minutes = minutes % 60;
+    days = Math.floor(hours / 24);
+    hours = hours % 24;
+    return {days, hours, minutes, seconds};
+}
+
+let buffer = new Buffer([uhk.usbCommands.getDeviceProperty, uhk.devicePropertyIds.uptime]);
+//console.log(buffer);
+device.write(uhk.getTransferData(buffer));
+let response = device.readSync();
+//console.log(Buffer.from(response));
+let uptimeMs = uhk.getUint32(response, 1);
+let uptime = convertMs(uptimeMs);
+console.log(`Uptime: ${uptime.days}d ${String(uptime.hours).padStart(2, '0')}:${String(uptime.minutes).padStart(2, '0')}:${String(uptime.seconds).padStart(2, '0')}`)

packages/usb/jump-to-module-bootloader.js

@@ -9,6 +9,7 @@ program
 const moduleSlot = program.args[0];
 const moduleSlotId = uhk.checkModuleSlot(moduleSlot, uhk.moduleSlotToId);
 const device = uhk.getUhkDevice();
-let transfer = new Buffer([uhk.usbCommands.jumpToModuleBootloader, moduleSlotId]);
-device.write(uhk.getTransferData(transfer));
-const response = Buffer.from(device.readSync());
+
+(async function() {
+    await uhk.jumpToModuleBootloader(device, moduleSlotId);
+})();

packages/usb/log-i2c-errors.sh

@@ -0,0 +1,10 @@
+#!/usr/bin/env bash
+
+(
+startTime=`date +%s`
+while true; do
+    s="$((`date +%s`-$startTime))"
+    echo "$((s/60))m"
+    for i in `seq 0 5`; do ./get-slave-i2c-errors.js $i; done
+done
+) 2>&1 | tee $1

packages/usb/reenumerate.js

@@ -1,52 +1,10 @@
 #!/usr/bin/env node
-const HID = require('node-hid');
-let uhk = require('./uhk');
-var program = require('commander');
-
-program
-    .option('-dt, --polling-timeout <n>', 'Polling timeout (ms)')
-    .option('-bt, --bootloader-timeout <n>', 'Bootloader timeout (ms)')
-    .option('-f, --force', 'Force reenumeration')
-    .parse(process.argv);
-
-let pollingTimeoutMs = 10000;
-const pollingIntervalMs = 100;
-const bootloaderTimeoutMs = 5000;
-let jumped = false;
+const uhk = require('./uhk');
+const program = require('commander');
 
+program.parse(process.argv);
 const enumerationMode = program.args[0];
-const enumerationModeId = uhk.enumerationModes[enumerationMode];
 
-if (enumerationModeId === undefined) {
-    const enumerationModes = Object.keys(uhk.enumerationModes).join(', ');
-    console.log(`Invalid enumeration mode '${enumerationMode}' is not one of: ${enumerationModes}`);
-    process.exit(1);
-}
-
-console.log(`Trying to reenumerate as ${enumerationMode}...`);
-setInterval(() => {
-    pollingTimeoutMs -= pollingIntervalMs;
-
-    const foundDevice = HID.devices().find(device =>
-        device.vendorId === uhk.vendorId && device.productId === uhk.enumerationModeIdToProductId[enumerationModeId]);
-
-    if (foundDevice) {
-        console.log(`${enumerationMode} is up`);
-        process.exit(0);
-    }
-
-    if (pollingTimeoutMs <= 0) {
-        console.log(`Couldn't reenumerate as ${enumerationMode}`);
-        process.exit(1);
-    }
-
-    let device = uhk.getUhkDevice();
-    if (device && !jumped) {
-        console.log(`UHK found, reenumerating as ${enumerationMode}`);
-        let t =  bootloaderTimeoutMs;
-        let message = new Buffer([uhk.usbCommands.reenumerate, enumerationModeId, t&0xff, (t&0xff<<8)>>8, (t&0xff<<16)>>16, (t&0xff<<24)>>24]);
-        device.write(uhk.getTransferData(message));
-        jumped = true;
-    }
-
-}, pollingIntervalMs);
+(async function() {
+    await uhk.reenumerate(enumerationMode);
+})();

packages/usb/send-kboot-command-to-module.js

@@ -33,6 +33,6 @@ if (kbootCommand !== 'idle') {
 }
 
 const device = uhk.getUhkDevice();
-let transfer = new Buffer([uhk.usbCommands.sendKbootCommandToModule, kbootCommandId, parseInt(i2cAddress)]);
-device.write(uhk.getTransferData(transfer));
-const response = Buffer.from(device.readSync());
+(async function() {
+    await uhk.sendKbootCommandToModule(device, kbootCommandId, i2cAddress);
+})();