ADD: DeviceRingBar

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

@@ -37,11 +37,17 @@
           class="absolute inset-x-0 top-[12.5%] mx-auto h-[66%]"
         />
       </Transition>
-
       <div
         class="absolute inset-x-0 top-[30.5%] mx-auto flex aspect-square h-[30%] flex-col items-center justify-center overflow-hidden rounded-full"
         style="background: linear-gradient(45deg, black 30%, #252525 50%, #232323 60%, black)"
       >
+        <Transition name="fade-display">
+          <DeviceRingBar
+            v-if="deviceStore.connected"
+            :value="ringValue"
+            class="absolute opacity-90 mix-blend-screen"
+          />
+        </Transition>
         <TransitionGroup name="fade-display">
           <div
             v-if="deviceStore.connected"
@@ -52,7 +58,7 @@
               {{ deviceStore.position }}
             </h2>
             <div class="font-pixelsm text-md">HIGH PASS</div>
-            <span class="font-pixelsm w-36 text-[7pt] uppercase text-muted-foreground">
+            <span class="font-pixelsm w-32 text-[7pt] uppercase text-muted-foreground">
               KORG MINILOGUE HIGH PASS FILTER 0-127
             </span>
           </div>
@@ -97,7 +103,7 @@
 import RenderNanoOne from '@renderer/assets/images/renderNanoOneTransparent.png'
 import RenderNanoZero from '@renderer/assets/images/renderNanoZeroTransparent.png'
 import LogoMidi from '@renderer/assets/logos/logoMidi.svg'
-import DeviceBar from '@renderer/components/device/DeviceBar.vue'
+import DeviceRingBar from '@renderer/components/device/DeviceRingBar.vue'
 import { useAppStore } from '@renderer/appStore'
 import { useDeviceStore } from '@renderer/deviceStore'
 import ScrambleText from '@renderer/components/common/ScrambleText.vue'

src/renderer/src/components/device/DeviceRingBar.vue

@@ -0,0 +1,50 @@
+<template>
+  <svg :viewBox="`0 0 ${size} ${size}`">
+    <circle
+      :r="radius"
+      :cx="size / 2"
+      :cy="size / 2"
+      :transform="`rotate(${rotationOffset - 90 + value * 3.6 + gap / 2} ${size / 2} ${size / 2})`"
+      stroke="#4a4a4a"
+      fill="transparent"
+      :stroke-width="thiccness"
+      :stroke-dasharray="`${Math.max(0, (1 - value / 100) * circumference - gap * 2)} ${circumference}`"
+    />
+    <circle
+      :r="radius"
+      :cx="size / 2"
+      :cy="size / 2"
+      :transform="`rotate(${rotationOffset - 90 + gap / 2} ${size / 2} ${size / 2})`"
+      stroke="#c66936"
+      fill="transparent"
+      :stroke-width="thiccness"
+      :stroke-dasharray="`${Math.max(0, (value / 100) * circumference - gap * 2)} ${circumference}`"
+    />
+    <circle
+      :r="thiccness / 1.5"
+      :cx="size / 2"
+      :cy="padding + thiccness"
+      fill="white"
+      :transform="`rotate(${value * 3.6 + rotationOffset} ${size / 2} ${size / 2})`"
+    />
+  </svg>
+</template>
+<script setup>
+import { computed, ref } from 'vue'
+
+defineProps({
+  value: {
+    type: Number,
+    default: 0
+  }
+})
+
+const radius = ref(100)
+const thiccness = ref(3)
+const padding = ref(40)
+const rotationOffset = ref(180)
+const gap = ref(5)
+
+const size = computed(() => (radius.value + thiccness.value + padding.value) * 2)
+const circumference = computed(() => 2 * Math.PI * radius.value)
+</script>