Re: Image Type for Button
Re: Image Type for Button
- Subject: Re: Image Type for Button
- From: John Joyce <email@hidden>
- Date: Sat, 15 Jan 2011 21:44:35 -0600
On Jan 15, 2011, at 9:41 PM, Ken Ferry wrote:
>
>
> 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
>
Thanks to both Kens!!
Arguably, that release note stuff is darn hard to look through. Search results generally don't seem to find it.
I'll file a bug on the HIG docs or on IB docs to get that moved into a more useful location.
Thanks so much!!
John
_______________________________________________
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