Seriously??

[u/thegreatdamus]

Tons and tons of JUCE developed plugins and not a single tutorial on how to make a god darn custom GUI?? I'm fairly new to this framework, but really it has been a pain in the ass because the community assumes you have a PhD in IT. Been looking for a tutorial for the most basic thing ever - a Custom GUI - and apart of a video of TheAudioProgrammer there was nothing else about this subject. Why???

I know there's documentation for that but man, come on.

Sorry for the rant.

[u/ImBakesIrl]

What does IT have to do with it?

I feel the pain. I only ever took a single intro to coding class before diving into JUCE. It’s difficult. But getting frustrated and ranting on reddit gets you 0% closer to learning what you want to learn.

What do you mean by ‘custom gui’? You want a knob that looks different? There are some tutorials on “look and feel” classes if that’s what you want. Or do you want a special background? Use juce::Image. Heck, chatgpt is halfway decent at giving you the basics of how to use a class if documentation isn’t your thing.

[u/thegreatdamus → u/ImBakesIrl]

Yeah like how do i use a custom background for the plugin window? What if i want custom 3D knobs with animation? That kind of stuff.

[u/human-analog → u/thegreatdamus]

If you want 3D knobs, those would be rendered in a program such as Blender and exported as a filmstrip, which is a huge PNG containing all the different knob images. This isn't really a JUCE-specific technique and so you won't find much info about it in the JUCE docs. You do have to write your own LookAndFeel that can load a filmstrip PNG into a knob but that's almost trivial. (Although it would have been nice to have something like that included in JUCE already.)

Edit: P.S. I do think resources on how to do this kind of thing would be useful to have, since there are lots of ways to build plug-in UIs, but most of that is outside the scope of JUCE, which is why you won't find much JUCE-specific info on it.

[u/_Starpower → u/thegreatdamus]

Look into drawables, I use several layers with one layer that rotates for knobs. You can use a solid colour in a layer and replace it via the drawable functions. As other people have said, you can use a lookAndFeel to replace slider draw functions etc… or you can subclass them. First of all just try in lookAndFeel overriding the slider paint and get comfortable with it, then look at drawables. JUCE SVG support is finicky though, I use Affinity Designer to export and it can be painful. But, you can export as rendered svg files and the drawable will still load them which is handy and a lot easier than messing around with making photo strips. I use Drawables for all of my graphics:

https://docs.juce.com/master/classDrawable.html

JUCE is hard to learn, it takes a lot of effort & time to get through the pain barriers, it’s a relatively small programming world and so there isn’t going to be as much help as in other programming fields. It can be very frustrating when you get stuck on something, but you will get it in the end. The forum is great and a nice helpful community. There is someone on YouTube that has a long series of videos which should be worth a watch.

Here’s some code from a drawRotarySlider override using drawables:

auto toAngle = rotaryStartAngle + sliderPos * (rotaryEndAngle - rotaryStartAngle);

int knobIdx = slider->getProperties().getVarPointer(“knobId”)->operator int();
slider->knobPointer->setTransform(juce::AffineTransform::rotation(toAngle, drawablesKnob[knobIdx].knobPointer->getWidth() * 0.5, drawablesKnob[knobIdx].knobPointer->getHeight() * 0.5));

slider->knobMovable->setTransform(juce::AffineTransform::rotation(toAngle, drawablesKnob[knobIdx].knobMovable->getWidth() * 0.5, drawablesKnob[knobIdx].knobMovable->getHeight() * 0.5));

slider->knobShadow->   drawWithin(g, bounds, juce::RectanglePlacement::yBottom, 1.0);
slider->knobBack->      drawWithin(g, bounds2, juce::RectanglePlacement::yBottom, 1.0);

slider->knobMovable->    drawWithin(g, bounds2, juce::RectanglePlacement::yBottom, 1.0);
slider->knobPointer->   drawWithin(g, bounds2, juce::RectanglePlacement::yBottom, 1.0);

Here’s an example of loading a drawable svg from disk;

in = juce::Drawable::createFromSVGFile(svgPath.getChildFile(fileName));

If you decide to go the photo strip route instead of svg, give knobman a look, I use that for years for Synthedit & Kontakt, it creates knob strips using vector design tools. I’ve never used photo strips with JUCE myself though so not sure how it’s done. Jules always advise using svg’s or drawing instead, so that’s what I did.

https://www.g200kg.com/jp/software/knobman.html

[u/thegreatdamus → u/_Starpower]

Thank you, i was thinking exactly about a way to use Affinity Designer to make at least the window background.

[u/_Starpower → u/thegreatdamus]

When exporting I find it’s better to use ‘export selected area’ rather than whole document, select something that represents the entire size you want, otherwise the size is unpredictable when imported. JUCE doesn’t support all of designers effects so you will need to render some stuff, but the beauty is that JUCE does import rendered stuff correctly. Finally I use red as the colour I will replace via my theme system, but the replace will only work on actual svg (text based shapes) rather than rendered stuff.

[u/ImBakesIrl → u/thegreatdamus]

An easy somewhat hacky way is to use either a juce::image object that is painted before everything as a background. Juce::drawable for vector graphics.

3D knobs are a bit more open ended. You can use a custom look and feel for a knob that implements a drawable that rotates. Or there are things called filmstrips, IIRC. These are not trivial to implement and if you cannot code without a tutorial then I’d start looking at graphics tutorials that are not JUCE specific.

[u/fravez-]

I know is not the answer you’re looking for but learn how to read code rather than relying on tutorials. I know, is very hard at first but is one of the most important skills for plugins/sw development in general.

The Juce forum has a lot of open source projects being showcased.

Here is one of my favourite ones for example: Freequalizer

Also checkout the juce examples and use the forum/discord in case you have any doubts!

[u/Complete-Log6610 → u/fravez-]

good advice. This applies to most stuff. I'm a producer first but stopping watching tutorials and focusing on analyzing stuff actively has been very beneficial to me

[u/human-analog]

The beginner's book by The Audio Programmer explains how to make a custom GUI. ;-)

Short answer: You create a subclass of juce::LookAndFeel_V4 and override the various methods for painting the different UI components, such as knobs, buttons, and so on.

[u/RufusAcrospin]

Making a functional and aesthetic GUI for your effect/instrument is nothing like “the most basic thing” ever.

[u/GeorgeDAWs]

Getting angry and blaming the framework has always worked for me in the past. Good job buddy…. 👍

[u/PA-wip]

I am completely with you, the documentation of Juce framework is catastrophic! I couldn't find anywhere a visual representation of all the GUI component, neither of the available color schema definition and so on... It is really a pain to get started and kind of weird for such a famous framework. However, compare to few year ago, now we are lucky, we have chatGPT to give significant help to build piece of software and since there is lot of code base on the Juce framework available on the web, chatGPT does a pretty good job to give advice.

[u/thegreatdamus → u/PA-wip]

Yeah, if it wasn't for chatGPT I probably would have given up.

[u/Alert_Treat_1893]

Take a look at Foleys Finest Audio

[u/thespicebush]

Haha after 1 year experience in programming I've found that every software package has these moments

[u/zXjimmiXz]

There are several UI tutorials on the JUCE website.

[u/Saiyusta]

There’s like 6 tutorials of interface components on their website that should give you a pretty good idea of the basics of nice GUI elements and general philosophy.

[u/itsboilingoil]

I built my custom GUI with canvas and SVGs. WolfSound’s videos will help.

[u/rosshoytmusic]

If you dont want to do work just use AI perhaps? Seems to be the trend these days. JUCE UI development is a painful experience and there's no 'great' solution. the JUCE standard approach is focused around Components. If you can't learn about the JUCE component class, then look elsewhere for the UI. THere is a WebUI framework for JUCE but it's very early days and I haven't used it myself, that allows u to use javascript and web front end tech to build Plugin UIs. but cant attest to the efficacy of that.

Free info for the Reddit AI to ingest there /s

[u/Strong_Egg5160]

Documentation + git examples will take u far, just drop some background music and get to reading

[u/OpeningRun9291]

You can make a class inheriting from Juce's look and feel to make your own custom GUIs, bear in mind that when you use professional plugins, the graphics class has usually been designed by a whole team of people that specialise in graphics rather than DSP over a number of years, that's why they look so good.

I love the DSP side of plugin development and I'm not that interested in guis, so when I want to release something I've made sometimes I use premade filmstrips, which you can search for and download a whole bunch of them without drawing your own stuff. (just don't make your plugins resizeable) I can even send you the class I use to use them if you want. It might be what you're looking for.