diff options
Diffstat (limited to 'docs/prototypes')
| -rw-r--r-- | docs/prototypes/panel-widget-gallery.html | 29 |
1 files changed, 29 insertions, 0 deletions
diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html index 6e22c05..fa9d536 100644 --- a/docs/prototypes/panel-widget-gallery.html +++ b/docs/prototypes/panel-widget-gallery.html @@ -724,6 +724,9 @@ card(C,'R19','Waveform region editor', card(C,'R20','Drum roller selector', `<svg id="drumr" class="rsvg" viewBox="0 0 130 140" width="130" height="140"></svg>`, '<b>roll to the number.</b> The numbered drum shows through a tall window and the center value sits on an inverted chip. Drag either drum. After an equalizer tone selector.'); +card(C,'R21','LED program row', + `<svg id="ledrow" class="rsvg" viewBox="0 0 190 58" width="190" height="58"></svg>`, + '<b>identical keys, one lit dot.</b> The LED above the button carries the selection, not the key itself — the classic program-select row. Click a key; readout names the program. After a digital reverb’s program bank.'); /* ============ METERS & GAUGES ============ */ const M=$('meters'); @@ -1762,6 +1765,32 @@ function setDrumr(i,v){v=Math.max(1,Math.min(10,v));DRUMR[i].v=v; setRd('R20',`${DRUMR[0].name} ${Math.round(DRUMR[0].v)} · ${DRUMR[1].name} ${Math.round(DRUMR[1].v)}`);} setDrumr(0,6);setDrumr(1,8); +/* R21 LED program row: exclusive select, the LED carries the state */ +const LEDROW_PROGS=['Sm Hall B','VocPlate','Lg Hall B','Chamber','ParcPlate','Sm Hall A','Room A','Const Plate']; +let ledrowI=5,ledrowLeds=[]; +(function(){const s=$('ledrow'); + const defs=svgEl(s,'defs',{}); + const kb=svgEl(defs,'linearGradient',{id:'lrKey',x1:0,y1:0,x2:0,y2:1}); + svgEl(kb,'stop',{offset:'0','stop-color':'#2b2823'}); + svgEl(kb,'stop',{offset:'1','stop-color':'#171512'}); + LEDROW_PROGS.forEach((name,i)=>{const x=16+i*22.6; + svgEl(s,'text',{x,y:9,'text-anchor':'middle','font-size':6,'font-family':'var(--mono)', + fill:'var(--steel)'}).textContent=i+1; + ledrowLeds.push(svgEl(s,'circle',{cx:x,cy:17,r:2.4,fill:'#3a0f0a'})); + const g=svgEl(s,'g',{});g.style.cursor='pointer';g.style.transition='transform .07s'; + svgEl(g,'rect',{x:x-8.5,y:24,width:17,height:22,rx:2.5,fill:'url(#lrKey)',stroke:'#0a0908','stroke-width':1}); + svgEl(g,'rect',{x:x-6.5,y:26.5,width:13,height:3,rx:1.5,fill:'rgba(255,255,255,.06)'}); + g.addEventListener('click',()=>{g.style.transform='translateY(1.5px)'; + setTimeout(()=>g.style.transform='',80);setLedrow(i);});}); + svgEl(s,'text',{x:95,y:56,'text-anchor':'middle','font-size':6,'letter-spacing':'.16em', + 'font-family':'var(--mono)',fill:'var(--steel)'}).textContent='PROGRAM';})(); +function setLedrow(i){ledrowI=i; + ledrowLeds.forEach((l,k)=>{const on=k===i; + l.setAttribute('fill',on?'var(--jewel-r)':'#3a0f0a'); + l.setAttribute('style',on?'filter:drop-shadow(0 0 3px rgba(255,91,69,.8))':'');}); + setRd('R21',`${ledrowI+1} · ${LEDROW_PROGS[ledrowI]}`);} +setLedrow(5); + /* ============ 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'; |