├── .gitignore
├── LICENSE
├── README.md
├── bbox_annotator.coffee
├── demo.html
├── example.jpg
└── mturk.html


/.gitignore:
--------------------------------------------------------------------------------
1 | *~
2 | .DS_Store
3 | bbox_annotator.js
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | BSD 3-Clause License
 2 | 
 3 | Copyright (c) 2018, Kota Yamaguchi
 4 | All rights reserved.
 5 | 
 6 | Redistribution and use in source and binary forms, with or without
 7 | modification, are permitted provided that the following conditions are met:
 8 | 
 9 | * Redistributions of source code must retain the above copyright notice, this
10 |   list of conditions and the following disclaimer.
11 | 
12 | * Redistributions in binary form must reproduce the above copyright notice,
13 |   this list of conditions and the following disclaimer in the documentation
14 |   and/or other materials provided with the distribution.
15 | 
16 | * Neither the name of the copyright holder nor the names of its
17 |   contributors may be used to endorse or promote products derived from
18 |   this software without specific prior written permission.
19 | 
20 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
21 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
22 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
23 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
24 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
25 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
26 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
27 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
28 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
29 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
30 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Bounding box annotator
 2 | ======================
 3 | 
 4 | A bounding box annotation tool written in CoffeeScript/JavaScript.
 5 | There is an online demo at https://kyamagu.github.io/bbox-annotator/demo.html
 6 | 
 7 | Contents
 8 | --------
 9 | 
10 |     bbox_annotator.coffee  Main code.
11 |     demo.html              Example to host on a private server.
12 |     mturk.html             Example to use in Amazon MTurk.
13 |     README.md              This documentation.
14 | 
15 | Be sure to unescape `×` with `×` when directly editing an MTurk template on
16 | the Amazon requester UI.
17 | 
18 | Compile
19 | -------
20 | 
21 | Compile the coffee script to get a javascript.
22 | 
23 |     coffee -c bbox_annotator.coffee
24 | 
25 | Or, go to http://coffeescript.org/ and compile the coffeescript.
26 | 
27 | Usage
28 | -----
29 | 
30 | Load the compiled javascript codes inside HTML.
31 | 
32 |     <script src="bbox_annotator.js" type="text/javascript"></script>
33 | 
34 | Embed a block element for annotation tool and a form element in HTML.
35 | 
36 |     <div id="bbox_annotator"></div>
37 |     <input id="annotation_data" name="annotation_data" type="hidden" />
38 | 
39 | Then, attach a piece of script to launch the annotation tool. The annotator
40 | takes a callback function on change of the annotation data. Use JSON format to
41 | display the value.
42 | 
43 |     <script type="text/javascript">
44 |     $(document).ready(function() {
45 |       var editor = new BBoxAnnotator({
46 |         url: "/url/to/image.jpg",
47 |         onchange: function(annotation) {
48 |           $("#annotation_data").val(JSON.stringify(annotation));
49 |         }
50 |       });
51 |     });
52 |     </script>
53 | 
54 | The returned annotation is an array of objects. Here is an example.
55 | 
56 |     [
57 |       {
58 |         "top": 0,
59 |         "left": 0,
60 |         "width": 100,
61 |         "height": 100,
62 |         "label", "object"
63 |       }
64 |     ]
65 | 
66 | Check the attached `demo.html` and `mturk.html` for how to use.
67 | 
68 | Options
69 | -------
70 | 
71 | The `BBoxAnnotator` object takes options to change its behavior.
72 | 
73 |  * `id`: CSS selector for the annotator element. Default is `"#bbox_annotator"`.
74 |  * `input_method`: One of the "text", "select", and "fixed". This will change
75 |                    how to input associated annotation text.
76 |  * `labels`: A string, or an array of strings. Set of labels used for suggestion
77 |              in "text" or "select" input. When fixed, only the first element is chosen.
78 |  * `width`: Width of the image. The default is the original width of the image.
79 |  * `height`: Height of the image. The default is the original height of the
80 |              image.
81 |  * `show_label`: Flag to display a label in the box. Default is true for "text"
82 |                  and "select" input, and false for "fixed" input.
83 |  * `border_width`: Size of border around the image. Default is 2. Leaving it 0
84 |                    can make it hard to start annotation around the image border.
85 |  * `multiple`: Defines if multiple boxes could be selected. Default is `true`. 
86 |  * `guide`: Enable vertical and horizontal guide lines. Specify `true`, or
87 |             object that specifies color like `{'color': '#fff'}`.
88 | 
89 | License
90 | -------
91 | 
92 | The code may be redistributed under BSD license.
93 | 


--------------------------------------------------------------------------------
/bbox_annotator.coffee:
--------------------------------------------------------------------------------
  1 | # Use coffee-script compiler to obtain a javascript file.
  2 | #
  3 | #    coffee -c bbox_annotator.coffee
  4 | #
  5 | # See http://coffeescript.org/
  6 | 
  7 | # BBox selection window.
  8 | class BBoxSelector
  9 |   # Initializes selector in the image frame.
 10 |   constructor: (image_frame, options) ->
 11 |     options ?= {}
 12 |     options.input_method ||= "text"
 13 |     @image_frame = image_frame
 14 |     @border_width = options.border_width || 2
 15 |     @selector = $('<div class="bbox_selector"></div>')
 16 |     @selector.css
 17 |       "border": (@border_width) + "px dotted rgb(127,255,127)",
 18 |       "position": "absolute"
 19 |     @image_frame.append @selector
 20 |     @selector.css
 21 |       "border-width": @border_width
 22 |     @selector.hide()
 23 |     this.create_label_box(options)
 24 | 
 25 |   # Initializes a label input box.
 26 |   create_label_box: (options) ->
 27 |     options.labels ||= ["object"]
 28 |     @label_box = $('<div class="label_box"></div>')
 29 |     @label_box.css
 30 |       "position": "absolute"
 31 |     @image_frame.append @label_box
 32 |     switch options.input_method
 33 |       when 'select'
 34 |         options.labels = [options.labels] if typeof options.labels == "string"
 35 |         @label_input = $('<select class="label_input" name="label"></select>')
 36 |         @label_box.append @label_input
 37 |         @label_input.append($('<option value>choose an item</option>'))
 38 |         for label in options.labels
 39 |           @label_input.append '<option value="' + label + '">' +
 40 |                               label + '</option>'
 41 |         @label_input.change (e) -> this.blur()
 42 |       when 'text'
 43 |         options.labels = [options.labels] if typeof options.labels == "string"
 44 |         @label_input = $('<input class="label_input" name="label" ' +
 45 |                          'type="text" value>')
 46 |         @label_box.append @label_input
 47 |         @label_input.autocomplete
 48 |           source: options.labels || ['']
 49 |           autoFocus: true
 50 |       when 'fixed'
 51 |         options.labels = options.labels[0] if $.isArray options.labels
 52 |         @label_input = $('<input class="label_input" name="label" type="text">')
 53 |         @label_box.append @label_input
 54 |         @label_input.val(options.labels)
 55 |       else
 56 |         throw 'Invalid label_input parameter: ' + options.input_method
 57 |     @label_box.hide()
 58 | 
 59 |   # Crop x and y to the image size.
 60 |   crop: (pageX, pageY) ->
 61 |     point =
 62 |       x: Math.min(Math.max(Math.round(pageX - @image_frame.offset().left), 0),
 63 |                            Math.round(@image_frame.width()-1))
 64 |       y: Math.min(Math.max(Math.round(pageY - @image_frame.offset().top), 0),
 65 |                            Math.round(@image_frame.height()-1))
 66 | 
 67 |   # When a new selection is made.
 68 |   start: (pageX, pageY) ->
 69 |     @pointer = this.crop(pageX, pageY)
 70 |     @offset = @pointer
 71 |     this.refresh()
 72 |     @selector.show()
 73 |     $('body').css('cursor', 'crosshair')
 74 |     document.onselectstart = () ->
 75 |       false
 76 | 
 77 |   # When a selection updates.
 78 |   update_rectangle: (pageX, pageY) ->
 79 |     @pointer = this.crop(pageX, pageY)
 80 |     this.refresh()
 81 | 
 82 |   # When starting to input label.
 83 |   input_label: (options) ->
 84 |     $('body').css('cursor', 'default')
 85 |     document.onselectstart = () ->
 86 |       true
 87 |     @label_box.show()
 88 |     @label_input.focus()
 89 | 
 90 |   # Finish and return the annotation.
 91 |   finish: (options) ->
 92 |     @label_box.hide()
 93 |     @selector.hide()
 94 |     data = this.rectangle()
 95 |     data.label = $.trim(@label_input.val().toLowerCase())
 96 |     @label_input.val('') unless options.input_method == 'fixed'
 97 |     data
 98 | 
 99 |   # Get a rectangle.
100 |   rectangle: () ->
101 |     x1 = Math.min(@offset.x, @pointer.x)
102 |     y1 = Math.min(@offset.y, @pointer.y)
103 |     x2 = Math.max(@offset.x, @pointer.x)
104 |     y2 = Math.max(@offset.y, @pointer.y)
105 |     rect =
106 |       left: x1
107 |       top: y1
108 |       width: x2 - x1 + 1
109 |       height: y2 - y1 + 1
110 | 
111 |   # Update css of the box.
112 |   refresh: () ->
113 |     rect = this.rectangle()
114 |     @selector.css(
115 |       left: (rect.left - @border_width) + 'px'
116 |       top: (rect.top - @border_width) + 'px'
117 |       width: rect.width + 'px'
118 |       height: rect.height + 'px'
119 |     )
120 |     @label_box.css(
121 |       left: (rect.left - @border_width) + 'px'
122 |       top: (rect.top + rect.height + @border_width) + 'px'
123 |     )
124 | 
125 |   # Return input element.
126 |   get_input_element: () ->
127 |     @label_input
128 | 
129 | # Annotator object definition.
130 | class @BBoxAnnotator
131 |   # Initialize the annotator layout and events.
132 |   constructor: (options) ->
133 |     annotator = this
134 |     @annotator_element = $(options.id || "#bbox_annotator")
135 |     @border_width = options.border_width || 2
136 |     @show_label = options.show_label || (options.input_method != "fixed")
137 | 
138 |     if options.multiple?
139 |       @multiple = options.multiple
140 |     else
141 |       @multiple = true
142 | 
143 |     @image_frame = $('<div class="image_frame"></div>')
144 |     @annotator_element.append @image_frame
145 |     annotator.initialize_guide(options.guide) if options.guide
146 | 
147 |     image_element = new Image()
148 |     image_element.src = options.url
149 |     image_element.onload = () ->
150 |       options.width ||= image_element.width
151 |       options.height ||= image_element.height
152 |       annotator.annotator_element.css
153 |         "width": (options.width + annotator.border_width) + 'px',
154 |         "height": (options.height + annotator.border_width) + 'px',
155 |         "padding-left": (annotator.border_width / 2) + 'px',
156 |         "padding-top": (annotator.border_width / 2) + 'px',
157 |         "cursor": "crosshair",
158 |         "overflow": "hidden"
159 |       annotator.image_frame.css
160 |         "background-image": "url('" + image_element.src + "')",
161 |         "width": options.width + "px",
162 |         "height": options.height + "px",
163 |         "position": "relative"
164 |       annotator.selector = new BBoxSelector(annotator.image_frame, options)
165 |       annotator.initialize_events(options)
166 |     image_element.onerror = () ->
167 |       annotator.annotator_element.text "Invalid image URL: " + options.url
168 |     @entries = []
169 |     @onchange = options.onchange
170 | 
171 |   # Initialize events.
172 |   initialize_events: (options) ->
173 |     status = 'free'
174 |     @hit_menuitem = false
175 |     annotator = this
176 |     selector = annotator.selector
177 |     @annotator_element.mousedown (e) ->
178 |       unless annotator.hit_menuitem
179 |         switch status
180 |           when 'free', 'input'
181 |             selector.get_input_element().blur() if status == 'input'
182 |             if e.which == 1 # left button
183 |               selector.start(e.pageX, e.pageY)
184 |               status = 'hold'
185 |       annotator.hit_menuitem = false
186 |       true
187 |     $(window).mousemove (e) ->
188 |       switch status
189 |         when 'hold'
190 |           selector.update_rectangle(e.pageX, e.pageY)
191 |       if annotator.guide_h
192 |         offset = annotator.image_frame.offset()
193 |         annotator.guide_h.css('top', Math.floor(e.pageY - offset.top) + 'px')
194 |         annotator.guide_v.css('left', Math.floor(e.pageX - offset.left) + 'px')
195 |       true
196 |     $(window).mouseup (e) ->
197 |       switch status
198 |         when 'hold'
199 |           selector.update_rectangle(e.pageX, e.pageY)
200 |           selector.input_label(options)
201 |           status = 'input'
202 |           selector.get_input_element().blur() if options.input_method == 'fixed'
203 |       true
204 |     selector.get_input_element().blur (e) ->
205 |       switch status
206 |         when 'input'
207 |           data = selector.finish(options)
208 |           if data.label
209 |             annotator.add_entry data
210 |             annotator.onchange annotator.entries if annotator.onchange
211 |           status = 'free'
212 |       true
213 |     selector.get_input_element().keypress (e) ->
214 |       switch status
215 |         when 'input'
216 |           selector.get_input_element().blur() if e.which == 13
217 |       e.which != 13
218 |     selector.get_input_element().mousedown (e) ->
219 |       annotator.hit_menuitem = true
220 |     selector.get_input_element().mousemove (e) ->
221 |       annotator.hit_menuitem = true
222 |     selector.get_input_element().mouseup (e) ->
223 |       annotator.hit_menuitem = true
224 |     selector.get_input_element().parent().mousedown (e) ->
225 |       annotator.hit_menuitem = true
226 | 
227 |   # Add a new entry.
228 |   add_entry: (entry) ->
229 |     unless @multiple
230 |       @annotator_element.find(".annotated_bounding_box").detach()
231 |       @entries.splice 0
232 | 
233 |     @entries.push entry
234 |     box_element = $('<div class="annotated_bounding_box"></div>')
235 |     box_element.appendTo(@image_frame).css
236 |       "border": @border_width + "px solid rgb(127,255,127)",
237 |       "position": "absolute",
238 |       "top": (entry.top - @border_width) + "px",
239 |       "left": (entry.left - @border_width) + "px",
240 |       "width": entry.width + "px",
241 |       "height": entry.height + "px",
242 |       "color": "rgb(127,255,127)",
243 |       "font-family": "monospace",
244 |       "font-size": "small"
245 |     close_button = $('<div></div>').appendTo(box_element).css
246 |       "position": "absolute",
247 |       "top": "-8px",
248 |       "right": "-8px",
249 |       "width": "16px",
250 |       "height": "0",
251 |       "padding": "16px 0 0 0",
252 |       "overflow": "hidden",
253 |       "color": "#fff",
254 |       "background-color": "#030",
255 |       "border": "2px solid #fff",
256 |       "-moz-border-radius": "18px",
257 |       "-webkit-border-radius": "18px",
258 |       "border-radius": "18px",
259 |       "cursor": "pointer",
260 |       "-moz-user-select": "none",
261 |       "-webkit-user-select": "none",
262 |       "user-select": "none",
263 |       "text-align": "center"
264 |     $("<div></div>").appendTo(close_button).html('&#215;').css
265 |       "display": "block",
266 |       "text-align": "center",
267 |       "width": "16px",
268 |       "position": "absolute",
269 |       "top": "-2px",
270 |       "left": "0",
271 |       "font-size": "16px",
272 |       "line-height": "16px",
273 |       "font-family": '"Helvetica Neue", Consolas, Verdana, Tahoma, Calibri, ' +
274 |                      'Helvetica, Menlo, "Droid Sans", sans-serif',
275 |     text_box = $('<div></div>').appendTo(box_element).css
276 |       "overflow": "hidden"
277 |     text_box.text(entry.label) if @show_label
278 |     annotator = this
279 |     box_element.hover ((e) -> close_button.show()), ((e) -> close_button.hide())
280 |     close_button.mousedown (e) ->
281 |       annotator.hit_menuitem = true
282 |     close_button.click (e) ->
283 |       clicked_box = close_button.parent(".annotated_bounding_box")
284 |       index = clicked_box.prevAll(".annotated_bounding_box").length
285 |       clicked_box.detach()
286 |       annotator.entries.splice index, 1
287 |       annotator.onchange annotator.entries
288 |     close_button.hide()
289 | 
290 |   # Clear all entries.
291 |   clear_all: (e) ->
292 |     @annotator_element.find(".annotated_bounding_box").detach()
293 |     this.entries.splice 0
294 |     this.onchange this.entries
295 | 
296 |   # Add crosshair guide.
297 |   initialize_guide: (options) ->
298 |     @guide_h = $('<div class="guide_h"></div>').appendTo(@image_frame).css
299 |       "border": "1px dotted " + (options.color || '#000'),
300 |       "height": "0",
301 |       "width": "100%",
302 |       "position": "absolute",
303 |       "top": "0",
304 |       "left": "0"
305 |     @guide_v = $('<div class="guide_v"></div>').appendTo(@image_frame).css
306 |       "border": "1px dotted " + (options.color || '#000'),
307 |       "height": "100%",
308 |       "width": "0",
309 |       "position": "absolute",
310 |       "top": "0",
311 |       "left": "0"
312 | 


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <title>Bounding box annotator demo</title>
 4 | <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
 5 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 6 | <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
 7 | <script src="bbox_annotator.js"></script>
 8 | </head>
 9 | <body>
10 | 
11 | <h1>Bounding box annotator demo</h1>
12 | <div id="bbox_annotator" style="display:inline-block"></div>
13 | <div style="display:inline-block;vertical-align:top;">
14 |   <div>
15 |     <textarea id="annotation_data" name="annotation" rows="30" cols="50" style="font-family:monospace;" readonly></textarea>
16 |   </div>
17 |   <div>
18 |     <input id="reset_button" type="reset" />
19 |   </div>
20 | </div>
21 | 
22 | <script type="text/javascript">
23 | $(document).ready(function() {
24 |   // Initialize the bounding-box annotator.
25 |   var annotator = new BBoxAnnotator({
26 |     url: "example.jpg",
27 |     input_method: 'fixed',    // Can be one of ['text', 'select', 'fixed']
28 |     labels: "object",
29 |     guide: true,
30 |     onchange: function(entries) {
31 |       // Input the text area on change. Use "hidden" input tag unless debugging.
32 |       // <input id="annotation_data" name="annotation_data" type="hidden" />
33 |       // $("#annotation_data").val(JSON.stringify(entries))
34 |       $("#annotation_data").text(JSON.stringify(entries, null, "  "));
35 |     }
36 |   });
37 |   // Initialize the reset button.
38 |   $("#reset_button").click(function(e) {
39 |     annotator.clear_all();
40 |   })
41 | });
42 | </script>
43 | 
44 | </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/example.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyamagu/bbox-annotator/5f31537e436c31d5618dc1c521d2a4344f11809e/example.jpg


--------------------------------------------------------------------------------
/mturk.html:
--------------------------------------------------------------------------------
  1 | <div style="display:none;">
  2 | <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
  3 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  4 | <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
  5 | </div>
  6 | 
  7 | <div style="display:inline-block;vertical-align:top;">
  8 |   <h1>Annotate objects in the picture</h1>
  9 |   <p>
 10 |     Draw a rectangle over an object with mouse. Then, name that object.
 11 |   </p>
 12 |   <div>
 13 |     <label for="comment"><em>Comment:</em></label><br />
 14 |     <textarea id="comment_area" name="comment"></textarea>
 15 |   </div>
 16 |   <p id="button_paragraph">
 17 |     <input id="annotation_data" name="annotation_data" type="hidden" />
 18 |     <input id="reset_button" type="button" value="Reset" />
 19 |   </p>
 20 | </div>
 21 | <div id="bbox_annotator" style="display:inline-block"></div>
 22 | 
 23 | <script type="text/javascript">
 24 | (function() {
 25 |   // Use coffee-script compiler to obtain a javascript file.
 26 | 
 27 |   //    coffee -c bbox_annotator.coffee
 28 | 
 29 |   // See http://coffeescript.org/
 30 | 
 31 |   // BBox selection window.
 32 |   var BBoxSelector;
 33 | 
 34 |   BBoxSelector = class BBoxSelector {
 35 |     // Initializes selector in the image frame.
 36 |     constructor(image_frame, options) {
 37 |       if (options == null) {
 38 |         options = {};
 39 |       }
 40 |       options.input_method || (options.input_method = "text");
 41 |       this.image_frame = image_frame;
 42 |       this.border_width = options.border_width || 2;
 43 |       this.selector = $('<div class="bbox_selector"></div>');
 44 |       this.selector.css({
 45 |         "border": this.border_width + "px dotted rgb(127,255,127)",
 46 |         "position": "absolute"
 47 |       });
 48 |       this.image_frame.append(this.selector);
 49 |       this.selector.css({
 50 |         "border-width": this.border_width
 51 |       });
 52 |       this.selector.hide();
 53 |       this.create_label_box(options);
 54 |     }
 55 | 
 56 |     // Initializes a label input box.
 57 |     create_label_box(options) {
 58 |       var i, label, len, ref;
 59 |       options.labels || (options.labels = ["object"]);
 60 |       this.label_box = $('<div class="label_box"></div>');
 61 |       this.label_box.css({
 62 |         "position": "absolute"
 63 |       });
 64 |       this.image_frame.append(this.label_box);
 65 |       switch (options.input_method) {
 66 |         case 'select':
 67 |           if (typeof options.labels === "string") {
 68 |             options.labels = [options.labels];
 69 |           }
 70 |           this.label_input = $('<select class="label_input" name="label"></select>');
 71 |           this.label_box.append(this.label_input);
 72 |           this.label_input.append($('<option value>choose an item</option>'));
 73 |           ref = options.labels;
 74 |           for (i = 0, len = ref.length; i < len; i++) {
 75 |             label = ref[i];
 76 |             this.label_input.append('<option value="' + label + '">' + label + '</option>');
 77 |           }
 78 |           this.label_input.change(function(e) {
 79 |             return this.blur();
 80 |           });
 81 |           break;
 82 |         case 'text':
 83 |           if (typeof options.labels === "string") {
 84 |             options.labels = [options.labels];
 85 |           }
 86 |           this.label_input = $('<input class="label_input" name="label" ' + 'type="text" value>');
 87 |           this.label_box.append(this.label_input);
 88 |           this.label_input.autocomplete({
 89 |             source: options.labels || [''],
 90 |             autoFocus: true
 91 |           });
 92 |           break;
 93 |         case 'fixed':
 94 |           if ($.isArray(options.labels)) {
 95 |             options.labels = options.labels[0];
 96 |           }
 97 |           this.label_input = $('<input class="label_input" name="label" type="text">');
 98 |           this.label_box.append(this.label_input);
 99 |           this.label_input.val(options.labels);
100 |           break;
101 |         default:
102 |           throw 'Invalid label_input parameter: ' + options.input_method;
103 |       }
104 |       return this.label_box.hide();
105 |     }
106 | 
107 |     // Crop x and y to the image size.
108 |     crop(pageX, pageY) {
109 |       var point;
110 |       return point = {
111 |         x: Math.min(Math.max(Math.round(pageX - this.image_frame.offset().left), 0), Math.round(this.image_frame.width() - 1)),
112 |         y: Math.min(Math.max(Math.round(pageY - this.image_frame.offset().top), 0), Math.round(this.image_frame.height() - 1))
113 |       };
114 |     }
115 | 
116 |     // When a new selection is made.
117 |     start(pageX, pageY) {
118 |       this.pointer = this.crop(pageX, pageY);
119 |       this.offset = this.pointer;
120 |       this.refresh();
121 |       this.selector.show();
122 |       $('body').css('cursor', 'crosshair');
123 |       return document.onselectstart = function() {
124 |         return false;
125 |       };
126 |     }
127 | 
128 |     // When a selection updates.
129 |     update_rectangle(pageX, pageY) {
130 |       this.pointer = this.crop(pageX, pageY);
131 |       return this.refresh();
132 |     }
133 | 
134 |     // When starting to input label.
135 |     input_label(options) {
136 |       $('body').css('cursor', 'default');
137 |       document.onselectstart = function() {
138 |         return true;
139 |       };
140 |       this.label_box.show();
141 |       return this.label_input.focus();
142 |     }
143 | 
144 |     // Finish and return the annotation.
145 |     finish(options) {
146 |       var data;
147 |       this.label_box.hide();
148 |       this.selector.hide();
149 |       data = this.rectangle();
150 |       data.label = $.trim(this.label_input.val().toLowerCase());
151 |       if (options.input_method !== 'fixed') {
152 |         this.label_input.val('');
153 |       }
154 |       return data;
155 |     }
156 | 
157 |     // Get a rectangle.
158 |     rectangle() {
159 |       var rect, x1, x2, y1, y2;
160 |       x1 = Math.min(this.offset.x, this.pointer.x);
161 |       y1 = Math.min(this.offset.y, this.pointer.y);
162 |       x2 = Math.max(this.offset.x, this.pointer.x);
163 |       y2 = Math.max(this.offset.y, this.pointer.y);
164 |       return rect = {
165 |         left: x1,
166 |         top: y1,
167 |         width: x2 - x1 + 1,
168 |         height: y2 - y1 + 1
169 |       };
170 |     }
171 | 
172 |     // Update css of the box.
173 |     refresh() {
174 |       var rect;
175 |       rect = this.rectangle();
176 |       this.selector.css({
177 |         left: (rect.left - this.border_width) + 'px',
178 |         top: (rect.top - this.border_width) + 'px',
179 |         width: rect.width + 'px',
180 |         height: rect.height + 'px'
181 |       });
182 |       return this.label_box.css({
183 |         left: (rect.left - this.border_width) + 'px',
184 |         top: (rect.top + rect.height + this.border_width) + 'px'
185 |       });
186 |     }
187 | 
188 |     // Return input element.
189 |     get_input_element() {
190 |       return this.label_input;
191 |     }
192 | 
193 |   };
194 | 
195 |   // Annotator object definition.
196 |   this.BBoxAnnotator = class BBoxAnnotator {
197 |     // Initialize the annotator layout and events.
198 |     constructor(options) {
199 |       var annotator, image_element;
200 |       annotator = this;
201 |       this.annotator_element = $(options.id || "#bbox_annotator");
202 |       this.border_width = options.border_width || 2;
203 |       this.show_label = options.show_label || (options.input_method !== "fixed");
204 |       if (options.multiple != null) {
205 |         this.multiple = options.multiple;
206 |       } else {
207 |         this.multiple = true;
208 |       }
209 |       this.image_frame = $('<div class="image_frame"></div>');
210 |       this.annotator_element.append(this.image_frame);
211 |       if (options.guide) {
212 |         annotator.initialize_guide(options.guide);
213 |       }
214 |       image_element = new Image();
215 |       image_element.src = options.url;
216 |       image_element.onload = function() {
217 |         options.width || (options.width = image_element.width);
218 |         options.height || (options.height = image_element.height);
219 |         annotator.annotator_element.css({
220 |           "width": (options.width + annotator.border_width) + 'px',
221 |           "height": (options.height + annotator.border_width) + 'px',
222 |           "padding-left": (annotator.border_width / 2) + 'px',
223 |           "padding-top": (annotator.border_width / 2) + 'px',
224 |           "cursor": "crosshair",
225 |           "overflow": "hidden"
226 |         });
227 |         annotator.image_frame.css({
228 |           "background-image": "url('" + image_element.src + "')",
229 |           "width": options.width + "px",
230 |           "height": options.height + "px",
231 |           "position": "relative"
232 |         });
233 |         annotator.selector = new BBoxSelector(annotator.image_frame, options);
234 |         return annotator.initialize_events(options);
235 |       };
236 |       image_element.onerror = function() {
237 |         return annotator.annotator_element.text("Invalid image URL: " + options.url);
238 |       };
239 |       this.entries = [];
240 |       this.onchange = options.onchange;
241 |     }
242 | 
243 |     // Initialize events.
244 |     initialize_events(options) {
245 |       var annotator, selector, status;
246 |       status = 'free';
247 |       this.hit_menuitem = false;
248 |       annotator = this;
249 |       selector = annotator.selector;
250 |       this.annotator_element.mousedown(function(e) {
251 |         if (!annotator.hit_menuitem) {
252 |           switch (status) {
253 |             case 'free':
254 |             case 'input':
255 |               if (status === 'input') {
256 |                 selector.get_input_element().blur();
257 |               }
258 |               if (e.which === 1) { // left button
259 |                 selector.start(e.pageX, e.pageY);
260 |                 status = 'hold';
261 |               }
262 |           }
263 |         }
264 |         annotator.hit_menuitem = false;
265 |         return true;
266 |       });
267 |       $(window).mousemove(function(e) {
268 |         var offset;
269 |         switch (status) {
270 |           case 'hold':
271 |             selector.update_rectangle(e.pageX, e.pageY);
272 |         }
273 |         if (annotator.guide_h) {
274 |           offset = annotator.image_frame.offset();
275 |           annotator.guide_h.css('top', Math.floor(e.pageY - offset.top) + 'px');
276 |           annotator.guide_v.css('left', Math.floor(e.pageX - offset.left) + 'px');
277 |         }
278 |         return true;
279 |       });
280 |       $(window).mouseup(function(e) {
281 |         switch (status) {
282 |           case 'hold':
283 |             selector.update_rectangle(e.pageX, e.pageY);
284 |             selector.input_label(options);
285 |             status = 'input';
286 |             if (options.input_method === 'fixed') {
287 |               selector.get_input_element().blur();
288 |             }
289 |         }
290 |         return true;
291 |       });
292 |       selector.get_input_element().blur(function(e) {
293 |         var data;
294 |         switch (status) {
295 |           case 'input':
296 |             data = selector.finish(options);
297 |             if (data.label) {
298 |               annotator.add_entry(data);
299 |               if (annotator.onchange) {
300 |                 annotator.onchange(annotator.entries);
301 |               }
302 |             }
303 |             status = 'free';
304 |         }
305 |         return true;
306 |       });
307 |       selector.get_input_element().keypress(function(e) {
308 |         switch (status) {
309 |           case 'input':
310 |             if (e.which === 13) {
311 |               selector.get_input_element().blur();
312 |             }
313 |         }
314 |         return e.which !== 13;
315 |       });
316 |       selector.get_input_element().mousedown(function(e) {
317 |         return annotator.hit_menuitem = true;
318 |       });
319 |       selector.get_input_element().mousemove(function(e) {
320 |         return annotator.hit_menuitem = true;
321 |       });
322 |       selector.get_input_element().mouseup(function(e) {
323 |         return annotator.hit_menuitem = true;
324 |       });
325 |       return selector.get_input_element().parent().mousedown(function(e) {
326 |         return annotator.hit_menuitem = true;
327 |       });
328 |     }
329 | 
330 |     // Add a new entry.
331 |     add_entry(entry) {
332 |       var annotator, box_element, close_button, text_box;
333 |       if (!this.multiple) {
334 |         this.annotator_element.find(".annotated_bounding_box").detach();
335 |         this.entries.splice(0);
336 |       }
337 |       this.entries.push(entry);
338 |       box_element = $('<div class="annotated_bounding_box"></div>');
339 |       box_element.appendTo(this.image_frame).css({
340 |         "border": this.border_width + "px solid rgb(127,255,127)",
341 |         "position": "absolute",
342 |         "top": (entry.top - this.border_width) + "px",
343 |         "left": (entry.left - this.border_width) + "px",
344 |         "width": entry.width + "px",
345 |         "height": entry.height + "px",
346 |         "color": "rgb(127,255,127)",
347 |         "font-family": "monospace",
348 |         "font-size": "small"
349 |       });
350 |       close_button = $('<div></div>').appendTo(box_element).css({
351 |         "position": "absolute",
352 |         "top": "-8px",
353 |         "right": "-8px",
354 |         "width": "16px",
355 |         "height": "0",
356 |         "padding": "16px 0 0 0",
357 |         "overflow": "hidden",
358 |         "color": "#fff",
359 |         "background-color": "#030",
360 |         "border": "2px solid #fff",
361 |         "-moz-border-radius": "18px",
362 |         "-webkit-border-radius": "18px",
363 |         "border-radius": "18px",
364 |         "cursor": "pointer",
365 |         "-moz-user-select": "none",
366 |         "-webkit-user-select": "none",
367 |         "user-select": "none",
368 |         "text-align": "center"
369 |       });
370 |       $("<div></div>").appendTo(close_button).html('×').css({
371 |         "display": "block",
372 |         "text-align": "center",
373 |         "width": "16px",
374 |         "position": "absolute",
375 |         "top": "-2px",
376 |         "left": "0",
377 |         "font-size": "16px",
378 |         "line-height": "16px",
379 |         "font-family": '"Helvetica Neue", Consolas, Verdana, Tahoma, Calibri, ' + 'Helvetica, Menlo, "Droid Sans", sans-serif'
380 |       });
381 |       text_box = $('<div></div>').appendTo(box_element).css({
382 |         "overflow": "hidden"
383 |       });
384 |       if (this.show_label) {
385 |         text_box.text(entry.label);
386 |       }
387 |       annotator = this;
388 |       box_element.hover((function(e) {
389 |         return close_button.show();
390 |       }), (function(e) {
391 |         return close_button.hide();
392 |       }));
393 |       close_button.mousedown(function(e) {
394 |         return annotator.hit_menuitem = true;
395 |       });
396 |       close_button.click(function(e) {
397 |         var clicked_box, index;
398 |         clicked_box = close_button.parent(".annotated_bounding_box");
399 |         index = clicked_box.prevAll(".annotated_bounding_box").length;
400 |         clicked_box.detach();
401 |         annotator.entries.splice(index, 1);
402 |         return annotator.onchange(annotator.entries);
403 |       });
404 |       return close_button.hide();
405 |     }
406 | 
407 |     // Clear all entries.
408 |     clear_all(e) {
409 |       this.annotator_element.find(".annotated_bounding_box").detach();
410 |       this.entries.splice(0);
411 |       return this.onchange(this.entries);
412 |     }
413 | 
414 |     // Add crosshair guide.
415 |     initialize_guide(options) {
416 |       this.guide_h = $('<div class="guide_h"></div>').appendTo(this.image_frame).css({
417 |         "border": "1px dotted " + (options.color || '#000'),
418 |         "height": "0",
419 |         "width": "100%",
420 |         "position": "absolute",
421 |         "top": "0",
422 |         "left": "0"
423 |       });
424 |       return this.guide_v = $('<div class="guide_v"></div>').appendTo(this.image_frame).css({
425 |         "border": "1px dotted " + (options.color || '#000'),
426 |         "height": "100%",
427 |         "width": "0",
428 |         "position": "absolute",
429 |         "top": "0",
430 |         "left": "0"
431 |       });
432 |     }
433 | 
434 |   };
435 | 
436 | }).call(this);
437 | 
438 | // Main entry point. Use a placeholder for image urls.
439 | $(document).ready(function() {
440 |   var assignment_id = turkGetParam('assignmentId', "");
441 |   // Initialize the bounding-box annotator.
442 |   var annotator = new BBoxAnnotator({
443 |     url: "${image_url}",
444 |     input_method: 'text', // Can be one of ['text', 'select', 'fixed']
445 |     labels: ["dress", "top", "skirt", "pants", "shoes"], // Label of the object.
446 |     onchange: function(entries) {
447 |       $("#annotation_data").val(JSON.stringify(entries));
448 |       if (entries.length > 0 &&
449 |           assignment_id != "" &&
450 |           assignment_id != "ASSIGNMENT_ID_NOT_AVAILABLE") {
451 |         $("#submitButton").removeAttr("disabled");
452 |       }
453 |       else {
454 |         $("#submitButton").attr("disabled", "disabled");
455 |       }
456 |     }
457 |   });
458 |   // Initialize the reset button.
459 |   $("#reset_button").click(function(e) {
460 |     annotator.clear_all();
461 |   });
462 |   // Disable the submission at the beginning.
463 |   $("#submitButton").attr("disabled", "disabled");
464 |   $("#submitButton").detach().appendTo("#button_paragraph");
465 |   if (assignment_id == "ASSIGNMENT_ID_NOT_AVAILABLE") {
466 |     $("#submitButton").val("This is preview");
467 |   }
468 |   console.log(assignment_id);
469 | });
470 | </script>
471 | 


--------------------------------------------------------------------------------