GUI of audio plug-in: some widgets appear strange (like bad quality rendering)

Audio Plugins
#1

Hello,

I’m creating an audio plug-in using Juce. Main part of the software is the audio part, but I also want to provide a simple GUI.

I’ve created the project using the “Projucer” --> Create New Project --> Audio Plug-In. I’m working with Windows 10 and VS 2019.

The audio part I’m developing is nice and cool, but I’m running into problems with the (very simple) GUI.

I just want to use some simple widgets like text, a radio button group and a hyperlink.

I’m doing this in the “PluginProcessorEditor”, in the “paint” function at the moment. I have issues with radio buttons and hyperlinks, they appear but they look very “bad”. I can draw images and write text and it looks fine.

I’ve no idea why and I’ve not found anything regarding this topic online. I’m not using a special “look and feel”, just the generated code and modified the paint function like this:

void PluginProcessorEditor::paint (Graphics& g)
{
        g.fillAll(Colours::silver);

        auto* hyperlink = new HyperlinkButton("My test hyperlink!", { "https://forum.juce.com/top/weekly" });
        hyperlink->setBounds(10, 200, 200, 24);
        addAndMakeVisible(hyperlink);

        g.setColour(Colours::white);
        g.setFont(15.0f);
        g.drawFittedText("Look at this text. It appears sharp and nice, while the radio buttons and the hyperlink just looks like there's something wrong.", 0, 160, getWidth(), 30, Justification::centred, 1);

        auto group = new GroupComponent("group", "Radio buttons");
        addAndMakeVisible(group);
        group->setBounds(10, 10, 220, 140);

        for (int i = 0; i < 4; ++i)
        {
            auto tb = new ToggleButton("Radio Button #" + String(i + 1));
            addAndMakeVisible(tb);
            tb->setRadioGroupId(1234);
            tb->setBounds(45, 46 + i * 22, 180, 22);
            tb->setTooltip("Just a test");
        }
}

Result (please view in in original size and you’ll see it):

result
result802×508 13.5 KB

What I’m missing?

Thanks in advance

P.S. My screen resolution is Full HD (1920x1080) and I have no scaling (I’m at 100%, not 125% like the default Windows 10 setting).

#2

solved

It seems like my mistake was to put it into the “paint” function. If I put the code for the radio buttons and the hyperlink into the constructor, then the elements appear correct in the GUI!

result
result802×508 16.4 KB

Maybe someone can tell my the reason for this? :slight_smile: thanks

#3

You were adding components every paint() call, so you have hundreds of components in your first image stacked on top of each other, which then caused weird aliasing issues. :slight_smile:

#4

Oh, I understand! Thanks.