• Create with your project with npx trgkanki-template-cli init update_blocker base

  • Project name: update_blocker
  • Incoming branch: base

  Meta) Creating project

• Also Clone Anki's source code like mentioned here

  Meta) Cloning Anki's source code

Here's the vscode code view of our addon (left) and Anki (right) side by side.

Blocking addons

<aside> 💡 WIP

</aside>

Selecting individual addon on config.json is quite error-prone and cumbersome. So we'll integrate some kind of GUI of picking addons.

qdlg GUI system

Anki & many addon uses pyuic5 for UI code, but as a Windows guy I couldn't just use them. pyuic5 compiles *.ui files to *.py files. UI files looks like this

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>About</class>
 <widget class="QDialog" name="About">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>410</width>
    <height>664</height>
   </rect>
  </property>
  <property name="sizePolicy">
   <sizepolicy hsizetype="Preferred" vsizetype="Minimum">
    <horstretch>0</horstretch>
    <verstretch>0</verstretch>
   </sizepolicy>
  </property>
 </widget>
</ui>

It's like XML, but more complex. In addon_template, we use DSL-based UI system instead. We embed our UI structure directly in python code.

@QDlg("Table test")
def qDlgClass(dlg):
    obj = observable(TestClass())

    with Group("orig"):
        with Table():
            with Tr():
                with Td():
                    Text("LineEdit test")
                with Td():
                    LineEdit().model(obj, attr="text1")

            with Tr():
                with Td():
                    Text("Checkbox test")
                with Td():
                    CheckBox().model(obj, attr="check1")

            with Tr():
                with Td():
                    Text("Radiobutton test")
                with Td():
                    RadioButton("Item 1", value=1).model(obj, attr="selection1")
                    RadioButton("Item 2", value=2).model(obj, attr="selection1")
                    RadioButton("Item 3", value=3).model(obj, attr="selection1")
                    RadioButton("Item 4", value=4).model(obj, attr="selection1")
                    RadioButton("Item 5", value=5).model(obj, attr="selection1")

            with Tr():
                with Td():
                    Text("Array test")
                with Td():
                    CheckBox().model(obj.checkArray, index=0)
                    CheckBox().model(obj.checkArray, index=1)
                    CheckBox().model(obj.checkArray, index=2)

            with Tr():
                with Td(colspan=2):
                    Button("Dump").onClick(lambda: print(str(obj)))

Interested?

Designing our UI

Before designing a UI you need to install PyQt5. Install PyQt5 with

python3 -m pip install PyQt5

Then, copy src/tests/test_qdlg_/q_model.py to src/addonselector.py and change import qdlgproxy to import qdlg.