Urgent Feature Request: Drawing and Highlighting in Image Occlusion Mode

Hello,

I’m writing this long and detailed post on behalf of several other users with the same request, so please bear with me.

The built-in Image Occlusion on iPad has been really beneficial, and kudos to the team for its seamless integration.

However, one critical feature is missing in Image Occlusion mode: the ability to draw and highlight on images during card reviews.

This feature is available on the desktop add-on, but it becomes really tedious and almost impossible to annotate so many images on desktop rather than iPad.

I, along with almost everyone in my class (as well as in college), use image occlusion to study numerous slides, screenshots, books, and other visual materials. During reviews, we usually annotate and highlight stuff, and it’s a critical part of the learning process. Unfortunately, now all of us are facing an existential crisis since the draw and highlight buttons are missing on AnkiMobile’s image occlusion editor.

Nowadays, everyone takes notes on iPads using the Apple pencil, and it would be truly transformational if we could use the pencil to annotate images on Anki itself. I’ve seen this request on several posts on this forum and on Reddit. Since we bulk add images, it’s nearly impossible to take a screenshot of every single image, then annotate on the iPad, and paste it again. This also messes up the image occlusion.

One of the several benefits of this feature would be the ability to bulk add cards and then study them gradually using the ‘New Cards Limit,’ annotating along the way for better understanding. Otherwise, we would have to first annotate all the images and then add cards on Anki using image occlusion. This would save exponential amounts of time and effort and structure our study routine in a more robust manner.

I understand that the team must be busy developing so many amazing features, but please look into this feature request on an urgent basis because this is literally a serious issue for everyone who uses image occlusion and has far reaching benefits.

Thank You.

PS : Here are some of the other posts requesting similar feature:

Can you provide a few before/after examples that demonstrate the kinds of annotations you were making with the add-on / wish to make?

For image annotation, this can be used Free drawing | Fabric.js Demos, I am thinking about adding it as transparent image over image. So, there will be one more layer with annotation over image, one occlusion mask and last layer is the original image. Now we have to store two image, because annotation will be free drawing storing in field will complicate it.

1 Like

Yes sure!

For the sake of simplicity and explaining you the situation more clearly, I’ll use the following example.

Let’s say this is the piece of info that I want to remember and I have hundreds of such pages to study for one subject.

To speed up the process, I would first use Image Occlusion to mask the particular areas I wish to remember. (And I would do it in bulk i.e. for all the pages of that particular book.)

Now I have the complete book masked. Let’s say I made 100 cards and have 10 days to study them. So, I would set the ‘New Card Limit’ for that deck to 10, this would allow me to cover the entire material in a manageable way.

Then, on my first review I would classify the stuff which is important as per my requirements and highlight & annotate them through this process -

Step 1. I’ll use the hide mask button

Step 2. Use Apple Pencil on iPad (or use PC) to draw and highlight to achieve this:-

This would allow me to save time, highlight the important info so that I can review quickly, handle my study material in a much more manageable way and fully utilize the apple pencil features on Anki.

Yes this would be a life saver! Can you please add this feature as soon as possible as an urgent request? This feature could have so many benefits as listed above.
Thank you so much!

the ability to draw and highlight on images during card reviews.

Sorry, it is still not clear. Want to do this during review?

It requires editing of notes, which is not available in Anki. For editing of note you have to use note editor.

I am intended to add a button to enable/disable draw mode in mask editor using Free drawing | Fabric.js Demos, which available during edit of notes.

1 Like

Yes a draw button in mask editor is all that is required.
Sorry for the confusion.

Also, is it possible to add a highlight button as well? Like just a opaque colour pen drawing button.

It can also be done after approval from dae.

1 Like

Thank you so much for your willingness to help and implement this so fast! I hope he approves it soon.

@dabby thanks, that was helpful. I need to temper your expectations a bit: it will take a while for us to decide on the design, implement it, and update the various clients.

I’ve opened an issue where we can discuss this further: Freehand annotations in image occlusion · Issue #2980 · ankitects/anki · GitHub

1 Like

I’ve made a comment on Freehand annotations in image occlusion · Issue #2980 · ankitects/anki · GitHub

Is it visible @dae, @krmanik ?

No, it is not visible, you can add comments here also.

1 Like

Hello

First, I would like to appreciate and express my gratitude for the prompt and swift response to my request by @dae , @krmanik and @glutanimate.

There are a few concerns regarding my feature request which I would like to address.

If I had to describe my request in one crisp line it would be - “Image Annotation Capability for iPad”.

And what feature did I ultimately request?

  • A draw button in IO editor
  • A simple highlight button in IO editor which is essentially just a draw button with low opacity. (not specifically a ‘text’ highlight button)

The same was acknowledged by @dae here:

It requests the ability to add annotations to images, such as:

  • freehand drawing of arrows & text
  • highlighting portions of the image

But there seems to be some confusion regarding the annotated image I used.

I think what makes OP’s feature request tricky is that we would not actually be able to easily satisfy it by just adding a couple of drawing capabilities to IO or re-purposing the ones we have at hand.

Take this screenshot, for instance:

I could totally see how the annotations here might seem like a small step from what we currently have in IO, but I think there is a lot that would actually go into enabling them in a usable way. For instance, I have a hard time imagining users finding repurposed IO rectangles sufficient as a means of highlighting text. As an iPad user for instance, I think I would very quickly return to just using the built-in image annotation features of iOS.

So off the top of my head, to fulfill OP’s feature request, I think we would need:

A freehand pencil tool
A freehand text marker tool
Customizable colors
Customizable opacity
Customizable stroke/brush width

Here, I would like to state that the annotated image I used on the forum was just an illustration to explain the team my feature request in a more simplified manner. In no way it was intended to ask for sophisticated note editor capabilities. All that was requested were bare-bones draw and highlight buttons. Nothing else was requested, not even different color options.

However, I do acknowledge my mistake in not being more specific about it. I sincerely apologize if it caused any confusion.

To maybe start by revisiting the feature request, looking at the posts linked in the thread, I actually think that none of the suggestions there are specific to IO. In all cases it’s primarily users looking for a way to draw on images within the context of Anki(Mobile), but not necessarily with the goal of creating IO notes. I actually don’t think that a single one of them mentions IO out of the gate, besides this thread, which is unrelated to image annotations.

@glutanimate is partially correct here. Yes, it is correct that the capability to draw on images within the context of AnkiMobile is the primary request in those posts which is precisely why I didn’t want to repeat that same request again.

But to say that

  • I actually don’t think that a single one of them mentions IO out of the gate

is actually wrong. Because in the very first thread I mentioned, the user clearly talks about being able to annotate in IO editor.

Now, why did I primarily focus on a niche solution applicable only to Image Occlusion?

  • Having Image Annotation capability on Anki (especially on AnkiMobile) as per @glutanimate’s 2nd proposal is the ultimate dream come true scenario for all AnkiMobile users wishing to annotate images using an Apple Pencil directly on the AnkiMobile app. However, it was my understanding that it would be far more easier and quicker to add just two buttons (draw and highlight) on IO editor since the whole ecosystem to edit images is already present (to be fair, after reading all the discussions above about how to actually implement it, I do realize that it’s a fairly complicated process). The two buttons can be a quick fix to the image annotation feature request for the time being. And having dedicated draw and highlight buttons on IO editor would only enhance it’s functionality further since everybody would want a handy option to annotate the image if they feel the need (just like a text button, a user might want to draw something instead of typing)

  • I and my friends (along with countless others) primarily use Image Occlusion to create cards. While it’s true that most users add pre-annotated cards to test themselves, but with just these two buttons, we can instead bulk add cards and make the process much faster. This way, we could annotate once we add all the cards (as described in my forum post).
    -This would also help us manage the material in a more efficient manner (again, as described in my forum post).
    -I do acknowledge that initially, only a handful of users might want to use Image Occlusion this way. However, you may appreciate the fact that such a ‘method of learning’ is possible, that too with just the addition of two more buttons. This could be start of something new!

  • This solution would also significantly reduce the need to use other note editor apps in cases where the user ‘just’ needs to simply draw or write something on images which are to be used for IO purposes. This will boost IO editor functionality on a standalone basis.

  • This solution has all the potential benefits of an existing text button in IO editor.

My Take

You guys (@dae , @krmanik and @glutanimate ) and the entire team behind the development of Anki are the driving force of this remarkable product. I’m just a mere user of this amazing platform. All of you are well-versed in the intricacies of Anki development and can engage in sophisticated technical discussions, but I have limited knowledge from the development perspective.

Given my limited knowledge, I would like to express my suggestion in simpler language -

  • Since @krmanik has already implemented the solution (kudos for such swift implementation), it would be great if the draw and highlight buttons are added soon after making the required changes (@glutanimate’s 1st proposal). We have our exams coming up soon and these two buttons would help us immensely. You’ll need time to test, implement, update the various clients. Additionally, we’ll need to create cards, annotate them, and thoroughly study the material. Draw and highlight buttons have been my only request from the start and I’m saying this with a bit of helplessness that if it weren’t urgent, I would have never bugged you guys so incessantly for just 2 buttons. Your support in expediting this process would be truly valuable. Please.

As @dae once said (Maybe this is in a different context, but still worth referencing)-

  • Finally @glutanimate’s second proposal would open up an entirely new dimension of capabilities for AnkiMobile users concerning the addition and editing of cards, fulfilling the long-standing demand for image annotation.

Thank you @dae for considering my request worth implementing and promptly opening a feature request.
Thank you @krmanik for such lightening fast implementation.
And thank you @glutanimate for such insightful ideas.

Thank you.

Thanks for taking the time to elaborate in detail @dabby - such feedback is quite helpful. I hope to follow up on the associated issue ticket tomorrow.

2 Likes