Toolbar icon size

I’m creating a custom toolbar as per the example in the Toolbar and Command documentation. It says the large and small icons should be 24x24 and 16x16 respectively. But there seems to be a lot of wasted space around them. I tried 36x36 and it will fit in the toolbar space but I’m not sure if anything gets cropped. What is the maximum size of large and small icons for a toolbar?

The answer changed in SU 2016. Prior to that, the icons needed to be .png images at the sizes you state. In SU >= 2016, support was added for scalable vector icons (.svg in Windows, .pdf on Mac). Furthermore, the handling of display scaling was changed, so the buttons no longer use fixed absolute pixel sizes. If you provide vector icon files, SU will automatically scale them as necessary for the toolbar buttons and you no longer need two sizes (though for compatibility reasons a Command still has separate small and large icons). The code pattern these days looks something like:

      if(Sketchup.version.to_i >= 16)
        if(RUBY_PLATFORM =~ /darwin/)
          @cmd.small_icon = "button.pdf"
          @cmd.large_icon = "button.pdf"
        else
          @cmd.small_icon = "button.svg"
          @cmd.large_icon = "button.svg"
        end
      else
        @cmd.small_icon = "button16.png"
        @cmd.large_icon = "button24.png"
      end

Edit note: Using a vector program such as Inkscape it is easy to create a drawing and save it as both .svg and .pdf. You can also export it as 16x16 and 24x24 png images. However, sometimes these pngs look somewhat blurry, so picky developers may create separate pngs to get a cleaner appearance on pre-2016 SU.

2 Likes

Thanks for the advise.

I only have Windows PC and didn’t know that Mac couldn’t recognize .svg format.

A costumer who bought my extension pointed that he could not see the toolbar icon and after some digging this was the issue.

Thank you!

Hello,

I don’t have a mac and was wondering if the process was similar to setting up the cursor?

Here is an example but can someone test it on mac and let me know if it’s correct?

# ...
def initialize
    # Create Cursor...
    path = File.dirname(__FILE__)
    @cursor_id = nil

    if(Sketchup.version.to_i >= 16)
        if(RUBY_PLATFORM =~ /darwin/)
            cursor_path = File.join(path, "assets/pdf/cursor.pdf")
        else
            cursor_path = File.join(path, "assets/svg/cursor.svg")
        end
    else
        cursor_path = File.join(path, "assets/png/cursor.png")
    end

    @cursor_id = UI.create_cursor(cursor_path, 8, 0) if cursor_path
end

def onSetCursor
    UI.set_cursor(@cursor_id)
end
# ...

Thanks in advance! :smiley:

That is the approach I am using so I hope it works on Mac…

Some cosmetic things: you can extract the logic determining the file extension to a separate method, and reuse it for different cursors and icons, while also making the initialize method shorter and easier to read. On top of that you can replace the nested if statements with a single if-elsif-else flow to lower the complexity and increase the readability of the code even further. For larger projects it really helps to keep the code as tidy as possible!

1 Like

You really should do the version and platform determination at the top of your Tool class only once when the class is loaded into Ruby. I makes no sense to do this each time a tool instance is instantiated.

Myself,… I’d use a constant reference for the id integer since it should not change during the session.

(The current example you give will waste SketchUp’s available object ids. If everyone did this in this manner, SketchUp might run out of ids to use. … and this happened in the past!)