Skip to content

Rendered instrument UI and the shared Affine design language - #3

Merged
user1303836 merged 8 commits into
mainfrom
feature/affine-ui
Sep 28, 2026
Merged

user1303836 merged 8 commits into
mainfrom
feature/affine-ui

Conversation

@user1303836

@user1303836 user1303836 commented Sep 27, 2026 •

Copy link
Copy Markdown
Collaborator

Rebuilds the Suppressor editor as rendered matte black hardware and introduces the Affine design language, a shared kit that HDN Ring Modulator adopts in affinedsp/hdn-ringmod#38 (companion PR).

Suppressor

Real capture from the UI tests: six seconds of plucked notes processed at real-time pace, suppressing between notes.

This design was chosen from four alternatives (#4, #5 and #6, plus the original design first proposed here). The chosen one, Stealth (#6), is merged into this branch, and the shared kit is reduced to it.

What changed

  • libs/affine-ui (new, identical in both repos): the affine_ui JUCE module (v3.0), bundled OFL fonts, and DESIGN_LANGUAGE.md. The powder-coat panel and the knobs are shaded per pixel at the display's physical scale and cached, so they stay sharp from 100% to 200% and on Retina. Only moving parts repaint. A product sets only its screen colour.
  • Editor, 640×460 → 820×540: a black powder-coated panel with colour only on one teal screen.
    • Screen: high-band reduction over the last six seconds, with the current value above the plot. The plot breaks wherever there was no reading. Beside it are INPUT and OUTPUT peak bars with readouts and clip cells; OUTPUT is relabelled REMOVED while auditioning.
    • Controls: Threshold, Strength and Release are knobs inside white LED rings, with printed scales and glass readouts. Listen removed is a soft key with a headphones glyph and an amber LED strip.
    • Status: the processing state with its LED (teal suppressing, amber listening or learning, red bypassed, off without audio), and Host settings active when legacy settings differ from their defaults.
  • Removed: PluginLookAndFeel.* and assets/fonts (the fonts now live in the shared kit).
  • Docs: docs/UI_DESIGN.md is rewritten for this editor (the previous version still described an older 1000×640 layout with 20 controls), and the README and state screenshots are refreshed from the UI test captures.

Preserved behaviour

  • DSP, processor, parameter IDs, ranges, defaults, text conversion, state and automation are untouched.
  • Metering semantics are unchanged. Readings only count as live from a new block within 500 ms whose routing matches. Stale data goes dark: the status LED goes out, the bars go dark, readouts show -- and the plot breaks. Multiband mode still disables Threshold and Strength. The status strings and the accessible meter summary are the same.
  • Knob interaction is the same contract as before: 240 px drag, Shift for fine, strict exact entry, Alt/Option-click or Home to reset, arrows, and the host context menu. Every edit is one gesture.
Listening to the removed signal Learning bands (multiband)
delta learning

Verification (macOS, arm64)

  • ctest: 2/2 pass. The UI suite has 8 cases and 435 assertions. It covers bundled fonts and contrast (including the screen colour), the native VST3 and CLAP editor embedding and lifecycle, exact entry, gestures, state recall, truthful live, stale, bypass, audition and learning states, clip reporting, and rendering at 100–200%.
  • pluginval 1.0.4 at strictness 10 reports SUCCESS for the VST3.
  • CI builds and captures every state on Windows and Linux; captures are in the ui-evidence-* artifacts.

Notes for review

  • The design language and shared kit are vendored, not submoduled, so each repo stays self-contained. If you'd rather keep them in their own affinedsp/affine-ui repo, moving the folder there is mechanical.
  • The branch history includes the alternatives round: kit 2.0 added four finishes and the last kit commit removes the three that were not chosen. The final diff contains only the Stealth kit.
  • The maker's mark reads "affine" to match the org. The plugin's company name and codes are unchanged.

Vendor the affine_ui JUCE module, its bundled OFL typefaces and the
design language it implements. The folder is identical in every Affine
plug-in and renders knobs, faceplates, meters and displays procedurally
at the display's physical scale.
Replace the flat editor with the Affine family instrument: IN and OUT
LED ladders with clip cells around a backlit high-band reduction meter,
calibrated Threshold, Strength and Release knobs, and a latching Listen
key. Metering semantics are unchanged: stale data still goes dark, the
output column is relabelled while auditioning, and multiband mode still
disables the one-split controls. Tests follow the new editor size and
component types.
Rewrite the UI design notes for the new editor, refresh the README and
state screenshots from the UI test captures, and drop captures of the
previous interface.
Add the Broadcast, Hi-Fi and Stealth finishes alongside Laboratory:
hammertone, powder-coat and black-glass faceplates; bakelite and polished
aluminium knob materials, ribbed skirts and LED rings; piano-key, toggle,
polished-square and soft-key buttons; moulded, chrome and flush meter
housings with coloured zones and a centre rest; horizontal ladders;
alphanumeric Nixie tubes; a tuning dial and illuminated legends; jewel
lamps, lit windows, rack ears, name plates, end caps and screen glass.

The design language now describes each finish and shows both products in
all four.
Matte black hardware with LED-ring knobs, a Listen soft key and one teal
screen: six seconds of measured high-band reduction beside input and
output bars. The capture test plays plucked notes at real-time pace so the
captured history holds readings the processor produced.
Describe the Stealth layout, displays and states in the UI design notes and
the README, and replace the screenshots with captures from the UI tests.
Keep the matte black hardware the products use and remove the other three
finishes: their panel textures, knob materials, key styles, meters, tubes,
dials, panel hardware and two fonts. The Stealth values become the kit
defaults, so a product sets only its screen colour.

Add screen helpers for captions, lit numerals and segmented bars, and a
section title for control groups, and move both editors onto them. The
design language is rewritten around the one finish as version 3.0.
The design language now has a single finish, so the notes and screenshot
descriptions no longer name one.
@user1303836
user1303836 merged commit a6c7401 into main Sep 28, 2026
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant