From cd9d8332e938f74071c05c5700ba842dfd52a66d Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Sun, 19 May 2024 18:09:01 +0200
Subject: [PATCH] ADD: LED Ring responds to active value + fix rotation

---
 src/renderer/src/components/device/DeviceLEDRing.vue | 3 ++-
 src/renderer/src/components/device/DevicePreview.vue | 8 ++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/components/device/DeviceLEDRing.vue b/src/renderer/src/components/device/DeviceLEDRing.vue
index fc714b2..cfd3bbf 100644
--- a/src/renderer/src/components/device/DeviceLEDRing.vue
+++ b/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)
 
diff --git a/src/renderer/src/components/device/DevicePreview.vue b/src/renderer/src/components/device/DevicePreview.vue
index b00a6f6..8aaf950 100644
--- a/src/renderer/src/components/device/DevicePreview.vue
+++ b/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,