QoL changes and removing the visualization for now

SimpleDances/main.py

@@ -120,7 +120,11 @@ DANCE_CATALOG: dict[
 }
 
 DANCE_ORDER = sorted(DANCE_CATALOG.keys())
-DEFAULT_DANCE = "simple_nod" if "simple_nod" in DANCE_CATALOG else DANCE_ORDER[0]
+DEFAULT_DANCE = (
+    "groovy_sway_and_roll"
+    if "groovy_sway_and_roll" in DANCE_CATALOG
+    else DANCE_ORDER[0]
+)
 ANTENNA_CHOICES = sorted(AVAILABLE_ANTENNA_MOVES.keys())
 
 
@@ -414,7 +418,7 @@ class Simpledances(ReachyMiniApp):
 
         runtime_state: dict[str, Any] = {
             "selected": DEFAULT_DANCE,
-            "playing": False,
+            "playing": True,
             "bpm": clamp(persisted["globals"].get("bpm", DEFAULT_GLOBALS["bpm"]), BPM_RANGE),
             "dance_params": dance_params,
             "factory_params": factory_params,

SimpleDances/static/index.html

@@ -82,13 +82,12 @@
             <div class="card-header">
                 <div>
                     <h2>Kinesthetic Visualizer</h2>
-                    <p>Every DoF feeds the glow. Watch orientation, translation, and antennas carve luminous trails.</p>
+                    <p>The kinetic drawing is temporarily removed. Ping the author if this feature matters to you!</p>
                 </div>
                 <span class="chip" id="vizBpm">0 BPM</span>
             </div>
-            <div class="viz-stage">
-                <canvas id="vizCanvas"></canvas>
-                <div class="viz-legend" id="vizLegend"></div>
+            <div class="viz-placeholder">
+                <p>¯\_(ツ)_/¯</p>
             </div>
         </section>
     </main>

SimpleDances/static/main.js

@@ -12,8 +12,6 @@ const saveParamsBtn = document.getElementById('saveParams');
 const applyParamsBtn = document.getElementById('applyParams');
 const resetParamsBtn = document.getElementById('resetParams');
 const toast = document.getElementById('toast');
-const vizCanvas = document.getElementById('vizCanvas');
-const vizLegend = document.getElementById('vizLegend');
 const vizBpm = document.getElementById('vizBpm');
 
 const currentUrl = new URL(window.location.href);
@@ -43,159 +41,6 @@ let applyInFlight = false;
 let saveInFlight = false;
 let resetInFlight = false;
 let pendingBpmValue = null;
-const vizNodes = [];
-const vizConfig = [
-    {
-        key: 'orientation',
-        index: 0,
-        label: 'Roll Orbit',
-        subtitle: 'Head roll',
-        type: 'angle',
-        shape: 'rose',
-        petals: 4,
-        color: '#ff8ba7',
-        glow: '#ffd4e0',
-        scale: Math.PI / 2,
-        phaseScale: 1.0,
-        baseRadius: 60,
-        amplitude: 36,
-        layoutAngle: 0,
-        layoutRadius: 0,
-    },
-    {
-        key: 'orientation',
-        index: 1,
-        label: 'Pitch Bloom',
-        subtitle: 'Head pitch',
-        type: 'angle',
-        shape: 'lemniscate',
-        color: '#ffc16b',
-        glow: '#ffe1ab',
-        scale: Math.PI / 2,
-        phaseScale: 0.9,
-        baseRadius: 70,
-        amplitude: 42,
-        layoutAngle: Math.PI / 4,
-        layoutRadius: 40,
-    },
-    {
-        key: 'orientation',
-        index: 2,
-        label: 'Yaw Halo',
-        subtitle: 'Head yaw',
-        type: 'angle',
-        shape: 'cardioid',
-        color: '#cab0ff',
-        glow: '#e8dcff',
-        scale: Math.PI / 2,
-        phaseScale: 1.15,
-        baseRadius: 55,
-        amplitude: 34,
-        layoutAngle: Math.PI / 2,
-        layoutRadius: 30,
-    },
-    {
-        key: 'position',
-        index: 0,
-        label: 'X Dance',
-        subtitle: 'X shift',
-        type: 'linear',
-        shape: 'lissajous',
-        color: '#7cf5ff',
-        glow: '#c4fbff',
-        scale: 0.03,
-        multiplier: 40,
-        ampX: 70,
-        ampY: 40,
-        freqX: 3,
-        freqY: 2,
-        phaseShift: Math.PI / 4,
-        baseSpeed: 0.01,
-        speedScale: 0.02,
-        layoutAngle: Math.PI,
-        layoutRadius: 20,
-    },
-    {
-        key: 'position',
-        index: 1,
-        label: 'Y Bloom',
-        subtitle: 'Y shift',
-        type: 'linear',
-        shape: 'epitrochoid',
-        color: '#6df9d5',
-        glow: '#b7ffe8',
-        scale: 0.03,
-        multiplier: 38,
-        R: 50,
-        r: 12,
-        d: 18,
-        baseSpeed: 0.012,
-        speedScale: 0.018,
-        layoutAngle: (3 * Math.PI) / 4,
-        layoutRadius: 30,
-    },
-    {
-        key: 'position',
-        index: 2,
-        label: 'Z Bloom',
-        subtitle: 'Z lift',
-        type: 'linear',
-        shape: 'butterfly',
-        color: '#8dff8a',
-        glow: '#d2ffd0',
-        scale: 0.03,
-        multiplier: 35,
-        amplitude: 40,
-        baseSpeed: 0.013,
-        speedScale: 0.02,
-        layoutAngle: (5 * Math.PI) / 4,
-        layoutRadius: 30,
-    },
-    {
-        key: 'antennas',
-        index: 0,
-        label: 'Left Antenna',
-        subtitle: 'Left antenna',
-        type: 'angle',
-        shape: 'star',
-        petals: 5,
-        color: '#ff8cda',
-        glow: '#ffc2ef',
-        scale: Math.PI / 2,
-        phaseScale: 1.1,
-        baseRadius: 45,
-        amplitude: 30,
-        layoutAngle: (7 * Math.PI) / 4,
-        layoutRadius: 35,
-    },
-    {
-        key: 'antennas',
-        index: 1,
-        label: 'Right Antenna',
-        subtitle: 'Right antenna',
-        type: 'angle',
-        shape: 'astroid',
-        color: '#ffb8ad',
-        glow: '#ffd5cf',
-        scale: Math.PI / 2,
-        phaseScale: 1.05,
-        baseRadius: 50,
-        amplitude: 28,
-        layoutAngle: (3 * Math.PI) / 2,
-        layoutRadius: 20,
-    },
-];
-
-function angleDiff(a, b) {
-    let d = a - b;
-    const twoPi = Math.PI * 2;
-    d = ((d + Math.PI) % twoPi + twoPi) % twoPi - Math.PI;
-    return d;
-}
-
-function clamp(value, min, max) {
-    return Math.min(Math.max(value, min), max);
-}
 
 function debounce(fn, delay) {
     let timer;
@@ -553,216 +398,21 @@ function updateGlobalsUI() {
     bpmRange.value = state.bpm;
     bpmInput.value = state.bpm.toFixed(0);
     bpmDisplay.textContent = `${Math.round(state.bpm)} BPM`;
-    vizBpm.textContent = `${Math.round(state.bpm)} BPM`;
-}
-
-let vizCtx;
-let vizWidth = 900;
-let vizHeight = 520;
-
-function initVisualizationStage() {
-    if (!vizCanvas || !vizLegend) {
-        return;
+    if (vizBpm) {
+        vizBpm.textContent = `${Math.round(state.bpm)} BPM`;
     }
-
-    const parentWidth = vizCanvas.parentElement ? vizCanvas.parentElement.clientWidth : 900;
-    vizWidth = Math.max(500, parentWidth);
-    vizHeight = window.innerWidth < 820 ? 420 : 520;
-    const dpr = window.devicePixelRatio || 1;
-    vizCanvas.width = vizWidth * dpr;
-    vizCanvas.height = vizHeight * dpr;
-    vizCanvas.style.width = `${vizWidth}px`;
-    vizCanvas.style.height = `${vizHeight}px`;
-    vizCtx = vizCanvas.getContext('2d');
-    vizCtx.scale(dpr, dpr);
-    vizCtx.fillStyle = '#05060a';
-    vizCtx.fillRect(0, 0, vizWidth, vizHeight);
-
-    vizLegend.innerHTML = '';
-    vizNodes.length = 0;
-
-    vizConfig.forEach((cfg) => {
-        const layoutRadius = cfg.layoutRadius || 0;
-        const angle = cfg.layoutAngle || 0;
-        const centerX = vizWidth / 2 + Math.cos(angle) * layoutRadius;
-        const centerY = vizHeight / 2 + Math.sin(angle) * layoutRadius;
-
-        const legendItem = document.createElement('div');
-        legendItem.className = 'viz-legend-item';
-        const dot = document.createElement('span');
-        dot.className = 'viz-dot';
-        dot.style.background = cfg.color;
-        const text = document.createElement('div');
-        const title = document.createElement('strong');
-        title.textContent = cfg.label;
-        const subtitle = document.createElement('p');
-        subtitle.textContent = cfg.subtitle;
-        text.appendChild(title);
-        text.appendChild(subtitle);
-        legendItem.appendChild(dot);
-        legendItem.appendChild(text);
-        vizLegend.appendChild(legendItem);
-
-        vizNodes.push({
-            config: cfg,
-            centerX,
-            centerY,
-            currentValue: 0,
-            targetValue: 0,
-            lastRaw: 0,
-            hasRaw: false,
-            unwrappedRadians: 0,
-            timePhase: 0,
-            prevPoint: { x: centerX, y: centerY },
-        });
-    });
-}
-
-function updateVisualizationTargets(offsets) {
-    vizNodes.forEach((node) => {
-        const cfg = node.config;
-        const values = offsets[cfg.key] || [];
-        const raw = Number(values[cfg.index] || 0);
-        if (cfg.type === 'angle') {
-            if (node.hasRaw) {
-                node.unwrappedRadians += angleDiff(raw, node.lastRaw);
-            } else {
-                node.unwrappedRadians = raw;
-                node.hasRaw = true;
-            }
-            node.lastRaw = raw;
-            node.targetValue = node.unwrappedRadians;
-        } else {
-            node.targetValue = raw;
-        }
-    });
-}
-
-function computeStagePoint(node, theta, normalized) {
-    const cfg = node.config;
-    const cx = node.centerX;
-    const cy = node.centerY;
-    const amp = (cfg.amplitude || 40) * (0.6 + 0.4 * Math.abs(normalized));
-    switch (cfg.shape) {
-        case 'rose': {
-            const petals = cfg.petals || 4;
-            const r = cfg.baseRadius + amp * Math.sin(petals * theta);
-            return {
-                x: cx + r * Math.cos(theta),
-                y: cy + r * Math.sin(theta),
-            };
-        }
-        case 'lemniscate': {
-            const a = cfg.baseRadius + amp;
-            const x = cx + a * Math.sin(theta);
-            const y = cy + a * Math.sin(theta) * Math.cos(theta);
-            return { x, y };
-        }
-        case 'cardioid': {
-            const r = cfg.baseRadius + amp * (1 - Math.sin(theta));
-            return {
-                x: cx + r * Math.cos(theta),
-                y: cy + r * Math.sin(theta),
-            };
-        }
-        case 'lissajous': {
-            const ampX = (cfg.ampX || 60) * (0.5 + Math.abs(normalized));
-            const ampY = (cfg.ampY || 40) * (0.5 + Math.abs(normalized));
-            return {
-                x: cx + ampX * Math.sin((cfg.freqX || 3) * theta + (cfg.phaseShift || 0)),
-                y: cy + ampY * Math.sin((cfg.freqY || 2) * theta),
-            };
-        }
-        case 'epitrochoid': {
-            const R = cfg.R || 60;
-            const r = cfg.r || 10;
-            const d = cfg.d || 20;
-            const scale = 0.8 + Math.abs(normalized);
-            const x = cx + ((R + r) * Math.cos(theta) - scale * d * Math.cos(((R + r) / r) * theta));
-            const y = cy + ((R + r) * Math.sin(theta) - scale * d * Math.sin(((R + r) / r) * theta));
-            return { x, y };
-        }
-        case 'butterfly': {
-            const mod = normalized + 1;
-            const r = amp * (Math.exp(Math.sin(theta)) - 2 * Math.cos(4 * theta) + Math.pow(Math.sin((2 * theta - Math.PI) / 24), 5));
-            return {
-                x: cx + r * Math.cos(theta) * mod,
-                y: cy + r * Math.sin(theta) * mod,
-            };
-        }
-        case 'star': {
-            const petals = cfg.petals || 5;
-            const r = cfg.baseRadius + amp * Math.cos(petals * theta);
-            return {
-                x: cx + r * Math.cos(theta),
-                y: cy + r * Math.sin(theta),
-            };
-        }
-        case 'astroid': {
-            const a = cfg.baseRadius + amp;
-            return {
-                x: cx + a * Math.pow(Math.cos(theta), 3),
-                y: cy + a * Math.pow(Math.sin(theta), 3),
-            };
-        }
-        default:
-            return { x: cx, y: cy };
-    }
-}
-
-function animateVisualization() {
-    if (!vizCtx) {
-        requestAnimationFrame(animateVisualization);
-        return;
-    }
-    vizCtx.fillStyle = 'rgba(5, 6, 10, 0.01)';
-    vizCtx.fillRect(0, 0, vizWidth, vizHeight);
-
-    vizNodes.forEach((node) => {
-        const cfg = node.config;
-        node.currentValue += (node.targetValue - node.currentValue) * 0.08;
-        let theta;
-        if (cfg.type === 'angle') {
-            theta = node.currentValue * (cfg.phaseScale || 1);
-        } else {
-            node.timePhase += (cfg.baseSpeed || 0.01) + Math.abs(node.currentValue) * (cfg.speedScale || 0.02);
-            theta = node.timePhase;
-        }
-        const normalized = clamp(node.currentValue / (cfg.scale || 1), -1, 1);
-        const point = computeStagePoint(node, theta, normalized);
-        vizCtx.lineCap = 'round';
-        vizCtx.strokeStyle = cfg.color;
-        vizCtx.lineWidth = 1.2 + Math.abs(normalized) * 2.5;
-        vizCtx.beginPath();
-        vizCtx.moveTo(node.prevPoint.x, node.prevPoint.y);
-        vizCtx.lineTo(point.x, point.y);
-        vizCtx.stroke();
-
-        vizCtx.fillStyle = cfg.color;
-        vizCtx.shadowColor = cfg.glow || cfg.color;
-        vizCtx.shadowBlur = 10;
-        vizCtx.beginPath();
-        vizCtx.arc(point.x, point.y, 2 + Math.abs(normalized) * 2.5, 0, Math.PI * 2);
-        vizCtx.fill();
-        vizCtx.shadowBlur = 0;
-
-        node.prevPoint = point;
-    });
-
-    requestAnimationFrame(animateVisualization);
 }
 
 async function pollVisualization() {
     try {
         const data = await apiRequest('api/visualization');
-        if (data && data.offsets) {
-            updateVisualizationTargets(data.offsets);
-        }
         if (typeof data?.playing === 'boolean') {
             updatePlayingChip(data.playing);
         }
         if (typeof data?.bpm === 'number') {
-            vizBpm.textContent = `${Math.round(data.bpm)} BPM`;
+            if (vizBpm) {
+                vizBpm.textContent = `${Math.round(data.bpm)} BPM`;
+            }
         }
     } catch (error) {
         // Swallow visualization errors to avoid noisy UI.
@@ -882,13 +532,11 @@ function attachEventListeners() {
 
 async function init() {
     setStatus('Booting UI…');
-    initVisualizationStage();
     attachEventListeners();
     updateActionButtons();
     await loadDances();
     await refreshState();
     pollVisualization();
-    requestAnimationFrame(animateVisualization);
 }
 
 init();

SimpleDances/static/style.css

@@ -295,70 +295,15 @@ input[type="number"]:focus {
     margin-bottom: 24px;
 }
 
-.viz-stage {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    margin-top: 16px;
-}
-
-.viz-stage canvas {
-    width: 100%;
-    min-height: 360px;
-    border-radius: 22px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    background: #05060a;
-    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.45);
-}
-
-.viz-legend {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-}
-
-.viz-legend-item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 8px 12px;
-    border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+.viz-placeholder {
+    margin-top: 12px;
+    padding: 24px;
+    border-radius: 16px;
+    border: 1px dashed rgba(255, 255, 255, 0.2);
     background: rgba(255, 255, 255, 0.03);
-    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.02);
-}
-
-.viz-legend-item strong {
-    display: block;
-    font-size: 0.95rem;
-}
-
-.viz-legend-item p {
-    margin: 2px 0 0;
-    font-size: 0.8rem;
     color: var(--text-muted);
-}
-
-.viz-dot {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-}
-
-@media (min-width: 960px) {
-    .viz-stage {
-        flex-direction: row;
-        align-items: flex-start;
-    }
-
-    .viz-stage canvas {
-        flex: 3;
-    }
-
-    .viz-legend {
-        flex: 1;
-        flex-direction: column;
-    }
+    font-size: 0.95rem;
+    line-height: 1.4;
 }
 
 .params-grid {