From 518ffd7578dbc74689b5303a35f402bfe081aa91 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sat, 4 Jul 2026 16:46:48 -0400 Subject: docs: gather panel design prototypes into docs/prototypes/ I gathered all five self-contained HTML/CSS design prototypes into one home: the instrument-console pair (moved from assets/), plus the net-panel rescan, sound panel, widget gallery, and waybar redesign (moved out of working/). Added a README index and updated every inbound link: build summary, the instrument-console and audio specs, and todo.org. Also fixed a broken link the earlier sort left in the build summary. It still pointed at the instrument-console spec's old docs/design/ path after the move to docs/specs/. --- .../2026-07-03-waybar-redesign-prototype.html | 321 +++++++++++++++++++++ 1 file changed, 321 insertions(+) create mode 100644 docs/prototypes/2026-07-03-waybar-redesign-prototype.html (limited to 'docs/prototypes/2026-07-03-waybar-redesign-prototype.html') diff --git a/docs/prototypes/2026-07-03-waybar-redesign-prototype.html b/docs/prototypes/2026-07-03-waybar-redesign-prototype.html new file mode 100644 index 0000000..3f3e7c1 --- /dev/null +++ b/docs/prototypes/2026-07-03-waybar-redesign-prototype.html @@ -0,0 +1,321 @@ + + + + + +Waybar redesign — dupre instrument console + + + +
+ +
+
archsetup · dupre panel family · waybar
+

Waybar — three ways to spruce it

+

The bar already runs the dupre palette and a gold border. These three push it toward the + instrument-console faceplate language of the net + bluetooth panels — machined + gradient plates, engraved unit labels, glowing status lamps, physical console keys, analog + gauges — dialing the intensity up from left-touch to full console. Same real module set in + each so you're comparing treatment, not content. All three stay inside what GTK3 CSS + (waybar's engine) can actually render.

+
+ + +
+
+
+ + 123 + 󰕰 + instrument-console.el + +
+
+ + 󰤨 + 󰍬 + 󰕾 62% + 󰹇 + 󰃟 + 󰒲 + 󰂯 + 󰻠 8% + 󰔛 24:10 + 󰃭 Fri Jul 3 +
+
+
+
+
current— flat pills, colour-only states. the baseline these three build on.
+ + +
+
+
+ + 123 + + 󰕰 + instrument-console.el + +
+
+ + 󰤨 + + 󰍬 + 󰕾 62% + + 󰹇 + 󰃟 + 󰒲 + 󰂯 + + 󰻠 8% + 󰔛 24:10 + + 󰃭 Fri Jul 3 +
+
+
+
+
variation 1 · faceplate— machined gradient + top highlight, engraved hairline dividers, status lamps on net/bt, cream clock. Nearest to today; drop-in GTK CSS.
+ + +
+
+
+ + 123wksp + 󰕰instrument-console.ellayout · window + +
+
+ + 󰤨CAPTIVEnet + 󰍬󰕾62%sound + 󰹇󰃟󰒲toggles + 󰂯M650bt + 8%cpu + 󰔛24:10timer + Fri Jul 311:23clock +
+
+
+
+
variation 2 · instrument segments— each group a recessed sub-plate with an engraved unit label; a squat needle gauge for cpu. Reads like a row of instruments. Taller; label row costs a few px.
+ + +
+
+
+ + 123 + + 󰕰 + instrument-console.el + +
+
+ + 󰤨 CAPTIVE + + 󰍬 + 󰕾 62% + + 󰹇 + 󰃟 + 󰒲 + 󰂯 72% + + + + + + 󰔛 24:10 + + 󰃭 Fri Jul 3 11:23 EDT +
+
+
+
+
variation 3 · full console— every module a recessed well, physical console keys for toggles (gold when engaged, terracotta when off), twin cpu/mem gauges, cream tabular clock with engraved TZ. Furthest from today; closest to the panels.
+ + +
+
+

What carries over from the panels

+
    +
  • Lamps — the glowing status dot lands on net + bt so health reads at a glance, not just by glyph colour (gold = captive/engaged, green = ok, red = fail, dim = off).
    • +
  • Machined faceplate — the cluster gets the b-face vertical gradient + 1px top highlight + deeper shadow, so it looks milled rather than printed.
    • +
  • Engraved dividers — hairline separators group the right cluster into net · sound · toggles · system · clock, echoing the panels' engraved section rules.
    • +
  • Console keys — the toggles (touchpad, dim, caffeine) borrow .c-btn: gradient fill, inset highlight, gold border when engaged.
    • +
  • Gauges — sysmon becomes a squat needle (or twin needles for cpu/mem), the same instrument the panels use for throughput and battery.
    • +
  • Cream + tabular — the clock and live values shift to cream with tabular-nums, matching the panels' readouts.
    • +
+
+
+

GTK3 translation caveats

+
    +
  • Dividers need real separator modules or per-module borders — waybar can't inject ::before content between modules the way this HTML does.
    • +
  • Lamps render as a small pango glyph (● with colour + text-shadow glow) prepended in each script, or a tiny bordered box widget — both are GTK-safe.
    • +
  • Gauges are the real work: GTK CSS can't draw a rotating needle. Options — a Cairo/GTK drawing area in a custom module, or fake it with a unicode gauge glyph that steps by load band. V2's single gauge is cheaper than V3's twin.
    • +
  • V2's unit labels raise the bar height (the label row). Fine at 54px reserved, but worth eyeballing against the -54 margin strip.
    • +
  • Gradients, inset box-shadow, border colour states, tabular-nums — all already proven in the current stylesheet.
    • +
+
+
+

My read

+
+ Variation 1 (faceplate) is the one I'd ship first: it lands ~80% of the instrument-console feel — lamps, milled plates, engraved grouping, cream clock — for pure CSS plus a lamp glyph in the net/bt scripts. No custom drawing, no height risk. +

+ Variation 3 is the aspirational target once a gauge-drawing module exists (it'd also upgrade the sysmon popup). Variation 2 is the middle path if you want the unit labels' legibility but not the full recessed-well density. They're not exclusive — 1 can grow into 3. +
+
+
+ +
+ + -- cgit v1.2.3