Clean up components and views. Make sure everything uses the Vue Comp…

…osition API

src/ui/src/components/AnglePointer.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { useUIStore } from '../stores/ui.ts';
+import arcs from "../utils/arcs.ts";
+
+const uiStore = useUIStore();
+
+const props = withDefaults(defineProps<{
+  radius: number
+}>(), {
+  radius: 1000,
+});
+</script>
+
+<template>
+  <svg id="anglePointer" width="1024" height="768" style="position: absolute; z-index: 100;">
+    <defs>
+      <radialGradient id="lineGradient">
+        <stop offset="0%" stop-color="rgba(102,153,255,0.45)" />
+        <stop offset="90%" stop-color="rgba(0,0,0,0)" />
+      </radialGradient>
+      <radialGradient id="dotGradient">
+        <stop offset="0%" stop-color="rgba(128,204,255,0.9)" />
+        <stop offset="40%" stop-color="rgba(128,204,255,0.4)" />
+        <stop offset="100%" stop-color="rgba(128,204,255,0)" />
+      </radialGradient>
+      <filter id="exposureFilter" x="0" y="0" width="100%" height="100%">
+        <feComponentTransfer>
+          <feFuncR type="linear" slope="2" />
+          <feFuncG type="linear" slope="2" />
+          <feFuncB type="linear" slope="2" />
+        </feComponentTransfer>
+      </filter>
+      <filter id="blurPointerFilter">
+        <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
+      </filter>
+      <filter id="blurPointFilter">
+        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
+      </filter>
+    </defs>
+    <ellipse id="pointerDot"
+             :style="{
+               '--cx': `${arcs.getArcPoint(radius, 0, uiStore.wheelPointerAngle).x}px`,
+               '--cy': `${arcs.getArcPoint(radius, 0, uiStore.wheelPointerAngle).y}px`,
+               'transform': `rotate(${uiStore.wheelPointerAngle - 90}deg)`
+             }"
+             :rx="45"
+             :ry="25"
+             fill="url(#dotGradient)"
+             filter="url(#blurPointFilter)"
+    />
+    <ellipse id="pointerLine"
+             :style="{
+               '--cx': `${arcs.getArcPoint(radius, 0, uiStore.wheelPointerAngle).x}px`,
+               '--cy': `${arcs.getArcPoint(radius, 0, uiStore.wheelPointerAngle).y}px`,
+               'transform': `rotate(${uiStore.wheelPointerAngle - 90}deg)`
+             }"
+             :rx="40"
+             :ry="400"
+             fill="url(#lineGradient)"
+             filter="url(#exposureFilter) url(#blurPointerFilter)"
+    />
+  </svg>
+</template>
+
+<style scoped>
+
+#pointerDot, #pointerLine {
+  transition: all 100ms ease;
+  transform-origin: var(--cx) var(--cy);
+  cx: var(--cx);
+  cy: var(--cy);
+}
+
+</style>

src/ui/src/components/DebugOverlay.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useUIStore } from '../stores/ui';
+const uiStore = useUIStore();
+</script>
+
+<template>
+  <div style="z-index: 10000; position: fixed; top: 0%; right: 0%; opacity: 0.1; ">
+    <input type="number" v-model="uiStore.wheelPointerAngle" />
+    <input type="number" v-model="uiStore.volume" />
+  </div>
+  <div
+      style="z-index: 10000; position: fixed; top: 50%; right: 50px; opacity: 0.1; ">
+    <input style="transform: translateY(-50%) rotate(270deg);" type="range" min="150" max="210" step="0.001" v-model="uiStore.wheelPointerAngle" />
+  </div>
+  <div
+      style="z-index: 10000; position: fixed; top: 50%; right: 0px; opacity: 0.1; ">
+    <input style="transform: translateY(-50%) rotate(270deg);" type="range" min="0" max="100" step="1" v-model="uiStore.volume" />
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/ui/src/components/default.vue → src/ui/src/components/Default.vue

@@ -1,12 +1,12 @@
+<script setup lang="ts">
+</script>
+
 <template>
   <div>
     Empty
   </div>
 </template>
 
-<script setup lang="ts">
-</script>
-
 <style scoped>
 
 </style>

src/ui/src/components/MainArc.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import {ref, withDefaults} from 'vue';
+import arcs from '../utils/arcs';
+
+const props = withDefaults(defineProps<{
+  radius?: number
+}>(), {
+  radius: 1000,
+});
+
+
+const startArcAngle = ref(158);
+const endArcAngle = ref(202);
+
+function describeArc(startAngle: number, endAngle: number) {
+  return arcs.describeArc(arcs.cx, arcs.cy, props.radius, startAngle, endAngle);
+}
+</script>
+
+<template>
+  <svg width="1024" height="768" style="position: absolute; z-index: 90;">
+    <defs>
+      <linearGradient id="gradient" gradientTransform="rotate(90)">
+        <stop offset="0%" stop-color="rgba(102,153,255,0)"/>
+        <stop offset="5%" stop-color="rgba(102,153,255,1)"/>
+        <stop offset="95%" stop-color="rgba(0,255,204,1)"/>
+        <stop offset="100%" stop-color="rgba(0,255,204,0)"/>
+      </linearGradient>
+    </defs>
+    <!-- Arc path for reference -->
+    <path :d="describeArc(startArcAngle, endArcAngle)" fill="none" stroke="url(#gradient)"
+          stroke-width="3" stroke-linecap="round"/>
+  </svg>
+</template>
+
+<style scoped>
+</style>

src/ui/src/components/VolumeArc.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {computed, ref} from 'vue';
+import arcs from '../utils/arcs';
+import { useUIStore } from '../stores/ui';
+
+const uiStore = useUIStore();
+
+const radius = ref(270);
+const startArcAngle = ref(95);
+const endArcAngle = ref(265);
+
+const translateVolume = computed(() => ((uiStore.volume - 0) * (endArcAngle.value - startArcAngle.value)) / (100 - 0) + startArcAngle.value);
+</script>
+
+<template>
+  <svg width="1024" height="768" style="position: absolute; z-index: 90; opacity: 0.5;">
+    <defs>
+      <linearGradient id="gradient">
+        <stop offset="5%" stop-color="rgba(102,153,255,0.3)" />
+        <stop offset="95%" stop-color="rgba(102,153,204,0.3)" />
+      </linearGradient>
+    </defs>
+    <!-- Arc path for reference -->
+    <path :d="arcs.describeArc(arcs.cx, arcs.cy, radius, startArcAngle, translateVolume)" fill="none" stroke="url(#gradient)"
+          stroke-width="10" stroke-linecap="round" />
+  </svg>
+</template>
+
+<style scoped>
+</style>

src/ui/src/main.ts

@@ -7,14 +7,14 @@ import App from "./App.vue";
 
 import {Subject, filter, bufferCount} from "rxjs";
 
-import DefaultView from "./components/default.vue";
-import MusicView from "./components/music.vue";
-import RadioView from "./components/radio.vue";
+import DefaultView from "./components/Default.vue";
+import MusicView from "./views/Music.vue";
+import RadioView from "./views/Radio.vue";
 import { listen } from "@tauri-apps/api/event";
 import { useUIStore } from "./stores/ui";
 import { translateToRange } from "./utils/arcs";
 import DeviceSim from "./views/DeviceSimulator.vue";
-import Bs5Shell from "./views/bs5.vue";
+import MainMenuShell from "./views/MainMenuShell.vue";
 import Shell from "./views/Shell.vue";
 
 const router = createRouter({
@@ -29,7 +29,7 @@ const router = createRouter({
                 if(shell === 'sim') {
                     return { component: DeviceSim, shell: 'sim' };
                 } else {
-                    return { component: Bs5Shell, shell: 'default' };
+                    return { component: MainMenuShell, shell: 'default' };
                 }
             },
             children: [ 

src/ui/src/views/DeviceSimulator.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import BS5Shell from "./bs5.vue";
+import BS5Shell from "./MainMenuShell.vue";
 import {useUIStore} from "../stores/ui.ts";
 
 const uiStore = useUIStore();