Hey, i created my very first add on and this is the official support thread for the add-on SimpleMask. If you have any questions, or suggestions, you can leave them here.
3 Likes
This is great!
This will be useful for anyone who doesnât like the standard field type and simply needs to create a custom occlusion on any card type.
I wish you much patience in this difficult task 
The beginning is always easy, but then, when they want a lot of features, drop-down buttons arenât enough, and you have to create a separate window with all the functionality. If they want to change the size right away, you have to edit it. And the more different requirements you have, the more you reach the point where you need a custom note type and implement some complex functionality there to avoid duplicating code.
Hereâs what mine looks like:
<img src="paste-52f7b07c133f27e14b8746d06b24e6141036246c.jpg" class="sio-image">
<div class="sio-rect" style="left: 10.7306%; top: 8.30389%; width: 16.9687%; height: 11.1307%;" word="" hint=""></div>
<div class="sio-rect" style="left: 36.9863%; top: 12.1908%; width: 20.1651%; height: 10.6007%;" word="" hint=""></div>
<div class="sio-rect" style="left: 65.7534%; top: 21.3781%; width: 16.2838%; height: 7.77385%;" word="" hint=""></div>
<div class="sio-rect" style="left: 25.1142%; top: 32.5088%; width: 18.3386%; height: 10.424%;" word="" hint=""></div>
<div class="sio-rect" style="left: 52.7397%; top: 34.2756%; width: 22.9048%; height: 12.0141%;" word="" hint=""></div>
<div class="sio-rect" style="left: 12.5571%; top: 48.7633%; width: 18.7952%; height: 9.54064%;" word="" hint=""></div>
<div class="sio-rect" style="left: 40.1827%; top: 51.4134%; width: 28.1559%; height: 10.6007%;" word="" hint=""></div>
<div class="sio-rect" style="left: 73.9726%; top: 54.417%; width: 14.0007%; height: 10.2473%;" word="" hint=""></div>
<div class="sio-rect" style="left: 21.6895%; top: 65.9011%; width: 28.3842%; height: 7.42049%;" word="" hint=""></div>
<div class="sio-rect" style="left: 58.6758%; top: 68.1979%; width: 27.0144%; height: 6.18375%;" word="" hint=""></div>
<div class="sio-rect" style="left: 45.8904%; top: 75.6184%; width: 8.2929%; height: 6.5371%;" word="" hint=""></div>
<div class="sio-rect" style="left: 19.4064%; top: 78.7986%; width: 22.2198%; height: 7.77385%;" word="" hint=""></div>
<div class="sio-rect" style="left: 55.9361%; top: 81.9788%; width: 24.9596%; height: 11.4841%;" word="" hint=""></div>
<div class="sio-rect" style="left: 12.1005%; top: 86.5724%; width: 16.9687%; height: 11.1307%;" word="" hint=""></div>
Minimized code for all 14 rectangles. Pixel positions arenât specified, as percentages donât depend on the image size and are more understandable to humans. It also takes up less space in the database (you can compare with your own). Itâs always the case that one solution is better than another in some way, and sometimes the simpler, the more reliable
So I also started with something simple like this, but my initial goal was to fit text into these rectanglesâŚso it ended up being more complicated and also not entirely convenient, unfortunately 
1 Like
really nice add on cool that we had similar ideas
1 Like
Hereâs another one https://ankiweb.net/shared/info/1664367739
But basic hiding is already built-in, but the point is that such simple solutions might be interesting to people. The alternative is good, and someone can take the code and create something of their own, something the author wouldnât add. So, I also took an add-on that had already been used before me and translated it into different languages, 13 I think. Itâs also not ideal; it would be better to have it in a separate file. But thatâs okay, thatâs how I started doing it from the start, and Iâm leaving it that way for now. But translation isnât everything, even though itâs complicated, and the design still needs to be redesigned to make it user-friendly⌠Here you can see some of the features of this add-on.
1 Like
Hereâs what could be improved:
In this mode, you can press the button, but the focus wonât be released, and you wonât be able to draw. You can either write a message or simply disable this selection mode and resize the image.
You donât show the rectangles on the back. Yes, on the one hand, this is correct, since the back shows all the information, while the front often only shows the answer. But the back should at least show the area of ââthe question. The question could simply be text at the top, like âwhere is this country?â So whatâs the answer if the rectangle isnât visible?
And the shading rectanglesâtheir purpose is not to provide a clue on the one hand, and to prevent distraction on the other. You see a large map, and your eyes just dart around it, which is distracting. Another example: you work in production and your goal is to look at the quality of one block and not damage anything in the others. So they simply cover everything and only show one thing. Information overload is also harmful. For example, you didnât create one image to generate many; you could copy and paste them together. The point of good maps is that one fact on each map is displayed more often, and anything thatâs difficult to remember is sometimes deleted altogether. Iâm also not a fan of the single-fact idea. I think general views and maps are useful, but only if there are 5-10 rectangles, maybe 20. The more data there is, the more difficult it is to remember, so itâs easier to show one image with five objects to remember. If there are many, itâs better to break the image into smaller parts and remember them in sections. Itâs like you shouldnât memorize the entire world map, but at least remember the continents, and then break some things down into sections.
This frame is also generic and doesnât indicate whoâs activating it. It would be more informative if you could change the color of the buttons when switching modes. The settings button could use its own color to indicate whether the rectangleâs color is active. Ideally, the cursor would be changeable⌠but oh well.
There are also some glitches and freezes⌠I donât even know what to write about them. Just test a lot, and youâll figure it out.
Good luck and perseverance.
1 Like
Create a a red border over a single cloze. To tell the user which cloze to tap on. The sequence should be random. This will achieve two things:
- Decrease friction â The user dosenât have to think which cloze to tap on
- Interleaving â a evidence based strategy to improve learning effiecincy
1 Like
thank you so much for all your ideas and input and pointing out the glitches, some of which i have been aware i know that the tool isnât perfect (far from it) but i guess it solves the problem i originally faced haha namely that i had around 100 cards that i automatically created with a scraper with pictures on the front that contained the answer⌠image a card that looks like this: Front: âWhat is this called in Englishâ [Image of a dog, but with the word âdogâ written in the picture] Back: DogâŚ. so i guess you get the point itâs just to hide the obvious answer i didnât want to see in the question/front as it would spoil the back, so i had to find a way to cover such clues on existing cards (with image occlusion enhanced i would have had to manually put each an every single image in the seperate window and create cards) 
so i created the add on and thought well, maybe someone else faces a similar problem⌠the reveal one feature was just added for fun, as all my cards had only one clue to hide, which i wanted to see anyway when showing the right answer. I totally agree with you that the single-card idea is not ideal if one image contains much information, so i wouldnât really use my tool in this case, but stick to the original image occlusion enhanced
1 Like