Search code examples
python-3.xuser-interfacepython-3.7

How to add buttons with icons in python toga


I am creating a gui app for GTK with python-toga and was wondering if it was possible to create a toga.Button() with an icon. I've tried using toga.Command() to create a command which has an option to add an icon but adding the command to a box doesn't work.

This is the part of my code that doesn't work:

search_box = toga.Box()
search_box.direction = 'row'
search_box.style.padding = 10
search_box.style.flex = 1

search_label = toga.Label('Search')
search_label.style.padding = (10, 10, 10, 0)

search_input = toga.TextInput(placeholder='Search')
search_input.style.flex = 1
search_input.style.color = "#FFFFFF"

search_command = toga.Command(action=self.test, label='Search') # self.test is a function that just prints user input taken from search_input
search_command.tooltip = 'Search For The Item'
search_command.icon = 'icons/search.png'

search_box.add(search_label)
search_box.add(search_input)
search_box.add(search_command) # This line errors out

I get the following error when I run the above code:

root@host:~/c0balt# briefcase dev

[c0balt] Starting in dev mode...
[GTK+] Not implemented: Widget.set_hidden()
[GTK+] Not implemented: Widget.set_hidden()
[GTK+] Not implemented: Widget.set_hidden()
[GTK+] Not implemented: TextInput.set_font()
[GTK+] Not implemented: Widget.set_hidden()
[GTK+] Not implemented: TextInput.set_font()
[GTK+] Not implemented: TextInput.set_alignment()
[GTK+] Not implemented: TextInput.set_font()
[GTK+] Not implemented: TextInput.set_font()
[GTK+] Not implemented: TextInput.set_font()
Traceback (most recent call last):
  File "/usr/local/lib/python3.7/dist-packages/toga_gtk/app.py", line 91, in gtk_startup
    self.interface.startup()
  File "/root/c0balt/src/c0balt/app.py", line 41, in startup
    search_box.add(search_command)
  File "/usr/local/lib/python3.7/dist-packages/toga/widgets/base.py", line 66, in add
    super().add(child)
  File "/usr/local/lib/python3.7/dist-packages/travertino/node.py", line 80, in add
    set_root(child, self.root)
  File "/usr/local/lib/python3.7/dist-packages/travertino/node.py", line 6, in set_root
    for child in node.children:
AttributeError: 'Command' object has no attribute 'children'

Tl;dr

How to add buttons in python-toga that have an icon instead of just plain text?


Solution

  • Check out this minimal example (app.py):

    import toga
    from toga import Group
    from toga.style.pack import Pack, COLUMN
    
    
    def build(app):
        main_box = toga.Box(style=Pack(direction=COLUMN, padding_top=50))
        settings_icon = "icons/example.png"
    
        toolbar_grp: Group = toga.Group('Toolbar')
    
        settings_cmd = toga.Command(
            settings_action,
            label='Settings',
            tooltip='Change Settings',
            # shortcut=toga.Key.MOD_1 + 'k',
            icon=settings_icon,
            group=toolbar_grp
        )
    
        app.commands.add(settings_cmd)
        app.main_window.toolbar.add(settings_cmd)
    
        return main_box
    
    
    def settings_action(widget):
        print("Settings")
    
    
    def main():
        return toga.App('Example', startup=build)
    
    
    if __name__ == '__main__':
        main().main_loop()
    

    In order to run this example, you have to place an icon on a folder called icons next to your resources folder and place a file called example.png in there.