Retina kit with macoslib toolbar?

Richard_Summers · July 9, 2014, 7:41pm

Hi,
I have asked a few questions regarding this but never quite got it working.

I am using Sam’s Retina Kit, and need to retinafy (is that a proper word?) the images for my toolbar buttons, and for canvas backgrounds.
Does anyone have any example code, which shows me how to change a toolbar image and a canvas background?

Hopefully someone can help - so that I understand this once and for all.

Thank you all in advance.

Sam_Rowlands · July 10, 2014, 2:47am

Hi Richard,
From the RetinaKit demo project, you can use the following.

toolbar11.setIcon( 0, HIDPIPicture.imageNamed( "stylesIcon" ) )

Basically, replace toolbar1 with the name of the toolbar on the window. The first parameter in the “setIcon” function is the ‘index’ or the position from the left of the item. The second parameter is the HIDPIPicture object you want to use, in this example code I load the image “stylesIcon”.

Also in the demo project there is now an object called “iconButton” which takes a HIDPIPicture object as the .icon property. This is simply a canvas subclass.

Tim_Parnell · July 10, 2014, 3:20am

And so all we have to do is have stylesIcon.png and stylesIcon@2x.png?

Sam_Rowlands · July 10, 2014, 5:26am

Indeed, in the resources folder.

Richard_Summers · July 10, 2014, 11:24am

I put the following code in the open event of my toolbar:

// BUTTON NUMBER 1 CreateButton.Caption="CREATE" CreateButton.Name="Create" MainToolbar.setIcon( 0, HIDPIPicture.imageNamed( "CreateButtonImage" ) )

When the window containing my toolbar opens - I get sent straight back to the debugger, where the final line of code produces an ObjCException ???

Regarding a Canvas - I have the following code in the window’s open event:

Canvas1Pic = HIDPIPicture.imageNamed( AboutImage )

I also created a property - Canvas1Pic (As HIDPIPicture).

When I try to run, this produces a This Item Does Not Exist error, for the (“AboutImage”) - but it DOES exist, and is clearly in my project??

Thanks.

Sam_Rowlands · July 11, 2014, 3:52am

Did you add the button in the IDE (toolbar designer) or is it created dynamically? If it’s created dynamically it could be that the Retina Kit code is executing before Xojo actually creates the toolbar.

Richard_Summers · July 11, 2014, 9:16am

Sam - I created it dynamically in the open event of the toolbar. Where would I put the retina kit line of code to make it execute at a later time??

Sam_Rowlands · July 12, 2014, 3:11am

hmmm… You could maybe try it in the “window.activate” event, if you do make sure you set a property so the icons only get added once.

The problem is when building the toolbar dynamically, I suspect that the NSToolbar gets created after you’ve populated the Xojo toolbar. @Joe Ranieri would be able to confirm this for me. Which means you can’t alter the NSToolbar until Xojo has created it.

Another way to do this (but might not be practical for your app), is to use the Xojo toolbar designer (add a toolbar to your project in the IDE) and then append it to the Window. Then in the Open event you’ll be able to use the Retina Kit to customize the NSToolbar.

I hope that this makes sense.

Richard_Summers · July 15, 2014, 11:17am

Got the canvas to work correctly now, but am still having trouble retina-izing the toolbar images
I removed my Xojo made toolbar and am now using the macoslib way of creating the toolbar.

I tried this code - But was told it required fewer parameters

// ADD THE CREATE BUTTON ti = new NSToolbarButtonItem("CREATE") // ti.Image = CreateButtonImage ti.image = ( 0, HIDPIPicture.imageNamed( "CreateButtonImage" ) ) ti.ItemLabel = "CREATE"

I then also tried this code - but was told that it does not accept parameters

// ADD THE CREATE BUTTON ti = new NSToolbarButtonItem("CREATE") // ti.Image = CreateButtonImage ti.setIcon( 0, HIDPIPicture.imageNamed( "CreateButtonImage" ) ) ti.ItemLabel = "CREATE"

Is Retina Kit not compatible with a macoslib toolbar?

Alternatively, is it possible to check inline if the user has a retina screen - something similar to the made up code below:

If screen == retina then ti.image = CreateButtonImage@2x else ti.image = CreateButtonImage End if

Really hope someone can help - as my app will be finished when I solve this toolbar problem.

Thank you all in advance.

Sam_Rowlands · July 16, 2014, 3:23am

Hi Richard,
Is there a reason you need to create it dynamically? Could you not just use the GUI toolbar designer in Xojo? (Simply add a new class of Toolbar to your project in the IDE).

I’ve not used the MacOSLib, you may have to pass the NSImageRef property of the HIDPI picture to the MacOsLib functions.

Richard_Summers · July 16, 2014, 12:10pm

Sam - I create the toolbar manually (via macoslib) because I need the toolbar to have an NSSearchField.
Don’t quite understand what you mean by pass it to the macoslib functions?

Thanks.

Sam_Rowlands · July 17, 2014, 2:25am

In the RetinaKit demo application (for the latest version of the RetinaKit), there is an example for adding a rectControl to a toolbar item. In the demo, you’ll see that there is a Pulldown action button on the toolbar.

the HIDPIPicture object, has a NSImageRef property, which gives you the NSImage reference as Ptr, I suspect (although I hope that someone who knows more about the macOSLib can help here) you can use this value with the macOSLib.

ti.image = HIDPIPicture.imageNamed( "CreateButtonImage" ).NSImageRef

Richard_Summers · July 17, 2014, 11:31am

Hi Sam - unfortunately the code below did not work, as I was once again told that ti.image does not accept parameters.

// ADD THE CREATE BUTTON ti = new NSToolbarButtonItem("CREATE") ti.image = HIDPIPicture.imageNamed( "CreateButtonImage" ).NSImageRef ti.ItemLabel = "CREATE"

Has anyone here successfully used Sam’s Retina Kit with a macoslib toolbar?
If so, would you be kind enough to share with us the line of code needed to define the toolbar button image?

Thank you all in advance.

Jason_King · July 17, 2014, 12:19pm

If NSImageRef returns a ptr to the internal NSImage, then you should be able to create a new NSImage from the ptr to be used in the toolbar. Try this (untested since I don’t have retina kit):

// ADD THE CREATE BUTTON ti = new NSToolbarButtonItem("CREATE") ti.image = new Cocoa.NSImage(HIDPIPicture.imageNamed( "CreateButtonImage" ).NSImageRef) ti.ItemLabel = "CREATE"

Richard_Summers · July 17, 2014, 12:51pm

Jason,
I don’t have a retina screen either, but as a test, I removed all code which displayed the image, and then ran the app - no icon (as expected, obviously)

I then inserted the line of code you gave me - and that now displays the normal image
I presume then, that it would automatically display the retina version on a retina screen.

Thank you so much for that!

P.S
As a side note, do you have any idea if the same thing would work for an NSStatusItem created in macoslib?
Here is the code which creates the statusItem and the images:

[code] // DISPLAY THE NSSTATUSITEM IN THE OS X MENUBAR
dim bar as NSStatusBar = NSStatusBar.SystemStatusBar
item1 = bar.CreateStatusItem(NSStatusBar.NSVariableStatusItemLength, AddressOf StatusItemHandler)
item1.highlightMode = true
item1.Image = NSStatusItemImage
item1.AlternateImage = NSStatusItemImage

item1.menu = nil
item1.Action=Cocoa.NSSelectorFromString(“menuAction:”)[/code]

I can’t actually test it, as I am out and using my iPad.

THANK YOU!

Jason_King · July 17, 2014, 1:17pm

[quote=112451:@Richard Summers]
As a side note, do you have any idea if the same thing would work for an NSStatusItem created in macoslib?
Here is the code which creates the statusItem and the images:

[code]// DISPLAY THE NSSTATUSITEM IN THE OS X MENUBAR
dim bar as NSStatusBar = NSStatusBar.SystemStatusBar
item1 = bar.CreateStatusItem(NSStatusBar.NSVariableStatusItemLength, AddressOf StatusItemHandler)
item1.highlightMode = true
item1.Image = NSStatusItemImage
item1.AlternateImage = NSStatusItemImage

item1.menu = nil
item1.Action=Cocoa.NSSelectorFromString(“menuAction:”)[/code]
I can’t actually test it, as I am out and using my iPad.

THANK YOU![/quote]
It should work the same way as with the toolbar. I.E. if the image is called NSStatusItemImage you should be able to do:

item1.image = new Cocoa.NSImage(HIDPIPicture.imageNamed( "NSStatusItemImage" ).NSImageRef)

Richard_Summers · July 17, 2014, 1:50pm

Thanks Jason - that also worked !
I really appreciate the help on that

Albin_Kiland · July 17, 2014, 6:43pm

[quote=112451:@Richard Summers]Jason,
I don’t have a retina screen either[/quote]
Send it this way if you want it tested on retina

Richard_Summers · July 17, 2014, 7:50pm

Thanks Albin.

It will be ready in about a week.
It’s a free app anyway, so I will let you know when it’s ready

Scott_Crick · July 18, 2014, 7:50pm

Just so you are aware, if you have a Retina iPad (iPad 3 or newer), there are utilities available that will allow it to work as a second monitor on your Mac. This will also give you Retina capability. I did this to test my software’s Retina support before I purchased a 15" Retina MacBook Pro. I think the utility I used was “Air Display”. There is an app you download on your iPad and a utility you install on your Mac. It works very well!