Allow changing the colour of the occluding shapes in inbuilt Image Occlusion

I believe even the shape of the rectangles in image occlusions give hints and allow the user to remember the “shape” of image occlusion questions, especially when the shape is something other than rectangular.

Suppose if the image to be occluded was a diagram on a white background, or a chemical reaction on a black background. By changing the colour of the occluding shape to the background colour, the shape will be hidden. Now one will guess purely based on what is missing in the image. Also, it makes the cards look much cleaner.

This feature has been requested before but it has been hard to find because inbuilt image occlusion and the image occlusion addon have the same names.

Option 1

You could change the color in the card templates. E.g.

--inactive-shape-color: #2a6666;
--active-shape-color: #bd25b8;

will look like this:

I’m not sure if there is an easy way to get the background color automatically for all your occlusions though. Apparently a canvas can be used to get the average color of your picture, but not sure how great that works.

Option 2

You could also add a new field which would look like this:


In the BG_Color field you’d paste the hex value of the color you want for your picture (you can find out the color with a color picker tool).

Then, in the templates, add a bit of js (make sure it’s before the try catch block):

<script>
document.getElementById('image-occlusion-canvas').style.setProperty('--inactive-shape-color', "#{{BG_Color}}");

try {
    anki.imageOcclusion.setup();
} catch (exc) {
    document.getElementById("err").innerHTML = `Error loading image occlusion. Is your Anki version up to date?<br><br>${exc}`;
}
</script>

Result:

3 Likes