From 3c54f2f4c4c29d13730f5c47272cf21eb64a2f94 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 12 Jul 2026 01:47:07 -0500 Subject: feat(gallery): add R30 telegraph indicator MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The engine-telegraph state dial (references filed in the catalogue's working directory — an electric indicator and a ship's engine-order telegraph): a cream pie of labeled sectors with a red pointer and its little flag naming the active state, stepping with a swing on click. The annunciator grid shows states as cells and the rotary selector is input; state-by-pointer-on-sectors was the missing indication form. I verified it in headless Chrome: clicks step through all six states and wrap, no console exceptions. --- docs/prototypes/panel-widget-gallery.html | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) (limited to 'docs/prototypes/panel-widget-gallery.html') 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', ``, 'a curve on labeled axes. 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', + ``, + 'state on a pie of sectors. 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'], -- cgit v1.2.3