feat: Footswitch Modes — Stomp/Preset/Snapshot/Combo with scribble strips
Implements multi-mode footswitch system for the Helix Stadium-inspired pedal UI: - Footswitch mode context provider with 4 modes: stomp, preset, snapshot, combo - ModeSelector in status bar (collapsed cycling mode for mobile) - Stomp mode: footswitches toggle individual blocks on/off, scribble strips show block name + status - Preset mode: footswitches show Bank Up/Down + preset selection, scribble strips show preset name + number - Snapshot mode: footswitches recall 8 snapshots, scribble strips show snapshot name - Combo mode: first 4 stomp + bank nav + preset select + global bypass - ScribbleStrip LCD component with LED indicator and double-tap support - Double-tap gesture hook for secondary actions (tuner, snapshot save, etc.) - FootswitchBar container with 8 capacitive-touch footswitch buttons and LED rings - usePedalState hook (WebSocket + API polling, ported from frontend-react/App.jsx) - Dark pedal theme CSS (Helix-inspired) with responsive mobile layout - Full App.tsx rewrite with status bar, footswitch bar, tab bar, and all screens
This commit is contained in:
+697
-113
@@ -1,122 +1,706 @@
|
||||
import { useState } from 'react'
|
||||
import reactLogo from './assets/react.svg'
|
||||
import viteLogo from './assets/vite.svg'
|
||||
import heroImg from './assets/hero.png'
|
||||
import './App.css'
|
||||
/**
|
||||
* Pi Multi-FX Pedal — App Shell
|
||||
*
|
||||
* Main application with:
|
||||
* - Status bar (mode selector, connection status, CPU, sample rate)
|
||||
* - Screen area (tab content: Rig, FX Chain, Models, IRs, Presets, Settings)
|
||||
* - Footswitch bar (8 footswitches with dynamic scribble strips per mode)
|
||||
* - Tab bar (bottom navigation)
|
||||
*/
|
||||
|
||||
function App() {
|
||||
const [count, setCount] = useState(0)
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { usePedalState, fetchPresets, apiPost, apiPut, apiGet, apiUpload } from './pedal/hooks/usePedalState';
|
||||
import { FootswitchModeProvider } from './pedal/FootswitchModeContext';
|
||||
import { FootswitchBar } from './pedal/footswitch/FootswitchBar';
|
||||
import { ModeSelector } from './pedal/footswitch/ModeSelector';
|
||||
import type { PedalState, PedalBlock, BankData } from './pedal/types';
|
||||
import './pedal/pedal.css';
|
||||
|
||||
const T = {
|
||||
bg: '#0A0A0C', panel: '#141418', surface: '#1C1C22',
|
||||
border: '#2A2A32', amber: '#E8A030', blue: '#3A7BA8',
|
||||
blueDim: '#1E4060', amberDim: '#7A5218',
|
||||
green: '#3AB87A', red: '#C84040', text: '#F0EDE6',
|
||||
textSec: '#8888A0', textDim: '#444458',
|
||||
};
|
||||
|
||||
// ── VU Meter ─────────────────────────────────────────────────
|
||||
|
||||
function VUMeter({ level = 0, height = 60 }: { level?: number; height?: number }) {
|
||||
const segs = 12;
|
||||
const active = Math.round((level / 100) * segs);
|
||||
const segColor = (i: number) => {
|
||||
if (i >= 10) return T.red;
|
||||
if (i >= 8) return '#E8C030';
|
||||
return T.green;
|
||||
};
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column-reverse', gap: 2, height, alignItems: 'center' }}>
|
||||
{Array.from({ length: segs }).map((_, i) => (
|
||||
<div key={i} style={{
|
||||
width: 6, height: (height - segs * 2) / segs,
|
||||
borderRadius: 1, background: i < active ? segColor(i) : T.border,
|
||||
boxShadow: i < active ? `0 0 4px ${segColor(i)}` : 'none',
|
||||
transition: 'background 0.05s, box-shadow 0.05s',
|
||||
}} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── FX Type Labels ───────────────────────────────────────────
|
||||
|
||||
const FX_TYPE_LABELS: Record<string, string> = {
|
||||
noise_gate: 'Noise Gate', compressor: 'Compressor', boost: 'Boost',
|
||||
overdrive: 'Overdrive', distortion: 'Distortion', fuzz: 'Fuzz',
|
||||
eq: 'EQ', chorus: 'Chorus', flanger: 'Flanger', phaser: 'Phaser',
|
||||
tremolo: 'Tremolo', vibrato: 'Vibrato', delay: 'Delay', reverb: 'Reverb',
|
||||
volume: 'Volume', nam_amp: 'NAM Amp', ir_cab: 'IR Cab',
|
||||
octaver: 'Octaver', pitch_shifter: 'Pitch Shifter', harmonizer: 'Harmonizer',
|
||||
whammy: 'Whammy', detune: 'Detune', ring_modulator: 'Ring Mod',
|
||||
auto_wah: 'Auto Wah', envelope_filter: 'Env Filter', rotary_speaker: 'Rotary',
|
||||
uni_vibe: 'Uni-Vibe', auto_pan: 'Auto Pan', stereo_widener: 'Stereo Widener',
|
||||
bitcrusher: 'Bitcrusher', wavefolder: 'Wavefolder', rectifier: 'Rectifier',
|
||||
expander: 'Expander', de_esser: 'De-esser', transient_shaper: 'Transient Shaper',
|
||||
parametric_eq: 'Parametric EQ', high_pass_filter: 'High Pass',
|
||||
low_pass_filter: 'Low Pass', band_pass_filter: 'Band Pass',
|
||||
notch_filter: 'Notch Filter', formant_filter: 'Formant Filter',
|
||||
ping_pong_delay: 'Ping Pong Delay', multi_tap_delay: 'Multi Tap',
|
||||
reverse_delay: 'Reverse Delay', tape_echo: 'Tape Echo',
|
||||
shimmer_reverb: 'Shimmer Reverb', early_reflections: 'Early Reflections',
|
||||
sidechain_compressor: 'Sidechain Comp', looper: 'Looper',
|
||||
};
|
||||
|
||||
// ══════════════════════════════════════════════════════════════
|
||||
// RIG SCREEN
|
||||
// ══════════════════════════════════════════════════════════════
|
||||
|
||||
function RigScreen({ state, connected }: { state: PedalState | null; connected: boolean; refresh?: () => void }) {
|
||||
const [volume, setVolume] = useState<number>(
|
||||
state?.master_volume != null ? Math.round(state.master_volume * 100) : 80
|
||||
);
|
||||
const [localBypass, setLocalBypass] = useState<boolean | null>(null);
|
||||
const [localTuner, setLocalTuner] = useState<boolean | null>(null);
|
||||
|
||||
const bypass = localBypass ?? state?.bypass ?? false;
|
||||
const tuner = localTuner ?? state?.tuner_enabled ?? false;
|
||||
|
||||
useEffect(() => {
|
||||
if (state?.master_volume != null) setVolume(Math.round(state.master_volume * 100));
|
||||
}, [state?.master_volume]);
|
||||
|
||||
useEffect(() => {
|
||||
if (state?.bypass !== undefined) setLocalBypass(null);
|
||||
if (state?.tuner_enabled !== undefined) setLocalTuner(null);
|
||||
}, [state?.bypass, state?.tuner_enabled]);
|
||||
|
||||
const handleVolume = async (val: number) => {
|
||||
setVolume(val);
|
||||
try { await apiPut('/api/volume', { volume: val / 100 }); } catch {}
|
||||
};
|
||||
|
||||
const handleBypass = async () => {
|
||||
const next = !bypass;
|
||||
setLocalBypass(next);
|
||||
try { await apiPost('/api/bypass', { bypass: next }); } catch { setLocalBypass(null); }
|
||||
};
|
||||
|
||||
const handleTuner = async () => {
|
||||
const next = !tuner;
|
||||
setLocalTuner(next);
|
||||
try { await apiPost('/api/tuner', { enabled: next }); } catch { setLocalTuner(null); }
|
||||
};
|
||||
|
||||
const inputLevel = state?.input_level ?? 0;
|
||||
const outputLevel = state?.output_level ?? 0;
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
||||
<div className="screen-header">
|
||||
<div>
|
||||
<div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: T.textSec }}>Active Rig</div>
|
||||
<div style={{ display: 'flex', gap: 6, marginTop: 4, flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
{state?.current_preset ? (
|
||||
<span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: T.amber, border: `1px solid ${T.amber}55`, background: `${T.amber}15`, padding: '3px 8px', borderRadius: 5 }}>
|
||||
{state.current_preset.name}
|
||||
</span>
|
||||
) : (
|
||||
<span style={{ fontSize: 11, color: T.textDim }}>No preset loaded</span>
|
||||
)}
|
||||
{connected ? (
|
||||
<span className="pedal-badge pedal-badge-green">Connected</span>
|
||||
) : (
|
||||
<span className="pedal-badge pedal-badge-red">Offline</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
|
||||
<VUMeter level={inputLevel} height={44} />
|
||||
<VUMeter level={outputLevel} height={44} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ flex: 1, overflowY: 'auto', padding: 12, display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
{/* Status row */}
|
||||
<div style={{ background: T.surface, border: `1px solid ${T.border}`, borderRadius: 8, padding: 12, display: 'flex', gap: 10, justifyContent: 'space-around' }}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div className="section-label">Bypass</div>
|
||||
<div className={`switch ${bypass ? 'on' : ''}`} onClick={handleBypass} style={{ margin: '0 auto' }} />
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div className="section-label">Tuner</div>
|
||||
<div className={`switch ${tuner ? 'on' : ''}`} onClick={handleTuner} style={{ margin: '0 auto' }} />
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div className="section-label">Routing</div>
|
||||
<span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: T.amber }}>{state?.routing_mode || 'mono'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tuner */}
|
||||
{tuner && (
|
||||
<div style={{ background: `${T.amber}15`, border: `1px solid ${T.amber}`, borderRadius: 8, textAlign: 'center', padding: '20px 16px' }}>
|
||||
<div style={{ fontSize: 32, marginBottom: 8 }}>🎵</div>
|
||||
<div className="section-label" style={{ color: T.amber, marginBottom: 4, fontSize: 14 }}>TUNER ACTIVE</div>
|
||||
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 24, color: T.amber, letterSpacing: 4 }}>—————●—————</div>
|
||||
<div style={{ fontSize: 11, color: T.textDim, marginTop: 8 }}>Tap switch again to exit tuner mode</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Volume */}
|
||||
<div style={{ background: T.panel, border: `1px solid ${T.border}`, borderRadius: 10, padding: 16, display: 'flex', gap: 20, alignItems: 'center' }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div className="section-label">Master Volume</div>
|
||||
<input type="range" min={0} max={100} value={volume}
|
||||
onChange={e => handleVolume(+e.target.value)}
|
||||
style={{ width: '100%', accentColor: T.amber }} />
|
||||
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: T.amber, marginTop: 4 }}>{volume}%</div>
|
||||
</div>
|
||||
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: T.textSec, textAlign: 'right' }}>
|
||||
{state?.nam_loaded ? 'NAM: Active' : 'NAM: —'}<br />
|
||||
{state?.ir_loaded ? 'IR: Active' : 'IR: —'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Signal chain */}
|
||||
<div style={{ background: T.surface, border: `1px solid ${T.border}`, borderRadius: 8, padding: 12 }}>
|
||||
<div className="section-label">Signal Chain</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4, overflowX: 'auto', padding: '4px 0' }}>
|
||||
{['IN', state?.bypass ? 'BYP' : (state?.nam_loaded ? 'NAM' : 'AMP'), state?.ir_loaded ? 'IR' : 'CAB', 'OUT'].map((s, i, arr) => (
|
||||
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 4, flexShrink: 0 }}>
|
||||
<div style={{ padding: '3px 8px', borderRadius: 4, fontSize: 10, fontWeight: 700,
|
||||
background: i === 0 || i === arr.length - 1 ? T.blueDim : T.amberDim,
|
||||
color: i === 0 || i === arr.length - 1 ? T.blue : T.amber,
|
||||
border: `1px solid ${(i === 0 || i === arr.length - 1 ? T.blue : T.amber)}60` }}>{s}</div>
|
||||
{i < arr.length - 1 && <div style={{ width: 16, height: 2, background: T.border, borderRadius: 1 }} />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ══════════════════════════════════════════════════════════════
|
||||
// FX CHAIN SCREEN
|
||||
// ══════════════════════════════════════════════════════════════
|
||||
|
||||
function FXBlock({ title, type, active = true, bypassed = false }: {
|
||||
title: string; type: string; active?: boolean; bypassed?: boolean;
|
||||
}) {
|
||||
const [open, setOpen] = useState(true);
|
||||
return (
|
||||
<div style={{ background: T.panel, border: `1px solid ${active ? T.amber : T.border}`, borderRadius: 10, overflow: 'hidden', opacity: bypassed ? 0.45 : 1 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderBottom: `1px solid ${T.border}`, background: T.surface, cursor: 'pointer' }}
|
||||
onClick={() => setOpen(o => !o)}>
|
||||
<div style={{ width: 8, height: 8, borderRadius: '50%', background: !bypassed ? T.green : T.textDim, boxShadow: !bypassed ? `0 0 8px ${T.green}` : 'none' }} />
|
||||
<span style={{ flex: 1, fontSize: 13, fontWeight: 600 }}>{title}</span>
|
||||
<span className="pedal-badge pedal-badge-blue" style={{ fontSize: 10, padding: '2px 7px' }}>{type}</span>
|
||||
<span style={{ color: T.textDim, fontSize: 18, marginLeft: 6 }}>{open ? '▾' : '▸'}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FXScreen({ state, connected }: { state: PedalState | null; connected: boolean }) {
|
||||
const [fxList, setFxList] = useState<{ id: number; title: string; type: string; bypassed: boolean }[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (!connected || !state?.current_preset) { setFxList([]); setLoading(false); return; }
|
||||
fetchPresets().then(data => {
|
||||
const banks = data.banks || [];
|
||||
const cp = state.current_preset;
|
||||
const preset = cp ? banks[cp.bank]?.presets?.[cp.program] : null;
|
||||
if (preset?.chain) {
|
||||
setFxList(preset.chain.map((b, i) => ({
|
||||
id: i + 1,
|
||||
title: FX_TYPE_LABELS[b.fx_type] || b.fx_type,
|
||||
type: b.fx_type,
|
||||
bypassed: b.bypassed ?? false,
|
||||
})));
|
||||
}
|
||||
setLoading(false);
|
||||
}).catch(() => { setFxList([]); setLoading(false); });
|
||||
}, [connected, state]);
|
||||
|
||||
if (loading) return <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><div className="loader" /></div>;
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
||||
<div className="screen-header">
|
||||
<div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: T.textSec }}>FX Chain {fxList.length > 0 ? `(${fxList.length})` : ''}</div>
|
||||
</div>
|
||||
<div style={{ flex: 1, overflowY: 'auto', padding: 12, display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
{fxList.length === 0 ? (
|
||||
<div style={{ textAlign: 'center', padding: 30, color: T.textDim, fontSize: 14 }}>No FX blocks in the chain.</div>
|
||||
) : (
|
||||
fxList.map(f => <FXBlock key={f.id} {...f} active={!f.bypassed} />)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ══════════════════════════════════════════════════════════════
|
||||
// MODELS SCREEN
|
||||
// ══════════════════════════════════════════════════════════════
|
||||
|
||||
function ModelsScreen({ connected, refresh }: { state?: PedalState | null; connected: boolean; refresh: () => void }) {
|
||||
const [models, setModels] = useState<{ name: string; path?: string; architecture?: string; size_mb?: string; loaded?: boolean }[]>([]);
|
||||
const [current, setCurrent] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [fileRef, setFileRef] = useState<HTMLInputElement | null>(null);
|
||||
|
||||
const loadModels = useCallback(async () => {
|
||||
if (!connected) { setLoading(false); return; }
|
||||
try {
|
||||
const data = await apiGet<{ models?: any[]; current?: string }>('/api/models');
|
||||
setModels(data.models || []);
|
||||
setCurrent(data.current ?? null);
|
||||
} catch {}
|
||||
setLoading(false);
|
||||
}, [connected]);
|
||||
|
||||
useEffect(() => { loadModels(); }, [loadModels]);
|
||||
|
||||
const handleLoad = async (path?: string) => {
|
||||
if (!path) return;
|
||||
try { await apiPost('/api/models/load', { path }); await loadModels(); refresh(); } catch { alert('Failed to load model'); }
|
||||
};
|
||||
|
||||
const handleUnload = async () => {
|
||||
try { await apiPost('/api/models/unload'); setCurrent(null); await loadModels(); refresh(); } catch { alert('Failed to unload'); }
|
||||
};
|
||||
|
||||
const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
try { await apiUpload('/api/models/upload', file); await loadModels(); } catch { alert('Upload failed'); }
|
||||
};
|
||||
|
||||
if (loading) return <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><div className="loader" /></div>;
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
||||
<div className="screen-header">
|
||||
<div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: T.textSec }}>NAM Models ({models.length})</div>
|
||||
<button className="btn btn-primary btn-sm" onClick={() => fileRef?.click()}>+ Upload</button>
|
||||
<input ref={el => setFileRef(el)} type="file" accept=".nam" style={{ display: 'none' }} onChange={handleUpload} />
|
||||
</div>
|
||||
<div style={{ flex: 1, overflowY: 'auto', padding: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{current && (
|
||||
<div style={{ background: T.surface, border: `1px solid ${T.border}`, borderRadius: 8, padding: 12 }}>
|
||||
<div className="section-label">Loaded Model</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: T.blue, border: `1px solid ${T.blue}55`, background: `${T.blue}15`, padding: '3px 8px', borderRadius: 5 }}>{current}</span>
|
||||
<button className="btn btn-danger btn-sm" onClick={handleUnload}>Unload</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{models.length === 0 ? (
|
||||
<div style={{ textAlign: 'center', padding: 30, color: T.textDim, fontSize: 14 }}>No NAM models found.</div>
|
||||
) : (
|
||||
models.map(m => (
|
||||
<div key={m.name} className="preset-row"
|
||||
style={{ border: m.loaded ? `1px solid ${T.amber}40` : '1px solid transparent', background: m.loaded ? `${T.amber}08` : 'transparent' }}
|
||||
onClick={() => !m.loaded && handleLoad(m.path)}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: 13, fontWeight: 500 }}>{m.name}</div>
|
||||
<div style={{ fontSize: 10, color: T.textDim }}>{m.architecture} · {m.size_mb} MB</div>
|
||||
</div>
|
||||
{m.loaded ? <span className="pedal-badge pedal-badge-green">Loaded</span> : <button className="btn btn-ghost btn-sm">Load</button>}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ══════════════════════════════════════════════════════════════
|
||||
// IRS SCREEN
|
||||
// ══════════════════════════════════════════════════════════════
|
||||
|
||||
function IRsScreen({ connected, refresh }: { state?: PedalState | null; connected: boolean; refresh: () => void }) {
|
||||
const [irs, setIrs] = useState<{ name: string; path?: string; sample_rate?: number; length_ms?: number; loaded?: boolean }[]>([]);
|
||||
const [current, setCurrent] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [fileRef, setFileRef] = useState<HTMLInputElement | null>(null);
|
||||
|
||||
const loadIrs = useCallback(async () => {
|
||||
if (!connected) { setLoading(false); return; }
|
||||
try {
|
||||
const data = await apiGet<{ irs?: any[]; current?: string }>('/api/irs');
|
||||
setIrs(data.irs || []);
|
||||
setCurrent(data.current ?? null);
|
||||
} catch {}
|
||||
setLoading(false);
|
||||
}, [connected]);
|
||||
|
||||
useEffect(() => { loadIrs(); }, [loadIrs]);
|
||||
|
||||
const handleLoad = async (path?: string) => {
|
||||
if (!path) return;
|
||||
try { await apiPost('/api/irs/load', { path }); await loadIrs(); refresh(); } catch { alert('Failed to load IR'); }
|
||||
};
|
||||
|
||||
const handleUnload = async () => {
|
||||
try { await apiPost('/api/irs/unload'); setCurrent(null); await loadIrs(); refresh(); } catch { alert('Failed to unload'); }
|
||||
};
|
||||
|
||||
const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
try { await apiUpload('/api/irs/upload', file); await loadIrs(); } catch { alert('Upload failed'); }
|
||||
};
|
||||
|
||||
if (loading) return <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><div className="loader" /></div>;
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
||||
<div className="screen-header">
|
||||
<div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: T.textSec }}>IR Files ({irs.length})</div>
|
||||
<button className="btn btn-primary btn-sm" onClick={() => fileRef?.click()}>+ Upload</button>
|
||||
<input ref={el => setFileRef(el)} type="file" accept=".wav" style={{ display: 'none' }} onChange={handleUpload} />
|
||||
</div>
|
||||
<div style={{ flex: 1, overflowY: 'auto', padding: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{current && (
|
||||
<div style={{ background: T.surface, border: `1px solid ${T.border}`, borderRadius: 8, padding: 12 }}>
|
||||
<div className="section-label">Loaded IR</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: T.green, border: `1px solid ${T.green}55`, background: `${T.green}15`, padding: '3px 8px', borderRadius: 5 }}>{current}</span>
|
||||
<button className="btn btn-danger btn-sm" onClick={handleUnload}>Unload</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{irs.length === 0 ? (
|
||||
<div style={{ textAlign: 'center', padding: 30, color: T.textDim, fontSize: 14 }}>No IR files found.</div>
|
||||
) : (
|
||||
irs.map(ir => (
|
||||
<div key={ir.name} className="preset-row"
|
||||
style={{ border: ir.loaded ? `1px solid ${T.amber}40` : '1px solid transparent', background: ir.loaded ? `${T.amber}08` : 'transparent' }}
|
||||
onClick={() => !ir.loaded && handleLoad(ir.path)}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: 13, fontWeight: 500 }}>{ir.name}</div>
|
||||
<div style={{ fontSize: 10, color: T.textDim }}>{ir.sample_rate} Hz · {ir.length_ms} ms</div>
|
||||
</div>
|
||||
{ir.loaded ? <span className="pedal-badge pedal-badge-green">Loaded</span> : <button className="btn btn-ghost btn-sm">Load</button>}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ══════════════════════════════════════════════════════════════
|
||||
// PRESETS SCREEN
|
||||
// ══════════════════════════════════════════════════════════════
|
||||
|
||||
function PresetsScreen({ state, connected, refresh }: { state: PedalState | null; connected: boolean; refresh: () => void }) {
|
||||
const [banks, setBanks] = useState<BankData[]>([]);
|
||||
const [selectedBank, setSelectedBank] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const loadPresets = useCallback(async () => {
|
||||
if (!connected) {
|
||||
setBanks([{ name: 'Default', number: 0, presets: [{ name: 'Edge of Breakup', bank: 0, program: 0 }, { name: 'Modern High Gain', bank: 0, program: 1 }, null, null] }]);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const data = await fetchPresets();
|
||||
setBanks(data.banks || []);
|
||||
} catch {}
|
||||
setLoading(false);
|
||||
}, [connected]);
|
||||
|
||||
useEffect(() => { loadPresets(); }, [loadPresets]);
|
||||
|
||||
const handleActivate = async (bank: number, program: number) => {
|
||||
try { await apiPost(`/api/presets/${bank}/${program}/activate`); await loadPresets(); refresh(); } catch { alert('Failed to load preset'); }
|
||||
};
|
||||
|
||||
if (loading) return <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><div className="loader" /></div>;
|
||||
|
||||
const currentPreset = state?.current_preset;
|
||||
const bankData = banks[selectedBank];
|
||||
const presets = bankData?.presets || [];
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
||||
<div className="screen-header">
|
||||
<div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: T.textSec }}>Presets</div>
|
||||
</div>
|
||||
<div style={{ flex: 1, overflowY: 'auto', padding: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{banks.length > 1 && (
|
||||
<div style={{ display: 'flex', background: T.surface, borderRadius: 6, border: `1px solid ${T.border}`, overflow: 'hidden' }}>
|
||||
{banks.map((b, i) => (
|
||||
<button key={b.number} style={{
|
||||
flex: 1, padding: '7px 12px', fontSize: 12, fontWeight: 500, letterSpacing: '0.04em',
|
||||
background: selectedBank === i ? T.amber : 'none', border: 'none',
|
||||
color: selectedBank === i ? '#000' : T.textSec, cursor: 'pointer', transition: 'all 0.15s',
|
||||
}} onClick={() => setSelectedBank(i)}>{b.name}</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{currentPreset && (
|
||||
<div style={{ background: T.surface, border: `1px solid ${T.border}`, borderRadius: 8, padding: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: 11, color: T.textDim }}>Current</div>
|
||||
<div style={{ fontSize: 14, fontWeight: 600, color: T.amber }}>
|
||||
{currentPreset.name}
|
||||
<span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: T.textDim, marginLeft: 8 }}>Bank {currentPreset.bank} · Prog {currentPreset.program}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{presets.length === 0 ? (
|
||||
<div style={{ textAlign: 'center', padding: 30, color: T.textDim, fontSize: 14 }}>No presets in this bank.</div>
|
||||
) : (
|
||||
presets.map((p, i) => {
|
||||
if (!p) return null;
|
||||
const isActive = currentPreset?.bank === p.bank && currentPreset?.program === p.program;
|
||||
return (
|
||||
<div key={i} className="preset-row"
|
||||
style={{ border: isActive ? `1px solid ${T.amber}40` : '1px solid transparent', background: isActive ? `${T.amber}08` : 'transparent' }}
|
||||
onClick={() => handleActivate(p.bank, p.program)}>
|
||||
<div style={{
|
||||
width: 28, height: 28, borderRadius: 6, display: 'flex', alignItems: 'center',
|
||||
justifyContent: 'center', fontSize: 12, fontWeight: 700,
|
||||
background: isActive ? `${T.amber}22` : T.surface,
|
||||
color: isActive ? T.amber : T.textDim,
|
||||
border: `1px solid ${isActive ? `${T.amber}60` : T.border}`,
|
||||
fontFamily: "'JetBrains Mono', monospace",
|
||||
}}>{p.program + 1}</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: 13, fontWeight: 600 }}>{p.name}</div>
|
||||
<div style={{ fontSize: 10, color: T.textDim }}>Bank {p.bank} · Program {p.program}</div>
|
||||
</div>
|
||||
{isActive && <span style={{ color: T.amber, fontSize: 16 }}>●</span>}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ══════════════════════════════════════════════════════════════
|
||||
// SETTINGS SCREEN
|
||||
// ══════════════════════════════════════════════════════════════
|
||||
|
||||
function SettingsScreen({ state: pedalState }: { state: PedalState | null; refresh?: () => void }) {
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
||||
<div className="screen-header">
|
||||
<div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: T.textSec }}>Settings</div>
|
||||
</div>
|
||||
<div style={{ flex: 1, overflowY: 'auto', padding: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
<div style={{ background: T.surface, border: `1px solid ${T.border}`, borderRadius: 8, padding: 12 }}>
|
||||
<div className="section-label">System</div>
|
||||
{pedalState?.cpu_percent != null && (
|
||||
<div className="setting-row">
|
||||
<span style={{ fontSize: 13 }}>CPU</span>
|
||||
<span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: T.amber }}>{pedalState.cpu_percent}%</span>
|
||||
</div>
|
||||
)}
|
||||
{pedalState?.sample_rate && (
|
||||
<div className="setting-row">
|
||||
<span style={{ fontSize: 13 }}>Sample Rate</span>
|
||||
<span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: T.amber }}>{pedalState.sample_rate / 1000}kHz</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="setting-row" style={{ border: 'none' }}>
|
||||
<span style={{ fontSize: 13 }}>Connection</span>
|
||||
<span className="pedal-badge pedal-badge-green">Live</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ══════════════════════════════════════════════════════════════
|
||||
// APP SHELL
|
||||
// ══════════════════════════════════════════════════════════════
|
||||
|
||||
const TABS = [
|
||||
{ id: 'rig', label: 'Rig', icon: '🎛' },
|
||||
{ id: 'fx', label: 'FX', icon: '⛓' },
|
||||
{ id: 'models', label: 'Models', icon: '📁' },
|
||||
{ id: 'irs', label: 'IRs', icon: '🎚' },
|
||||
{ id: 'presets', label: 'Presets', icon: '⭐' },
|
||||
{ id: 'settings', label: 'Settings', icon: '⚙' },
|
||||
] as const;
|
||||
|
||||
type TabId = (typeof TABS)[number]['id'];
|
||||
|
||||
// ── Pedal Shell Content (inner component that has context access) ──
|
||||
|
||||
function PedalContent() {
|
||||
const [tab, setTab] = useState<TabId>('rig');
|
||||
const { state, connected, refresh } = usePedalState();
|
||||
|
||||
// Build block list from current preset state
|
||||
const [blocks, setBlocks] = useState<PedalBlock[]>([]);
|
||||
const [bankNames, setBankNames] = useState<string[]>(['Default']);
|
||||
|
||||
useEffect(() => {
|
||||
if (connected && state?.current_preset) {
|
||||
fetchPresets().then(data => {
|
||||
const names = (data.banks || []).map((b: BankData) => b.name);
|
||||
if (names.length > 0) setBankNames(names);
|
||||
|
||||
const cp = state.current_preset;
|
||||
const bank = data.banks?.[cp.bank];
|
||||
const preset = bank?.presets?.[cp.program];
|
||||
if (preset?.chain) {
|
||||
setBlocks(preset.chain.map((b, i) => ({
|
||||
id: i + 1,
|
||||
fx_type: b.fx_type,
|
||||
title: FX_TYPE_LABELS[b.fx_type] || b.fx_type,
|
||||
bypassed: b.bypassed ?? false,
|
||||
})));
|
||||
}
|
||||
}).catch(() => {});
|
||||
}
|
||||
}, [connected, state?.current_preset]);
|
||||
|
||||
const handleToggleBlock = useCallback(async (blockId: number, newBypass: boolean) => {
|
||||
setBlocks(prev => prev.map(b => b.id === blockId ? { ...b, bypassed: newBypass } : b));
|
||||
if (connected) {
|
||||
try { await apiPost('/api/blocks/toggle', { block_id: blockId, bypass: newBypass }); } catch {}
|
||||
}
|
||||
}, [connected]);
|
||||
|
||||
// Snapshots (placeholder — will be wired to real API)
|
||||
const [snapshots] = useState<{ name: string; active: boolean }[]>(
|
||||
Array.from({ length: 8 }, (_, i) => ({ name: `Snap ${i + 1}`, active: false }))
|
||||
);
|
||||
|
||||
return (
|
||||
<FootswitchModeProvider
|
||||
state={state}
|
||||
connected={connected}
|
||||
refresh={refresh}
|
||||
blocks={blocks}
|
||||
bankNames={bankNames}
|
||||
snapshots={snapshots}
|
||||
onToggleBlock={handleToggleBlock}
|
||||
>
|
||||
<div className="pedal-shell">
|
||||
{/* ── Status Bar ── */}
|
||||
<div className="pedal-statusbar">
|
||||
<div className="pedal-statusbar-left">
|
||||
<div className="pedal-led-dot" style={{
|
||||
background: connected ? T.green : T.red,
|
||||
boxShadow: connected ? `0 0 6px ${T.green}` : 'none',
|
||||
}} />
|
||||
<span className="pedal-brand">PI MULTI-FX</span>
|
||||
{state?.tuner_enabled && <span className="pedal-badge pedal-badge-amber">TUNER</span>}
|
||||
</div>
|
||||
<div className="pedal-statusbar-mid">
|
||||
<ModeSelector collapsed />
|
||||
</div>
|
||||
<div className="pedal-statusbar-right">
|
||||
{state?.cpu_percent != null && (
|
||||
<span className="pedal-brand" style={{ color: T.textDim }}>CPU {state.cpu_percent}%</span>
|
||||
)}
|
||||
{state?.sample_rate && (
|
||||
<span className="pedal-brand" style={{ color: T.textDim }}>{state.sample_rate / 1000}kHz</span>
|
||||
)}
|
||||
{state?.bypass && <span className="pedal-badge pedal-badge-red">BYP</span>}
|
||||
{state?.nam_loaded && <span className="pedal-badge pedal-badge-blue">NAM</span>}
|
||||
{state?.ir_loaded && <span className="pedal-badge pedal-badge-green">IR</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Screen Area ── */}
|
||||
<div className="pedal-screen">
|
||||
{tab === 'rig' && <RigScreen state={state} connected={connected} />}
|
||||
{tab === 'fx' && <FXScreen state={state} connected={connected} />}
|
||||
{tab === 'models' && <ModelsScreen connected={connected} refresh={refresh} />}
|
||||
{tab === 'irs' && <IRsScreen connected={connected} refresh={refresh} />}
|
||||
{tab === 'presets' && <PresetsScreen state={state} connected={connected} refresh={refresh} />}
|
||||
{tab === 'settings' && <SettingsScreen state={state} />}
|
||||
</div>
|
||||
|
||||
{/* ── Footswitch Bar ── */}
|
||||
<FootswitchBar />
|
||||
|
||||
{/* ── Tab Bar ── */}
|
||||
<div className="pedal-tabbar">
|
||||
{TABS.map(t => (
|
||||
<div key={t.id} className={`pedal-tab ${tab === t.id ? 'pedal-tab-active' : ''}`} onClick={() => setTab(t.id)}>
|
||||
<span className="pedal-tab-icon">{t.icon}</span>
|
||||
{t.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</FootswitchModeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Root App ─────────────────────────────────────────────────
|
||||
|
||||
export default function App() {
|
||||
useEffect(() => { document.title = 'Pi Multi-FX Pedal'; }, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<section id="center">
|
||||
<div className="hero">
|
||||
<img src={heroImg} className="base" width="170" height="179" alt="" />
|
||||
<img src={reactLogo} className="framework" alt="React logo" />
|
||||
<img src={viteLogo} className="vite" alt="Vite logo" />
|
||||
</div>
|
||||
<div>
|
||||
<h1>Get started</h1>
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="counter"
|
||||
onClick={() => setCount((count) => count + 1)}
|
||||
>
|
||||
Count is {count}
|
||||
</button>
|
||||
</section>
|
||||
{/* Global styles for inline-styled components */}
|
||||
<style>{`
|
||||
.switch { width: 40px; height: 22px; border-radius: 11px; background: ${T.border}; cursor: pointer; position: relative; transition: background 0.2s; flex-shrink: 0; display: inline-block; }
|
||||
.switch.on { background: ${T.green}; }
|
||||
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: white; transition: transform 0.15s; }
|
||||
.switch.on::after { transform: translateX(18px); }
|
||||
|
||||
<div className="ticks"></div>
|
||||
.btn { padding: 10px 18px; border-radius: 7px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; border: none; cursor: pointer; transition: all 0.12s; }
|
||||
.btn-primary { background: ${T.amber}; color: #000; }
|
||||
.btn-primary:active { filter: brightness(0.85); transform: scale(0.97); }
|
||||
.btn-ghost { background: ${T.surface}; color: ${T.text}; border: 1px solid ${T.border}; }
|
||||
.btn-ghost:active { background: ${T.border}; }
|
||||
.btn-danger { background: rgba(200,64,64,0.2); color: ${T.red}; border: 1px solid rgba(200,64,64,0.3); }
|
||||
.btn-sm { padding: 6px 12px; font-size: 12px; }
|
||||
|
||||
<section id="next-steps">
|
||||
<div id="docs">
|
||||
<svg className="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#documentation-icon"></use>
|
||||
</svg>
|
||||
<h2>Documentation</h2>
|
||||
<p>Your questions, answered</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vite.dev/" target="_blank">
|
||||
<img className="logo" src={viteLogo} alt="" />
|
||||
Explore Vite
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://react.dev/" target="_blank">
|
||||
<img className="button-icon" src={reactLogo} alt="" />
|
||||
Learn more
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="social">
|
||||
<svg className="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#social-icon"></use>
|
||||
</svg>
|
||||
<h2>Connect with us</h2>
|
||||
<p>Join the Vite community</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#github-icon"></use>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vite.dev/" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#discord-icon"></use>
|
||||
</svg>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://x.com/vite_js" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#x-icon"></use>
|
||||
</svg>
|
||||
X.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#bluesky-icon"></use>
|
||||
</svg>
|
||||
Bluesky
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
.loader { width: 20px; height: 20px; border: 2px solid ${T.border}; border-top-color: ${T.amber}; border-radius: 50%; animation: spin 0.6s linear infinite; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
<div className="ticks"></div>
|
||||
<section id="spacer"></section>
|
||||
.screen-header { padding: 10px 14px 6px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid ${T.border}; flex-shrink: 0; }
|
||||
.section-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: ${T.textDim}; font-weight: 600; margin-bottom: 8px; }
|
||||
.preset-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: background 0.12s; }
|
||||
.preset-row:active { background: rgba(232,160,48,0.08); }
|
||||
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid ${T.border}; }
|
||||
|
||||
::-webkit-scrollbar { width: 4px; height: 4px; }
|
||||
::-webkit-scrollbar-track { background: ${T.panel}; }
|
||||
::-webkit-scrollbar-thumb { background: ${T.border}; border-radius: 2px; }
|
||||
`}</style>
|
||||
<PedalContent />
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default App
|
||||
|
||||
Reference in New Issue
Block a user