Code Monkey home page Code Monkey logo

image-occlusion-in-browser's Introduction

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 software (spaced repetition flashcard app). Anki decks created using genanki-js, sql.js, FileSaver.js, JSZip and svg.js JavaScript library. It creates ready to import decks for Anki and AnkiMobile.

Use version 3 of this project because version 1 and version 2 of this project deprecated. Read more

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

Demo

iOS v13

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

How to view version 1 and version 2 of this project?

View 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

License

View License

image-occlusion-in-browser's People

Contributors

krmanik avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

image-occlusion-in-browser's Issues

Inclusion in F-Droid

Since this app is not available on PlayStore will you be kind as to submit it for inclusion in F-Droid repository.

occlusion card created by anki image occlusion app

Describe the bug
occlusion card created by anki image occlusion app appears small in size on desktop. I recently moved to desktop. all cards appear small. Though in editing window on desktop it appears normal in size.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
image
image

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Created Cards don't sync with media

Hi,
I'm just trying to create cards an my android device. They are created and added to the Image Occlusion deck. If I sync to PC or another android device the deck appears but the media of the cards is not synced?
Is that a bug or am I missing something?

Cheers
Mirko

Ability to regenerate cards, discarding previously generated

I've been playing with your project and it is really nice to be able to create "image occlusion" in a browser! There are some interface limitations related to the medium you chose, however, it would be useful to be able to regenerate cards, but discarding all previously generated cards (not adding another cards).

My use case.

  1. Crate some masks and 10 generate cards.
  2. Import into Anki
  3. Spot some issues
  4. Come back to image occlusion and fix it
  5. Click "regenerate" button

Expected result:
There are only 10 new cards in a generated (and exported) deck.

Actual result:
There are 20 cards (including 10 new and 10 old).

Tool: group elements

You are developing one of the most incredible tools for Android! I pray for your tool be integrated to AnkiDroid. :)

Have you taken a look at Anki Doodle? There may be something you can take advantage of, like the zoom control, the automatic transfer of cards to AnkiDroid... Your SVG filetype and your group elements are the most advantages over Anki Doodle (the development was stopped).

https://github.com/mmjang/Ankillusion
(If you want to download it, the apk is here: https://apkpure.com/anki-doodle/com.mmjang.ankillusion)

My friend, is there any way to help you? Unfortunately, I don't know programming.

Tool: draw mode

Hey, I saw that you keep updating the app! That's really good!

Dude, I have a change suggestion for you. It would be nice if we didn't have to click on the "draw icon" every time we wanted to create new rectangles. You could modify it as follows: by touching it once, we can create rectangles infinitely. When we touch again, "turn off" the drawing rectangles "mode". To move the page during "drawing mode", we would drag with two fingers on the screen.

Thanks a lot for everything! Your app has revolutionized the way I study! :)

Thanks a lot

I have my exams coming up and I hadn't made my image flashcards yet. I was literally planning manually edit picture after picture to make it.

Since I couldn't find any other way to message you, here's my thanks.

Not able to make image occlusions

I was able to make it till yesterday idk what happened but cards are not being generated and this is urgent cz I've not got much of time.. Plz help

No mention of version in Android app.

Hi,
Thanks for the tool, I am just raising an issue as I felt it's important to have a mention of code/app Version in the app.

I couldn't find it and hence couldn't know if I need an update or not.

If I am missing something here, feel free to mark this solved.

Image occlusion rectangles can't be loaded

Describe the bug
When the cards are added to anki, the rectangles that would normally cover the labels can't be loaded.

To Reproduce

  1. Create image occlusion cards in 'Anki Image Occlusion' with rectangles and add them to anki.
  2. Start the deck in anki.

Expected behavior
The rectangles should cover the words.

Screenshots
Screenshot_2024-02-10-13-43-07-304_com ichi2 anki
Screenshot_2024-02-10-13-43-45-849_com ichi2 anki

Android Device:

  • Device: Xiaomi Pad 6
  • OS: Android 14

Versions:
Anki: 2.16.5
Anki Image Occlusion: 1.4.8

when I import a deck after creating cards, it happens that I replace old cards with some of the new cards. This means that those old cards are completely lost. In particular, I noticed that this happens for cards that are given the same ID. Please solve, because it is unusable in this way

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Suggestion! xD

I have been following your hard work in the development of this application. Friend, your evolution has been exponential! I sincerely hope you don't give up! Unfortunately, I don't program. :(

However, I leave you a suggestion:
there is a less complete application than yours, called Anki Doodle. It does not, for example, have its role as a group cloze (incredible, in my humble opinion). Despite this, it has a very interesting interface, very intuitive to use, with a very practical way to automatically register flashcards directly on AnkiDroid (including images). Would it be possible for you to take advantage of some codes that are already applied there?

https://github.com/mmjang/Ankillusion
image

Furthermore, it would be even better if you were able to implement a way to create both group clozes and individuals simultaneously, without having to change the "card creation mode". :)

Brother, thank you so much for your incredible work! xD

collection.media path inconsistent with collection

Using the AnkiDroid API adds the cards to my collection located at: storage/AnkiDroidA, but all media is added to storage/AnkiDroid/collection.media

It would be useful to be able to change this path in the settings, or for this to be automatically selected

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.