Modding Rotary Slider

General JUCE discussion
1

I’d like to make it so that the blue “gauge” part of the rotary slider always begins at zero. So that when I make a slider that goes from -1.0 to 1.0 a completely white gague indicates that the slider is at zero.

How can I acheive this?

1 Like
2

You’d need to give it a custom LookAndFeel, copying and modding the code that draws the slider.

3

Should I keep all the other stuff or is re-implementing drawRotarySlider enough? It should default to original methods if I don’t implement them. Right?

4

Yes, I’d have thought juce doing that method will be enough. You’ll soon notice if there’s other things that you need to change.

5

For Posterity:

void MyLookAndFeel::drawRotarySlider (Graphics& g,
                                    int x, int y,
                                    int width, int height,
                                    float sliderPos,
                                    const float rotaryStartAngle,
                                    const float rotaryEndAngle,
                                    Slider& slider){


     const float radius = jmin (width / 2, height / 2) - 2.0f;
     const float centreX = x + width * 0.5f;
     const float centreY = y + height * 0.5f;
     const float rx = centreX - radius;
     const float ry = centreY - radius;
     const float rw = radius * 2.0f;
     const float angle = rotaryStartAngle + sliderPos * (rotaryEndAngle - rotaryStartAngle);
     const bool isMouseOver = slider.isMouseOverOrDragging() && slider.isEnabled();

     const float zeroPos = rotaryStartAngle + fabs((float)slider.getMinimum() / ((float)slider.getMaximum() - (float)slider.getMinimum())) * (rotaryEndAngle - rotaryStartAngle); //<---Changed


    if (radius > 12.0f)
    {
        if (slider.isEnabled()){
            g.setColour (Colours::red.withAlpha (isMouseOver ? 0.5f : 0.35f));
        }else{
            g.setColour (Colours::grey.withAlpha (0.5f));
        }

        const float thickness = 0.7f;

        Path filledArc;
        filledArc.addPieSegment (rx, ry, rw, rw, zeroPos, angle, thickness);//<---Changed

        g.fillPath (filledArc);

        if (thickness > 0)
        {
            const float innerRadius = radius * 0.2f;
            Path p;
            p.addTriangle (-innerRadius, 0.0f,
                        0.0f, -radius * thickness * 1.1f,
                        innerRadius, 0.0f);

            p.addEllipse (-innerRadius, -innerRadius, innerRadius * 2.0f, innerRadius * 2.0f);

            g.fillPath (p, AffineTransform::rotation (angle).translated (centreX, centreY));
        }

        g.setColour (Colours::black.withAlpha (0.4f));
        Path outlineArc;
        outlineArc.addPieSegment (rx, ry, rw, rw, rotaryStartAngle, rotaryEndAngle, thickness);
        outlineArc.closeSubPath();

        g.strokePath (outlineArc, PathStrokeType (slider.isEnabled() ? (isMouseOver ? 2.0f : 1.2f) : 0.3f));
    }
    else
    {
        Path p;
        p.addEllipse (-0.4f * rw, -0.4f * rw, rw * 0.8f, rw * 0.8f);
        PathStrokeType (rw * 0.1f).createStrokedPath (p, p);

        p.addLineSegment (0.0f, 0.0f, 0.0f, -radius, rw * 0.2f);

        if (slider.isEnabled())
            g.setColour (Colours::blue.withAlpha (isMouseOver ? 0.5f : 0.35f));
        else
            g.setColour (Colours::grey.withAlpha (0.5f));

        g.fillPath (p, AffineTransform::rotation (angle).translated (centreX, centreY));
    }
}
6