What are you using to build UI for your plugin? What's your preferred way and why?

[mrcurious]

Hey everyone,
I've been developing a couple of plugins recently and mostly sticking to the standard canvas and graphics tools provided by HISE for the UI. While it works, I find the development process quite slow — although I’m already been used to it.
This led me to wonder: how are developers creating those modern, sleek, and highly polished plugin UIs — not just in HISE but also in other frameworks like JUCE?

From what I've gathered, there seem to be several approaches: Using WebViews and leveraging frontend tech (ReactJS, HTML/CSS, etc.), Styling directly within HISE using stylesheets, Film strips and SVG-based animations, Classic canvas drawing with trigonometry and math-heavy custom rendering
I wonder what your current preferred method for building the UI is and why?
Is it worth switching to WebView-based UIs? Or are there smart hybrid approaches that give both performance and design flexibility?

Would love to hear your thoughts, approaches, and any recommendations!

[d.healey]

@mrcurious I usually work with a designer and they will build the design in a vector program, usually figma these days. Or if I'm designing it I'll use inkscape.

Then I'll take that design and reconstruct it in HISE using look and feel.

[Christoph Hart]

Is it worth switching to WebView-based UIs?

In my experience, no unless you absolutely need it to render complex 3D stuff or embed your webshop that's already available as a website, then the glitches & weird edge case behaviors are not worth it.

In the long run I can imagine that the CSS renderer will be used more often for the UI elements that are suited towards this (!= sliders & knobs) as the declarative nature of CSS makes it faster to develop UIs.

[dannytaurus]

Up to now I designed in Affinity Designer and exported static image assets like backgrounds, knob elements, button images, fader caps, etc.

I used WebKnobMan to make the film strips for knobs and LED/LCD values.

For my next plugins I'm trying out programmatic UI and vector controls. I still prototype the design in Affinity Designer but then reproduce programmatically in HISE.

I should try Figma since I hear good things about it.

[ccbl]

Honestly just knobman for filmstrips and photoshop. I know it's not the most efficient, but I'm comfortable with it and I'm happy enough with the results.

[dannytaurus]

@ccbl I love KnobMan! Yeah, it's janky and old but you can get quite creative with it. I like trying to replicate existing knobs from other plugins, just to see if I can.

The LED values in the plugins above are filmstrips from KnobMan. It means you can embed glows and shadows right in the image so the plugin renderer doesn't have to do them.

I'm curious to know the performance difference in HISE between filmstrips and vectors/images drawn and manipulated in HISE. I'm sure the answer is here in the forum somewhere

[d.healey]

@dannytaurus said in What are you using to build UI for your plugin? What's your preferred way and why?:

I'm curious to know the performance difference in HISE between filmstrips and vectors/images drawn and manipulated in HISE

I haven't noticed any significant performance difference on my UIs - but if you start using lots of shadows or blur effects you might run into issues.

Using filmstrips has three issues:
RAM usage.
They don't scale well to different sizes.
They're not dynamic, you can't change the design on the fly via scripting.

[dannytaurus]

The other thing I use is FontStruct to make pixel fonts.

If I'm trying to replicate an old synth display I like it to be as close as possible. I couldn't find the actual Yamaha Roland or E-mu LED/LCD fonts so I built them in FontStruct.

I get references of every character in the font (usually by renaming a preset and taking a video while scrolling through the characters) then rebuild every characters.

The matrix, like 5x6 or 5x7, varies between manufacturers, as do a lot of the characters.

It takes a while but I find those little things really fun and it helps to make an authentic vintage UI.

[d.healey]

@dannytaurus Sounds interesting, can you share some examples in context - are they in the images you posted above?

[dannytaurus]

@d-healey Interesting. What's the RAM implication?

When I supply a PNG filmstrip, does HISE convert this to a larger file size when it's rendered in the plugin?

For example, I have a 22KB PNG of LED values 00-99 and a 368KB PNG of a rotating knob.

What would be the RAM usage be for these kinds of images?

[d.healey]

@dannytaurus said in What are you using to build UI for your plugin? What's your preferred way and why?:

What's the RAM implication?

All images consume RAM. When you load an image into RAM it's uncompressed, so it doesn't matter if you're using a png or a jpeg, the size in RAM is the raw bitmap size based on the dimensions of the image. You can see the true usage in the pool table window in HISE.

Here's the calculation:
MB = width * height * 4 * numFrames / 1024 / 1024

[mrcurious]

@dannytaurus I’m concerned that using raster images might compromise the visual quality of your plugin, especially on high-resolution displays. Wouldn’t SVGs be a better fit here, since they scale cleanly and retain sharpness at any size?

RAM usage.
They don't scale well to different sizes.
They're not dynamic, you can't change the design on the fly via scripting.

Agree with @d-healey here. This applies broadly across development, whether it's mobile apps or audio plugins with canvas-based UIs.

[Allen]

Most times i only use filmstrips in Hise. (sometimes i use the graphic api as well)
I make textures in Photoshop, make some of the animations in Animate and Asperite, and render everything in Blender. Sometimes i also do some post processing for the textures in maxmsp.

I think there's no need to use webviews for UI unless you literally wanna make a game inside the plugin (like something with complex interactions). I've considered using webview before but soon i found out that almost all my 3D scenes will not likely possible to be rendered smoothly in realtime. (i have a 3D scene which is 10 times more complex then the gif above still working in progress and it's just literally can't be rendered properly in realtime in something like threejs) Rendering a complex 3D scene in realtime will cause some extra problems on performance and stability. You still could use js libraries (like p5js,paperjs) to make visual staffs, just record everything, make it a filmstrip, load it into a slider and control it by a ramp. (if you are okay with raster images)

@d-healey said in What are you using to build UI for your plugin? What's your preferred way and why?:

Using filmstrips has three issues:
RAM usage.
They don't scale well to different sizes.
They're not dynamic, you can't change the design on the fly via scripting.

One more issue i found is lights and shadows cannot be properly written in a png file with a transparent background so you may need to render several extra filmstrips for a same knob with different backgrounds to get the whole scene looks right.

[aaronventure]

@Christoph-Hart the web dev tools are very far ahead, as well as accessibility compatibility, testing etc. Not even gonna go into the available libraries and the fact that you can get ChatGPT help whenever you're stuck.

I'm currently using Svelte+SvelteKit for one interface, and it's just so nice working with it. As if Svelte's modularity-focused approach wasn't enough, the deployment for HISE/WebView is a breeze. You install any library you want into the project, and in the end the SvelteKit static build compile pulls in only the stuff you used, gives you an index.html file with an accompanying _app directory and any assets that you put into the static dir. You point HISE to it and that's it.