writing / / 1 min read

Notes on a hardware-style plugin UI in JUCE

Bugs from building a skeuomorphic plugin UI in React inside a JUCE WebView: rotation, transparency and rounding.

  • JUCE
  • React
  • C++
  • Audio

Notes from the UI side of Vintage ML Compressor, where React and TypeScript render inside a JUCE WebBrowserComponent.

  • VU needle rotation. The needle rotated around the wrong point because of a transform bug. Fix the transform origin first, then the angle math.
  • White boxes around knobs. The knob PNGs had no alpha channel. They needed transparent backgrounds (or chroma-keying) to sit on the panel.
  • Filmstrip drift. Mapping a value to a filmstrip frame drifted because of frame rounding in the rotation math.
  • Smaller fixes. Button aspect ratio and overlapping VU labels.

The UI loads and renders. The parameter bridge to C++ isn't built yet.

← back to writing