parsimonhi / animCJK

Draw animated Japanese characters (Kanji and Kana), Korean characters (Hanja) and Chinese characters (Hanzi) in correct stroke order using svg, free open-source code.
284 stars 72 forks source link

Different colour for each stroke ? #7

Closed TotalCoolness closed 10 months ago

TotalCoolness commented 4 years ago

Would it be possible to have each stroke a different colour, like for example:

https://github.com/cayennes/kanji-colorize

and have it exported into animatedGIF to use in anki !

parsimonhi commented 4 years ago

All is possible. What do you need exactly ? An animated colored kanji with stroke numbers ? or without stroke numbers ? or not animated ? Note also that it is not necessary to use gif in anki cards. You can insert directly svg image as well.

TotalCoolness commented 4 years ago

Oh I didn't know Anki supported svgs animations (I thought they were static svg).

Yes, animated colored kanji with stroke numbers. I couldn't find any.

parsimonhi commented 4 years ago

You can try the following (let me know if it works for you):

First step
1) Using a browser, go to http://gooo.free.fr/animCJK/official/samples/
2) Select the "rainbow" sample
3) Enter a kanji in the box which is on the left of the "Display" button
4) Click on the "Display" button
5) At this point, you should see an animation displaying the character you entered. The corresponding code is displayed in the "SVG Code" box at the bottom of the page. Select this code using the mouse and copy it (using for instance Cmd C or Ctrl C)

Second Step
1) Open Anki
2) Edit the convenient card
3) Click on the field of the card (or add one) where you want to insert the character
4) Select in the menu "Modify HTML" or something like that (possibly by clicking in the "hamburger" menu on the right of the editor). A window should appears
5) Paste in the html code, at the place where you want the character should be, the SVG code of the character you previously copied

Say a prayer and it should work!

TotalCoolness commented 4 years ago

Thanks worked perfectly! Looks much better than the ugly animated GIFs.

I didn't see that "rainbow" option when I downloaded it.

The only problem is doing this 3,000 times in Heisigs RTK (6th edition) order is not really feasible.. anyway to automate it ?

parsimonhi commented 4 years ago

You didn't see the "rainbow" option because i made it last night! :-)!

I will add it to the next github repository update.

I don't know how to automate an update of the Heisigs RTK (I am not an expert of Anki, but it's probably feasible). Can you tell me where to find the version you are using? (I found some but i would be sure that I got the right one)

TotalCoolness commented 4 years ago

This is the deck: https://ankiweb.net/shared/info/702183246

2,200 Kanji from RTK Volume 1 of the book 1. 800 from RTK book 3.

What you can do to add them is use this plugin to help import / export CSV : https://ankiweb.net/shared/info/1478130872

Create a new field in the deck called SVGanimated to be the target field.

Just export three fields something like: FrameNumV6, kanji, SVGanimated

The first field in the CSV file is very important and when importing since it has to match for updating the fields. You could actually have the first field the kanji and let it match that way.

Go to Browser in Anki "Fields" and reposition the FrameNumV6 (or kanji) field to be position 1.

Now all we need is you to put that SVG animated kanji data in that blank field... and IMPORT :)

parsimonhi commented 4 years ago

Thanks you for these informations. I will try to automate the process. But I don't know how many time it will be necessary to make the code because I am nearly a newbie in anki.