Troubleshooting | byglutanimate

Before reporting an issue on GitHub or the Anki support forums please check if any of the following steps fixes your problem:

Restart Anki
Try out a different image file
Reinstall Image Occlusion Enhanced. This will update the add-on to the latest version.
Only if you've modified your IO note type, i.e. the fields or the card template: Reset them to the defaults (see below)

To restore the original note type please do the following:

Go to Tools → Manage Note Types
Select the Image Occlusion Enhanced entry
Click on Fields
Add, Delete, or Rename the listed field entries in order to restore the following list of default fields:

ID (hidden)
Header
Image
Question Mask
Footer
Remarks
Sources
Extra 1
Extra 2
Answer Mask
Original Mask

In some instances resetting the note type might not work due to a corrupted database. If this is the case you will usually see an error message as soon as you try to edit the field list. Your only option to fix this lies in performing a database check via Tools → Check Database. Warning: this will remove all Image Occlusion notes you've created since modifying your IO note type.

Having performed the check, you might still be left with some empty cards in your decks. To remove these go to Tools → Empty cards. You should now be able to restore your IO note type by following steps 1-4 above.

Last updated: 2022-07-08 (IOE v1.4.0)

To restore the original card template please do the following:

Go to Tools → Manage Note Types
Select the Image Occlusion Enhanced entry
Click on Cards
If you are having trouble with extra cards being generated: There should only be one entry (IO Card) in the Card Type drop-down at the top. If there is more than one entry, please select it, and then under Options to the right, click Remove Card Type, confirming the prompt coming up. This will remove all extraneous cards you might have added by accident.
If you are having trouble with your cards always ending up in one deck: Click on Options and make sure that it says Deck override (off) in the menu. If the override is on you will have to click on that menu option and clear out the deck name in the window that appears subsequently.
If you are having trouble with your card formatting: Please fully restore the card template by copying and pasting the snippets below into the respective template fields.

Default Front Template

<div id\="io-header"\>{{Header}}</div\> <div id\="io-wrapper"\> <div id\="io-overlay"\>{{Question Mask}}</div\> <div id\="io-original"\>{{Image}}</div\> </div\> <div id\="io-footer"\>{{Footer}}</div\> <script\> // Prevent original image from loading before mask aFade \= 50, qFade \= 0; var mask \= document.querySelector('#io-overlay>img'); function loaded() { var original \= document.querySelector('#io-original'); original.style.visibility \= "visible"; } if (mask \=== null || mask.complete) { loaded(); } else { mask.addEventListener('load', loaded); } </script\> {{/Image}}

Default Styling

/* GENERAL CARD STYLE */ .card { font-family: "Helvetica LT Std", Helvetica, Arial, Sans; font-size: 150%; text-align: center; color: black; background-color: white; } /* OCCLUSION CSS START - don't edit this */ #io-overlay { position:absolute; top:0; width:100%; z-index:3 } #io-original { position:relative; top:0; width:100%; z-index:2; visibility: hidden; } #io-wrapper { position:relative; width: 100%; } /* OCCLUSION CSS END */ /* OTHER STYLES */ #io-header{ font-size: 1.1em; margin-bottom: 0.2em; } #io-footer{ max-width: 80%; margin-left: auto; margin-right: auto; margin-top: 0.8em; font-style: italic; } #io-extra-wrapper{ /* the wrapper is needed to center the left-aligned blocks below it */ width: 80%; margin-left: auto; margin-right: auto; margin-top: 0.5em; } #io-extra{ text-align:center; display: inline-block; } .io-extra-entry{ margin-top: 0.8em; font-size: 0.9em; text-align:left; } .io-field-descr{ margin-bottom: 0.2em; font-weight: bold; font-size: 1em; } #io-revl-btn { font-size: 0.5em; } /* ADJUSTMENTS FOR MOBILE DEVICES */ .mobile .card, .mobile #content { font-size: 120%; margin: 0; } .mobile #io-extra-wrapper { width: 95%; } .mobile #io-revl-btn { font-size: 0.8em; }

Default Back Template

<div id\="io-header"\>{{Header}}</div\> <div id\="io-wrapper"\> <div id\="io-overlay"\>{{Answer Mask}}</div\> <div id\="io-original"\>{{Image}}</div\> </div\> {{#Footer}}<div id\="io-footer"\>{{Footer}}</div\>{{/Footer}} <button id\="io-revl-btn" onclick\="toggle();"\>Toggle Masks</button\> <div id\="io-extra-wrapper"\> <div id\="io-extra"\> {{#Remarks}} <div class\="io-extra-entry"\> <div class\="io-field-descr"\>Remarks</div\>{{Remarks}} </div\> {{/Remarks}} {{#Sources}} <div class\="io-extra-entry"\> <div class\="io-field-descr"\>Sources</div\>{{Sources}} </div\> {{/Sources}} {{#Extra 1}} <div class\="io-extra-entry"\> <div class\="io-field-descr"\>Extra 1</div\>{{Extra 1}} </div\> {{/Extra 1}} {{#Extra 2}} <div class\="io-extra-entry"\> <div class\="io-field-descr"\>Extra 2</div\>{{Extra 2}} </div\> {{/Extra 2}} </div\> </div\> <script\> // Toggle answer mask on clicking the image var toggle \= function() { var amask \= document.getElementById('io-overlay'); if (amask.style.display \=== 'block' || amask.style.display \=== '') amask.style.display \= 'none'; else amask.style.display \= 'block' } // Prevent original image from loading before mask aFade \= 50, qFade \= 0; var mask \= document.querySelector('#io-overlay>img'); function loaded() { var original \= document.querySelector('#io-original'); original.style.visibility \= "visible"; } if (mask \=== null || mask.complete) { loaded(); } else { mask.addEventListener('load', loaded); } </script\> {{/Image}}

If you've renamed any of the fields listed in the note template you will have to change the field names accordingly in the Front and Back templates above.

Notes created with older versions of Image Occlusion 2.0 contain malformatted SVG files that are no longer supported by platforms such as iOS and Android. You can use this supplementary add-on to fix them.

Known issue on macOS. No workaround so far, I'm afraid.

Issue link

Another macOS issue. Sorry, but as with the previous issue the problem lies deeper than Image Occlusion or even Anki itself. So no fix so far.

Probably an issue with your local Image Occlusion note type. Please try restoring it to the defaults. Following that, please read this and update Image Occlusion Enhanced to the latest release. More recent versions of the add-on prevent you from creating new IO notes if your note type is misconfigured.

Forum link

If you're using Windows this might be because of special characters in your Windows user name. Some users have been able to fix this successfully by changing their Anki profile location and/or switching to a different Windows user name:

https://anki.tenderapp.com/discussions/add-ons/7636-image-occlusion

https://anki.tenderapp.com/discussions/add-ons/7714-image-occlusion-unicode-warning

If your user name doesn't contain any special characters you might just have to rename the file and or move it to a different directory, as outlined in the next section.

Issue link

Your image likely contains special characters that cause issues when using IO on Windows. Please try renaming your file and/or moving it to a directory that doesn't contain any special characters in its path.

Issue link

GIFs currently aren't supported on macOS and Windows.

Issue link

This could be because of two things:

You modified the Image Occlusion note type by accident, adding an empty card to the note. If so please refer to Card template.

You're drawing small additional shapes without noticing. This can happen sometimes as the editor is a bit over-sensitive when it comes to registering user input.

If you suspect that this is the case, try clicking on the grey background after you've drawn your occlusions. Then either use 'A' to highlight all shapes or 'Tab' to iterate through them. This should help you find accidental occlusions if there are any. Switching off the image layer in the layers sidebar on the right and zooming in slightly might make it easier to see them. Delete the additional shapes and the add-on should create the correct number of cards.

Please see above.

Please make sure to use the Labels layer when adding custom labels or other elements to the background picture. See here for more information: Custom Labels.

Make sure you have the right layer selected. Only shapes in the current layer are selectable.

The add-on will automatically try to use your last-used deck (the one you last added notes to). If you want to change the target deck you will have to use the deck selection button on the Fields Tab of the IO Editor (not the one in Anki's regular Editor window).

If your cards still end up in another deck you might have a deck override set for the Image Occlusion note type. Please refer to Card template for instructions on how to undo this.

Support for opacity is very buggy in SVG-Edit (the image editor used by IO). In the past this would cause a lot of headaches, especially for OS X users. You can imagine how frustrating it can be when all your occlusion shapes that were meant to cover up your labels suddenly come out transparent. That's why the add-on now automatically strips all types of opacity attributes from the mask image. There's some more information on this here.

If your workflow depends on having opacity available, you can edit the add-on's source code. Specifically you will have to replace this line in /image_occlusion_enhanced/ngen.py with:

This is a general issue with how Anki handles images that are rotated through their EXIF metadata. You will see the same behaviour in regular Anki flashcards. In order to display the images in their original orientation you will have to rotate them manually. Please see here for more information.

All versions of IO use an external library called SVG Edit to handle the actual mask editing. This is a javascript-based vector graphics editor that is primarily designed for the web, but we can use it in Anki by embedding it into a web view, which is essentially just a compact version of a web browser.

Although SVG Edit does include some adjustments for touchscreen devices, they don't work properly within Anki's web view, which is very old and plagued by bugs. In fact, the web view version Anki ships with [isn't even capable of telling touch devices apart from non-touch devices](https://bugs.webkit.org/show_bug.cgi?id=60879.

For the longest time IO would use SVG Edit's touch mode by default. This resulted in a lot of headaches for desktop users which constitute the majority of IO's userbase, and thus when I took over maintenance of the add-on I switched this around, so that SVG Edit would be set to use mouse events by default. With the current state of things, I had to choose between either forcing all users on touch devices to use slightly suboptimal controls, or making the add-on incredibly buggy on regular desktops. I went with the lesser of two evils, I think.

All of this is hopefully going to improve once Anki 2.1 comes out, and I find the time to update Image Occlusion for it. 2.1 uses a very modern web view that is based on Chromium and should have much better support for touch events.

Page 2

You can’t perform that action at this time.