Awesome
<p align="center"> <a href="https://f-droid.org/en/packages/io.krmanik.ankiimageocclusion/"><img src="images/banner.png" alt="Download the app from F-Droid"></img></a> </p> <p align="center"> <a href="https://github.com/krmanik/Anki-Occlusion/releases"><img src="https://img.shields.io/github/v/release/krmanik/Anki-Occlusion" alt="release"/></a> <a href="https://github.com/krmanik/Anki-Occlusion/releases"><img src="https://img.shields.io/github/downloads/krmanik/image-occlusion-in-browser/total"></img></a> <a href="https://github.com/krmanik/Anki-Occlusion/blob/main/LICENSE"><img src="https://img.shields.io/github/license/krmanik/Anki-Occlusion" alt="license"/></a> </p>Anki-Occlusion
Image Occlusion for AnkiDroid
Anki Image Occlusion app used to create normal, group and combine cloze anki cards for reviewing and studying cards in Anki software (spaced repetition flashcard app, https://apps.ankiweb.net/). The cards generated by this app will be added to AnkiDroid app (Android version of Anki Software). This app is like addon for AnkiDroid. So, before using this app, please make sure you have installed AnkiDroid on your device.
For Desktop and iOS view this https://github.com/krmanik/image-occlusion-in-browser.
For desktop and iOS, web version of the app can be used. It create ready to import deck for Anki.
Tutorials / Features
- Create rectangles
- Create ellipse
- Create textbox
- Create polygon
- Create normal cloze
- Create group cloze
- Create combine cloze
- Change color of masks
- Undo / Redo feature
Experimental Features
- Add images using Camera capture
- Crop selected images in editor window
- Add images using Share option from other apps
Install
From F-Droid
https://f-droid.org/en/packages/io.krmanik.ankiimageocclusion
From Release page
https://github.com/krmanik/Anki-Occlusion/releases
Usage
To use this app. (This app is like addon for AnkiDroid app)
1. Install AnkiDroid
-
Enable AnkiDroid API <br>
AnkiDroid -> Settings -> Advanced -> Enable AnkiDroid API (Turn on)
Because this app add data to AnkiDroid app folder.
2. Install Anki Image Occlusion
Download and install Anki Image Occlusion app from F-Droid
https://f-droid.org/en/packages/io.krmanik.ankiimageocclusion/
Download and install Anki Image Occlusion app from release page.
https://github.com/krmanik/image-occlusion-in-browser/releases
3. Give app permissions
Give storage
and AnkiDroid database read and write permissions
from app settings.
4. Import image
Select image from storage (top left corner image button).
5. Add rectangles
Draw rectangles (bottom left draw button).
- First select draw
button then tap inside image at two point
, top left and bottom right, for creating box of that width and height.
6. Done
Then click done button (top right corner button).
This will copy selected image, generated svg and notes data to AnkiDroid app.
Demo
<img src="images/new_design_demo.gif?raw=true" height="450"></img>
More Images
How it made?
The app made using Apache Cordova and AnkiDroid API with HTML/CSS/JS
.
Build Anki Image Occlusion android app
Fork this repo and remove demo folder from the forked repo. Then download the repo.
- Download this repository
- Open
android
folder in Android Studio - Build and generate apk
Faq?
Why is card not added to AnkiDroid?
- Check app permission from app settings
Storage
AnkiDroid app database read and write
- Check
Enable AnkiDroid API
AnkiDroid -> Settings -> Advanced -> Enable AnkiDroid API (Turn on)
Why is images not synced to Anki Desktop?
In AnkiDroid, click check media
then sync
. The images will be synced.
How to change question and answer rectangles mask color?
Go to settings and put valid hex color.
View hex color example https://www.materialpalette.com/colors
How to group cloze with different color?
- Draw rectangles
- Go to settings and change question mask color
- Click top right image button, then click rectangles. It will change rectangles color. The rectangles with new color will be added to list.
- Again click top right image button to stop adding rectangles to list.
- Click done to add data to AnkiDroid.
- Repeat from step 2 to step 5 for creating group cloze with different color.
How to group cloze with different color in same cloze ?
- Draw rectangles
- Select group cloze button (top right) add rectangles to list.
- Change question mask color from settings
- Select more rectangles to list
- Finally click done button to add notes data to AnkiDroid
View demo
Contributions
This is implemented using javascript. It has bugs and issues. Any contributions to improvement of codes and features will be appreciated.
License
View License