Amount of work required to create custom controls


#1

I was wondering, how much work is required to create a custom control? Specifically I need custom dials/knobs, and sliders.

Are there any guides for how to create/animate these for a JUCE application?


#2

Mostly it’s pretty easy.

If the existing widgets do what you want functionally, you should just make your own look and feel class. Just copy and rename an existing lookandfeel and include it in your project, and then you change the drawing code you want.

Here’s an example, basically the most simple slider case. I haven’t used it in a while, I think it’s broken, but it should give you an idea.

[code]void MyLookAndFeel::drawLinearSlider (Graphics& g,
int x, int y,
int w, int h,
float sliderPos,
float minSliderPos,
float maxSliderPos,
const Slider::SliderStyle style,
Slider& slider)
{

g.setColour (slider.findColour (Slider::backgroundColourId));
g.fillRect(x,y,w,h);

const Colour fill (slider.findColour (Slider::thumbColourId));

g.setColour(fill);
g.drawRect(x,y,w,h);

int s = roundFloatToInt(sliderPos) - 6;

if (style == Slider::LinearHorizontal)
{
	g.fillRect(x, y + 2, s, h-4);
}
else if (style == Slider::LinearVertical)
{
	g.fillRect(x + 2, y + s, w - 4, h - s - 2);
}

}[/code]

As for custom components, with JUCE’s object model, making a widget is pretty much the same procedure as… well doing most anything visible. I.E it’s all “Components”.

Here’s another example. A button derived from the Label component. Can’t remember why I made it exactly, it actually looks pretty useless, but again, it should give you an idea.

[code]class QuickBtn : public Label, public ChangeBroadcaster
{

private:
Colour t;
Colour f;
Colour bg;

public:

bool downFire;

QuickBtn(String txt ) : Label("","brk")
{
	downFire = false;
	this->setText(txt, false);
}

~QuickBtn()
{

}

void setAll3Colours(Colour frame, Colour text, Colour background)
{	
	t = text;
	f = frame;
	bg = background;

	setColour(Label::backgroundColourId, background);
	setColour(Label::textColourId, text);
	setColour(Label::outlineColourId, frame);
}

void mouseDown (const MouseEvent&)
{
	setColour(Label::backgroundColourId, t);
	setColour(Label::textColourId, bg);

	if( this->downFire )
	{
		this->sendChangeMessage(this);
	}
}

void mouseUp (const MouseEvent&)
{
	setColour(Label::backgroundColourId, bg);
	setColour(Label::textColourId, t);

	if( this->isMouseOver() && !this->downFire)
	{
		this->sendChangeMessage(this);
	}
}


void mouseDrag(const MouseEvent&)
{
	if( !this->isMouseOver() )
	{
		setColour(Label::backgroundColourId, bg);
		setColour(Label::textColourId, t);
	}
}

};[/code]