diff options
| author | Craig Jennings <c@cjennings.net> | 2026-07-12 19:25:31 -0500 |
|---|---|---|
| committer | Craig Jennings <c@cjennings.net> | 2026-07-12 19:25:31 -0500 |
| commit | fa37b46e5c8a62f28199e3561f7c9408e8a25f09 (patch) | |
| tree | cac61f69fcd1f53a7a9c8a4202597f888d9034f5 | |
| parent | 4ce6e6a9401015d05551a2e101737b08e6581139 (diff) | |
| download | archsetup-fa37b46e5c8a62f28199e3561f7c9408e8a25f09.tar.gz archsetup-fa37b46e5c8a62f28199e3561f7c9408e8a25f09.zip | |
feat(gallery): palette as named instrument colors at the page bottom, default size M
The palette stops being a token dump: 36 named colors grouped by role (materials, faces and inks, lamps and jewels, phosphors, needles), each naming where it appears on the instruments. No hex codes render anywhere on the page, and page chrome is deliberately excluded — the card documents what the widgets are made of, not how the page is styled. Default widget size drops to M.
| -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) |