Image Occlusion Enhanced [Official Support Thread]

I think that I’ve got it working at last. But Change fill color did not change the color of the text. I just added a new card, and for whatever reason it seems to be working for me now. At least for the moment! Fingers crossed for the future, since it’s a great tool.

Hi! I seem to have the same problem. I tried to tinker with the various settings, and the problem seems to occur when the image is stretched to fit the screen (i.e. it is smaller than the available screen real estate). It does not seem to happen when the image needs to be shrunk (i.e. it is larger than the available screen real estate). So enlarging the image (to at least the size of the screen) before importing it to Anki seems to provide a rather inelegant solution. Is there perhaps a more robust/graceful solution to this phenomenon? Thanks in advance.

Edit: I forgot to mention, that I am using .svg images and on Anki version 2.1.44. I tried downgrading to version 2.1.40., but that didn’t help. Also I tried using a .jpg and a .png, and the problem only seems to affect .svg

Any help on the screen flicker issue? I sent glutanimate the test deck like he wanted, he didn’t reply. I’d really appreciate if someone could help me out.

Hi, I just installed the enhanced image occlusion add-on and no matter what I do, every time I make a card and it says “Card Added” they do not appear in my deck, when I go to Browse Cards, they are there along with the rest of the cards in the deck, however when I try to study the deck, they do not appear. The number of cards in the deck stays the same despite the “Cards added” pop up appearing when I create them.

Hi there!
I’ve been getting this error message whenever i try to create a card:

Error
An error occurred. Please start Anki while holding down the shift key, which will temporarily disable the add-ons you have installed.
If the issue only occurs when add-ons are enabled, please use the Tools>Add-ons menu item to disable some add-ons and restart Anki, repeat until you discover the add-on that is causing the problem.
When you’ve discovered the add-on that is causing the problem, please report the issue on the add-ons section of our support site.
Debug info:
Anki 2.1.49 (dc80804a) Python 3.8.6 Qt 5.14.2 PyQt 5.14.2
Platform: Mac 10.15.7
Flags: frz=True ao=True sv=2
Add-ons, last update check: 2022-03-14 11:25:02
Add-ons possibly involved: ⁨Image Occlusion Enhanced for Anki 21 alpha⁩

Caught exception:
Traceback (most recent call last):
File “aqt/webview.py”, line 541, in handler
File “/Users/biance/Library/Application Support/Anki2/addons21/1374772155/add.py”, line 278, in
lambda val, choice=choice, close=close: self._onAddNotesButton(choice, close, val))
File “/Users/biance/Library/Application Support/Anki2/addons21/1374772155/add.py”, line 293, in _onAddNotesButton
r = gen.generateNotes()
File “/Users/biance/Library/Application Support/Anki2/addons21/1374772155/ngen.py”, line 80, in generateNotes
(svg_node, layer_node) = self._getMnodesAndSetIds()
File “/Users/biance/Library/Application Support/Anki2/addons21/1374772155/ngen.py”, line 190, in _getMnodesAndSetIds
mask_doc = minidom.parseString(self.new_svg.encode(‘utf-8’))
AttributeError: ‘NoneType’ object has no attribute ‘encode’

Have you tried anything other than R?
R is used by vanilla Anki as a shortcut for “Replay audio”, which is probably the reason why it doesn’t work for the add-on.

1 Like

Hey everyone, happy to say that Image Occlusion Enhanced v1.4.0 is now available on AnkiWeb, bringing native support for Anki 2.1.50 and tackling a number of long-standing bugs and feature-requests (with more to follow in the near future).

If you find any regressions with this release (in particular things not working that did work on 2.1.49), please don’t hesitate to post a bug report, or ping me here directly. Thanks!

The full changelog follows below:

Image Occlusion Enhanced v1.4.0

IMPORTANT: This release is only compatible with Anki 2.1.50 and up. If you are on an earlier Anki release, copying the add-on code on AnkiWeb into Anki will automatically download a compatible version of the add-on for you, so there are no extra steps you have to take. Just be aware that going forward, new features and fixes will likely only be available for Anki 2.1.50 and up.

Still, as of writing this changelog (2022-04-09), unless you have a strong reason to switch to 2.1.50, I would recommend to hold off from upgrading just a tad bit longer until things around the release and add-on support have settled a bit.

Added

  • Added support for Anki 2.1.50 and up. Both Qt6 and Qt5 builds are supported. On Apple silicon the add-on now benefits from the performance improvements that Anki’s native Qt6 build provides.
  • Added a confirmation prompt when attempting to close the window via Escape when there are unsaved changes present.

Fixed

  • Fixed instances of cards being saved to the wrong deck (and thus seemingly going missing).
  • Fixed instances of images not being automatically resized to the canvas upon launching IO

Changes

  • When creating occlusions from images in the clipboard, the add-on will now follow Anki’s preferences to determine whether to save images as PNG or JPG files (thanks to @zjosua), with JPG being the default. JPG files are smaller and thus make syncs quicker, but come with a small quality penalty. If you prefer using PNG files you can change the add-on’s behavior by heading to Anki’s main preferences under Tools → Preferences and setting the checkmark at “Paste clipboard images as PNG”.

Other changes

  • [Development] Reworked project dependency management, making it easier to set Image Occlusion up for development
  • Set some of the foundations for potentially adding locale support in the future (thanks to @5hir0kur0 and @Polymehr!)
  • Other fixes and improvements thanks to @zjosua, @Arthur-Milchior, @telotortium, and @davidculley
4 Likes

If I may, I’d want to make a recommendation for a feature.

You may have a very large image that you want to use with the add-on. However, because Anki scales the images to fit in the review window, the occlusions are barely visible in the automatically scaled images. However, there is a simple remedy. Simply increase the maximum and minimum height and width in the card template, and the image will be restored to its original size (Styling & HTML - Anki Manual). This is where your add-on comes into play. If I have occlusions in an image that exceeds the size of the review window, some of them will eventually be outside of my vision, and if the occlusion is the “active” one, I’ll have to scroll up and down, left and right to find it.

As a workaround, I’ve been utilizing a script kindly and generously provided by @kleinerpirat, which will auto-scroll to the “active” occlusion. That is something I would want to see natively included in the add-on. I hope you’ll consider my suggestion.

1 Like

Thanks for the suggestion! The add-on should preserve the scroll position between question and answer side currently (if this didn’t break between Anki version updates), but automatically scrolling to the prompted mask would of course be even neater.

Do you perhaps have a link to the script handy? I’d be happy to take a look and see if this is something that would work with IO’s native template.

Because the original link is no longer working, I’ve uploaded the note type to Gofile - Free file sharing and storage platform. There are comments from the author on the front and back template so you should easily locate the script.

I ran across a problem with the masks’ position while making the cards for the note-type sample.
You’ll see that the mask is misplaced in card 1, despite the fact that it is correctly placed in the add-on editor. Perhaps it has something to do with the fact that 2.1.50 automatically resizes the picture in the fields, causing the add-on to use the coordinates of the scaled image?

I rewrote the script a bit. It fetches the SVG code from the image src, creates a dummy copy and inserts it as overlay, scrolls to the active occlusion and then removes the dummy again.

/** Auto-scroll for Image Occlusion Enhanced
* @author Matthias Metelka <github.com/kleinerpirat>
*/
(async function () {
   const img = document.querySelector("#io-overlay>img");
   const file = await fetch(img.src);
   const mask = new DOMParser()
       .parseFromString(await file.text(), "image/svg+xml")
       .querySelector("svg");

   mask.removeAttribute("height");
   mask.removeAttribute("width");
   mask.style.cssText = "position: absolute; top: 0; right: 0; bottom: 0; left: 0;";
   img.parentNode.insertBefore(mask, img);

   mask.querySelector("rect.qshape").scrollIntoView({
       block: "center",
       inline: "center",
   });
   mask.remove();
})();

Of course, you’re free to use or modify it for your add-on! :+1:

3 Likes

‘Toggle Masks’ feature removes the Labels layer leaving unlabelled image.

Hello, I am new to this so this may be a really dumb question.

I have been using the ‘Labels’ layer to add labels to anatomical images. I then mask them using the ‘mask’ layer. I add the cards to my decks using ‘Hide all, guess one’.

There is no issue when revealing the actual card.

However, after clicking ‘Toggle Masks’, all the labels disappear along with the masks leaving the unlabelled image.

Is there a way to stop Labels disappearing when clicking ‘toggle masks’?

[Images removed due to copyright infringement]

1 Like

I’m brand new to Anki and image occlusion enhanced is my only plug-in right now. I just got this error message and I followed the instructions (restarting while holding shift) but I’m unsure of what to do now. Does this mean I can’t use this plug in anymore?? I copied and pasted the error message Anki gives me but removed my username/ account info from this forum:

Error

An error occurred. Please start Anki while holding down the shift key, which will temporarily disable the add-ons you have installed.

If the issue only occurs when add-ons are enabled, please use the Tools > Add-ons menu item to disable some add-ons and restart Anki, repeating until you discover the add-on that is causing the problem.

When you’ve discovered the add-on that is causing the problem, please report the issue on the [add-on support site]).

Debug info:

Anki 2.1.49 (dc80804a) Python 3.8.6 Qt 5.14.2 PyQt 5.14.2

Platform: Mac 10.13.6

Flags: frz=True ao=True sv=2

Add-ons, last update check: 2022-05-03 13:13:51

Add-ons possibly involved: ⁨Image Occlusion Enhanced for Anki 21 alpha⁩

Caught exception:

Traceback (most recent call last):

File “aqt/webview.py”, line 541, in handler

lambda val, choice=choice, close=close: self._onAddNotesButton(choice, close, val))

AttributeError: ‘NoneType’ object has no attribute ‘encode’

Hey there,
I wanted to compress my collection.media folder by changing from .png to .jpg for future IMO-cards.
Unfortunately IMO saves my screenshots as .png.

  • In the Anki settings I have the option to use .png unchecked
  • on macOS I changed the way screenshots are saved from .png (default) to .jpg (works)
    When I import a .jpg to IMO, it converts it to .png …
    I have the latest IMO-Addon update from Ankiweb.
    My Anki-version is 2.1.49 for macOS

May have a suggestion why and how I can fix it? :slight_smile: Thank you in advance!

I have almost complete the very first prototype of image occlusion for Anki Ecosystem.
Feature: Image occlusion by krmanik · Pull Request #1 · krmanik/anki · GitHub

I noticed that Image Occlusion Enhanced Anki Addon generates two svg file for each label in image. I think it will be decreased by using only one original mask for questions and answer.

The solution I will implement in my image occlusion project and I think it will be useful in Image Occlusion Enhanced also.

  1. Change image src tag for svg to embed and question mask and answer mask fields can be removed.
    Or may be GitHub - iconfu/svg-inject can be used to inject svg using img src tag.
  <embed src="original-mask.svg">
  1. Change scaling and transform to fit on original image in card template.
    var ioorig = document.getElementById("io-original");
    var nw = ioorig.children[0].naturalWidth;
    var w = ioorig.children[0].width;
    var scale = w / nw;
 
    var ioo = document.getElementById("io-overlay");
    ioo.style.transform = "scale("+scale+")";
    ioo.style.transformOrigin = "0 0";
  1. Now on front side the Id (hidden) is same for one shape in original svg file. The id will be used to change fill color on front side and hidden on back side.
    Front side
    document.getElementById("2c91cccc0fa24ec4be409dfaf1cf0a55-ao-1").style.fill = "#FF6E6E"
   Back side
   document.getElementById("2c91cccc0fa24ec4be409dfaf1cf0a55-ao-1").style.display = "none"

It will decrease the sync time and storage. Also less number of files in collection.media.

3 Likes

This looks very promising Mani. There were some rough edges while testing that I presume will be resolved in time:

  • I had to install this add-on first so the right notetype was available
  • I had to manually copy the original image into the media folder
  • There was no feedback that adding worked

@glutanimate I’d be interested to see your thoughts

1 Like

I am developing notetype and card template on top of Image Occlusion Enhanced. So, next commits will insert note type and card template from backend without need of the addon. All the issues mentioned will be resolved.

@dae @krmanik replied on the PR just now (as I think that moving the discussion there is going to make it easier to discuss further changes)

2 Likes

Thank you very much. I have added my reply and will consider the suggestions for better and improved Image Occlusion feature for Anki Ecosystem.

1 Like

Same problem here! Were you able to solve it?