Plugin interfaces that read like hardware

Every plugin Sonorie builds has an interface written as an HTML page. In the browser it runs in a sandboxed frame; in the exported plugin it runs in the operating system’s own web view, with the same bridge to the parameters, so a faceplate you approve in the studio opens unchanged in your DAW.

For a long time the model drew everything on that page itself. This post is about why it stopped, and what it mounts instead.

The meter problem

The thing generated interfaces got wrong most often was the VU meter. The model would invent a scale, print it, and then drive a needle with arithmetic that did not agree with what it had printed. The result looked like a meter and read like nothing: 0 VU on the face was somewhere else on the needle.

So the meters are no longer drawn. There are twelve faces, from a wide backlit amber window to a round brass porthole, a white flush plate and a cartoon one for playful designs. Each was built as a 3D model, its needle rendered at a hundred positions, and each comes with a calibration table taken from the scale printed on that face. Between two marks the needle is placed by voltage, not by decibels, because a moving coil deflects with voltage. Place it by decibels and the needle sits off its own ticks in the middle of every span.

A page does not compute any of this. It asks for a meter and gets one that reads the plugin’s output level with VU ballistics, taking about a third of a second to settle, so a needle has the weight a real one has.

Gain reduction comes from the compressor

A compressor’s most important display is how much it is turning the signal down, and nothing about the output tells you that: a compressor and a gain knob make the same output for a steady tone. The only honest source is the compressor, so a plugin can now report its gain reduction to the interface directly.

It reads on the same VU face, the way a classic FET compressor does it: with no reduction the needle rests on 0, and 6 dB of reduction sits on the −6 mark. One meter with a switch between gain reduction and output level, because that is what the hardware has. An early version mounted two meters stacked down the panel, which no real unit does.

Knobs, faders, switches and lamps

The same reasoning applies to the controls. There are now 92 modelled knobs, 47 fader caps in long and short throws, 24 switches and 23 lamps, all rendered in 3D under the same fixed studio lighting. The light does not turn with the knob, so the highlight and shadow stay where they would on hardware while the pointer moves. The knobs range from machined aluminium and console knobs to bakelite, glass and cartoon ones, and include a family taken from well-known studio units.

A few rules come with them, each one learned from a build that got it wrong:

• A knob turns 270 degrees over 101 frames, so the middle of the range is a real frame. A bipolar control (pan, tilt, a ±12 dB gain) centres exactly.
• A knob is sized by the knob you see. Every knob image carries its shadow, and how much of the frame the knob itself fills varies by model. A page asks for a 100-pixel knob and gets one, not a 100-pixel picture of a 60-pixel knob.
• A fader’s cap stops where its slot ends, and the scale beside it is printed from where the cap really goes, through the parameter’s curve. On a logarithmic fader the 1 kHz mark lands between 200 and 2k, not halfway.
• A switch’s positions are the parameter’s options. A two-way rocker cannot be bound to a three-way choice; a parameter with more than three options becomes a stepped knob with its scale printed round it.
• A lamp has to mean something. It follows a parameter, the signal, clipping, gain reduction or power. A lamp tied to nothing is refused, and so are sockets and switches with no parameter behind them, because a plugin has no patch cables.

Analysers measured by the host

An EQ or a multiband compressor wants a spectrum analyser, and before October a generated page had no spectrum data at all, so every analyser on a generated page was animated with nothing behind it. Now the host measures and the page only draws. The spectrum is a Blackman-windowed FFT laid onto 256 logarithmic points from 20 Hz to 20 kHz, calibrated so that a full-scale sine reads 0 dBFS. The browser preview and the exported plugin compute it with two implementations held to the same numbers.

An analyser can also draw an EQ’s response curve with a handle per band: drag it for frequency and gain, scroll for Q, and the plugin’s parameters move with it.

Type

A page can use any of about 1,960 Google font families, eighteen curated faces with notes on what each suits, or a font you upload. Whatever it uses is embedded in the plugin, because an exported plugin runs in a DAW that may have no internet connection, and a page that falls back to the system font is a different design.

Every interface is run before it ships

An interface is a program, and a program that looks right can still be broken. We found one that drew its first frame perfectly and then threw an error the first time a value changed, because a variable inside a loop shadowed one of its own functions. Three of its four knobs were never built. When we scanned the interfaces already saved in August, nine of 44 had a fault of that kind.

So every interface is opened in a headless browser before it ships. The check records anything the page throws and any control that never reaches the screen. It then moves every control and fires every meter callback, because a broken redraw only shows on the next undo or automation move. It also flags parts that hang off the panel, labels printed over other text, a knob squeezed out of shape, and a meter sized out of proportion to the knobs beside it. A page with a runtime fault never replaces the interface you already had.

And by hand

The manual editor covers what you would rather do yourself. Select an element and it offers what that element can take: text, colour and type for a label; another model for a knob; a cap, a track and a throw for a fader; another face for a meter, which carries the reading across so the needle stays on the same value. Elements can be moved and hidden, and what you save goes into the exported plugin with everything else.