ADD: LED Ring responds to active value

+ fix rotation

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

@@ -15,7 +15,7 @@
     <circle
       v-for="index in ledCount"
       :key="index"
-      :transform="`rotate(${(index / ledCount) * 360} ${size / 2} ${size / 2})`"
+      :transform="`rotate(${(index / ledCount) * 360 + rotationOffset} ${size / 2} ${size / 2})`"
       :r="ledRadius"
       :cx="size / 2"
       :cy="padding + ledRadius"
@@ -45,6 +45,7 @@ const ledCount = ref(60)
 const blur = ref(2)
 const blurSteps = ref(5)
 const padding = ref(40)
+const rotationOffset = ref(180)
 
 const size = computed(() => (radius.value + ledRadius.value + padding.value) * 2)
 

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

@@ -110,8 +110,12 @@ import Color from 'color'
 const appStore = useAppStore()
 const deviceStore = useDeviceStore()
 
-const devicePosition = computed(() => deviceStore.position)
-const ringValue = computed(() => devicePosition)
+const devicePosition = computed(() => deviceStore.position || 0)
+const minValue = computed(() => deviceStore.activeValue?.valueMin || 0)
+const maxValue = computed(() => deviceStore.activeValue?.valueMax || 100)
+const ringValue = computed(
+  () => ((devicePosition.value - minValue.value) / (maxValue.value - minValue.value)) * 100
+)
 
 const previewDeviceImages = {
   nanoOne: RenderNanoOne,