Written by Jianxiong Xiao
DrawMe supports all major browsers, and is currently implemented using HTML5 canvas for non-IE browsers (Firefox, Chrome, Safari, etc.), and VML (Google encanvas) for IE browser. It is compatible with the latest browsers, and none-IE browsers and IE9 are all going to support HTML5 Canvas.
There are three folders (turk_template_polygon, turk_template_rectangle, turk_template_polygon_rectangle) provided for handling different shape of labeling: polygon only, rectangle only, both polygon and rectangle (If you click only two points, it is going to be a rectangle. If you click more than two points, it is going to be a polygon.). The Amazon Mechanical Turk Template is stored in DrawMe.html in each folder. You can use a text editor to open it and copy to Amazon Mechanical Turk website. The turk_input_example.csv is an example of the input parameters for the turk tasks. URLimage column is the full URLs for the images that are going to be labeled. MinAcceptNumber column is the minimal acceptable number of polygons/rectangles you want the Turker to label before they can submit the result. For example, usually you may need them to label at least something before submission. Then, you can set MinAcceptNumber to be 1.
The image is supposed to be placed at Images/folder_name/image_name.jpg . And the folder_name and image_name is passed throught URL. You can try the following link to see how things work.
The labeled data is stored at the object array named main_canvas.annotations. You are required to write your own code to store this data into your own server-end or database. If you want to also use JSON to stringify the data into JSON format, you can refer to the examples for Amazon Mechanical Turk templates.
Label a polygon: :
1. Start by pressing the left mouse button at some point along the boundary of the object.
2. Continue clicking along the boundary of the object to create a polygon.
3. Once you have finished clicking along the boundary of the object, either click on the first point or press the right mouse button to complete the polygon.
Select polygon: : Once you have finished a polygon, you can click on [Editing] mode and move your mouse to the boundary of the polygon to click and select it. Once the polygon is selected, its control points will be visible and you can drag (hold the left mouse button down) a control point to move it to a new position. Then click anywhere in the image to deselect the polygon.
Delete segments: If you want to delete one segment of the polygon before finishing the polygon, click on [Delete Last Control Point]. Once the polygon is closed, you can only delete the whole polygon by first select the polygon and then clicking on [Delete Selected Polygon]
Please cite the following paper if you use this code:
J. Xiao, J. Hays, K. Ehinger, A. Oliva, and A. Torralba
SUN Database: Large-scale Scene Recognition from Abbey to Zoo
Proceedings of 23rd IEEE Conference on Computer Vision and Pattern Recognition (CVPR2010)
Please contact me (Jianxiong Xiao) for bug or broken link report. If you are a very good graphic design artist and want to design some skins for this code, please send me an email.
This software is available for only non-commercial use. See the attached license in LICENSE.txt.
LabelMe is very helpful to provide examples in some part of the code. And the code makes use of Google Encanvas library and JSON library. We would like to thank Zheng Wu for inspiring discussion at the early stage of forming the idea to have this software.