Mouse speed UI (#537)

* Add SliderProps interface to SliderWrapperComponent

* Implement mouse speed page

* Remove duplicate DefaultUserConfigurationService from shared module

* Add Reset speeds to default button

* Move reset button to bottom of mouse speed page

* Change mouse move slider step to 25

* Add label and tooltip handling to SliderWrapperComponent

* Use altered SliderWrapperComponent in mouse speed page

* Use altered SliderWrapperComponent in LED brightness page

* Move Reset mouse speeds confirmation popover to above button

* Add reset mouse speed settings action and effect

* Use ResetMouseSpeedSettingsAction in mouse speed page to reset settings

* Remove unused import

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

@@ -4,44 +4,37 @@
 </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>
-        
+        <slider-wrapper
+            label="LED display icon and layer texts brightness"
+            [min]="0"
+            [max]="255"
+            [step]="1"
+            [pips]="sliderPips"
+            [(ngModel)]="iconsAndLayerTextsBrightness"
+            (ngModelChange)="onSetPropertyValue('iconsAndLayerTextsBrightness', $event)"></slider-wrapper>
     </div>
 </div>
 <div class="row led-setting">
     <div class="col-xs-12 col-md-6">
-        <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>
+        <slider-wrapper
+            label="LED display alphanumeric segments brightness"
+            [min]="0"
+            [max]="255"
+            [step]="1"
+            [pips]="sliderPips"
+            [(ngModel)]="alphanumericSegmentsBrightness"
+            (ngModelChange)="onSetPropertyValue('alphanumericSegmentsBrightness', $event)"></slider-wrapper>
     </div>
 </div>
 <div class="row led-setting">
     <div class="col-xs-12 col-md-6">
-        <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>
+        <slider-wrapper
+            label="Key backlight brightness"
+            [min]="0"
+            [max]="255"
+            [step]="1"
+            [pips]="sliderPips"
+            [(ngModel)]="keyBacklightBrightness"
+            (ngModelChange)="onSetPropertyValue('keyBacklightBrightness', $event)"></slider-wrapper>
     </div>
 </div>

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

@@ -12,8 +12,4 @@
     .led-setting {
         margin-bottom: 6rem;
     }
-
-    .slider-wrapper-container {
-        margin-left: 1.6rem;
-    }
 }

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

@@ -2,6 +2,41 @@
     <i class="fa fa-sliders"></i>
     <span>Mouse speed</span>
 </h1>
-<p>
-    Coming soon ...
-</p>
+<h3>Mouse pointer speed</h3>
+<div class="row mouse-speed-setting" *ngFor="let prop of moveProps">
+    <div class="col-xs-12 col-md-6">
+        <slider-wrapper
+            [label]="prop.title"
+            [tooltip]="prop.tooltip"
+            [min]="moveSettings.min"
+            [max]="moveSettings.max"
+            [step]="moveSettings.step"
+            [pips]="sliderPips"
+            [valueUnit]="prop.valueUnit"
+            [(ngModel)]="prop.value"
+            (ngModelChange)="onSetPropertyValue(prop.prop, $event)"></slider-wrapper>
+    </div>
+</div>
+<h3>Mouse scroll speed</h3>
+<div class="row mouse-speed-setting" *ngFor="let prop of scrollProps">
+    <div class="col-xs-12 col-md-6">
+        <slider-wrapper
+            [label]="prop.title"
+            [tooltip]="prop.tooltip"
+            [min]="scrollSettings.min"
+            [max]="scrollSettings.max"
+            [step]="scrollSettings.step"
+            [pips]="sliderPips"
+            [valueUnit]="prop.valueUnit"
+            [(ngModel)]="prop.value"
+            (ngModelChange)="onSetPropertyValue(prop.prop, $event)"></slider-wrapper>
+    </div>
+</div>
+<button class="btn btn-danger mouse-speed-reset-button"
+        mwlConfirmationPopover
+        title="Are you sure?"
+        placement="top"
+        confirmText="Yes"
+        cancelText="No"
+        (confirm)="resetToDefault()">Reset speeds to default
+</button>

packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.scss

@@ -4,4 +4,25 @@
     height: 100%;
     width: 100%;
 
+    label {
+        display: block;
+        font-weight: normal;
+
+        icon {
+            display: inline-block;
+        }
+    }
+
+    .mouse-speed-reset-button {
+        display: block;
+        margin-bottom: 4rem;
+    }
+
+    .mouse-speed-setting {
+        margin-bottom: 6rem;
+
+        + h3 {
+            margin-top: 2rem;
+        }
+    }
 }

packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.ts

@@ -1,4 +1,14 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppState, getUserConfiguration } from '../../../store';
+import { SetUserConfigurationValueAction } from '../../../store/actions/user-config';
+import { DefaultUserConfigurationService } from '../../../services/default-user-configuration.service';
+import { SliderPips, SliderProps } from '../../slider-wrapper/slider-wrapper.component';
+import { Subscription } from 'rxjs/Subscription';
+import { UserConfiguration } from 'uhk-common';
+import { ResetMouseSpeedSettingsAction } from '../../../store/actions/device';
+
+const MOUSE_MOVE_VALUE_MULTIPLIER = 25;
 
 @Component({
     selector: 'device-mouse-speed',
@@ -8,5 +18,131 @@ import { Component } from '@angular/core';
         'class': 'container-fluid'
     }
 })
-export class MouseSpeedComponent {
+export class MouseSpeedComponent implements OnInit, OnDestroy {
+    public moveProps = [
+        {
+            prop: 'mouseMoveInitialSpeed',
+            title: 'Initial speed',
+            tooltip: 'When mouse movement begins, this is the starting speed.',
+            valueUnit: 'px/s',
+            value: 0
+        },
+        {
+            prop: 'mouseMoveBaseSpeed',
+            title: 'Base speed',
+            tooltip: 'This speed is reached after the initial moving speed sufficiently ramps up.',
+            valueUnit: 'px/s',
+            value: 0
+        },
+        {
+            prop: 'mouseMoveAcceleration',
+            title: 'Acceleration',
+            tooltip: 'The rate of acceleration from the initial movement speed to the base speed.',
+            valueUnit: 'px/s²',
+            value: 0
+        },
+        {
+            prop: 'mouseMoveDeceleratedSpeed',
+            title: 'Decelerated speed',
+            tooltip: 'This speed is used while moving with the <i>decelerate key</i> pressed.',
+            valueUnit: 'px/s',
+            value: 0
+        },
+        {
+            prop: 'mouseMoveAcceleratedSpeed',
+            title: 'Accelerated speed',
+            tooltip: 'This speed is used while moving with the <i>accelerate key</i> pressed.',
+            valueUnit: 'px/s',
+            value: 0
+        }
+    ];
+
+    public scrollProps = [
+        {
+            prop: 'mouseScrollInitialSpeed',
+            title: 'Initial speed',
+            tooltip: 'When mouse scrolling begins, this is the starting speed.',
+            valueUnit: 'pulse/s',
+            value: 0
+        },
+        {
+            prop: 'mouseScrollBaseSpeed',
+            title: 'Base speed',
+            tooltip: 'This speed is reached after the initial scrolling speed sufficiently ramps up.',
+            valueUnit: 'pulse/s',
+            value: 0
+        },
+        {
+            prop: 'mouseScrollAcceleration',
+            title: 'Acceleration',
+            tooltip: 'The rate of acceleration from the initial scrolling speed to the base speed.',
+            valueUnit: 'pulse/s²',
+            value: 0
+        },
+        {
+            prop: 'mouseScrollDeceleratedSpeed',
+            title: 'Decelerated speed',
+            tooltip: 'This speed is used while scrolling with the <i>decelerate key</i> pressed.',
+            valueUnit: 'pulse/s',
+            value: 0
+        },
+        {
+            prop: 'mouseScrollAcceleratedSpeed',
+            title: 'Accelerated speed',
+            tooltip: 'This speed is used while scrolling with the <i>accelerate key</i> pressed.',
+            valueUnit: 'pulse/s',
+            value: 0
+        }
+    ];
+
+    public sliderPips: SliderPips = {
+        mode: 'positions',
+        values: [0, 50, 100],
+        density: 6,
+        stepped: true
+    };
+
+    public moveSettings: SliderProps = {
+        min: MOUSE_MOVE_VALUE_MULTIPLIER,
+        max: 6375,
+        step: MOUSE_MOVE_VALUE_MULTIPLIER
+    };
+
+    public scrollSettings: SliderProps = {
+        min: 1,
+        max: 255,
+        step: 1
+    };
+
+    private userConfig$: Store<UserConfiguration>;
+    private userConfigSubscription: Subscription;
+
+    constructor(private store: Store<AppState>, private defaultUserConfigurationService: DefaultUserConfigurationService) {}
+
+    ngOnInit(): void {
+        this.userConfig$ = this.store.select(getUserConfiguration);
+        this.userConfigSubscription = this.userConfig$.subscribe(config => {
+            this.moveProps.forEach(moveProp => {
+                moveProp.value = config[moveProp.prop] * MOUSE_MOVE_VALUE_MULTIPLIER || 0;
+            });
+            this.scrollProps.forEach(scrollProp => {
+                scrollProp.value = config[scrollProp.prop] || 0;
+            });
+        });
+    }
+
+    ngOnDestroy(): void {
+        this.userConfigSubscription.unsubscribe();
+    }
+
+    onSetPropertyValue(propertyName: string, value: number): void {
+        this.store.dispatch(new SetUserConfigurationValueAction({
+            propertyName,
+            value: propertyName.indexOf('mouseMove') !== -1 ? value / MOUSE_MOVE_VALUE_MULTIPLIER : value
+        }));
+    }
+
+    resetToDefault() {
+       this.store.dispatch(new ResetMouseSpeedSettingsAction());
+    }
 }

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

@@ -1,13 +1,24 @@
-<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>
+<label *ngIf="label">
+    <span>{{label}}</span>
+    <icon name="question-circle"
+            data-toggle="tooltip"
+            [title]="tooltip"
+            html="true"
+            data-placement="bottom"
+            *ngIf="tooltip"></icon>
+</label>
+<div class="slider-wrapper">
+    <div class="slider-container">
+        <nouislider
+            [min]="min"
+            [max]="max"
+            [step]="step"
+            [keyboard]="true"
+            [tooltips]="true"
+            [(ngModel)]="value"
+            (ngModelChange)="onSliderChange($event)"></nouislider>
+    </div>
+    <div class="slider-value">
+        <div class="value-indicator">{{value}} {{valueUnit}}</div>
+    </div>
 </div>

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

@@ -1,6 +1,18 @@
 :host {
-    display: flex;
-    flex-direction: row;
+    label {
+        display: block;
+        font-weight: normal;
+
+        icon {
+            display: inline-block;
+        }
+    }
+
+    .slider-wrapper {
+        display: flex;
+        flex-direction: row;
+        padding-left: 1.6rem;
+    }
 
     .slider-container {
         width: 80%;

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

@@ -13,6 +13,14 @@ export interface SliderPips {
     stepped?: boolean;
 }
 
+export interface SliderProps {
+    min: number;
+    max: number;
+    step?: number;
+    pips?: SliderPips;
+    valueUnit?: string;
+}
+
 @Component({
     selector: 'slider-wrapper',
     templateUrl: './slider-wrapper.component.html',
@@ -23,6 +31,8 @@ export interface SliderPips {
 })
 export class SliderWrapperComponent implements AfterViewInit, ControlValueAccessor, OnDestroy {
     @ViewChild(NouisliderComponent) slider: NouisliderComponent;
+    @Input() label: string;
+    @Input() tooltip: string;
     @Input() min: number;
     @Input() max: number;
     @Input() step: number;

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

@@ -193,7 +193,6 @@ import { SliderWrapperComponent } from './components/slider-wrapper/slider-wrapp
         DataStorageRepositoryService,
         DefaultUserConfigurationService,
         LogService,
-        DefaultUserConfigurationService,
         AppUpdateRendererService,
         AppRendererService,
         IpcCommonRenderer,

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

@@ -16,6 +16,7 @@ export const ActionTypes = {
     SAVE_TO_KEYBOARD_FAILED: type(PREFIX + 'save to keyboard failed'),
     HIDE_SAVE_TO_KEYBOARD_BUTTON: type(PREFIX + 'hide save to keyboard button'),
     RESET_USER_CONFIGURATION: type(PREFIX + 'reset user configuration'),
+    RESET_MOUSE_SPEED_SETTINGS: type(PREFIX + 'reset mouse speed settings'),
     UPDATE_FIRMWARE: type(PREFIX + 'update firmware'),
     UPDATE_FIRMWARE_WITH: type(PREFIX + 'update firmware with'),
     UPDATE_FIRMWARE_REPLY: type(PREFIX + 'update firmware reply'),
@@ -109,6 +110,10 @@ export class UpdateFirmwareOkButtonAction implements Action {
     type = ActionTypes.UPDATE_FIRMWARE_OK_BUTTON;
 }
 
+export class ResetMouseSpeedSettingsAction implements Action {
+    type = ActionTypes.RESET_MOUSE_SPEED_SETTINGS;
+}
+
 export type Actions
     = SetPrivilegeOnLinuxAction
     | SetPrivilegeOnLinuxReplyAction
@@ -119,6 +124,7 @@ export type Actions
     | SaveToKeyboardSuccessAction
     | SaveToKeyboardSuccessFailed
     | HideSaveToKeyboardButton
+    | ResetMouseSpeedSettingsAction
     | ResetUserConfigurationAction
     | UpdateFirmwareAction
     | UpdateFirmwareWithAction

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

@@ -130,6 +130,30 @@ export class DeviceEffects {
             .switchMap(() => Observable.of(new HideSaveToKeyboardButton()))
         );
 
+    @Effect()
+    resetMouseSpeedSettings$: Observable<Action> = this.actions$
+        .ofType(ActionTypes.RESET_MOUSE_SPEED_SETTINGS)
+        .switchMap(() => {
+            const config = this.defaultUserConfigurationService.getDefault();
+            const mouseSpeedDefaultSettings = {};
+            const mouseSpeedProps = [
+                'mouseMoveInitialSpeed',
+                'mouseMoveAcceleration',
+                'mouseMoveDeceleratedSpeed',
+                'mouseMoveBaseSpeed',
+                'mouseMoveAcceleratedSpeed',
+                'mouseScrollInitialSpeed',
+                'mouseScrollAcceleration',
+                'mouseScrollDeceleratedSpeed',
+                'mouseScrollBaseSpeed',
+                'mouseScrollAcceleratedSpeed'
+            ];
+            mouseSpeedProps.forEach(prop => {
+                mouseSpeedDefaultSettings[prop] = config[prop];
+            });
+            return Observable.of(new LoadResetUserConfigurationAction(<UserConfiguration>mouseSpeedDefaultSettings));
+        });
+
     @Effect() resetUserConfiguration$: Observable<Action> = this.actions$
         .ofType(ActionTypes.RESET_USER_CONFIGURATION)
         .switchMap(() => {