shawn
214f3c13d7
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
707 lines
36 KiB
TypeScript
707 lines
36 KiB
TypeScript
/**
|
|
* 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)
|
|
*/
|
|
|
|
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 (
|
|
<>
|
|
{/* 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); }
|
|
|
|
.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; }
|
|
|
|
.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); } }
|
|
|
|
.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 />
|
|
</>
|
|
);
|
|
}
|