LED brightness UI (#520)

* 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

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/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']"

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/models/user-configuration-value.ts

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

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/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/user-config.ts

@@ -72,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]) => {

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$/,