diff options
Diffstat (limited to 'docs/prototypes/panel-widget-gallery.html')
| -rw-r--r-- | docs/prototypes/panel-widget-gallery.html | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html index 2ce0faf..890c862 100644 --- a/docs/prototypes/panel-widget-gallery.html +++ b/docs/prototypes/panel-widget-gallery.html @@ -703,6 +703,9 @@ card(C,'R05','Filter slider bank', card(C,'R06','Chicken-head selector', `<svg id="chick" class="rsvg press" viewBox="0 0 110 96" width="110" height="96"></svg>`, '<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.'); +card(C,'R12','Chrome slot fader', + `<svg id="slotf" class="rsvg drag" viewBox="0 0 90 150" width="90" height="150"></svg>`, + '<b>the console gain slide.</b> A chrome T-handle rides a recessed slot, the dB scale engraved on the plate — gain above zero, cut below. Drag; readout shows signed dB. After a vintage channel-strip output fader.'); /* ============ METERS & GAUGES ============ */ const M=$('meters'); @@ -775,6 +778,9 @@ card(M,'R08','Chrome MIN/MAX indicator', card(M,'R09','Black-face aviation gauge', `<svg id="avgauge" class="rsvg drag" viewBox="0 0 110 104" width="110" height="104"></svg>`, '<b>amber on black, zone-marked.</b> The cockpit round: amber ticks and numerals on a black face, painted caution and limit sectors, amber needle. Drag up/down; readout tracks. After a flight-instrument cluster.'); +card(M,'R13','Edgewise strip meter', + `<svg id="edgem" class="rsvg drag" viewBox="0 0 70 130" width="70" height="130"></svg>`, + '<b>a needle on a vertical scale.</b> The parchment strip reads attenuation down a compressed log scale; the bar rides its edge. Drag up/down; readout shows dB. After a channel-strip gain-reduction meter.'); /* ============ INDICATORS & READOUTS ============ */ const I=$('indicators'); @@ -1399,6 +1405,71 @@ function setFlag(on){flagOn=on;flagStripes.style.transform=on?'translateX(0)':'t setRd('R11',on?'FLAG':'clear');} setFlag(false); +/* R12 chrome slot fader: engraved dB scale, chrome T-handle */ +let slotDb=-4,slotHandle=null; +(function(){const s=$('slotf'),cx=45,yTop=30,yBot=120; + const yOf=db=>yTop+(12-db)/36*(yBot-yTop); + const defs=svgEl(s,'defs',{}); + const pl=svgEl(defs,'linearGradient',{id:'sfPlate',x1:0,y1:0,x2:1,y2:1}); + svgEl(pl,'stop',{offset:'0','stop-color':'#242019'}); + svgEl(pl,'stop',{offset:'1','stop-color':'#131110'}); + const ch=svgEl(defs,'linearGradient',{id:'sfChrome',x1:0,y1:0,x2:0,y2:1}); + svgEl(ch,'stop',{offset:'0','stop-color':'#f0efec'}); + svgEl(ch,'stop',{offset:'.45','stop-color':'#c4c1b9'}); + svgEl(ch,'stop',{offset:'1','stop-color':'#75726a'}); + const sc=svgEl(defs,'radialGradient',{id:'sfScrew',cx:'40%',cy:'35%',r:'75%'}); + svgEl(sc,'stop',{offset:'0','stop-color':'#9b968a'}); + svgEl(sc,'stop',{offset:'1','stop-color':'#4a463e'}); + svgEl(s,'rect',{x:14,y:8,width:62,height:134,rx:6,fill:'url(#sfPlate)',stroke:'#0a0908','stroke-width':1.5}); + svgEl(s,'rect',{x:15.5,y:9.5,width:59,height:131,rx:5,fill:'none',stroke:'rgba(255,255,255,.05)','stroke-width':1}); + for(const sy of [16,134]){ + svgEl(s,'circle',{cx,cy:sy,r:3.2,fill:'url(#sfScrew)',stroke:'#14110e','stroke-width':.6}); + const [x1,y1]=polar(cx,sy,3,112),[x2,y2]=polar(cx,sy,3,292); + svgEl(s,'line',{x1,y1,x2,y2,stroke:'#221f1a','stroke-width':1});} + svgEl(s,'rect',{x:40.5,y:yTop-4,width:9,height:yBot-yTop+8,rx:4,fill:'#0b0a09',stroke:'#050404'}); + for(const db of [12,8,4,0,-4,-8,-12,-16,-20,-24]){const y=yOf(db); + svgEl(s,'line',{x1:26,y1:y,x2:39,y2:y,stroke:'var(--steel)','stroke-width':db===0?1.3:.8,opacity:db===0?1:.75}); + svgEl(s,'line',{x1:51,y1:y,x2:64,y2:y,stroke:'var(--steel)','stroke-width':db===0?1.3:.8,opacity:db===0?1:.75}); + svgEl(s,'text',{x:23,y:y+2.2,'text-anchor':'end','font-size':6,'font-family':'var(--mono)', + fill:db===0?'var(--cream)':'var(--steel)'}).textContent=Math.abs(db);} + slotHandle=svgEl(s,'g',{}); + svgEl(slotHandle,'polygon',{points:'45,0 58,-5 58,5',fill:'#b9b6ae',stroke:'#5e5a52','stroke-width':.5}); + svgEl(slotHandle,'rect',{x:58,y:-7,width:22,height:14,rx:3.5,fill:'url(#sfChrome)',stroke:'#4e4a42','stroke-width':.6}); + svgEl(slotHandle,'rect',{x:60,y:-5.2,width:18,height:2.2,rx:1,fill:'rgba(255,255,255,.4)'}); + dragY(s,pct=>setSlot(-24+pct/100*36));})(); +function setSlot(db){slotDb=Math.max(-24,Math.min(12,db)); + slotHandle.setAttribute('transform',`translate(0,${30+(12-slotDb)/36*90})`); + setRd('R12',(slotDb>0?'+':slotDb<0?'−':'')+Math.abs(slotDb).toFixed(1)+' dB');} +setSlot(-4); + +/* R13 edgewise strip meter: compressed log scale, bar rides the edge */ +const EDGE_SCALE=[[0,.08],[3,.26],[6,.44],[12,.62],[20,.78],[40,.94]]; +let edgeFrac=.62,edgeBar=null; +(function(){const s=$('edgem'),wy0=12,wy1=118; + const defs=svgEl(s,'defs',{}); + const pg=svgEl(defs,'linearGradient',{id:'edgeFace',x1:0,y1:0,x2:1,y2:0}); + svgEl(pg,'stop',{offset:'0','stop-color':'#efe6ca'}); + svgEl(pg,'stop',{offset:'1','stop-color':'#d9cfae'}); + svgEl(s,'rect',{x:8,y:6,width:54,height:118,rx:8,fill:'#171412',stroke:'#060505','stroke-width':1.5}); + svgEl(s,'rect',{x:14,y:wy0,width:42,height:wy1-wy0,fill:'url(#edgeFace)',stroke:'#0a0908'}); + const yOf=f=>wy0+f*(wy1-wy0); + for(const [db,f] of EDGE_SCALE){const y=yOf(f); + svgEl(s,'line',{x1:19,y1:y,x2:40,y2:y,stroke:'#3a3128','stroke-width':1}); + svgEl(s,'text',{x:52,y:y+2.4,'text-anchor':'end','font-size':7,'font-family':'var(--mono)', + fill:'#3a3128'}).textContent=db;} + for(let i=0;i<EDGE_SCALE.length-1;i++){const y=yOf((EDGE_SCALE[i][1]+EDGE_SCALE[i+1][1])/2); + svgEl(s,'line',{x1:19,y1:y,x2:32,y2:y,stroke:'#3a3128','stroke-width':.6,opacity:.7});} + edgeBar=svgEl(s,'polygon',{points:'56,0 24,-1.4 24,1.4',fill:'#1a1613'}); + svgEl(s,'rect',{x:14,y:wy0,width:42,height:24,fill:'rgba(255,255,255,.08)'}); + dragY(s,pct=>setEdge(.08+(100-pct)/100*.86));})(); +function setEdge(f){edgeFrac=Math.max(.08,Math.min(.94,f)); + edgeBar.setAttribute('transform',`translate(0,${12+edgeFrac*106})`); + let i=0;while(i<EDGE_SCALE.length-2&&EDGE_SCALE[i+1][1]<edgeFrac)i++; + const [d1,f1]=EDGE_SCALE[i],[d2,f2]=EDGE_SCALE[i+1]; + const db=d1+(d2-d1)*Math.max(0,Math.min(1,(edgeFrac-f1)/(f2-f1))); + setRd('R13','−'+db.toFixed(1)+' dB');} +setEdge(.62); + /* ============ LIVE SIGNAL LOOPS ============ */ buildBars($('vuL'),16);buildBars($('vuR'),16);$('mini').innerHTML='<i></i><i></i><i></i><i></i>'; (function(){const eq=$('eq');for(let b=0;b<11;b++){const band=document.createElement('span');band.className='band'; |