User Guide
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 7
| Download | |
| Open PDF In Browser | View PDF |
A Web-based Tool for Image
Annotation
User’s Guide
Reem K. Al-Halimi
Abstract
The image annotation tool is an online tool for labeling objects within RGBA images.
The tool is based on the open source Js Segment Annotation Tool developed by Kota Yamaguchi [1]. It
is browser-based and is, therefor, compatible with a wide variety of platforms. The tool is designed for
versatility and ease of use to allow users to efficiently label large numbers of images.
What’s new in this version
To achieve our goal of creating a versatile, easy to use labeling tool, we introduce several features
including:
1. Multi-labeled segments: image segments can be annotated with more than a single label
simultaneously. The same segment can represent a tomato and an unripe fruit.
2. Segment overlap: annotated segments are not required to be disjoint. An object can be labeled
as a t-shirt and a portion of it can also be labeled as a logo.
3. Efficient annotation of disconnected objects: annotated objects are not required to be
composed of continuous segments. For example, if a tomato is partially hidden behind a stem,
the disjoint visible parts can be annotated as part of a single tomato without including the stem.
4. Marking object instances: users can annotate several instances of a car, for example, within
the same image so that each car object is an independent instance. Individual objects can then
be visualized using the Objects button as described below.
5. Annotated object information is saved in a single png file in a new, efficient, format.
Getting Started
Preparing your Data
Before your first annotation session, clearly specify your label list, input images, and any
corresponding annotation directories in a JSON file with the format:
{
“labels”:[
“label_1”,
“label_2”,
:
“label_n”
}
],
“imageURLs”:[
“image_1 full path”,
:
“image_n full path”
],
“annotationURLs”:[
“full path to the zip file containing PNG annotation files for
image_1 above”,
“full path to the zip file containing PNG annotation files for
image_2 above”,
:
“full path to the zip file containing PNG annotation files for
image_n above”
]
Save this JSON file with a .json extension under the data directory. Update main.js with the full file
name so it can serve as the input to the annotator.
Starting your Annotation Session
The annotator is compatible with most browsers including IE 11+, Firefox and Chrome. In your
browser, open the index.html file. The main page displays a numbered thumbnail list of your input
images ( Figure 1). Navigate through the image thumbnails using the Prev and Next link at the top of
the page. Left click on the image you would like to annotate. This will take you to the annotation page
for that image.
Figure 1: Main Page showing Images to Annotate
Annotating an Image
You can label an area of an image using any combination of the Polygon, Superpixel and Brush tools
as described below. First, let us take a closer look at the annotation page.
1
2
3
Figure 2: Image Annotation Page: [1] Navigation links [2] zoom, boundary, image and Objects
buttons [3] Sidebar menu
The image annotation page
The image annotation page provides several ways to interact with an image (marked in Figure 2
above):
1. The navigation links at the top allow you to go back and forth between different images to
annotate, and to go back to the main list of images (index).
2. The buttons at the top of the image are different means of interacting with the image enlarged in
Figure 3 below):
Figure 3: Buttons at the top of the image that is
being annotated
a. The Zoom button is to zoom in and out of the image thus allowing finer segments to be
annotated.
b. The Boundary button shows the superpixel segment boundaries (Figure 4) (superpixels are
clusters of similar contiguous pixels. More on superpixels below).
Figure 4: Annotation image with Boundary button on
c. The Image button shows and hides the image.
d. The Objects button allows you to visualize your annotated
segments by object. It displays each labeled object with a
different color as shown in Figure 5 below .
3. The sidebar, as shown in Figure 5, consists of
a. a clickable list of available labels for annotation.
b. The undo and redo buttons to remove the most recently marked
segments for the current label.
c. The Polygon, Superpixel, and Brush buttons which are
different ways of segmenting and labeling objects (described in
detail below).
d. The Export button saves the annotations for the current image
in PNG files in the downloads folder.
a
b
c
d
Figure 5: Sidebar on
annotation page
The Polygon Tool
Figure 7: The polygon tool used to mark the perimeter of a leaf
The Polygon tool allows you to draw random closed shapes around the areas to be segmented. This
tool is useful for annotating less homogeneous objects. You can also use the tool to remove the
annotation of a random shaped area in the image.
Annotating Polygon segments
To label an area of the image using the polygon tool:
1. Select the Polygon tool from the sidebar.
2. Move the cursor to where you would like the segment to start.
3. While the left mouse button is pressed down move the cursor to draw the boundary of the
polygon.
4. The polygon is complete when the boundary forms a closed shape and no mouse buttons are
pressed.
5. If you would like to mark the start of a new object (for example, you want to annotate a second
person) press the space bar. The next area you annotate under the same label will be marked as a
separate entity/object from previously labeled areas.
6. At any time during the annotation process you can zoom in and out of the image, toggle the
image on or off and view the annotated segments by object color using the menu on top of the
image.
Deleting a Polygon segment
To remove the labeling of an area using the polygon tool, follow the same instructions above with the
right mouse button pressed down. This approach can be used to delete any previously labeled segment
or part of a segment whether it is a polygon or a superpixel.
The Superpixel Tool
The Superpixel tool automatically divides the image into superpixels, clusters of similar pixels. The
tool uses SLIC (Simple Linear Iterative Clustering), an efficient segmentation algorithm proposed by
Achanta et. al. [2].
Annotating superpixels
1. Select the Superpixel tool from the sidebar menu.
2. Optional: Click on the boundary button at the top of the image to show the superpixel segment
boundaries.
3. Optional:
a. click on the + button beside the Boundary button to increase the size of each superpixel in
the image.
b. Or click on the – Boundary button to create smaller superpixels.
4. As you move the cursor around the image, the superpixel segments will be highlighted.
5. To annotate a segment, move the cursor to that superpixel and click the left mouse button.
6. If you would like to mark the start of a new object (for example, you want to annotate a second
person) press the space bar. The next area you annotate under the same label will be marked as a
separate entity/object from previously labeled areas.
7. At any time during the annotation process you can zoom in and out of the image, toggle the image
on or off and view the annotated segments by object color using the menu on top of the image.
Deleting a Superpixel segment
To remove the labeling of a superpixel segment, highlight it by moving the cursor over it then click the
right mouse button.
Saving your annotations
The Export button saves all label annotations of the current image to a PNG file per label in the default
Downloads folder of your browser.
Keyboard Keys Cheat Sheet
Key
Operation
Left mouse button
• annotate current superpixel segment if
using Superpixel tool.
• Continue drawing polygon if using
Polygon tool. Mark are within polygon
with current label.
Right mouse button
• Remove annotation of current superpixel
segment if using Superpixel tool.
• Continue drawing polygon if using
Polygon tool. Remove label from area
within polygon once polygon is closed.
Space bar
Mark end of current object. Next area to be
labeled will be considered part of a new
object.
Ctrl
Toggle between Superpixel and Polygon
tools.
Other Considerations
Updating your list of labels
You may update your list of labels in the input JSON file. You can remove any label and change their
order without affecting your annotations from previous sessions. However, the background label should
always be the first item in a label list.
References
[1] Pongsate Tangseng, Zhipeng Wu, Kota Yamaguchi. Looking at Outfits to Parse Clothing.
http://arxiv.org/abs/1703.01386v1 arXiv:1703.01386 [cs.CV], March 2017. Retrieved: June, 2017.
[2] Radhakrishna Achanta, Appu Shaji, Kevin Smith, Aurelien Lucchi, Pascal Fua, and Sabine
Süsstrunk, SLIC Superpixels Compared to State-of-the-art Superpixel Methods, IEEE Transactions on
Pattern Analysis and Machine Intelligence, vol. 34, num. 11, p. 2274 - 2282, May 2012.
Source Exif Data:
File Type : PDF File Type Extension : pdf MIME Type : application/pdf PDF Version : 1.4 Linearized : No Page Count : 7 Language : en-US Creator : Writer Producer : LibreOffice 5.1 Create Date : 2017:06:14 15:38:58-04:00EXIF Metadata provided by EXIF.tools