Skip to content

A simple API access to the handwriting recognition service of Google IME

License

Notifications You must be signed in to change notification settings

ChenYuHo/handwriting.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

handwriting.js

A simple API access to the incredible handwriting recognition of Google IME

Demo

See here

Usage

Include src

    <script type="text/javascript" src="handwriting.js"></script>

Capture trace

The captured trace looks like:

var trace = 
    [   //the trace is an array of strokes
        [   //a stroke is an array of pairs of captured (x, y) coordinates
            [300, 310, 320, 330, 340], //x coordinate
            [320, 320, 320, 320, 320]  //y coordinate
            //each pair of (x, y) coordinates represents one sampling point 
        ],
        [
             [320, 320, 320, 320, 320],
             [300, 310, 320, 330, 340]
        ]
    ];

For example, the trace above is composed of two strokes,

(300, 320), (310, 320), (320, 320), (330, 320), (340, 320)

and

(320, 300), (320, 310), (320, 320), (320, 330), (320, 340),

which is produced by writing "十".

Manage options

options argument is an optional object of following fields:

var options = {
    width : 800,         //int, width of the writing area, default: undefined
    height : 800,        //int, height of the writing area, default: undefined
    language : "zh_TW",  //string, language of input trace, default: "zh_TW"
    numOfWords : 1,      //int, number of words of input trace, default: undefined
    numOfReturn : 5,     //int, number of maximum returned results, default: undefined
};

Under most conditions, only language field is required. However, specifying writing area width and height helps in improving precision.

See Language Support

Specify callback function

The recognition function will invoke the callback function argument passed in after recognition process. The callback function should accept two arguments as shown below:

var callback = function(result, err){
    if(err) throw err;
    else console.log(result);	
};

The returned result will be an array of string, for example, the trace above (with other options set to default) generates:

[ "十", "+", "一|", "一1", "一个", "-|", "一'", "-1", "一.", "-." ]

If no error occurred, err will be undefined.

Call recognition function

bound on a button as an example:

<button onclick="handwriting.recognize(trace, options, callback);">Recognize</button>

Fully functional library

Include handwriting.canvas.js instead of handwriting.js if you want to use the pre-implemented canvas behaviors.

<script type="text/javascript" src="./handwriting.canvas.js"></script>

Usage

Declare html canvas as handwriting.Canvas object by passing that canvas element to the constructor:

<canvas id="can" width="400" height="400" style="border: 2px solid; cursor: crosshair;"></canvas>

<script>
    var can1 = new handwriting.Canvas(document.getElementById("can"));
</script>

Now trace is automatically captured, stored in the object, and shown on the given element (either by mouse dragging or touch).

APIs

The captured trace and other fields are independent through objects, so call the following functions exactly on which object you wish to take action to:

    //Set callback function
    can1.setCallBack(function(data, err) {
        if(err) throw err;
        else console.log(data);
    });

    //Set line width shown on the canvas element (default: 3)
    can1.setLineWidth(5);

    //Set options
    can1.setOptions(
        {
            language: "ja",
            numOfReturn: 3
        }
    );

    //recognize captured trace
    can1.recognize();
	
    //Clear canvas, captured trace, and stored steps
    can1.erase();

undo and redo functionality

This feature is achieved by saving every stroke in object, however, such attempt consumes relatively higher memory, so undo and redo functionalities are disabled by default, to change the availability, simply call :

    //only turn on undo functionality
    can1.set_Undo_Redo(true, false);

    //turn on both functionalities
    can1.set_Undo_Redo(true, true);

note that redo functionality can be turned on only if undo functionality is also turned on

    //calling any of the two functions below leads to the same consequence: turn off both undo, redo functionality, and clear stored steps (if any) 
    can1.set_Undo_Redo(false, false);
    can1.set_Undo_Redo(false, true);

If the functionalities are turned on, the following functions will work, otherwise, nothing will happen:

    can1.undo();
    //set canvas and stored trace to the last state (stroke)

    can1.redo();
    //if there are undo records, return to the state of the next stored step

Note that, even included handwriting.canvas.js now, the previous way of calling recognition still works :

    handwriting.recognize(trace, options, callback);

so that you can take advantage of the handwriting.canvas object, while not changing previous code.


Supported Language

Reference

Note: Google provides a supported language list, but not the language codes. The following codes are collected from the Internet and only zh_TW, en, ja are tested. If you notice weird recognition results then maybe the language code is wrong.

Language 語言 code
Afrikaans 南非荷蘭文 af
Albanian 阿爾巴尼亞文 sq
Basque 巴斯克文 eu
Belarusian 白俄羅斯文 be
Bulgarian 保加利亞文 bg
Catalan 卡達隆尼亞文 ca
Chinese (Simplified) 中文 (簡體) zh_CN
Chinese (Traditional) 中文 (繁體) zh_TW
Croatian 克羅埃西亞文 hr
Czech 捷克文 cs
Danish 丹麥文 da
Dutch 荷蘭文 nl
English 英文 en
Estonian 愛沙尼亞文 et
Filipino 菲律賓文 fil
Finnish 芬蘭文 fi
French 法文 fr
Galician 加里西亞文 gl
German 德文 de
Greek 希臘文 el
Haitian 海地文 ht
Hindi 北印度文 hi
Hungarian 匈牙利文 hu
Icelandic 冰島文 is
Indonesian 印尼文 id
Irish 愛爾蘭文 ga
Italian 義大利文 it
Japanese 日文 ja
Korean 韓文 ko
Latin 拉丁語系 la
Latvian 拉脫維亞文 lv
Lithuanian 立陶宛文 lt
Macedonian 馬其頓文 mk
Malay 馬來文 ms
Norwegian 挪威文 no
Polish 波蘭文 pl
Portuguese (Brazil) 葡萄牙文 (巴西) pt_BR
Portuguese (Portugal) 葡萄牙文 (葡萄牙) pt_PT
Romanian 羅馬尼亞文 ro
Russian 俄文 ru
Serbian 塞爾維亞文 sr
Slovak 斯洛伐克文 sk
Slovenian 斯洛維尼亞文 sl
Spanish 西班牙文 es
Swahili 斯瓦希里文 sw
Swedish 瑞典文 sv
Thai 泰文 th
Turkish 土耳其文 tr
Ukranian 烏克蘭文 yk
Vietnamese 越南文 vi
Welsh 威爾斯文 cy

License

MIT licensed

Releases

No releases published

Packages

No packages published