Setup: Download and install the Fluid Infusion library

1. Download a copy of the Fluid Infusion component library from:
   • http://fluidproject.org/index.php/downloads
     You only really need the "Minified deployment package," but if you want to actually look at the code, you should download the "Source package."
2. Unpack the zip file you just downloaded, and place the resulting folder somewhere convenient for your development purposes. The folder will have the release number in it's name (e.g. infusion-1.3/). The rest of this tutorial will use infusion-1.3 in its examples, but if you downloaded a different version, you'll have to adjust.
3. Download the TaggerUI component and place it in the infusion-1.3/src/components directory.

Step 1: Prepare your markup

The Tagger UI component associates itself with a HTML5 canvas element. Let's assume that you're starting with an HTML file, called myImageEditor.html which has a canvas element defined as follows:

<div class="flc-image-canvas-div">
	<canvas class="flc-image-canvas" width=750px height=750px>
	</canvas>
</div>

The TaggerUI needs to know about the 'container' of the canvas element. In this case, "flc-image-canvas-div" would be the container. That's all - these are the only changes you need to make to your HTML.

Step 2: Write the script

You'll need to create a file, say myImageEditor.js, to contain your initialization script - the script you write to apply the TaggerUI to your application.

In this file, write a function that calls the TaggerUI constructor. This will initialize the Tagger UI component for the application :

jQuery(document).ready(function () {
    var myTagger = fluid.TaggerUI(container, options);
});

Here the container is the container where the canvas element is contained. You can also pass additional options to the Tagger UI component using the options parameters. You can pass the following optional paramters: 

• lineWidth: the width of line of tag box. 
• strokeStyle: the style for borders of tags.
• fillStyle: the style for area inside the tags.
• blurColor: the color of the blurred area to be drawn around the bounding box.

In addition to the initialization of Tagger UI, you will need to manually notify the Tagger UI whenever you would like to start cropping. To begin cropping :

myTagger.init(canvas, resizeFactor, image, imageX, imageY);

Here, we pass the following parameters to the init method: 

• canvas: The canvas object with which the Tagger UI should associate. 
• resizeFactor: The factor with which the image has been resized to fit in the canvas. e.g. if the original image width is 1000px and the canvas width is 500px, then the resize factor would be 2. 
• image: The image to be drawn in canvas.
• imageX: The x coordinate for image to be drawn in canvas. 
• imageY: The y coordinate for image to be drawn in canvas. 

After the init method is called, the user can use the Tagger to select the bounding box from the image. You can also activate the keyboard accessibility for Tagger by calling the following method: 

myTagger.activateKeyboardAccessibility();

To confirm the addition of a tag, call the following method: 

myTagger.confimTagAdd(tagText);

To cancel the tag action without actually tagging the image:

myTagger.doneTagging();

To highlight a particular tag:

myTagger.highlightTag(index);

For detailed description about all the methods on tagger, see Tagger UI API

Step 3: Add the script to your HTML

You'll need to add your initialization script, along with the Fluid library, to you HTML file. In the header of the file, link to the Javascript files with <script> tags:

<script type="text/javascript" src="fluid-0.4/fluid-components/js/Fluid-all.js"></script>
<script type="text/javascript" src="infusion/src/webapp/components/TaggerUI/js/TaggerUI.js"></script>
<link rel="stylesheet" type="text/css" href="infusion/src/webapp/components/taggerUI/css/TaggerUI.css" />

NOTE that the Fluid-all.js file is minified - all of the whitespace has been removed, so it isn't really human-readable. If you're using the source distribution and you want to be able to debug the code, you'll want to include each of the required files individually. This would look like this:

<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-reset-global.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-base-global.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-text.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-layout.css" />
<link rel="stylesheet" type="text/css" href="../../taggerUI/css/TaggerUI.css" />

<!-- Fluid and jQuery Dependencies -->
<script type="text/javascript" src="infusion/src/webapp/lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="infusion/src/webapp/lib/jquery/ui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="infusion/src/webapp/framework/core/js/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="infusion/src/webapp/lib/jquery/plugins/scrollTo/js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="infusion/src/webapp/lib/swfobject/js/swfobject.js"></script>
<script type="text/javascript" src="infusion/src/webapp/lib/swfupload/js/swfupload.js"></script>
<script type="text/javascript" src="infusion/src/webapp/framework/core/js/Fluid.js"></script>
<script type="text/javascript" src="infusion/src/webapp/framework/core/js/FluidDocument.js"></script>
<script type="text/javascript" src="infusion/src/webapp/framework/core/js/FluidView.js"></script>
<script type="text/javascript" src="infusion/src/webapp/framework/core/js/DataBinding.js"></script>
<script type="text/javascript" src="infusion/src/webapp/framework/core/js/FluidIoC.js"></script>
<script type="text/javascript" src="infusion/src/webapp/framework/enhancement/js/ProgressiveEnhancement.js"></script>

<!-- Tagger UI dependencies -->
<script type="text/javascript" src="infusion/src/webapp/components/TaggerUI/js/TaggerUI.js"></script>

But all of these individual files are not necessary to make it work - the Fluid-all.js file has everything you need.

That's it! That's all you need to do to add the TaggerUI functionality to your document.