QoL fixes

README.md

@@ -30,4 +30,5 @@ When the app starts, Reachy performs a short guided motion (center the head, osc
 
 - The top HUD mirrors the old terminal bars for note/pitch/amplitude, but now in the browser.
 - The “Program slots” grid refreshes live to show the currently active instrument order.
+- A circular “instrument wheel” highlights each preset and the current antenna angle, so performers see exactly which slot is active.
 - The “Live instrument set” card lets you search the full FluidSynth GM bank and build up to eight presets (order defines how the antenna scrolls). Changes are saved via the same `/api/config` endpoint the web UI hits, so advanced users can script their own configs too.

Theremini/config.json

@@ -1,6 +1,9 @@
 {
   "active_instruments": [
     "accordion",
-    "acoustic_bass"
+    "acoustic_bass",
+    "atmosphere",
+    "blown_bottle",
+    "bird_tweet"
   ]
 }

Theremini/main.py

@@ -231,7 +231,9 @@ class Theremini(ReachyMiniApp):
 
         current_roll = 0.0
 
-        self._demo_select_instrument(reachy_mini, left_idx, stop_event, dwell=0.3)
+        self._demo_select_instrument(
+            reachy_mini, left_idx, stop_event, dwell=0.3, move_duration=0.7
+        )
         current_roll = self._demo_roll_linear(
             reachy_mini,
             stop_event,
@@ -241,7 +243,9 @@ class Theremini(ReachyMiniApp):
         )
         self._demo_pause(reachy_mini, stop_event, 0.45)
 
-        self._demo_select_instrument(reachy_mini, right_idx, stop_event, dwell=0.28)
+        self._demo_select_instrument(
+            reachy_mini, right_idx, stop_event, dwell=0.28, move_duration=0.7
+        )
         current_roll = self._demo_roll_linear(
             reachy_mini,
             stop_event,
@@ -251,7 +255,9 @@ class Theremini(ReachyMiniApp):
         )
         self._demo_pause(reachy_mini, stop_event, 0.45)
 
-        self._demo_select_instrument(reachy_mini, oscillation_idx, stop_event, dwell=0.25)
+        self._demo_select_instrument(
+            reachy_mini, oscillation_idx, stop_event, dwell=0.25, move_duration=0.6
+        )
         current_roll = self._demo_roll_linear(
             reachy_mini,
             stop_event,
@@ -269,7 +275,7 @@ class Theremini(ReachyMiniApp):
         )
 
         reachy_mini.goto_target(
-            head=create_head_pose(z=-0.02, degrees=True), antennas=[0.0, 0.0], duration=1.2
+            head=create_head_pose(z=-0.04, pitch=-6.0, degrees=True), antennas=[0.0, 0.0], duration=1.3
         )
         self._demo_pause(reachy_mini, stop_event, 0.6)
 
@@ -279,14 +285,36 @@ class Theremini(ReachyMiniApp):
         index: int,
         stop_event: threading.Event,
         dwell: float,
+        move_duration: float,
     ) -> None:
         if not self._active_parts:
             return
         index = max(0, min(index, len(self._active_parts) - 1))
         angle = self._angle_for_instrument_index(index)
-        reachy_mini.set_target_antenna_joint_positions([0.0, float(angle)])
+        self._demo_move_antenna(reachy_mini, stop_event, angle, move_duration)
         self._demo_pause(reachy_mini, stop_event, dwell)
 
+    def _demo_move_antenna(
+        self,
+        reachy_mini: ReachyMini,
+        stop_event: threading.Event,
+        target_angle: float,
+        duration: float,
+    ) -> None:
+        duration = max(0.2, duration)
+        _, antennas = reachy_mini.get_current_joint_positions()
+        start_angle = antennas[1]
+        start_time = time.time()
+        while not stop_event.is_set():
+            elapsed = time.time() - start_time
+            ratio = min(1.0, elapsed / duration)
+            angle = start_angle + (target_angle - start_angle) * ratio
+            reachy_mini.set_target_antenna_joint_positions([0.0, float(angle)])
+            self._tick_from_robot(reachy_mini)
+            if ratio >= 1.0:
+                break
+            time.sleep(0.02)
+
     def _angle_for_instrument_index(self, index: int) -> float:
         if len(self._active_parts) <= 1:
             return 0.0

Theremini/webui/app.js

@@ -11,36 +11,54 @@ const rollValueEl = document.getElementById("rollValue");
 const heightValueEl = document.getElementById("heightValue");
 const antennaValueEl = document.getElementById("antennaValue");
 const playingIndicator = document.getElementById("playingIndicator");
-const programListEl = document.getElementById("programList");
 const availableListEl = document.getElementById("availableList");
 const activeListEl = document.getElementById("activeList");
 const searchInput = document.getElementById("instrumentSearch");
-const saveConfigBtn = document.getElementById("saveConfigBtn");
 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: "°" },
     height: { min: -30, max: 5, meter: heightMeterEl, display: heightValueEl, unit: " mm" },
     antenna: {
-        min: -Math.PI / 3,
-        max: Math.PI / 3,
+        min: RIGHT_ANT_RANGE.min,
+        max: RIGHT_ANT_RANGE.max,
         meter: antennaMeterEl,
         display: antennaValueEl,
-        unit: " rad",
+        unit: "°",
     },
     amplitude: { min: 0, max: 1, meter: ampMeterEl },
 };
 
 const MAX_ACTIVE = 8;
+const SVG_NS = "http://www.w3.org/2000/svg";
+let saveTimer = null;
 let availableVoices = [];
 let activeVoices = [];
-let filteredList = [];
 let configDirty = false;
+let lastStatus = { right_antenna_rad: 0, instrument_index: null };
 
 function clamp(value, min, max) {
     return Math.min(Math.max(value, min), max);
 }
 
+function radToDeg(rad) {
+    return (rad * 180) / Math.PI;
+}
+
+function angleToDial(angleRad) {
+    return radToDeg(angleRad) - 90;
+}
+
 function setMeter(meterEl, value, min, max) {
     const ratio = (clamp(value, min, max) - min) / (max - min || 1);
     meterEl.style.width = `${(ratio * 100).toFixed(1)}%`;
@@ -78,10 +96,13 @@ function updateStatus(status) {
     setMeter(ranges.height.meter, height, ranges.height.min, ranges.height.max);
 
     const antenna = typeof status.right_antenna_rad === "number" ? status.right_antenna_rad : 0;
-    ranges.antenna.display.textContent = formatNumber(antenna, ranges.antenna.unit);
+    const antennaDeg = radToDeg(antenna);
+    ranges.antenna.display.textContent = formatNumber(antennaDeg, ranges.antenna.unit);
     setMeter(ranges.antenna.meter, antenna, ranges.antenna.min, ranges.antenna.max);
 
     updatePresence(Boolean(status.playing));
+    lastStatus = { right_antenna_rad: antenna, instrument_index: programIndex };
+    updateDial(antenna, programIndex);
 }
 
 async function pollStatus() {
@@ -99,24 +120,33 @@ async function pollStatus() {
     }
 }
 
-function renderProgramList() {
-    programListEl.innerHTML = "";
+function renderDialDisplay() {
+    dialLabelsEl.innerHTML = "";
+    renderDialSegments();
+
     if (!activeVoices.length) {
-        const empty = document.createElement("li");
+        const empty = document.createElement("p");
+        empty.className = "meta";
         empty.textContent = "No voices selected";
-        programListEl.appendChild(empty);
+        dialLabelsEl.appendChild(empty);
         return;
     }
-    activeVoices.forEach((name, index) => {
-        const li = document.createElement("li");
-        const badge = document.createElement("span");
-        badge.className = "badge";
-        badge.textContent = index;
+
+    const segments = computeInstrumentSegments(activeVoices.length);
+    segments.forEach(({ index, start, end }) => {
         const label = document.createElement("span");
-        label.textContent = name;
-        li.appendChild(badge);
-        li.appendChild(label);
-        programListEl.appendChild(li);
+        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);
     });
 }
 
@@ -210,9 +240,108 @@ function renderActiveList() {
     });
 }
 
-function markDirty() {
+function renderDialSegments() {
+    dialSegmentsGroup.innerHTML = "";
+    const total = activeVoices.length;
+    const center = DIAL_CENTER;
+    const radius = DIAL_RADIUS;
+
+    if (!total) {
+        const fallback = document.createElementNS(SVG_NS, "circle");
+        fallback.setAttribute("cx", center);
+        fallback.setAttribute("cy", center);
+        fallback.setAttribute("r", radius);
+        dialSegmentsGroup.appendChild(fallback);
+        updateDial(lastStatus.right_antenna_rad || 0, lastStatus.instrument_index);
+        return;
+    }
+
+    const segments = computeInstrumentSegments(total);
+    segments.forEach(({ index, start, end }) => {
+        const path = document.createElementNS(SVG_NS, "path");
+        path.setAttribute(
+            "d",
+            describeArc(center, center, radius, angleToDial(start), angleToDial(end))
+        );
+        path.dataset.index = String(index);
+        path.setAttribute("aria-label", activeVoices[index]);
+        dialSegmentsGroup.appendChild(path);
+    });
+    updateDial(lastStatus.right_antenna_rad || 0, lastStatus.instrument_index);
+}
+
+function computeInstrumentSegments(total) {
+    const min = RIGHT_ANT_RANGE.min;
+    const max = RIGHT_ANT_RANGE.max;
+    const span = max - min;
+    if (total <= 1) {
+        return [{ index: 0, start: min, end: max }];
+    }
+    const centers = [];
+    for (let i = 0; i < total; i += 1) {
+        centers.push(min + (span * i) / (total - 1));
+    }
+    return centers.map((center, index) => {
+        const prevCenter = index === 0 ? null : centers[index - 1];
+        const nextCenter = index === total - 1 ? null : centers[index + 1];
+        const start = prevCenter === null ? min : (prevCenter + center) / 2;
+        const end = nextCenter === null ? max : (center + nextCenter) / 2;
+        return { index, start, end };
+    });
+}
+
+function polarToCartesian(cx, cy, radius, angleInDegrees) {
+    const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180;
+    return {
+        x: cx + radius * Math.cos(angleInRadians),
+        y: cy + radius * Math.sin(angleInRadians),
+    };
+}
+
+function describeArc(cx, cy, radius, startAngle, endAngle) {
+    const start = polarToCartesian(cx, cy, radius, endAngle);
+    const end = polarToCartesian(cx, cy, radius, startAngle);
+    const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
+    return [
+        "M",
+        start.x,
+        start.y,
+        "A",
+        radius,
+        radius,
+        0,
+        largeArcFlag,
+        0,
+        end.x,
+        end.y,
+    ].join(" ");
+}
+
+function updateDial(angleRad, instrumentIndex) {
+    const pointerAngle = angleToDial(angleRad);
+    const target = polarToCartesian(DIAL_CENTER, DIAL_CENTER, POINTER_RADIUS, pointerAngle);
+    dialPointer.setAttribute("x2", target.x.toFixed(2));
+    dialPointer.setAttribute("y2", target.y.toFixed(2));
+    dialAngleEl.textContent = `${Math.round(radToDeg(angleRad))}°`;
+
+    dialSegmentsGroup.querySelectorAll("[data-index]").forEach((segment) => {
+        const segIndex = Number(segment.dataset.index);
+        segment.classList.toggle(
+            "active",
+            typeof instrumentIndex === "number" && segIndex === instrumentIndex,
+        );
+    });
+}
+
+function scheduleSave() {
     configDirty = true;
-    configStatusEl.textContent = "Unsaved changes";
+    configStatusEl.textContent = "Saving...";
+    if (saveTimer) {
+        clearTimeout(saveTimer);
+    }
+    saveTimer = setTimeout(() => {
+        saveConfig();
+    }, 400);
 }
 
 function addVoice(name) {
@@ -221,17 +350,17 @@ function addVoice(name) {
     }
     activeVoices.push(name);
     renderActiveList();
-    renderProgramList();
+    renderDialDisplay();
     renderAvailableList();
-    markDirty();
+    scheduleSave();
 }
 
 function removeVoice(index) {
     activeVoices.splice(index, 1);
     renderActiveList();
-    renderProgramList();
+    renderDialDisplay();
     renderAvailableList();
-    markDirty();
+    scheduleSave();
 }
 
 function moveVoice(index, delta) {
@@ -242,8 +371,8 @@ function moveVoice(index, delta) {
     const [voice] = activeVoices.splice(index, 1);
     activeVoices.splice(target, 0, voice);
     renderActiveList();
-    renderProgramList();
-    markDirty();
+    renderDialDisplay();
+    scheduleSave();
 }
 
 async function fetchConfig() {
@@ -258,7 +387,7 @@ async function fetchConfig() {
             activeVoices = [...(payload.active_instruments || [])];
             configDirty = false;
             configStatusEl.textContent = "Synced";
-            renderProgramList();
+            renderDialDisplay();
             renderAvailableList();
             renderActiveList();
         }
@@ -269,9 +398,14 @@ async function fetchConfig() {
 }
 
 async function saveConfig() {
+    if (!configDirty) {
+        return;
+    }
+    if (saveTimer) {
+        clearTimeout(saveTimer);
+        saveTimer = null;
+    }
     try {
-        saveConfigBtn.disabled = true;
-        configStatusEl.textContent = "Saving...";
         const response = await fetch("/api/config", {
             method: "POST",
             headers: { "Content-Type": "application/json" },
@@ -283,17 +417,16 @@ async function saveConfig() {
         }
         configDirty = false;
         configStatusEl.textContent = "Saved";
-        renderProgramList();
+        renderDialDisplay();
     } catch (error) {
         configStatusEl.textContent = `Error: ${error.message}`;
         console.error("Theremini save", error);
-    } finally {
-        saveConfigBtn.disabled = false;
     }
 }
 
+renderDialDisplay();
 pollStatus();
-setInterval(pollStatus, 400);
+setInterval(pollStatus, 150);
 fetchConfig();
 setInterval(() => {
     if (!configDirty) {
@@ -301,5 +434,4 @@ setInterval(() => {
     }
 }, 5000);
 
-saveConfigBtn.addEventListener("click", saveConfig);
 searchInput.addEventListener("input", renderAvailableList);

Theremini/webui/index.html

@@ -12,10 +12,9 @@
     <main class="page">
         <header class="hero">
             <div>
-                <p class="eyebrow">Reachy Mini · Theremin HUD</p>
+                <p class="eyebrow">Reachy Mini · Theremini HUD</p>
                 <h1>Theremini Live Status</h1>
-                <p class="lede">Head roll drives pitch, head height controls amplitude, and the right antenna swaps instruments.
-                    This panel mirrors the old terminal HUD for a calmer, browser-friendly experience.</p>
+                <p class="lede">Head roll drives pitch, head height controls amplitude, and the right antenna swaps instruments.</p>
             </div>
             <div class="presence" id="playingIndicator" data-playing="off">
                 <span class="dot"></span>
@@ -76,25 +75,36 @@
                 <div class="row">
                     <div>
                         <p class="label">Right antenna</p>
-                        <h3 id="antennaValue">0 rad</h3>
+                        <h3 id="antennaValue">0°</h3>
                         <p class="meta">selects instrument slot</p>
                     </div>
-                    <p class="range">-π/3 ⇢ +π/3 rad</p>
+                    <p class="range">-60° ⇢ +60°</p>
                 </div>
-                <div class="meter" data-min="-1.047" data-max="1.047" data-unit=" rad">
+                <div class="meter" data-min="-1.047" data-max="1.047" data-unit="°">
                     <div class="meter-fill" id="antennaMeter"></div>
                 </div>
             </article>
         </section>
 
         <section class="card program-card">
-            <div>
-                <p class="label">Program slots</p>
-                <h2>FluidSynth voices</h2>
-                <p class="meta">Move the right antenna to cycle through your curated list.</p>
+            <div class="dial-wrapper">
+                <div class="dial-headings">
+                    <p class="label">Program slots</p>
+                    <h2>FluidSynth voices</h2>
+                    <p class="meta">Move the right antenna to cycle through your curated list.</p>
+                </div>
+                <div class="dial-visual">
+                    <div class="dial-canvas">
+                        <svg id="dialSvg" viewBox="0 0 240 240" role="presentation">
+                            <g id="dialSegments"></g>
+                            <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>
             </div>
-            <ul class="program-list" id="programList">
-            </ul>
         </section>
 
         <section class="card config-card">
@@ -106,7 +116,6 @@
                 </div>
                 <div class="config-actions">
                     <input id="instrumentSearch" type="text" placeholder="Filter presets..." />
-                    <button id="saveConfigBtn">Save selection</button>
                 </div>
             </div>
             <div class="list-grid">

Theremini/webui/style.css

@@ -178,44 +178,79 @@ body {
 
 .program-card {
     display: flex;
-    flex-wrap: wrap;
-    gap: 1rem 2rem;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.dial-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.dial-visual {
+    display: flex;
+    flex-direction: column;
     align-items: center;
-    justify-content: space-between;
+    gap: 0.5rem;
 }
 
-.program-card h2 {
-    margin-bottom: 0.2rem;
+.dial-canvas {
+    position: relative;
+    width: min(320px, 80vw);
+    height: min(320px, 80vw);
 }
 
-.program-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-    gap: 0.4rem 1rem;
+#dialSvg {
+    width: 100%;
+    height: 100%;
 }
 
-.program-list li {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    color: rgba(241, 245, 249, 0.85);
+.dial-labels {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    font-size: 0.8rem;
 }
 
-.program-list .badge {
-    width: 1.8rem;
-    height: 1.8rem;
-    border-radius: 0.6rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 600;
-    background: rgba(79, 70, 229, 0.25);
-    border: 1px solid rgba(129, 140, 248, 0.5);
+.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 {
+    fill: none;
+    stroke: rgba(148, 163, 184, 0.4);
+    stroke-width: 18;
+    stroke-linecap: round;
+    transition: stroke 0.2s ease, stroke-width 0.2s ease;
+}
+
+#dialSegments path.active {
+    stroke: var(--accent);
+    stroke-width: 22;
+}
+
+#dialPointer {
+    stroke: #f8fafc;
+    stroke-width: 3;
+    stroke-linecap: round;
+    filter: drop-shadow(0 0 4px rgba(248, 250, 252, 0.4));
+}
+
+#dialCenter {
+    fill: #0f172a;
+    stroke: rgba(148, 163, 184, 0.4);
+    stroke-width: 2;
 }
 
+
 .config-card {
     display: flex;
     flex-direction: column;
@@ -245,16 +280,6 @@ body {
     min-width: 220px;
 }
 
-.config-actions button {
-    border: none;
-    border-radius: 999px;
-    padding: 0.55rem 1.4rem;
-    background: linear-gradient(120deg, #6366f1, #c084fc);
-    color: white;
-    font-weight: 600;
-    cursor: pointer;
-}
-
 .list-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));