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
2017-12-27 21:10:55 +02:00
parent 5ceca41e0f
commit 90f56c350e
19 changed files with 2098 additions and 557 deletions
--- a/packages/uhk-web/.angular-cli.json
+++ b/packages/uhk-web/.angular-cli.json
@@ -21,11 +21,13 @@
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
+        "../node_modules/nouislider/distribute/nouislider.min.css",
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/bootstrap/dist/js/bootstrap.js",
-        "../node_modules/select2/dist/js/select2.full.js"
+        "../node_modules/select2/dist/js/select2.full.js",
+        "../node_modules/nouislider/distribute/nouislider.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
--- a/packages/uhk-web/package-lock.json
+++ b/packages/uhk-web/package-lock.json
--- a/packages/uhk-web/package.json
+++ b/packages/uhk-web/package.json
@@ -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",
--- a/packages/uhk-web/src/app/components/device/device.routes.ts
+++ b/packages/uhk-web/src/app/components/device/device.routes.ts
@@ -3,6 +3,7 @@ import { Routes } from '@angular/router';
 import { DeviceConfigurationComponent } from './configuration/device-configuration.component';
 import { DeviceFirmwareComponent } from './firmware/device-firmware.component';
 import { MouseSpeedComponent } from './mouse-speed/mouse-speed.component';
+import { LEDBrightnessComponent } from './led-brightness/led-brightness.component';

 export const deviceRoutes: Routes = [
    {
@@ -21,6 +22,10 @@ export const deviceRoutes: Routes = [
                path: 'mouse-speed',
                component: MouseSpeedComponent
            },
+            {
+                path: 'led-brightness',
+                component: LEDBrightnessComponent
+            },
            {
                path: 'firmware',
                component: DeviceFirmwareComponent
--- a/packages/uhk-web/src/app/components/device/index.ts
+++ b/packages/uhk-web/src/app/components/device/index.ts
@@ -1,4 +1,5 @@
 export * from './configuration/device-configuration.component';
 export * from './firmware/device-firmware.component';
 export * from './mouse-speed/mouse-speed.component';
+export * from './led-brightness/led-brightness.component';
 export * from './device.routes';
--- a/packages/uhk-web/src/app/components/device/led-brightness/led-brightness.component.html
+++ b/packages/uhk-web/src/app/components/device/led-brightness/led-brightness.component.html
@@ -0,0 +1,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>
--- a/packages/uhk-web/src/app/components/device/led-brightness/led-brightness.component.scss
+++ b/packages/uhk-web/src/app/components/device/led-brightness/led-brightness.component.scss
@@ -0,0 +1,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;
+    }
+}
--- a/packages/uhk-web/src/app/components/device/led-brightness/led-brightness.component.ts
+++ b/packages/uhk-web/src/app/components/device/led-brightness/led-brightness.component.ts
@@ -0,0 +1,53 @@
+import { AfterViewInit, Component, OnInit, OnDestroy, ViewChildren, QueryList } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppState, getUserConfiguration } from '../../../store';
+import { SetUserConfigurationValueAction } from '../../../store/actions/user-config';
+import { SliderPips } from '../../slider-wrapper/slider-wrapper.component';
+import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
+import { UserConfiguration } from 'uhk-common';
+
+@Component({
+    selector: 'device-led-brightness',
+    templateUrl: './led-brightness.component.html',
+    styleUrls: ['./led-brightness.component.scss'],
+    host: {
+        'class': 'container-fluid'
+    }
+})
+export class LEDBrightnessComponent implements OnInit, OnDestroy {
+    public iconsAndLayerTextsBrightness: number = 0;
+    public alphanumericSegmentsBrightness: number = 0;
+    public keyBacklightBrightness: number = 0;
+    public sliderPips: SliderPips = {
+        mode: 'positions',
+        values: [0, 50, 100],
+        density: 6,
+        stepped: true
+    };
+
+    private userConfig$: Store<UserConfiguration>;
+    private userConfigSubscription: Subscription;
+
+    constructor(private store: Store<AppState>) {}
+
+    ngOnInit() {
+        this.userConfig$ = this.store.select(getUserConfiguration);
+        this.userConfigSubscription = this.userConfig$.subscribe(config => {
+            this.iconsAndLayerTextsBrightness = config.iconsAndLayerTextsBrightness;
+            this.alphanumericSegmentsBrightness = config.alphanumericSegmentsBrightness;
+            this.keyBacklightBrightness = config.keyBacklightBrightness;
+        });
+    }
+
+    ngOnDestroy() {
+        this.userConfigSubscription.unsubscribe();
+    }
+
+    onSetPropertyValue(propertyName: string, value: number): void {
+        this.store.dispatch(new SetUserConfigurationValueAction({
+            propertyName,
+            value
+        }));
+    }
+}
--- a/packages/uhk-web/src/app/components/side-menu/side-menu.component.html
+++ b/packages/uhk-web/src/app/components/side-menu/side-menu.component.html
@@ -23,6 +23,12 @@
                               [class.disabled]="updatingFirmware$ | async">Mouse speed</a>
                        </div>
                    </li>
+                    <li class="sidebar__level-2--item">
+                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                            <a [routerLink]="['/device/led-brightness']"
+                               [class.disabled]="updatingFirmware$ | async">LED brightness</a>
+                        </div>
+                    </li>
                    <li class="sidebar__level-2--item">
                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
                            <a [routerLink]="['/device/configuration']"
--- a/packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.html
+++ b/packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.html
@@ -0,0 +1,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>
--- a/packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.scss
+++ b/packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.scss
@@ -0,0 +1,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;
+    }
+}
--- a/packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.ts
+++ b/packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.ts
@@ -0,0 +1,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 = () => {};
+}
--- a/packages/uhk-web/src/app/models/user-configuration-value.ts
+++ b/packages/uhk-web/src/app/models/user-configuration-value.ts
@@ -0,0 +1,4 @@
+export interface UserConfigurationValue {
+    propertyName: string;
+    value: number;
+}
--- a/packages/uhk-web/src/app/shared.module.ts
+++ b/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
--- a/packages/uhk-web/src/app/store/actions/user-config.ts
+++ b/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
    ;
--- a/packages/uhk-web/src/app/store/effects/user-config.ts
+++ b/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]) => {
--- a/packages/uhk-web/src/app/store/reducers/user-configuration.ts
+++ b/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;
    }
--- a/packages/uhk-web/src/styles.scss
+++ b/packages/uhk-web/src/styles.scss
@@ -90,3 +90,7 @@ a.disabled {
    width: 100%;
    display: inline-block;
 }
+
+.noUi-value {
+    top: 2rem;
+}
--- a/packages/uhk-web/webpack.config.js
+++ b/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$/,