ADD: Update LEDRing on angle update

src/renderer/src/components/device/DeviceBar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 
 const model = defineModel({ type: Number, default: 60 })
 
@@ -8,7 +8,8 @@ const bar = ref(null)
 const props = defineProps({
   width: { type: Number, default: 160 },
   count: { type: Number, default: 40 },
-  gapWidth: { type: Number, default: 2 }
+  gapWidth: { type: Number, default: 2 },
+  value: { type: Number, default: 0 }
 })
 
 const rectWidth = computed(() => {
@@ -35,6 +36,10 @@ function onMouseUp() {
   window.removeEventListener('mousemove', onMouseMove)
   window.removeEventListener('mouseup', onMouseUp)
 }
+
+watch(props.value, (value) => {
+  model.value = value
+})
 </script>
 
 <template>

src/renderer/src/components/device/DevicePreview.vue

@@ -48,9 +48,9 @@
             class="absolute flex flex-col items-center pb-2 text-center mix-blend-screen"
           >
             <img :src="LogoMidi" alt="midi-logo" class="h-4 opacity-50" />
-            <h2 class="font-pixellg text-5xl">{{ parseInt(value) }}</h2>
+            <h2 class="font-pixellg text-5xl">{{ parseInt(barValue - store.turns * 100) }}</h2>
             <div class="font-pixelsm text-md">HIGH PASS</div>
-            <DeviceBar v-model="barValue" :count="30" :width="120" />
+            <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>
@@ -98,17 +98,14 @@ import LogoMidi from '@renderer/assets/logos/logoMidi.svg'
 import DeviceBar from '@renderer/components/device/DeviceBar.vue'
 import { useStore } from '@renderer/store'
 import ScrambleText from '@renderer/components/common/ScrambleText.vue'
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 import DeviceLEDRing from '@renderer/components/device/DeviceLEDRing.vue'
-import gsap from 'gsap'
 import DeviceKeys from '@renderer/components/device/DeviceKeys.vue'
 
-const value = ref(69)
-
-const barValue = computed(() => (value.value / 127) * 100)
-
 const store = useStore()
 
+const barValue = computed(() => 100 - (store.angle / Math.PI / 2) * 100)
+
 const previewDeviceImages = {
   nanoOne: RenderNanoOne,
   nanoZero: RenderNanoZero
@@ -118,13 +115,6 @@ const previewDeviceImage = computed(
   () => previewDeviceImages[store.previewDeviceModel || 'nanoOne']
 )
 
-const targetValue = ref(69)
-const animateValue = () => {
-  targetValue.value = Math.floor(Math.random() * 127)
-  gsap.to(value, { duration: 1, value: targetValue.value, ease: 'power2.inOut' })
-  setTimeout(animateValue, 1500 + Math.random() * 2000)
-}
-
 const offlineText = ref('NO DEVICE CONNECTED')
 const offlineTexts = [
   'AWAITING CONNECTION',
@@ -152,10 +142,6 @@ const nextOfflineText = () => {
     }, 3500)
   }
 }
-
-onMounted(() => {
-  animateValue()
-})
 </script>
 <style scoped>
 .fade-enter-active,

src/renderer/src/device.ts

@@ -24,16 +24,17 @@ export const useMessageHandlers = function (store) {
         // TODO remove
         console.log('Device present, idle since: ', message.idle)
       }
+      // Moved these two up from handle_event_message
+      // Event messages don't include the event key atm, so handle_event_message was never called
+      if (message.hasOwnProperty('ks')) {
+        store.update_keystates(message.ks)
+      }
+      if (message.hasOwnProperty('a')) {
+        store.update_knob_position(message.t, message.a, message.v)
+      }
     },
 
-    handle_event_message: (event) => {
+    handle_event_message: (event) => {},
-      if (event.ks) {
-        store.update_keystates(event.ks)
-      }
-      if (event.hasOwnProperty('a')) {
-        store.update_knob_position(event.t, event.a, event.v)
-      }
-    },
 
     handle_profile_message: (profile) => {
       // TODO update profile