From d7733023172af7ef88075c01e4361d51cd3e04ed Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Sun, 19 May 2024 13:52:22 +0200
Subject: [PATCH] FIX: Receive and show proper value

---
 src/main/index.ts                               |  2 +-
 .../src/components/device/DevicePreview.vue     |  8 ++++----
 src/renderer/src/deviceStore.ts                 | 17 +++++++----------
 3 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/main/index.ts b/src/main/index.ts
index 209778c..d3803a4 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -144,7 +144,7 @@ app.whenReady().then(() => {
     mainWindow.webContents.send('nanoSerialApi:event', 'disconnected', deviceid, data)
   })
   nanoSerialApi.on('nanoSerialApi:update', (deviceid, data) => {
-    if (!data.startsWith('{"idle"') && !data.startsWith('{"a"'))
+    if (!data.startsWith('{"idle"') && !data.startsWith('{"p"'))
       console.log('Update event', deviceid, data)
     mainWindow.webContents.send('nanoSerialApi:event', 'update', deviceid, data)
   })
diff --git a/src/renderer/src/components/device/DevicePreview.vue b/src/renderer/src/components/device/DevicePreview.vue
index 776a76d..b00a6f6 100644
--- a/src/renderer/src/components/device/DevicePreview.vue
+++ b/src/renderer/src/components/device/DevicePreview.vue
@@ -33,7 +33,7 @@
       <Transition name="fade-delayed">
         <DeviceLEDRing
           v-if="deviceStore.connected"
-          :value="barValue"
+          :value="ringValue"
           class="absolute inset-x-0 top-[12.5%] mx-auto h-[66%]"
         />
       </Transition>
@@ -49,10 +49,9 @@
           >
             <img :src="LogoMidi" alt="midi-logo" class="h-4 opacity-50" />
             <h2 class="font-pixellg text-5xl">
-              {{ parseInt(barValue + deviceStore.turns * 100) }}
+              {{ deviceStore.position }}
             </h2>
             <div class="font-pixelsm text-md">HIGH PASS</div>
-            <DeviceBar :value="barValue" :count="30" :width="120" />
             <span class="font-pixelsm w-36 text-[7pt] uppercase text-muted-foreground">
               KORG MINILOGUE HIGH PASS FILTER 0-127
             </span>
@@ -111,7 +110,8 @@ import Color from 'color'
 const appStore = useAppStore()
 const deviceStore = useDeviceStore()
 
-const barValue = computed(() => 100 + (deviceStore.angle / Math.PI / 2) * 100)
+const devicePosition = computed(() => deviceStore.position)
+const ringValue = computed(() => devicePosition)
 
 const previewDeviceImages = {
   nanoOne: RenderNanoOne,
diff --git a/src/renderer/src/deviceStore.ts b/src/renderer/src/deviceStore.ts
index 8e2a523..a76c801 100644
--- a/src/renderer/src/deviceStore.ts
+++ b/src/renderer/src/deviceStore.ts
@@ -98,10 +98,7 @@ export interface MidiSettings {
 
 interface UpdateData {
   idle: number | undefined
-  a: number | undefined
-  t: number | undefined
   p: number | undefined
-  v: number | undefined
   profiles: string[] | undefined
   current: string | undefined
   profile: Profile | undefined
@@ -123,8 +120,7 @@ export const useDeviceStore = defineStore('device', {
     currentProfileName: null as string | null, // name of the current profile
     settings: null as DeviceSettings | null, // settings of the device
     dirtyState: false as boolean, // whether the device state has changed
-    angle: 0 as number, // angle of the knob
-    turns: 0 as number, // number of turns of the knob
+    position: 0 as number, // current position of the knob
     velocity: 0 as number, // velocity of the knob
     keyLabels: ['a', 'b', 'c', 'd'] as string[], // labels for the keys
     keyStates: {} as Record<string, boolean>, // state of the keys (true if pressed)
@@ -190,6 +186,7 @@ export const useDeviceStore = defineStore('device', {
       this.currentProfileName = profileName
       if (updateDevice) {
         nanoIpc.send(this.currentDeviceId!, JSON.stringify({ current: profileName }))
+        this.setDirtyState(true)
       }
     },
     createProfile() {
@@ -341,8 +338,8 @@ export const useDeviceStore = defineStore('device', {
     cycleOrientation() {
       this.setOrientation((this.settings!.deviceOrientation + 90) % 360)
     },
-    setAngle(angle: number) {
-      this.angle = angle
+    setPosition(position: number) {
+      this.position = position
     },
     setKeyColor(key: string, pressed: boolean, color: number, updateDevice: boolean = true) {
       const propertyName = `button${key.toUpperCase()}${pressed ? 'Press' : 'Idle'}`
@@ -504,11 +501,11 @@ export const initializeDevices = () => {
           console.error('Failed to parse update data:', e, dataString)
         }
       }
-      if (!update.idle && !update.a) {
+      if (!update.idle && !update.p) {
         console.log('Received update:', update)
       }
-      if (update.a !== undefined) {
-        deviceStore.setAngle(update.a)
+      if (update.p !== undefined) {
+        deviceStore.setPosition(update.p)
         appStore.selectConfigFeature('knob')
       }
       if (update.kd !== undefined) {