If you’re interested in this sort of thing, you can download the Quicksilver Smoke Actions plugin here.

It uses Core Graphics and Core Image APIs for the transition effects to animate the window / view, which probably needs a minimum of Mac OS X Tiger. The full source code is available.

Standard Animation Effects

Quicksilver adds a category to the NSWindow class to allow for some pretty cool effects. The following should be pretty self-explanatory:

-(void)pulse:(id)sender;
-(void)flare:(id)sender;
-(void)shrink:(id)sender;
-(void)fold:(id)sender;

What these methods essentially mean, is that you can pulse, flare, shrink or fold any window you have a reference to in a plugin - whether it’s an interface or dialog or something completely different. Eg, just call [window shrink:nil] and watch that NSWindow shrink down to nothing, or [window flare:nil] to make it burst away!

Private Core Graphics Animations

Quicksilver also adds methods to use private Core Graphics transitions for instances of NSWindow or its subclasses. The main method is defined something like:

- (void) displayWithTransition:(CGSTransitionType)type option:(CGSTransitionOption)option duration:(float)duration;

The transitions you have access to are fade, zoom, reveal, slide, warp-fade, swap, warp-switch and the famous cube animation. You can use them on any window, for example:

[window displayWithTransition:CGSCube option:CGSLeft duration:1.3];

To learn more about Core Graphics transitions, see the Core Graphics ebook, or play around with the Core Transitions Framework.

Quicksilver’s CGSPrivate.h file is missing CGSFlip, but you can run the Dashboard-style flip effect by using the integer 9.

Quicksilver’s own animations

Alcor has used various techniques to write several very interesting animation effects into Quicksilver. You’ll be familiar with some of these (just watch the Primer interface activate and deactivate) but for whatever reason, many of these bizarre animations never made into an interface. They’re really very clever. I’ve played around with some of these:

• QSGrowEffect
• QSShrinkEffect
• QSSlightGrowEffect
• QSSlightShrinkEffect
• QSBingeEffect
• QSPurgeEffect
• QSExplodeEffect
• QSExtraExtraEffect
• QSShakeItLikeAPolaroidPictureEffect
• QSBoobTubeEffect
• QSVExpandEffect
• QSVillainousKryptonianEffect
• QSMMBlowEffect
• QSLudicrousSpeedEffect

Very interesting to look at, but how does one use these effects?

As we are dealing with Quicksilver, the solution is (as expected) very elegant. There are very simple methods to set a show, hide or execute effect for a window. These methods don’t even require an explanation; they’re so simple:

// Effect for showing the QSWindow
[window setShowEffect:[NSDictionary dictionaryWithObjectsAndKeys:@"QSSlightGrowEffect",@"transformFn",@"show",@"type",[NSNumber numberWithFloat:2.0],@"duration",nil]];

// Effect for hiding the QSWindow
[window setHideEffect:[NSDictionary dictionaryWithObjectsAndKeys:@"QSSlightShrinkEffect",@"transformFn",@"hide",@"type",[NSNumber numberWithFloat:2.0],@"duration",nil]];

// The "execute" effect is slightly different:
[window setWindowProperty:[NSDictionary dictionaryWithObjectsAndKeys:@"QSExplodeEffect",@"transformFn",@"hide",@"type",[NSNumber numberWithFloat:1.5],@"duration",nil] forKey:kQSWindowExecEffect];

Easy!

Sample plugin

I don’t dare mention all this private goodness and not even provide a demonstration. I’ve created an “Effects” plugin that will allow you to change the activate, deactivate and execute effects for any Quicksilver interface temporarily to play around with the effects. Just for good measure, I’ve also thrown in an action that lets you explore Core Graphics transitions as well.

This is not really a bona fide Quicksilver plugin; while it does let you have some fun with the effects, it’s not very user-friendly and doesn’t save your configuration. If these animations prove to be popular, then I’ll write a proper plugin to let you configure the effects more easily (probably through a preference pane) and remembers your settings.

Download Quicksilver Effects Plugin

Usage

Type in the name of the effect you want, then use “Set Hide Effect”, “Set Show Effect” or the “Set Exec Effect” action. The list of effects is given above; just type one in and run the relevant action.

To run a Core Graphics transition, type in the name of the transition, and use the “Run CoreGraphics Transition” action. You can optionally specify a direction in the indirect selector. (You can enter text in the direct and indirect selectors by pressing the period “.” key)

For example

• “QSBingeEffect” -> Set Show Effect
• “QSPurgeEffect” -> Set Hide Effect
• “QSExplodeEffect” -> Set Exec Effect
• “flip” -> Run CoreGraphics Transition
• “slide” -> Run CoreGraphics Transition -> “up”
• “swap” -> Run CoreGraphics Transition -> “inout”

Pictures show how to use the effects plugin. Actual animations are not shown.

Quicksilver has many such hidden surprises and nifty time-saving methods; it’s so well thought out and full of these amazing gems!

What do you think about these animations? Be sure to let me know if you’d like a proper, more user-friendly plugin to use these effects.

Writing an interface is very similar to writing an action, but the classes and Info.plist keys are somewhat different. Download the QS Interface Project Template. If you haven't previously downloaded a Quicksilver plugin template for Xcode, you'll have to do some basic setup.

Once you've installed the project template, you can build a new interface project "out-of-the-box" to make sure it works.

Unfortunately, development isn’t a linear process, so you’ll probably have to keep referring back to different sections of this article as you develop your interface.

Info.plist keys specifications

We tell Quicksilver that we're providing it an interface in the QSRegistration section of the Info.plist file, under QSCommandInterfaceControllers. By default, this should have been already added in when you created the project.

<key>QSRegistration</key>
<dict>
    <key>QSCommandInterfaceControllers</key>
    <dict>
        <key>testInterface</key>
        <string>testInterface</string>
    </dict>
    . . .
    . . .
</dict>

There is also a key called QSPreferencePanesTemplate inside QSRegistration. If you wish to have a preference pane for your plugin, rename the key to QSPreferencePanes and create the pref pane; otherwise you can leave it or delete it. As per the previous setting, these values should be filled in already by the project.

<key>QSRegistration</key>
<dict>
    . . .
    . . .
    <key>QSPreferencePanesTemplate</key>
    <dict>
        <key>testInterfacePrefPane</key>
        <dict>
            <key>class</key>
            <string>QSPreferencePane</string>
            <key>description</key>
            <string>testInterface interface preferences</string>
            <key>icon</key>
            <string></string>
            <key>name</key>
            <string>testInterface</string>
            <key>nibBundle</key>
            <string>com.blacktree.Quicksilver.testInterface</string>
            <key>nibName</key>
            <string>testInterfacePrefPane</string>
            <key>type</key>
            <string>hidden</string>
        </dict>
    </dict>
</dict>

If you're not having a preference pane, you should remove the PrefPane.nib file from your project when you're ready to release your plugin; it'll save bandwidth as well as reduce clutter.

You may not have an idea of the bindings you’ll be using yet (or maybe you do), but when you do use them, it's good practice to specify some default values for Quicksilver to use when the value hasn't been set by the user. These values go in the QSDefaults key.

<key>QSDefaultsTemplate</key>
<dict>
    <key>interface.bindingname</key>
    <string>value</string>
    <key>interface.bindingname2</key>
    <real>2.54328</real>
    <key>interface.bindingname2</key>
    <integer>4</integer>
</dict>

If you're using the "QSDefaults" key, make sure you’re renamed it from "QSDefaultsTemplate" to "QSDefaults".

Don’t forget there’s also a QSPlugin section in the Info.plist file that you should fill in.

Coding

That's the Info.plist file out of the way for now. It's time to start coding!

There are a few basic Quicksilver terms I hope you're familiar with:

Fig 1. The selectors are the used to pick the direct object, action, and indirect object respectively. Indirect object is often optional or not required.

Arrangement and positioning of the views using Interface Builder is left as an exercise for the reader. You don't want a lesson on how to drag and drop, do you?

Controlling the Controller

As mentioned before, the superclass (QSResizingInterfaceController) handles most of the work for you, therefore the majority of code you add will not be in new methods. Most of the code you write is (probably) going to be in existing methods that you will subclass.

Major methods

Here are the main methods you may decide to add extend:

- windowDidLoad

Anything that requires interaction with the interface window when it is first loaded. As the name implies, this method is called when the interface window is first loaded. All your setup with the window goes in this method. For example, setting the colors, adding bindings, and choosing animation effects for hiding / showing the interface etc. Please make sure you call [super windowDidLoad]; somewhere to let Quicksilver to do its setup as well.

This is not the place to add initialization code for the class itself. There's an -init method for that.

- maxIconSize

The maximum size allowed for icons in the interface selectors. Adjust this depending on how big or small your interface is. It's set at 128 x 128 by default, which should be fine in most circumstances.

- showMainWindow:

Any fancy animations or transitions you want for when the interface is being shown can go in here. You could also do something like: if ( [[self window]isVisible] ) [[self window] pulse:self];. (The pulse method is explained later). If you're having your own transition effect and don't want Quicksilver's default fade-in animation, run [window setFastShow:YES].

If you can, call the super implementation of the method where you would call -makeKeyAndOrderFront:, otherwise the option to suppress hotkeys while the command window is shown wont be honored.

- hideMainWindow:

Calling the super's implementation will hide the window with Quicksilver's effect. If you're using your own animation, you can run [window setHideEffect:nil] so Quicksilver doesn't run its own effect as well.

- activateInTextMode:

The use of the "Activate in Text Mode" trigger may be a rare occasion, but it's a cool place to throw in a surprising animation. Fumo has used Core Graphics warp and cube effects for this in the past.

Expansion

If you're having your interface expand and collapse, you'll need to subclass the following methods:

- showIndirectSelector:

Position the indirect selector in an appropriate location on the window. It may be useful to position it relative to another object, for example: [iSelector setFrame:NSOffsetRect([aSelector frame],0,-250)]; Don't forget to call super!

- expandWindow:

Expand your interface. You'll probably be using [[self window] setFrame: display: animate:] to resize the window smoothly.

- contractWindow:

As per -expandWindow:, but make the window smaller.

-hideIndirectSelector:

In most cases you wont need to subclass this. It just hides the indirect selector.

Preference Panes

The easy stuff

Creating your preference pane is easy since a lot of the work is done for you by the project template. There's a .nib file included in the interface project called "testInterfacePrefPane" (where "testInterface" is the name of your Xcode project). With this .nib file:

1. Open it.
2. Add controls and bindings.
3. Save and quit.

That’s creating it, though. There's still a little more work to be done.

Info.plist keys

Remember the QSPreferencePanes key I mentioned earlier? That needs to be present under the QSRegistration key in the Info.plist file. You don’t need to configure it, but you can change some keys like description with a short summary of the preference pane, or set an icon.

(Reminder: Make sure to drop the "Template" from "QSPreferencePanesTemplate")

The "Customize" button

To set a customize button to show the preference pane for your interface, simply uncomment the -customize: method that's added in by default. It’s that easy.

- (IBAction)customize:(id)sender{
    [[NSClassFromString(@"QSPreferencesController") sharedInstance] showPaneWithIdentifier:@"testInterfacePrefPane"];
}

A note on bindings

When the user changes something in the preference pane, the binding will be updated. And that’s it. You’ll need to bind your classes / controls not only in the preference pane, but also in your code so that any changes to bindings reflect in your interface. For example, if you add a binding for "testInterface.fadeStyle", you may want to do something like:

[self bind:@"fadeStyle"
     toObject:[NSUserDefaultsController sharedUserDefaultsController]
  withKeyPath:@"values.testInterface.fadeStyle"
      options:nil];

If you’re binding an NSColor, make sure to use NSUnarchiveFromDataTransformerName

Building

Once you’ve got your code ready, build the project.

(Don’t puke if you get warnings that you can’t get rid of; there will be a few warnings regarding some methods like -setWindowProperty:, and another great error if you add a preference pane and the customize button. We’ll have to live with them for now.)

Double-click on the built product to have Quicksilver install it. If there are no serious faults with the code, you’ll see your Incredible Interface™ and be able to enjoy, use, and distribute it!

Summary

• Download the Xcode Project Template, making sure everything else is setup correctly
• Add code to the subclass of QSResizingInterfaceController
• Arrange the views in Interface Builder
• Add preference pane and bindings
• Build project
• Test and distribute

If you need any additional information or resources, help is always available at the Quicksilver forums or you can contact me.

Be sure to show me how you go with your interface!

Also in this series

Quicksilver plugins in Objective-C

A guide to obtaining the required resources for Quicksilver plugin development in Xcode. Also runs through setting up Xcode to make creating plugins easier.

Info.plist - QSPlugIn

The various sections of Quicksilver plugins, including the basics on how to properly configure your plugin, setup the correct options and settings, and how and where to write your plugin.

Quicksilver Actions

A quick look at QSActions in the Info.plist, followed by our first look at the code needed to get a plugin up and running.

A sub-project of Shiira is a HUD-type window class. While they’re not completely accurate to the specifications used by Apple, these are probably the best HUD windows I’ve seen from a third party developer by a long shot.

The HUD Windows have the funny name of HMBLBlkAppKit. The Shiira team has really done a great job!

Apple’s Human Interface Guidelines are not dead.

We’ve seen a large number of bloggers pointing out (or linking to) facts about consistency and usability, giving examples of Disco and GarageBand and iTunes and Safari… and most of them are absolutely correct in saying that the levels of consistency are currently in a state of steady decline. The inconsistency is present not only in Apple’s applications, but also in a lot of third party software¹.

Whenever a topic such as this is discussed, there are always people that get… different… ideas. What I want to make clear, is that although Part III of the HIG is possibly outdated or redundant², it certainly does not disqualify the rest of it from being a valid and useful resource.

Let me ask you this: Have you even read the HIG?

If you answered no and are a developer, believe you me when I say you’re missing out. It’s no longer enough to follow the crowd. Disco is cool (or hot considering it burns) but if every app in the galaxy starts using the same interface, it would be a real disaster. Same goes for GarageBand and iClip and almost every heavily UI-dependent application. It may work for the purposes of the individual application, but to standardize it would be ludicrous.

So what’s the problem?

Why the sudden revolt? Why are we badgering Apple to update the HIG, and why are people setting up their own version or additions to it?

The fuss, I believe, was really started when Apple started to introduce the HUD windows.

What!? What makes you guys so special that you can have semi-transparent black windows with white text and custom pictury-looking controls? How come we can’t use these new-fangled window things? I want one!!

I admit, I’d like HUD controls from Apple as much as the next person, but where does the HIG come into this? I’ll tell you where.

It’s outdated

I mean, really, who wants to use Aqua now-days, right? Which Apple apps use Aqua? System Preferences? TextEdit? Dictionary? Forget it. My app has to be cooler than that. All the cool kids are writing their own schemes and themes, so why can’t I?

Yeah, right. If you didn’t notice, the above statement is not only paradoxical and hypcritical, it’s probably what most of us are thinking. In writing our own windows and buttons and scrollbars, we’re going against the very thing we were crying out for from Apple: consistency.

Who needs consistency?

We’re not making custard, are we, so why should we bother about consistency? (Excuse the bad joke)

I wont extoll the benefits of a consistent UI for an OS, as I’m sure you’re already aware of it’s importance. But with consistency lost somewhere in the woods these days, it can be easy for a developer to think that they need to provide eye candy and unique-ness for their product to sell. And maybe they’re right. But I’m sure many will agree (especially the ones who have written some of these custom UI’s) that if there’s no need to spend hours writing the front-end, why bother? For applications like Disco, it’s a selling-point, so it’s understandable, but why in the world would you spend days writing a completely custom interface when you’ve already got Apple’s classes for you to use? Unified seems to be the craze these days, and that doesn’t require a single line of code. Think about it.

Obviously there will be instances when you need to write your own custom UI, and it’s perfectly ok. But it’s up to you to make sure that it’s complementary to the existing standard UI and wont look like an alien spaceship next to TextEdit. I’m not saying “don’t do it”. There are a lot of applications that rely on or use custom front-ends effectively. Voice Candy, ImageWell, QuickScale, Cha-Ching… they all have minor differences but thankfully enough Mac developers are smart people and the differences have been kept to a minimum where they would be harsh or contrasting, such as the background color of the window.

“But Apple don’t …”

Are the HIG neglected by Apple themselves? If Apple are pushing for custom controls at every opportunity and giving their each of their applications unique appearances, why should the developer community have to conform to the Aqua interfaces? Two words: you don’t.

Have Apple ever dictated what you can or cannot do? All the HIG does is stipulate a few key concepts that are vital to providing a “consistent visual and behavioral experience”. Aqua or not, that’s important.

The HIG introduction states the obvious:

• Users will learn your application faster if the interface looks and behaves like applications they’re already familiar with.
• Users can accomplish their tasks quickly, because well-designed applications don’t get in the user’s way.
• Users with special needs will find your product more accessible.
• Your application will be easier to localize, because Apple has worked through many localization issues in the Aqua design process.

The implementation of Apple’s human interface principles make the Macintosh what it is: intuitive, friendly, elegant, and powerful.

So they’re not dead

The Apple HIG are not dead³. The majority of the HIG remains applicable to the development environment, worthy of at least a quick glance.⁴

Some of the portions have been correctly⁵ labelled as neglected, and so we wait in the hope of the HIG 2.0 (or the HIG 2.0 Beta, if the Apple team are feeling particularly Web 2.0). That, and Leopard the iPhone. The joys of being an Apple fanboy!

The number one request was for the comma trick. Well, as of today, this feature is built right into Fumo using Quicksilver’s own ingenious system. Select an item, press comma, and select another one (or ten).

Tip: Use the comma trick in conjunction with compound commands for maximum efficiency and usefulness.

It smokes correctly

Previously, the smoke would pour out unnaturally from the side of Fumo, or in rare occasions, from different areas of the screen. That’s all been fixed. The only precaution needed is to make sure you don’t drag Fumo around in the first few seconds that it’s loading so the smoke doesn’t get confused about the position, but feel free to do pretty much anything and enjoy!

Choose your own smoke

Tired of that same old gray smoke every time? You can choose the color of the smoke in Disco - why not in Fumo? The new easy-to-use preference pane makes smoke customization easy so you can show off your own colors. And it’s not just the colors you can control. You can change the frame rate, blur amount, the initial temperature of the smoke and lots more in the preference pane. Start or stop the smoke anytime by simply hitting Cmd-S while Fumo is active.

Easy access to the menu

Cmd-comma isn’t for everyone, and there are instances where you need to access the Quicksilver menu. The handy little triangle lets you get into the nooks and crannies of the application.

It’s bigger

Did you know can drag and drop items straight into or out of Fumo? And now, a bigger interface means a bigger drop target giving you the ultimate flexibility and power to get things done more efficiently.

It’s available now

That’s right. Get your hands on it right this instant.

Get Fumo

Tip: Be sure to read the included readme file. It contains all the information you need to easily and successfully install and use Fumo.

Initial reports suggest that the smoke effect does not work on Mac Pros. Some people have also had trouble with dual monitors. The rule of thumb is that if Disco smokes for you and Fumo doesn’t, tell me about it; I need to fix something up. Don’t worry too much though; Fumo is still a sweet-looking interface even without the smoke. The new smoke framework means that the smoke will work on a much wider range of computers.

For the health-conscious, there is a non-smoking version also.

Feel free to leave a comment below if you have any problems or if there’s anything I can do for you.

With so many people asking, I just can’t procrastinate any longer. You win. Here it is.

It’s most definitely not the finished thing yet. Yes, I have been taking a while. No, there is nothing you can do about it (short of asking for the source and developing it, which you may do by sending me a polite email).

The Fumo Quicksilver Interface

Firstly, there’s the smoking version. In other words, smoke pores out of it when it’s active. It does take a few seconds for the smoke to start and is only supported by more recent Macs. This is obviously courtesy of Disco. Instructions are in the package, but essentially you need to copy the Smoke.framework (included in the .zip file) to /Library/Frameworks/ for the interface to work. Download the entire thing from this wonderful hyperlink. And if you’re worried about performance and what-not, the smoke gets deactivated or ‘cooled’ when the interface is hidden. See? Of course you don’t, you haven’t downloaded it yet.

For those who’d prefer to leave out the smoke, there’s also a non-smoking version, again with another grand hyperlink. There are no installation instructions. Just double-click the .qsplugin bundle (because technically it’s more of a folder than a file) and choose Fumo under the “appearance” section of the Quicksilver preferences. Easy!

Fumo’s undergone major updates recently. You can always find the latest version here.

Still in the works

I think I should just reiterate that this is still not finished. There’s a lot of work to be done (still). To see where development is heading, see Pavel’s original mock-ups.

Now, here’s the part of the post where I kindly ask for feedback. Feedback anyone?

Major update to Fumo: comma trick, fixed up smoke, preference pane, and more

This version’s not publicly available yet. Austin & Co. (developers of the application that uses this effect) need to be contacted, and I need to have an option to turn the smoke on / off. It cools down automatically when the interface is hidden, but I’m sure not everyone likes passive smoking.

Doesn’t it look fantastic?

Another update I’ve made is using bezier paths and curves to draw the interface, rather than letting Quicksilver render it. It had to be done eventually, so I might as well do it sooner rather than later. The fill and the white border were rendered using paths, but obviously they’ll be cleaned up to look good as development progresses.

A preference pane will be among us soon, and possibly a hint of customization in the results pane / drawer. The interface will also be getting a stretch and redesign to make it appear more like the actual concept by Pavel.

Now, can we get some feedback please?

Update: Major updates to all aspects of the interface. See here.

I can understand the frustration of having the short post on the Digg front page and am not in the least surprised that it was promptly buried (I would have done the same), but where I do object is the false idea many people have regarding the development of Fumo. If you don’t like the concept or the mockups, that’s fine, but just because the interface doesn’t look like the concept now, doesn’t mean it’ll never get there. I’m not promising an exact replica, but hey, at least see what it turns out to be before dissing it.

Speaking of looks, here’s what Fumo is currently like.

The “transmogrify” effect has been overridden with a nice effect you may recall from Dashboard (if you’ve ever used Cmd-R to refresh a widget)… You can watch a short movie of the effect, or just download the interface and see for yourself.

(To get the warping effect going, set a shortcut key for “activate in text mode” and hit it)

Update: Major updates to Fumo found here.

Do you have any feature suggestions for a Quicksilver interface or plugin? Or any feedback on the current status of Fumo?