Retina Toolbar Buttons?

Targets macOS
1

Hi,
I am trying to use Ohanaware’s Retina Toolkit, but am a bit lost.

I have contacted Sam, but he is extremely busy at the moment and I did not want to distract him, so I thought I would see if anyone here could advise me.

I am simply trying to retina-ize my OS X Cocoa toolbar icons.
I was instructed to use the following line:

toolbar.setIcon( toolitemIndex, HIDPIPicture.imageNamed( "stylesIcon" ) )

I have copied over the 2 classes into my project.
Surely there is more to getting this to work than now simply adding the above line of code?

Also:

  1. Where do I put this line of code?

  2. Am I correct in presuming that I only need to replace the word “stylesIcon” to the name of my image, and also replace the word “toolitemIndex” to the name of my button?

  3. Do the retina images have to be called myImage@2x, or can they be called for example myImage2x (minus the @ sign) ?

Thank you for any help provided.

2

Hi Richard,
Sorry for the cryptic response, distractions happen all the time. If I ever give you support you don’t understand, please don’t be afraid to come back at me and go “What!?”

I took this from the Retina Kit demo app, where you copy the modules from.

  1. I put this either in the toolbar open event or the window open event.

  2. yup, replace stylesicon with the name of your image file, like we did for canvas1Pic. toolitemIndex is the position in the toolbar of the item. So if you’re replacing the icon of the first item, use 0 as the toolitemIndex.

  3. In your resources folder, you should have a pair of images; one with a regular name and then one that’s twice the resolution with @2x in the file name. However when you use the Retina Kit to load images, simply call the regular file name and the Mac OS will load the correct image.

i.e. two files, “fish.png” & “fish@2x.png”. In code you only call

HIDPIPicture.imageNamed( "fish" )
3

OK,
So:

  1. I drag the 2 classes into my project.

  2. I drag the 2 images into my project (myImage.png and myImage@2x.png)
    This part fails because every time I drag an image with the @ symbol in its name - the @ sign gets automatically removed by XOJO.
    I have even tried renaming it in the inspector area on the right - but XOJO will not allow an @ symbol to be part of a name???

  3. In the toolbar open event I put the following line of code:

toolbar.setIcon( 0, HIDPIPicture.imageNamed( "myImage" ) )

If I use the line of code above - do I then have to remove the last line of code below from the Toolbar’s open event?:

CreateButton.Caption=" Create Snippet " CreateButton.Name="Create" CreateButton.icon=myImage

Are these steps correct, and can someone please advise me on steps 2 and 4.

Thank you.

4

remove the line

CreateButton.icon=myImage

Make sure that you use the RetinaKit code, after your Toolbar has been constructed… Otherwise, I’m not sure what might happen.

I wound’t worry too much about Xojo not displaying the @ symbol in the file name, as long as it copied into the resources folder with the @ symbol, your fine. You can check this by, running your project. Finding the application in Finder, right click on it and select “Show Package Contents”, then navigate through Contents, to the Resources folder.

5

Thanks Sam,

I will place this line of code at the very end of the Toolbar Open event:

toolbar.setIcon( 0, HIDPIPicture.imageNamed( "myImage" ) )

Regarding the @2x image - I will rename it directly in the resources folder, if necessary.

Thanks Sam - I will now try that.