From 7e0bc39de162443308e2489b79268850d0195090 Mon Sep 17 00:00:00 2001 From: Mikko Lakomaa Date: Fri, 29 Dec 2017 14:07:01 +0200 Subject: [PATCH] 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 --- .../led-brightness.component.html | 55 +++---- .../led-brightness.component.scss | 4 - .../mouse-speed/mouse-speed.component.html | 41 ++++- .../mouse-speed/mouse-speed.component.scss | 21 +++ .../mouse-speed/mouse-speed.component.ts | 140 +++++++++++++++++- .../slider-wrapper.component.html | 35 +++-- .../slider-wrapper.component.scss | 16 +- .../slider-wrapper.component.ts | 10 ++ packages/uhk-web/src/app/shared.module.ts | 1 - .../uhk-web/src/app/store/actions/device.ts | 6 + .../uhk-web/src/app/store/effects/device.ts | 24 +++ 11 files changed, 298 insertions(+), 55 deletions(-) diff --git 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 index 55236292..0aa9a54d 100644 --- 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 @@ -4,44 +4,37 @@
- -
- -
- +
- -
- -
+
- -
- -
+
diff --git 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 index 2ab715a4..4f7c9230 100644 --- 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 @@ -12,8 +12,4 @@ .led-setting { margin-bottom: 6rem; } - - .slider-wrapper-container { - margin-left: 1.6rem; - } } diff --git a/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.html b/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.html index c545b035..93860a4c 100644 --- a/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.html +++ b/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.html @@ -2,6 +2,41 @@ Mouse speed -

- Coming soon ... -

+

Mouse pointer speed

+
+
+ +
+
+

Mouse scroll speed

+
+
+ +
+
+ \ No newline at end of file diff --git a/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.scss b/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.scss index 245af649..4d2ff84b 100644 --- a/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.scss +++ b/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; + } + } } diff --git a/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.ts b/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.ts index 263ad41d..26e94b46 100644 --- a/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.ts +++ b/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 decelerate key pressed.', + valueUnit: 'px/s', + value: 0 + }, + { + prop: 'mouseMoveAcceleratedSpeed', + title: 'Accelerated speed', + tooltip: 'This speed is used while moving with the accelerate key 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 decelerate key pressed.', + valueUnit: 'pulse/s', + value: 0 + }, + { + prop: 'mouseScrollAcceleratedSpeed', + title: 'Accelerated speed', + tooltip: 'This speed is used while scrolling with the accelerate key 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; + private userConfigSubscription: Subscription; + + constructor(private store: Store, 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()); + } } diff --git 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 index 1ccde917..76d9ab9e 100644 --- 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 @@ -1,13 +1,24 @@ -
- -
-
-
{{value}} {{valueUnit}}
+ +
+
+ +
+
+
{{value}} {{valueUnit}}
+
\ No newline at end of file diff --git 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 index ad9fd03f..39d324ab 100644 --- 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 @@ -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%; diff --git 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 index c0f23f0d..d6b62f6a 100644 --- 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 @@ -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; diff --git a/packages/uhk-web/src/app/shared.module.ts b/packages/uhk-web/src/app/shared.module.ts index dd504f53..a21f8a68 100644 --- a/packages/uhk-web/src/app/shared.module.ts +++ b/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, diff --git a/packages/uhk-web/src/app/store/actions/device.ts b/packages/uhk-web/src/app/store/actions/device.ts index 9497dc73..da559f4e 100644 --- a/packages/uhk-web/src/app/store/actions/device.ts +++ b/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 diff --git a/packages/uhk-web/src/app/store/effects/device.ts b/packages/uhk-web/src/app/store/effects/device.ts index e2732c50..d66ace94 100644 --- a/packages/uhk-web/src/app/store/effects/device.ts +++ b/packages/uhk-web/src/app/store/effects/device.ts @@ -130,6 +130,30 @@ export class DeviceEffects { .switchMap(() => Observable.of(new HideSaveToKeyboardButton())) ); + @Effect() + resetMouseSpeedSettings$: Observable = 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(mouseSpeedDefaultSettings)); + }); + @Effect() resetUserConfiguration$: Observable = this.actions$ .ofType(ActionTypes.RESET_USER_CONFIGURATION) .switchMap(() => {