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

Anki Add-ons
9

I think it is an option to create a widget without Qt Designer if it does not have a complex layout. I tried implementing the dialog in that image without using Qt Designer, so you can try it if you like.

from aqt import browser, gui_hooks, qt


class MyDialog(qt.QDialog):
    def __init__(self, parent=None) -> None:
        super().__init__(parent)

        # text box
        self.text_box_label = qt.QLabel()
        self.text_box_label.setText("Enter some text:")
        self.text_edit = qt.QTextEdit()

        # radio buttons
        self.radio_button_label = qt.QLabel()
        self.radio_button_label.setText("Select a priority:")
        self.radio_1 = qt.QRadioButton("CODE RED")
        self.radio_2 = qt.QRadioButton("Middle priority")
        self.radio_3 = qt.QRadioButton("Low priority")
        # radio button group
        self.button_group = qt.QButtonGroup()
        self.button_group.addButton(self.radio_1, 1)
        self.button_group.addButton(self.radio_2, 2)
        self.button_group.addButton(self.radio_3, 3)
        # set "Low priority" as default
        self.button_group.button(1).setChecked(True)
        # horizontal layout for radio buttons
        self.radio_button_hbox = qt.QHBoxLayout()
        self.radio_button_hbox.addWidget(self.radio_1)
        self.radio_button_hbox.addWidget(self.radio_2)
        self.radio_button_hbox.addWidget(self.radio_3)

        # checkbox
        self.checkbox = qt.QCheckBox("Oh look, a checkbox")

        # OK/Cancel buttons
        self.button_box = qt.QDialogButtonBox(
            qt.QDialogButtonBox.StandardButton.Ok
            | qt.QDialogButtonBox.StandardButton.Cancel
        )
        self.button_box.accepted.connect(self.accept)
        self.button_box.rejected.connect(self.reject)

        # layout
        layout = qt.QVBoxLayout()
        layout.addWidget(self.text_box_label)
        layout.addWidget(self.text_edit)
        layout.addWidget(self.radio_button_label)
        layout.addLayout(self.radio_button_hbox)
        layout.addWidget(self.checkbox)
        layout.addWidget(self.button_box)
        self.setLayout(layout)


def my_action() -> None:
    dialog = MyDialog()
    if dialog.exec():
        # when "OK" button is clicked
        print(f"Text: {dialog.text_edit.toPlainText()}")
        print(f"Priority: {dialog.button_group.checkedButton().text()}")
        checkbox_text = "checked" if dialog.checkbox.isChecked() else "unchecked"
        print(f"Checkbox: {checkbox_text}")
    else:
        print("Canceled!")


def on_browser_will_show_context_menu(browser: browser.Browser, menu: qt.QMenu) -> None:
    menu.addAction("My Dialog", my_action)


gui_hooks.browser_will_show_context_menu.append(on_browser_will_show_context_menu)

qdialog

7 Likes