Buttons with symbols

Hi Guys,
Hobbiest programmer here with couple of own Mac apps. Some of you have helped (brilliantly) before, wondering if you can do so again.

I want to add “button type” controls with the current Apple symbols format. That is, ones like those along the top of the XOJO programming interface (eg the Run, Build, Help or even the Library or Inspector).

I’ve had a look at the various Button types and don’t think they are the correct ones. It is my understanding that the XOJO interface is built with XOJO so I’m assuming the correct controls are there. Am I right or is it something that has to be modified from another control? I can’t quite figure it out.

Also, where do the current Apple symbols come from and how are they applied? I’ve downloaded an app from the Apple Developer site called SF Symbols. Is this it and, if so, how does it work? It only seems to bring up the symbols and not much else?

Thanks for any help,
Barry

I converted my toolbar icons to outline style because the Apple icons are so bland and boring:

You will notice in the Xojo toolbar and also in the SF symbols that the weight of the lines is very thin. I’ve tried to make the lines just a tiny bit thicker so that the user can actually see the different between active and inactive buttons.

For the buttons themselves I use the PDF export of Affinity Designer. I had to make the buttons smaller and give them some whitespace. In the original size the buttons looked too large.

1 Like

Although Xojo is built with Xojo, there is no easy way to get a system (symbol) picture in a Desktop app. This is available in Xojo for iOS but not yet for macOS :frowning:

Ohanaware App Kit has some code to get all symbols you can see in the SF Symbols app:
https://ohanaware.com/appkit/

1 Like

Hi @Barry_Sidebottom ,

Maybe this article can help you to do that: QuickTip: Using SF Symbols in your macOS apps – Xojo Programming Blog

How does that work with a Toolbar?

Update: It doesn’t. :man_facepalming: I just finished the article, that should not be shared as an example. That’s a hack at best, and the headline misleads to make Xojo sound more capable than it is.

I create Pictures on macOS Big Sur in the Background and draw the Symbols on them. After, you can use it as ToolbarButton.Icon. You still need Declares on macOS to set it as a Template Picture.

You need to properly set a template image and Xojo can’t. I remember reading problems with doing so and changing the Enabled state of a button wiping out the changes.

The thing here is, I really want to be able to do it the right way. Color icons on 10.15 and lower, line icons on big sur. The problem is, I haven’t seen anyone get it done except the IDE. (My understanding is that what Beatrix has done is line icons on all versions)

1 Like

I forgot to add that setting the template is only possible with the MBS plugin.

1 Like

Hello
with the Unicode function, the
Symbols can be retrieved as text and attached to any
Position to be edited
small example

https://www.dropbox.com/s/kcg4gmewwb88426/neue-graphics2-2021.xojo_binary_project?dl=1

Can’t speak for anyone else , but I am so tired of UI changes causing us to waste time playing catch-up and ‘me too’

Apple never has to worry about this… any time they change , they only have to look like the new stuff.

I’ve made positive experiences with

This blog article shows you which API to use to obtain a SFSymbol that will work with a toolbar button.
https://ohanaware.com/blog/202048/Preparing-your-Xojo-made-Mac-App-for-Big-Sur---part-4.html

This is a help page from App Wrapper, which allows you to “rasterize” a SF Symbol for use on older versions of the macOS.
https://www.ohanaware.com/appwrapper/aw4help/en.lproj/interface/paneContentsAddSFSymbol.html

Hey guys, thanks for all the suggestions, I’m slowly working through them. I may have accidentally misled some of you though. I didn’t realise that the examples I quoted at the top of the XOJO interface are a toolbar, I thought they were just buttons. The info is still good but I’m really trying to create individual buttons. For example, I have some text displayed and want to have a “button” next to it to edit. When clicked a new window will appear to edit the text. I want that button to have eg a pencil or pentip in the new formats rather than text saying “edit”. Hope that’s clearer.

What “button” or other control would you use here and how do I embed the graphic onto it?

Thanks,
Barry

That’s what you use a canvas for:

Screen Shot 2021-04-29 at 09.16.57

I don’t have buttons in outline style but the same principle applies: use a PDF in black-and-white and that’s it. Even in a listbox this works fine:
Screen Shot 2021-04-29 at 09.19.41

Oh, sorry!

I thought the article provided enough info to figure out how to do it.

So, for example, with this code in the Open event from a Toolbar:

Var item As New ToolbarButton
Var p As New Picture(32,32)

Var s As String = SFSymbol.Name("house")

Var g As Graphics = p.Graphics
g.DrawingColor = Color.red
g.FontSize = 22
g.DrawText(s,0,22)
item.Icon = p
item.Caption = "Hello"

Me.AddButton item

You can get this glyph in the icon for the toolbar (red coloured):

Wouldn’t that be PNG? You can export PDF but that seems a little peculiar.

Instead of an 1x and a 2x file I make one PDF because PDF like SVG is a vector format.

Thanks for clarification. Did not know implications of this.

1 Like

For a button I subclass a canvas of the right size. That way I can give it some of the basic things like change colour when you hover over it, or change colour when you click it, cancel all that it you drag the mouse pointer out of the button and then let go (and restore its colour), etc. Use the paint event to define its actual shape and put an icon on it.

Then if I have different types of button I can subclass my base type and add events there, too.

This minimises the amount of code in each actual button (for me, just MouseUp and Open), while Paint, MouseExit, MouseDown are to be found in the base class.

SF Symbols are unclear and ugly.
Color, three-dimensional icons are more intuitive, much easier to identify and they are pleasant for eyes:

1 Like