From 838065cea987a5364c7f4d771f9a2b873990918b Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 12 Jul 2026 22:27:44 -0500 Subject: refactor(gallery): extract indicators 18-23, 26 into GW builders --- docs/prototypes/panel-widget-gallery.html | 53 ++++++------------------------- 1 file changed, 10 insertions(+), 43 deletions(-) (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 0065645..0e10631 100644 --- a/docs/prototypes/panel-widget-gallery.html +++ b/docs/prototypes/panel-widget-gallery.html @@ -1802,26 +1802,25 @@ card(M,'R17','Round CRT scope', /* ============ INDICATORS & READOUTS ============ */ const I=$('indicators'); card(I,'18','Status lamp', - ``, + (st,rd)=>GW.statusLamps(st,{onChange:(v,t)=>rd(t)}), 'one-glance health. Green ok · gold engaged · red fail · dim off · pulsing busy. Click any lamp to cycle its state.'); card(I,'19','Badge / tag', - `TUNNEL LOW BATT 2.4G`, + (st,rd)=>GW.badges(st,{onChange:(v,t)=>rd(t)}), 'a labelled flag. MUTED, AIRPLANE, a band tag. Click a badge to cycle its variant.'); card(I,'20','Tabular readout', - `
24:10
timer
`, + (st,rd)=>GW.tabularReadout(st,{onChange:(v,t)=>rd(t)}), 'a precise number. Clock, countdown, volume %. Runs a live countdown; click to pause/resume.'); card(I,'21','Engraved label', - `outputs· 3`, + (st,rd)=>GW.engravedLabel(st,{onChange:(v,t)=>rd(t)}), 'section divider. The hairline-flanked caps label with a count. Click to bump the count.'); card(I,'22','Output well', - `
Linkwlp170s0 · @Hyatt
-
DNSresolving…
`, + (st,rd)=>GW.outputWell(st,{onChange:(v,t)=>rd(t)}), 'streaming step log. Lamp-per-step with evidence. Click to stream the next step.'); card(I,'23','Toast / status line', - `joined @Hyatt_WiFi — saved`, + (st,rd)=>GW.toast(st,{onChange:(v,t)=>rd(t)}), 'transient confirmation. The one-line result after an action. Click to fire the next toast.'); card(I,'26','Nixie tube', - `08`, + (st,rd)=>GW.nixie(st,{onChange:(v,t)=>rd(t)}), 'a single warm-glowing numeral. One lit digit per tube, leading zeros dark. Click to increment the count.'); card(I,'N20','Split-flap display', `DNS`, @@ -1901,35 +1900,7 @@ card(I,'R52','Blinkenlights front panel', /* 10-17, N11-N18 extracted to widgets.js (GW.*) — wired at their card records */ /* ============ INDICATOR WIRING ============ */ -/* 18 status lamp */ -(function(){const lst=['lamp','lamp gold','lamp red','lamp off','lamp busy'];const nm=['ok','engaged','fault','off','busy']; - $('lamp18').querySelectorAll('.lamp').forEach(l=>{l.style.cursor='pointer';l.onclick=()=>{ - let i=lst.indexOf(l.className);if(i<0)i=0;i=(i+1)%lst.length;l.className=lst[i];setRd('18',nm[i]);};});})(); -setRd('18','five states'); -/* 19 badge */ -(function(){const bv=['badge','badge red','badge ghost']; - $('badge19').querySelectorAll('.badge').forEach(b=>{b.style.cursor='pointer';b.onclick=()=>{ - let i=bv.indexOf(b.className);if(i<0)i=0;i=(i+1)%bv.length;b.className=bv[i];setRd('19',b.textContent);};});})(); -setRd('19','three variants'); -/* 21 engraved */ -let engN=3;$('engrave').onclick=()=>{engN=engN%9+1;$('engc').textContent='· '+engN;setRd('21','count '+engN);}; -setRd('21','count 3'); -/* 22 output well */ -const owSteps=[['gold','Probe','8.8.8.8 …'],['','Gateway','10.0.0.1 ok'],['','DNS','1.1.1.1 ok'],['red','Retry','timeout']];let owI=0; -$('owell').onclick=()=>{owI=(owI+1)%owSteps.length;const s=owSteps[owI];const d=document.createElement('div');d.className='ostep'; - d.innerHTML=`${s[1]}${s[2]}`; - $('owell').appendChild(d);while($('owell').children.length>5)$('owell').removeChild($('owell').firstChild);setRd('22','+ '+s[1]);}; -setRd('22','click to stream'); -/* 23 toast */ -const toastMsgs=['link up · 300 Mbps','bt paired — WH-1000XM4','profile switched','joined @Hyatt_WiFi — saved'];let toastN=0; -$('toast').onclick=()=>{toastN++;$('toast').textContent=toastMsgs[toastN%toastMsgs.length]; - $('toast').style.opacity='0';requestAnimationFrame(()=>{$('toast').style.transition='opacity .3s';$('toast').style.opacity='1';});setRd('23','fired '+toastN);}; -setRd('23','click to fire'); -/* 26 nixie */ -let nixV=8; -function setNix(v){nixV=v;const t=$('nixie').children,s=String(v).padStart(2,'0'); - t[0].classList.toggle('off',v<10);t[0].querySelector('b').textContent=s[0];t[1].querySelector('b').textContent=s[1];setRd('26',s);} -$('nixie').onclick=()=>setNix((nixV+1)%100);setNix(8); +/* 18-23, 26 extracted to widgets.js (GW.*) — wired at their card records */ /* N23 annunciator with alarm lifecycle: raise -> MSTR CAUTION flashes -> ACK steadies -> RESET clears */ (function(){const st=['acell','acell warn','acell fault'];const nm=['ok','warn','fault']; const mc=$('anmc');let acked=false; @@ -2273,12 +2244,8 @@ function renderSeven(){const mm=String(Math.floor(sevenSecs/60)).padStart(2,'0') function tickSeven(){sevenSecs=(sevenSecs-1+3600)%3600;renderSeven();} $('seven').onclick=()=>{sevenSecs=(sevenSecs+60)%3600;renderSeven();}; renderSeven(); -/* tabular timer */ -let tSecs=24*60+10,tRun=true; -function renderT(){$('treadout').textContent=String(Math.floor(tSecs/60)).padStart(2,'0')+':'+String(tSecs%60).padStart(2,'0'); - setRd('20',tRun?'running':'paused');} -function tickT(){if(tRun){tSecs=(tSecs-1+3600)%3600;renderT();}} -$('treadout').onclick=()=>{tRun=!tRun;renderT();};renderT(); +/* tabular timer: builder owns the countdown; the page keeps the 1s clock */ +function tickT(){$('card-20').gw.tick();} /* VFD marquee */ const vfdMsgs=['ARCHSETUP · NET OK · BT 2 · SND 62%','WIFI @Hyatt · 300 Mbps · VPN UP','BATTERY 84% · DISK 61% · TEMP 47C'];let vfdMi=0,vfdX=176; function tickVfd(){const t=$('vfdt');vfdX-=1.1;if(vfdX< -t.offsetWidth)vfdX=176;t.style.left=vfdX+'px';} -- cgit v1.2.3