SF Symbols Module

General
4

This is a module I’ve build. Largely based on the blog post from Javier Menendez here:

Using that I put together this modified version that deals with a backup image a little better. It also extends the process for controls that have multiple parts like the DesktopSegmentedButton.

This is the module:
http://www.ditl.org/SystemImage.xojo_binary_code

There are two basic methods that help you use SFSymbols:

  • SystemImageControl
  • SystemImage

SystemImageControl
SystemImageControl allows you to apply an SFSymbol to a control that has one or image properties.

SystemImageControl( "chevron.left",14.0, SystemImageWeights.Regular,SymbolScale.Medium,Me.Handle, btnIconPrev )

For the segmented control you also pass in an index for the part you wish to set:

SystemImageControl( "text.alignleft", 14.0, SystemImageWeights.Medium, SymbolScale.Small, Me.Handle, segAlign_Left, 0 )
SystemImageControl( "text.aligncenter", 14.0, SystemImageWeights.Medium, SymbolScale.Small, Me.Handle, segAlign_Centre, 1 )
SystemImageControl( "text.alignright", 14.0, SystemImageWeights.Medium, SymbolScale.Small, Me.Handle, segAlign_Right, 2 )

The parameters are as follows:

  • name : The name of the SFSymbol
  • size : The font size required
  • weight : The weight of the lines
  • scale : The scale relative to other things
  • controlHandler : The handle property of the control you wish to set.
  • fallbackTemplateImage : An Xojo image you wish to use if that SFSymbol isn’t available.
  • nSegment : (optional) The index of the segment for multi segment controls.

SystemImage
The other function is SystemImage, which allows you retrieve an Xojo picture of the image containing the SFSymbol you want to use. This could be for caching purposes or if you find a problem with a control. You can also use it to save a PNG file to use on earlier versions of macOS that don’t support SFSymbols. Apple does not allow the symbols to be used on other platforms, such as Windows / Linux:

  • Pull the image using the SystemImage function
  • Save it to a png file
  • Build an Image in Xojo that you can then pass to the Control function so old and new versions of the OS look the same.

A problem seems to exist if you try and use SFSymbols on a Toolbar icons using the Control method. So for these I use the SystemImage function to retrieve the image and then set that to the toolbar. I do it using this function so that the Template image setting is on and macOS handles the toolbar colours:

Public Sub ToolbarSetIcon(itemsPtr as Ptr, index as Integer, Icon as Picture)
  Declare Function objectAtIndex Lib CocoaLib Selector "objectAtIndex:" ( theArray As Ptr, idx As Integer ) As Ptr
  Declare Sub NSControlImage Lib CocoaLib selector "setImage:" ( NSControlInstance As Ptr, Assigns inNSImage As ptr )
  Declare Sub NSImageTemplate Lib CocoaLib Selector "setTemplate:" ( NSImageInstance As ptr, Assigns value As Boolean )
  
  Var NSImage, toolbarItemPtr As Ptr
  
  toolbarItemPtr = objectAtIndex( itemsPtr, Index )
  NSImage = Icon.CopyOSHandle( Picture.HandleTypes.MacNSImage )
  NSImageTemplate( NSImage ) = True
  NSControlImage( toolbarItemPtr ) = NSImage
End Sub

Hope this helps someone

2 Likes