diff options
| -rw-r--r-- | docs/prototypes/panel-widget-gallery.html | 30 |
1 files changed, 30 insertions, 0 deletions
diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html index 815fc3c..c4f1520 100644 --- a/docs/prototypes/panel-widget-gallery.html +++ b/docs/prototypes/panel-widget-gallery.html @@ -736,6 +736,9 @@ card(C,'R23','Spun-aluminum knob', card(C,'R24','Stomp switch + jewel', `<svg id="stomp" class="rsvg press" viewBox="0 0 110 110" width="110" height="110"></svg>`, '<b>the engage pair.</b> A chrome dome stomp and the faceted jewel that reports it — press to engage, the jewel lights; press again to bypass. Click it. After a tremolo pedal footswitch.'); +card(C,'R27','Winged gain selector', + `<svg id="wingk" class="rsvg drag" viewBox="0 0 110 110" width="110" height="110"></svg>`, + '<b>the red T-bar, stepped.</b> A bar-grip handle over a dot ring, snapping between labeled gain detents. Drag up/down to step it. After a classic mic-preamp gain switch.'); /* ============ METERS & GAUGES ============ */ const M=$('meters'); @@ -1890,6 +1893,33 @@ function setStomp(on){stompOn=on; setRd('R24',on?'ENGAGED':'bypass');} setStomp(false); +/* R27 winged gain selector: red T-bar over a dot ring, stepped detents */ +const WINGK_STEPS=[-80,-70,-60,-50,-40,-30,-20,-10,-5,0,5,10]; +let wingI=7,wingGrp=null; +(function(){const s=$('wingk'),cx=55,cy=52; + const defs=svgEl(s,'defs',{}); + const rg2=svgEl(defs,'radialGradient',{id:'wingRed',cx:'40%',cy:'32%',r:'80%'}); + svgEl(rg2,'stop',{offset:'0','stop-color':'#d98a6f'}); + svgEl(rg2,'stop',{offset:'.6','stop-color':'var(--fail)'}); + svgEl(rg2,'stop',{offset:'1','stop-color':'#6e2415'}); + WINGK_STEPS.forEach((db,i)=>{const a=-135+i/(WINGK_STEPS.length-1)*270; + const [dx,dy]=polar(cx,cy,38,a); + svgEl(s,'circle',{cx:dx,cy:dy,r:1.5,fill:'var(--steel)'}); + if(i%2===1||db===0||db===10||db===-80){const [tx,ty]=polar(cx,cy,46.5,a); + svgEl(s,'text',{x:tx,y:ty+2.2,'text-anchor':'middle','font-size':5.5,'font-family':'var(--mono)', + fill:'var(--steel)'}).textContent=db>0?'+'+db:db;}}); + wingGrp=svgEl(s,'g',{});wingGrp.style.transition='transform .09s'; + svgEl(wingGrp,'rect',{x:cx-6.5,y:cy-30,width:13,height:60,rx:6,fill:'url(#wingRed)',stroke:'#4e150a','stroke-width':.8}); + svgEl(wingGrp,'circle',{cx,cy,r:15,fill:'url(#wingRed)',stroke:'#4e150a','stroke-width':.8}); + svgEl(wingGrp,'line',{x1:cx,y1:cy-28,x2:cx,y2:cy-18,stroke:'var(--cream)','stroke-width':2,'stroke-linecap':'round'}); + svgEl(wingGrp,'ellipse',{cx:cx-4,cy:cy-8,rx:5,ry:3,fill:'rgba(255,255,255,.18)',transform:`rotate(-30,${cx-4},${cy-8})`});})(); +function setWing(v){const i=Math.max(0,Math.min(WINGK_STEPS.length-1,Math.round(v)));wingI=i; + wingGrp.style.transform=`rotate(${-135+i/(WINGK_STEPS.length-1)*270}deg)`; + wingGrp.style.transformOrigin='55px 52px'; + const db=WINGK_STEPS[i]; + setRd('R27',(db>0?'+':'')+db+' dB');} +dragDelta($('wingk'),()=>wingI,setWing,{min:0,max:WINGK_STEPS.length-1,sens:.05});setWing(7); + /* R25 fourteen-segment display: the starburst that spells */ const SEG14_WORDS=['ZOOM','ECHO','TAPE','MOOD','HALL','COMP']; const SEG14_MAP={A:['a','b','c','e','f','g1','g2'],C:['a','d','e','f'], |