diff options
| author | Craig Jennings <c@cjennings.net> | 2026-07-11 23:50:13 -0500 |
|---|---|---|
| committer | Craig Jennings <c@cjennings.net> | 2026-07-11 23:50:13 -0500 |
| commit | b137223e76c75217b594bc5e46e7625b10e31b0f (patch) | |
| tree | 67ff4b35bf65b91447e7524bd2315013f8848804 /docs/prototypes/README.org | |
| parent | 440877965e8879f3c9567cf923b7c65c0eee227c (diff) | |
| download | archsetup-b137223e76c75217b594bc5e46e7625b10e31b0f.tar.gz archsetup-b137223e76c75217b594bc5e46e7625b10e31b0f.zip | |
feat(gallery): add svg.el renderer proving the Emacs target, fix gauge ticks
gallery-widget.el is the proof-of-concept Emacs renderer: it reads the generated tokens.el and renders the needle gauge (card 10) as SVG via svg.el. Rasterized through librsvg (the renderer Emacs itself uses), it matches the web card side by side: same arc, ticks, glowing amber needle, half-dome hub, and readout from the same tokens. That closes the riskiest unknown in the three-target plan, so the component pattern can now scale widget by widget.
The comparison surfaced a real gallery bug: the web gauge's ticks were invisible. Their transform-origin put the rotation center 40px below the dial, so the rotated ticks landed outside the clipped area. I moved the ticks to the arc's top edge with the origin at the pivot, and all three now show at -60/0/+60.
The parseability test caught a second bug: the mono token's font stack carries double quotes, which broke the font-family XML attribute. The renderer swaps them to single quotes.
Tests are ERT (tests/gallery-widgets/), covering token resolution, angle math (normal/boundary/error), and the rendered document's structure. make test-unit now runs the elisp suites alongside the python ones, and make test-elisp runs them alone.
Diffstat (limited to 'docs/prototypes/README.org')
| -rw-r--r-- | docs/prototypes/README.org | 20 |
1 files changed, 19 insertions, 1 deletions
diff --git a/docs/prototypes/README.org b/docs/prototypes/README.org index c9b2fd7..3f2e3be 100644 --- a/docs/prototypes/README.org +++ b/docs/prototypes/README.org @@ -16,6 +16,24 @@ point at. - [[file:2026-07-03-sound-panel-prototype.html][2026-07-03-sound-panel-prototype.html]] — the audio/pulsemixer console; layout reference for [[file:../specs/2026-07-03-audio-panel-spec.org][the audio-panel spec]]. - [[file:panel-widget-gallery.html][panel-widget-gallery.html]] — the shared instrument-console - widget kit (lamps, engraved sections, console keys, needle gauges). + widget kit (lamps, engraved sections, console keys, needle gauges). The + living catalogue: every widget here is the visual + behavioral spec for + its reusable-component ports. + +* Design tokens (single source, three targets) + +[[file:tokens.json][tokens.json]] is the source of truth for the design tokens (palette, amber +family, glows, pulse rate). [[file:gen_tokens.py][gen_tokens.py]] regenerates all three targets +(=python3 gen_tokens.py=): + +- the =:root= block inside the gallery HTML (web CSS custom properties) +- [[file:tokens-waybar.css][tokens-waybar.css]] — GTK =@define-color= declarations for the waybar panels +- [[file:tokens.el][tokens.el]] — an elisp alist for svg.el renderers + +[[file:gallery-widget.el][gallery-widget.el]] is the Emacs renderer (proof widget: the needle gauge, +gallery card 10) — it reads tokens.el and emits the widget as SVG via +svg.el, so the same look renders inside Emacs. Tests: +=tests/gallery-tokens/= (generator, unittest) and =tests/gallery-widgets/= +(renderer, ERT), both in =make test-unit=. - [[file:2026-07-03-waybar-redesign-prototype.html][2026-07-03-waybar-redesign-prototype.html]] — three directions for sprucing up waybar in the dupre instrument-console aesthetic (future work). |