macOS White on black progress bar Cocoa

[Alexandre 24]

Hey guys
I was trying out ScreenFlow when I found a progress bar when exporting.

I was wondering if one of you knew where I could find it for use in my own software.
I found it in other software, but I don't know where.
Thank you for your help!

(you should see it in the attachement)

 

[kainjow]

It's not hard to make one yourself. You only have to subclass NSProgressIndicator and override the drawRect: method. It's just a stroked rounded rect with a smaller filled one inside it.

 

[Alexandre 24]

It's not hard to make one yourself. You only have to subclass NSProgressIndicator and override the drawRect: method. It's just a stroked rounded rect with a smaller filled one inside it.

Thanks for the quick reply.

The thing is I really am quite rubish at creating images / paths etc.
I have litterally no idea on where to start, but I wanted to know if somebody could show me an example or just a link with a tutorial on doing it.
But thanks anyway

 

[kainjow]

I'd advise you not to make them images in another program. Instead just draw it in code. You can use NSBezierPath and its bezierPathWithRoundedRect:xRadius:yRadius: method to get a rounded rect. You just need to calculate the rects.

I can whip up an example later if you get stuck.

 

[Alexandre 24]

I'd advise you not to make them images in another program. Instead just draw it in code. You can use NSBezierPath and its bezierPathWithRoundedRect:xRadius:yRadius: method to get a rounded rect. You just need to calculate the rects.

I can whip up an example later if you get stuck.

I'm gonna give it a try it, but I would be glad if you could give me n example
Thanks

I'm gonna give it a try it, but I would be glad if you could give me n example
Thanks

I gave it a try but it seems I really have no understanding on it. Could you give me an example please?
Thank you in advance

 

[kainjow]

Here's the drawRect: method to make it work with an NSProgressIndicator sublcass. Now you have to figure out how to put it all together

- (void)drawRect:(NSRect)r
{	
	NSRect rect = NSInsetRect([self bounds], 1.0, 1.0);
	CGFloat radius = rect.size.height / 2;
	NSBezierPath *bz = [NSBezierPath bezierPathWithRoundedRect:rect xRadius:radius yRadius:radius];
	[bz setLineWidth:2.0];
	[[NSColor whiteColor] set];
	[bz stroke];
	
	rect = NSInsetRect(rect, 2.0, 2.0);
	radius = rect.size.height / 2;
	bz = [NSBezierPath bezierPathWithRoundedRect:rect xRadius:radius yRadius:radius];
	[bz setLineWidth:1.0];
	[bz addClip];
	rect.size.width = floor(rect.size.width * ([self doubleValue] / [self maxValue]));
	NSRectFill(rect);
}

 

[Alexandre 24]

Thank you very much works like a charm!

 

[unknowndomain]

Hey I just found your code example on Google, but I am having trouble knowing how to modify it for the indeterminate status, which might look like this:

( / / / / / / / )

... I couldn't find an image from the iPhone of this.


Any advice would be appreciated.

 

[shieladixon]

Thank you

I'd like to thank kainjow for the code above, it saved me a chunk of time today. To give something back to the forum, I'd like to post my slightly modified version. It solves a 'doclip' error which was reported in the console every time the progress bar was drawn (the fix for this might have been simple but I couldn't figure it out) and also gives a rounded end to the solid bit of the indicator, which I like.

NSRect rect = NSInsetRect([self bounds], 1.0, 1.0);
CGFloat radius = rect.size.height / 2;
NSBezierPath *bz = [NSBezierPath bezierPathWithRoundedRect:rect xRadius:radius yRadius:radius];
[bz setLineWidth:1.5];
[[NSColor whiteColor] set];
[bz stroke];

rect = NSInsetRect(rect, 2.0, 2.0);
rect.size.width = floor(rect.size.width * ([self doubleValue] / [self maxValue]));
radius = rect.size.height / 2;
bz = [NSBezierPath bezierPathWithRoundedRect:rect xRadius:radius yRadius:radius];
[bz setLineWidth:1.5];
[[NSColor colorWithDeviceWhite:0.5 alpha:transparency] set];
[bz fill];