[Add-on Dev] How can I add a widget to a certain page?

Anki Development
1

Hi guys. I’m trying to develop my first ever Anki addon, but I’m not super sure where to start. I’ve read the Addon docs from Anki and How to write addons by example, and I have a lot of experience with Python. But I still can’t quite figure some stuff out.

I don’t want to create anything complicated. All I’m trying to do is make a little progress bar that shows how many cards are learned, new, and how many untouched ones are remaining in the deck.

I tried looking at source code for some simple addons, but they usually don’t involve any gui elements, or only add stuff to the main window. I wan this bar thing to be visible only on the deck preview page (like in this image below)

Screenshot 5784-02-20 at 20.16.25
Screenshot 5784-02-20 at 20.16.251434×1138 63.8 KB

So my precise question is this: How can I add a Qt Widget to a certain page in Anki? I tried looking up some tutorials on using qt with python, but obviously they all involved making one’s own app from scratch (often with qt designer), and not adding something to an existing application.

I’m sorry if this seems like a trivial question, but I’m seriously stuck. If you know any resources that would help answer it, please send me in the right direction.

Other questions I have (I don’t expect a response to these but I figured I’d shoot my shot anyway):

  • How can I get cards from a certain deck instead of the whole collection?
  • How can I determine the status [new/learning/review] of those cards?

Thank you in advance!!

2

The main area is a webview, so you can’t add Qt widgets to it - you need to inject HTML instead, using a hook.

1 Like
3

I see. I’m looking around in genhooks_gui.py right now, and I’m guessing the hook I would be looking for is webview_will_set_content? I’m assuming I would then fetch the data I need from python, insert that into some html, and then use the hook to inject that into the webview. However, I’m not quite sure how to inject html using the hook, or how to only do it for a certain page. Is there a way to inspect the html on the anki webviews?

Sorry for the lengthy follow-up question, if you have any resources or things I could “just look up” please let me know.

4

Try checking these: AnkiWebView Inspector, Debugging - Writing Anki Add-ons

1 Like
5

You’ve posted a screenshot of an add-on that does something similar to what you’re trying to do - reviewing its source code should give you some hints.

1 Like
6

Thanks for the tip. It’s a pretty complex addon so I’m having trouble finding exactly what I’m looking for, but I’ll keep digging around.

7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.