Anki Add-ons and User Interface Design (Patreon)

Sorry first of all for not having posted the follow-up to my last blog post, yet! I'm still working on the final touches – but instead of leaving you guys hanging, I thought I should take this opportunity to showcase one of my favorite Anki add-on development tools: Qt Designer.

Whenever you run into a fancy user interface in Anki, chances are that it was created in Qt Designer. Qt Designer is to UI layouts what Word is to text documents: It allows you to rapidly push out a nice and clean product without having to manually specify all ins and outs of the design through code.

When I first started creating add-ons for Anki I wasn't familiar with Qt Designer; and if you look at the source code of add-ons like Image Occlusion Enhanced or Review Heatmap that still shows! Many of these earlier works of mine contain manually crafted user interfaces. These worked fine at the time, but as I've been adding more features and options to my add-ons I have found that the inflexibility of these UIs has really started to impede my development speed.

So in updating my add-ons to work with Anki 2.1, one of my major goals has been to also transition their UIs to Qt Designer. The one I have been working on lately is Review Heatmap's settings screen, as showcased in the screencast above. If you look very closely you might even find a cool new feature or two tucked away between all of the familiar options!

In any case, I hope you guys enjoyed this quick look behind the scenes of my development process. More on this to follow soon, so stay tuned!