Help with LookAndFeel

General JUCE discussion
1

OK. I want to make custom rotary sliders and buttons. I’ve searched through the forums, looked at example projects, and looked at the documentation. I understand that the LookAndFeel class will enable me to do this. I just have no idea how to do it. Can anyone walk me through this? Assume I know nothing, and feel free to talk to me like I’m a five year old, because right now, that’s exactly how I feel. :slight_smile:

2

+1 - this would be a good one for the wiki I think.

3

A rotary slider will be drawn with LookAndFeel::drawRotarySlider().

My approach to this is to make a new class that inherits LookAndFeel, take the function I want to change (e.g. copy and paste from LookAndFeel for a start), hope there are no calls to private member functions (which is mainly drawShinyButtonShape() in LookAndFeel) and modify it to my likings.
Not sure if this is the way Jules intended, but it seemed to work for me.

Of course you need to create an object of your LookAndFeel class and set it with setLookAndFeel()/LookAndFeel::setDefaultLookAndFeel().

Not tested, but it might look like this:

class MyLookAndFeel : public LookAndFeel
{
void drawRotarySlider (Graphics& g,
                                    int x, int y,
                                    int width, int height,
                                    float sliderPos,
                                    const float rotaryStartAngle,
                                    const float rotaryEndAngle,
                                    Slider& slider)
  {
  // Not usefull but it certainly looks different than the Juce rotary sliders
    g.fillAll(slider.findColour (Slider::rotarySliderFillColourId).withAlpha (sliderPos));
  }
};

class MyClass : public Component
{
public:
  MyClass()
  {
    addAndMakeVisible(&slider);
    slider.setSliderStyle(Slider::RotaryHorizontalDrag);
    setLookAnFeel(&myLookAndFeel);
  }
  void resized()
  {
    slider.setBounds(0,0,getWidth(), getHeight());
  }

private:
  Slider slider;
  MyLookAndFeel myLookAndFeel;
};

Chris

1 Like
4

Thanks Chris! (Sorry for the late reply.) I’ll give that a go.