diff options
| -rw-r--r-- | docs/prototypes/panel-widget-gallery.html | 4 | ||||
| -rw-r--r-- | docs/prototypes/widgets.js | 19 |
2 files changed, 11 insertions, 12 deletions
diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html index 2e94aad..2b33ec5 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', '<b>the skirted console knob.</b> 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)}), - '<b>a wall of band faders.</b> 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). The chips below mix them freely.'); + '<b>a wall of band faders.</b> Twelve bands on a screwed faceplate, dB rails both sides. Drag any cap; readout names band and level. Skins split three independent axes — panel (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)}), '<b>the pointer-lever switch.</b> The tapered bakelite lever IS the indicator — it aims at the engraved position. Click to step through. After a modulator mode switch.'); @@ -1547,7 +1547,7 @@ BOOST.forEach(no=>{const rd=document.getElementById('rd-'+no); (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']]; + const AXES=[['panel','panel','silver'],['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); diff --git a/docs/prototypes/widgets.js b/docs/prototypes/widgets.js index 2b86d7d..1465e46 100644 --- a/docs/prototypes/widgets.js +++ b/docs/prototypes/widgets.js @@ -678,13 +678,13 @@ GW.flutedKnob = function (host, opts = {}) { /* R05 filter slider bank — a dense fader wall on a real faceplate. Period skins as constructor opts backed by GW.filterBank.STYLES, three independent axes: - panel (lab parchment / silver hi-fi aluminum / studio black), caps — the cap - SHAPE (chrome T / short ribbed / tall block fader), and capColor — the cap - FINISH (black white-index / red-index / chrome / cream). opts.style picks a - native trio (lab+block+black, silver+chrome+chrome, studio+ribbed+red); + panel (silver hi-fi aluminum / studio black), caps — the cap SHAPE + (chrome T / short ribbed / tall block fader), and capColor — the cap + FINISH (black white-index / color stripes / chrome / cream). opts.style + picks a native trio (silver+chrome+chrome, studio+ribbed+red); opts.panel / opts.caps / opts.capColor override an axis; setStyle(axis, name) - restyles live (values kept). After the Vieltronix filter, the Pioneer - SG-9500, the Technics SH-8065, and the Zaxcom Oasis block faders. */ + restyles live (values kept). After the Pioneer SG-9500, the Technics + SH-8065, and the Zaxcom Oasis block faders. */ GW.filterBank = function (host, opts = {}) { const onChange = opts.onChange || noop; const freqs = opts.freqs || [78, 113, 163, 235, 339, 487, 701, 1010, 1450, 2090, 3010, 4340]; @@ -693,21 +693,20 @@ GW.filterBank = function (host, opts = {}) { const fmtHz = f => f < 1000 ? f : (f / 1000).toFixed(1).replace(/\.0$/, '') + 'k'; const ST = GW.filterBank.STYLES; const native = { - lab: { caps: 'block', capColor: 'black' }, silver: { caps: 'chrome', capColor: 'chrome' }, studio: { caps: 'ribbed', capColor: 'red' }, }; const nat = native[opts.style] || {}; const cur = { - panel: ST.panel[opts.panel] ? opts.panel : (ST.panel[opts.style] ? opts.style : 'lab'), + panel: ST.panel[opts.panel] ? opts.panel : (ST.panel[opts.style] ? opts.style : 'silver'), caps: ST.caps[opts.caps] ? opts.caps : (nat.caps || 'block'), capColor: ST.capColor[opts.capColor] ? opts.capColor : (nat.capColor || 'black'), }; - gradDef('fbPlateLab', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#f0ead6'], ['1', '#dcd5bc']]); gradDef('fbPlateSilver', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#d8d8d4'], ['.5', '#c6c6c1'], ['1', '#adada7']]); gradDef('fbPlateStudio', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#221f1c'], ['1', '#131110']]); gradDef('sfChrome', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#f0efec'], ['.45', '#c4c1b9'], ['1', '#75726a']]); gradDef('fbCapBlack', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#2a2724'], ['1', '#171412']]); + gradDef('fbCapCream', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#f2ecd8'], ['1', '#cfc8ae']]); const s = stageSvg(host, 'rsvg', 250, 112); const y0 = 20, y1 = 92, x0 = 36, dx = (214 - x0) / (freqs.length - 1); const yOf = db => y0 + db / 60 * (y1 - y0); @@ -783,7 +782,6 @@ GW.filterBank = function (host, opts = {}) { any shape. */ GW.filterBank.STYLES = { panel: { - lab: { dot: '#e9e4cf', plate: 'url(#fbPlateLab)', edge: '#b7b29a', bevel: 'rgba(255,255,255,.35)', ink: '#3a3128', dim: '#6a6152', screw: '#a8a496', track: '#0c0b09', trackW: 2.4, trackHi: null }, silver: { dot: '#c9c9c5', plate: 'url(#fbPlateSilver)', edge: '#8e8e88', bevel: 'rgba(255,255,255,.4)', ink: '#33332f', dim: '#5c5c56', screw: '#9c9c96', track: '#121210', trackW: 2.0, trackHi: null }, studio: { dot: '#1c1a18', plate: 'url(#fbPlateStudio)', edge: '#000', bevel: 'rgba(255,255,255,.06)', ink: '#b9b4a6', dim: '#6f6a5e', screw: '#3c3832', track: '#050505', trackW: 2.2, trackHi: 'rgba(255,255,255,.05)' }, }, @@ -799,6 +797,7 @@ GW.filterBank.STYLES = { blue: { dot: '#4f9fe0', body: 'url(#fbCapBlack)', rib: 'rgba(255,255,255,.16)', index: '#4f9fe0', edge: '#000' }, amber: { dot: 'var(--gold-hi)', body: 'url(#fbCapBlack)', rib: 'rgba(255,255,255,.16)', index: 'var(--gold-hi)', edge: '#000' }, chrome: { dot: '#dfe6f2', body: 'url(#sfChrome)', rib: 'rgba(0,0,0,.28)', index: '#14110e', edge: '#3c3a34' }, + cream: { dot: '#efe9d4', body: 'url(#fbCapCream)', rib: 'rgba(0,0,0,.18)', index: '#3a3128', edge: '#8a8474' }, }, }; |