QoL

Theremini/config.json

@@ -1,9 +1,10 @@
 {
   "active_instruments": [
-    "accordion",
-    "acoustic_bass",
-    "atmosphere",
-    "blown_bottle",
-    "bird_tweet"
+    "choir_aahs",
+    "orchestra_hit",
+    "taiko_drum",
+    "trumpet",
+    "french_horn",
+    "soundtrack"
   ]
 }

Theremini/webui/app.js

@@ -18,13 +18,11 @@ const configStatusEl = document.getElementById("configStatus");
 const dialSegmentsGroup = document.getElementById("dialSegments");
 const dialPointer = document.getElementById("dialPointer");
 const dialAngleEl = document.getElementById("dialAngle");
-const dialLabelsEl = document.getElementById("dialLabels");
 
 const RIGHT_ANT_RANGE = { min: -Math.PI / 3, max: Math.PI / 3 };
 const DIAL_CENTER = 120;
 const DIAL_RADIUS = 85;
 const POINTER_RADIUS = 88;
-const LABEL_RADIUS = 110;
 
 const ranges = {
     roll: { min: -60, max: 60, meter: rollMeterEl, display: rollValueEl, unit: "°" },
@@ -56,7 +54,7 @@ function radToDeg(rad) {
 }
 
 function angleToDial(angleRad) {
-    return radToDeg(angleRad) - 90;
+    return radToDeg(angleRad);
 }
 
 function setMeter(meterEl, value, min, max) {
@@ -121,33 +119,7 @@ async function pollStatus() {
 }
 
 function renderDialDisplay() {
-    dialLabelsEl.innerHTML = "";
     renderDialSegments();
-
-    if (!activeVoices.length) {
-        const empty = document.createElement("p");
-        empty.className = "meta";
-        empty.textContent = "No voices selected";
-        dialLabelsEl.appendChild(empty);
-        return;
-    }
-
-    const segments = computeInstrumentSegments(activeVoices.length);
-    segments.forEach(({ index, start, end }) => {
-        const label = document.createElement("span");
-        label.className = "dial-label";
-        label.textContent = activeVoices[index];
-        const mid = (start + end) / 2;
-        const point = polarToCartesian(
-            DIAL_CENTER,
-            DIAL_CENTER,
-            LABEL_RADIUS,
-            angleToDial(mid),
-        );
-        label.style.left = `${point.x}px`;
-        label.style.top = `${point.y}px`;
-        dialLabelsEl.appendChild(label);
-    });
 }
 
 function renderAvailableList() {

Theremini/webui/index.html

@@ -100,7 +100,6 @@
                             <line id="dialPointer" x1="120" y1="120" x2="120" y2="32" />
                             <circle id="dialCenter" cx="120" cy="120" r="20" />
                         </svg>
-                        <div class="dial-labels" id="dialLabels"></div>
                     </div>
                     <p class="meta">Antenna angle: <span id="dialAngle">0°</span></p>
                 </div>

Theremini/webui/style.css

@@ -179,7 +179,8 @@ body {
 .program-card {
     display: flex;
     flex-direction: column;
-    gap: 1.5rem;
+    gap: 1.1rem;
+    padding: 1.2rem 1.3rem;
 }
 
 .dial-wrapper {
@@ -197,8 +198,8 @@ body {
 
 .dial-canvas {
     position: relative;
-    width: min(320px, 80vw);
-    height: min(320px, 80vw);
+    width: min(360px, 85vw);
+    height: min(360px, 85vw);
 }
 
 #dialSvg {
@@ -206,22 +207,6 @@ body {
     height: 100%;
 }
 
-.dial-labels {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    font-size: 0.8rem;
-}
-
-.dial-label {
-    position: absolute;
-    transform: translate(-50%, -50%);
-    text-align: center;
-    color: rgba(248, 250, 252, 0.85);
-    text-shadow: 0 2px 6px rgba(2, 6, 23, 0.8);
-    width: 90px;
-    line-height: 1.1;
-}
 
 #dialSegments path,
 #dialSegments circle {