A bounding box annotation widget written in CoffeeScript.
Clone or download
Latest commit 5f31537 Nov 9, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Add guide lines Nov 10, 2018
LICENSE Create LICENSE Mar 6, 2018
README.md Add guide lines Nov 10, 2018
bbox_annotator.coffee Add guide lines Nov 10, 2018
demo.html Add guide lines Nov 10, 2018
example.jpg Add guide lines Nov 10, 2018
mturk.html Add guide lines Nov 10, 2018


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


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 the coffee script to get a javascript.

coffee -c bbox_annotator.coffee

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


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) {

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.


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.
  • multiple: Defines if multiple boxes could be selected. Default is true.
  • guide: Enable vertical and horizontal guide lines. Specify true, or object that specifies color like {'color': '#fff'}.


The code may be redistributed under BSD license.