Create a template image

I would add a template image at a button to change its color runtime.

I used Preview to draw and save it as a pdf.

But it is rendered only as a uniform square color (which color I can change runtimne).

How can I obtain the template pdf image?

Why the pdf saved by Preview is not working?

Accepted Reply

Yes, I want a template, a black and white image which color can be changed using setTitleColor(_ color: UIColor?, for state: UIControl.State).

I tested QuinceyMorris case 1, loading the pdf provided by Apple in https://developer.apple.com/go/?id=app-dev-swift-student-swift-4 and setting in Interface Builder "Render As" Template Image". It works.

If I change the pdf I obtain a square completely filled with the color desired. But a uniform square, not the image.

Thanks QuinceyMorris, the point is opacity. My pdf were without alpha channel. I modified it, using Gimp, so the white parts became transparent and it works.

  • Hi, I experience a similar problem. I received a logo as .SVG image file from our graphic designer. The logo is actually text (black on clear). Now I want to display it in my Window (MacOS Cocoa) but I want it to adjust to dark-theme/light-theme automatically. I

    opened it in Safari and exported as .pdf (to preserve vector graphics and quality)renamed the PDF to "company-logo Template.pdf) as explained in Quincy's answer,added the image file to my target and resources, and made sure it's in the built bundle, and available by name from the main bundle.placed it in an NSImageView by name.

    and now it appears as gray square in Interface-Builder, and in runtime - as nothing-at-all. It is embedded in a vertical NSStackView, and the logo item is rendered at zero size.

    If I remove the word "Template" from the name - the logo looks OK on light-theme, but becomes black-on-dark-gray - almost invisible - in dark theme.

    Could you please explain a bit more about how to add the "Opacity" thing, and why do I need it? What's the meaning of "Opacity" with vercor graphics, and can a vector PDF have an "Alpha channel" ??? what would it contain? vector graphics too?

Add a Comment

Replies

Save image as png and tell if it works.

No, it doesn't.

I'm following the book "App Development with Swift" by Apple, there is the link https://developer.apple.com/go/?id=app-dev-swift-student-swift-4 which envelop a pdf which works, even with small change to it, made with preview, it works.

But with a new pdf the "template image" doesn't works.

What do you mean by "template"?


In macOS, a template NSImage is one whose colors are ignored, and the only significant information is the opacity (transparency) of the pixels. When you specify a template image for a button, the button colorizes the image with a standard color suitable for the button state (normal, highlighted, etc). You can't control which color is used.


If you want that behavior, then you must specify that the image is a template, and there are two ways to do this:


1. Load the NSImage and set its isTemplate property to true.


2. Load the NSImage using NSImage(named:), and specify an image file name that ends in the word "Template" (e.g. "MyImage Template.pdf", which you load as NSImage(named:"MyImage Template")).


Note that if you're setting the image name for a button in IB, you can use technique #2 to get it to be a template.

Yes, I want a template, a black and white image which color can be changed using setTitleColor(_ color: UIColor?, for state: UIControl.State).

I tested QuinceyMorris case 1, loading the pdf provided by Apple in https://developer.apple.com/go/?id=app-dev-swift-student-swift-4 and setting in Interface Builder "Render As" Template Image". It works.

If I change the pdf I obtain a square completely filled with the color desired. But a uniform square, not the image.

Thanks QuinceyMorris, the point is opacity. My pdf were without alpha channel. I modified it, using Gimp, so the white parts became transparent and it works.

  • Hi, I experience a similar problem. I received a logo as .SVG image file from our graphic designer. The logo is actually text (black on clear). Now I want to display it in my Window (MacOS Cocoa) but I want it to adjust to dark-theme/light-theme automatically. I

    opened it in Safari and exported as .pdf (to preserve vector graphics and quality)renamed the PDF to "company-logo Template.pdf) as explained in Quincy's answer,added the image file to my target and resources, and made sure it's in the built bundle, and available by name from the main bundle.placed it in an NSImageView by name.

    and now it appears as gray square in Interface-Builder, and in runtime - as nothing-at-all. It is embedded in a vertical NSStackView, and the logo item is rendered at zero size.

    If I remove the word "Template" from the name - the logo looks OK on light-theme, but becomes black-on-dark-gray - almost invisible - in dark theme.

    Could you please explain a bit more about how to add the "Opacity" thing, and why do I need it? What's the meaning of "Opacity" with vercor graphics, and can a vector PDF have an "Alpha channel" ??? what would it contain? vector graphics too?

Add a Comment