diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/prototypes/panel-widget-gallery.html | 49 |
1 files changed, 49 insertions, 0 deletions
diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html index 30478bc..6e22c05 100644 --- a/docs/prototypes/panel-widget-gallery.html +++ b/docs/prototypes/panel-widget-gallery.html @@ -721,6 +721,9 @@ card(C,'R18','Thumb-slide attenuator pair', card(C,'R19','Waveform region editor', `<svg id="wregion" class="rsvg" viewBox="0 0 190 100" width="190" height="100"></svg>`, '<b>pick a region on the wave.</b> The monochrome LCD shows the sample; drag near either flag to move START or END, and the selection draws bright. After a sampler edit screen.'); +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.'); /* ============ METERS & GAUGES ============ */ const M=$('meters'); @@ -1713,6 +1716,52 @@ function setWregion(sv,ev){wrS=Math.max(0,Math.min(96,sv));wrE=Math.max(4,Math.m setRd('R19',`S ${Math.round(wrS)}% · E ${Math.round(wrE)}%`);} setWregion(22,76); +/* R20 drum roller selector: numbered drum in a window, center chip reads it */ +const DRUMR=[{name:'HIGH',v:6},{name:'LOW',v:8}]; +const drumrGrps=[]; +(function(){const s=$('drumr'),cy=76,step=17; + const defs=svgEl(s,'defs',{}); + const paper=svgEl(defs,'linearGradient',{id:'drPaper',x1:0,y1:0,x2:1,y2:0}); + svgEl(paper,'stop',{offset:'0','stop-color':'#cfc6a8'}); + svgEl(paper,'stop',{offset:'.5','stop-color':'#ece4c8'}); + svgEl(paper,'stop',{offset:'1','stop-color':'#c6bd9e'}); + const curve=svgEl(defs,'linearGradient',{id:'drCurve',x1:0,y1:0,x2:0,y2:1}); + svgEl(curve,'stop',{offset:'0','stop-color':'rgba(0,0,0,.4)'}); + svgEl(curve,'stop',{offset:'.28','stop-color':'rgba(0,0,0,0)'}); + svgEl(curve,'stop',{offset:'.72','stop-color':'rgba(0,0,0,0)'}); + svgEl(curve,'stop',{offset:'1','stop-color':'rgba(0,0,0,.4)'}); + svgEl(s,'text',{x:65,y:12,'text-anchor':'middle','font-size':7,'letter-spacing':'.18em', + 'font-family':'var(--mono)',fill:'var(--steel)'}).textContent='EQUALIZER'; + DRUMR.forEach((ch,i)=>{const x=45+i*50; + svgEl(s,'text',{x:x+18,y:34,'text-anchor':'middle','font-size':8,fill:'var(--steel)'}).textContent='+'; + svgEl(s,'text',{x:x+18,y:124,'text-anchor':'middle','font-size':8,fill:'var(--steel)'}).textContent='−'; + svgEl(s,'rect',{x:x-12,y:24,width:24,height:104,rx:4,fill:'url(#thRail)',stroke:'#0a0908','stroke-width':1.2}); + const clip=svgEl(defs,'clipPath',{id:'drClip'+i}); + svgEl(clip,'rect',{x:x-9,y:28,width:18,height:96}); + svgEl(s,'rect',{x:x-9,y:28,width:18,height:96,fill:'url(#drPaper)'}); + const g=svgEl(s,'g',{'clip-path':`url(#drClip${i})`}); + const nums=svgEl(g,'g',{});nums.style.transition='transform .12s'; + for(let n=1;n<=10;n++) + svgEl(nums,'text',{x,y:cy+3+(ch.v-n)*step,'text-anchor':'middle','font-size':9,'font-weight':700, + 'font-family':'var(--mono)',fill:'#2b2418'}).textContent=n; + svgEl(g,'rect',{x:x-9,y:28,width:18,height:96,fill:'url(#drCurve)','pointer-events':'none'}); + svgEl(s,'rect',{x:x-8,y:cy-6.5,width:16,height:13,rx:1.5,fill:'#1a1613',opacity:.92}); + const chip=svgEl(s,'text',{x,y:cy+3,'text-anchor':'middle','font-size':9,'font-weight':700, + 'font-family':'var(--mono)',fill:'var(--cream)'}); + svgEl(s,'text',{x,y:136,'text-anchor':'middle','font-size':6,'letter-spacing':'.12em', + 'font-family':'var(--mono)',fill:'var(--steel)'}).textContent=ch.name; + const hit=svgEl(s,'rect',{x:x-14,y:24,width:28,height:104,fill:'transparent'}); + hit.style.cursor='ns-resize'; + drumrGrps.push({nums,chip,base:ch.v}); + dragDelta(hit,()=>DRUMR[i].v,v=>setDrumr(i,v),{min:1,max:10,sens:.08});}); + })(); +function setDrumr(i,v){v=Math.max(1,Math.min(10,v));DRUMR[i].v=v; + const p=drumrGrps[i]; + p.nums.style.transform=`translateY(${(v-p.base)*17}px)`; + p.chip.textContent=Math.round(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); + /* ============ 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'; |