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

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 {

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;
+    leftModuleInfo?: LeftModuleInfo;
-    rightModuleInfo?: HardwareModuleInfo;
+    rightModuleInfo?: RightModuleInfo;
 }

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';

packages/uhk-common/src/models/left-module-info.ts

@@ -1,4 +1,4 @@
-export interface HardwareModuleInfo {
+export interface LeftModuleInfo {
     firmwareVersion?: string;
     moduleProtocolVersion?: string;
 }

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;
+}

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()}`
         };
     }
 

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"

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) {

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">

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;

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:

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';

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');
+});