Installation (PHP/MYSQL)

“TagHim” Image Tagging Tool v4.0 Installation and Technical description (PHP/MYSQL)

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

“TagHim” for PHP, MySQL, JavaScript, Ajax.

Required libraries (inclusive to the release):

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

! IMPORTANT

If you are using library jQuery you have to set it to non conflict mode:
jQuery.noConflict();

Connect Cascading Style Sheets and needed libraries to your page:

<link rel="stylesheet" href="css/cropper.css" type="text/css" />
<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>

Important to connect library scriptaculous with builder,effects and dragdrop, by using command “?load=builder,effects,dragdrop“.

To connect TagHim modules use “tagging.js?load=zoomer,…” simply point to all plugins separated by com. All plugins should be in the same folder as library tagging.js.

1 Create table:

CREATE TABLE tag (
  id INT(11) AUTO_INCREMENT,
  image_id INT(11) NOT NULL,
  x0 INT(11) NOT NULL,
  y0 INT(11) NOT NULL,
  x1 INT(11) NOT NULL,
  y1 INT(11) NOT NULL,
  name VARCHAR(255) NOT NULL,
  description TEXT DEFAULT NULL,
  color VARCHAR(20) DEFAULT NULL,
  id_account BIGINT(20) DEFAULT NULL,
  email VARCHAR(100) DEFAULT NULL,
  PRIMARY KEY (id)
)
ENGINE = INNODB
CHARACTER SET latin1 COLLATE latin1_swedish_ci;

2 Add Java libraries to html header


<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 CSS to html header


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

4 Set the image you want to tag (we recommend to use <div> tags to embed the picture). Create an object (see Object initialization).

5. To initiate tagging dialog you have to call method {variable}.init( [color] ); This method has an optional parameter that allows to ser border color of the tagging area. An example {variable}.init( [#ff0000] ); or {variable}.init( [red] );

Object initialization

To make script work you have to create new object. The format is shown bellow:

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

Announcing variable {VARIABLE}, where we saving object “tagging”:

{VARIABLE} – 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() (see. Object methods) by using paramieters described in Object configuration

Description is good to have but example is better

)

var taghim = new tagging(
			'taghim',
			'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
			'cropp',
			3,
			{
				ajaxRequestURL : 'tag.php',
				ajaxReturnID : 'ret',
				showDescription : true,
				autoInit : false,
				displayOnInit : false,
				applyColors: true,
				minWidth : 50,
				minHeight : 50
			}
			 );

Properties and Object methods

Properties

Version – return script version.
Example:
alert( [object].Version );

errorFunction – this propertie allow to add your own method to output errors if they occured.
Example:
[object].errorFunction = function( sErrorText ){ alert( sErrorText ); };

captions – this propertie store a list of thext variables. So you can modify standart text descriptions like buttons description, etc.
{ okButton : 'OK', cancelButton : 'Cancel', nameText : 'Name', descriptionText : 'Description' }
Example:
[object].captions['okButton'] = 'Save';

Methods

setOptions( options ) – method sets list of options for tagging.
Example:
[object].setOptions( { showTagsOnImage : true, minWidth : 40, minHeight : 30 } );
So option showTagsOnImage set to enable will show all tags on script initialization, by default it set to false, minWidth – minimum width for tagging area 40px пїЅ minHeight – minimum height for tagging area 30px.

setOption( option, value ) – Similar method to the setOptions( options ) but here you can set only one variable.
Example:
[object].setOption( 'ajaxReturnID', 'DivRoReturnData' );
This function will set to the valuable ajaxReturnID the value ‘DivRoReturnData’.

init( color ) – This method calling tagging routing.. It has just one parameter “color” of the background. The parameter “collor” will be ignored if the “applyColors” option set to false. You you want to enable it you have to set “applyColors” true.
Example:
[object].init( '#00FF00' ); пїЅпїЅпїЅ [object].init( 'green' );

editTag( id ) – this method run a process that allow to edit already existing tag. It accept only one paramieter – tag ID.
Example:
[object].editTag( 101 ); or [object].editTag( '48' );
it will send comand to edit tags with id = 101 or 48

deleteTag( id ) – this method is deleting tag. It accept only one paramieter – tag ID.
Example:
[object].deleteTag( 101 ); or [object].editTag( '48' );
Delete tags with id = 101 or 48

hideTag() – This methos is hiding visible tags.
Example:
[object].hideTag();
To hide all tags

registerTag( id, x0, x1, y0, y1, descr, color, name, additions ) – This method is registering a new tag. registerTag can have paramieters:

id – int value. Unic identificator (tag ID)
x0 – int value. start x coordinate in pixels
x1 – int value. end x coordinate in pixels
y0 – int value. start y coordinate in pixels
y1 – int value. end y coordinate in pixels
descr – string value. This is tag description, enabled if coresponded mode is on (see. Object configuration)
color – string value. Tab border color(see. Object configuration)
name – string value. Tag name.
additions – object value. Additional tags settings and tag values, for plugin use

Example:
[object].registerTag( 101, 10, 35, 30, 90, '', 'red', 'Some tag name', { 'user' : '20' } );
Here we registering tag with width starting at 10th to 35th pixel and height from 30th to 90th pixel, without text description, red border color with name ‘Some tag name’ and one additional paramieter ‘user’ which has value ‘20′

unregisterTag( id ) – this methos is deleting registered tag from the local script. It have only one paramieter thag id. It is diferent to deleteTag because it does not sent request to delete tag. The tag is only removed from local script.
Example:
[object].unregisterTag( 10 );

clearTagsList() – This method cleaning all tags from loca version of script.
Example:
[object].clearTagsList();

getTagsList() – This method allow to get a list of existing tags.

Example:
[object].getTagsList();

getTagInfo( id ) – You can call each tag individually to obtain full information about tag.
Example:
[object].getTagInfo( 21 );

getCurrentTag() – You can obtain full information about tag you working with currently.
Example:
[object].getCurrentTag();

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.
Example:
[object].showTags();

close() – turning off tagging routine.
Example:
[object].close();

Object configuration

Object configuration can be done in a couple different ways.

1. During object initialization.(see. Object initialization)
2. By setting option array setOptions setOptions(see. Object Methods)
3. By setting option by option with method setOption setOption(see. Object Methods)

Main setting and values.

Option name	Value	Default value	Description
ajaxRequestURL	String	null	Required function. Path to PHP or ASP script
ajaxReturnID	String	null	Required function. Should have element ID where will be returned result from PHP or ASP script.
style	String	imgTag_	CSS prefix for custom design settings.
applyColors	true/false	false	Allowing or disallowing custom background tagging color
backgroundColor	String (Color in HTML format)	null	Set custom background color.
autoInit	true/false	false	Turn on/off autostart for tagging routine
displayOnInit	true/false	false	Turn on/off auto-display of border for tagged elements
showDescription	true/false	false	Turn on/off additional description for tags.
ratioDim	object { x : 0, y : 0 }	{ x : 0, y : 0 }	Tagging area ratio, the (x:0, y:0) – ration is disabled.
minWidth	Integer	0	Min value for width. 0 – is disabled.
minHeight	Integer	0	Min value for height . 0 – is disabled.
maxWidth	Integer	0	Max value for width. 0 – is disabled
maxHeight	Integer	0	Max value for height . 0 – is disabled.
margin	Integer	10	Margin (px) between tag and working zone
onTagClick	function	null	This fuction run upon mous click on tag. It has tag id automaticaly.

and have a pleasant tagging

What to do now?
TagHim Demo page TagHim