Refactor eventing

src/ui/Cargo.toml

@@ -1,2 +1,3 @@
 [workspace]
-members = ["src-tauri"]
+members = ["src-tauri"]
+resolver = "2"

src/ui/src-tauri/Cargo.toml

@@ -16,7 +16,7 @@ tauri-build = { version = "1.5", features = [] }
 tauri = { version = "1.5", features = ["shell-open"] }
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
-beolyd5_controller = "1.0.1"
+beolyd5_controller = "1.0.2"
 
 [features]
 # this feature is used for production builds or when `devPath` points to the filesystem

src/ui/src-tauri/src/hw_controller.rs

@@ -36,7 +36,7 @@ impl HWController {
             controller_clone.lock().unwrap().register_wheel_event_callback(Arc::new(Mutex::new(move |(wheel, pos): (Wheel, u8)| {
                 let payload = HardwareEvent {
                     kind: "wheel".to_string(),
-                    source: wheel.,
+                    source: wheel.to_string(),
                     value: pos,
                 };
 
@@ -49,7 +49,7 @@ impl HWController {
             controller_clone.lock().unwrap().register_button_event_callback(Arc::new(Mutex::new(move |button: Button| {
                 let payload = HardwareEvent {
                     kind: "button".to_string(),
-                    source: button,
+                    source: button.to_string(),
                     value: 0
                 };
 
@@ -108,4 +108,4 @@ struct WheelEvent {
 struct Diagnostics {
     message_type: String,
     message: String,
-}
+}

src/ui/src/hardware/events.ts

@@ -5,7 +5,7 @@ import {useUIStore} from "../stores/ui.ts";
 
 export enum Wheel {
     Front = "Front",
-    Angle = "Angle",
+    Angular = "Angular",
     Back = "Back"
 }
 
@@ -16,13 +16,6 @@ export enum Button {
     Standby = "Standby"
 }
 
-export interface WheelEvent {
-    payload: {
-        position: number,
-        wheel: string,
-    },
-}
-
 export interface HardwareEvent {
     payload: {
         kind: 'wheel' | 'button' | string,
@@ -32,51 +25,46 @@ export interface HardwareEvent {
 }
 
 export const startHardwareBridge = () => {
-
     const uiStore = useUIStore();
-
-    const allWheelEventsSubject = new Subject<WheelEvent>();
     const diagnosticsSubject = new Subject<any>();
 
-    const frontWheelEvents$ = allWheelEventsSubject.pipe(
-        filter(event => event.payload.wheel === 'Front')
-    ).pipe(bufferCount(10));
-    const backWheelEvents$ = allWheelEventsSubject.pipe(
-        filter(event => event.payload.wheel === 'Back')
-    ).pipe(bufferCount(10));
-
-    const unlisten = listen('wheelEvent', (event: WheelEvent) => {
-        allWheelEventsSubject.next(event);
-    });
-    const diags = listen('diagnostics', (event) => {
-        diagnosticsSubject.next(event);
-        console.log({event});
+    const unlisten = listen('hardwareEvent', (event: HardwareEvent) => {
+        uiStore.nextHardwareEvent(event);
     });
 
-    const unlistenAllEvents = listen('hardwareEvent', (event: HardwareEvent) => {
-        uiStore.hardwareEvents.next(event);
-    });
+    const wheelEvents$ = uiStore.hardwareEvents.pipe(
+        filter(event => event.payload.kind === 'wheel')
+    );
 
-    allWheelEventsSubject.subscribe((event) => {
-        if (event.payload.wheel == 'Angular') {
-            uiStore.wheelPointerAngle = arcs.translateToRange(event.payload.position, 152, 195);
-        }
-    });
+    wheelEvents$.pipe(
+            filter(event => event.payload.source === Wheel.Back),
+            bufferCount(10)
+        ).subscribe((events) => {
+            const event = events[events.length - 1];
+            const newVolume = uiStore.volume + wheelSpinDifference(event.payload.value);
+            uiStore.volume = Math.max(0, Math.min(newVolume, 100));
+        });
 
-    frontWheelEvents$.subscribe((events) => {
-        const event = events[events.length - 1];
-        uiStore.topWheelPosition = wheelSpinDifference(event.payload.position);
-    });
+    wheelEvents$.pipe(
+            filter(event => event.payload.source === Wheel.Front),
+            bufferCount(10)
+        ).subscribe((events) => {
+            const event = events[events.length - 1];
+            uiStore.topWheelPosition = wheelSpinDifference(event.payload.value);
+        });
 
-    backWheelEvents$.subscribe((events) => {
-        const event = events[events.length - 1];
-        let newVolume = uiStore.volume + wheelSpinDifference(event.payload.position);
-        uiStore.volume = Math.max(0, Math.min(newVolume, 100));
-    });
+    wheelEvents$.pipe(
+            filter(event => event.payload.source === Wheel.Angular)
+        ).subscribe((event) => {
+            uiStore.wheelPointerAngle = arcs.translateToRange(event.payload.value, 0,120,152, 205);
+        });
 
-    return {wheelEvents: allWheelEventsSubject, diagnostics: diagnosticsSubject};
+    const diags = listen('diagnostics', (event) => {
+        diagnosticsSubject.next(event);
+        console.log({event});
+    });
 }
 
-function wheelSpinDifference(value: number): number {
+export function wheelSpinDifference(value: number): number {
     return value <= 125 ? value : (256 - value) * -1;
 }

src/ui/src/main.ts

@@ -15,4 +15,4 @@ createApp(App)
     .use(createRoutes)
     .mount("#app");
 
-const subscription = startHardwareBridge();
+startHardwareBridge();

src/ui/src/stores/ui.ts

@@ -16,5 +16,9 @@ export const useUIStore = defineStore('ui', () => {
     //invoke('tick');
   }
 
-  return {hardwareEvents, volume, wheelPointerAngle, topWheelPosition, isNowPLayingOverlayActive, tick}
+  const nextHardwareEvent = (event: HardwareEvent) => {
+    hardwareEvents.next(event);
+  }
+
+  return {hardwareEvents, volume, wheelPointerAngle, topWheelPosition, isNowPLayingOverlayActive, tick, nextHardwareEvent}
 })

src/ui/src/utils/arcs.ts

@@ -35,8 +35,13 @@ export const cx: number = 1147;
 export const cy: number = 387;
 
 /** Translate a value [min;max] to a number 0-100 relative for that range */
-export function translateToRange(input: number, min: number, max: number): number {
-    return (input * (max - min)) / 100 + min;
+export function translateToNormalizedRange(input: number, min: number, max: number): number {
+    return translateToRange(input, min, max, 0, 100);
+}
+
+/** Translate a value [min;max] to a number in another range [min;max] relative for that range */
+function translateToRange(input: number, fromMin: number, fromMax: number, toMin: number, toMax: number): number {
+    return ((input - fromMin) * (toMax - toMin) / (fromMax - fromMin)) + toMin;
 }
 
 /** Get the (x,y) point on the arc (+padding) at a given angle */

src/ui/src/views/DeviceSimulator.vue

@@ -1,9 +1,14 @@
 <script setup lang="ts">
-import MainMenuShell from "./MainMenu.vue";
 import {useUIStore} from "../stores/ui.ts";
 import FullscreenContainer from "./FullscreenContainer.vue";
+import {Wheel} from "../hardware/events.ts";
 
 const uiStore = useUIStore();
+
+const handleAngularWheelChange = e => {
+  console.log('Wheel change', e.target.value);
+  uiStore.nextHardwareEvent({payload: {kind: 'wheel', source: Wheel.Angular, value: e.target.value}})
+};
 </script>
 
 <template>
@@ -32,8 +37,8 @@ const uiStore = useUIStore();
           </div>
           <div>
             <input
-                type="range" min="150" max="210" step="0.1"
-                v-model="uiStore.wheelPointerAngle"/>
+                type="range" value="60" min="0" max="120" step="0.1"
+                @input="handleAngularWheelChange"/>
           </div>
           <div>
             <input type="range" min="0" max="100"