Hé,hé … no man, this is just à Look’n’Feel on the Juce ScrollBar in a Viewport.
Yes, the inspiration is from a old version of http://getsongbird.com/
The “iTunes-like” button are full vectorial allowing the resize of the bottom zone (from my own StretchableLayout classes), this is a smart static functions to do that :
//==============================================================================
#ifndef __TRANSPORT_BUTTONS_H__
#define __TRANSPORT_BUTTONS_H__
//==============================================================================
#define DRAWABLE_BUTTON_NORMAL 0
#define DRAWABLE_BUTTON_OVER 1
#define DRAWABLE_BUTTON_DOWN 2
//==============================================================================
#define TRANSPORT_BUTTON_PLAY 0
#define TRANSPORT_BUTTON_PAUSE 1
#define TRANSPORT_BUTTON_STOP 2
#define TRANSPORT_BUTTON_PREVIOUS 3
#define TRANSPORT_BUTTON_NEXT 4
//==============================================================================
static DrawablePath* getTransportSymbol (const int symbol)
{
DrawablePath* const drawable = new DrawablePath ();
Path path;
switch (symbol)
{
case TRANSPORT_BUTTON_PLAY:
{
path.addTriangle (0.0f, 0.0f, 1.0f, 0.5f, 0.0f, 1.0f);
path.applyTransform(path.getTransformToScaleToFit(0.35f, 0.33f, 0.37f, 0.37f, true, Justification::centred));
}
break;
case TRANSPORT_BUTTON_PAUSE:
{
path.addRectangle (0.0f, 0.0f, 0.33f, 1.0f);
path.addRectangle (0.66f, 0.0f, 0.33f, 1.0f);
path.applyTransform(path.getTransformToScaleToFit(0.33f, 0.33f, 0.37f, 0.37f, true, Justification::centred));
}
break;
case TRANSPORT_BUTTON_STOP:
{
path.addRectangle (0.0f, 0.0f, 1.0f, 1.0f);
path.applyTransform(path.getTransformToScaleToFit(0.0f, 0.0f, 1.0f, 1.0f, true, Justification::centred));
}
break;
case TRANSPORT_BUTTON_PREVIOUS:
{
path.addRectangle (0.0f, 0.0f, 0.2f, 1.0f);
path.addTriangle (0.2f, 0.5f, 0.6f, 0.0f, 0.6f, 1.0f);
path.addTriangle (0.6f, 0.5f, 1.0f, 0.0f, 1.0f, 1.0f);
path.applyTransform(path.getTransformToScaleToFit(0.29f, 0.36f, 0.41f, 0.32f, true, Justification::centred));
}
break;
case TRANSPORT_BUTTON_NEXT:
{
path.addTriangle (0.0f, 0.0f, 0.4f, 0.5f, 0.0f, 1.0f);
path.addTriangle (0.4f, 0.0f, 0.8f, 0.5f, 0.4f, 1.0f);
path.addRectangle (0.8f, 0.0f, 0.2f, 1.0f);
path.applyTransform(path.getTransformToScaleToFit(0.29f, 0.36f, 0.41f, 0.32f, true, Justification::centred));
}
break;
default:
break;
}
drawable->setPath (path);
//drawable->setOutline (1.0f, Colours::grey);
drawable->setSolidFill (Colours::black);
return drawable;
}
//==============================================================================
static DrawablePath* getGradientCircle (const float x, const float y, const float w, const float h,
const Colour& c1, const Colour& c2, const bool radius)
{
Path path;
path.addEllipse (x, y, w, h);
DrawablePath* const back = new DrawablePath ();
back->setPath (path);
if (radius)
{
ColourGradient grad (c2, x+(w/2), y+(h/2), c1, 0, 0, true);
grad.addColour (0.56f, c2);
back->setFillBrush (GradientBrush (grad));
}
else
back->setFillBrush (GradientBrush (c1, x, y, c2, x, h, false));
return back;
}
//==============================================================================
static DrawableComposite* getDrawableButton (const int type, const int mode)
{
float x,y,w,h;
float p,d;
x = 0.00f;
y = 0.00f;
w = 1.00f;
h = 1.00f;
p = 0.025f;
d = p * 2;
Colour backc11, backc12, backc21, backc22;
Colour frontc1, frontc2, gradic1, gradic2;
if (mode == DRAWABLE_BUTTON_NORMAL)
{
backc11 = Colours::grey.withMultipliedAlpha (0.0f);
backc12 = Colours::grey.withMultipliedAlpha (0.75f);
backc21 = Colours::black.withMultipliedAlpha (0.25f);
backc22 = Colours::black.withMultipliedAlpha (0.65f);
frontc1 = Colour(252,252,252);
frontc2 = Colour(210,210,210).darker (0.5f);
gradic1 = Colours::white.withMultipliedAlpha (0.75f);
gradic2 = Colours::white.withMultipliedAlpha (0.0f);
}
else
if (mode == DRAWABLE_BUTTON_OVER)
{
backc11 = Colours::grey.withMultipliedAlpha (0.0f);
backc12 = Colours::grey.withMultipliedAlpha (0.75f);
backc21 = Colours::black.withMultipliedAlpha (0.25f);
backc22 = Colours::black.withMultipliedAlpha (0.65f);
frontc1 = Colour(252,252,252);
frontc2 = Colour(210,210,210);
gradic1 = Colours::white.withMultipliedAlpha (0.75f);
gradic2 = Colours::white.withMultipliedAlpha (0.0f);
}
else
{
backc11 = Colours::grey.withMultipliedAlpha (0.0f);
backc12 = Colours::grey.withMultipliedAlpha (0.75f);
backc21 = Colours::black.withMultipliedAlpha (0.25f);
backc22 = Colours::black.withMultipliedAlpha (0.65f);
frontc1 = Colours::darkgrey; //Colour(0x00000000);
frontc2 = Colours::grey; //Colour(0x00000000);
gradic1 = Colours::black.withMultipliedAlpha (0.75f);
gradic2 = Colours::white.withMultipliedAlpha (0.0f);
}
DrawableComposite* const composite = new DrawableComposite();
composite->insertDrawable (getGradientCircle (x, y, w, h, backc11, backc12, false));
composite->insertDrawable (getGradientCircle (x+p, y+p, w-d, h-d, backc21, backc22, false));
composite->insertDrawable (getGradientCircle (x+p+p, y+p+p, w-d-d, h-d-d, frontc1, frontc2, false));
composite->insertDrawable (getGradientCircle (x+p+p+(p/4), y+p+p+(p/4), w-d-d-(d/4), h-d-d-(d/4), gradic1, gradic2, true));
composite->insertDrawable (getTransportSymbol (type));
return composite;
}
//==============================================================================
static DrawableButton* getDrawableTransportButton (const int type, const String& buttonName)
{
DrawableButton *const button = new DrawableButton (buttonName, DrawableButton::ButtonStyle::ImageFitted);
DrawableComposite* normal = getDrawableButton (type, DRAWABLE_BUTTON_NORMAL);
DrawableComposite* over = getDrawableButton (type, DRAWABLE_BUTTON_OVER);
DrawableComposite* down = getDrawableButton (type, DRAWABLE_BUTTON_DOWN);
button->setImages (normal, over, down);
delete normal; delete over; delete down;
return button;
}
//==============================================================================
#endif
//==============================================================================
I know man, my previous answer is just a bad joke :lol:
Regards,
Max
