How do I set the font size on TextButtons?

Audio Plugins
1

Hi,

I’m trying to make the font/text inside of a TextButton larger.

Here is what it looks like currently. The A and the B need to be larger so that they fill up the space of the button.

AandB
AandB900×746 90.4 KB

Here is my declaration in PluginEditor.h:

    TextButton leftChannelButton   { "A" };
    TextButton rightChannelButton  { "B" };

In PluginEditor.cpp, I tried:

    leftChannelButton.setFont (32.0f);

but that failed to compile because:

PluginEditor.cpp:45:23: error: no member named 'setFont' in 'juce::TextButton'
    leftChannelButton.setFont (32.0f);
    ~~~~~~~~~~~~~~~~~ ^
1 error generated.

Can you please put me on the right track?

Best regards,
Fred

2

HI, you need to learn about the Juce LookAndFeel concept, create a custom LookAndFeel, assign it to your TextButtons, and then override LookAndFeel::drawButtonText().

Most of the GUI design will involve working with LookAndFeels.

Tutorial:
https://docs.juce.com/master/tutorial_look_and_feel_customisation.html

3

Here is my LookAndFeel solution for that exact problem, because the font size is hard coded into Juce;

class myLookAndFeel : public LookAndFeel_V4 {
public:
	void drawButtonText (Graphics& g, TextButton& button,
		bool /*shouldDrawButtonAsHighlighted*/, bool /*shouldDrawButtonAsDown*/)
	{
		Font font (button.getHeight () * 0.6f);
		g.setFont (font);
		g.setColour (button.findColour (button.getToggleState () ? 
            TextButton::textColourOnId	: TextButton::textColourOffId)
			.withMultipliedAlpha (button.isEnabled () ? 1.0f : 0.5f));

		const int yIndent = button.proportionOfHeight (0.1f);
		const int cornerSize = jmin (button.getHeight (), button.getWidth ()) / 2;

		const int leftIndent = cornerSize / (button.isConnectedOnLeft () ?
                  yIndent * 2 : yIndent);
		const int rightIndent = cornerSize / (button.isConnectedOnRight () ? 
                  yIndent * 2 : yIndent);
		const int textWidth = button.getWidth () - leftIndent - rightIndent;

		if (textWidth > 0)
			g.drawFittedText (button.getButtonText (),
				leftIndent, yIndent, textWidth, button.getHeight () - yIndent * 2,
				Justification::centred, 2, 0.5f);
	}
}

Optionally you can tweak the ‘0.6’ in this line; Font font (button.getHeight () * 0.6f);

2 Likes
4

I forgot to mention the above actually scales the text inside the button to it’s size, less a margin off course which you can tweak with the parameter mentioned.

5

Thanks @DKDiveDude. Another question – not sure if it’s a JUCE question or a C++ question, but – why did you comment out the parameter names like that?

6

It’s a c/c++ thing. The arguments are required for the override of the function. However, if you’re not going to use those variables inside the function, you can comment out the names like that and you will then not get compiler warnings about unused variables.

7

the more modern version of that is the attribute [[maybe_unused]]

[[maybe_unused]] bool shouldDrawButtonAsHighlighted, [[maybe_unused]] bool shouldDrawButtonAsDown)

obviously it is more verbose, as are the modern type casts, but they express intent better, and can be searched for, etc.

2 Likes
8

It’s also worth mentioning you can do this to silence warnings, especially temporarily:

	void drawButtonText (Graphics& g, TextButton& button,
		bool shouldDrawButtonAsHighlighted, bool shouldDrawButtonAsDown)
	{
        juce::ignoreUnused(shouldDrawButtonAsHighlighted, shouldDrawButtonAsDown);

        // stuff
	}
2 Likes
9

I love opening random threads on the JUCE forum that have nothing to do with my tasks at hand - I always learn something! :beers:

1 Like