diff options
Diffstat (limited to 'docs/prototypes')
| -rw-r--r-- | docs/prototypes/panel-widget-gallery.html | 26 |
1 files changed, 26 insertions, 0 deletions
diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html index 9dab675..ab69855 100644 --- a/docs/prototypes/panel-widget-gallery.html +++ b/docs/prototypes/panel-widget-gallery.html @@ -891,6 +891,9 @@ card(I,'R25','Fourteen-segment display', card(I,'R26','Response graph', `<svg id="rgraph" class="rsvg" viewBox="0 0 190 110" width="190" height="110"></svg>`, '<b>a curve on labeled axes.</b> Log frequency across, dB up the side, and the amber peak is yours to place — drag it anywhere on the plot. After the response display of a mastering processor.'); +card(I,'R30','Telegraph indicator', + `<svg id="telind" class="rsvg press" viewBox="0 0 110 110" width="110" height="110"></svg>`, + '<b>state on a pie of sectors.</b> The pointer and its little flag name the active state, engine-telegraph style. Click to step the state. After an electric indicator dial.'); /* ============ CONTROL WIRING ============ */ /* 01 toggle */ @@ -1980,6 +1983,29 @@ function setGuard(on){guardOn=on;guardLever.style.transform=on?'rotate(0deg)':'r setRd('R29',on?'ON':'OFF');} setGuard(true); +/* R30 telegraph indicator: the pointer names the state on labeled sectors */ +const TELIND_STATES=['OK','TEST','BUSY','STOP','ATTN','FAULT']; +let telI=0,telPtr=null; +(function(){const s=$('telind'),cx=55,cy=55,N=TELIND_STATES.length; + svgEl(s,'circle',{cx,cy,r:50,fill:'#171412',stroke:'#060505','stroke-width':2}); + svgEl(s,'circle',{cx,cy,r:43,fill:'var(--cream)',stroke:'#b7b29a','stroke-width':1}); + TELIND_STATES.forEach((st,i)=>{ + const a=i*360/N-90+180/N; + const [lx1,ly1]=polar(cx,cy,9,i*360/N),[lx2,ly2]=polar(cx,cy,43,i*360/N); + svgEl(s,'line',{x1:lx1,y1:ly1,x2:lx2,y2:ly2,stroke:'#2b2418','stroke-width':1}); + const g=svgEl(s,'g',{transform:`rotate(${a+90},${cx},${cy})`}); + svgEl(g,'text',{x:cx,y:cy-28,'text-anchor':'middle','font-size':7,'font-weight':700, + 'font-family':'var(--mono)',fill:'#2b2418'}).textContent=st;}); + telPtr=svgEl(s,'g',{});telPtr.style.transition='transform .18s';telPtr.style.transformOrigin=`${cx}px ${cy}px`; + svgEl(telPtr,'polygon',{points:`${cx-2.5},${cy} ${cx},${cy-38} ${cx+2.5},${cy}`,fill:'var(--fail)',stroke:'#7a2a1a','stroke-width':.5}); + svgEl(telPtr,'rect',{x:cx+1,y:cy-16,width:10,height:7,rx:1,fill:'var(--gold)',stroke:'#7d5c16','stroke-width':.6}); + svgEl(s,'circle',{cx,cy,r:8,fill:'#171412',stroke:'#000'}); + $('telind').onclick=()=>setTelind((telI+1)%TELIND_STATES.length);})(); +function setTelind(i){telI=i;const N=TELIND_STATES.length; + telPtr.style.transform=`rotate(${i*360/N+180/N}deg)`; + setRd('R30',TELIND_STATES[i]);} +setTelind(0); + /* 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'], |