Color
Cocoa: How To Sync Views With A Color Preference Slider
2008-03-27
Much of my spare time is being used up very gradually writing a new photography-oriented application which I have code-named PP. This being my first sizable Mac app I also spend a lot of time reading, figuring out, rewriting code, and debugging as I encounter each challenge and work through it. While I am not going to blog the entire thing as I did with Random Wok, I am going to contribute pieces of what I have learned along the way.
PP has a thumbnail browser, as any photography-oriented app has, and I want to be able to control its background color. Just like Aperture I have a slider in my prefs panel that changes the gray level of the background and need to have that stored in the user's preferences. Since PP is a document-based app (I can have many document windows open at the same time), changing the browser background has to affect all the open documents and should do so in real time so the user can see the result.
Here is my prefs panel. Not much there yet:
The slider is set up to deliver a number between 0.0 and 1.0 and continuously return its state. The prefs panel XIB file also has an NSUserDefaultsController. The file's owner is a custom window controller:
I use three separate mechanisms for keeping everything in sync: actions, bindings, and notifications. Here is all of it together in one diagram:
The slider, NSUserDefaultsController and preferences file are joined together with bindings. I bind the slider's value to NSUserDefaultsController:
so that the controller is notified of all changes to the slider value. The NSUserDefaultsController keeps the prefs file on disk in sync. That is 100% of what is needed to handle the slider and the prefs. To set up the initial preferences I create the defaults in my application object:
To keep the browser background color in sync with the slider I have to be able to tell the browser's view controller that the value has changed so that it can get it from the NSUserDefaultsController object. This is a two-stage process: the slider tells its window controller via its action and the window controller tells the browser view controller through a notification:
To update the browser views, each instance of the browser view controller listens for notifications that indicate the color has changed and sends the appropriate message to its view:
The above two methods are called at appropriate times by the browser's window controller. The color is updated like this as the notification is received:
Finally, to set up the initial color the browser view controller implements this code:
That's it. Having set all of this up I can use the same mechanisms for handling other preferences and parameters that affect the browser or other views. I'm understanding the value of following the MVC pattern: it gives everything a place -- if you can figure out where that should be.
PP has a thumbnail browser, as any photography-oriented app has, and I want to be able to control its background color. Just like Aperture I have a slider in my prefs panel that changes the gray level of the background and need to have that stored in the user's preferences. Since PP is a document-based app (I can have many document windows open at the same time), changing the browser background has to affect all the open documents and should do so in real time so the user can see the result.
Here is my prefs panel. Not much there yet:
The slider is set up to deliver a number between 0.0 and 1.0 and continuously return its state. The prefs panel XIB file also has an NSUserDefaultsController. The file's owner is a custom window controller:
I use three separate mechanisms for keeping everything in sync: actions, bindings, and notifications. Here is all of it together in one diagram:
The slider, NSUserDefaultsController and preferences file are joined together with bindings. I bind the slider's value to NSUserDefaultsController:
so that the controller is notified of all changes to the slider value. The NSUserDefaultsController keeps the prefs file on disk in sync. That is 100% of what is needed to handle the slider and the prefs. To set up the initial preferences I create the defaults in my application object:
To keep the browser background color in sync with the slider I have to be able to tell the browser's view controller that the value has changed so that it can get it from the NSUserDefaultsController object. This is a two-stage process: the slider tells its window controller via its action and the window controller tells the browser view controller through a notification:
To update the browser views, each instance of the browser view controller listens for notifications that indicate the color has changed and sends the appropriate message to its view:
The above two methods are called at appropriate times by the browser's window controller. The color is updated like this as the notification is received:
Finally, to set up the initial color the browser view controller implements this code:
That's it. Having set all of this up I can use the same mechanisms for handling other preferences and parameters that affect the browser or other views. I'm understanding the value of following the MVC pattern: it gives everything a place -- if you can figure out where that should be.
|
Tree Forms
2008-01-22
A tree against the sky. By enhancing the colors in the original I was able to get some blue, yellow, and red into the image. It needs cropping.
1/3200s f/6.3 ISO400 50mm, Canon 30D, EF 50 f/1.8, adjusted
Dead tree in the form of a leaf. This leaf was blown by the high winds onto the wet window and stuck there. A dreary day, so this took some enhancement to look interesting.
1/250s f/2.8 ISO800 55mm -0.3ev, Canon 30D, EF 17-55 f/2.8 IS, adjusted
This is dead tree converted into card and printed with a puzzle laying on more dead tree. You can't tell from the pieces, but this puzzle featured about 20 birds.
1/30s f/4.0 ISO400 44mm, Canon 30D, EF 17-55 f/2.8 IS, adjusted
A tree shape on the ceiling of a restaurant.
1/50s f/6.3 ISO800 28mm -1ev, Canon 30D, EF 17-55 f/2.8 IS, adjusted
1/3200s f/6.3 ISO400 50mm, Canon 30D, EF 50 f/1.8, adjusted
Dead tree in the form of a leaf. This leaf was blown by the high winds onto the wet window and stuck there. A dreary day, so this took some enhancement to look interesting.
1/250s f/2.8 ISO800 55mm -0.3ev, Canon 30D, EF 17-55 f/2.8 IS, adjusted
This is dead tree converted into card and printed with a puzzle laying on more dead tree. You can't tell from the pieces, but this puzzle featured about 20 birds.
1/30s f/4.0 ISO400 44mm, Canon 30D, EF 17-55 f/2.8 IS, adjusted
A tree shape on the ceiling of a restaurant.
1/50s f/6.3 ISO800 28mm -1ev, Canon 30D, EF 17-55 f/2.8 IS, adjusted
Brown, Blue, and Red
2008-01-10
My style of photography seems to prefers a dominant color in the frame. I'm catching up with photos taken in the last month.
Caustic Drips: 1/1000s f/5.0 ISO400 200mm -0.3ev, Canon 30D, Canon EF 70-200 f2.8L IS, adjusted, cropped
These are drips on a gutter two stories up. I like how the metal crystals are visible and the light forms spikes as it passes through the water. If you turn it upside down it's almost impossible to figure out what it is because so little in the image is recognizable and the shading is unexpected.
Sunlit Gulls: 1/2500s f/5.0 ISO400 200mm -0.3ev, Canon 30D, Canon EF 70-200 f2.8L IS, adjusted
I adjusted this image of gulls flying overhead to keep the detail on the wing and other brightly-lit areas but did not attempt to brighten the rest of the image. That draws the eye to the bright parts and provides something to look at when it gets there.
Twisted Cloud: 1/125s f/3.5 ISO100 173mm, Canon 30D, Canon EF 70-200 f2.8L IS, unadjusted
I'm not sure what cause the odd twisted cloud to form, but its shadow was projected onto the underside of the cloud by the setting sun. The colors were very vivid and required no adjustment. The 30D had no problem focusing on the clouds, but I found later that the clouds were actually out of focus and the tree was in focus.
Caustic Drips: 1/1000s f/5.0 ISO400 200mm -0.3ev, Canon 30D, Canon EF 70-200 f2.8L IS, adjusted, cropped
These are drips on a gutter two stories up. I like how the metal crystals are visible and the light forms spikes as it passes through the water. If you turn it upside down it's almost impossible to figure out what it is because so little in the image is recognizable and the shading is unexpected.
Sunlit Gulls: 1/2500s f/5.0 ISO400 200mm -0.3ev, Canon 30D, Canon EF 70-200 f2.8L IS, adjusted
I adjusted this image of gulls flying overhead to keep the detail on the wing and other brightly-lit areas but did not attempt to brighten the rest of the image. That draws the eye to the bright parts and provides something to look at when it gets there.
Twisted Cloud: 1/125s f/3.5 ISO100 173mm, Canon 30D, Canon EF 70-200 f2.8L IS, unadjusted
I'm not sure what cause the odd twisted cloud to form, but its shadow was projected onto the underside of the cloud by the setting sun. The colors were very vivid and required no adjustment. The 30D had no problem focusing on the clouds, but I found later that the clouds were actually out of focus and the tree was in focus.
Aperture: Add Color To Gray With The Levels Control
2007-07-31
Aperture's levels control can be used to easily add color to otherwise gray images. This original photo of stacked chairs has a range of grays that exist only on the chair backs and seats:
By selecting the Blue channel on the levels control, I can alter the amount of blue in the gray part of the chairs. In this case I'll boost the darker tones significantly to give a blue tint:
With some boosting of the saturation with the exposure control and a crop to focus attention where I want it, I get my final image:
Of course the colors can be cut or boosted individually or in combination to get any color. The Colors control can also be used to adjust the color once one is applied.
By selecting the Blue channel on the levels control, I can alter the amount of blue in the gray part of the chairs. In this case I'll boost the darker tones significantly to give a blue tint:
With some boosting of the saturation with the exposure control and a crop to focus attention where I want it, I get my final image:
Of course the colors can be cut or boosted individually or in combination to get any color. The Colors control can also be used to adjust the color once one is applied.
Aperture: How Do I Change The Color Of The Boxes In A Book?
2007-05-18
Great site of Aperture how-to's and tips. A question for you. In a book, special occasion template, how does one change the color of all those colored boxes? What are those boxes, If I drag one from one page to another the color seems to vanish, though the selection handles are still there.
Here is an example of the colored boxes in that theme:
The colored boxes in the Special Occasion book are defined in the Aperture application itself. They are part of the theme, and so unless you hack into the theme by opening up the Aperture application bundle and edit plists, you cannot change them. You can, however get rid of them and add your own without any hacking.
If you do want to hack, then open the Aperture application with a control click and select Show Package Contents. Navigate to the folder Contents > Resources > Book Themes > Special Occasion > Hardcover > Graphics and you will see that it holds the files that define the blue rectangle and other things:
The BlueRect plist file contains just this, as shown by the plist editor:
and can be easily modified. However any modification will be lost if you update Aperture, so this is not advised.
To replace the blue rectangles with your own creation, you will need a colored graphic. Just a plain color square made in PhotoShop or some other utility will work fine. Perhaps you have some already available.
Here is is how I do it with ImageWell. I launch ImageWell and click Edit and delete anything that is there by selecting it and pressing delete:
I click on the rounded rectangle top left and drag the rectangle onto the editing area:
And change the size using the numbers bottom left to something that is big enough for print, say 3000 x 3000 pixels. I click the small rectangle on the right just below the yellow rectangle in the image above:
This opens the color picker and lets me pick a nice color. I don't have to be particularly fussy with my choice as you will see. I also set the border width to zero by editing the number bottom right:
I click the ImageWell icon top left to go back to the main window and give the image a name. Then I click and drag the image to the desktop.
Now I have my green image I import it into Aperture (just dragging onto a project works) and then drag the Aperture thumbnail to my book album. Here it is:
In my book I change to editing the layout:
and click on the blue rectangle I want to change. A right-click and a Cut removes it:
To put in the color I want, I create a new photo box and drag in my color image:
And there it is in the book:
If I don't like it, I can always change it. I just click on the thumbnail image and adjust the color and lightness using the controls in the HUD:
Adjusting the thumbnail will affect all the boxes that show that same color image, so I can adjust the look of the whole book with just a few HUD sliders. I can work with multiple versions of the same starting image and adjust each of them independently to vary the color scheme in many ways. This same method can be used to set background colors and patterns as well, of course.
Color Zoom
2006-10-08
Interact 10 Ways has a fascinating piece of Flash animation that turns pixels into images and then images into pixels.
James Duncan Davidson on the Aperture 1.5 Color Control
2006-10-05
James Duncan Davidson comments on his blog about the new color control in Aperture 1.5 (just the top half shown):
and compares it to the one in Lightroom, now, ahem, Photoshop Lightroom:
I agree with what he says. However, he omits one major problem with the Lightroom tool: when a person goes to adjust colors they do it one color at a time; but the Lightroom tool is organized by attribute first and then color second. So to adjust one color you must jump about between the sections, hoping you don't click the wrong slider in error. Aperture gets this right and provides the color attribute controls for each color next to that color and does so using a cleaner layout.
and compares it to the one in Lightroom, now, ahem, Photoshop Lightroom:
I agree with what he says. However, he omits one major problem with the Lightroom tool: when a person goes to adjust colors they do it one color at a time; but the Lightroom tool is organized by attribute first and then color second. So to adjust one color you must jump about between the sections, hoping you don't click the wrong slider in error. Aperture gets this right and provides the color attribute controls for each color next to that color and does so using a cleaner layout.
The Bagelturf site welcomes Donations of any size