I’m slowly getting everything ready to get espresso served here off the ground. Part of that has been talking to a couple of graphic designers about site design and icon design. After all, I’m a programmer and I can’t draw for the life of me. Photoshop to me is an app that just puts loads of stuff all over my system.
Hopefully sometime in August things will start to take shape.
Apple introduced new scrollers in iTunes 7 and then moved on to give us the HUD, which many developers want their own scrollers for too. In Leopard, many of us thought that these would come in a nice, shiny box; but as they didn’t we’re all forced to roll our own. The common method is to draw all the components in Photoshop and then make a composite image when subclassing, but now with NSGradient and some nice additions to NSBezierPath all these have become quite easy to do, even for those with little artistic ability.
(More …)
Hi Jonathan,
I *think* I know what you mean about it being out by a pixel, is it on the right-hand side of the vertical scroller? If it is then you see it in apps that don’t have a 1-pixel border around their scroll views, so the edge of the scroller is exactly aligned with the edge of the window. You can then see the effect this has when you move the window so it is directly above the desktop after being above another application’s window (if that makes sense). If that’s not what you mean then et me know and I’ll take a look.
As for Scribbler, I’m working on a set of project templates and document templates to help get people started, but these will grow as they’re added by users. If you have your own, you won’t have to send it to me for inclusion in the app either, just put it in the Scribbler directory in ~/Library/Application Support and Scribbler will find it. If you have any really good templates then please send them along!
As for the TeX stack, the only part that doesn’t work if there’s no valid distro on the system is typesetting itself. For those that download the app without TeX installed, I’m going to point them to the most current MacTeX distro for simplicity, possibly downloading it and mounting the disk image it for them so all they have to do is install. If I’ve misunderstood your question then please forgive me!
This is awesome. I especially appreciate the fact that you aren’t using images. I’ve been taking a lot of extra time to draw out my own interfaces lately. I just have one problem now. I realized it after I threw your scroll bars in. My contained table view still has Aqua headers. Know of any other Classes for taking care of that or do i need to get to work? Also I’m planning on modifying this to also accommodate the black/grey scroll bars that you also see in iTunes in addition to others like iMovie. Want me to send you my changes when/if I finish it?
Hi Jonathan,
Glad you like them, I’m afraid looking back on them now they need a bit of a redesign! I’ve just been thinking of using black ones myself so, yeah, send them along when you’re happy with them. I’d appreciate it.
As for the headers, you just have to subclass NSTableHeaderCell. You’ll have to draw both the background and the text but read the 10.5 AppKit release notes, they give you good pointers on using NSBackgroundStyle in cells for the embossed text look.
I’ll see what I dig up in my own source though as I’m sure I did this a while back.
Thanks Jonathan,
I’ve been working on finessing your scroll bars in addition to adding the dark styled ones. There are still at least a couple things i need to do/improve still. You can see them implemented in my app here – http://www.badeen.com/fastcapture1.png. When I’m done I’ll send it your way. I did have one question though. Do you know how I can go about drawing my own resize corner or just get it to display transparently in the lower right. I essentially would like to get it to look more like it does when there is no scroll bar – http://www.badeen.com/fastcapture2.png
Jonathan hello.
Thanks great example, I wish I understand it better, im a novice ( with some experience already) and I thought this goal wold be easier than I say in the example.. Im trying to implement something similar in my application, but definitely you have gave me a good idea on how to achieve it.
Must read again to understand the whole of what you are doing in the example… :S
G.
Hey Jonathan.
Thanks for the amazing NSScrollerView subclass. I’m currently working on a project made to look similar to the itunes store. http://www.publictunes.com/screenshots/pic1.png the vertical scroller works like a charm. Unfortunately the horizontal one appears to have some fundamental drawing errors. I have looked at the code and had trouble grasping how the curves were made that cut into the increment decrement arrows for the slider tracks. If you could please explain this or fix the class it would be much appreciated.
-Mike
Oh i forgot. Here is a blow up of the horizontal slider problems. http://www.publictunes.com/screenshots/pic2.png
I was able to fix this by putting this in the arrowsSetting: method:
ESScrollerArrowsSetting setting;
if (self.isVertical) {
if (NSMaxY([self rectForPart:NSScrollerDecrementLine]) == NSMinY([self rectForPart:NSScrollerIncrementLine]))
setting = ESScrollerArrowsTogether;
else
setting = ESScrollerArrowsApart;
}
else {
if (NSMaxX([self rectForPart:NSScrollerDecrementLine]) == NSMinX([self rectForPart:NSScrollerIncrementLine]))
setting = ESScrollerArrowsTogether;
else
setting = ESScrollerArrowsApart;
}
return setting;
Sorry about that. I must have got horribly distracted. I’ll update the code soon! It need s a good looking-at.
@bryscomat thank you. This solves it for me as well.
@Jonathan Dann, thank you for putting this awesome project together. Works out of the box.
Hi Jonathan,
Thank you for the great post and the code.
What license is the code released under? I looked through the project folder but couldn’t find any.
Thank you in advance!
Oh yeah, consider it BSD If you want to credit me feel free, but you don’t have to.
I need to clean up that code. It’s embarrassingly bad now!
Great example! Any pointers on incorporating this into a webview? I know the NSScrollView is dynamic and Im not sure how took over it.
Hi Jonathan,
I have tried to download the code for scrollers on the site you point to. But unless I am a paid user, I am unable to download the files. It is constantly busy with too many users.
Is there any other way to get access to these files?
Thanks,
Dan
I was able to fix this by putting this in the arrowsSetting: method:
ESScrollerArrowsSetting setting;
if (self.isVertical) {
if (NSMaxY([self rectForPart:NSScrollerDecrementLine]) == NSMinY([self rectForPart:NSScrollerIncrementLine]))
setting = ESScrollerArrowsTogether;
elss
setting = ESScrollerA4rowsApart;
}
else {
if (NSMaxX([self rectForPart:NSScrollerDecrementLine]) == NSMinX([self rectForPart:NSScrollerIncrementLine]))
setting = ESScrollrrArrowsTogether;
else
setting = ESScrollerArrowsApart;
}
return setting;;
Thanks for your scroller! I managed to get it to work with the lame DoubleBoth style, and wanted to send you the changes. (There was also a bug in isActive.) I couldn’t find a contact e-mail however.
Is there anyway to get these scroll bars working on a WebView? Not sure how to assign the ESScrollView to the WebView ScrollView as you can’t access that in IB. Any ideas as I am quite new to Cocoa?
Fix to a tiny glitch in the horizontal scrollbar, see
http://www.flickr.com/photos/12739382@N04/5093440279/
In the method: -drawDecrementButtonWithHighlight:
somewhere below the “draw the outline” comment
Locate the line:
[outline appendBezierPathWithArcWithCenter:NSMakePoint(NSMinX(buttonRect) - NSHeight(buttonRect)/2, NSMidY(buttonRect)) radius:NSHeight(buttonRect)/2 startAngle:270 endAngle:90];
Change it to:
[outline appendBezierPathWithArcWithCenter:NSMakePoint(NSMinX(buttonRect) - NSWidth(buttonRect)/2, NSMidY(buttonRect)) radius:NSHeight(buttonRect)/2 startAngle:270 endAngle:90];
Thank you Jonathan for sharing such a nice piece of code.
Thanks to all of you for your fixes 
I will finally put this and everything else on github in the next week and bring it all up to date.
Awesome. Looking forward to see a fully patched version 
I was just wondering if this ever made it up on github? I noticed that the RapidShare download doesn’t seem to be working. Thanks!
Hi all,
Just thought I’d let you know that you can now reach this website at http://www.espresso-served-here.com. I’m going to slowly be making changes to the site as I develop the brand for my software company. All previous links around the web to http://jonathandann.wordpress.com will still work though.
Jon
Hi Jonathan,
Interesting post and project. It was funny to run it, because it looks like it’s out by a pixel, but then, looking at iTunes, that now looks wrong to me. Thanks for ruining iTunes for me!
Anyway, Scribbler sounds like a great idea. I use a really cut down selection of styles to give my documents some regularity in OpenOffice. When using other peoples documents in Word, the generally messed up styles drives me nuts. Will Scribbler have a set of predefined document templates? It seems like the nice TeX output would be great for people who like documents to be formatted in a standard way.
How are you planning to ensure that a TeX stack exists and is valid on the destination Mac?
Good luck with being an ISV!