UPD: UI LEDs follow IRL Nano

src/renderer/src/components/device/DeviceLEDRing.vue

@@ -24,8 +24,11 @@
   </svg>
 </template>
 <script setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import Color from 'color'
+import { useDeviceStore } from '@renderer/deviceStore'
+
+const deviceStore = useDeviceStore()
 
 const props = defineProps({
   value: {
@@ -45,24 +48,27 @@ const padding = ref(40)
 
 const size = computed(() => (radius.value + ledRadius.value + padding.value) * 2)
 
-let interval = null
-
-onMounted(() => {
-  interval = setInterval(() => {
-    const valueIndex = Math.floor((props.value / 100) * ledCount.value)
-    leds.value.forEach((color, index) => {
-      const distance = Math.abs(index - valueIndex) % ledCount.value
-      if (distance < 1) {
-        leds.value[index] = Color.hsl(40, 100, 100)
-      } else if (distance < 2) {
-        leds.value[index] = Color.hsl(40, 100, 60)
+const updateLEDs = (value) => {
+  for (let i = 0; i < ledCount.value; i++) {
+    if (i / ledCount.value < value / 100) {
+      leds.value[i] = Color(deviceStore.currentProfile?.primary)
+    } else if ((i - 1) / ledCount.value < value / 100) {
+      leds.value[i] = Color(deviceStore.currentProfile?.pointer)
     } else {
-        leds.value[index] = color.mix(Color.hsl(310, 100, 20), 0.03)
+      leds.value[i] = Color(deviceStore.currentProfile?.secondary)
     }
-    })
-  })
-  onUnmounted(() => {
-    clearInterval(interval)
-  })
-})
+  }
+}
+
+updateLEDs(props.value)
+
+watch(
+  () => [
+    deviceStore.currentProfile?.primary,
+    deviceStore.currentProfile?.pointer,
+    deviceStore.currentProfile?.secondary,
+    props.value
+  ],
+  () => updateLEDs(props.value)
+)
 </script>

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

@@ -49,7 +49,7 @@
           >
             <img :src="LogoMidi" alt="midi-logo" class="h-4 opacity-50" />
             <h2 class="font-pixellg text-5xl">
-              {{ parseInt(barValue - deviceStore.turns * 100) }}
+              {{ parseInt(barValue + deviceStore.turns * 100) }}
             </h2>
             <div class="font-pixelsm text-md">HIGH PASS</div>
             <DeviceBar :value="barValue" :count="30" :width="120" />
@@ -111,7 +111,7 @@ import Color from 'color'
 const appStore = useAppStore()
 const deviceStore = useDeviceStore()
 
-const barValue = computed(() => 100 - (deviceStore.angle / Math.PI / 2) * 100)
+const barValue = computed(() => 100 + (deviceStore.angle / Math.PI / 2) * 100)
 
 const previewDeviceImages = {
   nanoOne: RenderNanoOne,