53
3
Kanji Colorizer (stroke order diagrams)
51.06MB. Updated 2019-11-02. Supports both Anki 2.0.x and 2.1.x.This item is large, and may take some time to download.
Description
Download
As add-ons are programs downloaded from the internet, they are potentially malicious. You should only download add-ons you trust.
To download this add-on, please copy and paste the following code into the desktop program:
1964372878
If you were linked to this page from the internet, please open Anki on your computer, go to the Tools menu and then Add-ons>Browse & Install to paste in the code.
Other Anki 2.0.x Add-Ons Other Anki 2.1.x Add-Ons Ask a Question
Reviews
on
I love this. Thank's a lot.
Only drawback, it takes up a lot of space. I like having space to draw the kanjis myself.
So here's how I deal with that:
* create a scrollbox that only scrolls horizontally
* put the images in there
* resize it to fit the box
* hide them entirely and add a button with which we can display / hide the diagrams
```
<span style="font-size: 20px; "> {{Meaning}} </span>
<hr id=answer>
<tts style="display:none" service="android" voice="ja_JP">{{Expression}}</tts>
<span style="font-size: 40px; ">
{{furigana:Reading}}
</span>
<br>
<button onclick="showHideStrokeOrder()">Stroke Order</button>
<center>
<div id="scrollboxStrokeOrder" style="border:1px solid black;height:150px;width:100%;white-space: nowrap;overflow-y:hidden;overflow-x:auto;display:none">
<div id='strokeOrderPictures'>{{Stroke Order Diagram}}</div>
</div>
</center>
<script>
function showHideStrokeOrder() {
var scrollbox = document.getElementById("scrollboxStrokeOrder");
if (scrollbox.style.display === "none") {
scrollbox.style.display = "block";
resizeStrokeOrderDiagrams();
} else {
scrollbox.style.display = "none";
};
}
function resizeStrokeOrderDiagrams(){
var scrollbox = document.getElementById("scrollboxStrokeOrder");
var imgs = document.getElementById('strokeOrderPictures');
var maxHeight= parseFloat(scrollbox.style.height)
var imgsHeight = imgs.firstChild.height
if(imgsHeight > maxHeight) {
var diagrams = imgs.getElementsByTagName("img");
for( i=0; i< diagrams.length; i++ ) {
var d = diagrams[i];
d.height= maxHeight -5;
}
};
}
</script>
```
Only drawback, it takes up a lot of space. I like having space to draw the kanjis myself.
So here's how I deal with that:
* create a scrollbox that only scrolls horizontally
* put the images in there
* resize it to fit the box
* hide them entirely and add a button with which we can display / hide the diagrams
```
<span style="font-size: 20px; "> {{Meaning}} </span>
<hr id=answer>
<tts style="display:none" service="android" voice="ja_JP">{{Expression}}</tts>
<span style="font-size: 40px; ">
{{furigana:Reading}}
</span>
<br>
<button onclick="showHideStrokeOrder()">Stroke Order</button>
<center>
<div id="scrollboxStrokeOrder" style="border:1px solid black;height:150px;width:100%;white-space: nowrap;overflow-y:hidden;overflow-x:auto;display:none">
<div id='strokeOrderPictures'>{{Stroke Order Diagram}}</div>
</div>
</center>
<script>
function showHideStrokeOrder() {
var scrollbox = document.getElementById("scrollboxStrokeOrder");
if (scrollbox.style.display === "none") {
scrollbox.style.display = "block";
resizeStrokeOrderDiagrams();
} else {
scrollbox.style.display = "none";
};
}
function resizeStrokeOrderDiagrams(){
var scrollbox = document.getElementById("scrollboxStrokeOrder");
var imgs = document.getElementById('strokeOrderPictures');
var maxHeight= parseFloat(scrollbox.style.height)
var imgsHeight = imgs.firstChild.height
if(imgsHeight > maxHeight) {
var diagrams = imgs.getElementsByTagName("img");
for( i=0; i< diagrams.length; i++ ) {
var d = diagrams[i];
d.height= maxHeight -5;
}
};
}
</script>
```
on
Great for learning kanji.
I see a lot of people strugling with the resizing of pictures even though it's simple.
Surprisingly you just have to go to : Plug-in > Kanji Colorizer > Config/Settings and change the "image-size" fields to what you want.
Don't forget to restart Anki for changes to take effect.
I see a lot of people strugling with the resizing of pictures even though it's simple.
Surprisingly you just have to go to : Plug-in > Kanji Colorizer > Config/Settings and change the "image-size" fields to what you want.
Don't forget to restart Anki for changes to take effect.
on
For the ones that cannot resize stroke images, there is how I handled:
First, placed diagrams into a div.
```
<div class="diagram-div">
{{Diagram}}
</div>
```
Then changed width of the images in this div.
```
.diagram-div > img {
width: 40%;
margin: auto;
}
```
I hope it helps.
First, placed diagrams into a div.
```
<div class="diagram-div">
{{Diagram}}
</div>
```
Then changed width of the images in this div.
```
.diagram-div > img {
width: 40%;
margin: auto;
}
```
I hope it helps.
on
good
on
Essential add-on for any kanji deck.
on
Works perfectly! Without it my personal Kanji deck wouldn't be half as effective. Essential for being confident in my stroke order.
on
Works perfectly!
on
Best!!
on
Great add on! If you're having trouble following instructions like me...The plugin wants Note Type to contain "Japanese", not Card Type or Deck name. To rename the Note Type, go to Decks → Browse → Add → [click field next to Type] → Manage → Rename → [select relevant type] → Rename. Then make sure you have at least 2 fields, one named Kanji and one named Diagram, and this plugin installed. Then go to Tools->look through your add-ons to find Regenerate Kanji strokes.
on
Is a excelent addon.
on
it's prety useful
on
Learning kanji is a lot more rewarding now, thank you!
This is how I force the stroke order diagram to a smaller size on my screen. (The smaller the rectangle the smaller the diagram - probably not the most elegant method, but works for me.)
<center><div id='rectangle' style='width:120px; height:120px; border-style:solid; border-color:white'>{{Diagram}}</div></center>
This is how I force the stroke order diagram to a smaller size on my screen. (The smaller the rectangle the smaller the diagram - probably not the most elegant method, but works for me.)
<center><div id='rectangle' style='width:120px; height:120px; border-style:solid; border-color:white'>{{Diagram}}</div></center>
on
Saved me editing all my cards. Well chuffed. Thanks !
on
Just perfect.
on
I can't download it too
on
I can not download
on
Perfect! Thank you so much, you saved me from editing 23000 cards. Especially that you thought about allowing white as a color setting. Very nice!
on
How to resize stroke order diagrams to small size
on
Works great. The diagrams are great and easy to follow.
on
Amazing add-on and very very valuable. Thank you very much for your hard work.
I seem to have a problem, however. I use this add-on for my RTK deck and it seems to randomly create diagrams for some of the Kanji and not for others. The ones left alone are not necessarily very difficult or rare Kanji. For example, 池 is left un-diagramed.
Maybe because RTK contains some rarer Kanjis the code encounters one of them mid-way and decides to stop rather than just ignoring it?
I seem to have a problem, however. I use this add-on for my RTK deck and it seems to randomly create diagrams for some of the Kanji and not for others. The ones left alone are not necessarily very difficult or rare Kanji. For example, 池 is left un-diagramed.
Maybe because RTK contains some rarer Kanjis the code encounters one of them mid-way and decides to stop rather than just ignoring it?
on
Well done
on
Absolutely fantastic. Applied to my deck of 3000+ kanji and auto-filled the diagrams per the instructions. For the last 1000 kanji I do it auto-fills the field as well. Extremely handy when reviewing to have the stroke order right there, and even more handy to not have to manually draw up the stroke order for each one.
Whoever spent all this time on this, THANK YOU, it's working wonders.
Whoever spent all this time on this, THANK YOU, it's working wonders.
on
Bug from 2014 = terminated.
on
Still great but bug from 2014 is still there
The bug reported below in 2014 that causes error messages and "Waiting for editing to finish/Resume Now" over and over, is still there. Here is the full error message. The way to cause this error is to start studying your card deck, and get to a card containing a colorized kanji, then clicking Edit and then Done and it will happen.
An error occurred. It may have been caused by a harmless bug,
or your deck may have a problem.
To confirm it's not a problem with your deck, please run Tools > Check Database.
If that doesn't fix the problem, please copy the following
into a bug report:
Traceback (most recent call last):
File "aqt/progress.pyc", line 69, in handler
File "aqt/editor.pyc", line 468, in onUpdate
File "aqt/editor.pyc", line 540, in loadNote
AttributeError: 'NoneType' object has no attribute 'media'
The bug reported below in 2014 that causes error messages and "Waiting for editing to finish/Resume Now" over and over, is still there. Here is the full error message. The way to cause this error is to start studying your card deck, and get to a card containing a colorized kanji, then clicking Edit and then Done and it will happen.
An error occurred. It may have been caused by a harmless bug,
or your deck may have a problem.
To confirm it's not a problem with your deck, please run Tools > Check Database.
If that doesn't fix the problem, please copy the following
into a bug report:
Traceback (most recent call last):
File "aqt/progress.pyc", line 69, in handler
File "aqt/editor.pyc", line 468, in onUpdate
File "aqt/editor.pyc", line 540, in loadNote
AttributeError: 'NoneType' object has no attribute 'media'
on
I love it!
It's the best addon for kanji learners! Thank you sooooo much!
It's the best addon for kanji learners! Thank you sooooo much!
on
Stroke direction, solution to diagrams not showing up
It took me a long time to realize that the stroke numbers are located at the start of the stroke, NOT where they fit, allowing you to figure out the stroke direction. I bet I'm not the only one.
Diagrams don't show up in the browser? This worked for me:
Go to addons>kanji_colorizer>edit
find <img src="%s"> in the code near the bottom
add right in front of it so it becomes <img src="%s">
leave rest untouched
re-generate diagrams
It took me a long time to realize that the stroke numbers are located at the start of the stroke, NOT where they fit, allowing you to figure out the stroke direction. I bet I'm not the only one.
Diagrams don't show up in the browser? This worked for me:
Go to addons>kanji_colorizer>edit
find <img src="%s"> in the code near the bottom
add right in front of it so it becomes <img src="%s">
leave rest untouched
re-generate diagrams
on
How to update the KanjiVG dataset
It's been almost 2.5 years since this plugin's KanjiVG dataset was updated, so here's how to easily update it.
1. Download https://github.com/KanjiVG/kanjivg/archive/master.zip
2. Replace your installation's [User]/Documents/Anki/addons/kanjicolorizer/data/kanjivg with the archive's kanjivg-master/kanji (while Anki is closed ofc)
3. Regenerate your diagrams as necessary.
That last step caused the plugin to generate thousands of new '* (1).svg' files for me rather than just overwrite the old ones, so if you have a separate field for the diagrams, it's probably better to wipe it (using a regular expression like (?s).* in S&R explained below) before regenerating.
If it still happens and you want it clean:
1. Use a renamer like krename ("overwrite existing" toggled in its 2nd tab, and just " (1)" in a Search&Replace entry on the 4th one) on the affected files in Anki/Main/collection.media
2. Select all cards with diagrams on them in Anki's card browser
3. Open Search&Replace (C-Alt-F), search for eg. " (1).svg" to be replaced with ".svg" and select the appropriate field(s).
Anyway, it's worthwhile to use Anki's "Tools → Check media" afterward.
It's been almost 2.5 years since this plugin's KanjiVG dataset was updated, so here's how to easily update it.
1. Download https://github.com/KanjiVG/kanjivg/archive/master.zip
2. Replace your installation's [User]/Documents/Anki/addons/kanjicolorizer/data/kanjivg with the archive's kanjivg-master/kanji (while Anki is closed ofc)
3. Regenerate your diagrams as necessary.
That last step caused the plugin to generate thousands of new '* (1).svg' files for me rather than just overwrite the old ones, so if you have a separate field for the diagrams, it's probably better to wipe it (using a regular expression like (?s).* in S&R explained below) before regenerating.
If it still happens and you want it clean:
1. Use a renamer like krename ("overwrite existing" toggled in its 2nd tab, and just " (1)" in a Search&Replace entry on the 4th one) on the affected files in Anki/Main/collection.media
2. Select all cards with diagrams on them in Anki's card browser
3. Open Search&Replace (C-Alt-F), search for eg. " (1).svg" to be replaced with ".svg" and select the appropriate field(s).
Anyway, it's worthwhile to use Anki's "Tools → Check media" afterward.
on
The best Heisig companion out there
The best supply to a Heisig TRK deck I've ever stumbled upon. A must-have for anyone who plans on studying the kanji seriously. Aids the whole of the mnemonic process greatly.
The best supply to a Heisig TRK deck I've ever stumbled upon. A must-have for anyone who plans on studying the kanji seriously. Aids the whole of the mnemonic process greatly.
on
Bug?
I have been having some strange behavior with this addon - see below:-
I get this repeatedly when editing especially the Expression field.
The screen goes to the "Wait for editing to finish" page but clicking on
Resume Now takes me back to the same page in a loop. If I sync I get
this message:-
Traceback (most recent call last):
File "aqt/progress.pyc", line 69, in handler
File "aqt/editor.pyc", line 466, in onUpdate
File "aqt/editor.pyc", line 538, in loadNote
AttributeError: 'NoneType' object has no attribute 'media'
If I then run Check Database I get:-
Traceback (most recent call last):
File "aqt/main.pyc", line 924, in onCheckDB
AttributeError: 'NoneType' object has no attribute 'fixIntegrity'
If I Check Database without prior sync I just stay in the loop.
If I Quit I get this message:-
Traceback (most recent call last):
File "aqt/progress.pyc", line 69, in handler
File "aqt/editor.pyc", line 466, in onUpdate
File "aqt/editor.pyc", line 538, in loadNote
AttributeError: 'NoneType' object has no attribute 'media'
I have been having some strange behavior with this addon - see below:-
I get this repeatedly when editing especially the Expression field.
The screen goes to the "Wait for editing to finish" page but clicking on
Resume Now takes me back to the same page in a loop. If I sync I get
this message:-
Traceback (most recent call last):
File "aqt/progress.pyc", line 69, in handler
File "aqt/editor.pyc", line 466, in onUpdate
File "aqt/editor.pyc", line 538, in loadNote
AttributeError: 'NoneType' object has no attribute 'media'
If I then run Check Database I get:-
Traceback (most recent call last):
File "aqt/main.pyc", line 924, in onCheckDB
AttributeError: 'NoneType' object has no attribute 'fixIntegrity'
If I Check Database without prior sync I just stay in the loop.
If I Quit I get this message:-
Traceback (most recent call last):
File "aqt/progress.pyc", line 69, in handler
File "aqt/editor.pyc", line 466, in onUpdate
File "aqt/editor.pyc", line 538, in loadNote
AttributeError: 'NoneType' object has no attribute 'media'
on
Works great for Chinese too!
I generated diagrams for my HSK Chinese deck with it, and out of 5001 cards, 4366 now have a diagram! Admittedly, I'm not sure what percentage of two character words have both diagrams, but still, this is awesome!
Thanks a lot!
I generated diagrams for my HSK Chinese deck with it, and out of 5001 cards, 4366 now have a diagram! Admittedly, I'm not sure what percentage of two character words have both diagrams, but still, this is awesome!
Thanks a lot!
on
Quick user guide
Someone made a visual guide on how to use this here:
http://maestoso.org/2014/06/study-japanese-with-anki-part-5/
Someone made a visual guide on how to use this here:
http://maestoso.org/2014/06/study-japanese-with-anki-part-5/
on
This way is quicker to check the correct stroke order
I knew this addon for a long time but I didn't installed it becouse of KanjiStrokeOrder font.
Now that I have seen the new functionality to colorize by blocks and I gave it a try. It is awesome, specially if studing the kanji following the heisig's method. Thank you very much. This way is quicker to check the correct stroke order.
I thouht this addon only generates diagrams from the kanji jis x 208 character set. But funny stats are that it also generates 28 from jis x 212 and 8 more from jis x 213 only character set.
I knew this addon for a long time but I didn't installed it becouse of KanjiStrokeOrder font.
Now that I have seen the new functionality to colorize by blocks and I gave it a try. It is awesome, specially if studing the kanji following the heisig's method. Thank you very much. This way is quicker to check the correct stroke order.
I thouht this addon only generates diagrams from the kanji jis x 208 character set. But funny stats are that it also generates 28 from jis x 212 and 8 more from jis x 213 only character set.
on
Kanji Diagrams Not Showing Anymore
All of a sudden the diagrams are no longer regenerated.
I had a "Diagram" field with a value of "Japanese" (without) the quotes, in my model.
I also had a "Kanji" field with the Kanji characters.
After clicking the "Kanji Colorizer: re(generate) all" from the Tools menu,
the diagrams/Kanji stroke orders are not showing still.
It worked after adding some, but has stopped working since.
Any help?
All of a sudden the diagrams are no longer regenerated.
I had a "Diagram" field with a value of "Japanese" (without) the quotes, in my model.
I also had a "Kanji" field with the Kanji characters.
After clicking the "Kanji Colorizer: re(generate) all" from the Tools menu,
the diagrams/Kanji stroke orders are not showing still.
It worked after adding some, but has stopped working since.
Any help?
on
perfect
Wanted to complain about the program returning errors for unknown unicode characters but it was already fixed in the meantime... Works like a charm, thank you!
Wanted to complain about the program returning errors for unknown unicode characters but it was already fixed in the meantime... Works like a charm, thank you!
on
It's pretty slow to download and install
But we are warned it's a big file. I tried to install it several times and I thought Anki crashed, but I gave it a little more time and it worked eventually.
But we are warned it's a big file. I tried to install it several times and I thought Anki crashed, but I gave it a little more time and it worked eventually.
on
Super Add on, great developer
It works perfect and has been made chinese compatible (as much as possible) on request.
The colorized Kanjis are so good to remember. Thank you.
It works perfect and has been made chinese compatible (as much as possible) on request.
The colorized Kanjis are so good to remember. Thank you.
on
A double saving time
This plugin obviously save time when entering a new kanji, but it also saves time during revisions: before that I used animations to learn the stroke order of a kanji, but I lost a lot of time to wait for the animation gets to the stroke that I wanted to check.
Attention, there is a small error in the manual: the field must be called diagram without the letter s.
This plugin obviously save time when entering a new kanji, but it also saves time during revisions: before that I used animations to learn the stroke order of a kanji, but I lost a lot of time to wait for the animation gets to the stroke that I wanted to check.
Attention, there is a small error in the manual: the field must be called diagram without the letter s.