Q&A: Simple AU slider class

Q&A: Simple AU slider class

sl_compare_sliders

After the audioUnit knob replacement class post, I have received a few questions about replacing the slider decorations. I thought that the simplest way to answer this would just be a quick example, so here it is:

Luckily, a linear slider can be done much more simply than the circular slider that we worked with a few posts ago because we have no affine transformation or rotation stops to worry about, so we can just override the drawing methods and replace the assets ‘somewhat’ normally. I say ‘somewhat’ because you can’t just drag and drop any OS X sliderCell class into your AudioUnit project and have it function because of the bundle-in-bundle structure: the class would function, but the images would not load (which is the very problem that a few people asked about).

Fortunately, the solution is just a few additional steps, and while there are several ways to do this, I tried to stick to the simplest path (and the one that stuck closest to Apple’s example files… so you can blame them if it breaks in the future).

(This is working code, so just create new Obj-C header and source files named “MY_Slider” and copy/paste the following:)

–In our Header file “MY_Slider.h”:

1) Make NSImage pointers for each image in our NSSliderCell subclass.

// MY_Slider.h header
#import <Cocoa/Cocoa.h> 

@interface MY_SliderCell : NSSliderCell
{
    // pointers to our image resources
    NSImage *knob;
    NSImage *track;
}

@end

–In our source file “MY_Slider.m”:

2) Create a path to our image resource residing in our class’ bundle
3) Init our NSImage pointer with the image resource at our path
4) Override our NSSliderCell’s drawing methods and draw our image in it’s rect.

// MY_Slider.m source file
#import "MY_Slider.h"

@implementation MY_SliderCell

// Grab paths to slider and knob img Resources from our bundle, and assign them to an NSImage
- (void)awakeFromNib
{
    NSString *trackPath = [[NSBundle bundleForClass: [MY_SliderCell class]] pathForResource:@"defaultSliderTrack" ofType:@"png"];
    track = [[NSImage alloc] initWithContentsOfFile:trackPath];
    
    NSString *knobPath = [[NSBundle bundleForClass: [MY_SliderCell class]] pathForResource:@"defaultSliderKnob" ofType:@"png"];
    knob = [[NSImage alloc] initWithContentsOfFile:knobPath];
}


// Draw Slider Track
- (void)drawBarInside:(NSRect)aRect flipped:(BOOL)flipped
{
    [track drawInRect:aRect fromRect:NSZeroRect operation:NSCompositeSourceOver fraction:1.0 respectFlipped:YES hints:NULL];
}


// Draw the knob
 - (void)drawKnob:(NSRect)knobRect
{
     [knob drawInRect:knobRect fromRect:NSZeroRect operation:NSCompositeSourceOver fraction:1.0 respectFlipped:YES hints:NULL];
}

@end

This can also be added to existing slider templates of course.

NOTE: this is close to the bare minimum code required to decorate an AudioUnit slider with images. Therefore, any SPECIAL behavior will have to be added since the class will respect all other default behavior for size, tick marks, indexing, min/max, etc. (For example: this code does not respect our knob and slider IMAGE sizes, but rather OSX’s sizes — i.e. regular, small, mini — as set in XCode’s cell size inspector utility pane — right side of the window… the picture of the ruler at the top.)

Now we just have to Drag a slider to our view and set assign our class to it’s cell:

sl_set_cell_class

So using just this class — plus some images that I snipped out of a photo of an old radio shack mixer I had lying around–  dropped into Apple’s “MyGreatAUEffectWithCocoaUI” example (oh, and an image well with a grey background pic), here is the resulting decorated vertical slider:

sl_final_slider

That’s it! Happy coding.

(This code was tested in both Xcode 6.4 and 7.0, using the 10.9 and 10.10 SDKs and a target OS version of 10.6)

Advertisements

About alexkenis

Guitarist, philosopher, tinkerer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: