297 lines
17 KiB
HTML
297 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Pi Multi-FX — Boss-Size Touchscreen Pedal</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
background: #0d0d0d;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 40px 20px;
|
||
color: #e0e0e0;
|
||
}
|
||
h1 { font-size: 1.4rem; margin-bottom: 4px; }
|
||
h2 { font-size: 1rem; margin-bottom: 4px; color: #ccc; }
|
||
.subtitle { color: #999; font-size: 0.85rem; margin-bottom: 20px; }
|
||
.container { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; max-width: 1100px; }
|
||
.panel {
|
||
background: #1a1a1a;
|
||
border: 1px solid #333;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
}
|
||
.panel h3 {
|
||
font-size: 0.8rem;
|
||
color: #999;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.comp-table { width: 100%; font-size: 0.82rem; border-collapse: collapse; }
|
||
.comp-table td { padding: 8px 6px; border-bottom: 1px solid #222; }
|
||
.comp-table td:first-child { color: #888; white-space: nowrap; padding-right: 12px; }
|
||
.comp-table td:last-child { color: #e0e0e0; }
|
||
.cost-row td { border-bottom: none !important; padding-top: 12px !important; }
|
||
.cost-row td:last-child { color: #ffa726; font-weight: 600; font-size: 1rem; }
|
||
.label { color: #4fc3f7; }
|
||
.accent { color: #66bb6a; }
|
||
.warn { color: #ffa726; }
|
||
.check { color: #66bb6a; }
|
||
svg text { font-family: 'Courier New', monospace; }
|
||
.ruler-label { fill: #666; font-size: 7px; text-anchor: middle; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>🎸 Pi Multi-FX — Boss-Size Touchscreen Concept</h1>
|
||
<div class="subtitle">1590BB Enclosure · 5" DSI Touch · I2S HAT Stack</div>
|
||
|
||
<div class="container">
|
||
<!-- Main concept image -->
|
||
<div class="panel">
|
||
<h3>Exploded View — Stackup</h3>
|
||
<svg width="480" height="520" viewBox="0 0 480 520">
|
||
<!-- Background grid -->
|
||
<pattern id="g" width="20" height="20" patternUnits="userSpaceOnUse">
|
||
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="#1a1a1a" stroke-width="0.3"/>
|
||
</pattern>
|
||
<rect x="0" y="0" width="480" height="520" fill="url(#g)"/>
|
||
|
||
<!-- 1. Top: Touchscreen Layer -->
|
||
<g transform="translate(80, 10)">
|
||
<!-- Screen glass -->
|
||
<rect x="0" y="0" width="280" height="168" rx="8" fill="rgba(79,195,247,0.08)" stroke="#4fc3f7" stroke-width="1.5"/>
|
||
<rect x="6" y="6" width="268" height="156" rx="5" fill="rgba(0,0,0,0.3)" stroke="rgba(79,195,247,0.2)" stroke-width="0.5"/>
|
||
<!-- Simulated UI -->
|
||
<rect x="20" y="16" width="100" height="18" rx="3" fill="rgba(79,195,247,0.2)"/>
|
||
<text x="70" y="29" text-anchor="middle" fill="#4fc3f7" font-size="7">Preset: Crunch Lead</text>
|
||
<rect x="10" y="40" width="80" height="30" rx="4" fill="rgba(102,187,106,0.15)" stroke="rgba(102,187,106,0.3)" stroke-width="0.5"/>
|
||
<text x="50" y="51" text-anchor="middle" fill="#66bb6a" font-size="6">BYPASS</text>
|
||
<text x="50" y="62" text-anchor="middle" fill="#66bb6a" font-size="6">ACTIVE</text>
|
||
<!-- Slider mockups -->
|
||
<rect x="100" y="40" width="80" height="8" rx="2" fill="#333"/>
|
||
<circle cx="130" cy="44" r="5" fill="#4fc3f7"/>
|
||
<text x="140" y="60" text-anchor="start" fill="#888" font-size="6">Volume</text>
|
||
<!-- FX chain pills -->
|
||
<rect x="10" y="78" width="50" height="16" rx="8" fill="rgba(167,139,250,0.2)" stroke="#a78bfa" stroke-width="0.5"/>
|
||
<text x="35" y="89" text-anchor="middle" fill="#a78bfa" font-size="6">NAM Amp</text>
|
||
<rect x="65" y="78" width="36" height="16" rx="8" fill="rgba(102,187,106,0.2)" stroke="#66bb6a" stroke-width="0.5"/>
|
||
<text x="83" y="89" text-anchor="middle" fill="#66bb6a" font-size="6">Delay</text>
|
||
<rect x="105" y="78" width="44" height="16" rx="8" fill="rgba(79,195,247,0.2)" stroke="#4fc3f7" stroke-width="0.5"/>
|
||
<text x="127" y="89" text-anchor="middle" fill="#4fc3f7" font-size="6">Reverb</text>
|
||
<!-- Bottom bar -->
|
||
<rect x="10" y="105" width="240" height="20" rx="4" fill="rgba(79,195,247,0.08)" stroke="rgba(79,195,247,0.15)" stroke-width="0.5"/>
|
||
<text x="130" y="118" text-anchor="middle" fill="#888" font-size="6">4CM · Send→Pre · Post→Return</text>
|
||
<text x="10" y="150" fill="#666" font-size="7">5" DSI Capacitive Touch</text>
|
||
</g>
|
||
|
||
<!-- Spacer arrow 1 -->
|
||
<g transform="translate(220, 185)">
|
||
<line x1="0" y1="0" x2="0" y2="15" stroke="#555" stroke-width="0.8" stroke-dasharray="2,2"/>
|
||
<polygon points="-3,15 0,19 3,15" fill="#555"/>
|
||
</g>
|
||
|
||
<!-- 2. Middle: Display Driver PCB (Waveshare 5" DSI board) -->
|
||
<g transform="translate(75, 205)">
|
||
<rect x="0" y="0" width="290" height="40" rx="3" fill="rgba(79,195,247,0.1)" stroke="#4fc3f7" stroke-width="1"/>
|
||
<text x="145" y="18" text-anchor="middle" fill="#4fc3f7" font-size="9">Waveshare 5" DSI Display Board</text>
|
||
<text x="145" y="30" text-anchor="middle" fill="#888" font-size="7">102×76mm — Ribbon to RPi DSI port</text>
|
||
</g>
|
||
|
||
<!-- Spacer arrow 2 -->
|
||
<g transform="translate(220, 250)">
|
||
<line x1="0" y1="0" x2="0" y2="20" stroke="#555" stroke-width="0.8" stroke-dasharray="2,2"/>
|
||
<polygon points="-3,20 0,24 3,20" fill="#555"/>
|
||
<text x="-30" y="12" fill="#666" font-size="6">Standoffs</text>
|
||
</g>
|
||
|
||
<!-- 3. RPi 4B -->
|
||
<g transform="translate(60, 280)">
|
||
<rect x="0" y="0" width="320" height="60" rx="4" fill="rgba(102,187,106,0.12)" stroke="#66bb6a" stroke-width="1.5"/>
|
||
<text x="160" y="22" text-anchor="middle" fill="#66bb6a" font-size="10">Raspberry Pi 4B</text>
|
||
<text x="160" y="36" text-anchor="middle" fill="#888" font-size="7">85×56mm · USB-C · HDMI · DSI · GPIO 40-pin</text>
|
||
<!-- DSI port indicator -->
|
||
<rect x="5" y="42" width="40" height="12" rx="2" fill="rgba(79,195,247,0.15)" stroke="#4fc3f7" stroke-width="0.5"/>
|
||
<text x="25" y="51" text-anchor="middle" fill="#4fc3f7" font-size="6">DSI→</text>
|
||
<!-- Stacking GPIO header -->
|
||
<rect x="120" y="42" width="80" height="12" rx="2" fill="rgba(79,195,247,0.15)" stroke="#4fc3f7" stroke-width="0.5"/>
|
||
<text x="160" y="51" text-anchor="middle" fill="#4fc3f7" font-size="6">GPIO 40-pin ↓</text>
|
||
</g>
|
||
|
||
<!-- Spacer arrow 3 — GPIO passthrough -->
|
||
<g transform="translate(220, 345)">
|
||
<line x1="0" y1="0" x2="0" y2="20" stroke="#555" stroke-width="0.8" stroke-dasharray="2,2"/>
|
||
<polygon points="-3,20 0,24 3,20" fill="#555"/>
|
||
<text x="16" y="12" fill="#4fc3f7" font-size="6">Stacking Hdr</text>
|
||
</g>
|
||
|
||
<!-- 4. I2S HAT (65×56mm) -->
|
||
<g transform="translate(97, 380)">
|
||
<rect x="0" y="0" width="240" height="48" rx="4" fill="rgba(167,139,250,0.12)" stroke="#a78bfa" stroke-width="1.5"/>
|
||
<text x="120" y="18" text-anchor="middle" fill="#a78bfa" font-size="10">PCM1808+PCM5102 I2S HAT</text>
|
||
<text x="120" y="32" text-anchor="middle" fill="#888" font-size="7">65×56mm · Preamp → ADC → DSP → DAC</text>
|
||
<!-- I2S bus indicator -->
|
||
<rect x="85" y="36" width="70" height="10" rx="2" fill="rgba(251,191,36,0.12)" stroke="#fbbf24" stroke-width="0.5"/>
|
||
<text x="120" y="44" text-anchor="middle" fill="#fbbf24" font-size="6">I2S ↔ RPi</text>
|
||
</g>
|
||
|
||
<!-- Audio jacks — side mounted -->
|
||
<g transform="translate(50, 385)">
|
||
<rect x="-12" y="-8" width="14" height="55" rx="3" fill="rgba(251,191,36,0.12)" stroke="#fbbf24" stroke-width="1"/>
|
||
<text x="-5" y="0" text-anchor="middle" fill="#fbbf24" font-size="6">J</text>
|
||
<text x="-5" y="10" text-anchor="middle" fill="#fbbf24" font-size="5">I</text>
|
||
<text x="-5" y="20" text-anchor="middle" fill="#fbbf24" font-size="5">N</text>
|
||
<line x1="-12" y1="25" x2="0" y2="25" stroke="#fbbf24" stroke-width="0.5"/>
|
||
<line x1="-12" y1="30" x2="0" y2="30" stroke="#fbbf24" stroke-width="0.5"/>
|
||
</g>
|
||
<g transform="translate(375, 385)">
|
||
<rect x="0" y="-8" width="14" height="55" rx="3" fill="rgba(251,191,36,0.12)" stroke="#fbbf24" stroke-width="1"/>
|
||
<text x="7" y="0" text-anchor="middle" fill="#fbbf24" font-size="6">J</text>
|
||
<text x="7" y="10" text-anchor="middle" fill="#fbbf24" font-size="5">O</text>
|
||
<text x="7" y="20" text-anchor="middle" fill="#fbbf24" font-size="5">U</text>
|
||
<text x="7" y="30" text-anchor="middle" fill="#fbbf24" font-size="5">T</text>
|
||
</g>
|
||
|
||
<!-- 5. 1590BB Enclosure Outline -->
|
||
<rect x="38" y="375" width="364" height="130" rx="10" fill="none" stroke="#fbbf24" stroke-width="1.5" stroke-dasharray="8,4"/>
|
||
<text x="220" y="520" text-anchor="middle" fill="#fbbf24" font-size="8">1590BB Enclosure (140×78mm face · ~48mm deep)</text>
|
||
|
||
<!-- Dimension arrows on enclosure -->
|
||
<line x1="38" y1="525" x2="402" y2="525" stroke="#555" stroke-width="0.5"/>
|
||
<polygon points="38,523 38,527" fill="#555" stroke="#555" stroke-width="0.5"/>
|
||
<polygon points="402,523 402,527" fill="#555" stroke="#555" stroke-width="0.5"/>
|
||
<text x="220" y="522" text-anchor="middle" fill="#555" font-size="7">~140mm (Boss-compatible)</text>
|
||
|
||
<!-- Stackup depth -->
|
||
<line x1="420" y1="10" x2="420" y2="505" stroke="#555" stroke-width="0.5"/>
|
||
<text x="424" y="260" text-anchor="start" fill="#555" font-size="7" transform="rotate(90,424,260)">~38mm total stack (w/ standoffs)</text>
|
||
|
||
<!-- Labels -->
|
||
<text x="10" y="180" fill="#4fc3f7" font-size="7">① Touch</text>
|
||
<text x="10" y="220" fill="#4fc3f7" font-size="7">② Display PCB</text>
|
||
<text x="10" y="305" fill="#66bb6a" font-size="7">③ RPi 4B</text>
|
||
<text x="10" y="405" fill="#a78bfa" font-size="7">④ I2S HAT</text>
|
||
<text x="10" y="470" fill="#fbbf24" font-size="7">⑤ 1590BB Box</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- Specs & BOM side panel -->
|
||
<div class="panel" style="min-width: 300px;">
|
||
<h3>Component Stack — 1590BB Build</h3>
|
||
<table class="comp-table">
|
||
<tr><td>Enclosure</td><td>1590BB diecast aluminum</td></tr>
|
||
<tr><td></td><td><span class="warn">140×78×48mm</span> — Boss compact size</td></tr>
|
||
<tr><td colspan="2" style="padding-top:8px; border-bottom:1px solid #444;"></td></tr>
|
||
<tr><td>Touchscreen</td><td><span class="label">Waveshare 5" DSI</span></td></tr>
|
||
<tr><td></td><td>800×480, capacitive multi-touch</td></tr>
|
||
<tr><td></td><td><span class="check">✅</span> Native RPi DSI — no HDMI needed</td></tr>
|
||
<tr><td></td><td><span class="check">✅</span> Fits 1590BB face with border</td></tr>
|
||
<tr><td colspan="2" style="padding-top:8px; border-bottom:1px solid #444;"></td></tr>
|
||
<tr><td>Brain</td><td><span class="label">RPi 4B</span> (2GB+)</td></tr>
|
||
<tr><td></td><td>DietPi, headless, JACK + Python DSP</td></tr>
|
||
<tr><td colspan="2" style="padding-top:8px; border-bottom:1px solid #444;"></td></tr>
|
||
<tr><td>Audio</td><td><span class="label">PCM1808+PCM5102 I2S HAT</span></td></tr>
|
||
<tr><td></td><td>Custom 65×56mm PCB (already designed)</td></tr>
|
||
<tr><td></td><td>Stacking header passes GPIO to display</td></tr>
|
||
<tr><td></td><td><span class="check">✅</span> < 10ms round-trip</td></tr>
|
||
<tr><td colspan="2" style="padding-top:8px; border-bottom:1px solid #444;"></td></tr>
|
||
<tr><td>Connectivity</td><td>USB-C (power only)</td></tr>
|
||
<tr><td></td><td>WiFi for `pedal.local` web UI</td></tr>
|
||
<tr><td></td><td>Bluetooth for wireless MIDI</td></tr>
|
||
<tr><td colspan="2" style="padding-top:8px; border-bottom:1px solid #444;"></td></tr>
|
||
<tr><td>I/O Panel</td><td>Side-mounted: Input, Send, Return, Output</td></tr>
|
||
<tr><td></td><td>USB-C power, MIDI DIN (optional)</td></tr>
|
||
<tr><td colspan="2" style="padding-top:12px; border-bottom:none;" class="cost-row"></td></tr>
|
||
<tr class="cost-row"><td>Est. BOM (5 pcs)</td><td><strong>~$175-200</strong> per unit</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Detail sections -->
|
||
<div style="margin-top: 30px; max-width: 1100px; width: 100%; display: flex; flex-wrap: wrap; gap: 20px;">
|
||
<!-- Mechanical -->
|
||
<div class="panel" style="flex: 1; min-width: 280px;">
|
||
<h3>📐 Mechanical Stack</h3>
|
||
<div style="display: grid; grid-template-columns: 1fr; gap: 4px; font-size: 0.85rem;">
|
||
<div style="display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #222;">
|
||
<span style="color:#888;">Touch layer</span>
|
||
<span>5" glass + front bezel</span>
|
||
</div>
|
||
<div style="display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #222;">
|
||
<span style="color:#888;">Display PCB</span>
|
||
<span>8mm standoff</span>
|
||
</div>
|
||
<div style="display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #222;">
|
||
<span style="color:#888;">RPi 4B</span>
|
||
<span>10mm standoff (above HAT)</span>
|
||
</div>
|
||
<div style="display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #222;">
|
||
<span style="color:#888;">Stacking header</span>
|
||
<span>GPIO pass-through</span>
|
||
</div>
|
||
<div style="display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #222;">
|
||
<span style="color:#888;">I2S HAT</span>
|
||
<span>6mm standoff → enclosure base</span>
|
||
</div>
|
||
<div style="display: flex; justify-content: space-between; padding: 4px 0;">
|
||
<span style="color:#888;">Total depth</span>
|
||
<span style="color:#4fc3f7;"><strong>~38-42mm</strong> (fits 48mm 1590BB)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Wiring -->
|
||
<div class="panel" style="flex: 1; min-width: 280px;">
|
||
<h3>🔌 Internal Wiring</h3>
|
||
<div style="font-size: 0.82rem; display: flex; flex-direction: column; gap: 6px;">
|
||
<div><span style="color:#4fc3f7;">Display</span> → DSI ribbon (15-pin) → RPi DSI port</div>
|
||
<div><span style="color:#a78bfa;">I2S HAT</span> → mounts on RPi GPIO via stacking header</div>
|
||
<div><span style="color:#fbbf24;">Audio jacks</span> → flying leads to HAT I/O pads</div>
|
||
<div><span style="color:#66bb6a;">Power</span> → USB-C → RPi → 5V rail → I2S HAT</div>
|
||
<div><span style="color:#888;">Footswitches</span> (optional) → GPIO via HAT passthrough</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Caveats -->
|
||
<div class="panel" style="flex: 1; min-width: 280px;">
|
||
<h3>⚠️ Things to Sort</h3>
|
||
<div style="font-size: 0.82rem; display: flex; flex-direction: column; gap: 6px;">
|
||
<div><span class="warn">①</span> <span style="color:#ccc;">Jacks:</span> Need right-angle PCB-mount jacks for side fit — or wire to chassis-mount jacks on enclosure walls</div>
|
||
<div><span class="warn">②</span> <span style="color:#ccc;">DSI ribbon:</span> Needs careful routing past the stacking header. 15-pin flat flex cable, keep away from I2S traces</div>
|
||
<div><span class="warn">③</span> <span style="color:#ccc;">I2S HAT Rev:</span> The current PCB is 65×56mm (1590B). For 1590BB you could make it slightly wider to match — but it works as-is</div>
|
||
<div><span class="warn">④</span> <span style="color:#ccc;">Heat:</span> RPi 4B in an enclosed box gets warm. Consider a vent slot or small fan on the side</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Boss comparison -->
|
||
<div style="margin-top: 20px; max-width: 1100px; width: 100%;">
|
||
<div class="panel">
|
||
<h3>📏 Size Comparison vs Boss Pedal</h3>
|
||
<svg width="860" height="100" viewBox="0 0 860 100">
|
||
<!-- Boss pedal -->
|
||
<rect x="20" y="20" width="260" height="56" rx="8" fill="rgba(239,83,80,0.1)" stroke="#ef5350" stroke-width="1.5"/>
|
||
<text x="150" y="53" text-anchor="middle" fill="#ef5350" font-size="11">Boss DS-1 / BD-2 (129×73mm)</text>
|
||
<text x="150" y="67" text-anchor="middle" fill="#666" font-size="8">Baseline compact pedal</text>
|
||
<!-- 1590B (current) -->
|
||
<rect x="310" y="25" width="220" height="46" rx="6" fill="rgba(251,191,36,0.1)" stroke="#fbbf24" stroke-width="1.5"/>
|
||
<text x="420" y="53" text-anchor="middle" fill="#fbbf24" font-size="11">1590B (112×60mm)</text>
|
||
<text x="420" y="67" text-anchor="middle" fill="#666" font-size="8">Current HAT size</text>
|
||
<!-- 1590BB (proposed) -->
|
||
<rect x="560" y="18" width="280" height="60" rx="8" fill="rgba(102,187,106,0.12)" stroke="#66bb6a" stroke-width="2"/>
|
||
<text x="700" y="53" text-anchor="middle" fill="#66bb6a" font-size="11">1590BB (140×78mm)</text>
|
||
<text x="700" y="67" text-anchor="middle" fill="#66bb6a" font-size="8"><strong>Boss-compatible + touchscreen</strong></text>
|
||
<!-- Arrow showing fit -->
|
||
<line x1="580" y1="84" x2="820" y2="84" stroke="#66bb6a" stroke-width="0.5" stroke-dasharray="3,2"/>
|
||
<text x="700" y="96" text-anchor="middle" fill="#66bb6a" font-size="7">✅ 5" display fits inside with 15mm border all round</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html> |