Skinning the Slider / Replacing knob and slider track with PNGs

[PixelPacker]

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

[lacy]

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.

[PixelPacker]

It’s not only proprietary, but also messy

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.

[lacy]

Beschultz,

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

that option.

Thanks for the input!

Lacy

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……

[PixelPacker]

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.

[TypeWrit3r]

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

[adbren]

both links are dead

[adbren]

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

[adbren]

@PixelPacker

fore calling paint() on it.

The key to success here is a clean design in ill

life saver

[andrewj]

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

Search is your friend:

How do you use filmstrip images for knobs?

Hi all: I am starting to have a bit of success with Juce. I have a frequency shifting echo running, and am currently working on porting some reverb VST code to Juce. I have been playing with adding my own lookAndFeel files, which is fun, but I would like to have more “realistic” controls than what I am currently able to generate out of the primitives. Is there an existing method for using filmstrip graphics for a rotary knob or slider, instead of drawing the knobs by creating and filling Path…

How to easily use png from knobman in my code?

Hi, I guess I asked too confused or global question in another thread so I want to cut the problem into pieces (even if I’d need to understand the thing more globally, even at this point) So, I have my png coming from Knobman, containing all the 32 states of my rotary knob. I want to integrate it in my Juce C++ audio plugin source. What is the workflow to do that, using the Jucer ?