Version 0.2

README.md

@@ -4,41 +4,46 @@ Create image occlusion in browser.
 
 For desktop there is already addon for creating image occlusion. This is implementation for using mobile and creating deck with image occlusion.
 
-# Quick Start
+
+# Demo
+<img src="demo/demo_create.gif" height="380"></img>
+
+## Create image occlusion Anki decks in three steps
+
+### Step 1 - Create svg question and answers mask 
 
 1. Visit
 [https://infinyte7.github.io/image-occlusion-in-browser/](https://infinyte7.github.io/image-occlusion-in-browser/)
 
-2. First add image then rectangles. After add notes and then download.
-
-It will generated following files
+2. Add rectangles to editor window by pressing "+" in tools.
+(Drag or resize to specific location)
 
-```
-svg files - total number = number of rectangles * 2 + 1 
-(Question Mask, Answer Mask, Original Mask)
-```
+3. Add notes for the image
 
-Copy these files to collection.media folder.
+4. Download the notes. It will download svg question masks, answer masks, ```output-note.txt``` and also it will add individual note to view note window.
 
-```
-output.tx file
-```
+5. Then download combined notes from view note window. It will download ```output-all-notes.txt``` file. This file will be used to create deck.
 
-The deck from output.txt file can be generated using ```image-occ-deck-export.py```. Open this .py file in ```Pydroid 3``` and run.
-After enter deck details and export deck.
+### Step 2 - Copy all svg files to AnkiDroid folder
+1. Copy question and answer svg files and original image to ```collection.media``` folder
 
-That deck can be imported to AnkiDroid.
+### Step 3 - Generate decks using Pydroid 3
+1. Download and install Pydroid 3 from play store.
+2. Install ```genanki``` in Pydroid using Pip. View demo below.
+3. Download ```image-occ-deck-export.py``` from release page.
+4. Open ```image-occ-deck-export.py``` in Pydroid 3 and run
+5. Select ```output-all-notes.txt``` and import 
+6. Enter deck details and export.
 
-# Demo
-<img src="demo/demo_img.gif" height="520"></img>
+View demo [Generate deck using Pydroid 3](demo/demo_pydroid_3.gif)
 
 # Requirements for running it offline
 1. Termux or any app that create localhost
 2. Pydroid 3
 
 Download from playstore.
 
-# Steps
+# Steps for running offline
 
 1. If using termux then install ```python```
 ```
@@ -61,25 +66,20 @@ python -m http.server
 ```
 localhost:8000
 ```
-7. First add image then add rectangle (Add Rect). After adding notes, click on download to get svg files with question mask and answer mask. 
+7. First, add image then add rectangle. After adding notes, click on download to get svg files with question mask and answer mask. 
 
 8. Copy all the files (svg files and original image) to ```collection.media``` folder
 
 9. Now open ```Pydroid 3``` and open ```image-occ-deck-export.py``` and import ```output.txt``` file and generate deck by entering name, model and title.
 
 10. Import it in AnkiDroid and start reviewing.
 
-
 # Demo
 [View this](demo/demo_img_occ.gif)
 
 # Limitations
 - I tried to create with more than six rectangle but it failed to generate svg files. I also tried async/await function but still not working. 
 - The user experience is not so good as compared to desktop but it can be used to create decks.
-- output.txt created per image
-
-# TODO
-- Appends multiple notes output to one files
 
 # Contributions
 Contribution will be appreciated for adding features generating more than six files at one time. 

docs/index.html

@@ -172,7 +172,9 @@
 
       <div>On Android, use <a target="_blank"
           href="https://github.com/infinyte7/image-occlusion-in-browser/blob/master/image-occ-deck-export.py"><b>image-occ-deck-export.py</b></a>
-        in Pydroid 3 to create anki decks. Download script from GitHub <a href="https://github.com/infinyte7/image-occlusion-in-browser/releases">Release page</a></div>
+        in Pydroid 3 to create anki decks. Download script from GitHub <a href="https://github.com/infinyte7/image-occlusion-in-browser/releases">Release page</a>
+      <br> <br>View demo: <a href="https://github.com/infinyte7/image-occlusion-in-browser/blob/master/demo/demo_pydroid_3.gif">Generate deck using Pydroid 3</a>
+      </div>
 
       <br>
 

docs/js/index.js

@@ -12,7 +12,7 @@ document.addEventListener('click', function (e) {
     selectedElement = e.target.id;
 }, false);
 
-
+var note_num = 1;
 var originalImageName;
 var draw;
 var rect;
@@ -197,7 +197,9 @@ async function downloadNote() {
 
     }
 
-    exportFile(csvLine, "output-note.txt");
+    var f = "output-note" + note_num + ".txt";
+    exportFile(csvLine, f);
+    note_num++;
 
     // add to view note side bar
     addCsvLineToViewNote(csvLine);