Re: Image Type for Button
Re: Image Type for Button
- Subject: Re: Image Type for Button
- From: Ken Ferry <email@hidden>
- Date: Sat, 15 Jan 2011 19:41:23 -0800
On Sat, Jan 15, 2011 at 7:15 PM, Ken Thomases <email@hidden> wrote:
> On Jan 15, 2011, at 8:13 PM, John Joyce wrote:
>
> > Cannot seem to find this in the HIG.
> > What type of image would give the inverted look of the built in media
> types (NSQuicklookTemplate for example) when in a Textured Square Button or
> Segmented control?
> >
> > The images appear black with a clear alpha in Interface Builder.
> >
> > I've tried png, tiff, pdf.
> > Tried each type with clear alpha background, with black on white, vice
> versa.
> > No luck.
>
> You need to tell the framework that the is image a template image. See
> -[NSImage setTemplate:].
>
…which will happen automatically if the filename ends in Template (before
the extension).
http://developer.apple.com/library/mac/#releasenotes/Cocoa/AppKitOlderNotes.html#NSImageTemplate:
Text and image effects: -[NSImage isTemplate]
So far we've mostly talked about text. Images drawing in cells also have
visual effects applied. For example, images are automatically dimmed out in
disabled cells and darkened when pressed.
This is extended in Leopard with a new metadata property, -[NSImage
isTemplate]. An image is a 'template' if it is a black and clear mask that
should not be presented to the user directly, but always processed into a
final form. It's similar to a glyph in a font. If a cell is given a template
image, it can perform much more sophisticated effects than usual, similar to
those done with text. The image can be dark most of the time, white in a
selected table view row, and engraved or embossed the same way text is.
The template property does not affect the way an image draws. It's metadata
that a sophisticated client can look at. The only sophisticated client in
AppKit for 10.5 is NSCell. If you need to produce an NSImage with effects
pre-rendered, draw with a cell into an image.
A good example of template image processing occurs in the button that shows
the bookmarks collections in Safari 3.0. This is very much a stock AppKit
button. There's a single template image set on it, which is an icon of a
book. That single image appears engraved or embossed depending on whether
button is rolled over (really, on the -interiorBackgroundStyle of the cell).
To mark an image as a template, call -[NSImage setTemplate:]. As a
convenience, in applications linked on or after 10.5, any image read off of
disk via -[NSImage imageNamed:] whose name ends in @"Template" will be
marked as a template as it is created. This makes it easy to use template
images in Interface Builder. Just make sure your image filenames end in
"Template".
One particular effect is worth calling out, because you'll see it and likely
wonder exactly what triggers it: If a template image is drawing on a raised
background and is also supposed to look on, it will draw with a blue glow.
Think of the image as a translucent gray piece of plastic cut into the
surface of the cell, with a blue backlight behind it when the cell is on.
This will happen, for example, in selected segments of an NSSegmentedControl
with NSSegmentStyleTexturedRounded and NSSegmentSwitchTrackingSelectAny
(which means that segments behave like check boxes). You cannot rely on this
glow occurring in any particular place because framework art can change, but
AppKit promises to continue to do something appropriate.
For an NSButtonCell, a cell's -image will be processed to look 'on' if the
cell's state is NSOnState, its showsStateBy mask contains NSContentsCellMask
(which means 'use alternate image and title when on'), and it doesn't have
an alternateImage. In Interface Builder, make a 'Toggle' button and give the
button an image. This also sets up the highlightsBy mask, but it's likely to
be what you want.
You may note that it isn't possible to both use a distinct piece of art as
an alternateImage on a button or segmented control and also get the blue
glow. This may be somewhat limiting, but should tend to make sure this
effect is only used when appropriate. This effect helps the user to
distinguish between a button that shows an action and a button that shows
the state of something. Most buttons in the OS are actions. However, it has
always been hard to distinguish those buttons that give state. The blue glow
communicates state very effectively. Look at the calendar button in the
lower left corner of iCal in 10.5. When the mini calendar pane isn't shown,
the button shows an engraved mini-calendar. The user might think of this as
either an action 'show mini-calendar' or as a state, 'mini-calendar is off'.
Luckily, both interpretations agree on the effect of clicking the button -
it should show the calendar. Once the user clicks the button, the correct
interpretation becomes very clear: The calendar icon glows blue when the
pane is shown. This is obviously showing state, and the user will realize
that if he clicks again then the button will turn off and the calendar pane
will be hidden.
-Ken
> The file format doesn't matter.
>
> Cheers,
> Ken
>
> _______________________________________________
>
> Cocoa-dev mailing list (email@hidden)
>
> Please do not post admin requests or moderator comments to the list.
> Contact the moderators at cocoa-dev-admins(at)lists.apple.com
>
> Help/Unsubscribe/Update your Subscription:
>
> This email sent to email@hidden
>
_______________________________________________
Cocoa-dev mailing list (email@hidden)
Please do not post admin requests or moderator comments to the list.
Contact the moderators at cocoa-dev-admins(at)lists.apple.com
Help/Unsubscribe/Update your Subscription:
This email sent to email@hidden