Skinning the Slider / Replacing knob and slider track with PNGs

Just because you’re using vector does not mean, that you design must be flat:

The Design was done in Adobe Illustrator, exported to svg and then re-constructed dynamically in my look and feel class. It’s quite involved - but well worth it in my opinion. Now I have realistic looking knobs that can be used at any size.

EDIT: And as an added bonus, it’s not to hard to export screenshots to PDF for inclusion in your user manuals - this way even your screenshots are searchable and look beautiful in all sizes :slight_smile:


PixelPacker : Super Thanks for your input, and your graphics look excellent! If your code is not proprietary, I’d very much like to see what you are doing and use any classes you may have developed, If it’s somewhere “in between” be happy to know the price.

1 Like

It’s not only proprietary, but also messy :slight_smile:

What I did was to auto.generate a c++ class from the SVG file that contains the definitions for all the paths and gradients and is able to draw the whole thing. Then I split the draw method up into different parts (draw_knob_scale(), draw_knob_lower(), draw_knob_handle()) and modified them so that rotation is applied correctly. For example the shape of the knob rotates, while the highlight-gradient stays fixed.

If I had to do it again (and I probably will at some point), I’d try to use Drawable::createFromSVG() and then modify the resulting hierarchy of Drawables before calling paint() on it.

The key to success here is a clean design in illustrator that does not use additive blending and is structurally simple.

If you’re interested I can ask the artist who did the design if he’s available.



Sure, if the artist is available, it would be nice to have

that option.

Thanks for the input!


PS: Seems to me like there might be room for a

“hybrid” where the fixed gradient was a raster graphics

with limited opacity… but, then you Loose the Beauty

of the Vector Graphics scalability….

Be nice to see an official JUCE version along the lines

of what you implemented……

I don’t understand what you mean by hybrid. What I meant is the following: if you rotate the knob, the gradient rotates with it. What I did is to rotate the gradient in the opposite direction so that it stays fixed. So it’s still all vector.

Despite that: graphics with not much detail, like highlight gradients and drop shadows might just look fine when scaled up, as they are quite smooth to start with.

1 Like

Did you ever find the solution to displaying a PNG thumb?

1 Like

both links are dead

Howdy. I like your thorough questions. It appears this is an old post but based on your questions I would recommend you getting a c++ book. You want to understand what object oriented programming is about. specificaly, look into inheritance and subclassing. These are ways to take some code and extend it.

Im sure youve learned much since your post :slight_smile:

life saver

It’s an 8 year old post and predates the new form :stuck_out_tongue:

Search is your friend: