What is the fastest and easiest way to create GUIs in Anki-Addons?

Add-ons
5

After looking into this more GUI creation still seems extremely complicated for something so simple and so useful.

However, I stumbled across a GUI library that makes creating GUIs extremely easy – if I can get it to work, that is. This library is PySimpleGUI. Let me post some example code to demonstrate how easy it is to create quite complex GUIs with it:

from aqt.utils import showInfo

from . import PySimpleGUIQt as sg     # Part 1 - The import

# Define the window's contents
layout = [                            # Part 2 - The Layout
  [sg.Text("Enter some text:")],
  [sg.Multiline(default_text = "Lorem ipsum dolor sit amet...", key="long_text", size=(500, 200))],
  [sg.Text("Select a priority:")],
  [sg.Radio("CODE RED", "prio", key="prio_1"), sg.Radio("Middle priority", "prio", key="prio_2"), sg.Radio("low priority", "prio", key="prio_3", default=True)],
  [sg.Checkbox("Oh look, a checkbox", key="the_only_checkbox")],
  [sg.Ok(), sg.Cancel()]
]

# Create the window
window = sg.Window('Random demo window', layout, element_padding=(7, 7))        # Part 3 - Window Defintion

# Display and interact with the Window
event, values = window.read()                   # Part 4 - Event loop or Window.read call

print(values)

# Finish up by removing from the screen
window.close()                                  # Part 5 - Close the Window

This produces the following dialogue:

image

Output:

{‘long_text’: ‘Lorem ipsum dolor sit amet…’, ‘prio_1’: False, ‘prio_2’: False, ‘prio_3’: True, ‘the_only_checkbox’: False}

Very elegant syntax, just one import statement and no building or compiling whatsoever! :tada:

The main problem I have at the moment is that it also uses Qt (version 5) and this doesn’t play nice when I use it inside of Anki, for example when I want to show a dialogue after a user clicks on a menu option in the browser. Using window.close() in this situation leads to Anki shutting down completely. Also window.read() is non blocking and returns directly.

My current progress as a very simple addon for debugging. This does 2 things:

  • Shows a dialogue right when Anki starts. This works fine.
  • Adds the menu option “TEST TEST TEST” to the right click menu for notes in the browser. If you select this option, it doesn’t work (fails as specified above).

Getting this to work could make GUI creation much easier for a lot of people, so I really hope these issues can be fixed. I will try to incentivise people to work on this by posting a bounty for it later today.

There are also Tkinter- (= main version) and PySide2-versions of PySimpleGUI as well as several others. Those could also be an option.