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

[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.

[mrcurious]

@aaronventure Do you have any project you can share?

[aaronventure]

@mrcurious No.

If you don't fancy building your own components, check out PrimeVue/PrimeReact.

Then either pick Vue+Nuxt for the Vue version or NextJS for the react version, configure it to build a static website and start.

https://primereact.org/slider/

[Orvillain]

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

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

Hey Dave. I'm in a similar situation right now, and the designers are soon going to be delivering Figma designs. Do you have any resources on how to best optimize this conversion process?

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

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.

I'm also interested in how far we can push the CSS renderer across the entire state of the plugin. Because in theory Figma spits out CSS code that we could use, which would speed up the UI development a lot.

[Christoph Hart]

@Orvillain Try it for non-slider elements, buttons & text input are much easier to skin with CSS IMO.

[d.healey]

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

Do you have any resources on how to best optimize this conversion process?

Nothing in particular, I just select elements in figma to get the dimensions and fill settings, etc. and try and match that with my laf. If there are shadows or labels I might need to make the components larger than the dimensions of the figma element.

Unless I'm working for a client, I'm not always trying to make it 100% identical to the Figma, so if I nudge things around or adjust gradients in HISE, that kind of thing, I don't mind. It's easier than trying to force HISE to do something it can't do well, or that would require clumsy scripting.