Update package.json and changelog to version 1.0.3

* Add nouislider

* Add LEDBrightnessComponent

* Move LEDBrightnessComponent to correct folder

* Add LED brightness page to side menu and device routes

* Add LEDBrightnessComponent to device index file

* Add LEDBrightnessComponent and NouisliderModule to shared module

* Remove ngModelChange from LEDBrightnessComponent until onChange is implemented

* Fix stylelint issue in led brightness component

* Add nouislider files to webpack.config.js

* Add adjusting LED brightness sliders with arrow keys

* Various tweaks to LEDBrightnessComponent

* Fix linting issues in LEDBrightnessComponent

* Allow "::ng-deep" pseudo element in stylelint config

* Add reading LED brightness settings from user configuration

* led-brightness save

* Move slider to its own wrapper component, add debounce for slider change events

* Small fixes to imports and exports of SliderWrapperComponent

* Fix slide component making change event when initial value is set

* Export SliderPips interface

* Fix LED Brightness slider pips

* Add support for value unit in SliderWrapperComponent

* Add a bit of space before LED brightness sliders so the slider handle doesn't go beyond the page in the min position

* Implement onDestroy, fix slider pip values and imports in LEDBrightnessComponent

* Fix imports, implement onDestroy in SliderWrapperComponent

* Move fix for slider pip value style to global styles file

* Reorder stylelint rules

CHANGELOG.md

@@ -4,6 +4,29 @@ 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/).
 
+## [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
+
+- Add LED brightness settings.
+- Some key actions, for example Left Arrow were displayed as text with modifiers and as icon without modifires. Now, they're always displayed as icons.
+- Clean up firmware update console messages a bit.
+- Remove the add keymap button because this feature is not only useless but confusing until it gets reimplemented.
+- Explicitly mention on the macro tab of the key action popover that macro playback is not implemented yet.
+- Downgrade to firmware 8.0.0 because the left I2C watchdog of firmware 8.0.1 is not proven yet.
+
+## [1.0.2] - 2017-12-25
+
+Firmware: [**8.0.1**](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/8.0.1) | Device Protocol: 4.0.0 | User Config: 4.0.0 | Hardware Config: 1.0.0
+
+- 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
+
+- 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

README.md

@@ -7,7 +7,17 @@ Agent is the configuration application of the [Ultimate Hacking Keyboard](https:
 
 [Give it a whirl!](http://ultimatehackingkeyboard.github.io/agent/)
 
-## Set up instructions
+## Two builds to rule them all
+
+It's worth mentioning that Agent has two builds.
+
+The **electron build** is the desktop application which is meant to be used if you have an actual UHK at hand. It starts with an opening screen which detects your UHK. You cannot get past this screen without connecting a UHK via USB.
+
+The **web build** is meant to be used for 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 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:
 
@@ -24,6 +34,13 @@ npm run electron
 
 At this point, Agent should be running on your machine.
 
+## Developing the web application
+
+- The frontend code is located in `packages/uhk-web/`
+- Run the project locally with `npm run server:web`
+- View the app at `http://localhost:8080`
+- The app will automatically reload when you make changes
+
 ## Contributing
 
 Wanna contribute? Please let us show you [how](CONTRIBUTING.md).

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "uhk-agent",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "author": "Ultimate Gadget Laboratories",
   "main": "electron/dist/electron-main.js",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "Agent is the configuration application of the Ultimate Hacking Keyboard.",
   "repository": {
     "type": "git",
@@ -86,6 +86,7 @@
     "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,6 +36,7 @@
   },
   "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

@@ -10,7 +10,7 @@ import * as url from 'url';
 import * as commandLineArgs from 'command-line-args';
 import { UhkHidDevice, UhkOperations } from 'uhk-usb';
 // import { ElectronDataStorageRepositoryService } from './services/electron-datastorage-repository.service';
-import { CommandLineArgs, LogRegExps } from 'uhk-common';
+import { LogRegExps } from 'uhk-common';
 import { DeviceService } from './services/device.service';
 import { logger } from './services/logger.service';
 import { AppUpdateService } from './services/app-update.service';
@@ -18,12 +18,14 @@ import { AppService } from './services/app.service';
 import { SudoService } from './services/sudo.service';
 import { UhkBlhost } from '../../uhk-usb/src';
 import * as isDev from 'electron-is-dev';
+import { CommandLineInputs } from './models/command-line-inputs';
 
 const optionDefinitions = [
-    {name: 'addons', type: Boolean, defaultOption: false}
+    {name: 'addons', type: Boolean},
+    {name: 'auto-write-config', type: Boolean}
 ];
 
-const options: CommandLineArgs = commandLineArgs(optionDefinitions);
+const options: CommandLineInputs = commandLineArgs(optionDefinitions);
 
 // import './dev-extension';
 // require('electron-debug')({ showDevTools: true, enabled: true });

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

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

packages/uhk-agent/src/package.json

@@ -16,9 +16,8 @@
   "dependencies": {
     "node-hid": "0.5.7"
   },
-  "firmwareVersion": "7.0.0",
+  "firmwareVersion": "8.0.0",
   "deviceProtocolVersion": "4.0.0",
-  "moduleProtocolVersion": "3.0.0",
   "userConfigVersion": "4.0.0",
   "hardwareConfigVersion": "1.0.0"
 }

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

@@ -37,8 +37,13 @@ export class AppUpdateService extends MainServiceBase {
         });
 
         autoUpdater.on('error', (ev: any, err: string) => {
-            console.error('[AppUpdateService] error', err);
-            this.sendIpcToWindow(IpcEvents.autoUpdater.autoUpdateError, err.substr(0, 100));
+            this.logService.error('[AppUpdateService] error', err);
+            let msg = 'Electron updater error';
+            if (err) {
+                msg = err.substr(0, 100);
+            }
+
+            this.sendIpcToWindow(IpcEvents.autoUpdater.autoUpdateError, msg);
         });
 
         autoUpdater.on('download-progress', (progressObj: ProgressInfo) => {

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

@@ -3,19 +3,21 @@ import { UhkHidDevice } from 'uhk-usb';
 import { readFile } from 'fs';
 import { join } from 'path';
 
-import { AppStartInfo, CommandLineArgs, IpcEvents, LogService } from 'uhk-common';
+import { AppStartInfo, IpcEvents, LogService } from 'uhk-common';
 import { MainServiceBase } from './main-service-base';
 import { DeviceService } from './device.service';
+import { CommandLineInputs } from '../models/command-line-inputs';
 
 export class AppService extends MainServiceBase {
     constructor(protected logService: LogService,
                 protected win: Electron.BrowserWindow,
                 private deviceService: DeviceService,
-                private options: CommandLineArgs,
+                private options: CommandLineInputs,
                 private uhkHidDeviceService: UhkHidDevice) {
         super(logService, win);
 
         ipcMain.on(IpcEvents.app.getAppStartInfo, this.handleAppStartInfo.bind(this));
+        ipcMain.on(IpcEvents.app.exit, this.exit.bind(this));
         logService.info('[AppService] init success');
     }
 
@@ -25,8 +27,11 @@ export class AppService extends MainServiceBase {
         const packageJson = await this.getPackageJson();
 
         const response: AppStartInfo = {
-            commandLineArgs: this.options,
-            deviceConnected: this.deviceService.isConnected,
+            commandLineArgs: {
+                addons: this.options.addons || false,
+                autoWriteConfig: this.options['auto-write-config'] || false
+            },
+            deviceConnected: this.uhkHidDeviceService.deviceConnected(),
             hasPermission: this.uhkHidDeviceService.hasPermission(),
             agentVersionInfo: {
                 version: packageJson.version,
@@ -57,4 +62,9 @@ export class AppService extends MainServiceBase {
             });
         });
     }
+
+    private exit() {
+        this.logService.info('[AppService] exit');
+        this.win.close();
+    }
 }

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

@@ -1,9 +1,8 @@
 import { ipcMain } from 'electron';
-import { ConfigurationReply, IpcEvents, IpcResponse, LogService } from 'uhk-common';
-import { Constants, snooze, UhkHidDevice, UhkOperations } from 'uhk-usb';
+import { ConfigurationReply, DeviceConnectionState, IpcEvents, IpcResponse, LogService } from 'uhk-common';
+import { snooze, UhkHidDevice, UhkOperations } from 'uhk-usb';
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
-import { Device, devices } from 'node-hid';
 import { emptyDir } from 'fs-extra';
 
 import 'rxjs/add/observable/interval';
@@ -19,13 +18,11 @@ import { QueueManager } from './queue-manager';
 /**
  * IpcMain pair of the UHK Communication
  * Functionality:
- * - Detect device is connected or not
  * - Send UserConfiguration to the UHK Device
  * - Read UserConfiguration from the UHK Device
  */
 export class DeviceService {
     private pollTimer$: Subscription;
-    private connected = false;
     private queueManager = new QueueManager();
 
     constructor(private logService: LogService,
@@ -66,14 +63,6 @@ export class DeviceService {
         logService.debug('[DeviceService] init success');
     }
 
-    /**
-     * Return with true is an UHK Device is connected to the computer.
-     * @returns {boolean}
-     */
-    public get isConnected(): boolean {
-        return this.connected;
-    }
-
     /**
      * Return with the actual UserConfiguration from UHK Device
      * @returns {Promise<Buffer>}
@@ -89,7 +78,6 @@ export class DeviceService {
                 success: true,
                 ...result
             };
-            event.sender.send(IpcEvents.device.loadConfigurationReply, JSON.stringify(response));
         } catch (error) {
             response = {
                 success: false,
@@ -103,7 +91,6 @@ export class DeviceService {
     }
 
     public close(): void {
-        this.connected = false;
         this.stopPollTimer();
         this.logService.info('[DeviceService] Device connection checker stopped.');
     }
@@ -154,15 +141,16 @@ export class DeviceService {
 
         this.pollTimer$ = Observable.interval(1000)
             .startWith(0)
-            .map(() => {
-                return devices().some((dev: Device) => dev.vendorId === Constants.VENDOR_ID &&
-                    dev.productId === Constants.PRODUCT_ID);
-            })
+            .map(() => this.device.deviceConnected())
             .distinctUntilChanged()
             .do((connected: boolean) => {
-                this.connected = connected;
-                this.win.webContents.send(IpcEvents.device.deviceConnectionStateChanged, connected);
-                this.logService.info(`[DeviceService] Device connection state changed to: ${connected}`);
+                const response: DeviceConnectionState = {
+                    connected,
+                    hasPermission: this.device.hasPermission()
+                };
+
+                this.win.webContents.send(IpcEvents.device.deviceConnectionStateChanged, response);
+                this.logService.info('[DeviceService] Device connection state changed to:', response);
             })
             .subscribe();
     }

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

@@ -2,6 +2,8 @@ import { ipcMain, app } from 'electron';
 import * as isDev from 'electron-is-dev';
 import * as path from 'path';
 import * as sudo from 'sudo-prompt';
+import { dirSync } from 'tmp';
+import { emptyDir, copy } from 'fs-extra';
 
 import { IpcEvents, LogService, IpcResponse } from 'uhk-common';
 
@@ -10,7 +12,7 @@ export class SudoService {
 
     constructor(private logService: LogService) {
         if (isDev) {
-            this.rootDir = path.join(path.join(process.cwd(), process.argv[1]), '..');
+            this.rootDir = path.join(path.join(process.cwd(), process.argv[1]), '../../../../');
         } else {
             this.rootDir = path.dirname(app.getAppPath());
         }
@@ -18,10 +20,10 @@ export class SudoService {
         ipcMain.on(IpcEvents.device.setPrivilegeOnLinux, this.setPrivilege.bind(this));
     }
 
-    private setPrivilege(event: Electron.Event) {
+    private async setPrivilege(event: Electron.Event) {
         switch (process.platform) {
             case 'linux':
-                this.setPrivilegeOnLinux(event);
+                await this.setPrivilegeOnLinux(event);
                 break;
             default:
                 const response: IpcResponse = {
@@ -34,23 +36,31 @@ export class SudoService {
         }
     }
 
-    private setPrivilegeOnLinux(event: Electron.Event) {
-        const scriptPath = path.join(this.rootDir, 'rules/setup-rules.sh');
+    private async setPrivilegeOnLinux(event: Electron.Event) {
+        const tmpDirectory = dirSync();
+        const rulesDir = path.join(this.rootDir, 'rules');
+        this.logService.debug('[SudoService] Copy rules dir', { src: rulesDir, dst: tmpDirectory.name });
+        await copy(rulesDir, tmpDirectory.name);
+
+        const scriptPath = path.join(tmpDirectory.name, 'setup-rules.sh');
+
         const options = {
             name: 'Setting UHK access rules'
         };
         const command = `sh ${scriptPath}`;
-        console.log(command);
-        sudo.exec(command, options, (error: any) => {
+        this.logService.debug('[SudoService] Set privilege command: ', command);
+        sudo.exec(command, options, async (error: any) => {
             const response = new IpcResponse();
 
             if (error) {
+                this.logService.error('[SudoService] Error when set privilege: ', error);
                 response.success = false;
                 response.error = error;
             } else {
                 response.success = true;
             }
 
+            await emptyDir(tmpDirectory.name);
             event.sender.send(IpcEvents.device.setPrivilegeOnLinuxReply, response);
         });
     }

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

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

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

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

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

@@ -4,3 +4,4 @@ export * from './ipc-response';
 export * from './app-start-info';
 export * from './configuration-reply';
 export * from './version-information';
+export * from './device-connection-state';

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

@@ -2,6 +2,7 @@ class App {
     public static readonly appStarted = 'app-started';
     public static readonly getAppStartInfo = 'app-get-start-info';
     public static readonly getAppStartInfoReply = 'app-get-start-info-reply';
+    public static readonly exit = 'app-exit';
 }
 
 class AutoUpdate {

packages/uhk-usb/src/constants.ts

@@ -21,7 +21,8 @@ export enum UsbCommand {
     SetTestLed               = 0x0a,
     GetDebugBuffer           = 0x0b,
     GetAdcValue              = 0x0c,
-    SetLedPwmBrightness      = 0x0d
+    SetLedPwmBrightness      = 0x0d,
+    GetModuleProperties      = 0x0e
 }
 
 export enum EepromOperation {

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

@@ -70,7 +70,7 @@ export class UhkBlhost {
         let blhostPath;
         switch (process.platform) {
             case 'linux':
-                blhostPath = 'linux/amd64/blhost';
+                blhostPath = 'linux/x86_64/blhost';
                 break;
             case 'darwin':
                 blhostPath = 'mac/blhost';

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

@@ -25,6 +25,7 @@ export class UhkHidDevice {
      * @private
      */
     private _device: HID;
+    private _hasPermission = false;
 
     constructor(private logService: LogService) {
     }
@@ -38,8 +39,18 @@ export class UhkHidDevice {
      */
     public hasPermission(): boolean {
         try {
-            devices();
-            return true;
+            if (this._hasPermission) {
+                return true;
+            }
+
+            if (!this.deviceConnected()) {
+                return true;
+            }
+
+            this._hasPermission = this.getDevice() !== null;
+            this.close();
+
+            return this._hasPermission;
         } catch (err) {
             this.logService.error('[UhkHidDevice] hasPermission', err);
         }
@@ -47,6 +58,21 @@ export class UhkHidDevice {
         return false;
     }
 
+    /**
+     * Return with true is an UHK Device is connected to the computer.
+     * @returns {boolean}
+     */
+    public deviceConnected(): boolean {
+        const connected = devices().some((dev: Device) => dev.vendorId === Constants.VENDOR_ID &&
+            dev.productId === Constants.PRODUCT_ID);
+
+        if (!connected) {
+            this._hasPermission = false;
+        }
+
+        return connected;
+    }
+
     /**
      * Send data to the UHK device and wait for the response.
      * Throw an error when 1st byte of the response is not 0
@@ -225,7 +251,7 @@ export class UhkHidDevice {
     }
 }
 
-function  kbootKommandName(module: ModuleSlotToI2cAddress): string {
+function kbootKommandName(module: ModuleSlotToI2cAddress): string {
     switch (module) {
         case ModuleSlotToI2cAddress.leftHalf:
             return 'leftHalf';

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

@@ -26,7 +26,7 @@ export class UhkOperations {
         await this.blhost.runBlhostCommand([...prefix, 'flash-erase-region', '0xc000', '475136']);
         await this.blhost.runBlhostCommand([...prefix, 'flash-image', `"${firmwarePath}"`]);
         await this.blhost.runBlhostCommand([...prefix, 'reset']);
-        this.logService.debug('[UhkOperations] End flashing right firmware');
+        this.logService.debug('[UhkOperations] Right firmware successfully flashed');
     }
 
     public async updateLeftModule(firmwarePath = this.getLeftModuleFirmwarePath()) {
@@ -58,7 +58,8 @@ export class UhkOperations {
         await this.device.sendKbootCommandToModule(ModuleSlotToI2cAddress.leftHalf, KbootCommands.idle);
         this.device.close();
 
-        this.logService.debug('[UhkOperations] End flashing left module firmware');
+        this.logService.debug('[UhkOperations] Left firmware successfully flashed');
+        this.logService.debug('[UhkOperations] Both left and right firmwares successfully flashed');
     }
 
     /**

packages/uhk-usb/src/util.ts

@@ -89,7 +89,7 @@ export async function retry(command: Function, maxTry = 3, logService?: LogServi
                 throw err;
             } else {
                 if (logService) {
-                    logService.error(`[retry] failed, but try run FUNCTION:\n ${command}, \n retry: ${retryCount}`);
+                    logService.info(`[retry] failed, but try run FUNCTION:\n ${command}, \n retry: ${retryCount}`);
                 }
             }
         }

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

@@ -21,11 +21,13 @@
       "prefix": "app",
       "styles": [
         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
+        "../node_modules/nouislider/distribute/nouislider.min.css",
         "styles.scss"
       ],
       "scripts": [
         "../node_modules/bootstrap/dist/js/bootstrap.js",
-        "../node_modules/select2/dist/js/select2.full.js"
+        "../node_modules/select2/dist/js/select2.full.js",
+        "../node_modules/nouislider/distribute/nouislider.js"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {

packages/uhk-web/package.json

@@ -69,9 +69,11 @@
     "less-loader": "4.0.5",
     "lodash": "4.17.4",
     "ng2-dragula": "1.5.0",
+    "ng2-nouislider": "^1.7.6",
     "ng2-select2": "1.0.0-beta.10",
     "ngrx-store-freeze": "0.1.9",
     "node-hid": "0.5.4",
+    "nouislider": "^10.1.0",
     "postcss-loader": "1.3.3",
     "postcss-url": "5.1.2",
     "protractor": "5.1.2",

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

@@ -3,6 +3,7 @@ import { Routes } from '@angular/router';
 import { DeviceConfigurationComponent } from './configuration/device-configuration.component';
 import { DeviceFirmwareComponent } from './firmware/device-firmware.component';
 import { MouseSpeedComponent } from './mouse-speed/mouse-speed.component';
+import { LEDBrightnessComponent } from './led-brightness/led-brightness.component';
 
 export const deviceRoutes: Routes = [
     {
@@ -21,6 +22,10 @@ export const deviceRoutes: Routes = [
                 path: 'mouse-speed',
                 component: MouseSpeedComponent
             },
+            {
+                path: 'led-brightness',
+                component: LEDBrightnessComponent
+            },
             {
                 path: 'firmware',
                 component: DeviceFirmwareComponent

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

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

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

@@ -0,0 +1,47 @@
+<h1>
+    <i class="fa fa-sliders"></i>
+    <span>LED brightness</span>
+</h1>
+<div class="row led-setting">
+    <div class="col-xs-12 col-md-6">
+        <label>LED display icon and layer texts brightness</label>
+        <div class="slider-wrapper-container">
+            <slider-wrapper
+                [min]="0"
+                [max]="255"
+                [step]="1"
+                [pips]="sliderPips"
+                [(ngModel)]="iconsAndLayerTextsBrightness"
+                (ngModelChange)="onSetPropertyValue('iconsAndLayerTextsBrightness', $event)"></slider-wrapper>
+        </div>
+        
+    </div>
+</div>
+<div class="row led-setting">
+    <div class="col-xs-12 col-md-6">
+        <label>LED display alphanumeric segments brightness</label>
+        <div class="slider-wrapper-container">
+            <slider-wrapper
+                [min]="0"
+                [max]="255"
+                [step]="1"
+                [pips]="sliderPips"
+                [(ngModel)]="alphanumericSegmentsBrightness"
+                (ngModelChange)="onSetPropertyValue('alphanumericSegmentsBrightness', $event)"></slider-wrapper>
+        </div>
+    </div>
+</div>
+<div class="row led-setting">
+    <div class="col-xs-12 col-md-6">
+        <label>Key backlight brightness</label>
+        <div class="slider-wrapper-container">
+            <slider-wrapper
+                [min]="0"
+                [max]="255"
+                [step]="1"
+                [pips]="sliderPips"
+                [(ngModel)]="keyBacklightBrightness"
+                (ngModelChange)="onSetPropertyValue('keyBacklightBrightness', $event)"></slider-wrapper>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,19 @@
+:host {
+    overflow-y: auto;
+    display: block;
+    height: 100%;
+    width: 100%;
+
+    label {
+        display: block;
+        font-weight: normal;
+    }
+
+    .led-setting {
+        margin-bottom: 6rem;
+    }
+
+    .slider-wrapper-container {
+        margin-left: 1.6rem;
+    }
+}

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

@@ -0,0 +1,53 @@
+import { AfterViewInit, Component, OnInit, OnDestroy, ViewChildren, QueryList } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppState, getUserConfiguration } from '../../../store';
+import { SetUserConfigurationValueAction } from '../../../store/actions/user-config';
+import { SliderPips } from '../../slider-wrapper/slider-wrapper.component';
+import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
+import { UserConfiguration } from 'uhk-common';
+
+@Component({
+    selector: 'device-led-brightness',
+    templateUrl: './led-brightness.component.html',
+    styleUrls: ['./led-brightness.component.scss'],
+    host: {
+        'class': 'container-fluid'
+    }
+})
+export class LEDBrightnessComponent implements OnInit, OnDestroy {
+    public iconsAndLayerTextsBrightness: number = 0;
+    public alphanumericSegmentsBrightness: number = 0;
+    public keyBacklightBrightness: number = 0;
+    public sliderPips: SliderPips = {
+        mode: 'positions',
+        values: [0, 50, 100],
+        density: 6,
+        stepped: true
+    };
+
+    private userConfig$: Store<UserConfiguration>;
+    private userConfigSubscription: Subscription;
+
+    constructor(private store: Store<AppState>) {}
+
+    ngOnInit() {
+        this.userConfig$ = this.store.select(getUserConfiguration);
+        this.userConfigSubscription = this.userConfig$.subscribe(config => {
+            this.iconsAndLayerTextsBrightness = config.iconsAndLayerTextsBrightness;
+            this.alphanumericSegmentsBrightness = config.alphanumericSegmentsBrightness;
+            this.keyBacklightBrightness = config.keyBacklightBrightness;
+        });
+    }
+
+    ngOnDestroy() {
+        this.userConfigSubscription.unsubscribe();
+    }
+
+    onSetPropertyValue(propertyName: string, value: number): void {
+        this.store.dispatch(new SetUserConfigurationValueAction({
+            propertyName,
+            value
+        }));
+    }
+}

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

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

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

@@ -23,6 +23,12 @@
                                [class.disabled]="updatingFirmware$ | async">Mouse speed</a>
                         </div>
                     </li>
+                    <li class="sidebar__level-2--item">
+                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                            <a [routerLink]="['/device/led-brightness']"
+                               [class.disabled]="updatingFirmware$ | async">LED brightness</a>
+                        </div>
+                    </li>
                     <li class="sidebar__level-2--item">
                         <div class="sidebar__level-2" [routerLinkActive]="['active']">
                             <a [routerLink]="['/device/configuration']"
@@ -40,11 +46,11 @@
             <li class="sidebar__level-1--item">
                 <div class="sidebar__level-1">
                     <i class="fa fa-keyboard-o"></i> Keymaps
-                    <a [routerLink]="['/keymap/add']"
+                    <!--a [routerLink]="['/keymap/add']"
                        class="btn btn-default pull-right btn-sm"
                        [class.disabled]="updatingFirmware$ | async">
                         <i class="fa fa-plus"></i>
-                    </a>
+                    </a-->
                     <i class="fa fa-chevron-up pull-right"
                        (click)="toggleHide($event, 'keymap')"></i>
                 </div>

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

@@ -0,0 +1,13 @@
+<div class="slider-container">
+    <nouislider
+        [min]="min"
+        [max]="max"
+        [step]="step"
+        [keyboard]="true"
+        [tooltips]="true"
+        [(ngModel)]="value"
+        (ngModelChange)="onSliderChange($event)"></nouislider>
+</div>
+<div class="slider-value">
+    <div class="value-indicator">{{value}} {{valueUnit}}</div>
+</div>

packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.scss

@@ -0,0 +1,17 @@
+:host {
+    display: flex;
+    flex-direction: row;
+
+    .slider-container {
+        width: 80%;
+    }
+
+    .slider-value {
+        width: 20%;
+    }
+
+    .value-indicator {
+        margin: 1rem 1rem 1rem 3rem;
+        vertical-align: middle;
+    }
+}

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

@@ -0,0 +1,83 @@
+import { AfterViewInit, Component, EventEmitter, forwardRef, Input, Output, OnDestroy, ViewChild } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NouisliderComponent } from 'ng2-nouislider/src/nouislider';
+import { Observable } from 'rxjs/Observable';
+import { Observer } from 'rxjs/Observer';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
+
+export interface SliderPips {
+    mode: string;
+    values: number[];
+    density: number;
+    stepped?: boolean;
+}
+
+@Component({
+    selector: 'slider-wrapper',
+    templateUrl: './slider-wrapper.component.html',
+    styleUrls: ['./slider-wrapper.component.scss'],
+    providers: [
+        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderWrapperComponent), multi: true }
+    ]
+})
+export class SliderWrapperComponent implements AfterViewInit, ControlValueAccessor, OnDestroy {
+    @ViewChild(NouisliderComponent) slider: NouisliderComponent;
+    @Input() min: number;
+    @Input() max: number;
+    @Input() step: number;
+    @Input() pips: SliderPips;
+    @Input() valueUnit: string;
+    @Output() onChange = new EventEmitter<number>();
+
+    public value: number;
+    private changeObserver$: Observer<number>;
+    private changeDebounceTime: number = 300;
+
+    ngAfterViewInit(): void {
+        if (this.pips) {
+            this.slider.slider.pips(this.pips);
+        }
+
+        // Hide tooltips and show them when dragging slider handle
+        this.slider.slider.target.querySelector('.noUi-tooltip').style.display = 'none';
+
+        this.slider.slider.on('start', function() {
+            this.target.querySelector('.noUi-tooltip').style.display = 'block';
+        });
+        this.slider.slider.on('end', function() {
+            this.target.querySelector('.noUi-tooltip').style.display = 'none';
+        });
+    }
+
+    ngOnDestroy() {
+        if (this.changeObserver$) {
+            this.changeObserver$.complete();
+        }
+    }
+
+    writeValue(value: number): void {
+        this.value = value || this.min;
+    }
+
+    registerOnChange(fn: any): void {
+        this.propagateChange = fn;
+    }
+
+    registerOnTouched() {}
+
+    onSliderChange(value: number): void {
+        if (!this.changeObserver$) {
+            Observable.create(observer => {
+                this.changeObserver$ = observer;
+            }).debounceTime(this.changeDebounceTime)
+            .distinctUntilChanged()
+            .subscribe(this.propagateChange);
+
+            return; // No change event on first change as the value is just being set
+        }
+        this.changeObserver$.next(value);
+    }
+
+    private propagateChange: any = () => {};
+}

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

@@ -1,5 +1,10 @@
 <svg [attr.viewBox]="viewBox" [attr.width]="textContainer.width" [attr.height]="textContainer.height"
     [attr.x]="textContainer.x" [attr.y]="textContainer.y" [ngSwitch]="labelType">
+    <svg:g svg-single-icon-key *ngSwitchCase="'icon'"
+            [height]="height"
+            [width]="width"
+            [icon]="labelSource">
+    </svg:g>
     <svg:g svg-one-line-text-key *ngSwitchCase="'one-line'"
             [height]="height"
             [width]="width"

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

@@ -127,21 +127,23 @@ export class SvgKeystrokeKeyComponent implements OnInit, OnChanges {
     }
 
     ngOnChanges() {
-        let newLabelSource: string[];
         if (this.keystrokeAction.hasScancode()) {
             const scancode: number = this.keystrokeAction.scancode;
-            newLabelSource = this.mapper.scanCodeToText(scancode, this.keystrokeAction.type);
-            if (newLabelSource) {
-                if (newLabelSource.length === 1) {
-                    this.labelSource = newLabelSource[0];
-                    this.labelType = 'one-line';
-                } else {
-                    this.labelSource = newLabelSource;
-                    this.labelType = 'two-line';
-                }
-            } else {
-                this.labelSource = this.mapper.scanCodeToSvgImagePath(scancode, this.keystrokeAction.type);
+            this.labelSource = this.mapper.scanCodeToSvgImagePath(scancode, this.keystrokeAction.type);
+            if (this.labelSource) {
                 this.labelType = 'icon';
+            } else {
+                let newLabelSource: string[];
+                newLabelSource = this.mapper.scanCodeToText(scancode, this.keystrokeAction.type);
+                if (newLabelSource) {
+                    if (newLabelSource.length === 1) {
+                        this.labelSource = newLabelSource[0];
+                        this.labelType = 'one-line';
+                    } else {
+                        this.labelSource = newLabelSource;
+                        this.labelType = 'two-line';
+                    }
+                }
             }
         } else {
             this.labelType = 'empty';

packages/uhk-web/src/app/models/user-configuration-value.ts

@@ -0,0 +1,4 @@
+export interface UserConfigurationValue {
+    propertyName: string;
+    value: number;
+}

packages/uhk-web/src/app/pages/main-page/main.page.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
     selector: 'main-page',
     templateUrl: './main.page.html',
-    styles: [':host{height:100%; display: inline-block; width: 100%}']
+    styles: [':host{height:100%; width:100%}']
 })
 export class MainPage {
 

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

@@ -21,6 +21,11 @@ export class AppRendererService {
         this.ipcRenderer.send(IpcEvents.app.getAppStartInfo);
     }
 
+    exit() {
+        this.logService.info('[AppRendererService] exit');
+        this.ipcRenderer.send(IpcEvents.app.exit);
+    }
+
     private registerEvents() {
         this.ipcRenderer.on(IpcEvents.app.getAppStartInfoReply, (event: string, arg: AppStartInfo) => {
             this.dispachStoreAction(new ProcessAppStartInfoAction(arg));

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

@@ -1,7 +1,7 @@
 import { Injectable, NgZone } from '@angular/core';
 import { Action, Store } from '@ngrx/store';
 
-import { IpcEvents, IpcResponse, LogService } from 'uhk-common';
+import { DeviceConnectionState, IpcEvents, IpcResponse, LogService } from 'uhk-common';
 import { AppState } from '../store';
 import { IpcCommonRenderer } from './ipc-common-renderer';
 import {
@@ -47,7 +47,7 @@ export class DeviceRendererService {
     }
 
     private registerEvents(): void {
-        this.ipcRenderer.on(IpcEvents.device.deviceConnectionStateChanged, (event: string, arg: boolean) => {
+        this.ipcRenderer.on(IpcEvents.device.deviceConnectionStateChanged, (event: string, arg: DeviceConnectionState) => {
             this.dispachStoreAction(new ConnectionStateChangedAction(arg));
         });
 

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

@@ -71,7 +71,11 @@ export class MapperService {
             default:
                 return undefined;
         }
-        return 'assets/compiled_sprite.svg#' + map.get(scanCode);
+        const id = map.get(scanCode);
+        if (!id) {
+            return undefined;
+        }
+        return `assets/compiled_sprite.svg#${id}`;
     }
 
     public getIcon(iconName: string): string {

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

@@ -7,13 +7,15 @@ import { ConfirmationPopoverModule } from 'angular-confirmation-popover';
 
 import { DragulaModule } from 'ng2-dragula/ng2-dragula';
 import { Select2Module } from 'ng2-select2/ng2-select2';
+import { NouisliderModule } from 'ng2-nouislider';
 
 import { AddOnComponent } from './components/add-on';
 import { KeyboardSliderComponent } from './components/keyboard/slider';
 import {
     DeviceConfigurationComponent,
     DeviceFirmwareComponent,
-    MouseSpeedComponent
+    MouseSpeedComponent,
+    LEDBrightnessComponent
 } from './components/device';
 import { KeymapAddComponent, KeymapEditComponent, KeymapHeaderComponent } from './components/keymap';
 import { LayersComponent } from './components/layers';
@@ -98,6 +100,7 @@ import { LoadingDevicePageComponent } from './pages/loading-page/loading-device.
 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';
 
 @NgModule({
     declarations: [
@@ -105,6 +108,7 @@ import { XtermComponent } from './components/xterm/xterm.component';
         DeviceConfigurationComponent,
         DeviceFirmwareComponent,
         MouseSpeedComponent,
+        LEDBrightnessComponent,
         KeymapEditComponent,
         KeymapHeaderComponent,
         NotificationComponent,
@@ -163,7 +167,8 @@ import { XtermComponent } from './components/xterm/xterm.component';
         MainPage,
         ProgressButtonComponent,
         LoadingDevicePageComponent,
-        XtermComponent
+        XtermComponent,
+        SliderWrapperComponent
     ],
     imports: [
         CommonModule,
@@ -172,6 +177,7 @@ import { XtermComponent } from './components/xterm/xterm.component';
         DragulaModule,
         routing,
         Select2Module,
+        NouisliderModule,
         NotifierModule.withConfig(angularNotifierConfig),
         ConfirmationPopoverModule.forRoot({
             confirmButtonType: 'danger' // set defaults here

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

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

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

@@ -1,5 +1,5 @@
 import { Action } from '@ngrx/store';
-import { IpcResponse, type } from 'uhk-common';
+import { DeviceConnectionState, IpcResponse, type } from 'uhk-common';
 
 const PREFIX = '[device] ';
 
@@ -8,7 +8,6 @@ export const ActionTypes = {
     SET_PRIVILEGE_ON_LINUX: type(PREFIX + 'set privilege on linux'),
     SET_PRIVILEGE_ON_LINUX_REPLY: type(PREFIX + 'set privilege on linux reply'),
     CONNECTION_STATE_CHANGED: type(PREFIX + 'connection state changed'),
-    PERMISSION_STATE_CHANGED: type(PREFIX + 'permission state changed'),
     SAVE_CONFIGURATION: type(PREFIX + 'save configuration'),
     SAVE_CONFIGURATION_REPLY: type(PREFIX + 'save configuration reply'),
     SAVING_CONFIGURATION: type(PREFIX + 'saving configuration'),
@@ -39,14 +38,7 @@ export class SetPrivilegeOnLinuxReplyAction implements Action {
 export class ConnectionStateChangedAction implements Action {
     type = ActionTypes.CONNECTION_STATE_CHANGED;
 
-    constructor(public payload: boolean) {
-    }
-}
-
-export class PermissionStateChangedAction implements Action {
-    type = ActionTypes.PERMISSION_STATE_CHANGED;
-
-    constructor(public payload: boolean) {
+    constructor(public payload: DeviceConnectionState) {
     }
 }
 
@@ -121,7 +113,6 @@ export type Actions
     = SetPrivilegeOnLinuxAction
     | SetPrivilegeOnLinuxReplyAction
     | ConnectionStateChangedAction
-    | PermissionStateChangedAction
     | ShowSaveToKeyboardButtonAction
     | SaveConfigurationAction
     | SaveConfigurationReplyAction

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

@@ -1,5 +1,6 @@
 import { Action } from '@ngrx/store';
 import { type, UserConfiguration, ConfigurationReply } from 'uhk-common';
+import { UserConfigurationValue } from '../../models/user-configuration-value';
 
 const PREFIX = '[user-config] ';
 
@@ -13,7 +14,8 @@ export const ActionTypes = {
     SAVE_USER_CONFIG_IN_JSON_FILE: type(PREFIX + 'Save User Config in JSON file'),
     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')
+    RENAME_USER_CONFIGURATION: type(PREFIX + 'Rename user configuration'),
+    SET_USER_CONFIGURATION_VALUE: type(PREFIX + 'Set user configuration value')
 };
 
 export class LoadUserConfigAction implements Action {
@@ -67,6 +69,13 @@ export class RenameUserConfigurationAction implements Action {
     }
 }
 
+export class SetUserConfigurationValueAction implements Action {
+    type = ActionTypes.SET_USER_CONFIGURATION_VALUE;
+
+    constructor(public payload: UserConfigurationValue) {
+    }
+}
+
 export type Actions
     = LoadUserConfigAction
     | LoadUserConfigSuccessAction
@@ -77,4 +86,5 @@ export type Actions
     | SaveUserConfigInBinaryFileAction
     | LoadResetUserConfigurationAction
     | RenameUserConfigurationAction
+    | SetUserConfigurationValueAction
     ;

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

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Action } from '@ngrx/store';
+import { Action, Store } from '@ngrx/store';
 import { Actions, Effect } from '@ngrx/effects';
 import { Observable } from 'rxjs/Observable';
 import { NotifierService } from 'angular-notifier';
@@ -13,16 +13,22 @@ import 'rxjs/add/operator/catch';
 import { AppStartInfo, LogService, Notification, NotificationType } from 'uhk-common';
 import {
     ActionTypes,
+    ApplyCommandLineArgsAction,
     AppStartedAction,
     DismissUndoNotificationAction,
     ProcessAppStartInfoAction,
     ShowNotificationAction,
-    ToggleAddonMenuAction,
-    UndoLastAction, UpdateAgentVersionInformationAction
+    UndoLastAction,
+    UpdateAgentVersionInformationAction
 } from '../actions/app';
 import { AppRendererService } from '../../services/app-renderer.service';
 import { AppUpdateRendererService } from '../../services/app-update-renderer.service';
-import { ConnectionStateChangedAction, PermissionStateChangedAction } from '../actions/device';
+import {
+    ActionTypes as DeviceActions,
+    ConnectionStateChangedAction,
+    SaveToKeyboardSuccessAction
+} from '../actions/device';
+import { AppState, autoWriteUserConfiguration } from '../index';
 
 @Injectable()
 export class ApplicationEffects {
@@ -56,9 +62,11 @@ export class ApplicationEffects {
         .mergeMap((appInfo: AppStartInfo) => {
             this.logService.debug('[AppEffect][processStartInfo] payload:', appInfo);
             return [
-                new ToggleAddonMenuAction(appInfo.commandLineArgs.addons),
-                new ConnectionStateChangedAction(appInfo.deviceConnected),
-                new PermissionStateChangedAction(appInfo.hasPermission),
+                new ApplyCommandLineArgsAction(appInfo.commandLineArgs),
+                new ConnectionStateChangedAction({
+                    connected: appInfo.deviceConnected,
+                    hasPermission: appInfo.hasPermission
+                }),
                 new UpdateAgentVersionInformationAction(appInfo.agentVersionInfo)
             ];
         });
@@ -68,10 +76,20 @@ 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();
+            }
+        });
+
     constructor(private actions$: Actions,
                 private notifierService: NotifierService,
                 private appUpdateRendererService: AppUpdateRendererService,
                 private appRendererService: AppRendererService,
-                private logService: LogService) {
+                private logService: LogService,
+                private store: Store<AppState>) {
     }
 }

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

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { Action, Store } from '@ngrx/store';
-import { Actions, Effect, toPayload } from '@ngrx/effects';
+import { Actions, Effect } from '@ngrx/effects';
 import { Observable } from 'rxjs/Observable';
 
 import 'rxjs/add/observable/of';
@@ -13,13 +13,13 @@ import 'rxjs/add/operator/mergeMap';
 import 'rxjs/add/operator/withLatestFrom';
 import 'rxjs/add/operator/switchMap';
 
-import { IpcResponse, NotificationType, UhkBuffer, UserConfiguration } from 'uhk-common';
+import { DeviceConnectionState, IpcResponse, NotificationType, UhkBuffer, UserConfiguration } from 'uhk-common';
 import {
     ActionTypes,
     ConnectionStateChangedAction,
     HideSaveToKeyboardButton,
-    PermissionStateChangedAction,
     SaveConfigurationAction,
+    SaveConfigurationReplyAction,
     SaveToKeyboardSuccessAction,
     SaveToKeyboardSuccessFailed,
     SetPrivilegeOnLinuxReplyAction,
@@ -46,35 +46,25 @@ export class DeviceEffects {
     deviceConnectionStateChange$: Observable<Action> = this.actions$
         .ofType<ConnectionStateChangedAction>(ActionTypes.CONNECTION_STATE_CHANGED)
         .map(action => action.payload)
-        .do((connected: boolean) => {
-            if (connected) {
+        .do((state: DeviceConnectionState) => {
+            if (!state.hasPermission) {
+                this.router.navigate(['/privilege']);
+            }
+            else if (state.connected) {
                 this.router.navigate(['/']);
             }
             else {
                 this.router.navigate(['/detection']);
             }
         })
-        .switchMap((connected: boolean) => {
-            if (connected) {
+        .switchMap((state: DeviceConnectionState) => {
+            if (state.connected && state.hasPermission) {
                 return Observable.of(new LoadConfigFromDeviceAction());
             }
 
             return Observable.empty();
         });
 
-    @Effect({dispatch: false})
-    permissionStateChange$: Observable<boolean> = this.actions$
-        .ofType<PermissionStateChangedAction>(ActionTypes.PERMISSION_STATE_CHANGED)
-        .map(action => action.payload)
-        .do((hasPermission: boolean) => {
-            if (hasPermission) {
-                this.router.navigate(['/detection']);
-            }
-            else {
-                this.router.navigate(['/privilege']);
-            }
-        });
-
     @Effect({dispatch: false})
     setPrivilegeOnLinux$: Observable<Action> = this.actions$
         .ofType(ActionTypes.SET_PRIVILEGE_ON_LINUX)
@@ -89,14 +79,16 @@ export class DeviceEffects {
         .mergeMap((response: any) => {
             if (response.success) {
                 return [
-                    new ConnectionStateChangedAction(true),
-                    new PermissionStateChangedAction(true)
+                    new ConnectionStateChangedAction({
+                        connected: true,
+                        hasPermission: true
+                    })
                 ];
             }
             return [
                 <any>new ShowNotificationAction({
                     type: NotificationType.Error,
-                    message: response.error.message
+                    message: response.error.message || response.error
                 })
             ];
         });
@@ -113,8 +105,8 @@ export class DeviceEffects {
 
     @Effect()
     saveConfigurationReply$: Observable<Action> = this.actions$
-        .ofType(ActionTypes.SAVE_CONFIGURATION_REPLY)
-        .map(toPayload)
+        .ofType<SaveConfigurationReplyAction>(ActionTypes.SAVE_CONFIGURATION_REPLY)
+        .map(action => action.payload)
         .mergeMap((response: IpcResponse) => {
             if (response.success) {
                 return [

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

@@ -12,35 +12,27 @@ import 'rxjs/add/operator/startWith';
 import 'rxjs/add/operator/withLatestFrom';
 import 'rxjs/add/operator/mergeMap';
 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, LoadConfigFromDeviceReplyAction, LoadUserConfigSuccessAction, RenameUserConfigurationAction,
     SaveUserConfigSuccessAction
 } from '../actions/user-config';
 
 import { DataStorageRepositoryService } from '../../services/datastorage-repository.service';
 import { DefaultUserConfigurationService } from '../../services/default-user-configuration.service';
-import { AppState, getPrevUserConfiguration, getUserConfiguration } from '../index';
+import { AppState, autoWriteUserConfiguration, getPrevUserConfiguration, getUserConfiguration } from '../index';
 import { KeymapAction, KeymapActions, MacroAction, MacroActions } from '../actions';
 import {
-    DismissUndoNotificationAction,
-    LoadHardwareConfigurationSuccessAction,
-    ShowNotificationAction,
+    DismissUndoNotificationAction, LoadHardwareConfigurationSuccessAction, ShowNotificationAction,
     UndoLastAction
 } from '../actions/app';
-import { ShowSaveToKeyboardButtonAction } from '../actions/device';
+import { SaveConfigurationAction, ShowSaveToKeyboardButtonAction } from '../actions/device';
 import { DeviceRendererService } from '../../services/device-renderer.service';
 import { UndoUserConfigData } from '../../models/undo-user-config-data';
 
@@ -80,7 +72,7 @@ export class UserConfigEffects {
             KeymapActions.SET_DEFAULT, KeymapActions.REMOVE, KeymapActions.SAVE_KEY,
             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) as
+            ActionTypes.RENAME_USER_CONFIGURATION, ActionTypes.SET_USER_CONFIGURATION_VALUE) as
         Observable<KeymapAction | MacroAction | RenameUserConfigurationAction>)
         .withLatestFrom(this.store.select(getUserConfiguration), this.store.select(getPrevUserConfiguration))
         .mergeMap(([action, config, prevUserConfiguration]) => {
@@ -193,6 +185,19 @@ 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();
+            }
+        });
+
     constructor(private actions$: Actions,
                 private dataStorageRepository: DataStorageRepositoryService,
                 private store: Store<AppState>,

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

@@ -43,6 +43,7 @@ export const getDeviceName = (state: AppState) => state.userConfiguration.device
 
 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

@@ -11,6 +11,7 @@ import { KeyboardLayout } from '../../keyboard/keyboard-layout.enum';
 export interface State {
     started: boolean;
     showAddonMenu: boolean;
+    autoWriteUserConfiguration: boolean;
     undoableNotification?: Notification;
     navigationCountAfterNotification: number;
     prevUserConfig?: UserConfiguration;
@@ -23,6 +24,7 @@ export interface State {
 export const initialState: State = {
     started: false,
     showAddonMenu: false,
+    autoWriteUserConfiguration: false,
     navigationCountAfterNotification: 0,
     runningInElectron: runInElectron(),
     configLoading: true
@@ -37,10 +39,11 @@ export function reducer(state = initialState, action: Action & { payload: any })
             };
         }
 
-        case ActionTypes.APP_TOGGLE_ADDON_MENU: {
+        case ActionTypes.APPLY_COMMAND_LINE_ARGS: {
             return {
                 ...state,
-                showAddonMenu: action.payload
+                showAddonMenu: action.payload.addons,
+                autoWriteUserConfiguration: action.payload.autoWriteConfig
             };
         }
 
@@ -124,6 +127,7 @@ export function reducer(state = initialState, action: Action & { payload: any })
 }
 
 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/device.ts

@@ -3,8 +3,8 @@ import { Action } from '@ngrx/store';
 import {
     ActionTypes,
     ConnectionStateChangedAction,
-    PermissionStateChangedAction,
-    SaveConfigurationAction, UpdateFirmwareFailedAction
+    SaveConfigurationAction,
+    UpdateFirmwareFailedAction
 } from '../actions/device';
 import { ActionTypes as AppActions, ElectronMainLogReceivedAction } from '../actions/app';
 import { initProgressButtonState, ProgressButtonState } from './progress-button-state';
@@ -30,17 +30,14 @@ export const initialState: State = {
 
 export function reducer(state = initialState, action: Action) {
     switch (action.type) {
-        case ActionTypes.CONNECTION_STATE_CHANGED:
+        case ActionTypes.CONNECTION_STATE_CHANGED: {
+            const data = (<ConnectionStateChangedAction>action).payload;
             return {
                 ...state,
-                connected: (<ConnectionStateChangedAction>action).payload
-            };
-
-        case ActionTypes.PERMISSION_STATE_CHANGED:
-            return {
-                ...state,
-                hasPermission: (<PermissionStateChangedAction>action).payload
+                connected: data.connected,
+                hasPermission: data.hasPermission
             };
+        }
 
         case ActionTypes.SAVING_CONFIGURATION: {
             return {

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

@@ -246,6 +246,11 @@ export function reducer(state = initialState, action: Action & { payload?: any }
             break;
         }
 
+        case ActionTypes.SET_USER_CONFIGURATION_VALUE: {
+            changedUserConfiguration[action.payload.propertyName] = action.payload.value;
+            break;
+        }
+
         default:
             break;
     }

packages/uhk-web/src/styles.scss

@@ -90,3 +90,7 @@ a.disabled {
     width: 100%;
     display: inline-block;
 }
+
+.noUi-value {
+    top: 2rem;
+}

packages/uhk-web/webpack.config.js

@@ -85,10 +85,12 @@ module.exports = {
         ],
         "scripts": [
             "script-loader!./node_modules/bootstrap/dist/js/bootstrap.js",
-            "script-loader!./node_modules/select2/dist/js/select2.full.js"
+            "script-loader!./node_modules/select2/dist/js/select2.full.js",
+            "script-loader!./node_modules/nouislider/distribute/nouislider.js"
         ],
         "styles": [
             "./node_modules/bootstrap/dist/css/bootstrap.min.css",
+            "./node_modules/nouislider/distribute/nouislider.min.css",
             "./src/styles.scss"
         ]
     },
@@ -126,6 +128,7 @@ module.exports = {
             {
                 "exclude": [
                     path.join(process.cwd(), "node_modules/bootstrap/dist/css/bootstrap.min.css"),
+                    path.join(process.cwd(), "node_modules/nouislider/distribute/nouislider.min.css"),
                     path.join(process.cwd(), "src/styles.scss")
                 ],
                 "test": /\.css$/,
@@ -150,6 +153,7 @@ module.exports = {
             {
                 "exclude": [
                     path.join(process.cwd(), "node_modules/bootstrap/dist/css/bootstrap.min.css"),
+                    path.join(process.cwd(), "node_modules/nouislider/distribute/nouislider.min.css"),
                     path.join(process.cwd(), "src/styles.scss")
                 ],
                 "test": /\.scss$|\.sass$/,
@@ -182,6 +186,7 @@ module.exports = {
             {
                 "exclude": [
                     path.join(process.cwd(), "node_modules/bootstrap/dist/css/bootstrap.min.css"),
+                    path.join(process.cwd(), "node_modules/nouislider/distribute/nouislider.min.css"),
                     path.join(process.cwd(), "src/styles.scss")
                 ],
                 "test": /\.less$/,
@@ -212,6 +217,7 @@ module.exports = {
             {
                 "exclude": [
                     path.join(process.cwd(), "node_modules/bootstrap/dist/css/bootstrap.min.css"),
+                    path.join(process.cwd(), "node_modules/nouislider/distribute/nouislider.min.css"),
                     path.join(process.cwd(), "src/styles.scss")
                 ],
                 "test": /\.styl$/,
@@ -243,6 +249,7 @@ module.exports = {
             {
                 "include": [
                     path.join(process.cwd(), "node_modules/bootstrap/dist/css/bootstrap.min.css"),
+                    path.join(process.cwd(), "node_modules/nouislider/distribute/nouislider.min.css"),
                     path.join(process.cwd(), "src/styles.scss")
                 ],
                 "test": /\.css$/,
@@ -267,6 +274,7 @@ module.exports = {
             {
                 "include": [
                     path.join(process.cwd(), "node_modules/bootstrap/dist/css/bootstrap.min.css"),
+                    path.join(process.cwd(), "node_modules/nouislider/distribute/nouislider.min.css"),
                     path.join(process.cwd(), "src/styles.scss")
                 ],
                 "test": /\.scss$|\.sass$/,
@@ -299,6 +307,7 @@ module.exports = {
             {
                 "include": [
                     path.join(process.cwd(), "node_modules/bootstrap/dist/css/bootstrap.min.css"),
+                    path.join(process.cwd(), "node_modules/nouislider/distribute/nouislider.min.css"),
                     path.join(process.cwd(), "src/styles.scss")
                 ],
                 "test": /\.less$/,
@@ -329,6 +338,7 @@ module.exports = {
             {
                 "include": [
                     path.join(process.cwd(), "node_modules/bootstrap/dist/css/bootstrap.min.css"),
+                    path.join(process.cwd(), "node_modules/nouislider/distribute/nouislider.min.css"),
                     path.join(process.cwd(), "src/styles.scss")
                 ],
                 "test": /\.styl$/,

packages/usb/get-module-state.js

@@ -0,0 +1,14 @@
+#!/usr/bin/env node
+const uhk = require('./uhk');
+const device = uhk.getUhkDevice();
+
+function getModuleState() {
+    const payload = new Buffer([uhk.usbCommands.getModuleProperties, 1]);
+    console.log('Sending ', uhk.bufferToString(payload));
+    device.write(uhk.getTransferData(payload));
+    const receivedBuffer = device.readSync();
+    console.log('Received', uhk.bufferToString(receivedBuffer));
+    setTimeout(getModuleState, 500)
+}
+
+getModuleState();

packages/usb/uhk.js

@@ -76,6 +76,7 @@ exports = module.exports = moduleExports = {
         getDebugBuffer          : 0x0b,
         getAdcValue             : 0x0c,
         setLedPwmBrightness     : 0x0d,
+        getModuleProperties     : 0x0e,
     },
     enumerationModes: {
         bootloader: 0,

packages/usb/update-loop-getkey.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+firmwarePath=$1
+
+while true; do
+    read -n 1 char
+    if [[ $char == "a" ]]; then
+        ./update-firmwares-and-configs.js "$firmwarePath" ansi
+    elif [[ $char == "i" ]]; then
+        ./update-firmwares-and-configs.js "$firmwarePath" iso
+    fi
+done

packages/usb/zadic/install-win-driver-ia32.bat

@@ -0,0 +1 @@
+zadic-ia32.exe --vid 0x1d50 --pid 0x6120 --iface 0 --usealldevices --noprompt

packages/usb/zadic/install-win-driver-x64.bat

@@ -0,0 +1 @@
+zadic-x64.exe --vid 0x1d50 --pid 0x6120 --iface 0 --usealldevices --noprompt