feat: support more mouse buttons (#936)

* feat: support more mouse buttons (#834) * Remove unused style. * Retrigger CI * fix: more button click and texts * fix: the mouse button 4-8 naming * feat: allow extra mouse buttons if userConfig version >= 4.1.1 * fix: version comparison * fix: read correctly the right module informations
2019-08-23 22:00:01 +02:00
parent fae83a4148
commit 49d31f90f7
13 changed files with 109 additions and 12 deletions
--- a/packages/uhk-common/src/config-serializer/config-items/key-action/mouse-action.ts
+++ b/packages/uhk-common/src/config-serializer/config-items/key-action/mouse-action.ts
@@ -15,7 +15,12 @@ export enum MouseActionParam {
    scrollLeft,
    scrollRight,
    accelerate,
-    decelerate
+    decelerate,
+    button4,
+    button5,
+    button6,
+    button7,
+    button8
 }

 export class MouseAction extends KeyAction {
--- a/packages/uhk-common/src/models/hardware-modules.ts
+++ b/packages/uhk-common/src/models/hardware-modules.ts
@@ -1,6 +1,7 @@
-import { HardwareModuleInfo } from './hardware-module-info';
+import { LeftModuleInfo } from './left-module-info';
+import { RightModuleInfo } from './right-module-info';

 export interface HardwareModules {
-    leftModuleInfo?: HardwareModuleInfo;
-    rightModuleInfo?: HardwareModuleInfo;
+    leftModuleInfo?: LeftModuleInfo;
+    rightModuleInfo?: RightModuleInfo;
 }
--- a/packages/uhk-common/src/models/index.ts
+++ b/packages/uhk-common/src/models/index.ts
@@ -6,8 +6,9 @@ export * from './app-start-info';
 export * from './configuration-reply';
 export * from './version-information';
 export * from './device-connection-state';
+export * from './left-module-info';
 export * from './hardware-modules';
-export * from './hardware-module-info';
+export * from './right-module-info';
 export * from './save-user-configuration-data';
 export * from './udev-rules-info';
 export * from './update-firmware-data';
--- a/packages/uhk-common/src/models/hardware-module-info.ts
+++ b/packages/uhk-common/src/models/hardware-module-info.ts
@@ -1,4 +1,4 @@
-export interface HardwareModuleInfo {
+export interface LeftModuleInfo {
    firmwareVersion?: string;
    moduleProtocolVersion?: string;
 }
--- a/packages/uhk-common/src/models/right-module-info.ts
+++ b/packages/uhk-common/src/models/right-module-info.ts
@@ -0,0 +1,7 @@
+export interface RightModuleInfo {
+    deviceProtocolVersion?: string;
+    hardwareConfigVersion?: string;
+    firmwareVersion?: string;
+    moduleProtocolVersion?: string;
+    userConfigVersion?: string;
+}
--- a/packages/uhk-usb/src/uhk-operations.ts
+++ b/packages/uhk-usb/src/uhk-operations.ts
@@ -1,4 +1,4 @@
-import { HardwareModuleInfo, LogService, UhkBuffer } from 'uhk-common';
+import { LeftModuleInfo, LogService, RightModuleInfo, UhkBuffer } from 'uhk-common';
 import { DataOption, KBoot, Properties, UsbPeripheral } from 'kboot';

 import {
@@ -248,7 +248,7 @@ export class UhkOperations {
        return false;
    }

-    public async getLeftModuleVersionInfo(): Promise<HardwareModuleInfo> {
+    public async getLeftModuleVersionInfo(): Promise<LeftModuleInfo> {
        try {
            this.logService.debug('[DeviceOperation] USB[T]: Read left module version information');

@@ -277,7 +277,7 @@ export class UhkOperations {
        };
    }

-    public async getRightModuleVersionInfo(): Promise<HardwareModuleInfo> {
+    public async getRightModuleVersionInfo(): Promise<RightModuleInfo> {
        this.logService.debug('[DeviceOperation] USB[T]: Read right module version information');

        const command = Buffer.from([UsbCommand.GetProperty, DevicePropertyIds.ProtocolVersions]);
@@ -287,7 +287,11 @@ export class UhkOperations {
        uhkBuffer.readUInt8();

        return {
-            firmwareVersion: `${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}`
+            firmwareVersion: `${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}`,
+            deviceProtocolVersion: `${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}`,
+            moduleProtocolVersion: `${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}`,
+            userConfigVersion: `${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}`,
+            hardwareConfigVersion: `${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}`
        };
    }

--- a/packages/uhk-web/src/app/components/popover/popover.component.html
+++ b/packages/uhk-web/src/app/components/popover/popover.component.html
@@ -38,6 +38,7 @@
        ></layer-tab>
        <mouse-tab #tab *ngSwitchCase="tabName.Mouse" class="popover-content"
                   [defaultKeyAction]="defaultKeyAction"
+                   [extraMouseButtonsSupported]="extraMouseButtonsSupported$ | async"
                   (validAction)="setKeyActionValidState($event)"
        ></mouse-tab>
        <macro-tab #tab *ngSwitchCase="tabName.Macro" class="popover-content"
--- a/packages/uhk-web/src/app/components/popover/popover.component.ts
+++ b/packages/uhk-web/src/app/components/popover/popover.component.ts
@@ -30,7 +30,7 @@ import {

 import { Tab } from './tab';

-import { AppState, getKeymaps, macroPlaybackSupported } from '../../store';
+import { AppState, extraMouseButtonsSupported, getKeymaps, macroPlaybackSupported } from '../../store';
 import { KeyActionRemap } from '../../models/key-action-remap';
 import { RemapInfo } from '../../models/remap-info';

@@ -145,6 +145,7 @@ export class PopoverComponent implements OnChanges {
        }
    ];
    macroPlaybackSupported$: Observable<boolean>;
+    extraMouseButtonsSupported$: Observable<boolean>;

    private readonly currentKeymap$ = new BehaviorSubject<Keymap>(undefined);

@@ -158,6 +159,7 @@ export class PopoverComponent implements OnChanges {
                        keymaps.filter((keymap: Keymap) => currentKeymap.abbreviation !== keymap.abbreviation))
            );
        this.macroPlaybackSupported$ = store.select(macroPlaybackSupported);
+        this.extraMouseButtonsSupported$ = store.select(extraMouseButtonsSupported);
    }

    ngOnChanges(change: SimpleChanges) {
--- a/packages/uhk-web/src/app/components/popover/tab/mouse/mouse-tab.component.html
+++ b/packages/uhk-web/src/app/components/popover/tab/mouse/mouse-tab.component.html
@@ -80,6 +80,27 @@
                    [class.btn-primary]="mouseActionParam === MouseActionParam.rightClick"
                    (click)="setMouseActionParam(MouseActionParam.rightClick)">Right</button>
        </div>
+        <div class="additional-keys" *ngIf="extraMouseButtonsSupported">
+            <div class="btn-group col-xs-12" role="group">
+                <button type="button" class="btn btn-default col-xs-4"
+                        [class.btn-primary]="mouseActionParam === MouseActionParam.button4"
+                        (click)="setMouseActionParam(MouseActionParam.button4)">Button 4</button>
+                <button type="button" class="btn btn-default col-xs-4"
+                        [class.btn-primary]="mouseActionParam === MouseActionParam.button5"
+                        (click)="setMouseActionParam(MouseActionParam.button5)">Button 5</button>
+                <button type="button" class="btn btn-default col-xs-4"
+                        [class.btn-primary]="mouseActionParam === MouseActionParam.button6"
+                        (click)="setMouseActionParam(MouseActionParam.button6)">Button 6</button>
+            </div>
+            <div class="btn-group col-xs-12" role="group">
+                <button type="button" class="btn btn-default col-xs-6"
+                        [class.btn-primary]="mouseActionParam === MouseActionParam.button7"
+                        (click)="setMouseActionParam(MouseActionParam.button7)">Button 7</button>
+                <button type="button" class="btn btn-default col-xs-6"
+                        [class.btn-primary]="mouseActionParam === MouseActionParam.button8"
+                        (click)="setMouseActionParam(MouseActionParam.button8)">Button 8</button>
+            </div>
+        </div>
    </div>
    <div *ngSwitchCase="3" class="mouse__config mouse__config--speed text-center">
        <div class="help-text--mouse-speed text-left">
@@ -104,4 +125,4 @@
    </div>
    <div *ngSwitchDefault>
    </div>
-</div>
+</div>
--- a/packages/uhk-web/src/app/components/popover/tab/mouse/mouse-tab.component.scss
+++ b/packages/uhk-web/src/app/components/popover/tab/mouse/mouse-tab.component.scss
@@ -54,6 +54,32 @@
    }
 }

+.mouse__config--click {
+    .additional-keys {
+        display: inline-block;
+        margin-top: 1rem;
+
+        .btn-group:first-child {
+            .btn {
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+        }
+
+        .btn-group:last-child {
+            .btn {
+                border-top: 0;
+                border-top-left-radius: 0;
+                border-top-right-radius: 0;
+
+                &:last-child {
+                    right: 1px;
+                }
+            }
+        }
+    }
+}
+
 .mouse__config--speed {
    .btn-default {
        font-size: 25px;
--- a/packages/uhk-web/src/app/components/popover/tab/mouse/mouse-tab.component.ts
+++ b/packages/uhk-web/src/app/components/popover/tab/mouse/mouse-tab.component.ts
@@ -11,6 +11,7 @@ import { Tab } from '../tab';
 })
 export class MouseTabComponent extends Tab implements OnChanges {
    @Input() defaultKeyAction: KeyAction;
+    @Input() extraMouseButtonsSupported: boolean;

    /* tslint:disable:variable-name: It is an enum type. So it can start with uppercase. */
    MouseActionParam = MouseActionParam;
@@ -62,6 +63,11 @@ export class MouseTabComponent extends Tab implements OnChanges {
            case MouseActionParam.leftClick:
            case MouseActionParam.middleClick:
            case MouseActionParam.rightClick:
+            case MouseActionParam.button4:
+            case MouseActionParam.button5:
+            case MouseActionParam.button6:
+            case MouseActionParam.button7:
+            case MouseActionParam.button8:
                this.selectedPageIndex = 2;
                break;
            case MouseActionParam.decelerate:
--- a/packages/uhk-web/src/app/components/svg/keys/svg-mouse-key/svg-mouse-key.ts
+++ b/packages/uhk-web/src/app/components/svg/keys/svg-mouse-key/svg-mouse-key.ts
@@ -28,6 +28,26 @@ export class SvgMouseKeyComponent implements OnChanges {
                this.type = 'click';
                this.param = 'Middle';
                break;
+            case MouseActionParam.button4:
+                this.type = 'click';
+                this.param = 'Button 4';
+                break;
+            case MouseActionParam.button5:
+                this.type = 'click';
+                this.param = 'Button 5';
+                break;
+            case MouseActionParam.button6:
+                this.type = 'click';
+                this.param = 'Button 6';
+                break;
+            case MouseActionParam.button7:
+                this.type = 'click';
+                this.param = 'Button 7';
+                break;
+            case MouseActionParam.button8:
+                this.type = 'click';
+                this.param = 'Button 8';
+                break;
            case MouseActionParam.scrollDown:
                this.type = 'scroll';
                this.param = 'down';
--- a/packages/uhk-web/src/app/store/index.ts
+++ b/packages/uhk-web/src/app/store/index.ts
@@ -157,3 +157,6 @@ export const layerDoubleTapSupported = createSelector(
        return isVersionGte(hardwareModules.rightModuleInfo.firmwareVersion, '8.4.3');
    }
 );
+export const extraMouseButtonsSupported = createSelector(getHardwareModules, (hardwareModules: HardwareModules): boolean => {
+    return isVersionGte(hardwareModules.rightModuleInfo.userConfigVersion, '4.1.1');
+});