Vector graphics gui's and knob/slider design

Hi Juce peeps, 


After many hours of tearing my heair out with obscure Xcode issues and DSP complexities I have finally manages to get a working wavetable synth together in AU format with ADSR envelopes working, a filter and a couple of other goodies which I will continue to add to. 


Brilliant.......ah my gui looks like something out of a Fisher Price advert. 


Does anyone have any advice for some basic GUI design that I can follow as a newbie (any resources etc) ? 


Specifically I am looking to alter the appearance of my JUCE sliders/rotary knobs to start with. I think I am starting to get a relativley good idea of how the Look and Feel classes work and setting look and feel's for individual components. 


My real question though is in regards to knob states for a rotary slider component.

I would like to go down the Vector / SVG approach as I have some experience with Adobe Illustrator and the like and would prefer to draw up my own components for use in JUCE. Unforunatley coding these from scratch or using something like OPEN GL is simply beyond my abilities at the moment. 

I have considered using knobman etc but would really like to know if anyone can give me some advice on importing a Vector based component and how I might go about setting up the knob states as my AI designed knob is roated in the GUI  ? My current code for my rotary sliders uses the standard JUCE slider component and I would like to remain as true to this as possible with the exception of the actual asthetic.  

Is the only/best way to do this by using a film strip approach ? (similiar to the knob man approaches I have seen discussed in the forum) or can people suggest other methods they have used ? 


I would like to go for a 3D design with a bit of shadow etc but am open to suggestions. 


Many thanks.



You can load SVG's files directly onto components, but be forewarned that only basic SVG files will load properly. Certain extended features of the SVG format will not render correctly, but for the most part it works Ok. Drawing the images yourself in your paint routine really isn't all that complex. Look at how Jule's does it for his sliders. There is not much too it. I've never used any kind of film strip mechanism. I much prefer the look of GUI controls that are drawn directly. 

Hi Rory, 


Thanks alot for your reply, much appreciated. 


So in your opinon then would you always go for drawing the images in the paint routine over using an external design programme i.e Illustrator ? 


Would you say I'll get the best results using that method ? 



Hi Josh,

it's possible to directly import svg's and use them with Juce.

But I recommend to work with Paths, I find it more flexible:
1. Use Illustrator (or Inkscape) and design your awesome UI element.
2. Group your elements together to be included in a single path (or in multiple, as you prefer).
3. Export to svg.
4. Open the svg in a text editor and find the path(s) section(s).
5. Use the Introjucer (Tools menu) to convert the svg path to a Juce::Path.
6. Copy paste that into your source file.

( )


You might also like

1 Like

Hi Samuel. 


Thanks alot, 


I think your approach is the one I will take for the moment as I'm much more comfortable designing in Illustrator. 


Does anyone have an example of using the converted SVG path/paths to then apply to the drawrotaryslider function ? I'm assuming that is the correct approach to use ? 

Does anything need to be modified in regards to the different states of rotation etc ? 





Just to avoid any further responses, 


I've managed to get the SVG paths working wonderfully and all is correct with the drawrotaryslider function and rotarytransform. 


Thanks alot !

Would you mind sharing the solution you came up with? I would very much appreciate it, and in sure others reading this down the road would too.

Hey Jordan,


Yeah no problem. I'm a little stacked up with work at the moment but i'll put something together in the next couple days to send you / post on the forum and explain what I went for.




Did you ever figure this out?? Or if anybody else has done this, I’d be interested to see. This is exactly what I’m trying to do. If so, could you share how to integrate a path into a Slider?

p.s. I’m sorry if I resurrected a dead thread or broke forum etiquette somehow, this is the first forum post I’ve ever made (on any forum)!