diff options
Diffstat (limited to 'docs/prototypes/widgets.js')
| -rw-r--r-- | docs/prototypes/widgets.js | 19 |
1 files changed, 9 insertions, 10 deletions
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' }, }, }; |