Skip to content

dimroc/head-annotator

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code
This branch is 4 commits ahead, 7 commits behind kyamagu:master.

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

Bounding box annotator

A bounding box annotation tool written in CoffeeScript/JavaScript. There is an online demo at https://kyamagu.github.io/bbox-annotator/demo.html

Contents

bbox_annotator.coffee  Main code.
demo.html              Example to host on a private server.
mturk.html             Example to use in Amazon MTurk.
README.md              This documentation.

Be sure to unescape × with × when directly editing an MTurk template on the Amazon requester UI.

Compile

Compile the coffee script to get a javascript.

coffee -c bbox_annotator.coffee

Or, go to http://coffeescript.org/ and compile the coffeescript.

Usage

Load the compiled javascript codes inside HTML.

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

Embed a block element for annotation tool and a form element in HTML.

<div id="bbox_annotator"></div>
<input id="annotation_data" name="annotation_data" type="hidden" />

Then, attach a piece of script to launch the annotation tool. The annotator takes a callback function on change of the annotation data. Use JSON format to display the value.

<script type="text/javascript">
$(document).ready(function() {
  var editor = new BBoxAnnotator({
    url: "/url/to/image.jpg",
    onchange: function(annotation) {
      $("#annotation_data").val(JSON.stringify(annotation));
    }
  });
});
</script>

The returned annotation is an array of objects. Here is an example.

[
  {
    "top": 0,
    "left": 0,
    "width": 100,
    "height": 100,
    "label", "object"
  }
]

Check the attached demo.html and mturk.html for how to use.

Options

The BBoxAnnotator object takes options to change its behavior.

  • id: CSS selector for the annotator element. Default is "#bbox_annotator".
  • input_method: One of the "text", "select", and "fixed". This will change how to input associated annotation text.
  • labels: A string, or an array of strings. Set of labels used for suggestion in "text" or "select" input. When fixed, only the first element is chosen.
  • width: Width of the image. The default is the original width of the image.
  • height: Height of the image. The default is the original height of the image.
  • show_label: Flag to display a label in the box. Default is true for "text" and "select" input, and false for "fixed" input.
  • border_width: Size of border around the image. Default is 2. Leaving it 0 can make it hard to start annotation around the image border.

License

The code may be redistributed under BSD license.

About

A bounding box annotation widget written in CoffeeScript.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 60.4%
  • CoffeeScript 39.6%