“TagHim” Image Tagging Tool v3.0 Installation and Technical description (ASP.net/MSSQL)

“TagHim” Image Tagging Tool the most simple way of multi-object tagging on picture in your notes.

“TagHim” for ASP.net, MSSQL 2005/2008, JavaScript, Ajax.

Required libraries (inclusive to the release):

• Prototype JavaScript framework, version 1.6.0.1 +,
• script.aculo.us scriptaculous.js v1.8.1 +

Installation:

1. create table:

IF NOT EXISTS (SELECT * FROM sys.objects WHERE object_id = OBJECT_ID(N'[dbo].[]') AND type in (N'U'))
BEGIN
CREATE TABLE [dbo].[](
	[ID] [int] IDENTITY(1,1) NOT NULL,
	[ImageId] [int] NOT NULL,
	[x0] [int] NOT NULL,
	[y0] [int] NOT NULL,
	[x1] [int] NOT NULL,
	[y1] [int] NOT NULL,
	[Name] [nvarchar](255) NOT NULL,
	[Description] [nvarchar](max) NULL,
	[color] [varchar](20) NULL,
	[id_account] [int] NULL,
	[email] [varchar](255) NULL,
 CONSTRAINT [PK_tag] PRIMARY KEY CLUSTERED
(
	[ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
END

2. Add to html header Java libraries

 <script src="js/prototype.js" type="text/javascript"></script>
 <script src="js/scriptaculous.js?load=builder,effects,dragdrop" type="text/javascript"></script>
 <script src="taghim/tagging.js?load=zoomer,labels,border,nameslist,reenter" type="text/javascript"></script> 

3 Add to html header CSS

<link rel="stylesheet" href="css/cropper.css" type="text/css" />

4 Object initialization.

var {VARIABLE} = new tagging(
	'{VARIABLE}',
	'{REGISTER CODE HERE}',
	'{IMAGE HTML ID}',
	'{IMAGE UNIQUE NUMBER}',
	    {
		'{OPTION}' : '{OPTION VALUE}'[,
		...]
	    }
);

{VARIABLE} – class variable, it should correspond and have the same name as an object.

{REGISTER CODE HERE} – Registration code. (your license)

{IMAGE HTML ID} - picture (object) ID of the picture we are tagging, to associate picture with tagging. I could be a free text.

{IMAGE UNIQUE NUMBER} – unique picture ID system picture ID to extract tag from tagging DB

{ ‘{OPTION}’ : ‘{OPTION VALUE}’[, ...] } – an object with configuration parameters (you can configure script initially when you creating an object, or you can configure it by calling [object].setOptions(), [object].setOption()

Object methods:

setOptions( options ) – method sets list of options for tagging.
setOption( option, value ) – Similar method to the setOptions( options ) but here you can set only one variable.
init( color ) - This method calling tagging routing.. It has just one parameter “color” of the background. The parameter “color” will be ignored if the “applyColors” option set to false. You you want to enable it you have to set “applyColors” true.
showTags() - method display all tags as text (links, html, etc.). Option ajaxReturnID should have ID of DIV element, where you want to display all text tags.
close() – turning off tagging routine.

Extended object configuration can be found on help section shied withing TagHim package.

and have a pleasant tagging

What to do now?
TagHim Demo page TagHim