Click & drag on Label

General JUCE discussion
1

Hi - I have Labels setup as number boxes which the user can click & change value. I want to be able to click and drag up / down on the label to increase / decrease the value. How would I go about this?

thanks

2

Surely would make more sense to use a Slider, which already has that functionality?

(But you could of course just add a mouselistener to the Label and respond to mouse drags appropriately)

3

true, but I only want a number display + the ability to click drag to increase / decrease the variable, and not any slider track or anything.

 

Thanks, I'll look at the mouseListener route.

4

I created that using a custom Label with an invisible Slider

Rail

5

Ah good tip!

 

I solved it with a mouseListener on the Labels I use for number boxes & overrided mouseDrag..ie something like:

 

void ParentComponent::mouseDrag(const MouseEvent& e)

{

        if(e.eventComponent == LabelNumberBox)

        {

            double changeVal = 0.0;

            if(e.getDistanceFromDragStartY() < 0) changeVal = -0.5; //up

            if(e.getDistanceFromDragStartY() > 0) changeVal = +0.5; //down

            numberBoxValue01 += changeVal;

            LabelNumberBox->setText((String)numberBoxValue01, dontSendNotification);

       }
}
6

Hello guys. I know this post is an old one but thinking it might be helpful to someone, I share my solution (which is an optimization of what @JimmyFF suggested).
I preferred to incorporate the mechanism in a customLabel class:

    void mouseDrag(const MouseEvent& e) override
        
        {
            double changeVal = 0.0;
            float sensitivity = 1.f;
            
            int newMouseDown;
            if (e.getMouseDownY()==mMouseDownPosY)
            {
                newMouseDown = mMouseCurrentPosY;
                mMouseCurrentPosY = e.getPosition().getY();
            }
            else
            {
                newMouseDown = e.getMouseDownY();
                mMouseCurrentPosY = e.getPosition().getY();
            }
            
            if(newMouseDown-mMouseCurrentPosY > 0) changeVal = + sensitivity; //up
            
            if(newMouseDown-mMouseCurrentPosY < 0) changeVal = - sensitivity; //down
            mDoubleValue += changeVal;
            
            
            ParamValues oscVal;
            mFloatValue = clipValue(mDoubleValue, minValue, maxValue);
            setText(floatToStr(mFloatValue), sendNotification);
            mMouseDownPosY = e.getMouseDownY();
        }

I don’t know how naive my code might look to the more expert developers; if you have suggestions on how to improve it, I’d be very happy to read. I’m new to programming.

1 Like
7

In itself this is a good solution, but it underestimates what the Slider does behind the scenes, especially when used to control parameters:

  • interface to Parameter using SliderAttachment
  • calling beginChangeGesture() / endChangeGesture() to avoid collisions with host automation
  • instead of just clipping the value, using a NormalisedRange allows logarithmic ranges (make your mouse drag move faster in higher frequencies) in a consistent manner
  • makes sure the text is normalised via configurable textToValue and valueToText lambdas
  • not to mention thread safety when setting/getting a parameter from different threads

TL;DR: prefer interfacing via a Slider and configure it’s TextBox

1 Like
8

Thank you @daniel . Thanks to your post I am learning some new useful things. For example I didn’t know about beginChangeGesture

I am using RangedAudioParameters in my plugin and although I got it working fine, the whole “treeState world” seems a bit too much for me to grasp at the moment…but I’m getting there.

I have tried using a slider, as someone else also has suggested in this forum, making it invisible and place it on top of the label to detect the mouse drag. The (silly?) problem I got was I couldn’t manage to make the slider working AND being invisible at the same time.

The more I understand the more I’ll change my approach but so far what I have is a custom Component that inherits from the Label class. This component is listening to an external slider which in return listens to the label and controls the same textBoxLabel controlled by the mouse drag. I have added a pointer to the AudioProcessorParameter connected to that slider and called begin and endGesture to the on that parameter within the mouseDrag method.
Would this make it more reliable in your opinion?
I’ll surely look into NormalisedRange as well. :grinning:

9

Glad that it made sense to you.
I don’t know what problem there was with the invisibility, probably because it won’t get mouse events.
You can probably play with the SliderLayout to give the knob a zero size but keep the Label having the full bounds. I didn’t try that.

For the label approach, the easiest is to override mouseDown to call beginChangeGesture() and mouseUp calling endChangeGesture(). This will allow the “latch” behaviour that consoles usually have.

10

brilliant! I’m going to do that right now…

11

Hello, can you please let me know how to add click on Label. i want to open the dialog when click on label text. label texxt is non editable. i want to develop an app for android and iOS only. Please help

12

Late, but I just came here with the same question. Use mouseUp to check for mouse click release and implement your functionality there.