Thoughts on sliders

My thoughts would definitely be to pre-render (cache) the shadow texture, you'll get limited returns from trying to optimise the blurring code.

Since the shadow's a nice soft shape, it'll tolerate stretching during a resize operation without looking awful, and then you can regenerate the cached version at your leisure once the resize operation has completed. 

For extra poshness I'd blend from the old version to the new one over a few frames to avoid a visual pop - the human eye is much more sensitive to discontinuities than it is to blurred edges.

If anyone fancies a programming puzzle, it'd be fun to try writing an algorithm that takes a blurred alpha-map and calculates a minimal set of polygons + gradients that approximate it to within a given tolerence.. That'd be an interesting challenge!

Ah man, reminds me of an offline tool I once wrote for a games application - take a 2D image generated by a level designer, and convert it to a simplified 2D polygonal mesh suitable for the AI algorithms to use for navigation. 

It started off simple (like all software!) but dealing with the segmentation of multiple colours - 'nested holes' and flipped winding orders - aargh!  It's one of those algorithms where no matter how considered your approach and how careful you are in implementation, there's always an edge case out to get you!

Libraries like this are helpful :

..related application note :




I'm definitely going to come back to this.  I think you are right doing some caching is the way forward.  There's a lot that can be cached here really - the differences between a knob pointing left and one pointing right aren't really that great :) 

However, if slightly slow to resize, they are starting to look quite hot I think!  I'm managed to shoe-horn them into a LookAndFeel class and a component now. 

That's looking pretty tasty!

Yeah.  I think those are done!  Just need to do the buttons now :) 

Well, caching the shadows took about 15 lines of code.   There's a beautiful generic caching function in there waiting to get out. 

  • CPU usage down to a quarter.
  • Blur function relegated off the profiler charts. 
  • Resizing a more glorious user experience. 

I might have another sip of tea to celebrate.

Now to find out why it was so keen on redrawing those knobs anyway, even when they weren't moving.

Hey Jim, is this still waiting to get out?! :grimacing: Or would you be willing to share some pointers on what approach you settled for?

Oh - which bit do you want to know about?

Final product ended up looking like this (better photo here maybe

I can’t remember why I gave up on the blurred shadows, might have been a graphic design decision rather than a CPU one.

The dark knobs and buttons are entirely software rendered, no PNG or even SVG in there.


Looks fantastic Jim!! Mine’s not all that fancy but the DropShdows are stacking up and preventing a smooth interface, so was interested in your cache solution!


Ah - well I think it was just rendering it to a bitmap and then drawing that when required. Though in the end, as you can see, i just ended up with a non-blurred solution using a path which was then fast to draw. I can see if the old cached bitmap code is there still tho…

1 Like

Thanks Jim, I did something along those lines!

Created an image of the DropShadow, added it to a cache and then paint it using drawImage and redraw it only when the slider’s size has been changed

On another note I found that what was really creating the CPU-overhead was the fact that I had not set my cpu-consuming widget (which is constantly repainting) to opaque so… well yeah, that helped! So thanks to Jules for mentioning this in a thread dated from 2005!

Yeah - it’d almost be better if opaque was the default and you had to make a choice to set it non-opaque. At least it’s obvious when you’ve made that mistake :wink:

1 Like

Looks amazing. Did you draw them entirely with Juce, or did you use any third party tools?

Just in JUCE. A few layers of radial fills and circles really … the trick was to rough it up in photoshop to get an idea of the steps, though maybe now this would be easy enough to do by just using some instant feedback in projucer.


Really cool stuff @jimc

I keep meaning to take some time to work on my JUCE drawing skills.

Would be cool to see a few more tutorials from the JUCE team or the community demonstrating some more advanced drawing techniques. Like the use of radial fills etc.

Maybe it’s time to brush up on my adobe skills and see if I can translate.

1 Like

Let me see if i can do a simple demo version of those knobs if I get a minute, one that isn’t tied into much other complexity. Would be fun to do a whole 3d look and feel class if i had time … but unlikely :wink:


HI there,
your screenshots have been really inspirational! - here’s some first shots at making my own knobs.

Shadow is still a few circles drawn with a very translucent color (see this post Efficients Drop shadows for non opaque components)
Next step will be to have a path with the shape of the shadow and cache that, scaling it as needed in lookandfeel::drawrotaryslider

Thanks again for the inspiration !!!


Those are looking great!!

All entirely in JUCE? Amazing. I’m a student, this blows me away. Leagues beyond what I know. I can’t wait to be able to hopefully make interfaces anywhere near this good.