White on black progress bar Cocoa

Discussion in 'Mac Programming' started by Alexandre 24, Aug 26, 2009.

  1. Alexandre 24 macrumors newbie

    Joined:
    Jan 12, 2008
    #1
    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)
     

    Attached Files:

  2. kainjow Moderator emeritus

    kainjow

    Joined:
    Jun 15, 2000
    #2
    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.
     
  3. Alexandre 24 thread starter macrumors newbie

    Joined:
    Jan 12, 2008
    #3
    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
     
  4. kainjow Moderator emeritus

    kainjow

    Joined:
    Jun 15, 2000
    #4
    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.
     
  5. Alexandre 24 thread starter macrumors newbie

    Joined:
    Jan 12, 2008
    #5
    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
     
  6. kainjow Moderator emeritus

    kainjow

    Joined:
    Jun 15, 2000
    #6
    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 :)

    Code:
    - (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);
    }
     
  7. Alexandre 24 thread starter macrumors newbie

    Joined:
    Jan 12, 2008
  8. unknowndomain macrumors newbie

    Joined:
    Mar 3, 2010
    #8
    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.
     
  9. shieladixon macrumors newbie

    Joined:
    May 29, 2006
    #9
    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.

    Code:
    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];
     

Share This Page