diff options
| -rw-r--r-- | docs/prototypes/panel-widget-gallery.html | 106 | ||||
| -rw-r--r-- | working/retro-stereo-widgets/references/2026-07-12-twin-trem-pedal.png | bin | 0 -> 485090 bytes |
2 files changed, 106 insertions, 0 deletions
diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html index 70b92d2..ac2af6a 100644 --- a/docs/prototypes/panel-widget-gallery.html +++ b/docs/prototypes/panel-widget-gallery.html @@ -730,6 +730,12 @@ card(C,'R21','LED program row', card(C,'R22','Three-position slide', `<svg id="varslide" class="rsvg press" viewBox="0 0 110 64" width="110" height="64"></svg>`, '<b>a detented pill, three stops.</b> The chrome pill parks at A, AB, or B, and the LED pair below tells the truth — both light on AB. Click a position. After a drum machine variation switch.'); +card(C,'R23','Spun-aluminum knob', + `<svg id="spunk" class="rsvg drag" viewBox="0 0 110 110" width="110" height="110"></svg>`, + '<b>bright metal, machined rings.</b> A spun face with concentric tooling marks in a knurled grip ring, red index over dot ticks. Drag up/down. After a boutique pedal knob, confirmed by an avionics cluster.'); +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.'); /* ============ METERS & GAUGES ============ */ const M=$('meters'); @@ -870,6 +876,9 @@ card(I,'R10','Data matrix readout', card(I,'R11','Warning flag window', `<svg id="wflag" class="rsvg press" viewBox="0 0 120 64" width="120" height="64"></svg>`, '<b>the mechanical alarm flag.</b> A striped barber-pole slides into a window when the condition trips — not a lamp, a flag. Click to trip and clear it. After the VIB flag on an altimeter.'); +card(I,'R25','Fourteen-segment display', + `<svg id="seg14" class="rsvg press" viewBox="0 0 130 54" width="130" height="54"></svg>`, + '<b>segments that spell.</b> The starburst alphanumeric — diagonals and split bars let it write words, not just digits. Click to cycle the word. After a pedal preset display.'); /* ============ CONTROL WIRING ============ */ /* 01 toggle */ @@ -1821,6 +1830,103 @@ function setVarsl(i){varslI=i;const detX=[34,55,76]; setRd('R22',VARSL_POS[i]);} setVarsl(1); +/* R23 spun-aluminum knob: machined rings in a knurled grip */ +let spunV=62,spunIdx=null; +(function(){const s=$('spunk'),cx=55,cy=52; + const defs=svgEl(s,'defs',{}); + const al=svgEl(defs,'radialGradient',{id:'spunFace',cx:'42%',cy:'34%',r:'85%'}); + svgEl(al,'stop',{offset:'0','stop-color':'#e8e6e0'}); + svgEl(al,'stop',{offset:'.7','stop-color':'#b3b0a8'}); + svgEl(al,'stop',{offset:'1','stop-color':'#8a877e'}); + for(let k=0;k<8;k++){const [x,y]=polar(cx,cy,45,-135+k*38.6); + svgEl(s,'circle',{cx:x,cy:y,r:1.3,fill:'var(--steel)'});} + for(let k=0;k<22;k++){const [x,y]=polar(cx,cy,36,k*16.36); + svgEl(s,'circle',{cx:x,cy:y,r:2.6,fill:'#14110e'});} + svgEl(s,'circle',{cx,cy,r:36,fill:'#1a1714',stroke:'#000','stroke-width':.8}); + svgEl(s,'circle',{cx,cy,r:30,fill:'url(#spunFace)',stroke:'#6e6b63','stroke-width':.8}); + for(const r of [24,18,12,6]) + svgEl(s,'circle',{cx,cy,r,fill:'none',stroke:r%12===0?'rgba(0,0,0,.12)':'rgba(255,255,255,.3)','stroke-width':.6}); + spunIdx=svgEl(s,'line',{x1:cx,y1:cy-28,x2:cx,y2:cy-10,stroke:'var(--fail)','stroke-width':2.6,'stroke-linecap':'round'}); + svgEl(s,'ellipse',{cx:cx-9,cy:cy-11,rx:9,ry:5,fill:'rgba(255,255,255,.28)',transform:`rotate(-32,${cx-9},${cy-11})`}); + svgEl(s,'text',{x:cx,y:103,'text-anchor':'middle','font-size':6,'letter-spacing':'.16em', + 'font-family':'var(--mono)',fill:'var(--steel)'}).textContent='SPEED';})(); +function setSpun(v){spunV=Math.max(0,Math.min(100,v)); + spunIdx.setAttribute('transform',`rotate(${-135+spunV/100*270},55,52)`); + setRd('R23',Math.round(spunV)+'%');} +dragDelta($('spunk'),()=>spunV,setSpun,{min:0,max:100});setSpun(62); + +/* R24 stomp switch + jewel: press to engage, the jewel reports */ +let stompOn=false,stompDome=null,stompJewel=null,stompGlow=null; +(function(){const s=$('stomp'),cx=55; + const defs=svgEl(s,'defs',{}); + const dg=svgEl(defs,'radialGradient',{id:'stompDome',cx:'40%',cy:'30%',r:'80%'}); + svgEl(dg,'stop',{offset:'0','stop-color':'#f4f2ec'}); + svgEl(dg,'stop',{offset:'.55','stop-color':'#b9b6ae'}); + svgEl(dg,'stop',{offset:'1','stop-color':'#6e6b63'}); + const jg=svgEl(defs,'radialGradient',{id:'stompJewel',cx:'38%',cy:'30%',r:'80%'}); + svgEl(jg,'stop',{offset:'0','stop-color':'#ffe9b0'}); + svgEl(jg,'stop',{offset:'.45','stop-color':'var(--jewel-a)'}); + svgEl(jg,'stop',{offset:'1','stop-color':'#5c3d0c'}); + stompGlow=svgEl(s,'circle',{cx,cy:22,r:14,fill:'rgba(255,180,58,.35)',filter:'url(#avGlow)',opacity:0}); + stompJewel=svgEl(s,'circle',{cx,cy:22,r:9,fill:'#241f1b',stroke:'#0a0908','stroke-width':1.5}); + for(let k=0;k<6;k++){const a1=k*60,a2=k*60+30; + const [x1,y1]=polar(cx,22,9,a1),[x2,y2]=polar(cx,22,9,a2); + svgEl(s,'path',{d:`M ${cx} 22 L ${x1} ${y1} A 9 9 0 0 1 ${x2} ${y2} Z`, + fill:k%2?'rgba(255,255,255,.09)':'rgba(0,0,0,.10)','pointer-events':'none'});} + for(let k=0;k<20;k++){const [x,y]=polar(cx,72,25,k*18); + svgEl(s,'circle',{cx:x,cy:y,r:2.4,fill:'#14110e'});} + svgEl(s,'circle',{cx,cy:72,r:25,fill:'#1a1714',stroke:'#000','stroke-width':.8}); + stompDome=svgEl(s,'g',{});stompDome.style.transition='transform .08s'; + svgEl(stompDome,'circle',{cx,cy:72,r:19,fill:'url(#stompDome)',stroke:'#55524a','stroke-width':.8}); + svgEl(stompDome,'ellipse',{cx:cx-6,cy:64,rx:8,ry:4.5,fill:'rgba(255,255,255,.5)',transform:`rotate(-24,${cx-6},64)`}); + $('stomp').onclick=()=>{stompDome.style.transform='translateY(1.5px)'; + setTimeout(()=>stompDome.style.transform='',90);setStomp(!stompOn);};})(); +function setStomp(on){stompOn=on; + stompJewel.setAttribute('fill',on?'url(#stompJewel)':'#241f1b'); + stompGlow.setAttribute('opacity',on?'1':'0'); + setRd('R24',on?'ENGAGED':'bypass');} +setStomp(false); + +/* 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'], + D:['a','b','c','d','i','l'],E:['a','d','e','f','g1','g2'],H:['b','c','e','f','g1','g2'], + L:['d','e','f'],M:['b','c','e','f','h','j'],O:['a','b','c','d','e','f'], + P:['a','b','e','f','g1','g2'],T:['a','i','l'],Z:['a','d','j','k']}; +let seg14I=0,seg14Cells=[]; +(function(){const s=$('seg14'); + svgEl(s,'rect',{x:1,y:1,width:128,height:52,rx:5,fill:'#0a0f08',stroke:'#1c2a16','stroke-width':2}); + // segment shapes in a 22x36 local box (x0,y0 top-left) + const TH=2.6,W=22,H=36,mid=H/2; + const segs={ + a:[[2,0],[W-2,0],[W-4,TH],[4,TH]], + d:[[2,H],[W-2,H],[W-4,H-TH],[4,H-TH]], + f:[[0,2],[TH,4],[TH,mid-2],[0,mid-1]], + e:[[0,H-2],[TH,H-4],[TH,mid+2],[0,mid+1]], + b:[[W,2],[W-TH,4],[W-TH,mid-2],[W,mid-1]], + c:[[W,H-2],[W-TH,H-4],[W-TH,mid+2],[W,mid+1]], + g1:[[2,mid],[4,mid-TH/2],[W/2-1,mid-TH/2],[W/2-1,mid+TH/2],[4,mid+TH/2]], + g2:[[W-2,mid],[W-4,mid-TH/2],[W/2+1,mid-TH/2],[W/2+1,mid+TH/2],[W-4,mid+TH/2]], + i:[[W/2-TH/2,3],[W/2+TH/2,3],[W/2+TH/2,mid-2],[W/2-TH/2,mid-2]], + l:[[W/2-TH/2,H-3],[W/2+TH/2,H-3],[W/2+TH/2,mid+2],[W/2-TH/2,mid+2]], + h:[[3,3],[5.5,3],[W/2-2,mid-3],[W/2-4.5,mid-3]], + j:[[W-3,3],[W-5.5,3],[W/2+2,mid-3],[W/2+4.5,mid-3]], + k:[[3,H-3],[5.5,H-3],[W/2-2,mid+3],[W/2-4.5,mid+3]], + m:[[W-3,H-3],[W-5.5,H-3],[W/2+2,mid+3],[W/2+4.5,mid+3]]}; + for(let d=0;d<4;d++){const x0=13+d*28,y0=9,cell={}; + for(const k in segs){ + cell[k]=svgEl(s,'polygon',{points:segs[k].map(p=>`${x0+p[0]},${y0+p[1]}`).join(' '), + fill:'var(--sevoff)'});} + seg14Cells.push(cell);} + $('seg14').onclick=()=>setSeg14((seg14I+1)%SEG14_WORDS.length);})(); +function setSeg14(i){seg14I=i;const word=SEG14_WORDS[i].padEnd(4,' '); + seg14Cells.forEach((cell,d)=>{const lit=SEG14_MAP[word[d]]||[]; + for(const k in cell){const on=lit.includes(k); + cell[k].setAttribute('fill',on?'var(--sevgrn)':'var(--sevoff)'); + cell[k].setAttribute('style',on?'filter:drop-shadow(0 0 2.5px rgba(87,211,87,.6))':'');}}); + setRd('R25',SEG14_WORDS[i]);} +setSeg14(0); + /* ============ 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'; diff --git a/working/retro-stereo-widgets/references/2026-07-12-twin-trem-pedal.png b/working/retro-stereo-widgets/references/2026-07-12-twin-trem-pedal.png Binary files differnew file mode 100644 index 0000000..88c4829 --- /dev/null +++ b/working/retro-stereo-widgets/references/2026-07-12-twin-trem-pedal.png |
