From d9e6e50b676f15187e341aa156d62f2c7e202d9f Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Mon, 13 Jul 2026 00:01:33 -0500 Subject: fix(gallery): drop the lab parchment panel skin, restore the cream cap finish ca006d8 removed the cream cap color, but the parchment to retire was the lab panel skin. The panel axis is now silver / studio with silver as the default, and cream returns to the cap-color axis. --- docs/prototypes/panel-widget-gallery.html | 4 ++-- docs/prototypes/widgets.js | 19 +++++++++---------- 2 files changed, 11 insertions(+), 12 deletions(-) (limited to 'docs/prototypes') 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', '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. 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.'); + '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 (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.'); @@ -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' }, }, }; -- cgit v1.2.3