diff options
| -rw-r--r-- | docs/prototypes/panel-widget-gallery.html | 100 | ||||
| -rw-r--r-- | todo.org | 2 |
2 files changed, 71 insertions, 31 deletions
diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html index 839d479..87d7d89 100644 --- a/docs/prototypes/panel-widget-gallery.html +++ b/docs/prototypes/panel-widget-gallery.html @@ -73,7 +73,10 @@ body[data-size="2"] .wrap,body[data-size="3"] .wrap{max-width:none} .swatch .sw.txt{display:flex;align-items:center;justify-content:center;color:var(--steel);font-size:.62rem; background:var(--well);padding:0 6px;text-align:center;overflow:hidden} .swatch .swn{color:var(--cream);font-size:.8rem} -.swatch .swv{color:var(--dim);font-size:.74rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere} +.swatch .swv{color:var(--dim);font-size:.72rem;line-height:1.35} +.palhead{grid-column:1/-1;color:var(--steel);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase; + margin-top:.8rem;display:flex;align-items:center;gap:12px} +.palhead::after{content:"";height:1px;background:var(--wash);flex:1} h2{color:var(--steel);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase; margin:2.2rem 0 .2rem;display:flex;align-items:center;gap:12px} h2::after{content:"";height:1px;background:var(--wash);flex:1} @@ -599,7 +602,7 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} </style> </head> -<body data-size="3"> +<body data-size="2"> <div class="wrap"> <header class="masthead"> <div class="eyebrow">archsetup · dupre panel family · live kit</div> @@ -613,17 +616,11 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1} a live signal; the pointer types drive from your drag.</p> <div class="szbar"><span class="lab">widget size</span> <button class="key" data-sz="1">S</button> - <button class="key" data-sz="2">M</button> - <button class="key on" data-sz="3">L</button> + <button class="key on" data-sz="2">M</button> + <button class="key" data-sz="3">L</button> </div> </header> -<h2>Palette — design tokens</h2> -<p class="secnote">Read live from the generated :root block (tokens.json via gen_tokens.py), so this section always shows - exactly what the widgets render with. Hex tokens get a swatch; the glow entries are rgb triples used inside - rgba() glows; mono and pulse-rate are the non-color tokens.</p> -<div class="palgrid" id="palette"></div> - <h2>Controls — take input</h2> <div class="grid" id="controls"></div> @@ -633,6 +630,11 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1} <h2>Indicators & readouts — state or number</h2> <div class="grid" id="indicators"></div> +<h2>Palette — the instrument colors</h2> +<p class="secnote">Every named color the instruments are built from — markers, hands, faces, lamps, phosphors, + materials — with where it appears. Page chrome (background, body text) is deliberately absent.</p> +<div class="palgrid" id="palette"></div> + </div> <script> const $ = id => document.getElementById(id); @@ -644,29 +646,65 @@ document.querySelectorAll('.szbar .key').forEach(b=>b.addEventListener('click',( /* boost the intrinsically tiny widgets (audit: content under 10% of the stage) */ const BOOST=['01','07','08','12','13','N14','18']; -/* ---- palette section: read the generated :root block live ---- */ +/* ---- palette: the named instrument colors, grouped by role. No codes shown — names and uses. ---- */ +const PALETTE=[ + ['Materials',[ + ['Brass','#b8944a','comfort-meter bezel and knurl'], + ['Copper','#ad7a43','knife-switch blades, jaws and hinge'], + ['Chrome silver','var(--silver)','needles, ball lever, fader caps, chrome handles'], + ['Machined steel','var(--steel)','engraved captions, scale furniture, printed panel lines'], + ['Aluminum','#c9c4b8','timer hub, lever shafts, counter bezels'], + ['Rubber & bakelite','#2c2824','knob bodies, rocker pad, stomp switch'], + ]], + ['Faces & inks',[ + ['Cream dial','var(--cream)','tick marks, scale numerals, dial faces, flag windows'], + ['Chart paper','#efe9da','day-date disc, circular chart, comfort face, telegraph dial'], + ['Face ink','#14110e','numerals and printing on the paper faces'], + ['CRT face green','#b9d8c0','round-scope face tint'], + ['Sky slate','var(--slate-hi)','attitude-indicator sky'], + ['Earth brown','#5c4630','attitude-indicator ground'], + ['Instrument black','#17140f','bezels, plates and housings'], + ]], + ['Lamps, LEDs & jewels',[ + ['Lit amber','var(--gold-hi)','lit keys, sweep line, fixed indexes, blinkenlight lamps'], + ['Panel amber','var(--gold)','key gradients, bearing rings, seated pins, heading bug'], + ['Warning amber','var(--amber-warn)','warn cells, tripped collars, gear-transit lamps'], + ['Run green','var(--pass)','run lamps, gear greens, monitor bars, LIVE lamps'], + ['Fail terracotta','var(--fail)','muted keys, fault cells, TRIP button'], + ['LED green','var(--sevgrn)','seven-segment digits, battery cells'], + ['LED red','var(--sevred)','red seven-segment variant'], + ['Matrix red','#ff4a30','dot-matrix LEDs'], + ['Jewel red','var(--jewel-r)','pilot-lamp lens'], + ['Jewel amber','var(--jewel-a)','pilot-lamp lens, four-way corner lamps'], + ['Jewel green','var(--jewel-g)','pilot-lamp lens'], + ['Neon orange','#ff9a4c','nixie digits, dekatron glow, red screen family'], + ['Flip-disc yellow','#e3d44f','flip-dot faces'], + ['PDP magenta','#3a1420','blinkenlights panel skin'], + ]], + ['Screens & phosphors',[ + ['Phosphor green','var(--phos)','oscilloscope traces, green screen family'], + ['Phosphor dim','var(--phos-dim)','phosphor afterglow and dark screen grounds'], + ['VFD cyan','var(--vfd)','marquee, filter-bank arrows, vfd screen family'], + ['Graticule green','#3d5c46','CRT graticule rulings'], + ['LCD white','#f2f4f2','waveform-editor ink, white screen family'], + ['P4 blue-white','#cfe4ff','blue screen family'], + ]], + ['Needles & controls',[ + ['Needle red','#c23a28','comfort-meter needles, red hands'], + ['Control red','#e0523a','stop knobs, telegraph pointer, palm buttons, OFF marks'], + ['Pointer yellow','#e8cf4a','day-date read hand'], + ]], +]; (function buildPalette(){ const host=$('palette'); if(!host)return; - let rootRule=null; - for(const sh of document.styleSheets){ - for(const r of sh.cssRules){ if(r.selectorText===':root'){rootRule=r;break;} } - if(rootRule)break; - } - if(!rootRule)return; - const st=rootRule.style; - for(let i=0;i<st.length;i++){ - const name=st[i]; if(!name.startsWith('--'))continue; - const val=st.getPropertyValue(name).trim(); - const isHex=/^#[0-9a-f]{3,8}$/i.test(val); - const isTriple=/^\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}$/.test(val); - const esc=val.replace(/&/g,'&').replace(/</g,'<'); - const sw=isHex?`<div class="sw" style="background:${val}"></div>` - :isTriple?`<div class="sw" style="background:rgb(${val})"></div>` - :`<div class="sw txt">${esc}</div>`; - const tile=document.createElement('div'); tile.className='swatch'; - tile.innerHTML=`${sw}<div class="swn">${name}</div><div class="swv">${isTriple?esc+' (glow rgb)':esc}</div>`; - host.appendChild(tile); - } + for(const [group,colors] of PALETTE){ + const h=document.createElement('div'); h.className='palhead'; h.textContent=group; + host.appendChild(h); + for(const [name,val,used] of colors){ + const tile=document.createElement('div'); tile.className='swatch'; + tile.innerHTML=`<div class="sw" style="background:${val}"></div>`+ + `<div class="swn">${name}</div><div class="swv">${used}</div>`; + host.appendChild(tile);}} })(); /* ---- screen-color families: period-authentic alternates for the screen widgets ---- @@ -51,6 +51,8 @@ Craig fed a Mitsubishi Ki-57 right-panel photo (instruments identified card by c Craig fed a brass weather-station comfort meter and correctly picked it as different from both dual meters: N13 derives a NUMBER from the crossing (iso-curves), R55 reads two needles separately; this one lands the crossing in a printed categorical VERDICT (TOO WARM / TOO DRY / JUST RIGHT — active zone goes red, a digital advantage the paper face lacks). Brass knurled bezel, cream face, temp needle from bottom-left, humidity from bottom-right, per-half drag surfaces, needles clipped to the face (probe caught tails poking past the bezel at low values — fixed). Reference filed (2026-07-12-comfort-meter.png). CDP-verified: default 72F/45%/JUST RIGHT, warm and dry verdicts flip with the active label, zero exceptions. *** 2026-07-12 Sun @ 19:13:41 -0500 Squash-merged to main (bc93388) + cleanup round 2 Squash merge of the 25-commit branch landed on main; branch deleted local+remote. Then a programmatic defect sweep (per-card overflow/empty/dead-readout/sparse bounding-box audit) caught R51's monitor bars streaking across the card — Chrome's CSS zoom miscomputes absolute left/right insets, fr tracks, AND stretched widths inside zoomed stages, so the keyset now uses fixed 52px grid tracks and fixed 40px flow bars (fixed px scale correctly under zoom; this is the third zoom-layout trap after the two in the same widget — noted for future stage-internal CSS: prefer fixed px inside .stagew). Seven intrinsically tiny widgets (toggle, chip, arm-to-fire, mini signal, ladder, thermometer, status lamp) got a .boost stage zoom (1.5x, compounds with the size toggle) so they stop floating in empty stages. Sweep false positives understood: clipped content (R43 horizon, R54 tape, N22 marquee, N25 counter) reports as overflow because getBoundingClientRect ignores clip; N13/N17/N28/R20/10 verified clean visually. Full regression green at 109 cards. +*** 2026-07-12 Sun @ 19:25:04 -0500 Page iteration: palette rebuilt as named instrument colors, moved to bottom; default size M +Per Craig: the palette left the top (now below Indicators) and stopped being a token dump — it is now a curated card of 36 NAMED colors grouped by role (Materials / Faces & inks / Lamps, LEDs & jewels / Screens & phosphors / Needles & controls), each with a name (Brass, Chart paper, Neon orange, Graticule green...) and where it appears on the instruments. No hex codes visible anywhere on the page (verified by innerText scan); page chrome (background, body text) deliberately excluded. Default widget size dropped 3x → M (1.7x). Data lives in a PALETTE array in gallery JS — the curation IS the data, since most instrument colors are local literals, not tokens. *** 2026-07-12 Sun @ 13:01:27 -0500 Added the palette section New "Palette — design tokens" section above Controls: 33 tiles read live from the generated =:root= rule via document.styleSheets (zero drift possible — what renders is what the widgets use). Hex tokens and glow rgb triples get swatches; mono/pulse-rate render as text tiles. Scales with the size toggle. *** 2026-07-12 Sun @ 13:08:42 -0500 Added screen-color families + chips (first round) |