Very nice tutorials! I appreciate how you don't waste time but shortly explain for every detail why you are doing what. At the same time your voice is well recorded and calm, I can follow even sundays in bed after waking up :D In this style those are the best JUCE tutorials out there that I know of and you should definitely continue!
Hey hey, thank you for the clear tutorial! How would you position different elements relative from eachother? I'm looking for the cleanest way to do this, sliders, squares, etc...
Hey thanks a lot! In my opinion, and by no means is it the agreed opinion, I'd just start with the full bounds of a container and cut chunks off it with removeFrom or withTrimmed, with proportional width and height. FlexBoxes and Grid layouts are cool, they are very useful if you want a responsive layout and if there are a lot of components that need to be organized in rows and columns and have good symmetry. But for simple layouts, and ones that are not strictly ordered, I think it's overkill.
Just taking my first baby steps in c++/Juce (don't know much more than hello world lol), but this seems soo much easier and better than having to do the resize thing for every single gui thing! I'm more of a creative person than a technical person, so workarounds like this one really seem perfect for me because then you can work on the ui more intuitively. Definitely saving this video for later, when I've learned how to actually make anything at all in Juce, haha. Thanks!
Great explanation, do you have an example somewhere that uses for instance 3 panels? I would love to see a simple example of adding in child components that also have a few sliders or other components and make them all relative to each other.
How do you get the x: y: width: height: to show up in Visual Studio in your code 4:09 slider.setBounds(x:631, y:393, width:233, height:233); ? This is really helpful, I'd love to know how to do it!
It's a plugin that I've installed in Visual Studio. It's a plugin by JetBrains and it's called ReSharper C++. It's a paid tool, but I use a lot of JetBrains products so its a no brainer for me.
Thank you so much for the video, it is really helpful. I was able to apply your approach in my code very fast but then I got stuck completely when it comes to the point, when I rescale the component not from the ui, but from the code. Because of the transformation things get really strange. Do you have a good recommendation, how to increase or decrease components from the code after the transformation is applied? Like how would you for example double the background and knob by clicking a button?
Great videos, thanks! Can I ask, are your knobs on, for example, your Knock plugin interface, are these drawn within the JUCE framework, or are these designed in something like Adobe Illustrator as SVGs or PNGs and imported into the JUCE project?
Cheers, thanks! For the knobs on Knock specifically, they're PNG knobs, since they have subtle gradients and drop shadows. So, they were designed in Photoshop or Illustrator and exported. If things get more complicated, like the addition of shadows, sprite sheets need to be created to represent each rotational position of the knob. Simpler stuff can be SVGs or drawn directly via code.
@@akashmurthy Great, thanks! Are the PNG graphics designed to be your maximum expected size (e.g. 200%), so when a user enlarges from the default size of 100% to 200%, they still look good? (scaling down always looks better than scaling up)
@@akashmurthy Thanks! I intend on offering my user small (50%), regular (100%) and large (200%) UI sizes. Do you have any quick tips on keeping the CPU load light when working with bitmap knob images?
@@Table-Top Ideally, redrawing small bitmap images when the sliders are moved doesn't consume a lot of CPU. If the profiler is telling you that there are spikes in the CPU load, then it's probably worth optimising the drawing logic, like caching the Drawable instead of recreating it every time, or something like that. Again, shouldn't be too much of a hassle. It's also worth considering handing off all drawing tasks to the GPU. You can pull in the opengl module JUCE has to offer, and declaring an OpenGLContext in the Editor, and attaching the context to the top most UI container. This is quite simple to do, and will delegate all the UI redrawing tasks to the GPU underneath the hood.
Has anyone else experienced bad lag when resizing on Windows / VST3? The resizing takes time to catch up. It happens even when I comment out addAndMakeVisible on the inner component, and the stuff in the wrapper's resized. It's a totally black plugin, and when I resize the window, the little corner component even lags behind! I'm hoping someone knows a fix. It doesn't happen much on OSX / AU, maybe a little bit of lag.
You're literally the best channel doing this right now thank you for this!
Thanks for that mate!
Very nice tutorials!
I appreciate how you don't waste time but shortly explain for every detail why you are doing what.
At the same time your voice is well recorded and calm, I can follow even sundays in bed after waking up :D
In this style those are the best JUCE tutorials out there that I know of and you should definitely continue!
Thanks very much! I had no idea that my voice soothed people out of bed! :D
Amazing tutorial again. Love your JUCE content. This has come just in the right time also as I am trying to improve my UI design on plugins. Thanks
Thanks mate! All the best on your plugins.
Oh it's very happy moment to see you back my bro ,,,, ❤️
Hey hey, thank you for the clear tutorial! How would you position different elements relative from eachother? I'm looking for the cleanest way to do this, sliders, squares, etc...
Hey thanks a lot!
In my opinion, and by no means is it the agreed opinion, I'd just start with the full bounds of a container and cut chunks off it with removeFrom or withTrimmed, with proportional width and height.
FlexBoxes and Grid layouts are cool, they are very useful if you want a responsive layout and if there are a lot of components that need to be organized in rows and columns and have good symmetry.
But for simple layouts, and ones that are not strictly ordered, I think it's overkill.
@@akashmurthy ah ok tx! I'll have a go, any tip on maximizing the screen for ios and android?
@@creatingspacesproducer I haven't worked with ios or android, so I'm afraid I don't know.
Just taking my first baby steps in c++/Juce (don't know much more than hello world lol), but this seems soo much easier and better than having to do the resize thing for every single gui thing! I'm more of a creative person than a technical person, so workarounds like this one really seem perfect for me because then you can work on the ui more intuitively. Definitely saving this video for later, when I've learned how to actually make anything at all in Juce, haha. Thanks!
You're welcome! All the best on your Juce journey..
Great video, thank you!
You're welcome mate!
Excellent Tutorial! Thank you!
You're welcome!
Great explanation, do you have an example somewhere that uses for instance 3 panels? I would love to see a simple example of adding in child components that also have a few sliders or other components and make them all relative to each other.
These Tutorials are so helpful, can you make more juce tutorials??
Thanks mate! I'd love to make more juce tutorials. I just need to get my act together and make them!
How do you get the x: y: width: height: to show up in Visual Studio in your code 4:09 slider.setBounds(x:631, y:393, width:233, height:233); ? This is really helpful, I'd love to know how to do it!
It's a plugin that I've installed in Visual Studio. It's a plugin by JetBrains and it's called ReSharper C++. It's a paid tool, but I use a lot of JetBrains products so its a no brainer for me.
Thanks bro, you save my life
Thank you so much for the video, it is really helpful. I was able to apply your approach in my code very fast but then I got stuck completely when it comes to the point, when I rescale the component not from the ui, but from the code. Because of the transformation things get really strange. Do you have a good recommendation, how to increase or decrease components from the code after the transformation is applied? Like how would you for example double the background and knob by clicking a button?
Thank you 🙏
You're welcome!
Great videos, thanks! Can I ask, are your knobs on, for example, your Knock plugin interface, are these drawn within the JUCE framework, or are these designed in something like Adobe Illustrator as SVGs or PNGs and imported into the JUCE project?
Cheers, thanks! For the knobs on Knock specifically, they're PNG knobs, since they have subtle gradients and drop shadows. So, they were designed in Photoshop or Illustrator and exported. If things get more complicated, like the addition of shadows, sprite sheets need to be created to represent each rotational position of the knob.
Simpler stuff can be SVGs or drawn directly via code.
@@akashmurthy Great, thanks! Are the PNG graphics designed to be your maximum expected size (e.g. 200%), so when a user enlarges from the default size of 100% to 200%, they still look good? (scaling down always looks better than scaling up)
That's exactly right!
@@akashmurthy Thanks! I intend on offering my user small (50%), regular (100%) and large (200%) UI sizes. Do you have any quick tips on keeping the CPU load light when working with bitmap knob images?
@@Table-Top Ideally, redrawing small bitmap images when the sliders are moved doesn't consume a lot of CPU. If the profiler is telling you that there are spikes in the CPU load, then it's probably worth optimising the drawing logic, like caching the Drawable instead of recreating it every time, or something like that. Again, shouldn't be too much of a hassle.
It's also worth considering handing off all drawing tasks to the GPU. You can pull in the opengl module JUCE has to offer, and declaring an OpenGLContext in the Editor, and attaching the context to the top most UI container. This is quite simple to do, and will delegate all the UI redrawing tasks to the GPU underneath the hood.
Has anyone else experienced bad lag when resizing on Windows / VST3? The resizing takes time to catch up. It happens even when I comment out addAndMakeVisible on the inner component, and the stuff in the wrapper's resized. It's a totally black plugin, and when I resize the window, the little corner component even lags behind! I'm hoping someone knows a fix. It doesn't happen much on OSX / AU, maybe a little bit of lag.
Can I do this in Xcode
You can, absolutely.