From 5c3a4b70696929078f8b14b81c29f83264a9589b Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 12 Jul 2026 23:54:01 -0500 Subject: feat(gallery): rebuild R05 filter bank with three skin axes The old card was a sketch: eight bare tracks and flat teal arrows floating on the card background. Real slider banks (the Vieltronix filter, the Pioneer SG-9500, the Technics SH-8065, the Zaxcom Oasis) have a faceplate, dual dB rails, dense bands, and caps that read as machined parts. The rebuilt bank draws twelve bands on a screwed faceplate with tick rails both sides. Skins ship as constructor opts backed by GW.filterBank.STYLES on three independent axes: panel (lab parchment / silver aluminum / studio black), cap shape (tall block fader / short ribbed / chrome T), and cap color (black white-index / red, green, blue, amber stripes / chrome / cream). Shape and color are separate axes so any finish applies to any cap. opts.style picks a native trio. setStyle(axis, name) restyles a live instance with values preserved. The card grows chip groups driving setStyle, the same demo-rig pattern as the slide toggle. Values shorter than a custom freqs list now pad instead of placing caps at NaN. I filed the Oasis reference alongside the others. --- docs/prototypes/panel-widget-gallery.html | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) (limited to 'docs/prototypes/panel-widget-gallery.html') diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html index 30bf086..0674302 100644 --- a/docs/prototypes/panel-widget-gallery.html +++ b/docs/prototypes/panel-widget-gallery.html @@ -1127,7 +1127,7 @@ card(C,'R04','Bakelite fluted knob', 'the skirted console knob. Scalloped bakelite skirt, glossy dome, amber index over a printed 0-10 scale. Drag up/down to turn. After a vintage console mixer knob.'); card(C,'R05','Filter slider bank', (st,rd)=>GW.filterBank(st,{onChange:(v,t)=>rd(t)}), - 'a wall of band faders. One slider per band, arrow-head caps on black tracks, dB rail at the side. Drag any cap; readout names band and level. After a variable multi-band filter.'); + 'a wall of band faders. Twelve bands on a screwed faceplate, dB rails both sides. Drag any cap; readout names band and level. Skins split three independent axes — panel (lab parchment after the Vieltronix filter / silver hi-fi after the Pioneer SG-9500 / studio black after the Technics SH-8065), cap shape (tall block fader after the Zaxcom Oasis / short ribbed / chrome T), and cap color (black white-index / red / green / blue / amber stripes / chrome / cream). The chips below mix them freely.'); card(C,'R06','Chicken-head selector', (st,rd)=>GW.chickenHead(st,{index:2,onChange:(i,t)=>rd(t)}), 'the pointer-lever switch. The tapered bakelite lever IS the indicator — it aims at the engraved position. Click to step through. After a modulator mode switch.'); @@ -1541,6 +1541,25 @@ BOOST.forEach(no=>{const rd=document.getElementById('rd-'+no); g.appendChild(b);} row.appendChild(g);} cardEl.querySelector('.opts').appendChild(row);})(); + +/* filter-bank style chips: demo rig for GW.filterBank's constructor opts — + the named skins live in GW.filterBank.STYLES; chips drive setStyle on the live instance */ +(function(){const h=$('card-R05')?.gw;if(!h)return; + const cardEl=h.el.closest('.card'); + const row=document.createElement('div'); row.className='famchips'; + const AXES=[['panel','panel','lab'],['shape','caps','block'],['color','capColor','black']]; + for(const [label,axis,def] of AXES){ + const g=document.createElement('span'); g.className='fgroup'; + const lab=document.createElement('span'); lab.className='lab'; lab.textContent=label; g.appendChild(lab); + const chips=[]; + for(const [name,o] of Object.entries(GW.filterBank.STYLES[axis])){ + const b=document.createElement('span'); b.className='fc'+(name===def?' on':''); + b.style.background=o.dot; b.title=name; chips.push(b); + b.addEventListener('click',()=>{h.setStyle(axis,name); + chips.forEach(x=>x.classList.toggle('on',x===b));}); + g.appendChild(b);} + row.appendChild(g);} + cardEl.querySelector('.opts').appendChild(row);})(); -- cgit v1.2.3