I’ve started making design prototypes for my UIs to try to make them better. However, at most I get a nice looking interface that I then implement with hard-coded pixel values, which means I can’t resize my window.
How do you make resizable UIs when you’re working off of a fixed design?
Also, how do you make a resizable JUCE window in general?
Any suggestions greatly appreciated, thanks!
Although my plugin window is resizable, most components have a fixed height/width ratio. Only something like spectrum/waveform is fully resizable. I just calculate the size of each component w.r.t. the size of the full window and resize them.
I would guess it is very difficult & time consuming to make the UI fully reactive, like Apple website.
That’s a fair point. Now that I’m checking a lot of the plugins I use the most aren’t resizable at all. The ones that are fully resizable are TAL-Sampler and the Valhalla ones.
Something to think about.
Have you looked at the FlexBox and Grid classes? They’re designed for making flexible UIs. Personally I find them a bit non-intuitive, but there’s a good tutorial for them, and an example in the demo runner.
A very simple method is to put all your components in a new container Component and stick that in the editor, and then set an affine transform on that container component based on the size of the window (you can’t do this directly on the editor). This will automatically scale everything by the right amount. You don’t need to do anything else. Of course if you’re using a lot of images they might become blurry when the window is scaled too much.
Thank you! If it’s really that simple that’s awesome! I’m not using any images in my UI. It’s all svgs and text thankfully.
However, I did build it using WebView, and I’m wondering if it would be better to cut my losses and just implement it directly in JUCE.
You can see an example in this little plug-in I did: GitHub - hollance/lost-and-found-piano: VST that combines the classic mdaPiano and EPiano in a new plug-in
