Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/krmanik/image-occlusion-in-browser
Create image occlusion in browser
https://github.com/krmanik/image-occlusion-in-browser
anki anki-occlusion ankidroid export-deck genanki genanki-js group-cloze image-occlusion pydroid pyodide sqljs svgjs
Last synced: 15 days ago
JSON representation
Create image occlusion in browser
- Host: GitHub
- URL: https://github.com/krmanik/image-occlusion-in-browser
- Owner: krmanik
- License: gpl-3.0
- Created: 2020-08-29T21:43:09.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-03-30T04:54:01.000Z (over 2 years ago)
- Last Synced: 2024-10-04T06:42:20.053Z (about 1 month ago)
- Topics: anki, anki-occlusion, ankidroid, export-deck, genanki, genanki-js, group-cloze, image-occlusion, pydroid, pyodide, sqljs, svgjs
- Language: JavaScript
- Homepage: https://krmanik.github.io/image-occlusion-in-browser/v3/index.html
- Size: 179 MB
- Stars: 40
- Watchers: 6
- Forks: 7
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: Changelog.md
- License: LICENSE
Awesome Lists containing this project
README
# Image Occlusion in Browser v3
Create image occlusion in browser for Desktop and iOS devices v12 or later.
>Anki Image Occlusion app used to create normal and combine cloze anki cards for reviewing and studying flashcards in [Anki](https://apps.ankiweb.net) software (spaced repetition flashcard app). Anki decks created using [genanki-js](https://github.com/krmanik/genanki-js), [sql.js](https://github.com/sql-js/sql.js), [FileSaver.js](https://github.com/eligrey/FileSaver.js), [JSZip](https://github.com/Stuk/jszip) and [svg.js](https://svgdotjs.github.io/) JavaScript library. It creates ready to import decks for Anki and AnkiMobile.
> Use [version 3](https://krmanik.github.io/image-occlusion-in-browser/v3/index.html) of this project because version 1 and version 2 of this project deprecated. [Read more](Version2.md)
# QuickStart
Open following website in browser and start creating image occlusion decks.
>https://krmanik.github.io/image-occlusion-in-browser/v3/index.html
#### Anki Occlusion for AnkiDroid source code and apk moved here https://github.com/krmanik/Anki-Occlusion.
## Create Anki decks in five steps
1. Select image to editor window
2. Draw rectangles, ellipses, polygons or textbox
3. Add notes to decks
4. Download the decks
5. Import in Anki
# Tutorials / Features
- [Create image occlusion anki deck inside browser](demo/iOSv13_demo.gif)
- [Download ready to import deck](demo/multiple_cards.gif)
- [Create multiple cards in same deck](demo/multiple_cards.gif)
- [Create rectangles](demo/demo_draw_anywhere.gif)
- [Create ellipse](https://github.com/krmanik/image-occlusion-in-browser/blob/master/demo/demo_multiple_polygon.gif)
- [Create textbox](https://github.com/krmanik/image-occlusion-in-browser/blob/master/demo/demo_text_box.gif)
- [Create polygon](https://github.com/krmanik/image-occlusion-in-browser/blob/master/demo/demo_multiple_polygon.gif)
- [Create normal cloze](demo/demo_create.gif)
- [Create combine cloze](demo/combine_cloze_demo_browser.gif)
- [Change color of masks](demo/demo_change_color.gif)
- [Undo / Redo feature](https://github.com/krmanik/image-occlusion-in-browser/blob/master/demo/demo_undo_redo.gif)
# Demo
# Faq ?
### 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?
1. Draw rectangles
2. Go to settings and change question mask color
3. Click top right image button, then click rectangles. It will change rectangles color. The rectangles with new color will be added to list.
4. Again click top right image button to stop adding rectangles to list.
5. Click done to add data to AnkiDroid.
6. Repeat from step 2 to step 5 for creating group cloze with different color.
### How to group cloze with different color in same cloze ?
1. Draw rectangles
2. Select group cloze button (top right) add rectangles to list.
3. Change question mask color from settings
4. Select more rectangles to list
5. Finally click done button to add notes data to AnkiDroid
View [demo](https://user-images.githubusercontent.com/12841290/95605099-0d038b00-0a8b-11eb-81ed-58a7e03c254e.gif)
### How to view version 1 and version 2 of this project?
View [version2.md](Version2.md)
# Contributions
This is implemented using javascript. It has bugs and issues. Any contributions to improvement of codes and features will be appreciated.
### View updates
[Changelog.md](Changelog.md)
# License
View [License](License.md)