How do i make a custom text box for a slider

1

hi! I’ve posted about this plugin before but didn’t have my client request this until now. the plugin is pretty simple. it’s a gain knob that goes from -100 decibels (basically complete silence) to +60 db.

the gui he requested is pretty simple but he wanted the textbox in the middle as well as a custom font. and colour for the text.
image
how would I go about doing this?

1 Like
2

btw this is the current gui:
image

3

If you just need the text in the middle, then you can use the same Slider::LookAndFeelMethods::drawRotarySlider as you are already using for the purple arc. juce::Graphics has functions to draw text.

If you also need the label to be editable, that’s going to be a little more complex, as the hit-box of the slider & text-box would intersect. Which means, it’s unclear where mouse events should go. Slider::LookAndFeelMethods::getSliderLayout is the other functioon you should look at. It positions the slider & textbox.

Hope this helps.

4

ok so since it’s a in the LookAndFeel structure I’m guessing It’d be in the .cpp or .h file of where I have my lookandfeel defined, correct?

5

also I’m using LAFV4, if I also use v2 for the Slider::LookAndFeelMethods::getSliderLayout, would that mess up any code?

6

likely you have to come up with your own combination of label and slider thingie cause the label that is part of slider by design can only be placed next to it but not on top. if you wanna have a cool knob you need to functionality to click on the label to enter a text value tho, so that’s why you can’t just draw it on the knob with look and feel, despite it looking the same on the surface

7

so you’re saying that I’d have to rewrite some of my code to add the text box and make it editable?

8

To elaborate @tobante 's answer, it can be as easy as putting this in your custom LookAndFeel:

Slider::SliderLayout getSliderLayout (Slider& slider) override
{
    Slider::SliderLayout layout;
    layout.sliderBounds = slider.getLocalBounds();
    layout.textBoxBounds = slider.getLocalBounds().withSizeKeepingCentre (120, 24);
    return layout;
}
9

getSliderLayout is also in LAFV4, you don’t have to worry about it. Just override it as daniel suggests.

10

ok i figured that out, now for the custom font… which I am very confused on…

11 
// create typeface pointer and store it somewhere
// probably as a member in your LookAndFeel
juce::Typeface::Ptr typeface = juce::Typeface::createSystemTypefaceFor(
    BinaryData::MyFont_ttf, 
    BinaryData::MyFont_ttfSize
);

// in paint function
g.setFont(juce::Font{typeface}.withHeight(12.0F));
g.drawText(...);
12

Override LookAndFeel::getLabelFont():